@macrostrat/column-views 3.6.1 → 3.9.0

package/src/units/boxes.ts

@@ -2,15 +2,15 @@ import {
   ColumnAxisType,
   ColumnContext,
   ColumnLayoutContext,
+  ClippableRect,
   ForeignObject,
   PatternDefsProvider,
   useColumn,
   useGeologicPattern,
-  zigZagBoxPath,
 } from "@macrostrat/column-components";
 import { SizeAwareLabel, Clickable } from "@macrostrat/ui-components";
 import hyper from "@macrostrat/hyper";
-import { forwardRef, ReactNode, useContext, useMemo } from "react";
+import { ReactNode, useContext, useMemo } from "react";
 import { resolveID, scalePattern } from "./resolvers";
 import { useUnitSelectionTarget } from "../data-provider";
 import { useLithologies } from "@macrostrat/data-provider";
@@ -23,6 +23,12 @@ import type { RectBounds } from "./types";
 
 const h = hyper.styled(styles);
 
+/** Resolve a class name through this file's CSS module exactly as the styled
+ * `h` would (module-scoped classes are hashed; unknown/global classes pass
+ * through). Needed because `ClippableRect` renders the element in
+ * `@macrostrat/column-components`, so class resolution must happen here. */
+const cls = (name: string): string => (styles as any)[name] ?? name;
+
 interface UnitRectOptions {
   widthFraction?: number;
   axisType?: ColumnAxisType;
@@ -100,7 +106,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 +126,7 @@ export function MinimalUnit(props) {
         stroke: backgroundColor,
         onClick,
       }),
+      h.if(linked)("rect.linked-overlay", bounds),
       h.if(selected)("rect.selection-overlay", bounds),
     ],
   );
