@macrostrat/column-views 1.0.3 → 2.0.0

package/src/units/composite.ts

@@ -1,9 +1,9 @@
 import { hyperStyled } from "@macrostrat/hyper";
 import {
   LithologyColumn,
-  useColumn,
-  ColumnLayoutContext,
   ColumnAxisType,
+  SVG,
+  ColumnContext,
 } from "@macrostrat/column-components";
 import { defaultNameFunction, UnitNamesColumn } from "./names";
 import {
@@ -12,11 +12,12 @@ import {
   useState,
   useRef,
   useCallback,
-  memo,
+  useEffect,
 } from "react";
 import { BaseUnit } from "@macrostrat/api-types";
 import { LabeledUnit, UnitBoxes } from "./boxes";
 import styles from "./composite.module.sass";
+import { useMacrostratColumnData } from "../data-provider";
 
 const h = hyperStyled(styles);
 
@@ -27,24 +28,32 @@ interface LabelTracker {
 const LabelTrackerContext = createContext(null);
 const UnlabeledDivisionsContext = createContext(null);
 
-function LabelTrackerProvider(props) {
-  const { children } = props;
-  const { divisions } = useColumn();
+const findMacrostratUnitID = (u) => u.unit_id;
+
+export function LabelTrackerProvider(props) {
+  /** Tracker for units to handle state for whether their labels fit inline or not.
+   * Designed to work for single or composite columns.
+   */
+  const { children, units, findUnitID = findMacrostratUnitID } = props;
   const [unlabeledDivisions, setUnlabeledDivisions] = useState<
     BaseUnit[] | null
   >(null);
   const labelTrackerRef = useRef<LabelTracker>({});
   const trackLabelVisibility = useCallback(
     (div, visible) => {
-      labelTrackerRef.current[div.unit_id] = visible;
-      if (Object.keys(labelTrackerRef.current).length == divisions.length) {
+      const id = findUnitID(div);
+      labelTrackerRef.current[id] = visible;
+      if (Object.keys(labelTrackerRef.current).length == units.length) {
         setUnlabeledDivisions(
           // @ts-ignore
-          divisions.filter((d) => labelTrackerRef.current[d.unit_id] == false)
+          units.filter((d) => {
+            const id = findUnitID(d);
+            return labelTrackerRef.current[id] == false;
+          })
         );
       }
     },
-    [labelTrackerRef, divisions]
+    [labelTrackerRef, units, findUnitID]
   );
 
   const value = trackLabelVisibility;
@@ -62,60 +71,21 @@ function LabelTrackerProvider(props) {
 function TrackedLabeledUnit({
   division,
   nameForDivision = defaultNameFunction,
-  axisType,
   ...rest
 }) {
   const trackLabelVisibility = useContext(LabelTrackerContext);
   return h(LabeledUnit, {
     division,
-    //halfWidth: div.bottomOverlap,
     label: nameForDivision(division),
     onLabelUpdated(label, visible) {
-      trackLabelVisibility(division, visible);
+      // If there is al LabelTrackerContext, update the label visibility
+      trackLabelVisibility?.(division, visible);
     },
     ...rest,
   });
 }
 
-function UnlabeledUnitNames(props) {
-  // Returns only unlabeled divisions
-  const divisions = useContext(UnlabeledDivisionsContext);
-  if (divisions == null) return null;
-  return h(UnitNamesColumn, { divisions, ...props });
-}
-
-function _BaseUnitsColumn(
-  props: React.PropsWithChildren<{
-    width: number;
-    unitComponent?: React.FC<any>;
-    unitComponentProps?: any;
-    clipToFrame?: boolean;
-  }>
-) {
-  /*
-  A column with units and names either
-  overlapping or offset to the right
-  */
-  const {
-    width,
-    children,
-    unitComponent = TrackedLabeledUnit,
-    unitComponentProps,
-    clipToFrame,
-    ...rest
-  } = props;
-
-  return h(LabelTrackerProvider, [
-    h(LithologyColumn, { width, clipToFrame }, [
-      h(UnitBoxes, {
-        unitComponent,
-        unitComponentProps,
-        ...rest,
-      }),
-    ]),
-    children,
-  ]);
-}
+export const CompositeUnitComponent = TrackedLabeledUnit;
 
 type BaseUnitProps = {
   width: number;
@@ -135,132 +105,167 @@ type ICompositeUnitProps = BaseUnitProps & {
   noteMode?: "labeled" | "unlabeled";
   showLabelColumn?: boolean;
   noteComponent?: React.FC<any>;
-  shouldRenderNote?: (d: BaseUnit) => boolean;
+  shouldRenderNote?: (d: any) => boolean;
 };
 
-type AnnotatedUnitProps = ICompositeUnitProps & {
-  minimumLabelHeight?: number;
-  axisType: ColumnAxisType;
-};
+interface CompositeUnitProps {
+  unitComponent: React.FC<any>;
+  unitComponentProps?: any;
+  width: number;
+  showLabels?: boolean;
+  clipToFrame?: boolean;
+}
 
-function AnnotatedUnitsColumn(props: AnnotatedUnitProps) {
+export function CompositeUnitsColumn(props: CompositeUnitProps) {
   /*
   A column with units and names either
   overlapping or offset to the right
   */
   const {
-    columnWidth,
-    width = 100,
-    gutterWidth = 10,
-    labelOffset = 30,
-    showLabels = true,
-    nameForDivision,
-    minimumLabelHeight = 0,
-    axisType,
+    width,
+    unitComponent = TrackedLabeledUnit,
+    unitComponentProps,
+    clipToFrame,
     ...rest
   } = props;
 
-  return h(
-    _BaseUnitsColumn,
-    {
-      width: showLabels ? columnWidth : width,
-      unitComponentProps: { nameForDivision },
-    },
-    [
-      h.if(showLabels)(UnlabeledUnitNames, {
-        transform: `translate(${columnWidth + gutterWidth})`,
-        paddingLeft: labelOffset,
-        width: width - columnWidth - gutterWidth,
-        minimumHeight: minimumLabelHeight,
-        nameForDivision,
-        ...rest,
-      }),
-      // h(UnitDataColumn, {
-      //   transform: `translate(${columnWidth + gutterWidth})`,
-      //   paddingLeft: labelOffset,
-      //   width: width - columnWidth - gutterWidth,
-      //   ...rest
-      // })
-    ]
-  );
+  return h(LithologyColumn, { width, clipToFrame }, [
+    h(UnitBoxes, {
+      unitComponent,
+      unitComponentProps,
+      ...rest,
+    }),
+  ]);
 }
 
-function CompositeUnitsColumn(props: ICompositeUnitProps) {
-  /*
-  A column with units and names either
-  overlapping or offset to the right
-  */
+export function AnnotatedUnitsColumn(props: ICompositeUnitProps) {
+  useEffect(() => {
+    console.warn(
+      "AnnotatedUnitsColumn is deprecated and currently renders a no-op for transition purposes"
+    );
+  }, []);
+  return null;
+}
+
+export function SectionLabelsColumn(props: ICompositeUnitProps) {
+  // Section with "squishy" time scale
   const {
-    width = 100,
-    gutterWidth = 10,
-    labelOffset = 30,
+    width = 300,
     noteMode = "unlabeled",
-    showLabels = true,
-    showLabelColumn = true,
+    labelOffset = 30,
     noteComponent,
     shouldRenderNote,
-    ...rest
   } = props;
 
-  let { columnWidth = width } = props;
-
-  const labelColumnComponent =
-    noteMode == "unlabeled" ? UnlabeledUnitNames : UnitNamesColumn;
-
-  return h(_BaseUnitsColumn, { width: columnWidth, ...rest }, [
-    h.if(showLabelColumn)(ColumnLabel, {
-      showLabels,
-      component: labelColumnComponent,
-      columnWidth,
-      gutterWidth,
-      labelOffset,
-      width,
-      noteComponent,
-      showNote: shouldRenderNote,
-    }),
+  const { sections, totalHeight, axisType } = useMacrostratColumnData();
+
+  const unlabeledUnits = useContext(UnlabeledDivisionsContext);
+  const unitsToLabel = noteMode == "unlabeled" ? unlabeledUnits : undefined;
+
+  const _compositeScale = compositeScale(sections);
+
+  return h("div.section-labels-column", [
+    h(
+      ColumnNotesProvider,
+      {
+        units: [],
+        scale: _compositeScale,
+        totalHeight,
+        axisType,
+      },
+      h(
+        SVG,
+        {
+          height: totalHeight,
+          innerWidth: width - 4,
+          paddingH: 1,
+          paddingLeft: 3,
+        },
+        h(UnitNamesColumn, {
+          divisions: unitsToLabel,
+          paddingLeft: labelOffset,
+          width,
+          noteComponent,
+          shouldRenderNote,
+          scale: _compositeScale,
+        })
+      )
+    ),
   ]);
 }
 
-function _ColumnLabel(props) {
-  const {
-    showLabels,
-    component,
-    columnWidth,
-    gutterWidth,
-    labelOffset,
-    width,
-    noteComponent,
-    showNote,
-  } = props;
-  if (!showLabels) return null;
-  return h(component, {
-    transform: `translate(${columnWidth + gutterWidth})`,
-    paddingLeft: labelOffset,
-    width: width - columnWidth - gutterWidth,
-    noteComponent,
-    shouldRenderNote: showNote,
+type CompositeScaleOpts = {
+  clamped?: boolean;
+};
+
+export interface CompositeColumnScale {
+  (val: number): number;
+  copy(): CompositeColumnScale;
+  domain(): number[];
+}
+
+export function compositeScale(
+  sections,
+  opts: CompositeScaleOpts = {}
+): CompositeColumnScale {
+  /** A basic composite scale that works across all sections. This isn't a fully featured,
+   * contiuous D3 scale, but it shares enough attributes to be useful for
+   * laying out notes.
+   */
+  const { clamped = true } = opts;
+
+  const scales = sections.map((group) => {
+    const { scaleInfo } = group;
+    return scaleInfo.scale.copy().clamp(clamped);
   });
+
+  let baseScale: any = (val) => {
+    // Find the scale for the section that contains the value
+    const scale = scales.find((scale) => {
+      return scale.domain()[0] <= val && val <= scale.domain()[1];
+    });
+
+    if (scale) {
+      return scale(val);
+    } else {
+      // return nan
+      return NaN;
+    }
+  };
+
+  baseScale.copy = () => {
+    return baseScale;
+  };
+
+  baseScale.domain = () => {
+    // Return a domain that covers all sections
+    return [scales[0].domain()[0], scales[scales.length - 1].domain()[1]];
+  };
+
+  return baseScale as CompositeColumnScale;
 }
 
-const ColumnLabel = memo(_ColumnLabel);
+function ColumnNotesProvider(props) {
+  // A fake column axis provider that allows scales to cross
+  const { children, scale, totalHeight, pixelScale } = props;
 
-export function CompositeUnitComponent({ division, nColumns = 2, ...rest }) {
-  // This comes from CompositeUnits
-  const { width } = useContext(ColumnLayoutContext);
+  const { axisType } = useMacrostratColumnData();
 
-  //const nCols = Math.min(nColumns, division.overlappingUnits.length+1)
-  //console.log(division);
-  return h(TrackedLabeledUnit, {
-    division,
-    ...rest,
-    width: division.overlappingUnits.length > 0 ? width / nColumns : width,
-    x: (division.column * width) / nColumns,
-  });
+  return h(
+    ColumnContext.Provider,
+    {
+      value: {
+        divisions: [],
+        scale,
+        scaleClamped: scale,
+        pixelHeight: totalHeight,
+        pixelsPerMeter: pixelScale,
+        axisType,
+        zoom: 1,
+      },
+    },
+    children
+  );
 }
 
-export {
-  CompositeUnitsColumn,
-  AnnotatedUnitsColumn,
-  TrackedLabeledUnit,
-  ICompositeUnitProps,
-};
+export { TrackedLabeledUnit, ICompositeUnitProps };

package/src/units/index.ts

@@ -1,17 +1,33 @@
 import h from "@macrostrat/hyper";
-import { LithologyColumn } from "@macrostrat/column-components";
+import {
+  LithologyColumn,
+  useGeologicPattern,
+} from "@macrostrat/column-components";
 import { UnitNamesColumn } from "./names";
 import { ICompositeUnitProps } from "./composite";
 import { UnitBoxes } from "./boxes";
+import { useColumnLayout } from "@macrostrat/column-components";
+import { useInDarkMode } from "@macrostrat/ui-components";
+import { getMixedUnitColor } from "./colors";
+import { TrackedLabeledUnit } from "./composite";
+import { useLithologies } from "../data-provider";
+import { useMemo } from "react";
+import { resolveID } from "./resolvers";
+import { Lithology } from "@macrostrat/api-types";
 
-const UnitsColumn = ({ width = 100 }) => {
+export * from "./composite";
+export * from "./types";
+export * from "./selection";
+export * from "./colors";
+
+export function UnitsColumn({ width = 100 }) {
   /*
   A column showing units with USGS color fill
   */
   return h(LithologyColumn, { width }, h(UnitBoxes));
-};
+}
 
-const SimpleUnitsColumn = (props: ICompositeUnitProps) => {
+export function SimpleUnitsColumn(props: ICompositeUnitProps) {
   /*
   A column with units and names either
   overlapping or offset to the right
@@ -28,9 +44,60 @@ const SimpleUnitsColumn = (props: ICompositeUnitProps) => {
       width: width - columnWidth - gutterWidth,
     }),
   ]);
-};
+}
 
-export { UnitsColumn, SimpleUnitsColumn };
-export * from "./composite";
-export * from "./types";
-export * from "./selection";
+export function UnitComponent({ division, nColumns = 2, ...rest }) {
+  const width = rest.width ?? useColumnLayout()?.width;
+
+  const nOverlappingUnits = division.overlappingUnits?.length ?? 0;
+  const columnIx = (division.column ?? 0) % nColumns;
+
+  return h(TrackedLabeledUnit, {
+    division,
+    ...rest,
+    width: nOverlappingUnits > 0 ? width / nColumns : width,
+    x: (columnIx * width) / nColumns,
+  });
+}
+
+export function ColoredUnitComponent(props) {
+  /** A unit component that is colored using a mixture of lithologies.
+   * This is a separate component because it depends on more providers/contexts to determine coloring. */
+  const lithMap = useLithologies();
+  const inDarkMode = useInDarkMode();
+
+  const backgroundColor = useMemo(() => {
+    return getMixedUnitColor(props.division, lithMap, inDarkMode);
+  }, [props.division?.unit_id, lithMap, inDarkMode]);
+
+  const patternID = useMemo(() => {
+    return resolveID(props.division); // ?? getPatternID(props.division.lith, lithMap);
+  }, [props.division?.unit_id, lithMap]);
+
+  const fill = useGeologicPattern(patternID);
+
+  return h(UnitComponent, {
+    fill,
+    backgroundColor,
+    ...props,
+  });
+}
+
+function getPatternID(
+  liths: Array<Lithology>,
+  lithMap: Map<number, Lithology>
+): string | null {
+  if (lithMap == null || liths == null || liths.length == 0) {
+    return null;
+  }
+  const patternIDs = new Set<string>();
+  for (const lith of liths) {
+    const lithData = lithMap.get(lith.lith_id);
+    if (lithData) {
+      patternIDs.add(`${lithData.fill}`);
+    }
+  }
+  let id = patternIDs.values()[0];
+  if (id == "0") return null;
+  return id;
+}

package/src/units/names.ts

@@ -7,8 +7,10 @@ import {
   NotesColumnProps,
 } from "@macrostrat/column-components";
 import type { ColumnDivision } from "@macrostrat/column-components";
-import { IUnit, transformAxisType } from "./types";
+import { IUnit } from "./types";
 import React from "react";
+import { getUnitHeightRange } from "../prepare-units/utils";
+import { CompositeColumnScale } from "./composite";
 
 interface UnitDataProps extends NotesColumnProps {
   left?: number;
@@ -17,6 +19,7 @@ interface UnitDataProps extends NotesColumnProps {
   shouldRenderNote?(div: ColumnDivision | IUnit, index: number): boolean;
   divisions?: IUnit[];
   minimumHeight?: number;
+  scale?: CompositeColumnScale;
 }
 
 type UnitNote = {
@@ -32,10 +35,11 @@ function noteForDivision(
 ): UnitNote {
   const { axisType } = opts;
 
-  const key = transformAxisType(axisType);
+  const [height, top_height] = getUnitHeightRange(div, axisType);
+
   return {
-    height: div[`b_${key}`],
-    top_height: div[`t_${key}`],
+    height,
+    top_height,
     data: div,
     id: div.unit_id,
   };

package/src/units/resolvers.ts

@@ -7,6 +7,8 @@ const symbolIndex = {
   sand: 608,
   siltstone: 616,
   silt: 616,
+  siliciclastic: 615,
+  mud: 620,
   "dolomitic siltstone": 616,
   shale: 620,
   limestone: 627,
@@ -16,15 +18,23 @@ const symbolIndex = {
   "dolomite-mudstone": 642,
   dolostone: 642,
   mudstone: 620,
+  slate: 703,
   "sandy-dolomite": 645,
   quartzite: 702,
   halite: 668,
+  gypsum: 667,
+  evaporite: 667,
+  claystone: 620,
+  anhydrite: 667,
+  gabbro: 720,
   basalt: 717,
+  diabase: 717,
   rhyolite: 722,
   andesite: 723,
   till: 681,
   loess: 684,
   "calcareous ooze": 653,
+  "siliceous ooze": 653,
   chalk: 626,
   gravel: 601,
   plutonic: 721,
@@ -41,6 +51,7 @@ const symbolIndex = {
   granodiorite: 725,
   monzonite: 723,
   argillite: 624,
+  diamictite: 681,
 };
 
 const resolveID = (d: any) => {