@macrostrat/column-views 2.1.2 → 2.1.4

package/src/facets/measurements/provider.ts

@@ -0,0 +1,80 @@
+import { group } from "d3-array";
+import { createAPIContext, useAPIResult } from "@macrostrat/ui-components";
+
+const responseUnwrapper = (d) => d.records;
+
+const pbdbAPIContext = createAPIContext({
+  baseURL: "https://training.paleobiodb.org/data1.2",
+  unwrapResponse: responseUnwrapper,
+});
+
+export enum FossilDataType {
+  Occurrences = "occs",
+  Collections = "colls",
+}
+
+export function usePBDBFossilData(
+  type: FossilDataType,
+  { col_id },
+): any[] | null {
+  const params = {
+    ms_column: col_id,
+    show: "full,mslink",
+  };
+  return useAPIResult(`/${type}/list.json`, params, {
+    context: pbdbAPIContext,
+  });
+}
+
+export interface PBDBCollection {
+  unit_id: number;
+  col_id: number;
+  cltn_id: number;
+  cltn_name: string;
+  pbdb_occs: number;
+  t_age: number;
+  b_age: number;
+  [key: string]: any; // Allow for additional properties
+}
+
+function useMacrostratFossilData({ col_id }): PBDBCollection[] | null {
+  return useAPIResult("/fossils", { col_id });
+}
+
+function createMacrostratCollection(d): PBDBCollection {
+  let unit_id = null;
+  let col_id = null;
+  // Standardize names of Macrostrat units and columns
+  if (d.msu !== null) {
+    unit_id = parseInt(d.msu.replace(/^\w+:/, ""));
+  }
+  if (d.msc !== null) {
+    col_id = parseInt(d.msc.replace(/^\w+:/, ""));
+  }
+
+  return {
+    ...d,
+    unit_id,
+    col_id,
+    cltn_id: parseInt(d.oid.replace(/^col:/, "")),
+    cltn_name: d.nam,
+    t_age: d.t_age,
+    b_age: d.b_age,
+  };
+}
+
+export function useFossilData({ col_id }) {
+  // Fossil links are stored in both Macrostrat and PBDB, depending on how the link was assembled. Here
+  // we create a unified view of data over both sources.
+
+  const r1 = usePBDBFossilData(FossilDataType.Collections, { col_id });
+
+  const r2 = useMacrostratFossilData({ col_id });
+
+  if (r1 == null || r2 == null) return null;
+  const r1a = r1.map(createMacrostratCollection);
+
+  const data = [...r1a, ...r2];
+
+  return group(data, (d) => d.unit_id);
+}

package/src/unit-details/index.ts

@@ -1,2 +1,3 @@
 export * from "./panel";
 export * from "./popover";
+export * from "./modal-panel";

package/src/unit-details/modal-panel.ts

@@ -0,0 +1,61 @@
+import { Button } from "@blueprintjs/core";
+import { UnitDetailsPanel } from "./panel";
+import { useKeyHandler } from "@macrostrat/ui-components";
+import h from "@macrostrat/hyper";
+
+export function UnitDetailsPanelWithNavigation(props) {
+  const { unitData, className, selectedUnit, onSelectUnit, features, ...rest } =
+    props;
+
+  const ix = unitData?.findIndex(
+    (unit) => unit.unit_id === selectedUnit?.unit_id,
+  );
+
+  const keyMap = {
+    38: ix - 1,
+    40: ix + 1,
+  };
+
+  useKeyHandler(
+    (event) => {
+      const nextIx = keyMap[event.keyCode];
+      if (nextIx == null || nextIx < 0 || nextIx >= unitData.length) return;
+      onSelectUnit(unitData[nextIx].unit_id);
+      event.stopPropagation();
+    },
+    [unitData, ix],
+  );
+
+  if (selectedUnit == null) return null;
+
+  const actions = h([
+    h(Button, {
+      icon: "arrow-up",
+      disabled: ix === 0,
+      onClick() {
+        onSelectUnit(unitData[ix - 1]?.unit_id);
+      },
+    }),
+    h(Button, {
+      icon: "arrow-down",
+      disabled: ix === unitData.length - 1,
+      onClick() {
+        onSelectUnit(unitData[ix + 1]?.unit_id);
+      },
+    }),
+  ]);
+
+  return h(UnitDetailsPanel, {
+    unit: selectedUnit,
+    onClose(event) {
+      onSelectUnit(null);
+    },
+    className,
+    actions,
+    showLithologyProportions: true,
+    selectUnit: onSelectUnit,
+    columnUnits: unitData,
+    features,
+    ...rest,
+  });
+}

package/src/unit-details/panel.module.sass

@@ -1,39 +1,43 @@
 .legend-panel-header
   display: flex
   justify-content: space-between
-  align-items: baseline
-  gap: 1em
+  align-items: center
+  gap: 0.5em
   border-bottom: 1px solid var(--panel-rule-color)
   position: sticky
   top: 0
   background-color: var(--panel-secondary-background-color)
   padding: 0.5em 1em
   z-index: 50
+  min-height: 45px
+  overflow: hidden
   .title-container
-    display: flex
-    flex-direction: row
     gap: 0.5em
     align-items: center
-    margin: -0.5em 0
+    margin: 0
+    flex-grow: 1
+    z-index: 5
     &:hover
-      .hidden-actions
-        display: flex
-        opacity: 0.5
+      .hidden-actions-container
+        visibility: visible
     h1, h2, h3
-      margin: 0.5em 0
-    .hidden-actions
-      display: none
+      display: inline
+      margin: 0
+    .hidden-actions-container
+      visibility: hidden
     button
       transform: translateY(0px)
 
   code
     font-size: 0.9em
     color: var(--secondary-color)
+  .unit-id:before
+    content: '#'
+    // Tertiary color is too light...
+    color: var(--secondary-color)
+
   .spacer
     flex: 1
-  button
-    line-height: 1.5
-    transform: translateY(2px)
 
 .unit-details-panel
   display: flex
@@ -46,11 +50,11 @@
   position: relative
   margin: 1em
 
