@macrostrat/column-views 2.0.0 → 2.1.0

package/src/maps/column-navigation/mapbox/index.ts

@@ -32,15 +32,17 @@ export interface ColumnNavigationMapProps extends InsetMapProps {
 }
 
 export function ColumnNavigationMap(
-  props: ColumnNavigationMapProps & NavigationProviderProps
+  props: ColumnNavigationMapProps & NavigationProviderProps,
 ) {
   const {
     columns,
+    columnIDs,
     onSelectColumn,
     onHoverColumn,
     selectedColumn,
     hoveredColumn,
     projectID,
+    children,
     inProcess,
     ...rest
   } = props;
@@ -49,6 +51,7 @@ export function ColumnNavigationMap(
     ColumnNavigationProvider,
     {
       columns,
+      columnIDs,
       onSelectColumn,
       onHoverColumn,
       selectedColumn,
@@ -56,7 +59,7 @@ export function ColumnNavigationMap(
       projectID,
       inProcess,
     },
-    h(_ColumnNavigationMap, rest)
+    h(_ColumnNavigationMap, props),
   );
 }
 
@@ -89,23 +92,23 @@ function _ColumnNavigationMap(props: ColumnNavigationMapProps) {
     },
     [
       h(ColumnsLayer),
-      h.if(keyboardNavigation)(ColumnKeyboardNavigation, { showTriangulation }),
       children,
-    ]
+      h.if(keyboardNavigation)(ColumnKeyboardNavigation, { showTriangulation }),
+    ],
   );
 }
 
 function ColumnsLayer({ enabled = true }) {
   const columns = useColumnNavigationStore((state) => state.columns);
   const selectedColumn = useColumnNavigationStore(
-    (state) => state.selectedColumn
+    (state) => state.selectedColumn,
   );
   const hoveredColumn = useColumnNavigationStore(
-    (state) => state.hoveredColumn
+    (state) => state.hoveredColumn,
   );
   const selectColumn = useColumnNavigationStore((state) => state.selectColumn);
   const setHoveredColumn = useColumnNavigationStore(
-    (state) => state.setHoveredColumn
+    (state) => state.setHoveredColumn,
   );
 
   useMapStyleOperator(
@@ -150,7 +153,7 @@ function ColumnsLayer({ enabled = true }) {
         map.off("click", layers, clickHandler);
       };
     },
-    [columns, enabled]
+    [columns, enabled],
   );
 
   const hoveredColumnRef = useRef(null);
@@ -162,17 +165,17 @@ function ColumnsLayer({ enabled = true }) {
         // Deselect previous column
         map.setFeatureState(
           { source: "columns", id: prevHoveredColumn },
-          { hover: false }
+          { hover: false },
         );
       }
       hoveredColumnRef.current = hoveredColumn;
       // Select the current column
       map.setFeatureState(
         { source: "columns", id: hoveredColumn },
-        { hover: true }
+        { hover: true },
       );
     },
-    [hoveredColumn, columns]
+    [hoveredColumn, columns],
   );
 
   /** Set feature state for selected columns */
@@ -187,7 +190,7 @@ function ColumnsLayer({ enabled = true }) {
         // Deselect previous column
         map.setFeatureState(
           { source: "columns", id: prevSelectedColumn },
-          { selected: false }
+          { selected: false },
         );
       }
 
@@ -196,12 +199,12 @@ function ColumnsLayer({ enabled = true }) {
       // Select the current column
       map.setFeatureState(
         { source: "columns", id: selectedColumn },
-        { selected: true }
+        { selected: true },
       );
 
       // Center the selected column
       const columnGeometry = columns.find(
-        (d) => d.id == selectedColumn
+        (d) => d.id == selectedColumn,
       )?.geometry;
       if (columnGeometry == null) return;
       const center = geoCentroid(columnGeometry);
@@ -212,7 +215,7 @@ function ColumnsLayer({ enabled = true }) {
         initialRenderRef.current = false;
       }
     },
-    [selectedColumn, columns]
+    [selectedColumn, columns],
   );
 
   return null;

package/src/maps/column-navigation/mapbox/keyboard-navigation.ts

