@macrostrat/column-views 3.11.0 → 3.12.0

package/src/age-model/details.ts

@@ -0,0 +1,333 @@
+/** The inspector for a selected surface, and the small tags and legend that
+ * explain surface statuses and types. */
+import hyper from "@macrostrat/hyper";
+import classNames from "classnames";
+import { type ReactNode, useMemo } from "react";
+import { Button, Tag } from "@blueprintjs/core";
+import {
+  DataField,
+  Identifier,
+  type IntervalShort,
+  IntervalTag,
+  UnitIdentifier,
+  Value,
+} from "@macrostrat/data-components";
+import { useMacrostratDefs } from "@macrostrat/data-provider";
+import type { UnitLong } from "@macrostrat/api-types";
+import { useColumnUnitsMap } from "../data-provider";
+import { AgeLabel, Proportion } from "../unit-details/age-range";
+import { formatRange } from "../unit-details/utils";
+import { ReferencesField } from "../unit-details/panel";
+import { surfaceClasses } from "./surfaces";
+import surfaceStyles from "./surfaces.module.sass";
+import styles from "./details.module.sass";
+import {
+  type BoundaryType,
+  type ColumnSurface,
+  type SurfaceStatus,
+  formatProportion,
+  surfaceStatuses,
+  surfaceStatusDescriptions,
+  surfaceStatusLabels,
+} from "./types";
+
+const h = hyper.styled({ ...surfaceStyles, ...styles });
+
+export interface SurfaceDetailsPanelProps {
+  /** The surface to inspect; `null` renders the panel's empty state */
+  surface: ColumnSurface | null;
+  onClose?: () => void;
+  /** Called when a unit above or below the surface is clicked */
+  onSelectUnit?: (unitID: number) => void;
+  /** Extra controls for the header */
+  actions?: ReactNode;
+  /** Label for the measured-position field ("Height" or "Depth") */
+  positionLabel?: string;
+  className?: string;
+}
+
+/** Details of one surface: its age, calibration, the units it separates, and
+ * provenance. A companion to `UnitDetailsPanel`. */
+export function SurfaceDetailsPanel(props: SurfaceDetailsPanelProps) {
+  const {
+    surface,
+    onClose,
+    onSelectUnit,
+    actions,
+    positionLabel = "Position",
+    className,
+  } = props;
+
+  // A selection that hasn't been made yet is an ordinary state for a panel
+  // bound to one, not a caller error
+  if (surface == null) {
+    return h(
+      "div.surface-details-panel.no-surface",
+      { className },
+      h("p.placeholder", "No surface selected."),
+    );
+  }
+
+  let closeButton: ReactNode = null;
+  if (onClose != null) {
+    closeButton = h(Button, {
+      icon: "cross",
+      variant: "minimal",
+      size: "small",
+      onClick: onClose,
+      "aria-label": "Close",
+    });
+  }
+
+  let positionField: ReactNode = null;
+  if (surface.position != null) {
+    positionField = h(DataField, {
+      label: positionLabel,
+      value: surface.position.toLocaleString("en-US", {
+        maximumFractionDigits: 2,
+      }),
+      unit: "m",
+    });
+  }
+
+  let sectionField: ReactNode = null;
+  if (surface.section_id != null) {
+    sectionField = h(
+      DataField,
+      { label: "Section" },
+      h(Identifier, { id: surface.section_id }),
+    );
+  }
+
+  let refsField: ReactNode = null;
+  if (surface.ref_id != null) {
+    refsField = h(ReferencesField, { refs: [surface.ref_id] });
+  }
+
+  return h(
+    "div.surface-details-panel",
+    { className: classNames(className, surfaceClasses(surface)) },
+    [
+      h("div.surface-details-header", [
+        h("h3.surface-details-title", [
+          "Surface ",
+          h(SurfaceIdentifier, { id: surface.id }),
+        ]),
+        h("div.surface-details-tags", [
+          h(SurfaceStatusTag, {
+            status: surface.status,
+            inferred: surface.statusInferred,
+          }),
+          h(SurfaceTypeTag, { type: surface.type }),
+        ]),
+        h("div.spacer"),
+        actions,
+        closeButton,
+      ]),
+      h("div.surface-details-content", [
+        h(DataField, { label: "Model age" }, h(AgeLabel, { age: surface.age })),
+        h(SurfaceCalibrationField, { surface }),
+        positionField,
+        h(SurfaceUnitsField, {
+          label: "Unit above",
+          unitIDs: surface.unitsAbove,
+          onSelectUnit,
+        }),
+        h(SurfaceUnitsField, {
+          label: "Unit below",
+          unitIDs: surface.unitsBelow,
+          onSelectUnit,
+        }),
+        sectionField,
+        refsField,
+      ]),
+    ],
+  );
+}
+
+function SurfaceIdentifier({ id }: { id: ColumnSurface["id"] }) {
+  if (typeof id === "number") {
+    return h(Identifier, { id });
+  }
+  return h("code.surface-id", String(id));
+}
+
+/** The calibration interval as a colored tag, with the surface's position in
+ * it: "Calymmian (1600–1400 Ma), 85% above base". */
+function SurfaceCalibrationField({ surface }: { surface: ColumnSurface }) {
+  const { calibration, proportion } = surface;
+  const ids = useMemo(() => {
+    if (calibration == null) return [];
+    return [calibration.id];
+  }, [calibration?.id]);
+  // Interval colors come from the definitions table; the age model itself
+  // doesn't carry them
+  const intervalMap = useMacrostratDefs("intervals", ids, null);
+
+  if (calibration == null) {
+    return h(DataField, {
+      label: "Calibration",
+      value: "None",
+      className: "no-calibration",
+    });
+  }
+
+  const def = intervalMap?.get(calibration.id);
+  const interval: IntervalShort = {
+    id: calibration.id,
+    name: calibration.name,
+    b_age: calibration.b_age,
+    t_age: calibration.t_age,
+    color: def?.color,
+    rank: def?.rank,
+  };
+
+  return h(DataField, { label: "Calibration" }, [
+    h(
+      "div.calibration-interval",
+      h(IntervalTag, {
+        interval,
+        prefix: h(Proportion, { value: proportion }),
+      }),
+    ),
+  ]);
+}
+
+function SurfaceUnitsField({
+  label,
+  unitIDs,
+  onSelectUnit,
+}: {
+  label: string;
+  unitIDs: number[];
+  onSelectUnit?: (unitID: number) => void;
+}) {
+  const unitsMap = useColumnUnitsMap();
+  if (unitIDs.length === 0) {
+    return h(DataField, { label, value: "None", className: "no-units" });
+  }
+  return h(
+    DataField,
+    { label, className: "surface-units-field" },
+    h(
+      "ul.surface-units-list",
+      unitIDs.map((unitID) => {
+        const unit = unitsMap?.get(unitID) as UnitLong | undefined;
+        let onClick: (() => void) | undefined = undefined;
+        if (onSelectUnit != null) {
+          onClick = () => onSelectUnit(unitID);
+        }
+        return h(
+          "li",
+          { key: unitID },
+          h(UnitIdentifier, {
+            unitID,
+            colID: unit?.col_id,
+            name: unit?.unit_name,
+            onClick,
+          }),
+        );
+      }),
+    ),
+  );
+}
+
+export function SurfaceStatusTag({
+  status,
+  inferred = false,
+  className,
+}: {
+  status: SurfaceStatus;
+  /** The status was inferred rather than recorded (see
+   * `inferTiePointStatuses`); the tag says so. */
+  inferred?: boolean;
+  className?: string;
+}) {
+  let label: ReactNode = surfaceStatusLabels[status] ?? status;
+  let title = surfaceStatusDescriptions[status];
+  if (inferred) {
+    label = [label, h("span.inferred-marker", "*")];
+    title = INFERRED_STATUS_DESCRIPTION;
+  }
+
+  return h(
+    Tag,
+    {
+      variant: "minimal",
+      className: classNames(
+        "surface-tag",
+        className,
+        surfaceClasses({ status }),
+        { inferred },
+      ),
+      title,
+    },
+    label,
+  );
+}
+
+const INFERRED_STATUS_DESCRIPTION =
+  "Recorded as modeled, but this surface cannot have been interpolated — it " +
+  "sits on the base or top of its interval, or is the edge of a gap-bound " +
+  "package — so it constrains the age model rather than falling out of it";
+
+export function SurfaceTypeTag({
+  type,
+  className,
+}: {
+  type: BoundaryType | null | undefined;
+  className?: string;
+}) {
+  if (type == null || type === "") return null;
+  return h(
+    Tag,
+    {
+      variant: "minimal",
+      className: classNames("surface-tag", "surface-type-tag", className),
+    },
+    type,
+  );
+}
+
+export interface SurfaceStatusLegendProps {
+  statuses?: SurfaceStatus[];
+  showDescriptions?: boolean;
+  className?: string;
+}
+
+/** A legend of surface line styles, one entry per boundary status. */
+export function SurfaceStatusLegend(props: SurfaceStatusLegendProps) {
+  const {
+    statuses = surfaceStatuses,
+    showDescriptions = false,
+    className,
+  } = props;
+  return h(
+    "ul.surface-status-legend",
+    {
+      className: classNames(className, {
+        "with-descriptions": showDescriptions,
+      }),
+    },
+    statuses.map((status) => {
+      let description: ReactNode = null;
+      if (showDescriptions) {
+        description = h(
+          "div.legend-description",
+          surfaceStatusDescriptions[status],
+        );
+      }
+      return h(
+        "li.legend-item",
+        { key: status, className: surfaceClasses({ status }) },
+        [
+          h("div.surface-label-marker"),
+          h("div.legend-text", [
+            h("div.legend-label", surfaceStatusLabels[status]),
+            description,
+          ]),
+        ],
+      );
+    }),
+  );
+}