@@ -158,7 +165,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",
@@ -169,69 +176,34 @@ function Unit(props: UnitProps) {
       },
     },
     [
-      h(UnitRect, {
+      h(ClippableRect, {
         ...bounds,
         fill: backgroundColor,
         onClick,
-        className: "background",
+        className: cls("background"),
       }),
-      h(UnitRect, {
+      h(ClippableRect, {
         ref,
         ...bounds,
         fill: _fill,
         //mask,
         onClick,
-        className: "unit",
+        className: cls("unit"),
+      }),
+      h.if(linked)(ClippableRect, {
+        ...bounds,
+        className: cls("linked-overlay"),
+      }),
+      h.if(selected)(ClippableRect, {
+        ...bounds,
+        className: cls("selection-overlay"),
       }),
-      h.if(selected)(UnitRect, { ...bounds, className: "selection-overlay" }),
       //defs,
       children,
     ],
   );
 }
 
-interface UnitRectProps {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  className: string;
-  // Used to determine if the rect should have a zig-zag edge on the top or bottom
-  overflowTop?: boolean;
-  overflowBottom?: boolean;
-  [key: string]: any;
-}
-
-const UnitRect = forwardRef((props: UnitRectProps, ref) => {
-  const {
-    x,
-    y,
-    width,
-    height,
-    overflowTop = false,
-    overflowBottom = false,
-    ...rest
-  } = props;
-
-  if (!overflowTop && !overflowBottom) {
-    return h("rect", {
-      x,
-      y,
-      width,
-      height,
-      ref,
-      ...rest,
-    });
-  } else {
-    const d = zigZagBoxPath(x, y, width, height, overflowTop, overflowBottom);
-    return h("path", {
-      d,
-      ref,
-      ...rest,
-    });
-  }
-});
-
 function LabeledUnit(props: LabeledUnitProps) {
   const {
     division,
@@ -245,12 +217,17 @@ function LabeledUnit(props: LabeledUnitProps) {
     ...baseBounds
   } = props;
 
-  const { axisType } = useColumn();
+  const { axisType, isTransitioning, hideLabelsWhileTransitioning } =
+    useColumn();
   const bounds = {
     ...useUnitRect(division, { widthFraction, axisType }),
     ...baseBounds,
   };
   const { width, height } = bounds;
+  // Labels stay visible through the animation by default. `hideLabelsWhileTransitioning`
+  // is a perf escape hatch: when set, the `foreignObject` label (whose HTML
+  // reflows on every size change) is skipped mid-transition and restored on settle.
+  const skipLabel = isTransitioning && hideLabelsWhileTransitioning;
   return h(
     Unit,
     {
@@ -261,7 +238,7 @@ function LabeledUnit(props: LabeledUnitProps) {
       ...bounds,
     },
     [
-      h.if(showLabel)(
+      h.if(showLabel && !skipLabel)(
         ForeignObject,
         { ...bounds, className: "unit-label-container" },
         h(SizeAwareLabel, {
@@ -269,6 +246,9 @@ function LabeledUnit(props: LabeledUnitProps) {
           labelClassName: "unit-label",
           style: { width, height },
           label,
+          // Re-fit the label when a transition settles (isTransitioning flips),
+          // not on every intermediate frame.
+          remeasureKey: isTransitioning,
           onVisibilityChanged(viz) {
             onLabelUpdated(label, viz);
           },

package/src/units/composite.ts

@@ -42,23 +42,32 @@ export function LabelTrackerProvider(props) {
     BaseUnit[] | null
   >(null);
   const labelTrackerRef = useRef<LabelTracker>({});
+
+  const recompute = useCallback(() => {
+    // Recompute over the *current* unit set (which changes as the column zooms).
+    // The tracker ref accumulates entries for units seen at any zoom level, so
+    // we gate on whether every currently-visible unit has reported — not on the
+    // total number of tracked units, which would go stale and freeze the notes.
+    const tracker = labelTrackerRef.current;
+    const allReported = units.every((d) => findUnitID(d) in tracker);
+    if (!allReported) return;
+    setUnlabeledDivisions(units.filter((d) => tracker[findUnitID(d)] === false));
+  }, [units, findUnitID]);
+
   const trackLabelVisibility = useCallback(
     (div, visible) => {
-      const id = findUnitID(div);
-      labelTrackerRef.current[id] = visible;
-      if (Object.keys(labelTrackerRef.current).length == units.length) {
-        setUnlabeledDivisions(
-          // @ts-ignore
-          units.filter((d) => {
-            const id = findUnitID(d);
-            return labelTrackerRef.current[id] == false;
-          }),
-        );
-      }
+      labelTrackerRef.current[findUnitID(div)] = visible;
+      recompute();
     },
-    [labelTrackerRef, units, findUnitID],
+    [recompute, findUnitID],
   );
 
+  // Re-sync when the visible unit set changes (e.g. on zoom), so a unit whose
+  // label now fits inline stops also rendering as a note, and vice versa.
+  useEffect(() => {
+    recompute();
+  }, [recompute]);
+
   const value = trackLabelVisibility;
   return h(
     LabelTrackerContext.Provider,

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;"}

package/src/correlation-chart/stories/correlation-chart.stories.ts

@@ -1,228 +0,0 @@
-import { Meta } from "@storybook/react-vite";
-import "@macrostrat/style-system";
-import { useCorrelationLine } from "./utils";
-import {
-  ColumnCorrelationMap,
-  ColumnCorrelationProvider,
-  MergeSectionsMode,
-  useCorrelationMapStore,
-} from "../..";
-import { hyperStyled } from "@macrostrat/hyper";
-import {
-  MacrostratDataProvider,
-  fetchUnits,
-  useMacrostratFetch,
-} from "@macrostrat/data-provider";
-
-import styles from "./stories.module.sass";
-import { CorrelationChart, CorrelationChartProps } from "../main";
-import { ErrorBoundary, useAsyncMemo } from "@macrostrat/ui-components";
-import { OverlaysProvider } from "@blueprintjs/core";
-import { EnvironmentColoredUnitComponent } from "../../units";
-import { scaleLinear, scalePow } from "d3-scale";
-import { MacrostratInteractionProvider } from "@macrostrat/data-components";
-
-const mapboxToken = import.meta.env.VITE_MAPBOX_API_TOKEN;
-
-const h = hyperStyled(styles);
-
-function CorrelationStoryUI({
-  focusedLine,
-  setFocusedLine,
-  columnID,
-  setColumn,
-  selectedUnit,
-  setSelectedUnit,
-  inProcess,
-  projectID,
-  ...rest
-}: any) {
-  const domain = "https://dev.macrostrat.org";
-  return h(
-    MacrostratDataProvider,
-    { baseURL: domain + "/api/v2" },
-    h(
-      MacrostratInteractionProvider,
-      { linkDomain: domain },
-      h(
-        ColumnCorrelationProvider,
-        {
-          focusedLine,
-          columns: null,
-          projectID,
-          onSelectColumns(cols, line) {
-            setFocusedLine(line);
-          },
-        },
-        h("div.correlation-ui", [
-          h("div.correlation-container", h(CorrelationDiagramWrapper, rest)),
-          h("div.right-column", [
-            h(ColumnCorrelationMap, {
-              accessToken: mapboxToken,
-              className: "correlation-map",
-              //showLogo: false,
-            }),
-          ]),
-        ]),
-      ),
-    ),
-  );
-}
-
-function CorrelationDiagramWrapper(props: Omit<CorrelationChartProps, "data">) {
-  /** This state management is a bit too complicated, but it does kinda sorta work */
-
-  const fetch = useMacrostratFetch();
-
-  // Sync focused columns with map
-  const focusedColumns = useCorrelationMapStore(
-    (state) => state.focusedColumns,
-  );
-
-  const columnUnits = useAsyncMemo(async () => {
-    const col_ids = focusedColumns.map((col) => col.properties.col_id);
-    return await fetchUnits(col_ids, fetch);
-  }, [focusedColumns]);
-
-  return h("div.correlation-diagram", [
-    h(
-      ErrorBoundary,
-      h(OverlaysProvider, [
-        h(CorrelationChart, { data: columnUnits, ...props }),
-      ]),
-    ),
-  ]);
-}
-
-export default {
-  title: "Column views/Correlation chart",
-  component: CorrelationStoryUI,
-  parameters: {
-    layout: "fullscreen",
-    docs: {
-      description: {
-        component: "Correlation chart for Macrostrat columns",
-      },
-      story: {
-        inline: false,
-        iframeHeight: 500,
-      },
-    },
-  },
-  args: {
-    focusedLine: "-100,45 -90,50",
-    columnSpacing: 0,
-    columnWidth: 100,
-    collapseSmallUnconformities: true,
-    targetUnitHeight: 20,
-  },
-  argTypes: {
-    selectedUnit: {
-      control: {
-        type: "number",
-      },
-    },
-    t_age: {
-      control: {
-        type: "number",
-      },
-    },
-    b_age: {
-      control: {
-        type: "number",
-      },
-    },
-    columnSpacing: {
-      control: {
-        type: "number",
-      },
-    },
-    columnWidth: {
-      control: {
-        type: "number",
-      },
-    },
-    mergeSections: {
-      options: ["all", "overlapping", null],
-      control: { type: "radio" },
-    },
-    pixelScale: {
-      control: {
-        type: "number",
-      },
-    },
-    collapseSmallUnconformities: {
-      control: {
-        type: "boolean",
-      },
-    },
-    minSectionHeight: {
-      control: {
-        type: "number",
-      },
-    },
-    targetUnitHeight: {
-      control: {
-        type: "number",
-      },
-    },
-    showLabelColumn: {
-      control: {
-        type: "boolean",
-      },
-    },
-    maxInternalColumns: {
-      control: {
-        type: "number",
-      },
-    },
-    projectID: {
-      control: {
-        type: "number",
-      },
-    },
-  },
-} as Meta<typeof CorrelationStoryUI>;
-
-function Template(args) {
-  return h(CorrelationStoryUI, {
-    ...args,
-    ...useCorrelationLine(),
-  });
-}
-
-export const Primary = Template.bind({});
-
-export const ColoredByEnvironment = Template.bind({});
-ColoredByEnvironment.args = {
-  unitComponent: EnvironmentColoredUnitComponent,
-};
-
-export const RestrictedAgeRange = Template.bind({});
-RestrictedAgeRange.args = {
-  t_age: 100,
-  b_age: 300,
-  focusedLine: "-114.29,42.74 -104.59,39.21",
-};
-
-export const WithFixedScale = Template.bind({});
-WithFixedScale.args = {
-  scale: scaleLinear().domain([0, 2500]).range([0, 1000]),
-};
-
-export const WithPowerScale = Template.bind({});
-WithPowerScale.args = {
-  scale: scalePow().exponent(0.3).domain([0, 2500]).range([0, 1000]),
-};
-
-export const WithPowerScaleMerged = Template.bind({});
-WithPowerScaleMerged.args = {
-  scale: scalePow().exponent(0.3).domain([0, 2500]).range([0, 1000]),
-  mergeSections: MergeSectionsMode.ALL,
-};
-
-export const eODPCorrelationChart = Template.bind({});
-eODPCorrelationChart.args = {
-  focusedLine: "-125,38 -120,32",
-  projectID: 3,
-};