@macrostrat/column-views 3.11.0 → 3.12.0

package/dist/age-model/surfaces.cjs

@@ -0,0 +1,355 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const h$1 = require("@macrostrat/hyper");
+const classNames = require("classnames");
+const React = require("react");
+const dataComponents = require("@macrostrat/data-components");
+const dataProvider = require("@macrostrat/data-provider");
+const notes = require("../notes.cjs");
+const ageRange = require("../unit-details/age-range.cjs");
+const column_module = require("../column.module.sass.cjs");
+const surfaces_module = require("./surfaces.module.sass.cjs");
+const types = require("./types.cjs");
+const data = require("./data.cjs");
+const store = require("../data-provider/store.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const h__default = /* @__PURE__ */ _interopDefault(h$1);
+const classNames__default = /* @__PURE__ */ _interopDefault(classNames);
+const h = h__default.default.styled(surfaces_module.default);
+function ColumnSurfaces(props) {
+  const {
+    showLines = true,
+    showLabels = true,
+    extent = "units",
+    labelWidth,
+    labelPaddingLeft,
+    statuses,
+    labelStatuses = types.TIE_POINT_STATUSES,
+    minLabelSpacing,
+    selectedSurface,
+    onSelectSurface,
+    className,
+    ...dataOptions
+  } = props;
+  const { surfaces: allSurfaces } = data.useColumnSurfaces(dataOptions);
+  const surfaces = React.useMemo(
+    () => filterByStatus(allSurfaces, statuses),
+    [allSurfaces, statuses]
+  );
+  const [selectedID, select] = useSurfaceSelection(
+    selectedSurface,
+    onSelectSurface
+  );
+  return h([
+    h.if(showLines)(ColumnSurfaceLines, {
+      surfaces,
+      extent,
+      selectedSurface: selectedID,
+      onSelectSurface: select,
+      className
+    }),
+    h.if(showLabels)(ColumnSurfaceLabels, {
+      surfaces,
+      labelStatuses,
+      minLabelSpacing,
+      width: labelWidth,
+      paddingLeft: labelPaddingLeft,
+      selectedSurface: selectedID,
+      onSelectSurface: select,
+      className
+    })
+  ]);
+}
+function ColumnSurfaceLines(props) {
+  const {
+    surfaces,
+    extent = "units",
+    selectedSurface,
+    onSelectSurface,
+    className
+  } = props;
+  const scale = store.useCompositeScale();
+  const { axisType, totalHeight } = store.useMacrostratColumnData();
+  const intervalMap = useSurfaceIntervalDefs(surfaces);
+  const ref = React.useRef(null);
+  const unitsExtent = useUnitsColumnExtent(ref, extent === "units");
+  let style = { height: totalHeight };
+  if (unitsExtent != null) {
+    style = { ...style, left: unitsExtent.left, width: unitsExtent.width };
+  }
+  const measuring = extent === "units" && unitsExtent == null;
+  return h(
+    "div.column-surface-lines",
+    { ref, style, className: classNames__default.default(className, { measuring }) },
+    surfaces.map((surface) => {
+      const position = types.surfacePosition(surface, axisType);
+      if (position == null) return null;
+      const y = scale(position);
+      if (y == null) return null;
+      return h(SurfaceLine, {
+        key: surface.id,
+        surface,
+        y,
+        color: surfaceIntervalColor(surface, intervalMap),
+        selected: surface.id === selectedSurface,
+        onSelect: onSelectSurface
+      });
+    })
+  );
+}
+function SurfaceLine({
+  surface,
+  y,
+  color,
+  selected,
+  onSelect
+}) {
+  const onClick = React.useCallback(
+    (evt) => {
+      evt.stopPropagation();
+      if (selected) {
+        onSelect?.(null);
+      } else {
+        onSelect?.(surface);
+      }
+    },
+    [surface, selected, onSelect]
+  );
+  let style = { top: y };
+  if (color != null) {
+    style = { ...style, "--surface-color": color };
+  }
+  return h(
+    "div.surface-line",
+    {
+      style,
+      className: classNames__default.default(surfaceClasses(surface), {
+        selected,
+        interactive: onSelect != null
+      }),
+      title: types.surfaceLabel(surface),
+      onClick
+    },
+    h("div.surface-line-inner")
+  );
+}
+function ColumnSurfaceLabels(props) {
+  const {
+    surfaces,
+    labelStatuses = types.TIE_POINT_STATUSES,
+    minLabelSpacing = 22,
+    width = 200,
+    paddingLeft = 24,
+    selectedSurface,
+    onSelectSurface,
+    className
+  } = props;
+  const { axisType } = store.useMacrostratColumnData();
+  const scale = store.useCompositeScale();
+  const intervalMap = useSurfaceIntervalDefs(surfaces);
+  store.useClaimLabelColumn();
+  const labeled = React.useMemo(() => {
+    const byStatus = filterByStatus(surfaces, labelStatuses);
+    return thinByPixelSpacing(
+      byStatus,
+      (s) => scale(types.surfacePosition(s, axisType) ?? NaN),
+      minLabelSpacing,
+      selectedSurface
+    );
+  }, [
+    surfaces,
+    labelStatuses,
+    minLabelSpacing,
+    selectedSurface,
+    scale,
+    axisType
+  ]);
+  const notes$1 = React.useMemo(() => {
+    const _notes = [];
+    for (const surface of labeled) {
+      const position = types.surfacePosition(surface, axisType);
+      if (position == null) continue;
+      _notes.push({
+        id: surface.id,
+        height: position,
+        note: types.surfaceLabel(surface),
+        // The note's color reaches its connector, so a label's leader line
+        // matches the surface line it points at
+        color: surfaceIntervalColor(surface, intervalMap) ?? void 0,
+        surface,
+        interval: calibrationInterval(surface, intervalMap),
+        selected: surface.id === selectedSurface
+      });
+    }
+    return _notes;
+  }, [labeled, axisType, selectedSurface, intervalMap]);
+  const onClickNote = React.useCallback(
+    (note) => {
+      const { surface, selected } = note;
+      if (selected) {
+        onSelectSurface?.(null);
+      } else {
+        onSelectSurface?.(surface);
+      }
+    },
+    [onSelectSurface]
+  );
+  return h(
+    "div.column-surface-labels",
+    { className },
+    h(notes.ColumnNotes, {
+      notes: notes$1,
+      width,
+      paddingLeft,
+      noteComponent: SurfaceNoteLabel,
+      onClickNote,
+      forceOptions: LABEL_FORCE_OPTIONS,
+      // The leader runs from the surface line in the column to the tag body,
+      // continuing a little past both ends rather than stopping in the gap —
+      // so it needs no endpoint marker of its own
+      connectorOverhang: LABEL_CONNECTOR_OVERHANG,
+      showPointMarker: false
+    })
+  );
+}
+const LABEL_FORCE_OPTIONS = { nodeSpacing: 2 };
+const LABEL_CONNECTOR_OVERHANG = [8, 6];
+function SurfaceNoteLabel({ note }) {
+  const { surface, interval, selected } = note;
+  let primary;
+  if (interval != null) {
+    primary = h(dataComponents.IntervalTag, {
+      interval,
+      size: dataComponents.TagSize.Small,
+      prefix: h(ageRange.Proportion, { value: surface.proportion }),
+      className: "surface-interval-tag"
+    });
+  } else {
+    primary = h(
+      "span.surface-label-status",
+      `${types.surfaceStatusLabels[surface.status]} surface`
+    );
+  }
+  return h(
+    "div.surface-label",
+    { className: classNames__default.default(surfaceClasses(surface), { selected }) },
+    h("div.surface-label-primary", primary)
+  );
+}
+function useSurfaceIntervalDefs(surfaces) {
+  const intervalIDs = React.useMemo(() => {
+    const ids = /* @__PURE__ */ new Set();
+    for (const surface of surfaces) {
+      if (surface.calibration != null) ids.add(surface.calibration.id);
+    }
+    return Array.from(ids);
+  }, [surfaces]);
+  return dataProvider.useMacrostratDefs("intervals", intervalIDs, null);
+}
+function surfaceIntervalColor(surface, intervalMap) {
+  const id = surface.calibration?.id;
+  if (id == null) return null;
+  return intervalMap?.get(id)?.color ?? null;
+}
+function calibrationInterval(surface, intervalMap) {
+  const { calibration } = surface;
+  if (calibration == null) return null;
+  const def = intervalMap?.get(calibration.id);
+  return {
+    id: calibration.id,
+    name: calibration.name,
+    b_age: calibration.b_age,
+    t_age: calibration.t_age,
+    color: def?.color,
+    rank: def?.rank
+  };
+}
+function surfaceClasses(surface) {
+  return classNames__default.default(
+    `status-${types.surfaceToken(surface.status)}`,
+    `type-${types.surfaceToken(surface.type)}`
+  );
+}
+function thinByPixelSpacing(surfaces, pixelPosition, minSpacing, selectedSurface) {
+  if (minSpacing <= 0) return surfaces;
+  const positioned = surfaces.map((surface) => ({ surface, y: pixelPosition(surface) })).filter((d) => d.y != null && !Number.isNaN(d.y)).sort((a, b) => a.y - b.y);
+  const kept = [];
+  for (const item of positioned) {
+    const selected = item.surface.id === selectedSurface;
+    const last = kept[kept.length - 1];
+    if (last == null || item.y - last.y >= minSpacing) {
+      kept.push(item);
+    } else if (selected) {
+      kept[kept.length - 1] = item;
+    }
+  }
+  return kept.map((d) => d.surface);
+}
+function filterByStatus(surfaces, statuses) {
+  if (statuses == null) return surfaces;
+  const allowed = new Set(statuses);
+  return surfaces.filter((d) => allowed.has(d.status));
+}
+function useSurfaceSelection(selectedID, onSelect) {
+  const [internal, setInternal] = React.useState(null);
+  const isControlled = selectedID !== void 0;
+  const select = React.useCallback(
+    (surface) => {
+      setInternal(surface?.id ?? null);
+      onSelect?.(surface);
+    },
+    [onSelect]
+  );
+  let current = internal;
+  if (isControlled) {
+    current = selectedID;
+  }
+  return [current, select];
+}
+const useMeasureEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
+function useUnitsColumnExtent(ref, enabled) {
+  const [extent, setExtent] = React.useState(null);
+  const measure = React.useCallback(() => {
+    if (!enabled) return;
+    const parent = ref.current?.parentElement;
+    const target = parent?.querySelector(
+      `.${unitsContainerClass()}`
+    );
+    if (parent == null || target == null) return;
+    const p = parent.getBoundingClientRect();
+    const t = target.getBoundingClientRect();
+    const next = { left: t.left - p.left, width: t.width };
+    setExtent((prev) => {
+      if (prev?.left === next.left && prev?.width === next.width) {
+        return prev;
+      }
+      return next;
+    });
+  }, [enabled]);
+  useMeasureEffect(measure);
+  useMeasureEffect(() => {
+    if (!enabled) {
+      setExtent(null);
+      return;
+    }
+    const parent = ref.current?.parentElement;
+    if (parent == null) return;
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(parent);
+    for (const child of Array.from(parent.children)) {
+      observer.observe(child);
+    }
+    return () => observer.disconnect();
+  }, [enabled, measure]);
+  return extent;
+}
+function unitsContainerClass() {
+  const s = column_module.default;
+  return s["section-units-container"] ?? s.sectionUnitsContainer ?? "section-units-container";
+}
+exports.ColumnSurfaceLabels = ColumnSurfaceLabels;
+exports.ColumnSurfaceLines = ColumnSurfaceLines;
+exports.ColumnSurfaces = ColumnSurfaces;
+exports.surfaceClasses = surfaceClasses;
+//# sourceMappingURL=surfaces.cjs.map

package/dist/age-model/surfaces.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"surfaces.cjs","sources":["../../src/age-model/surfaces.ts"],"sourcesContent":["/** The surfaces view: age-model calibration surfaces drawn on a column.\n *\n * `ColumnSurfaces` is dropped into a `Column` as a child. It draws one line\n * per surface across the units (`ColumnSurfaceLines`) and a notes column of\n * labels beside them (`ColumnSurfaceLabels`), styled by `boundary_status` and\n * `boundary_type`, with hover and selection.\n */\nimport hyper from \"@macrostrat/hyper\";\nimport classNames from \"classnames\";\nimport {\n  type CSSProperties,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type { NoteData } from \"@macrostrat/column-components\";\nimport {\n  type IntervalShort,\n  IntervalTag,\n  TagSize,\n} from \"@macrostrat/data-components\";\nimport { useMacrostratDefs } from \"@macrostrat/data-provider\";\nimport {\n  useClaimLabelColumn,\n  useCompositeScale,\n  useMacrostratColumnData,\n} from \"../data-provider\";\nimport { ColumnNotes } from \"../notes\";\nimport { AgeLabel, Proportion } from \"../unit-details/age-range\";\nimport columnStyles from \"../column.module.sass\";\nimport styles from \"./surfaces.module.sass\";\nimport {\n  type ColumnSurface,\n  type SurfaceStatus,\n  formatProportion,\n  surfaceLabel,\n  surfacePosition,\n  surfaceStatusLabels,\n  surfaceToken,\n  TIE_POINT_STATUSES,\n} from \"./types\";\nimport { type UseColumnSurfacesOptions, useColumnSurfaces } from \"./data\";\n\nconst h = hyper.styled(styles);\n\n/** How far the surface lines extend: across the units column only, or the\n * full width of the column including its axes. */\nexport type SurfaceLinesExtent = \"units\" | \"column\";\n\nexport type SurfaceSelectionHandler = (surface: ColumnSurface | null) => void;\n\nexport interface SurfaceSelectionProps {\n  /** The selected surface's id. Pass `null` for a controlled, empty\n   * selection; leave undefined for the component to manage selection. */\n  selectedSurface?: ColumnSurface[\"id\"] | null;\n  onSelectSurface?: SurfaceSelectionHandler;\n}\n\nexport interface ColumnSurfacesProps\n  extends UseColumnSurfacesOptions, SurfaceSelectionProps {\n  showLines?: boolean;\n  showLabels?: boolean;\n  extent?: SurfaceLinesExtent;\n  /** Width of the labels column, connector included (default 200) */\n  labelWidth?: number;\n  labelPaddingLeft?: number;\n  /** Only show surfaces with these statuses */\n  statuses?: SurfaceStatus[] | null;\n  /** Which surfaces get a label. Defaults to the tie points — the statuses\n   * at which the age model was constrained — so interpolated (`modeled`),\n   * unspecified and unit-derived surfaces are drawn as lines only. Pass\n   * `null` to label every surface shown. */\n  labelStatuses?: SurfaceStatus[] | null;\n  /** Labels closer than this (in pixels) are thinned out, since the column\n   * has finite room; the selected surface's label is always kept. */\n  minLabelSpacing?: number;\n  className?: string;\n}\n\nexport function ColumnSurfaces(props: ColumnSurfacesProps) {\n  const {\n    showLines = true,\n    showLabels = true,\n    extent = \"units\",\n    labelWidth,\n    labelPaddingLeft,\n    statuses,\n    labelStatuses = TIE_POINT_STATUSES,\n    minLabelSpacing,\n    selectedSurface,\n    onSelectSurface,\n    className,\n    ...dataOptions\n  } = props;\n\n  const { surfaces: allSurfaces } = useColumnSurfaces(dataOptions);\n  const surfaces = useMemo(\n    () => filterByStatus(allSurfaces, statuses),\n    [allSurfaces, statuses],\n  );\n\n  const [selectedID, select] = useSurfaceSelection(\n    selectedSurface,\n    onSelectSurface,\n  );\n\n  return h([\n    h.if(showLines)(ColumnSurfaceLines, {\n      surfaces,\n      extent,\n      selectedSurface: selectedID,\n      onSelectSurface: select,\n      className,\n    }),\n    h.if(showLabels)(ColumnSurfaceLabels, {\n      surfaces,\n      labelStatuses,\n      minLabelSpacing,\n      width: labelWidth,\n      paddingLeft: labelPaddingLeft,\n      selectedSurface: selectedID,\n      onSelectSurface: select,\n      className,\n    }),\n  ]);\n}\n\nexport interface ColumnSurfaceLinesProps extends SurfaceSelectionProps {\n  surfaces: ColumnSurface[];\n  extent?: SurfaceLinesExtent;\n  className?: string;\n}\n\n/** One horizontal line per surface, overlaid on the column at the surface's\n * age (or measured position, for height and depth columns). */\nexport function ColumnSurfaceLines(props: ColumnSurfaceLinesProps) {\n  const {\n    surfaces,\n    extent = \"units\",\n    selectedSurface,\n    onSelectSurface,\n    className,\n  } = props;\n  const scale = useCompositeScale();\n  const { axisType, totalHeight } = useMacrostratColumnData();\n  const intervalMap = useSurfaceIntervalDefs(surfaces);\n\n  const ref = useRef<HTMLDivElement>(null);\n  const unitsExtent = useUnitsColumnExtent(ref, extent === \"units\");\n\n  let style: CSSProperties = { height: totalHeight };\n  if (unitsExtent != null) {\n    style = { ...style, left: unitsExtent.left, width: unitsExtent.width };\n  }\n  const measuring = extent === \"units\" && unitsExtent == null;\n\n  return h(\n    \"div.column-surface-lines\",\n    { ref, style, className: classNames(className, { measuring }) },\n    surfaces.map((surface) => {\n      const position = surfacePosition(surface, axisType);\n      if (position == null) return null;\n      const y = scale(position);\n      if (y == null) return null;\n      return h(SurfaceLine, {\n        key: surface.id,\n        surface,\n        y,\n        color: surfaceIntervalColor(surface, intervalMap),\n        selected: surface.id === selectedSurface,\n        onSelect: onSelectSurface,\n      });\n    }),\n  );\n}\n\nfunction SurfaceLine({\n  surface,\n  y,\n  color,\n  selected,\n  onSelect,\n}: {\n  surface: ColumnSurface;\n  y: number;\n  /** The interval color, when known; otherwise the status color is used */\n  color?: string | null;\n  selected: boolean;\n  onSelect?: SurfaceSelectionHandler;\n}) {\n  const onClick = useCallback(\n    (evt: MouseEvent) => {\n      // Don't let the column deselect its unit\n      evt.stopPropagation();\n      if (selected) {\n        onSelect?.(null);\n      } else {\n        onSelect?.(surface);\n      }\n    },\n    [surface, selected, onSelect],\n  );\n\n  let style: CSSProperties = { top: y };\n  if (color != null) {\n    style = { ...style, \"--surface-color\": color } as CSSProperties;\n  }\n\n  return h(\n    \"div.surface-line\",\n    {\n      style,\n      className: classNames(surfaceClasses(surface), {\n        selected,\n        interactive: onSelect != null,\n      }),\n      title: surfaceLabel(surface),\n      onClick,\n    },\n    h(\"div.surface-line-inner\"),\n  );\n}\n\nexport interface ColumnSurfaceLabelsProps extends SurfaceSelectionProps {\n  surfaces: ColumnSurface[];\n  /** Which surfaces get a label (see `ColumnSurfacesProps.labelStatuses`) */\n  labelStatuses?: SurfaceStatus[] | null;\n  /** Minimum pixel spacing between labels (see `ColumnSurfacesProps`) */\n  minLabelSpacing?: number;\n  /** Total width, connector included */\n  width?: number;\n  paddingLeft?: number;\n  className?: string;\n}\n\ninterface SurfaceNote extends NoteData {\n  /** The interval color, which the note's connector picks up */\n  color?: string;\n  surface: ColumnSurface;\n  /** The calibration interval, with color and rank from the definitions */\n  interval: IntervalShort | null;\n  selected: boolean;\n}\n\n/** A notes column of surface labels, laid out beside the units with the\n * collision avoidance of `NotesColumn`. It takes the label column over from\n * the unit labels while mounted: labels are one or the other. */\nexport function ColumnSurfaceLabels(props: ColumnSurfaceLabelsProps) {\n  const {\n    surfaces,\n    labelStatuses = TIE_POINT_STATUSES,\n    minLabelSpacing = 22,\n    width = 200,\n    paddingLeft = 24,\n    selectedSurface,\n    onSelectSurface,\n    className,\n  } = props;\n  const { axisType } = useMacrostratColumnData();\n  const scale = useCompositeScale();\n  const intervalMap = useSurfaceIntervalDefs(surfaces);\n  useClaimLabelColumn();\n\n  const labeled = useMemo(() => {\n    const byStatus = filterByStatus(surfaces, labelStatuses);\n    return thinByPixelSpacing(\n      byStatus,\n      (s) => scale(surfacePosition(s, axisType) ?? NaN),\n      minLabelSpacing,\n      selectedSurface,\n    );\n  }, [\n    surfaces,\n    labelStatuses,\n    minLabelSpacing,\n    selectedSurface,\n    scale,\n    axisType,\n  ]);\n\n  const notes: SurfaceNote[] = useMemo(() => {\n    const _notes: SurfaceNote[] = [];\n    for (const surface of labeled) {\n      const position = surfacePosition(surface, axisType);\n      if (position == null) continue;\n      _notes.push({\n        id: surface.id,\n        height: position,\n        note: surfaceLabel(surface),\n        // The note's color reaches its connector, so a label's leader line\n        // matches the surface line it points at\n        color: surfaceIntervalColor(surface, intervalMap) ?? undefined,\n        surface,\n        interval: calibrationInterval(surface, intervalMap),\n        selected: surface.id === selectedSurface,\n      });\n    }\n    return _notes;\n  }, [labeled, axisType, selectedSurface, intervalMap]);\n\n  const onClickNote = useCallback(\n    (note: NoteData) => {\n      const { surface, selected } = note as SurfaceNote;\n      if (selected) {\n        onSelectSurface?.(null);\n      } else {\n        onSelectSurface?.(surface);\n      }\n    },\n    [onSelectSurface],\n  );\n\n  return h(\n    \"div.column-surface-labels\",\n    { className },\n    h(ColumnNotes, {\n      notes,\n      width,\n      paddingLeft,\n      noteComponent: SurfaceNoteLabel,\n      onClickNote,\n      forceOptions: LABEL_FORCE_OPTIONS,\n      // The leader runs from the surface line in the column to the tag body,\n      // continuing a little past both ends rather than stopping in the gap —\n      // so it needs no endpoint marker of its own\n      connectorOverhang: LABEL_CONNECTOR_OVERHANG,\n      showPointMarker: false,\n    }),\n  );\n}\n\n/** Breathing room between stacked labels, in pixels */\nconst LABEL_FORCE_OPTIONS = { nodeSpacing: 2 };\n\n/** How far the label's leader line continues past each end, in pixels: left\n * into the column to meet the surface line, right under the tag body. */\nconst LABEL_CONNECTOR_OVERHANG: [number, number] = [8, 6];\n\n/** A surface's label: its calibration interval as the standard interval tag\n * (with the position within the interval as the tag's detail), and the\n * modeled age beneath. Surfaces without a calibration show their status. */\nfunction SurfaceNoteLabel({ note }: { note: SurfaceNote }) {\n  const { surface, interval, selected } = note;\n\n  let primary: any;\n  if (interval != null) {\n    primary = h(IntervalTag, {\n      interval,\n      size: TagSize.Small,\n      prefix: h(Proportion, { value: surface.proportion }),\n      className: \"surface-interval-tag\",\n    });\n  } else {\n    primary = h(\n      \"span.surface-label-status\",\n      `${surfaceStatusLabels[surface.status]} surface`,\n    );\n  }\n\n  return h(\n    \"div.surface-label\",\n    { className: classNames(surfaceClasses(surface), { selected }) },\n    h(\"div.surface-label-primary\", primary),\n  );\n}\n\n/** The interval definitions for the surfaces' calibration intervals. The age\n * model carries interval ids and names but no colors, so they come from the\n * definitions store (which holds them all, and fetches once). */\nfunction useSurfaceIntervalDefs(\n  surfaces: ColumnSurface[],\n): Map<number, any> | null {\n  const intervalIDs = useMemo(() => {\n    const ids = new Set<number>();\n    for (const surface of surfaces) {\n      if (surface.calibration != null) ids.add(surface.calibration.id);\n    }\n    return Array.from(ids);\n  }, [surfaces]);\n  return useMacrostratDefs(\"intervals\", intervalIDs, null);\n}\n\n/** The color a surface is drawn in: its calibration interval's, so the line\n * and its label's leader read as the interval the surface is tied to. `null`\n * for an uncalibrated surface, or before the definitions load — the status\n * color stands in. */\nfunction surfaceIntervalColor(\n  surface: ColumnSurface,\n  intervalMap: Map<number, any> | null,\n): string | null {\n  const id = surface.calibration?.id;\n  if (id == null) return null;\n  return intervalMap?.get(id)?.color ?? null;\n}\n\n/** The calibration interval in the shape the interval tag takes, colored\n * from the definitions when they have loaded. */\nfunction calibrationInterval(\n  surface: ColumnSurface,\n  intervalMap: Map<number, any> | null,\n): IntervalShort | null {\n  const { calibration } = surface;\n  if (calibration == null) return null;\n  const def = intervalMap?.get(calibration.id);\n  return {\n    id: calibration.id,\n    name: calibration.name,\n    b_age: calibration.b_age,\n    t_age: calibration.t_age,\n    color: def?.color,\n    rank: def?.rank,\n  };\n}\n\n/** Class names shared by the lines, labels, legend and tags, so a status or\n * type reads the same everywhere. */\nexport function surfaceClasses(surface: {\n  status?: SurfaceStatus | null;\n  type?: string | null;\n}): string {\n  return classNames(\n    `status-${surfaceToken(surface.status)}`,\n    `type-${surfaceToken(surface.type)}`,\n  );\n}\n\n/** Walk the surfaces down the column and drop any whose label would sit\n * within `minSpacing` pixels of the last one kept. The selected surface is\n * always kept (and displaces a neighbor if need be). */\nfunction thinByPixelSpacing(\n  surfaces: ColumnSurface[],\n  pixelPosition: (s: ColumnSurface) => number | null,\n  minSpacing: number,\n  selectedSurface: ColumnSurface[\"id\"] | null | undefined,\n): ColumnSurface[] {\n  if (minSpacing <= 0) return surfaces;\n  const positioned = surfaces\n    .map((surface) => ({ surface, y: pixelPosition(surface) }))\n    .filter((d) => d.y != null && !Number.isNaN(d.y))\n    .sort((a, b) => a.y - b.y);\n\n  const kept: { surface: ColumnSurface; y: number }[] = [];\n  for (const item of positioned) {\n    const selected = item.surface.id === selectedSurface;\n    const last = kept[kept.length - 1];\n    if (last == null || item.y - last.y >= minSpacing) {\n      kept.push(item);\n    } else if (selected) {\n      // The selection wins its slot\n      kept[kept.length - 1] = item;\n    }\n  }\n  return kept.map((d) => d.surface);\n}\n\nfunction filterByStatus(\n  surfaces: ColumnSurface[],\n  statuses: SurfaceStatus[] | null | undefined,\n): ColumnSurface[] {\n  if (statuses == null) return surfaces;\n  const allowed = new Set(statuses);\n  return surfaces.filter((d) => allowed.has(d.status));\n}\n\n/** Controlled-or-uncontrolled selection: when `selectedID` is passed (even as\n * `null`) the consumer owns it; otherwise it is kept internally. */\nfunction useSurfaceSelection(\n  selectedID: ColumnSurface[\"id\"] | null | undefined,\n  onSelect: SurfaceSelectionHandler | undefined,\n): [ColumnSurface[\"id\"] | null, SurfaceSelectionHandler] {\n  const [internal, setInternal] = useState<ColumnSurface[\"id\"] | null>(null);\n  const isControlled = selectedID !== undefined;\n\n  const select: SurfaceSelectionHandler = useCallback(\n    (surface) => {\n      setInternal(surface?.id ?? null);\n      onSelect?.(surface);\n    },\n    [onSelect],\n  );\n\n  let current = internal;\n  if (isControlled) {\n    current = selectedID;\n  }\n  return [current, select];\n}\n\ninterface HorizontalExtent {\n  left: number;\n  width: number;\n}\n\n/** `useLayoutEffect` in the browser, `useEffect` on the server — where it\n * would warn and has nothing to measure anyway. */\nconst useMeasureEffect =\n  typeof window === \"undefined\" ? useEffect : useLayoutEffect;\n\n/** Measure where the units column sits within the `Column`, so an overlay\n * can cover exactly the units rather than the axes. `null` while unmeasured,\n * when disabled, or when the units column can't be found. */\nfunction useUnitsColumnExtent(\n  ref: RefObject<HTMLDivElement | null>,\n  enabled: boolean,\n): HorizontalExtent | null {\n  const [extent, setExtent] = useState<HorizontalExtent | null>(null);\n\n  const measure = useCallback(() => {\n    if (!enabled) return;\n    const parent = ref.current?.parentElement;\n    const target = parent?.querySelector<HTMLElement>(\n      `.${unitsContainerClass()}`,\n    );\n    if (parent == null || target == null) return;\n\n    const p = parent.getBoundingClientRect();\n    const t = target.getBoundingClientRect();\n    const next = { left: t.left - p.left, width: t.width };\n    setExtent((prev) => {\n      if (prev?.left === next.left && prev?.width === next.width) {\n        return prev;\n      }\n      return next;\n    });\n  }, [enabled]);\n\n  // Re-measure on every render as a backstop: cheap, and it catches layout\n  // changes that no observer reports.\n  useMeasureEffect(measure);\n\n  useMeasureEffect(() => {\n    if (!enabled) {\n      setExtent(null);\n      return;\n    }\n    const parent = ref.current?.parentElement;\n    if (parent == null) return;\n    if (typeof ResizeObserver === \"undefined\") return;\n\n    const observer = new ResizeObserver(measure);\n    // The units column *moves* when a sibling changes width — the timescale\n    // widening once its intervals load, or its level count changing — and\n    // that is not a resize of the units column or of the column itself, so\n    // the siblings have to be watched too.\n    observer.observe(parent);\n    for (const child of Array.from(parent.children)) {\n      observer.observe(child);\n    }\n    return () => observer.disconnect();\n  }, [enabled, measure]);\n\n  return extent;\n}\n\n/** The (module-scoped) class of the units container rendered by\n * `SectionsColumn`. */\nfunction unitsContainerClass(): string {\n  const s = columnStyles as any;\n  return (\n    s[\"section-units-container\"] ??\n    s.sectionUnitsContainer ??\n    \"section-units-container\"\n  );\n}\n"],"names":["hyper","styles","TIE_POINT_STATUSES","useColumnSurfaces","useMemo","useCompositeScale","useMacrostratColumnData","useRef","classNames","surfacePosition","useCallback","surfaceLabel","useClaimLabelColumn","notes","ColumnNotes","IntervalTag","TagSize","Proportion","surfaceStatusLabels","useMacrostratDefs","surfaceToken","useState","useEffect","useLayoutEffect","columnStyles"],"mappings":"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"}