package/src/age-model/index.ts

@@ -0,0 +1,5 @@
+export * from "./types";
+export * from "./data";
+export * from "./surfaces";
+export * from "./details";
+export * from "./legacy";

package/src/age-model/legacy.ts

@@ -0,0 +1,30 @@
+/** Earlier, in-development overlays, kept so existing consumers keep working.
+ * Both are now thin wrappers over `ColumnSurfaces`. */
+import h from "@macrostrat/hyper";
+import { useMemo } from "react";
+import type { UnitLong } from "@macrostrat/api-types";
+import { useMacrostratColumnData, useMacrostratUnits } from "../data-provider";
+import { ColumnSurfaces } from "./surfaces";
+import { surfacesFromUnits } from "./types";
+
+/** @deprecated Use `ColumnSurfaces`, which also labels the surfaces and
+ * styles them by boundary status. */
+export function BoundaryAgeModelOverlay() {
+  return h(ColumnSurfaces, {
+    showLabels: false,
+    extent: "column",
+    fallbackToUnits: false,
+  });
+}
+
+/** @deprecated Use `ColumnSurfaces` with `surfaces: surfacesFromUnits(units)`,
+ * or rely on its default fallback to unit-derived surfaces. */
+export function ComputedSurfacesOverlay() {
+  const units = useMacrostratUnits() as UnitLong[];
+  const { axisType } = useMacrostratColumnData();
+  const surfaces = useMemo(
+    () => surfacesFromUnits(units, { axisType }),
+    [units, axisType],
+  );
+  return h(ColumnSurfaces, { surfaces, showLabels: false, extent: "column" });
+}