@@ -35,7 +35,7 @@ export function ColumnKeyboardNavigation(props: KeyboardNavProps) {
     };
 
     const currentIndex = columns.findIndex(
-      (d) => d.properties.col_id == col_id
+      (d) => d.properties.col_id == col_id,
     );
 
     const neighbors = voronoi.tri.delaunay.neighbors[currentIndex];
@@ -43,7 +43,7 @@ export function ColumnKeyboardNavigation(props: KeyboardNavProps) {
       neighbors,
       voronoi.centroids,
       currentIndex,
-      projection
+      projection,
     );
   }, [col_id, columns, voronoi, map]);
 
@@ -58,7 +58,7 @@ export function ColumnKeyboardNavigation(props: KeyboardNavProps) {
       selectColumn(columns[nextColumnIx].id);
       return false;
     },
-    [keyMapping, selectColumn]
+    [keyMapping, selectColumn],
   );
 
   useEffect(() => {
@@ -80,7 +80,7 @@ export function ColumnKeyboardNavigation(props: KeyboardNavProps) {
         features,
       });
     },
-    [voronoi, showTriangulation]
+    [voronoi, showTriangulation],
   );
 
   //if (neighbors == null) return null;

package/src/maps/column-navigation/mapbox/state.ts

@@ -6,6 +6,7 @@ import {
   useContext,
   ReactNode,
   useEffect,
+  useMemo,
 } from "react";
 import h from "@macrostrat/hyper";
 import {
@@ -27,18 +28,20 @@ export interface NavigationProviderProps {
   selectedColumn?: number | null;
   hoveredColumn?: number | null;
   columns?: ColumnGeoJSONRecordWithID[] | null;
+  columnIDs?: number[] | null;
   children: ReactNode;
   onSelectColumn?: (col_id: number | null, column: any) => void;
   onHoverColumn?: (col_id: number | null, column: any) => void;
 }
 
 const NavigationStoreContext = createContext<StoreApi<NavigationStore> | null>(
-  null
+  null,
 );
 
 export function ColumnNavigationProvider({
   children,
   columns,
+  columnIDs,
   selectedColumn,
   projectID,
   inProcess,
@@ -76,17 +79,24 @@ export function ColumnNavigationProvider({
   //   store.setState({ columns: _columns, selectedColumn });
   // }, [projectID, inProcess, columns, getColumns]);
 
-  const _columns = columns ?? useMacrostratColumns(projectID, inProcess);
+  let _columns = columns ?? useMacrostratColumns(projectID, inProcess);
+
+  // filter columns if specified
+  if (columnIDs?.length > 0) {
+    _columns = useMemo(() => {
+      return _columns?.filter((d) => columnIDs.includes(d.properties.col_id));
+    }, [columnIDs, _columns]);
+  }
+
   useEffect(() => {
-    if (_columns != null) {
+    if (_columns?.length > 0) {
       store.setState({ columns: _columns, selectedColumn });
     }
   }, [_columns]);
-  // Update selected colun if it is changed externally
+  // Update selected column if it is changed externally
 
   // Kind of an awkward way to do this but we need to allow the selector to run
   useEffect(() => {
-    console.log("Selecting column", selectedColumn);
     const { selectColumn, selectedColumn: _internalSelectedColumn } =
       store.getState();
     if (selectedColumn == _internalSelectedColumn) {
@@ -99,7 +109,7 @@ export function ColumnNavigationProvider({
 }
 
 export function useColumnNavigationStore(
-  selector: (state: NavigationStore) => any
+  selector: (state: NavigationStore) => any,
 ) {
   const storeApi = useContext(NavigationStoreContext);
   if (storeApi == null) {

package/src/maps/column-navigation/svg/animated.ts

@@ -48,7 +48,7 @@ const MapViewFrame = (props) => {
               setExpanded(true);
             },
           },
-          [h(LandLayer), children]
+          [h(LandLayer), children],
         ),
         h.if(expanded)(Button, {
           className: "close-button",
@@ -60,7 +60,7 @@ const MapViewFrame = (props) => {
           intent: "danger",
         }),
       ]),
-    ]
+    ],
   );
 };
 

package/src/maps/column-navigation/svg/column-navigation-svg-map.stories.ts

@@ -1,6 +1,6 @@
 import h from "@macrostrat/hyper";
 
-import { Meta } from "@storybook/react";
+import { Meta } from "@storybook/react-vite";
 import { ColumnNavigationSVGMap, ColumnNavigationSVGMapProps } from ".";
 import { MacrostratDataProvider } from "../../../data-provider";
 import { useState } from "react";
@@ -12,7 +12,7 @@ interface ColumnIndexMapProps extends ColumnNavigationSVGMapProps {
 function BasicColumnNavigationSVGMap(props: ColumnIndexMapProps) {
   return h(
     MacrostratDataProvider,
-    h(ColumnNavigationSVGMap, { style: { width: 500, height: 500 }, ...props })
+    h(ColumnNavigationSVGMap, { style: { width: 500, height: 500 }, ...props }),
   );
 }
 

package/src/maps/column-navigation/svg/index.ts

@@ -41,7 +41,7 @@ export function ResizableMapFrame(props) {
         ...rest,
         scale,
       },
-      [h(LandLayer), children]
+      [h(LandLayer), children],
     ),
   ]);
 }
@@ -70,8 +70,6 @@ export function ColumnNavigationSVGMap(props) {
     _center = geoCentroid(currentColumn);
   }
 
-  console.log(currentColumn);
-
   return h(
     ResizableMapFrame,
     { center: _center, style, margin, scale, className },
@@ -91,7 +89,7 @@ export function ColumnNavigationSVGMap(props) {
         ...rest,
       }),
       h.if(currentColumn != null)(CurrentColumn, { feature: currentColumn }),
-    ]
+    ],
   );
 }
 

