@macrostrat/column-views 3.6.0 → 3.8.0

package/src/maps/column-correlation/state.ts

@@ -19,13 +19,34 @@ import { useMacrostratColumns } from "@macrostrat/data-provider";
 import { buffer } from "@turf/buffer";
 import { booleanPointInPolygon } from "@turf/boolean-point-in-polygon";
 
+export type CorrelationSelectionMode = "line" | "manual";
+
 export interface CorrelationMapInput {
   columns: ColumnGeoJSONRecord[];
   focusedLine: LineString | null;
+  /** When set, columns are selected manually (by clicking) in this order,
+   * rather than derived from a line of section. */
+  manualColumns?: number[] | null;
 }
 
 export interface CorrelationMapStore extends CorrelationMapInput {
   onClickMap: (event: mapboxgl.MapMouseEvent, point: Point) => void;
+  /** Toggle a column in/out of the manual selection (used in "manual" mode) */
+  toggleColumn: (colID: number) => void;
+  /** Remove a column from the selection. In "line" mode this converts the
+   * current selection to a manual one (a line can't represent an arbitrary
+   * subset), so removing a column switches modes. */
+  removeColumn: (colID: number) => void;
+  /** Replace the manual column selection with an explicit ordered list (used
+   * e.g. for drag-and-drop reordering). Switches to manual mode. */
+  setManualColumns: (colIDs: number[]) => void;
+  setHoveredColumn: (colID: number | null) => void;
+  hoveredColumn: number | null;
+  /** Request the map to frame a particular column (e.g. on header click). */
+  zoomToColumn: (colID: number | null) => void;
+  zoomColumn: number | null;
+  /** Incremented on each zoom request so repeat clicks re-frame the column. */
+  zoomNonce: number;
   projectID?: number;
 }
 
@@ -45,13 +66,19 @@ const CorrelationStoreContext =
 
 type ComputedStore = {
   focusedColumns: FocusedColumnGeoJSONRecord[];
+  selectionMode: CorrelationSelectionMode;
 };
 
 /** A computed store that will automatically update when the state changes */
 const computed = createComputed((state: CorrelationMapStore): ComputedStore => {
+  const manual = state.manualColumns != null;
   return {
-    // We compute the focused columns based on columns and focusedLine
-    focusedColumns: buildCorrelationColumns(state.columns, state.focusedLine),
+    selectionMode: manual ? "manual" : "line",
+    // Focused columns are derived either from an explicit manual selection or
+    // from the columns intersecting the line of section.
+    focusedColumns: manual
+      ? buildManualColumns(state.columns, state.manualColumns)
+      : buildCorrelationColumns(state.columns, state.focusedLine),
   };
 }) as any;
 
