@macrostrat/column-views 2.0.1 → 2.1.1

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

package/src/prepare-units/helpers.ts

@@ -7,7 +7,9 @@ import {
   createUnitSorter,
   ensureArray,
   ensureRealFloat,
+  PossiblyClippedUnit,
 } from "./utils";
+import { compareAgeRanges } from "@macrostrat/stratigraphy-utils";
 
 const dt = 0.001;
 
@@ -38,14 +40,14 @@ export interface ExtUnit extends UnitLong {
 
 export function preprocessUnits<T extends UnitLong = UnitLong>(
   section: SectionInfo<T>,
-  axisType: ColumnAxisType = ColumnAxisType.AGE
+  axisType: ColumnAxisType = ColumnAxisType.AGE,
 ): ExtUnit[] {
   /** Preprocess units to add overlapping units and columns. */
   const units = section.units;
   let divisions = units.map((...args) => extendDivision(...args, axisType));
   for (let d of divisions) {
     const overlappingUnits = divisions.filter((u) =>
-      d.overlappingUnits.includes(u.unit_id)
+      d.overlappingUnits.includes(u.unit_id),
     );
 
     // Overlapping columns
@@ -72,10 +74,12 @@ export function preprocessUnits<T extends UnitLong = UnitLong>(
     }
   }
 
-  if (axisType != ColumnAxisType.AGE) {
-    return preprocessSectionUnits(divisions, axisType);
-  }
-
+  // TODO: we may want to re-enable this simpler processing for sections,
+  // but we want it to be less universally applied.
+  // if (axisType != ColumnAxisType.AGE) {
+  //   return preprocessSectionUnits(divisions, axisType);
+  // }
+  //
   return divisions;
 }
 
@@ -83,10 +87,10 @@ function extendDivision(
   unit: UnitLong,
   i: number,
   divisions: UnitLong[],
-  axisType: ColumnAxisType = ColumnAxisType.AGE
+  axisType: ColumnAxisType = ColumnAxisType.AGE,
 ): ExtUnit {
   const overlappingUnits = divisions.filter(
-    (d) => d.unit_id != unit.unit_id && unitsOverlap(unit, d, axisType)
+    (d) => d.unit_id != unit.unit_id && unitsOverlap(unit, d, axisType),
   );
   const u_pos = getUnitHeightRange(unit, axisType);
   const bottomOverlap = overlappingUnits.some((d) => {
@@ -109,8 +113,15 @@ function extendDivision(
 
 export function groupUnitsIntoSections<T extends UnitLong>(
   units: T[],
-  axisType: ColumnAxisType = ColumnAxisType.AGE
+  axisType: ColumnAxisType = ColumnAxisType.AGE,
 ): SectionInfo<T>[] {
+  if (axisType != ColumnAxisType.AGE) {
+    return groupUnitsIntoSectionByOverlap(units, axisType);
+  }
+
+  /** Group units into sections by section_id.
+   * This works for large-scale Macrostrat columns, where units are grouped by section_id.
+   * */
   let groups = Array.from(group(units, (d) => d.section_id));
   const unitComparator = createUnitSorter(axisType);
 
@@ -124,12 +135,66 @@ export function groupUnitsIntoSections<T extends UnitLong>(
   // Sections have no relative ordinal position other than age...
   const compareSections = createUnitSorter(ColumnAxisType.AGE) as (
     a: StratigraphicPackage,
-    b: StratigraphicPackage
+    b: StratigraphicPackage,
   ) => number;
   groups1.sort(compareSections);
   return groups1;
 }
 
+interface WorkingSection {
+  units: UnitLong[];
+  // Position or age
+  heightRange?: [number, number];
+}
+
+function groupUnitsIntoSectionByOverlap<T extends UnitLong>(
+  units: T[],
+  axisType: ColumnAxisType = ColumnAxisType.AGE,
+): SectionInfo<T>[] {
+  /** Group units into sections by overlap.
+   * This creates "synthetic" sections that correspond to packages bound by scale gaps.
+   * This is most useful in the height and depth domains, where gaps (e.g., missing core) are
+   * common.
+   * */
+  // Start with each unit as its own "section", and progressively merge...
+  const sectionList: WorkingSection[] = [];
+  for (const unit of units) {
+    // Check if the unit overlaps with any existing section
+    const heightRange = getUnitHeightRange(unit, axisType);
+    let section: WorkingSection | undefined = sectionList.find((s) =>
+      compareAgeRanges(heightRange, s.heightRange),
+    );
+    if (section == null) {
+      // No overlap, create a new section
+      sectionList.push({
+        heightRange,
+        units: [unit],
+      });
+    } else {
+      // Overlap, merge the unit into the section
+      section.units.push(unit);
+      // Update the height range
+      section.heightRange = [
+        Math.max(section.heightRange[0], heightRange[0]),
+        Math.min(section.heightRange[1], heightRange[1]),
+      ];
+    }
+  }
+  // We should have a section for each unit, now we can convert to SectionInfo
+  // Ages have to be really actually ages, not heights
+
+  return sectionList.map((section, i) => {
+    const [b_age, t_age] = getSectionAgeRange(section.units);
+    return {
+      // Negative section IDs are used to indicate that these are synthetic sections
+      section_id: -i,
+      t_age: t_age,
+      b_age: b_age,
+      units: section.units as T[],
+    };
+  });
+}
+
 export function getSectionAgeRange(units: BaseUnit[]): [number, number] {
   /** Get the overall age range of a set of units. */
   const t_ages = units.map((d) => d.t_age);
@@ -140,7 +205,7 @@ export function getSectionAgeRange(units: BaseUnit[]): [number, number] {
 }
 
 export function mergeOverlappingSections<T extends UnitLong>(
-  sections: SectionInfo<T>[]
+  sections: SectionInfo<T>[],
 ): SectionInfo<T>[] {
   /** Columns can have sections that overlap in time. Here, we merge overlapping
    * sections into a single section to correctly render gap-bound packages.
@@ -172,7 +237,7 @@ export function mergeOverlappingSections<T extends UnitLong>(
 
 function preprocessSectionUnits(
   units: UnitLong[],
-  axisType: ColumnAxisType = ColumnAxisType.DEPTH
+  axisType: ColumnAxisType = ColumnAxisType.DEPTH,
 ): ExtUnit[] {
   /** Preprocess units for a "section" column type, which is guaranteed to be simpler. */
   // We have to assume the units are ordered...
@@ -189,7 +254,7 @@ function preprocessSectionUnit(
   i: number,
   units: UnitLong[],
   accumulatedThickness: number = 0,
-  axisType: ColumnAxisType = ColumnAxisType.DEPTH
+  axisType: ColumnAxisType = ColumnAxisType.DEPTH,
 ): ExtUnit {
   /** Preprocess a single unit for a "section" column type.
    * No provision for overlapping units.