-.proportion, .sep, .no-units
+.proportion, .sep, .no-units, .strat-name-text
   color: var(--secondary-color)
   font-style: italic
 
-.strat-name-id, .unit-id
+.strat-name-id, .identifier
   font-family: var(--monospace-font)
   color: var(--secondary-color)
 
@@ -81,4 +85,24 @@
     margin: 0 0.3em
 
 .clickable
-  cursor: pointer
+  cursor: pointer
+
+.hidden-actions-container
+  min-width: 0
+  display: inline-block
+  //margin-right: -5em
+  width: 0
+  position: relative
+
+.hidden-actions
+  padding-left: 1em
+  width: fit-content
+  display: flex
+  align-items: center
+  gap: 0.25em
+  background-color: var(--panel-secondary-background-color)
+  z-index: 50
+  position: relative
+  bottom: 0
+  button
+    color: var(--secondary-color) !important

package/src/unit-details/panel.ts

@@ -21,6 +21,7 @@ import {
   UnitLongFull,
   Lithology,
   Interval,
+  StratUnit,
 } from "@macrostrat/api-types";
 import { defaultNameFunction } from "../units/names";
 import classNames from "classnames";
@@ -113,10 +114,15 @@ export function LegendPanelHeader({
   return h("header.legend-panel-header", [
     h("div.title-container", [
       h.if(title != null)("h3", title),
-      h.if(hiddenActions != null)("div.hidden-actions", hiddenActions),
+      h.if(hiddenActions != null || id != null)(
+        "span.hidden-actions-container",
+        h("div.hidden-actions", [
+          h.if(id != null)("code.unit-id", id),
+          h.if(hiddenActions != null)([hiddenActions]),
+        ]),
+      ),
     ]),
     h("div.spacer"),
-    h.if(id != null)("code", id),
     h.if(actions != null)(ButtonGroup, { minimal: true }, actions),
     h.if(onClose != null)(Button, {
       icon: "cross",
@@ -159,7 +165,12 @@ function UnitDetailsContent({
   features?: Set<UnitDetailsFeature>;
   onClickItem?: (
     event: MouseEvent,
-    item: Lithology | Environment | UnitLong | Interval,
+    item:
+      | Lithology
+      | Environment
+      | UnitLong
+      | Interval
+      | { strat_name_id: number },
   ) => void;
   getItemHref?: (item: Lithology | Environment | UnitLong) => string | null;
 }) {
@@ -222,7 +233,7 @@ function UnitDetailsContent({
 
   /** We are trying to move away from passing the "color" parameter in the API */
   let colorSwatch: ReactNode = null;
-  if ("color" in unit) {
+  if ("color" in unit && features.has(UnitDetailsFeature.Color)) {
     const unit1 = unit as UnitLongFull;
     colorSwatch = h("div.color-swatch", {
       style: { backgroundColor: unit1.color },
@@ -250,20 +261,9 @@ function UnitDetailsContent({
       onClickItem,
       getItemHref,
     }),
-    h.if(unit.strat_name_id != null)(
-      DataField,
-      {
-        label: "Stratigraphic name",
-      },
-      h(
-        "span",
-        {
-          className: "strat-name-id" + (onClickItem ? " clickable" : ""),
-          onClick: (e) => onClickItem(e, { strat_name_id: unit.strat_name_id }),
-        },
-        unit.strat_name_id,
-      ),
-    ),
+    h.if(unit.strat_name_id != null)(StratNameField, {
+      strat_name_id: unit.strat_name_id,
+    }),
     outcropField,
     h.if(features.has(UnitDetailsFeature.AdjacentUnits))([
       h(
@@ -278,12 +278,61 @@ function UnitDetailsContent({
       ),
     ]),
     colorSwatch,
+    h(ReferencesField, { refs: unit.refs, inline: true }),
+  ]);
+}
+
+export function ReferencesField({ refs, className = null, ...rest }) {
+  if (refs == null || refs.length === 0) {
+    return null;
+  }
+  return h(
+    DataField,
+    {
+      label: "Source",
+      className: classNames("refs-field", className),
+      ...rest,
+    },
+    h(BibInfo, { refs }),
+  );
+}
+
+function StratNameField({
+  strat_name_id,
+  onClickItem,
+}: {
+  strat_name_id: number;
+  onClickItem?: (event: MouseEvent, item: { strat_name_id: number }) => void;
+}) {
+  const stratNames = useMemo(() => [strat_name_id], [strat_name_id]);
+  const data = useMacrostratData("strat_names", stratNames);
+  const stratNameData = data?.[0];
+  let inner: any = h(Identifier, { id: strat_name_id });
+  const name = stratNameData?.strat_name_long;
+  if (name != null) {
+    inner = h("span.strat-name", name);
+  }
+
+  const clickable = onClickItem != null;
+
+  const className = classNames({
+    clickable,
+  });
+
+  return h(
+    DataField,
+    {
+      label: "Stratigraphic name",
+    },
     h(
-      DataField,
-      { label: "Source", inline: true },
-      h(BibInfo, { refs: unit.refs }),
+      clickable ? "a" : "span",
+      {
+        className,
+        onClick: (e) => onClickItem(e, { strat_name_id }),
+      },
+      inner,
     ),
-  ]);
+  );
 }
 
 function getThickness(unit): [string, string] {
@@ -331,12 +380,18 @@ function BibInfo({ refs }) {
   }
 
   if (refData.length == 1) {
-    return h(Citation, { data: refData[0], tag: "span" });
+    return h(Citation, {
+      data: refData[0],
+      tag: "span",
+      key: refData[0].ref_id,
+    });
   }
 
   return h(
     "ul.refs",
-    refData.map((data, i) => h(Citation, { data, tag: "li", key: i })),
+    refData.map((data, i) =>
+      h(Citation, { data, tag: "li", key: data.ref_id }),
+    ),
   );
 }
 
@@ -474,6 +529,33 @@ function enhanceLithologies(
   });
 }
 
+export function Identifier({
+  id,
+  onClick,
+  className,
+}: {
+  id: number | string;
+  onClick?: (id: number | string) => void;
+  className?: string;
+}) {
+  /** An item that displays a numeric identifier, optionally clickable */
+  const tag = onClick != null ? "a" : "span";
+  return h(
+    tag,
+    {
+      onClick() {
+        onClick?.(id);
+      },
+      className: classNames(
+        "identifier",
+        { clickable: onClick != null },
+        className,
+      ),
+    },
+    id,
+  );
+}
+
 function UnitIDList({ units, selectUnit }) {
   const u1 = units.filter((d) => d != 0);
 
@@ -489,19 +571,15 @@ function UnitIDList({ units, selectUnit }) {
   return h(
     ItemList,
     { className: "unit-id-list" },
-    u1.map((unit) => {
-      return h(
-        tag,
-
-        {
-          className: "unit-id",
-          onClick() {
-            selectUnit?.(unit.id);
-          },
-          key: unit.id,
+    u1.map((unitID) => {
+      return h(Identifier, {
+        className: "unit-id",
+        onClick() {
+          selectUnit?.(unitID);
         },
-        unit,
-      );
+        key: unitID,
+        id: unitID,
+      });
     }),
   );
 }

package/src/units/boxes.ts

@@ -6,6 +6,7 @@ import {
   PatternDefsProvider,
   useColumn,
   useGeologicPattern,
+  zigZagBoxPath,
 } from "@macrostrat/column-components";
 import { SizeAwareLabel, Clickable } from "@macrostrat/ui-components";
 import hyper from "@macrostrat/hyper";
@@ -18,7 +19,6 @@ import classNames from "classnames";
 import { getUnitHeightRange } from "../prepare-units/utils";
 import { useLithologies } from "../data-provider";
 import { getMixedUnitColor } from "./colors";
-import { path } from "d3-path";
 import type { RectBounds } from "./types";
 
 const h = hyper.styled(styles);
@@ -236,69 +236,6 @@ const UnitRect = forwardRef((props: UnitRectProps, ref) => {
   }
 });
 
-function zigZagBoxPath(x, y, width, height, top: boolean, bottom: boolean) {
-  const zigZagWidth = 10;
-  const zigZagHeight = 4;
-
-  const d = path();
-
-  const nZigZags = Math.floor(width / zigZagWidth - 0.5);
-  const _zigZagWidth = width / (nZigZags + 0.5);
-
-  d.moveTo(x, y);
-  let dy = zigZagHeight / 2;
-  // Each zig-zag consists of a short outward motion
-  let dx = _zigZagWidth / 4;
-
-  let cx = x;
-  let cy = y;
-
-  const doZigZag = (last = false) => {
-    cx += dx;
-    cy -= dy;
-    d.lineTo(cx, cy);
-    let scalar = last ? 1 : 2;
-    cx += dx * scalar;
-    cy += dy * scalar;
-    d.lineTo(cx, cy);
-    cx += dx;
-    cy -= dy;
-  };
-
-  if (top) {
-    // Move to the offset
-    //d.lineTo(cx, y);
-    // Draw the zig-zags
-    for (let i = 0; i < nZigZags; i++) {
-      doZigZag();
-    }
-    // Draw the last half zig-zag
-    doZigZag(true);
-  }
-  // Draw the right edge
-  d.lineTo(x + width, y);
-  d.lineTo(x + width, y + height);
-
-  if (bottom) {
-    dx = -dx;
-    dy = -dy;
-    cx = x + width;
-    cy = y + height;
-
-    for (let i = 0; i < nZigZags; i++) {
-      doZigZag();
-    }
-    doZigZag(true);
-  }
-  // Draw the last line to the left edge
-  d.lineTo(x, y + height);
-  // Draw the left edge
-  d.closePath();
-
-  // Now render the path;
-  return d.toString();
-}
-
 function LabeledUnit(props: LabeledUnitProps) {
   const {
     division,

package/src/units/selection.ts

@@ -93,7 +93,6 @@ export function UnitSelectionProvider<T extends BaseUnit>(props: {
         }
       },
       onUnitSelected: (unit: T, target: HTMLElement, event: PointerEvent) => {
-        console.log("onUnitSelected", unit, target, event);
         const el = props.columnRef?.current;
         let overlayPosition = null;
 

package/dist/esm/column-views.0f2121e4.js.map

@@ -1 +0,0 @@
-{"mappings":"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","sources":["packages/column-views/src/unit-details/panel.ts"],"sourcesContent":["import hyper from \"@macrostrat/hyper\";\nimport styles from \"./panel.module.sass\";\nimport { JSONView } from \"@macrostrat/ui-components\";\nimport { Button, ButtonGroup } from \"@blueprintjs/core\";\nimport { ReactNode, useMemo, useState } from \"react\";\nimport {\n  DataField,\n  EnvironmentsList,\n  IntervalShort,\n  IntervalTag,\n  ItemList,\n  LithologyList,\n  LithologyTagFeature,\n  Parenthetical,\n  Value,\n} from \"@macrostrat/data-components\";\nimport { useMacrostratData, useMacrostratDefs } from \"../data-provider\";\nimport {\n  Environment,\n  UnitLong,\n  UnitLongFull,\n  Lithology,\n  Interval,\n} from \"@macrostrat/api-types\";\nimport { defaultNameFunction } from \"../units/names\";\nimport classNames from \"classnames\";\n\nconst h = hyper.styled(styles);\n\nexport function UnitDetailsPanel({\n  unit,\n  onClose,\n  className,\n  features = new Set<UnitDetailsFeature>([\n    UnitDetailsFeature.AdjacentUnits,\n    UnitDetailsFeature.OutcropType,\n    UnitDetailsFeature.JSONToggle,\n    UnitDetailsFeature.DepthRange,\n  ]),\n  lithologyFeatures,\n  actions,\n  selectUnit,\n  columnUnits,\n  onClickItem,\n}: {\n  unit: any;\n  onClose?: any;\n  showLithologyProportions?: boolean;\n  className?: string;\n  actions?: ReactNode;\n  features?: Set<UnitDetailsFeature>;\n  lithologyFeatures?: Set<LithologyTagFeature>;\n  columnUnits?: UnitLong[];\n  selectUnit?: (unitID: number) => void;\n  onClickItem?: (item: any) => void;\n}) {\n  const [showJSON, setShowJSON] = useState(false);\n\n  let content = null;\n  if (showJSON) {\n    content = h(JSONView, { data: unit, showRoot: false });\n  } else {\n    content = h(UnitDetailsContent, {\n      unit,\n      features,\n      lithologyFeatures,\n      onClickItem,\n    });\n  }\n\n  let title = defaultNameFunction(unit);\n\n  let hiddenActions = null;\n  if (features.has(UnitDetailsFeature.JSONToggle)) {\n    hiddenActions = h(Button, {\n      icon: \"code\",\n      small: true,\n      minimal: true,\n      key: \"json-view-toggle\",\n      className: classNames(\"json-view-toggle\", { enabled: setShowJSON }),\n      onClick(evt) {\n        setShowJSON(!showJSON);\n        evt.stopPropagation();\n      },\n    });\n  }\n\n  return h(\"div.unit-details-panel\", { className }, [\n    h(LegendPanelHeader, {\n      onClose,\n      title,\n      id: unit.unit_id,\n      actions,\n      hiddenActions,\n    }),\n    h(\"div.unit-details-content-holder\", content),\n  ]);\n}\n\nexport function LegendPanelHeader({\n  title,\n  id,\n  onClose,\n  actions = null,\n  hiddenActions,\n}: {\n  title?: string | null;\n  id?: number | null;\n  onClose?: () => void;\n  actions?: ReactNode | null;\n  hiddenActions?: ReactNode | null;\n}) {\n  return h(\"header.legend-panel-header\", [\n    h(\"div.title-container\", [\n      h.if(title != null)(\"h3\", title),\n      h.if(hiddenActions != null)(\"div.hidden-actions\", hiddenActions),\n    ]),\n    h(\"div.spacer\"),\n    h.if(id != null)(\"code\", id),\n    h.if(actions != null)(ButtonGroup, { minimal: true }, actions),\n    h.if(onClose != null)(Button, {\n      icon: \"cross\",\n      minimal: true,\n      small: true,\n      onClick() {\n        onClose();\n      },\n    }),\n  ]);\n}\n\nexport enum UnitDetailsFeature {\n  AdjacentUnits = \"adjacent-units\",\n  Color = \"color\",\n  OutcropType = \"outcrop-type\",\n  JSONToggle = \"json-toggle\",\n  DepthRange = \"depth-range\",\n}\n\nfunction UnitDetailsContent({\n  unit,\n  selectUnit,\n  columnUnits,\n  lithologyFeatures = new Set([\n    LithologyTagFeature.Proportion,\n    LithologyTagFeature.Attributes,\n  ]),\n  features = new Set<UnitDetailsFeature>([\n    UnitDetailsFeature.AdjacentUnits,\n    UnitDetailsFeature.OutcropType,\n  ]),\n  onClickItem,\n  getItemHref,\n}: {\n  unit: UnitLong;\n  selectUnit?: (unitID: number) => void;\n  columnUnits?: UnitLong[];\n  lithologyFeatures?: Set<LithologyTagFeature>;\n  features?: Set<UnitDetailsFeature>;\n  onClickItem?: (\n    event: MouseEvent,\n    item: Lithology | Environment | UnitLong | Interval,\n  ) => void;\n  getItemHref?: (item: Lithology | Environment | UnitLong) => string | null;\n}) {\n  const lithMap = useMacrostratDefs(\"lithologies\");\n  const envMap = useMacrostratDefs(\"environments\");\n\n  const environments = enhanceEnvironments(unit.environ, envMap);\n  const lithologies = enhanceLithologies(unit.lith ?? [], lithMap);\n\n  // Create a lookup table of units if provided\n  const columnUnitsMap = useMemo(() => {\n    const map = new Map<number, UnitLong>();\n    for (const colUnit of columnUnits ?? []) {\n      map.set(colUnit.unit_id, colUnit);\n    }\n    return map;\n  }, [columnUnits]);\n\n  let outcropField = null;\n  if (features.has(UnitDetailsFeature.OutcropType)) {\n    // Determine outcrop type\n    let outcrop = unit.outcrop;\n    if (outcrop == \"both\") {\n      outcrop = \"surface and subsurface\";\n    }\n    outcropField = h(DataField, {\n      label: \"Outcrop\",\n      value: outcrop,\n    });\n  }\n\n  let thicknessOrHeightRange = null;\n  const [thickness, thicknessUnit] = getThickness(unit);\n  // Proxy for actual heights in t_pos and b_pos\n  if (\n    features.has(UnitDetailsFeature.DepthRange) &&\n    unit.t_pos != null &&\n    unit.b_pos != null &&\n    unit.min_thick == unit.max_thick && // We have an actual fixed height\n    unit.min_thick != 0 // Not a zero thickness\n  ) {\n    const label = unit.t_pos < unit.b_pos ? \"Depth\" : \"Height\";\n    const u1 = \"m\";\n\n    thicknessOrHeightRange = h(DataField, {\n      unit: u1,\n      label,\n      value: formatRange(unit.b_pos, unit.t_pos),\n      children: h(\n        Parenthetical,\n        h(Value, { value: thickness, unit: thicknessUnit }),\n      ),\n    });\n  }\n  thicknessOrHeightRange ??= h(DataField, {\n    label: \"Thickness\",\n    value: thickness,\n    unit: thicknessUnit,\n  });\n\n  /** We are trying to move away from passing the \"color\" parameter in the API */\n  let colorSwatch: ReactNode = null;\n  if (\"color\" in unit) {\n    const unit1 = unit as UnitLongFull;\n    colorSwatch = h(\"div.color-swatch\", {\n      style: { backgroundColor: unit1.color },\n    });\n  }\n\n  return h(\"div.unit-details-content\", [\n    thicknessOrHeightRange,\n    h(LithologyList, {\n      label: \"Lithology\",\n      lithologies,\n      features: lithologyFeatures,\n      getItemHref,\n      onClickItem,\n    }),\n    h(AgeField, { unit }, [\n      h(Parenthetical, h(Duration, { value: unit.b_age - unit.t_age })),\n      h(IntervalProportions, {\n        unit,\n        onClickItem,\n      }),\n    ]),\n    h(EnvironmentsList, {\n      environments,\n      onClickItem,\n      getItemHref,\n    }),\n    h.if(unit.strat_name_id != null)(\n      DataField,\n      {\n        label: \"Stratigraphic name\",\n      },\n      h(\n        \"span\",\n        {\n          className: \"strat-name-id\" + (onClickItem ? \" clickable\" : \"\"),\n          onClick: (e) => onClickItem(e, { strat_name_id: unit.strat_name_id }),\n        },\n        unit.strat_name_id,\n      ),\n    ),\n    outcropField,\n    h.if(features.has(UnitDetailsFeature.AdjacentUnits))([\n      h(\n        DataField,\n        { label: \"Above\" },\n        h(UnitIDList, { units: unit.units_above, selectUnit }),\n      ),\n      h(\n        DataField,\n        { label: \"Below\" },\n        h(UnitIDList, { units: unit.units_below, selectUnit }),\n      ),\n    ]),\n    colorSwatch,\n    h(\n      DataField,\n      { label: \"Source\", inline: true },\n      h(BibInfo, { refs: unit.refs }),\n    ),\n  ]);\n}\n\nfunction getThickness(unit): [string, string] {\n  let minThickness = unit.min_thick ?? 0;\n  let maxThickness = unit.max_thick ?? unit.min_thick ?? 0;\n  let _unit = \"m\";\n\n  if (minThickness == 0 && maxThickness == 0) {\n    return [\"Unknown\", null];\n  }\n\n  if (minThickness < 0.8 && maxThickness < 1.2) {\n    // Convert to cm\n    minThickness = minThickness * 100;\n    maxThickness = maxThickness * 100;\n    _unit = \"cm\";\n  } else if (minThickness > 800 && maxThickness > 1200) {\n    // Convert to km\n    minThickness = minThickness / 1000;\n    maxThickness = maxThickness / 1000;\n    _unit = \"km\";\n  }\n\n  if (minThickness == maxThickness) {\n    return [formatSignificance(minThickness), _unit];\n  }\n\n  return [formatRange(minThickness, maxThickness), _unit];\n}\n\nfunction ThicknessField({ unit, label = \"Thickness\" }) {\n  const [value, thicknessUnit] = getThickness(unit);\n  return h(DataField, {\n    label,\n    value,\n    unit: thicknessUnit,\n  });\n}\n\nfunction BibInfo({ refs }) {\n  const refData = useMacrostratData(\"refs\", refs);\n\n  if (refData == null || refData.length === 0) {\n    return null;\n  }\n\n  if (refData.length == 1) {\n    return h(Citation, { data: refData[0], tag: \"span\" });\n  }\n\n  return h(\n    \"ul.refs\",\n    refData.map((data, i) => h(Citation, { data, tag: \"li\", key: i })),\n  );\n}\n\nfunction Citation({ data, tag = \"p\" }) {\n  return h(tag, { className: \"citation\" }, [\n    h(\"span.authors\", data.author),\n    \", \",\n    h(\"span.year\", data.pub_year),\n    \", \",\n    h(\"span.title\", data.ref),\n  ]);\n}\n\nfunction AgeField({ unit, children }) {\n  const [b_age, t_age, _unit] = getAgeRange(unit);\n\n  return h(\n    DataField,\n    {\n      label: \"Age\",\n      value: formatRange(b_age, t_age),\n      unit: _unit,\n    },\n    children,\n  );\n}\n\nfunction getAgeRange(_unit) {\n  let b_age = _unit.b_age;\n  let t_age = _unit.t_age;\n  let unit = \"Ma\";\n\n  if (b_age < 0.8 && t_age < 1.2) {\n    b_age *= 1000;\n    t_age *= 1000;\n    unit = \"ka\";\n  } else if (b_age > 800 && t_age > 1200) {\n    b_age /= 1000;\n    t_age /= 1000;\n    unit = \"Ga\";\n  }\n\n  return [b_age, t_age, unit];\n}\n\nfunction getAge(value) {\n  /** Get the age value in Ma, ka, or Ga as appropriate */\n  let unit = \"Ma\";\n  if (value < 0.8) {\n    unit = \"ka\";\n    value *= 1000;\n    if (value < 5) {\n      unit = \"yr\";\n      value *= 1000;\n    }\n  } else if (value > 1000) {\n    unit = \"Ga\";\n    value /= 1000;\n  }\n\n  return [value, unit];\n}\n\nexport function AgeLabel({\n  age,\n  maximumFractionDigits = 2,\n  minimumFractionDigits = 0,\n  className,\n}: {\n  age: number;\n  className?: string;\n  maximumFractionDigits?: number;\n  minimumFractionDigits?: number;\n}) {\n  /** Component to display a single age value with unit conversion from\n   * Ma to ka or Ga as appropriate.\n   */\n  const [value, unit] = getAge(age);\n\n  const _value = value.toLocaleString(\"en-US\", {\n    maximumFractionDigits,\n    minimumFractionDigits,\n  });\n\n  return h(Value, { value: _value, unit, className });\n}\n\nexport function Duration({\n  value,\n  maximumFractionDigits = 2,\n  minimumFractionDigits = 0,\n}) {\n  let unit = \"Myr\";\n  if (value < 0.8) {\n    unit = \"kyr\";\n    value *= 1000;\n    if (value < 5) {\n      unit = \"yr\";\n      value *= 1000;\n    }\n  } else if (value > 1000) {\n    unit = \"Gyr\";\n    value /= 1000;\n  }\n\n  let _value = value.toLocaleString(\"en-US\", {\n    maximumFractionDigits,\n    minimumFractionDigits,\n  });\n\n  return h(Value, { value: _value, unit });\n}\n\nfunction enhanceEnvironments(\n  environments: Partial<Environment>[],\n  envMap: Map<number, Environment>,\n) {\n  return environments.map((env) => {\n    return {\n      ...(envMap?.get(env.environ_id) ?? {}),\n      ...env,\n    };\n  });\n}\n\nfunction enhanceLithologies(\n  lithologies: Partial<UnitLong[\"lith\"]>,\n  lithMap: Map<number, any>,\n) {\n  return lithologies.map((lith) => {\n    return {\n      ...(lithMap?.get(lith.lith_id) ?? {}), // get lithology details\n      ...lith, // override with the unit's specific lithology data\n    };\n  });\n}\n\nfunction UnitIDList({ units, selectUnit }) {\n  const u1 = units.filter((d) => d != 0);\n\n  if (u1.length === 0) {\n    return h(\"span.no-units\", \"None\");\n  }\n\n  let tag = \"span\";\n  if (selectUnit != null) {\n    tag = \"a\";\n  }\n\n  return h(\n    ItemList,\n    { className: \"unit-id-list\" },\n    u1.map((unit) => {\n      return h(\n        tag,\n\n        {\n          className: \"unit-id\",\n          onClick() {\n            selectUnit?.(unit.id);\n          },\n          key: unit.id,\n        },\n        unit,\n      );\n    }),\n  );\n}\n\nfunction IntervalProportions({ unit, onClickItem }) {\n  const i0 = unit.b_int_id;\n  const i1 = unit.t_int_id;\n  let b_prop = unit.b_prop ?? 0;\n  let t_prop = unit.t_prop ?? 1;\n\n  const intervalMap = useMacrostratDefs(\"intervals\");\n  const int0 = intervalMap?.get(i0) ?? {};\n\n  const interval0: IntervalShort = {\n    ...int0,\n    id: i0,\n    name: unit.b_int_name,\n  };\n\n  let p0: ReactNode = null;\n  const int1 = intervalMap?.get(i1) ?? {};\n  const p1: ReactNode = h(Proportion, { value: t_prop });\n\n  if (i0 !== i1 || b_prop !== 0 || t_prop !== 1) {\n    // We have a single interval with undefined proportions\n    p0 = h(Proportion, { value: b_prop });\n  }\n\n  if (i0 === i1 && (b_prop !== 0 || t_prop !== 1)) {\n    p0 = h(\"span.joint-proportion\", [p0, h(\"span.sep\", \"to\"), p1]);\n  }\n\n  const clickable = onClickItem != null;\n\n  const handleClick = (event: MouseEvent) => {\n    if (onClickItem) {\n      onClickItem(event, interval0);\n    }\n  };\n\n  return h(\"div.interval-proportions\", [\n    h(IntervalTag, {\n      className: clickable ? \"clickable\" : \"\",\n      onClick: clickable ? handleClick : undefined,\n      interval: interval0,\n      prefix: p0,\n    }),\n    h.if(i0 != i1)(\"span.discourage-break\", [\n      h(\"span.sep\", \"to\"),\n      h(IntervalTag, {\n        className: clickable ? \"clickable\" : \"\",\n        onClick: clickable ? handleClick : undefined,\n        interval: {\n          ...int1,\n          id: i1,\n          name: unit.t_int_name,\n        },\n        prefix: p1,\n      }),\n    ]),\n  ]);\n}\n\nconst formatProportion = (d) => {\n  if (d == null) return null;\n  return d.toFixed(1);\n};\n\nfunction Proportion({ value }) {\n  let content = null;\n  if (value == 0) {\n    content = \"base\";\n  } else if (value == 1) {\n    content = \"top\";\n  } else {\n    content = formatProportion(value * 100) + \"%\";\n  }\n\n  return h(\"span.proportion\", content);\n}\n\nfunction formatRange(min, max, precision = null) {\n  if (min == null || max == null) return null;\n  if (min === max) {\n    return min.toFixed(precision);\n  }\n\n  return `${formatSignificance(min, precision)}–${formatSignificance(\n    max,\n    precision,\n  )}`;\n}\n\nfunction formatSignificance(value, precision = null) {\n  // Format to preserve a reasonable number of significant figures\n  // this could be done with an easier algorithm, probably:\n\n  if (precision == null) {\n    return value.toLocaleString();\n  }\n  if (precision >= 0) {\n    return value.toFixed(precision);\n  }\n  if (precision < 0) {\n    return (\n      (value / Math.pow(10, -precision)).toFixed(0) + \"0\".repeat(-precision)\n    );\n  }\n}\n"],"names":[],"version":3,"file":"column-views.0f2121e4.js.map"}

package/dist/esm/column-views.10eba967.js

@@ -1,11 +0,0 @@
-import {PBDBFossilsColumn as $b9286605a04210d4$export$554267114407ef68} from "./column-views.fa19cea0.js";
-import {DetritalGroup as $715dd5fedd79146a$export$1b3047373cd1c8c7, DetritalColumn as $715dd5fedd79146a$export$f176396e104db8d5} from "./column-views.e20f6a4b.js";
-import {IsotopesDataset as $d71d096cfe00860f$export$c69bd0285aa5d775, IsotopesColumn as $d71d096cfe00860f$export$5d8aa8022c284748, MeasurementDataContext as $5dbb619f2c7bef60$export$c644ef985ce7a4c4, MeasurementDataProvider as $5dbb619f2c7bef60$export$5f01d5b342a89841, useMeasurementData as $5dbb619f2c7bef60$export$8a0335fd9ff72150} from "./column-views.86619334.js";
-
-
-
-
-
-
-export {$b9286605a04210d4$export$554267114407ef68 as PBDBFossilsColumn, $715dd5fedd79146a$export$1b3047373cd1c8c7 as DetritalGroup, $715dd5fedd79146a$export$f176396e104db8d5 as DetritalColumn, $d71d096cfe00860f$export$c69bd0285aa5d775 as IsotopesDataset, $d71d096cfe00860f$export$5d8aa8022c284748 as IsotopesColumn, $5dbb619f2c7bef60$export$c644ef985ce7a4c4 as MeasurementDataContext, $5dbb619f2c7bef60$export$5f01d5b342a89841 as MeasurementDataProvider, $5dbb619f2c7bef60$export$8a0335fd9ff72150 as useMeasurementData};
-//# sourceMappingURL=column-views.10eba967.js.map

package/dist/esm/column-views.1af9761e.js.map

@@ -1 +0,0 @@
-{"mappings":"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","sources":["packages/column-views/src/units/selection.ts"],"sourcesContent":["import { BaseUnit } from \"@macrostrat/api-types\";\nimport h from \"@macrostrat/hyper\";\nimport { useKeyHandler } from \"@macrostrat/ui-components\";\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useState,\n  ReactNode,\n  RefObject,\n  useRef,\n  useCallback,\n  MouseEvent,\n} from \"react\";\nimport { createStore, StoreApi, useStore } from \"zustand\";\nimport type { RectBounds, IUnit } from \"./types\";\nimport {\n  getUnitHeightRange,\n  useMacrostratColumnData,\n} from \"@macrostrat/column-views\";\n\ntype UnitSelectDispatch = (\n  unit: BaseUnit | null,\n  target: HTMLElement | null,\n  event: Event | null,\n) => void;\n\nconst UnitSelectionContext = createContext<StoreApi<UnitSelectionStore>>(null);\n\nexport function useUnitSelectionDispatch(): UnitSelectDispatch {\n  const store = useContext(UnitSelectionContext);\n  if (store == null) {\n    return () => {};\n  }\n  return useStore(store, (state) => state.onUnitSelected);\n}\n\nexport function useUnitSelectionStore<T>(\n  selector: (state: UnitSelectionStore) => T,\n): T {\n  const store = useContext(UnitSelectionContext);\n  if (store == null) {\n    return null;\n  }\n  return useStore(store, selector);\n}\n\nexport function useSelectedUnit() {\n  return useUnitSelectionStore((state) => state.selectedUnitData);\n}\n\ninterface UnitSelectionStore {\n  selectedUnit: number | null;\n  selectedUnitData: BaseUnit | null;\n  overlayPosition: RectBounds | null;\n  onUnitSelected: UnitSelectDispatch;\n  setSelectedUnit: (unit: number | null) => void;\n}\n\nexport interface ColumnClickData {\n  unitID: number | null;\n  unit: BaseUnit | null;\n  target: HTMLElement | null;\n  height: number;\n  // Room for boundary IDs eventually\n}\n\nexport function UnitSelectionProvider<T extends BaseUnit>(props: {\n  children: ReactNode;\n  columnRef?: RefObject<HTMLElement>;\n  units: T[];\n  selectedUnit: number | null;\n  onClickedColumn?: (columnClickData: ColumnClickData, event: Event) => void;\n  onUnitSelected?: (unitID: number | null, unit: T | null) => void;\n}) {\n  const [store] = useState(() =>\n    createStore<UnitSelectionStore>((set) => ({\n      selectedUnit: null,\n      selectedUnitData: null,\n      overlayPosition: null,\n      setSelectedUnit(selectedUnit: number | null | BaseUnit) {\n        if (selectedUnit == null) {\n          set({ selectedUnit: null, selectedUnitData: null });\n          return;\n          // If it's a number, set the selected unit\n        } else if (typeof selectedUnit === \"number\") {\n          set({ selectedUnit, selectedUnitData: null });\n        } else if (\"unit_id\" in selectedUnit) {\n          set({\n            selectedUnit: selectedUnit.unit_id,\n            selectedUnitData: selectedUnit,\n          });\n        }\n      },\n      onUnitSelected: (unit: T, target: HTMLElement, event: PointerEvent) => {\n        console.log(\"onUnitSelected\", unit, target, event);\n        const el = props.columnRef?.current;\n        let overlayPosition = null;\n\n        /** This is not the natural place to get positions within the column,\n         * but it will work for now.\n         */\n        if (props.onClickedColumn) {\n          // Infer height from top and bottom height of unit (because that's passed back with the call)\n          //const py = event.y;\n          //const [bottom, top] = getUnitHeightRange(unit, axisType);\n          //const height = Math.abs(bottom - top);\n\n          /** Ideally this would be defined at the column level */\n          const columnClickData: ColumnClickData = {\n            unitID: unit?.unit_id,\n            unit,\n            target,\n            height: el?.getBoundingClientRect().height || 0,\n          };\n          props.onClickedColumn(columnClickData, event);\n        }\n\n        if (unit != null && el != null && target != null) {\n          const rect = el.getBoundingClientRect();\n          const targetRect = target.getBoundingClientRect();\n\n          overlayPosition = {\n            x: targetRect.left - rect.left,\n            y: targetRect.top - rect.top,\n            width: targetRect.width,\n            height: targetRect.height,\n          };\n        }\n        props.onUnitSelected?.(unit?.unit_id, unit);\n\n        return set({\n          selectedUnit: unit?.unit_id,\n          selectedUnitData: unit,\n          overlayPosition,\n        });\n      },\n    })),\n  );\n\n  const { units, selectedUnit } = props;\n\n  useEffect(() => {\n    // Synchronize store with provided props\n    if (selectedUnit != null) {\n      const unitData = units?.find((u) => u.unit_id === selectedUnit);\n      store.setState({ selectedUnit, selectedUnitData: unitData });\n    } else {\n      store.setState({ selectedUnit: null, selectedUnitData: null });\n    }\n  }, [selectedUnit, units]);\n\n  return h(UnitSelectionContext.Provider, { value: store }, props.children);\n}\n\nexport function useUnitSelectionTarget(\n  unit: IUnit,\n): [React.RefObject<HTMLElement>, boolean, (evt: Event) => void] {\n  const ref = useRef<HTMLElement>();\n  const selectedUnit = useSelectedUnit();\n  const onSelectUnit = useUnitSelectionStore((state) => state.onUnitSelected);\n  const selected = selectedUnit?.unit_id == unit.unit_id;\n\n  const onClick = useCallback(\n    (evt: Event) => {\n      if (onSelectUnit == null) return;\n      onSelectUnit(unit, ref.current, evt);\n      evt.stopPropagation();\n    },\n    [unit, onSelectUnit],\n  );\n\n  useEffect(() => {\n    if (!selected || onSelectUnit == null) return;\n    // In case we haven't set the position of the unit (if we don't have a target), set the selected unit\n    onSelectUnit(unit, ref.current, null);\n\n    // Scroll the unit into view\n    ref.current?.scrollIntoView({\n      behavior: \"smooth\",\n      block: \"center\",\n      inline: \"nearest\",\n    });\n  }, [selected, onSelectUnit]);\n\n  return [ref, selected, onClick];\n}\n\nexport function UnitKeyboardNavigation<T extends BaseUnit>({\n  units,\n}: {\n  units: T[];\n}) {\n  const selectedUnit = useSelectedUnit();\n  const selectUnit = useUnitSelectionDispatch();\n\n  const ix = units.findIndex((unit) => unit.unit_id === selectedUnit?.unit_id);\n\n  const keyMap = {\n    38: ix - 1,\n    40: ix + 1,\n  };\n\n  useKeyHandler(\n    (event) => {\n      const nextIx = keyMap[event.keyCode];\n      if (nextIx == null || nextIx < 0 || nextIx >= units.length) return;\n      selectUnit(units[nextIx], null, null);\n      event.stopPropagation();\n    },\n    [units, ix],\n  );\n  return null;\n}\n"],"names":[],"version":3,"file":"column-views.1af9761e.js.map"}

package/dist/esm/column-views.1c92b88f.js.map

@@ -1 +0,0 @@
-{"mappings":";;;;;;;;AAAA,IAAA;AACA,IAAA;AADA,4CAAuC,CAAC,yBAAyB,CAAC;AAClE,4CAA6B,CAAC,eAAe,CAAC","sources":["packages/column-views/src/facets/fossils/index.module.sass"],"sourcesContent":[".fossil-collections\n  padding-left: 0.2em\n  font-size: 0.9em\n  list-style: none\n  border-left: 1px solid var(--column-stroke-color)\n  margin: 1px 0\n  li\n    display: inline\n    &:not(:last-child):after\n      content: \", \"\n      color: var(--secondary-color)\n  li.too-many\n    color: var(--secondary-color)\n    font-style: italic\n"],"names":[],"version":3,"file":"column-views.1c92b88f.js.map"}

package/dist/esm/column-views.217078ab.css.map

@@ -1 +0,0 @@
-{"mappings":"AAAA;;;;;;AAWE;EACE;;;;;;;;EAOI;;;;EAEA;;;;;AAIN;;;;;;;;AAOE;;;;AAIF;;;;AAIE;;;;;;;AAOA;;;;;AAKA;;;;;AAIF;;;;;;AAKA;;;;AAGF;;;;;;;;;;;;;;;;;;;;AAgBE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BF;;;;;;;AAOE;;;;;;;;;;;;;;;AAWE;;;;;AAMF","sources":["packages/column-views/src/column.module.sass"],"sourcesContent":[".column-container, body:global(.light-mode) .column-container\n  --column-background-color: var(--background-color, #fff)\n  --column-stroke-color: var(--text-emphasized-color, #000)\n  --column-text-color: var(--text-emphasized-color, #000)\n\n/* We have to duplicate the dark mode styles here\n  because we want to set them either if the preferred\n  color scheme is dark OR if dark mode is explicitly enabled.\n  If dark mode is explicitly enabled, we want to override\n  the media query. */\n@media (prefers-color-scheme: dark)\n  body:not(:global(.light-mode)) .column-container\n    --column-background-color: var(--background-color, #000)\n    --column-stroke-color: var(--text-emphasized-color, #fff)\n    --column-text-color: var(--text-emphasized-color, #fff)\n    color-scheme: dark\n    color: var(--column-text-color)\n    :global\n      .timescale\n        color: #000\n      svg pattern image\n        filter: invert(100%)\n\nbody:global(.dark-mode) .column-container\n  --column-background-color: var(--background-color, #000)\n  --column-stroke-color: var(--text-emphasized-color, #fff)\n  --column-text-color: var(--text-emphasized-color, #fff)\n  color-scheme: dark\n  color: var(--column-text-color)\n  :global\n    .timescale\n      color: #000\n    svg pattern image\n      filter: invert(100%)\n\n.column-container :global\n  .column\n    display: flex\n    flex-direction: row\n    position: relative\n    height: fit-content\n\n  .unit\n    stroke: var(--column-stroke-color)\n    stroke-width: 1px\n\n  .selection-overlay\n    fill: var(--selection-overlay-color, red)\n    fill-opacity: var(--selection-overlay-opacity, 0.5)\n\n  g.lithology-column use.frame\n    stroke: var(--column-stroke-color)\n    stroke-width: 1.5px !important\n    pointer-events: none\n\n.column-container :global .unit-label\n  text-align: center\n\n.column-container :global .col-note-label\n  font-size: 10px\n  line-height: 9px\n  border-left: none !important\n  margin: 1px 0\n\n.column-container :global g.height-range\n  display: none\n\n.column-container :global .note-inner\n  border: none\n  padding: 1px\n\n.column-container :global .frame rect\n  fill: transparent\n\n.column-container :global .default-buttons\n  width: 100%\n  margin: 0 -10px\n\n.column-container :global div.section\n  display: flex\n  flex-direction: row\n\n.column-container :global .section .divisions .unit\n  cursor: pointer\n\n.column-container :global(.timescale)\n  width: calc(calc(1.5em + 1.5px) * var(--timescale-level-count, 4))\n  --timescale-level-size: 1.5em\n\n.timescale-column\n  position: relative\n\n.section-main\n  position: relative\n  margin-bottom: -4px\n\n.section-units-container\n  position: relative\n\n.main-column\n  position: relative\n\n.unconformity-labels\n  position: absolute\n  top: 0\n  left: 0\n  pointer-events: none\n\n\n.unconformity\n  text-align: center\n  position: absolute\n  top: 0px\n  display: flex\n  justify-content: center\n  align-items: center\n  font-size: 0.8em\n  &.giga\n    font-weight: 800\n    font-size: 1em\n  &.mega\n    font-weight: 600\n    font-weight: 700\n    font-size: 0.9em\n  &.large\n    font-weight:  600\n  &.small\n    font-weight: 300\n\n\n.unconformity-text\n  width: var(--column-width)\n  color: var(--column-stroke-color)\n  --unit-font-style: normal\n\n\n"],"names":[],"version":3,"file":"column-views.217078ab.css.map"}