@@ -61,6 +88,7 @@ export function ColumnCorrelationProvider({
   projectID,
   inProcess,
   focusedLine,
+  manualColumns = null,
   onSelectColumns,
 }: CorrelationProviderProps) {
   const [store] = useState(() => {
@@ -68,10 +96,16 @@ export function ColumnCorrelationProvider({
       computed((set, get): CorrelationMapStore => {
         return {
           focusedLine,
+          manualColumns,
+          hoveredColumn: null,
+          zoomColumn: null,
+          zoomNonce: 0,
           projectID,
           columns: null,
           onClickMap(event: mapboxgl.MapMouseEvent, point: Point) {
             const state = get();
+            // In manual-selection mode the map click is handled per-column
+            if (state.manualColumns != null) return;
             // Check if shift key is pressed
             const shiftKeyPressed = event.originalEvent.shiftKey;
             let existingCoords = state.focusedLine?.coordinates ?? [];
@@ -87,6 +121,36 @@ export function ColumnCorrelationProvider({
               },
             });
           },
+          toggleColumn(colID: number) {
+            const state = get();
+            const current =
+              state.manualColumns ??
+              state.focusedColumns.map((d) => d.properties.col_id);
+            const next = current.includes(colID)
+              ? current.filter((d) => d !== colID)
+              : [...current, colID];
+            set({ manualColumns: next, focusedLine: null });
+          },
+          removeColumn(colID: number) {
+            const state = get();
+            // Seed from the current selection (line-derived or manual)
+            const current =
+              state.manualColumns ??
+              state.focusedColumns.map((d) => d.properties.col_id);
+            set({
+              manualColumns: current.filter((d) => d !== colID),
+              focusedLine: null,
+            });
+          },
+          setManualColumns(colIDs: number[]) {
+            set({ manualColumns: colIDs, focusedLine: null });
+          },
+          setHoveredColumn(colID: number | null) {
+            set({ hoveredColumn: colID });
+          },
+          zoomToColumn(colID: number | null) {
+            set({ zoomColumn: colID, zoomNonce: get().zoomNonce + 1 });
+          },
         };
       }),
     );
@@ -122,6 +186,24 @@ export function useCorrelationMapStore(
   return useStore(storeApi, selector);
 }
 
+export interface ColumnMapLink {
+  onColumnMouseOver: (colID: number | null) => void;
+  onColumnClick: (colID: number) => void;
+}
+
+/** Wire a correlation chart's column-level events to the correlation map:
+ * hovering a column highlights it on the map, and clicking a column header
+ * frames it. Spread the result into `CorrelationChart`. Must be used within a
+ * `ColumnCorrelationProvider`. */
+export function useColumnMapLink(): ColumnMapLink {
+  const setHoveredColumn = useCorrelationMapStore((s) => s.setHoveredColumn);
+  const zoomToColumn = useCorrelationMapStore((s) => s.zoomToColumn);
+  return {
+    onColumnMouseOver: setHoveredColumn,
+    onColumnClick: zoomToColumn,
+  };
+}
+
 function buildCorrelationColumns(
   columns: ColumnGeoJSONRecord[],
   line: LineString,
@@ -135,6 +217,32 @@ function buildCorrelationColumns(
   );
 }
 
+function buildManualColumns(
+  columns: ColumnGeoJSONRecord[],
+  ids: number[],
+): FocusedColumnGeoJSONRecord[] {
+  /** Build focused columns from an explicit, ordered list of column IDs. The
+   * ordering line simply connects them in the order they were selected. */
+  if (columns == null || ids == null) return [];
+  const byID = new Map(columns.map((c) => [c.properties.col_id, c]));
+  const result: FocusedColumnGeoJSONRecord[] = [];
+  ids.forEach((id, i) => {
+    const col = byID.get(id);
+    if (col == null) return;
+    const c = centroid(col.geometry);
+    result.push({
+      ...col,
+      properties: {
+        ...col.properties,
+        centroid: c,
+        nearestPointOnLine: c,
+        distanceAlongLine: i,
+      },
+    });
+  });
+  return result;
+}
+
 function computeIntersectingColumns(
   columns: ColumnGeoJSONRecord[],
   line: LineString,

package/src/maps/layers/columns.ts

@@ -75,7 +75,13 @@ export function buildColumnsStyle(
     opts.selectedColor ?? getCSSVariable("--selection-color", "purple");
 
   const lineColor = opts.lineColor ?? columnBaseColor;
-  const isHovered = ["boolean", ["feature-state", "hover"], false];
+  // Highlight on either direct map hover or an externally-driven highlight
+  // (e.g. hovering the corresponding column header elsewhere in the UI).
+  const isHovered = [
+    "any",
+    ["boolean", ["feature-state", "hover"], false],
+    ["boolean", ["feature-state", "highlighted"], false],
+  ];
   // If color is in the feature state or geojson properties, use that as second choice
   if (typeof columnColor === "string") {
     columnColor = [

package/src/prepare-units/helpers.ts

@@ -118,8 +118,6 @@ function assignColumnsToUnitsWithinOverlappingGroup<T extends BaseUnit>(
     }
   }
 
-  console.log(columns);
-
   const units: UnitWithLayoutParameters<T>[] = columns.flatMap(
     (column, columnIndex) =>
       column.map((unit) => {
@@ -267,7 +265,10 @@ export function groupUnitsIntoSectionsByOverlap<T extends BaseUnit>(
         const lastSection = nextSections[nextSections.length - 1];
         if (isOverlapping(section, lastSection)) {
           // Merge with the last section
-          nextSections[nextSections.length - 1] = mergeSections(lastSection, section);
+          nextSections[nextSections.length - 1] = mergeSections(
+            lastSection,
+            section,
+          );
           merged = true;
         } else {
           nextSections.push(section);

package/src/section.ts

@@ -7,6 +7,7 @@ import { ReactNode, FunctionComponent, useMemo } from "react";
 import {
   Timescale,
   TimescaleOrientation,
+  TimescaleClickHandler,
   useMacrostratIntervals,
 } from "@macrostrat/timescale";
 import { ColumnAxisType, SVG } from "@macrostrat/column-components";
@@ -218,10 +219,16 @@ export function CompositeTimescale(props: CompositeTimescaleProps) {
 
 type CompositeTimescaleCoreProps = CompositeTimescaleProps & {
   packages: PackageScaleLayoutData[];
+  onClickInterval?: TimescaleClickHandler;
 };
 
 export function CompositeTimescaleCore(props: CompositeTimescaleCoreProps) {
-  const { levels = 3, packages, unconformityLabels = false } = props;
+  const {
+    levels = 3,
+    packages,
+    unconformityLabels = false,
+    onClickInterval,
+  } = props;
 
   // Use intervals from Macrostrat API
   const baseURL = useMacrostratBaseURL();
@@ -254,6 +261,7 @@ export function CompositeTimescaleCore(props: CompositeTimescaleCoreProps) {
               showAgeAxis: false,
               scale,
               intervals,
+              onClick: onClickInterval,
             }),
           ],
         );

package/src/unit-details/age-range.ts

@@ -132,8 +132,10 @@ export function IntervalProportions({
   const i0 = unit.b_int_id;
   const i1 = unit.t_int_id;
 
+  const ints = new Set([i0, i1]);
+
   /** Get interval information */
-  const intervalMap = useMacrostratDefs("intervals");
+  const intervalMap = useMacrostratDefs("intervals", Array.from(ints), null);
   const [int0, int1] = useMemo(() => {
     const int0 = intervalMap?.get(i0) ?? {};
     if (i0 === i1) {

package/src/unit-details/index.ts

@@ -3,4 +3,10 @@ export * from "./popover";
 export * from "./modal-panel";
 export * from "./age-range";
 export * from "./strat-names";
-export * from "./identifiers";
+
+// Backwards compatibility
+export {
+  ClickableText,
+  Identifier,
+  UnitIdentifier,
+} from "@macrostrat/data-components";

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

@@ -61,14 +61,6 @@
   color: var(--secondary-color)
   font-style: italic
 
-.strat-name-id, .identifier
-  font-family: var(--monospace-font)
-  color: var(--secondary-color)
-
-  &::before
-    content: '#'
-    color: var(--tertiary-color)
-
 .color-swatch
   width: 1em
   height: 1em

package/src/unit-details/panel.ts

@@ -34,7 +34,11 @@ import { AgeField, Duration, IntervalProportions } from "./age-range";
 import { formatRange, formatSignificance } from "./utils.ts";
 import h from "./panel.module.sass";
 import { StratNameField } from "./strat-names.ts";
-import { Identifier, UnitIdentifier, UnitInfo } from "./identifiers.ts";
+import {
+  Identifier,
+  UnitIdentifier,
+  UnitInfo,
+} from "@macrostrat/data-components";
 import { LithologyIdentifier } from "@macrostrat/api-types/src/lithologies";
 
 export interface UnitDetailsPanelProps {
@@ -196,11 +200,7 @@ export enum UnitDetailsFeature {
 export type MacrostratItemClickHandler = (
   event: MouseEvent,
   item:
-    | Lithology
-    | Environment
-    | UnitLong
-    | Interval
-    | { strat_name_id: number },
+    Lithology | Environment | UnitLong | Interval | { strat_name_id: number },
 ) => void;
 
 function UnitDetailsContent({

package/src/unit-details/strat-names.ts

@@ -3,11 +3,11 @@ import {
   isClickable,
   ItemInteractionProps,
   useInteractionProps,
+  Identifier,
 } from "@macrostrat/data-components";
 import h from "./panel.module.sass";
 import classNames from "classnames";
 import { useStratNames } from "@macrostrat/data-provider";
-import { Identifier } from "./identifiers.ts";
 
 function useStratNameData(strat_name_id: number) {
   const stratNames = useStratNames([strat_name_id]);

package/src/units/boxes.ts

@@ -100,7 +100,7 @@ export function MinimalUnit(props) {
 
   const backgroundColor = getMixedUnitColor(d, lithMap, null, false);
 
-  const [ref, selected, onClick] = useUnitSelectionTarget(d);
+  const [ref, selected, onClick, linked] = useUnitSelectionTarget(d);
 
   return h(
     "g.unit",
@@ -120,6 +120,7 @@ export function MinimalUnit(props) {
         stroke: backgroundColor,
         onClick,
       }),
+      h.if(linked)("rect.linked-overlay", bounds),
       h.if(selected)("rect.selection-overlay", bounds),
     ],
   );
@@ -158,7 +159,7 @@ function Unit(props: UnitProps) {
 
   const _className = classNames(className, { colored: hasBackgroundColor });
 
-  const [ref, selected, onClick] = useUnitSelectionTarget(d);
+  const [ref, selected, onClick, linked] = useUnitSelectionTarget(d);
 
   return h(
     "g.unit",
@@ -183,6 +184,7 @@ function Unit(props: UnitProps) {
         onClick,
         className: "unit",
       }),
+      h.if(linked)(UnitRect, { ...bounds, className: "linked-overlay" }),
       h.if(selected)(UnitRect, { ...bounds, className: "selection-overlay" }),
       //defs,
       children,

package/dist/correlation-chart/stories/utils.d.ts

@@ -1,6 +0,0 @@
-export declare function useCorrelationLine(): {
-    focusedLine: import('geojson').LineString | null;
-    setFocusedLine: (line: any) => void;
-    selectedUnit: any;
-    setSelectedUnit: (selectedUnit: any) => void;
-};

package/dist/unit-details/identifiers.cjs

@@ -1,56 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const dataComponents = require("@macrostrat/data-components");
-const panel_module = require("./panel.module.sass.cjs");
-const classNames = require("classnames");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const classNames__default = /* @__PURE__ */ _interopDefault(classNames);
-function ClickableText({
-  className,
-  ...rest
-}) {
-  const clickable = dataComponents.isClickable(rest);
-  const tag = clickable ? "a" : "span";
-  return panel_module.default(tag, { className: classNames__default.default(className, { clickable }), ...rest });
-}
-function Identifier({
-  id,
-  className,
-  ...rest
-}) {
-  return panel_module.default(
-    ClickableText,
-    {
-      className: classNames__default.default("identifier", className),
-      ...rest
-    },
-    id
-  );
-}
-function UnitIdentifier({
-  unitID,
-  colID,
-  name,
-  ...interactionProps
-}) {
-  if (name != null) {
-    return panel_module.default(
-      ClickableText,
-      {
-        className: "unit-name",
-        ...interactionProps
-      },
-      name
-    );
-  }
-  return panel_module.default(Identifier, {
-    className: "unit-id",
-    key: unitID,
-    id: unitID,
-    ...interactionProps
-  });
-}
-exports.ClickableText = ClickableText;
-exports.Identifier = Identifier;
-exports.UnitIdentifier = UnitIdentifier;
-//# sourceMappingURL=identifiers.cjs.map

package/dist/unit-details/identifiers.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"identifiers.cjs","sources":["../../src/unit-details/identifiers.ts"],"sourcesContent":["import { isClickable, ItemInteractionProps } from \"@macrostrat/data-components\";\nimport h from \"./panel.module.sass\";\nimport { ReactNode } from \"react\";\nimport classNames from \"classnames\";\n\nexport function ClickableText({\n  className,\n  ...rest\n}: {\n  className?: string;\n  children: ReactNode;\n} & ItemInteractionProps) {\n  /** An optionally clickable text element */\n  const clickable = isClickable(rest);\n  const tag = clickable ? \"a\" : \"span\";\n  return h(tag, { className: classNames(className, { clickable }), ...rest });\n}\n\nexport function Identifier({\n  id,\n  className,\n  ...rest\n}: {\n  id: number | string;\n  className?: string;\n} & ItemInteractionProps) {\n  /** An item that displays a numeric identifier, optionally clickable */\n  return h(\n    ClickableText,\n    {\n      className: classNames(\"identifier\", className),\n      ...rest,\n    },\n    id,\n  );\n}\n\nexport type UnitInfo = {\n  unitID: number;\n  colID?: number;\n  name?: string;\n};\n\nexport function UnitIdentifier({\n  unitID,\n  colID,\n  name,\n  ...interactionProps\n}: UnitInfo & ItemInteractionProps) {\n  if (name != null) {\n    return h(\n      ClickableText,\n      {\n        className: \"unit-name\",\n        ...interactionProps,\n      },\n      name,\n    );\n  }\n\n  return h(Identifier, {\n    className: \"unit-id\",\n    key: unitID,\n    id: unitID,\n    ...interactionProps,\n  });\n}\n"],"names":["isClickable","h","classNames"],"mappings":";;;;;;;AAKO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,GAAG;AACL,GAG0B;AAExB,QAAM,YAAYA,eAAAA,YAAY,IAAI;AAClC,QAAM,MAAM,YAAY,MAAM;AAC9B,SAAOC,qBAAE,KAAK,EAAE,WAAWC,oBAAAA,QAAW,WAAW,EAAE,UAAA,CAAW,GAAG,GAAG,MAAM;AAC5E;AAEO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAG0B;AAExB,SAAOD,aAAAA;AAAAA,IACL;AAAA,IACA;AAAA,MACE,WAAWC,oBAAAA,QAAW,cAAc,SAAS;AAAA,MAC7C,GAAG;AAAA,IAAA;AAAA,IAEL;AAAA,EAAA;AAEJ;AAQO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoC;AAClC,MAAI,QAAQ,MAAM;AAChB,WAAOD,aAAAA;AAAAA,MACL;AAAA,MACA;AAAA,QACE,WAAW;AAAA,QACX,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,IAAA;AAAA,EAEJ;AAEA,SAAOA,aAAAA,QAAE,YAAY;AAAA,IACnB,WAAW;AAAA,IACX,KAAK;AAAA,IACL,IAAI;AAAA,IACJ,GAAG;AAAA,EAAA,CACJ;AACH;;;;"}

package/dist/unit-details/identifiers.d.ts

@@ -1,31 +0,0 @@
-import { ItemInteractionProps } from '@macrostrat/data-components';
-import { ReactNode } from 'react';
-export declare function ClickableText({ className, ...rest }: {
-    className?: string;
-    children: ReactNode;
-} & ItemInteractionProps): import('react').ReactElement<{
-    children: ReactNode;
-    href?: string | null;
-    target?: string;
-    onClick?: (event: MouseEvent) => void;
-    className: string;
-}, string | import('react').JSXElementConstructor<any>>;
-export declare function Identifier({ id, className, ...rest }: {
-    id: number | string;
-    className?: string;
-} & ItemInteractionProps): import('react').FunctionComponentElement<{
-    className?: string;
-    children: ReactNode;
-} & ItemInteractionProps>;
-export type UnitInfo = {
-    unitID: number;
-    colID?: number;
-    name?: string;
-};
-export declare function UnitIdentifier({ unitID, colID, name, ...interactionProps }: UnitInfo & ItemInteractionProps): import('react').FunctionComponentElement<{
-    className?: string;
-    children: ReactNode;
-} & ItemInteractionProps> | import('react').FunctionComponentElement<{
-    id: number | string;
-    className?: string;
-} & ItemInteractionProps>;

package/dist/unit-details/identifiers.js

@@ -1,54 +0,0 @@
-import { isClickable } from "@macrostrat/data-components";
-import h from "./panel.module.sass.js";
-import classNames from "classnames";
-function ClickableText({
-  className,
-  ...rest
-}) {
-  const clickable = isClickable(rest);
-  const tag = clickable ? "a" : "span";
-  return h(tag, { className: classNames(className, { clickable }), ...rest });
-}
-function Identifier({
-  id,
-  className,
-  ...rest
-}) {
-  return h(
-    ClickableText,
-    {
-      className: classNames("identifier", className),
-      ...rest
-    },
-    id
-  );
-}
-function UnitIdentifier({
-  unitID,
-  colID,
-  name,
-  ...interactionProps
-}) {
-  if (name != null) {
-    return h(
-      ClickableText,
-      {
-        className: "unit-name",
-        ...interactionProps
-      },
-      name
-    );
-  }
-  return h(Identifier, {
-    className: "unit-id",
-    key: unitID,
-    id: unitID,
-    ...interactionProps
-  });
-}
-export {
-  ClickableText,
-  Identifier,
-  UnitIdentifier
-};
-//# sourceMappingURL=identifiers.js.map

package/dist/unit-details/identifiers.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"identifiers.js","sources":["../../src/unit-details/identifiers.ts"],"sourcesContent":["import { isClickable, ItemInteractionProps } from \"@macrostrat/data-components\";\nimport h from \"./panel.module.sass\";\nimport { ReactNode } from \"react\";\nimport classNames from \"classnames\";\n\nexport function ClickableText({\n  className,\n  ...rest\n}: {\n  className?: string;\n  children: ReactNode;\n} & ItemInteractionProps) {\n  /** An optionally clickable text element */\n  const clickable = isClickable(rest);\n  const tag = clickable ? \"a\" : \"span\";\n  return h(tag, { className: classNames(className, { clickable }), ...rest });\n}\n\nexport function Identifier({\n  id,\n  className,\n  ...rest\n}: {\n  id: number | string;\n  className?: string;\n} & ItemInteractionProps) {\n  /** An item that displays a numeric identifier, optionally clickable */\n  return h(\n    ClickableText,\n    {\n      className: classNames(\"identifier\", className),\n      ...rest,\n    },\n    id,\n  );\n}\n\nexport type UnitInfo = {\n  unitID: number;\n  colID?: number;\n  name?: string;\n};\n\nexport function UnitIdentifier({\n  unitID,\n  colID,\n  name,\n  ...interactionProps\n}: UnitInfo & ItemInteractionProps) {\n  if (name != null) {\n    return h(\n      ClickableText,\n      {\n        className: \"unit-name\",\n        ...interactionProps,\n      },\n      name,\n    );\n  }\n\n  return h(Identifier, {\n    className: \"unit-id\",\n    key: unitID,\n    id: unitID,\n    ...interactionProps,\n  });\n}\n"],"names":[],"mappings":";;;AAKO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,GAAG;AACL,GAG0B;AAExB,QAAM,YAAY,YAAY,IAAI;AAClC,QAAM,MAAM,YAAY,MAAM;AAC9B,SAAO,EAAE,KAAK,EAAE,WAAW,WAAW,WAAW,EAAE,UAAA,CAAW,GAAG,GAAG,MAAM;AAC5E;AAEO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAG0B;AAExB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,MACE,WAAW,WAAW,cAAc,SAAS;AAAA,MAC7C,GAAG;AAAA,IAAA;AAAA,IAEL;AAAA,EAAA;AAEJ;AAQO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoC;AAClC,MAAI,QAAQ,MAAM;AAChB,WAAO;AAAA,MACL;AAAA,MACA;AAAA,QACE,WAAW;AAAA,QACX,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,IAAA;AAAA,EAEJ;AAEA,SAAO,EAAE,YAAY;AAAA,IACnB,WAAW;AAAA,IACX,KAAK;AAAA,IACL,IAAI;AAAA,IACJ,GAAG;AAAA,EAAA,CACJ;AACH;"}