package/dist/age-model/surfaces.d.ts

@@ -0,0 +1,68 @@
+import { CSSProperties, RefObject } from 'react';
+import { ColumnSurface, SurfaceStatus } from './types';
+import { UseColumnSurfacesOptions } from './data';
+/** How far the surface lines extend: across the units column only, or the
+ * full width of the column including its axes. */
+export type SurfaceLinesExtent = "units" | "column";
+export type SurfaceSelectionHandler = (surface: ColumnSurface | null) => void;
+export interface SurfaceSelectionProps {
+    /** The selected surface's id. Pass `null` for a controlled, empty
+     * selection; leave undefined for the component to manage selection. */
+    selectedSurface?: ColumnSurface["id"] | null;
+    onSelectSurface?: SurfaceSelectionHandler;
+}
+export interface ColumnSurfacesProps extends UseColumnSurfacesOptions, SurfaceSelectionProps {
+    showLines?: boolean;
+    showLabels?: boolean;
+    extent?: SurfaceLinesExtent;
+    /** Width of the labels column, connector included (default 200) */
+    labelWidth?: number;
+    labelPaddingLeft?: number;
+    /** Only show surfaces with these statuses */
+    statuses?: SurfaceStatus[] | null;
+    /** Which surfaces get a label. Defaults to the tie points — the statuses
+     * at which the age model was constrained — so interpolated (`modeled`),
+     * unspecified and unit-derived surfaces are drawn as lines only. Pass
+     * `null` to label every surface shown. */
+    labelStatuses?: SurfaceStatus[] | null;
+    /** Labels closer than this (in pixels) are thinned out, since the column
+     * has finite room; the selected surface's label is always kept. */
+    minLabelSpacing?: number;
+    className?: string;
+}
+export declare function ColumnSurfaces(props: ColumnSurfacesProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export interface ColumnSurfaceLinesProps extends SurfaceSelectionProps {
+    surfaces: ColumnSurface[];
+    extent?: SurfaceLinesExtent;
+    className?: string;
+}
+/** One horizontal line per surface, overlaid on the column at the surface's
+ * age (or measured position, for height and depth columns). */
+export declare function ColumnSurfaceLines(props: ColumnSurfaceLinesProps): import('react').ReactElement<{
+    ref: RefObject<HTMLDivElement | null>;
+    style: CSSProperties;
+    className: string;
+}, string | import('react').JSXElementConstructor<any>>;
+export interface ColumnSurfaceLabelsProps extends SurfaceSelectionProps {
+    surfaces: ColumnSurface[];
+    /** Which surfaces get a label (see `ColumnSurfacesProps.labelStatuses`) */
+    labelStatuses?: SurfaceStatus[] | null;
+    /** Minimum pixel spacing between labels (see `ColumnSurfacesProps`) */
+    minLabelSpacing?: number;
+    /** Total width, connector included */
+    width?: number;
+    paddingLeft?: number;
+    className?: string;
+}
+/** A notes column of surface labels, laid out beside the units with the
+ * collision avoidance of `NotesColumn`. It takes the label column over from
+ * the unit labels while mounted: labels are one or the other. */
+export declare function ColumnSurfaceLabels(props: ColumnSurfaceLabelsProps): import('react').ReactElement<{
+    className: string | undefined;
+}, string | import('react').JSXElementConstructor<any>>;
+/** Class names shared by the lines, labels, legend and tags, so a status or
+ * type reads the same everywhere. */
+export declare function surfaceClasses(surface: {
+    status?: SurfaceStatus | null;
+    type?: string | null;
+}): string;