Updated column views

packages/column-views/src/index.ts

@@ -7,14 +7,15 @@ import { hyperStyled } from "@macrostrat/hyper";
 import { Timescale, TimescaleOrientation } from "@macrostrat/timescale";
 import { useDarkMode } from "@macrostrat/ui-components";
 import classNames from "classnames";
-import { group, merge } from "d3-array";
+import { group } from "d3-array";
 import { useContext, useMemo } from "react";
 import { AgeAxis } from "./age-axis";
 import styles from "./column.module.sass";
 import { CompositeUnitsColumn, TrackedLabeledUnit } from "./units";
 import { IUnit } from "./units/types";
 export * from "./units";
 export * from "./age-axis";
+import { ReactNode } from "react";
 
 import { ColumnAxisType } from "@macrostrat/column-components";
 
@@ -35,6 +36,7 @@ interface IColumnProps {
   width?: number;
   columnWidth?: number;
   targetUnitHeight?: number;
+  children?: ReactNode;
 }
 
 const timescaleLevels = [2, 5];
@@ -178,7 +180,7 @@ function groupUnitsIntoSections(units: IUnit[]): SectionInfo[] {
   });
 }
 
-function mergeOverlappingSections(sections: SectionInfo[]): SectionInfo[] {
+function _mergeOverlappingSections(sections: SectionInfo[]): SectionInfo[] {
   /** Columns can have sections that overlap in time. Here, we merge overlapping
    * sections into a single section to correctly render gap-bound packages.
    */
@@ -218,7 +220,12 @@ function sectionClassName(section: SectionInfo) {
 }
 
 function Column(
-  props: IColumnProps & { unconformityLabels: boolean; className?: string }
+  props: IColumnProps & {
+    unconformityLabels: boolean;
+    className?: string;
+    mergeOverlappingSections?: boolean;
+    showLabelColumn?: boolean;
+  }
 ) {
   const {
     data,
@@ -229,14 +236,19 @@ function Column(
     columnWidth = 150,
     className: baseClassName,
     showLabelColumn = true,
+    mergeOverlappingSections = true,
+    children,
     ...rest
   } = props;
 
   const darkMode = useDarkMode();
-  const sectionGroups = useMemo(
-    () => mergeOverlappingSections(groupUnitsIntoSections(data)),
-    [data]
-  );
+  const sectionGroups = useMemo(() => {
+    let res = groupUnitsIntoSections(data);
+    if (mergeOverlappingSections) {
+      res = _mergeOverlappingSections(res);
+    }
+    return res;
+  }, [data, mergeOverlappingSections]);
 
   const className = classNames(baseClassName, {
     "dark-mode": darkMode?.isEnabled ?? false,
@@ -272,6 +284,7 @@ function Column(
           ]);
         })
       ),
+      children,
     ])
   );
 }

packages/column-views/src/selection-popover.module.sass

@@ -0,0 +1,66 @@
+.popover-main
+  position: absolute
+  outline: 2px solid #f22
+
+  :global(.bp5-popover-target)
+    height: 100%
+    width: 100%
+    display: block
+    line-height: 0
+
+.legend-panel-outer
+  width: 25em
+  max-height: 60vh
+  overflow-y: scroll
+
+.legend-info-panel
+  padding: 1em
+
+.legend-json-view
+  padding-left: 0
+  margin-left: -0.5em
+
+.legend-panel-header
+  display: flex
+  justify-content: space-between
+  gap: 1em
+  border-bottom: 1px solid var(--panel-rule-color)
+  position: sticky
+  top: -1em
+  background-color: var(--panel-secondary-background-color)
+  margin: -1em -1em 0
+  padding: 0.5em 1em
+  code
+    font-size: 0.9em
+    color: var(--secondary-color)
+  align-items: baseline
+  .spacer
+    flex: 1
+  button
+    line-height: 1
+
+  h3
+    margin: 0 0 0.5em
+    font-size: 1.1em
+
+.data-field
+  margin: 0.2em 0 0.4em
+  &.inline
+    display: flex
+    flex-direction: row
+    align-items: baseline
+    gap: 1em
+    justify-content: space-between
+    .data-container
+      text-align: right
+  .label
+    font-size: 0.9em
+    font-weight: bold
+    display: block
+    color: var(--secondary-color)
+  .value-container
+    font-size: 0.9em
+    display: inline-block
+    break-inside: avoid
+  .unit
+    color: var(--secondary-color)