package/src/age-model/surfaces.module.sass

@@ -0,0 +1,168 @@
+// Surface styling is keyed on boundary status (how the age is constrained)
+// and boundary type (the nature of the contact). The tokens default to the
+// design-system palette and can be overridden per column.
+.column-surface-lines, .column-surface-labels, .surface-status-legend, .surface-tag
+  --surface-color-absolute: var(--pz-intent-danger, #c23030)
+  --surface-color-relative: var(--pz-intent-primary, #2d72d2)
+  --surface-color-spike: var(--pz-purple-500, #7961db)
+  --surface-color-imposed: var(--pz-orange-500, #c87619)
+  --surface-color-modeled: var(--pz-neutral-500, #8f99a8)
+  --surface-color-unspecified: var(--pz-neutral-400, #abb3bf)
+  --surface-color-derived: var(--pz-intent-success, #238551)
+  // The selection color is the column's, so a selected surface and a selected
+  // unit read as the same act
+  --surface-selected-color: var(--column-selection-color, var(--pz-accent-color, #7961db))
+  // Surfaces are drawn at one weight — the status shows in the dash pattern
+  // and the color, not the thickness — and the label's leader line matches it,
+  // so the stroke reads as continuous from the column into the tag.
+  --surface-line-width: 3px
+  --surface-leader-width: var(--surface-line-width)
+  // The outline of the box around a selected surface line
+  --surface-selection-width: 2px
+  // The tags keep the standard inset: it is what centers a note on the line
+  // that points at it, and it puts the tag's left edge exactly where the
+  // leader line ends, which the leader's overhang then tucks under
+
+// Map statuses to a single color token that the lines, markers and tags share
+.status-absolute
+  --surface-color: var(--surface-color-absolute)
+.status-relative
+  --surface-color: var(--surface-color-relative)
+.status-spike
+  --surface-color: var(--surface-color-spike)
+.status-imposed
+  --surface-color: var(--surface-color-imposed)
+.status-modeled
+  --surface-color: var(--surface-color-modeled)
+.status-unspecified
+  --surface-color: var(--surface-color-unspecified)
+.status-derived
+  --surface-color: var(--surface-color-derived)
+
+// The dash pattern follows how the age is constrained: dated and
+// interval-relative surfaces are solid, interpolated and unspecified ones
+// dotted, imposed ones dashed. Weight is constant.
+.status-absolute, .status-relative, .status-spike
+  --surface-line-style: solid
+.status-imposed
+  --surface-line-style: dashed
+.status-modeled, .status-unspecified, .status-derived
+  --surface-line-style: dotted
+
+// Unconformable contacts are drawn as a double rule
+.type-unconformity, .type-disconformity, .type-non-conformity, .type-angular-unconformity
+  --surface-line-double: 1
+.type-fault
+  --surface-line-style: dashed
+
+.column-surface-lines
+  position: absolute
+  top: 0
+  left: 0
+  width: 100%
+  pointer-events: none
+  z-index: 5
+  &.measuring
+    visibility: hidden
+
+.surface-line
+  position: absolute
+  left: 0
+  right: 0
+  height: 0
+  // A comfortable hit area around a hairline
+  padding: 4px 0
+  transform: translateY(-4px)
+  pointer-events: none
+  color: var(--surface-color)
+  &.interactive
+    pointer-events: auto
+    cursor: pointer
+
+  .surface-line-inner
+    border-top: var(--surface-line-width, 1px) var(--surface-line-style, solid) var(--surface-color)
+    transform: translateY(calc(var(--surface-line-width, 1px) / -2))
+
+  &.interactive:hover .surface-line-inner
+    border-top-width: calc(var(--surface-line-width, 1px) + 1px)
+    filter: brightness(0.8)
+
+  // Selection outlines the box around the line; the line inside keeps the
+  // color of the interval it marks
+  &.selected
+    outline: var(--surface-selection-width) solid var(--surface-selected-color)
+    background-color: var(--pz-selected-background-color, transparent)
+
+// Double rule for unconformable contacts
+.surface-line
+  &.type-unconformity, &.type-disconformity, &.type-non-conformity, &.type-angular-unconformity
+    .surface-line-inner
+      border-bottom: var(--surface-line-width, 1px) var(--surface-line-style, solid) var(--surface-color)
+      height: 3px
+
+.column-surface-labels
+  position: relative
+  :global(.col-note-label)
+    // We render our own label body
+    display: none
+  :global(.note-inner)
+    margin: 2px 5px
+  // The leader continues past both of its ends (`connectorOverhang`), so it
+  // has to paint outside the notes SVG: left over the gap to the column, right
+  // under the tag body
+  svg
+    overflow: visible
+  // It carries the surface's color (set per note as `--note-color`) and the
+  // weight of the line it runs into
+  :global(.link)
+    stroke-width: var(--surface-leader-width)
+
+.surface-label
+  display: flex
+  flex-direction: row
+  align-items: center
+  gap: 6px
+  padding: 2px 4px
+  border-radius: 3px
+  cursor: pointer
+  line-height: 1.2
+  color: var(--column-text-color)
+  &:hover
+    background-color: var(--pz-hover-background-color, rgba(128, 128, 128, 0.12))
+  // Selection reads in the text itself rather than as a card around it
+  &.selected .surface-label-primary
+    font-weight: 700
+
+.surface-label-marker
+  flex: none
+  width: 14px
+  height: 0
+  border-top: var(--surface-line-width, 1px) var(--surface-line-style, solid) var(--surface-color)
+  .type-unconformity &, .type-disconformity &, .type-non-conformity &, .type-angular-unconformity &
+    border-bottom: var(--surface-line-width, 1px) var(--surface-line-style, solid) var(--surface-color)
+    height: 3px
+
+.surface-label-text
+  min-width: 0
+  display: flex
+  flex-direction: row
+  align-items: baseline
+  gap: 6px
+  white-space: nowrap
+
+.surface-label-primary
+  font-size: 0.75rem
+  font-weight: 500
+  white-space: nowrap
+  // The tag keeps its name and detail on one line
+  :global(.bp6-tag), .surface-interval-tag
+    white-space: nowrap
+    vertical-align: middle
+
+.surface-label-status
+  font-style: italic
+
+.surface-label-secondary
+  font-size: 0.7rem
+  white-space: nowrap
+  color: var(--text-subtle-color, var(--pz-text-subtle-color, #5f6b7c))