package/src/maps/column-navigation/svg/layers.ts

@@ -32,7 +32,7 @@ export function MeasurementsLayer(props) {
   return h(FeatureLayer, {
     useCanvas: false,
     style,
-    features: res.features.filter((d) => d.properties.unit_id != null),
+    features: res.features?.filter((d) => d.properties.unit_id != null) ?? [],
   });
 }
 
@@ -48,8 +48,6 @@ function ColumnFeatures(props) {
     singleFeature = true,
   } = props;
 
-  console.log(features);
-
   const c = chroma(color);
 
   return h(
@@ -62,13 +60,13 @@ function ColumnFeatures(props) {
         stroke: c.alpha(0.4).css(),
       },
     },
-    features.map((f) => {
+    features?.map((f) => {
       return h(Feature, {
         id: f.id ?? f.properties.col_id,
         onClick,
         feature: f,
       });
-    })
+    }),
   );
 }
 
@@ -100,7 +98,7 @@ function ColumnKeyboardNavigation(props: KeyboardNavProps) {
   const { projection } = useContext(MapContext);
   const { centroids, tri } = useMemo(
     () => buildTriangulation(features),
-    [features]
+    [features],
   );
 
   const currentIndex = useMemo(() => {
@@ -120,7 +118,7 @@ function ColumnKeyboardNavigation(props: KeyboardNavProps) {
       // @ts-ignore
       onChange(features[nextColumnIx]);
     },
-    [keyMapping]
+    [keyMapping],
   );
 
   if (neighbors == null) return null;

package/src/maps/column-navigation/utils/keyboard-navigation.ts

@@ -5,7 +5,7 @@ export function buildKeyMapping(
   neighbors,
   centroids,
   currentIndex,
-  projection
+  projection,
 ) {
   if (neighbors == null) return;
 

package/src/notes.ts

@@ -0,0 +1,49 @@
+import h from "@macrostrat/hyper";
+
+import { ColumnNotesProvider } from "./units";
+
+import { StaticNotesColumn, SVG } from "@macrostrat/column-components";
+import { useCompositeScale, useMacrostratColumnData } from "./data-provider";
+import type { ReactNode } from "react";
+
+interface ColumnNotesProps {
+  notes: any[];
+  width?: number;
+  noteComponent?: any;
+  paddingLeft?: number;
+  deltaConnectorAttachment?: number;
+  children?: ReactNode;
+}
+
+export function ColumnNotes({
+  notes,
+  width = 200,
+  noteComponent,
+  paddingLeft = 60,
+  deltaConnectorAttachment,
+  children,
+}: ColumnNotesProps) {
+  const { totalHeight } = useMacrostratColumnData();
+  const scale = useCompositeScale();
+
+  return h(
+    ColumnNotesProvider,
+    {
+      scale,
+      totalHeight,
+      pixelScale: -1,
+    },
+    [
+      h(SVG, { width, height: totalHeight, paddingH: 4 }, [
+        h(StaticNotesColumn, {
+          width,
+          notes,
+          noteComponent,
+          paddingLeft,
+          deltaConnectorAttachment,
+        }),
+      ]),
+      children,
+    ],
+  );
+}

package/src/prepare-units/composite-scale.ts

@@ -77,7 +77,7 @@ export interface CompositeColumnData<T extends UnitLong = ExtUnit>
 
 export function buildCompositeScaleInfo(
   inputScales: LinearScaleDef[],
-  unconformityHeight: number
+  unconformityHeight: number,
 ): CompositeScaleData {
   /** Finalize the heights of sections, including the heights of unconformities
    * between them.
@@ -112,7 +112,7 @@ export function buildCompositeScaleInfo(
 
 export function finalizeSectionHeights<T extends UnitLong>(
   sections: SectionInfoWithScale<T>[],
-  unconformityHeight: number
+  unconformityHeight: number,
 ): CompositeColumnData<T> {
   /** Finalize the heights of sections, including the heights of unconformities
    * between them.
@@ -121,7 +121,7 @@ export function finalizeSectionHeights<T extends UnitLong>(
   const sectionScales = sections.map((d) => d.scaleInfo);
   const { totalHeight, sections: packages } = buildCompositeScaleInfo(
     sectionScales,
-    unconformityHeight
+    unconformityHeight,
   );
 
   // This could perhaps be simplified.
@@ -148,7 +148,7 @@ interface SectionInfoWithScale<T extends UnitLong = ExtUnit>
 
 export function computeSectionHeights<T extends UnitLong>(
   sections: SectionInfo<T>[],
-  opts: ColumnScaleOptions
+  opts: ColumnScaleOptions,
 ): SectionInfoWithScale<T>[] {
   return sections.map((group) => {
     return addScaleToSection<T>(group, opts);
@@ -157,7 +157,7 @@ export function computeSectionHeights<T extends UnitLong>(
 
 function addScaleToSection<T extends UnitLong = ExtUnit>(
   group: SectionInfo<T>,
-  opts: ColumnScaleOptions
+  opts: ColumnScaleOptions,
 ): SectionInfoWithScale<T> {
   const { t_age, b_age, units } = group;
   let _range = null;
@@ -179,7 +179,7 @@ function addScaleToSection<T extends UnitLong = ExtUnit>(
 
 function buildSectionScale<T extends UnitLong>(
   data: T[],
-  opts: SectionScaleOptions
+  opts: SectionScaleOptions,
 ): PackageScaleInfo {
   const {
     targetUnitHeight = 20,
@@ -216,7 +216,7 @@ function buildSectionScale<T extends UnitLong>(
 
 export function createPackageScale(
   def: LinearScaleDef,
-  offset: number = 0
+  offset: number = 0,
 ): PackageScaleInfo {
   /** Build a section scale */
   // Domain should be oriented from bottom to top, but scale is oriented from top to bottom
@@ -234,7 +234,7 @@ export function createPackageScale(
 
 function findSectionHeightRange(
   data: UnitLong[],
-  axisType: ColumnAxisType
+  axisType: ColumnAxisType,
 ): [number, number] {
   if (axisType == null) {
     throw new Error("Axis type is not set");
@@ -259,7 +259,7 @@ function findSectionHeightRange(
 
 function findAverageUnitHeight(
   data: UnitLong[],
-  axisType: ColumnAxisType
+  axisType: ColumnAxisType,
 ): number {
   const unitHeights = data.map((d) => {
     const [b_pos, t_pos] = getUnitHeightRange(d, axisType);
@@ -268,15 +268,22 @@ function findAverageUnitHeight(
   return unitHeights.reduce((a, b) => a + b, 0) / unitHeights.length;
 }
 
+export interface CompositeColumnScale {
+  (age: number): number | null;
+  copy(): CompositeColumnScale;
+  domain(): [number, number];
+  invert(pixelHeight: number): number | null;
+}
+
 export function createCompositeScale(
   sections: PackageLayoutData[],
-  interpolateUnconformities: boolean = false
-): (age: number) => number | null {
+  interpolateUnconformities: boolean = false,
+): CompositeColumnScale {
   /** Create a scale that works across multiple packages */
   // Get surfaces at which scale breaks
   let scaleBreaks: [number, number][] = [];
   for (const section of sections) {
-    const { pixelHeight, pixelScale, offset, domain } = section.scaleInfo;
+    const { pixelHeight, offset, domain } = section.scaleInfo;
 
     scaleBreaks.push([domain[1], offset]);
     scaleBreaks.push([domain[0], offset + pixelHeight]);
@@ -284,32 +291,73 @@ export function createCompositeScale(
   // Sort the scale breaks by age
   scaleBreaks.sort((a, b) => a[0] - b[0]);
 
-  return (age) => {
-    /** Given an age, find the corresponding pixel position */
-    // Iterate through the sections to find the correct one
-
+  const scale = (age) => {
     // Accumulate scale breaks and pixel height
-    let pixelHeight = 0;
-    let pixelScale = 0;
+    let lastHeight = 0;
     let lastAge = null;
     for (const [age1, height] of scaleBreaks) {
       if (age <= age1) {
-        if (lastAge != null) {
-          pixelHeight += (age - lastAge) * pixelScale;
-          return pixelHeight;
+        let deltaAge = age1 - lastAge;
+        if (deltaAge === 0) {
+          // If the age is exactly at a scale break, return the height at that break
+          return height;
         }
-        lastAge = age;
-        pixelHeight = height;
+        let pixelScale = (height - lastHeight) / deltaAge;
+        return lastHeight + (age - lastAge) * pixelScale;
       }
+      lastAge = age1;
+      lastHeight = height;
     }
   };
+
+  scale.copy = () => {
+    return createCompositeScale(sections, interpolateUnconformities);
+  };
+
+  scale.domain = () => {
+    /** Return the domain of the scale */
+    const firstSection = sections[0].scaleInfo.domain;
+    const lastSection = sections[sections.length - 1].scaleInfo.domain;
+    if (firstSection[0] < lastSection[0]) {
+      return [Math.min(...firstSection), Math.max(...lastSection)];
+    } else {
+      // Catches "normal" axes like height
+      return [Math.max(...firstSection), Math.min(...lastSection)];
+    }
+  };
+
+  scale.invert = (pixelHeight) => {
+    /** Invert the scale to get the age at a given pixel height */
+    // Iterate through the sections to find the correct one
+    let lastAge = null;
+    for (const section of sections) {
+      const {
+        pixelHeight: sectionHeight,
+        pixelScale,
+        offset,
+        domain,
+      } = section.scaleInfo;
+      if (
+        pixelHeight >= offset &&
+        pixelHeight <= offset + sectionHeight &&
+        pixelScale > 0
+      ) {
+        const age = domain[1] + (pixelHeight - offset) / pixelScale;
+        return age;
+      }
+      lastAge = domain[1];
+    }
+    return null;
+  };
+
+  return scale as CompositeColumnScale;
 }
 
 /** Collapse sections separated by unconformities that are smaller than a given pixel height. */
 export function collapseUnconformitiesByPixelHeight<T extends UnitLong>(
   sections: SectionInfoWithScale<T>[],
   threshold: number,
-  opts: ColumnScaleOptions
+  opts: ColumnScaleOptions,
 ): SectionInfoWithScale<T>[] {
   const newSections = [];
   let currentSection: SectionInfoWithScale<T> | null = null;
@@ -323,7 +371,7 @@ export function collapseUnconformitiesByPixelHeight<T extends UnitLong>(
       dAge *
       Math.max(
         currentSection.scaleInfo.pixelScale,
-        nextSection.scaleInfo.pixelScale
+        nextSection.scaleInfo.pixelScale,
       );
     if (pxHeight < threshold) {
       // We need to merge the sections