packages/column-views/src/selection-popover.ts

@@ -0,0 +1,62 @@
+import classNames from "classnames";
+import hyper from "@macrostrat/hyper";
+import { Button, Popover } from "@blueprintjs/core";
+import { DOMElement } from "react";
+import { JSONView } from "@macrostrat/ui-components";
+import styles from "./selection-popover.module.sass";
+import { useSelectedUnit } from "./units";
+
+const h = hyper.styled(styles);
+
+export function UnitDetailsPopover({
+  style,
+  children,
+  boundary,
+}: {
+  style: object;
+  children: React.ReactNode;
+  boundary?: DOMElement<any, any>;
+}) {
+  const content = h(LegendPopoverContainer, children);
+
+  return h(
+    "div.popover-main",
+    {
+      style,
+    },
+    h(
+      Popover,
+      { content, isOpen: true, usePortal: false, boundary },
+      h("span.popover-target")
+    )
+  );
+}
+
+export function LegendPopoverContainer({ children }) {
+  return h("div.legend-panel-outer", [h("div.legend-info-panel", children)]);
+}
+
+export function LegendPanelHeader({ title, id, onClose }) {
+  return h("header.legend-panel-header", [
+    h.if(title != null)("h3", title),
+    h("div.spacer"),
+    h.if(id != null)("code", id),
+    h.if(onClose != null)(Button, {
+      icon: "cross",
+      minimal: true,
+      small: true,
+      onClick() {
+        onClose();
+      },
+    }),
+  ]);
+}
+
+export function UnitSelectionPopover(props) {
+  const unit = useSelectedUnit();
+  if (unit == null) {
+    return null;
+  }
+
+  return h("div.unit-selection-popover", JSONView({ data: unit }));
+}

packages/column-views/stories/column.stories.module.sass

@@ -0,0 +1,4 @@
+.unit-viewer
+  position: sticky
+  top: 0
+  max-height: 100vh

packages/column-views/stories/column.stories.ts

@@ -1,12 +1,24 @@
-import h from "@macrostrat/hyper";
+import hyper from "@macrostrat/hyper";
+import styles from "./column.stories.module.sass";
 import { Meta, StoryObj } from "@storybook/react";
-import { DarkModeProvider, useAPIResult } from "@macrostrat/ui-components";
+import {
+  DarkModeProvider,
+  JSONView,
+  useAPIResult,
+} from "@macrostrat/ui-components";
 
-import { Column, preprocessUnits } from "../src";
+import {
+  Column,
+  preprocessUnits,
+  UnitSelectionProvider,
+  useSelectedUnit,
+} from "../src";
 import { Spinner } from "@blueprintjs/core";
 import { PatternProvider } from "@macrostrat/column-components/stories/base-section";
 import "@macrostrat/style-system";
 
+const h = hyper.styled(styles);
+
 interface ColumnProps {
   id: number;
   unconformityLabels?: boolean;
@@ -69,6 +81,14 @@ const meta: Meta<ColumnProps> = {
       return h(DarkModeProvider, h(PatternProvider, h(Story)));
     },
   ],
+  parameters: {
+    docs: {
+      story: {
+        inline: false,
+        iframeHeight: 700,
+      },
+    },
+  },
 };
 
 export default meta;
@@ -90,3 +110,34 @@ export const FilteredToAgeRange: Story = {
     b_age: 66,
   },
 };
+
+export const Wide: Story = {
+  args: {
+    id: 432,
+    showLabelColumn: true,
+    t_age: 0,
+    b_age: 66,
+    width: 500,
+    columnWidth: 500,
+    showLabelColumn: false,
+    unitComponentProps: {
+      nColumns: 2,
+    },
+  },
+};
+
+export function BasicUnitViewer() {
+  const unit = useSelectedUnit();
+  if (unit == null) {
+    return null;
+  }
+
+  return h("div.unit-viewer", JSONView({ data: unit, showRoot: false }));
+}
+
+export function WithUnitSelection() {
+  return h(
+    UnitSelectionProvider,
+    h(BasicColumn, { id: 432, showLabelColumn: true }, [h(BasicUnitViewer)])
+  );
+}