@macrostrat/column-views 2.0.1 → 2.1.0

package/src/units/boxes.ts

@@ -41,6 +41,7 @@ interface UnitProps extends Clickable, Partial<RectBounds>, UnitRectOptions {
   fill?: string;
   backgroundColor?: string;
   patternColor?: string;
+  patternID?: string | number;
 }
 
 export interface LabeledUnitProps
@@ -48,6 +49,7 @@ export interface LabeledUnitProps
     Clickable,
     Partial<RectBounds> {
   division: IUnit;
+  patternID?: string | number;
   label: string;
   onLabelUpdated?(label: string, shown: boolean);
   halfWidth?: boolean;
@@ -57,7 +59,7 @@ export interface LabeledUnitProps
 
 function useUnitRect(
   division: IUnit,
-  options: UnitRectOptions = {}
+  options: UnitRectOptions = {},
 ): RectBounds {
   const {
     widthFraction = 1,
@@ -121,7 +123,7 @@ export function MinimalUnit(props) {
         onClick,
       }),
       h.if(selected)("rect.selection-overlay", bounds),
-    ]
+    ],
   );
 }
 
@@ -135,6 +137,7 @@ function Unit(props: UnitProps) {
     widthFraction = 1,
     backgroundColor,
     patternColor,
+    patternID,
     axisType: _, // not sure why this is brought in...
     ...baseBounds
   } = props;
@@ -150,8 +153,8 @@ function Unit(props: UnitProps) {
     overflowTop: hasOverflowTop,
     overflowBottom: hasOverflowBottom,
   };
-  const patternID = resolveID(d);
-  let _fill = fill ?? useGeologicPattern(patternID, defaultFill);
+  const _patternID = patternID ?? resolveID(d);
+  let _fill = fill ?? useGeologicPattern(_patternID, defaultFill);
 
   const hasBackgroundColor = backgroundColor != null;
 
@@ -187,7 +190,7 @@ function Unit(props: UnitProps) {
       h.if(selected)(UnitRect, { ...bounds, className: "selection-overlay" }),
       //defs,
       children,
-    ]
+    ],
   );
 }
 
@@ -304,6 +307,7 @@ function LabeledUnit(props: LabeledUnitProps) {
     widthFraction,
     showLabel = true,
     backgroundColor,
+    patternID,
     axisType: _, // not sure why this is brought in...
     ...baseBounds
   } = props;
@@ -316,7 +320,13 @@ function LabeledUnit(props: LabeledUnitProps) {
   const { width, height } = bounds;
   return h(
     Unit,
-    { className: "labeled-unit", division, backgroundColor, ...bounds },
+    {
+      className: "labeled-unit",
+      division,
+      backgroundColor,
+      patternID,
+      ...bounds,
+    },
     [
       h.if(showLabel)(
         ForeignObject,
@@ -329,9 +339,9 @@ function LabeledUnit(props: LabeledUnitProps) {
           onVisibilityChanged(viz) {
             onLabelUpdated(label, viz);
           },
-        })
+        }),
       ),
-    ]
+    ],
   );
 }
 
@@ -342,7 +352,7 @@ function UnitBoxes<T>(props: {
   transformDivision?: (
     division: any,
     index: number,
-    divisions: any[]
+    divisions: any[],
   ) => T | null;
 }) {
   const { unitComponent = Unit, unitComponentProps = {} } = props;
@@ -367,7 +377,7 @@ function UnitBoxes<T>(props: {
   return h(
     PatternDefsProvider,
     { resolveID, scalePattern },
-    h("g.divisions", children)
+    h("g.divisions", children),
   );
 }
 

package/src/units/colors.ts

@@ -1,13 +1,20 @@
 import chroma from "chroma-js";
 import { UnitLong } from "@macrostrat/api-types";
 
+interface KeyOptions {
+  key?: string;
+  id_key?: string;
+}
+
 export function getMixedUnitColor(
   unit: UnitLong,
   lithMap,
   inDarkMode = false,
-  asBackground = true
+  asBackground = true,
+  keyOpts: KeyOptions = null,
 ): string | null {
-  const liths = unit.lith;
+  const { key = "lith", id_key = "lith_id" } = keyOpts ?? {};
+  const liths = unit[key];
   if (liths == null) {
     return "gray";
   }
@@ -18,9 +25,9 @@ export function getMixedUnitColor(
         prop = null;
       }
       return {
-        lith_id: d.lith_id,
+        lith_id: d[id_key],
         prop,
-        color: lithMap?.get(d.lith_id)?.color,
+        color: lithMap?.get(d[id_key])?.color,
       };
     })
     .filter((d) => d.color != null);
@@ -49,7 +56,7 @@ export function getMixedUnitColor(
   const baseColor = chroma.average(
     lithsWithProp.map((d) => d.color),
     "lrgb",
-    lithsWithProp.map((d) => d.prop)
+    lithsWithProp.map((d) => d.prop),
   );
 
   if (!asBackground) {

package/src/units/composite.ts

@@ -1,7 +1,6 @@
 import { hyperStyled } from "@macrostrat/hyper";
 import {
   LithologyColumn,
-  ColumnAxisType,
   SVG,
   ColumnContext,
 } from "@macrostrat/column-components";
@@ -18,6 +17,7 @@ import { BaseUnit } from "@macrostrat/api-types";
 import { LabeledUnit, UnitBoxes } from "./boxes";
 import styles from "./composite.module.sass";
 import { useMacrostratColumnData } from "../data-provider";
+import { useUnitSelectionDispatch } from "../units";
 
 const h = hyperStyled(styles);
 
@@ -49,11 +49,11 @@ export function LabelTrackerProvider(props) {
           units.filter((d) => {
             const id = findUnitID(d);
             return labelTrackerRef.current[id] == false;
-          })
+          }),
         );
       }
     },
-    [labelTrackerRef, units, findUnitID]
+    [labelTrackerRef, units, findUnitID],
   );
 
   const value = trackLabelVisibility;
@@ -63,8 +63,8 @@ export function LabelTrackerProvider(props) {
     h(
       UnlabeledDivisionsContext.Provider,
       { value: unlabeledDivisions },
-      children
-    )
+      children,
+    ),
   );
 }
 
@@ -141,7 +141,7 @@ export function CompositeUnitsColumn(props: CompositeUnitProps) {
 export function AnnotatedUnitsColumn(props: ICompositeUnitProps) {
   useEffect(() => {
     console.warn(
-      "AnnotatedUnitsColumn is deprecated and currently renders a no-op for transition purposes"
+      "AnnotatedUnitsColumn is deprecated and currently renders a no-op for transition purposes",
     );
   }, []);
   return null;
@@ -164,6 +164,8 @@ export function SectionLabelsColumn(props: ICompositeUnitProps) {
 
   const _compositeScale = compositeScale(sections);
 
+  const selectUnit = useUnitSelectionDispatch();
+
   return h("div.section-labels-column", [
     h(
       ColumnNotesProvider,
@@ -188,8 +190,11 @@ export function SectionLabelsColumn(props: ICompositeUnitProps) {
           noteComponent,
           shouldRenderNote,
           scale: _compositeScale,
-        })
-      )
+          onClickNote(note) {
+            selectUnit(note.data, null, null);
+          },
+        }),
+      ),
     ),
   ]);
 }
@@ -206,7 +211,7 @@ export interface CompositeColumnScale {
 
 export function compositeScale(
   sections,
-  opts: CompositeScaleOpts = {}
+  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
@@ -245,7 +250,7 @@ export function compositeScale(
   return baseScale as CompositeColumnScale;
 }
 
-function ColumnNotesProvider(props) {
+export function ColumnNotesProvider(props) {
   // A fake column axis provider that allows scales to cross
   const { children, scale, totalHeight, pixelScale } = props;
 
@@ -264,7 +269,7 @@ function ColumnNotesProvider(props) {
         zoom: 1,
       },
     },
-    children
+    children,
   );
 }
 

package/src/units/index.ts

@@ -5,12 +5,12 @@ import {
 } from "@macrostrat/column-components";
 import { UnitNamesColumn } from "./names";
 import { ICompositeUnitProps } from "./composite";
-import { UnitBoxes } from "./boxes";
+import { UnitBoxes, UnitProps } 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 { useEnvironments, useLithologies } from "../data-provider";
 import { useMemo } from "react";
 import { resolveID } from "./resolvers";
 import { Lithology } from "@macrostrat/api-types";
@@ -46,33 +46,100 @@ export function SimpleUnitsColumn(props: ICompositeUnitProps) {
   ]);
 }
 
+export function BasicUnitComponent({ division, ...rest }) {
+  /** A unit that allows directly setting colors and patterns. */
+
+  return h(UnitComponent, {
+    division,
+    ...rest,
+    backgroundColor: division.color,
+    patternID: division.patternID,
+  });
+}
+
 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;
+  const _nColumns = nOverlappingUnits == 0 ? 1 : nColumns;
+  const columnIx = (division.column ?? 0) % _nColumns;
+  const reducedWidth = width / _nColumns;
+  const x = (columnIx * width) / _nColumns;
 
   return h(TrackedLabeledUnit, {
     division,
     ...rest,
-    width: nOverlappingUnits > 0 ? width / nColumns : width,
-    x: (columnIx * width) / nColumns,
+    width: reducedWidth,
+    x,
   });
 }
 
+interface UnitColorOptions {
+  asBackground?: boolean;
+}
+
+export function useUnitColor(unit, opts: UnitColorOptions = {}): string | null {
+  /** Get the color for a unit based on its lithology */
+  const lithMap = useLithologies();
+  const inDarkMode = useInDarkMode();
+  const { asBackground = true } = opts;
+
+  return useMemo(() => {
+    if (unit == null || lithMap == null) return null;
+    return getMixedUnitColor(unit, lithMap, inDarkMode, asBackground);
+  }, [unit?.unit_id, lithMap, inDarkMode, asBackground]);
+}
+
 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 backgroundColor = useUnitColor(props.division);
+
+  const patternID = useMemo(() => {
+    return resolveID(props.division); // ?? getPatternID(props.division.lith, lithMap);
+  }, [props.division?.unit_id]);
+
+  const fill = useGeologicPattern(patternID);
+
+  return h(UnitComponent, {
+    fill,
+    backgroundColor,
+    ...props,
+  });
+}
+
+export function useUnitColorByEnvironment(
+  unit,
+  opts: UnitColorOptions = {},
+): string | null {
+  /** Get the color for a unit based on its lithology */
+  const environmentMap = useEnvironments();
   const lithMap = useLithologies();
   const inDarkMode = useInDarkMode();
+  const { asBackground = true } = opts;
+
+  return useMemo(() => {
+    if (unit == null || environmentMap == null) return null;
+    let c = getMixedUnitColor(unit, environmentMap, inDarkMode, asBackground, {
+      key: "environ",
+      id_key: "environ_id",
+    });
+    if (c != null) {
+      return c;
+    }
+    // Fallback to lithology color if no environment color is found
+    return getMixedUnitColor(unit, lithMap, inDarkMode, asBackground);
+  }, [unit?.unit_id, environmentMap, lithMap, inDarkMode, asBackground]);
+}
 
-  const backgroundColor = useMemo(() => {
-    return getMixedUnitColor(props.division, lithMap, inDarkMode);
-  }, [props.division?.unit_id, lithMap, inDarkMode]);
+export function EnvironmentColoredUnitComponent(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 backgroundColor = useUnitColorByEnvironment(props.division);
 
   const patternID = useMemo(() => {
     return resolveID(props.division); // ?? getPatternID(props.division.lith, lithMap);
-  }, [props.division?.unit_id, lithMap]);
+  }, [props.division?.unit_id]);
 
   const fill = useGeologicPattern(patternID);
 
@@ -85,7 +152,7 @@ export function ColoredUnitComponent(props) {
 
 function getPatternID(
   liths: Array<Lithology>,
-  lithMap: Map<number, Lithology>
+  lithMap: Map<number, Lithology>,
 ): string | null {
   if (lithMap == null || liths == null || liths.length == 0) {
     return null;

package/src/units/names.ts

@@ -1,7 +1,6 @@
 import h from "@macrostrat/hyper";
-import { useContext, useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import {
-  ColumnContext,
   ColumnAxisType,
   NotesColumn,
   NotesColumnProps,
@@ -11,6 +10,7 @@ import { IUnit } from "./types";
 import React from "react";
 import { getUnitHeightRange } from "../prepare-units/utils";
 import { CompositeColumnScale } from "./composite";
+import { useCompositeScale, useMacrostratColumnData } from "../data-provider";
 
 interface UnitDataProps extends NotesColumnProps {
   left?: number;
@@ -31,7 +31,7 @@ type UnitNote = {
 
 function noteForDivision(
   div: IUnit,
-  opts: { axisType: ColumnAxisType }
+  opts: { axisType: ColumnAxisType },
 ): UnitNote {
   const { axisType } = opts;
 
@@ -53,35 +53,34 @@ const defaultNameFunction = (div) => {
 };
 
 function UnitDataColumn_(props: UnitDataProps) {
-  const ctx = useContext(ColumnContext);
+  const { axisType, units } = useMacrostratColumnData();
+  const scale = useCompositeScale();
   const {
-    left,
+    left = 0,
     noteComponent,
     shouldRenderNote = (note: ColumnDivision | IUnit, i: number) => true,
     minimumHeight = 0,
-    divisions = ctx?.divisions,
+    divisions = units,
     ...rest
   } = props;
 
-  const { scale } = ctx;
-
   const minimumHeightFilter = useCallback(
     (d) => {
       if (minimumHeight == 0) return true;
       const dy = Math.abs(scale(d.top_height) - scale(d.height));
       return dy > minimumHeight;
     },
-    [scale, minimumHeight]
+    [scale, minimumHeight],
   );
 
   if (divisions == null) return null;
   const notes: UnitNote[] = divisions
     .filter(shouldRenderNote)
-    .map((d: IUnit) => noteForDivision(d, { axisType: ctx.axisType }))
+    .map((d: IUnit) => noteForDivision(d, { axisType }))
     .filter(minimumHeightFilter);
 
   return h(NotesColumn, {
-    transform: `translate(${left || 0})`,
+    transform: `translate(${left})`,
     editable: false,
     noteComponent,
     notes,
@@ -98,6 +97,7 @@ interface UnitNamesProps extends UnitDataProps {
   nameForDivision?(obj: IUnit): string;
   paddingLeft?: number;
   width: number;
+  onClickNote?: (note: any) => void;
 }
 
 export function UnitNamesColumn(props: UnitNamesProps) {
@@ -107,13 +107,16 @@ export function UnitNamesColumn(props: UnitNamesProps) {
     ...rest
   } = props;
 
-  const NoteComponent = (props) => {
-    const { note } = props;
-    return h("p.col-note-label", nameForDivision(note.data));
-  };
+  const defaultNoteComponent = useMemo(
+    () => (props) => {
+      const { note } = props;
+      return h("p.col-note-label", nameForDivision(note.data));
+    },
+    [nameForDivision],
+  );
 
   return h(UnitDataColumn, {
-    noteComponent: noteComponent ?? NoteComponent,
+    noteComponent: noteComponent ?? defaultNoteComponent,
     ...rest,
   });
 }

package/src/units/resolvers.ts

@@ -55,6 +55,9 @@ const symbolIndex = {
 };
 
 const resolveID = (d: any) => {
+  if (d.lith == null || d.lith.length == 0) {
+    return null;
+  }
   let liths = [...d.lith];
   let environs = d.environ.map((d) => d.name).join(" ");
   liths.sort((a, b) => b.prop - a.prop);

package/src/units/selection.ts

@@ -10,14 +10,19 @@ import {
   RefObject,
   useRef,
   useCallback,
+  MouseEvent,
 } from "react";
 import { createStore, StoreApi, useStore } from "zustand";
 import type { RectBounds, IUnit } from "./types";
+import {
+  getUnitHeightRange,
+  useMacrostratColumnData,
+} from "@macrostrat/column-views";
 
 type UnitSelectDispatch = (
   unit: BaseUnit | null,
   target: HTMLElement | null,
-  event: Event | null
+  event: Event | null,
 ) => void;
 
 const UnitSelectionContext = createContext<StoreApi<UnitSelectionStore>>(null);
@@ -31,13 +36,11 @@ export function useUnitSelectionDispatch(): UnitSelectDispatch {
 }
 
 export function useUnitSelectionStore<T>(
-  selector: (state: UnitSelectionStore) => T
+  selector: (state: UnitSelectionStore) => T,
 ): T {
   const store = useContext(UnitSelectionContext);
   if (store == null) {
-    throw new Error(
-      "useUnitSelectionStore must be used within a UnitSelectionProvider"
-    );
+    return null;
   }
   return useStore(store, selector);
 }
@@ -54,11 +57,20 @@ interface UnitSelectionStore {
   setSelectedUnit: (unit: number | null) => void;
 }
 
+export interface ColumnClickData {
+  unitID: number | null;
+  unit: BaseUnit | null;
+  target: HTMLElement | null;
+  height: number;
+  // Room for boundary IDs eventually
+}
+
 export function UnitSelectionProvider<T extends BaseUnit>(props: {
   children: ReactNode;
   columnRef?: RefObject<HTMLElement>;
   units: T[];
   selectedUnit: number | null;
+  onClickedColumn?: (columnClickData: ColumnClickData, event: Event) => void;
   onUnitSelected?: (unitID: number | null, unit: T | null) => void;
 }) {
   const [store] = useState(() =>
@@ -80,10 +92,30 @@ export function UnitSelectionProvider<T extends BaseUnit>(props: {
           });
         }
       },
-      onUnitSelected: (unit: T, target: HTMLElement, event: Event) => {
+      onUnitSelected: (unit: T, target: HTMLElement, event: PointerEvent) => {
         console.log("onUnitSelected", unit, target, event);
         const el = props.columnRef?.current;
         let overlayPosition = null;
+
+        /** This is not the natural place to get positions within the column,
+         * but it will work for now.
+         */
+        if (props.onClickedColumn) {
+          // Infer height from top and bottom height of unit (because that's passed back with the call)
+          //const py = event.y;
+          //const [bottom, top] = getUnitHeightRange(unit, axisType);
+          //const height = Math.abs(bottom - top);
+
+          /** Ideally this would be defined at the column level */
+          const columnClickData: ColumnClickData = {
+            unitID: unit?.unit_id,
+            unit,
+            target,
+            height: el?.getBoundingClientRect().height || 0,
+          };
+          props.onClickedColumn(columnClickData, event);
+        }
+
         if (unit != null && el != null && target != null) {
           const rect = el.getBoundingClientRect();
           const targetRect = target.getBoundingClientRect();
@@ -103,7 +135,7 @@ export function UnitSelectionProvider<T extends BaseUnit>(props: {
           overlayPosition,
         });
       },
-    }))
+    })),
   );
 
   const { units, selectedUnit } = props;
@@ -122,7 +154,7 @@ export function UnitSelectionProvider<T extends BaseUnit>(props: {
 }
 
 export function useUnitSelectionTarget(
-  unit: IUnit
+  unit: IUnit,
 ): [React.RefObject<HTMLElement>, boolean, (evt: Event) => void] {
   const ref = useRef<HTMLElement>();
   const selectedUnit = useSelectedUnit();
@@ -131,14 +163,15 @@ export function useUnitSelectionTarget(
 
   const onClick = useCallback(
     (evt: Event) => {
+      if (onSelectUnit == null) return;
       onSelectUnit(unit, ref.current, evt);
       evt.stopPropagation();
     },
-    [unit, onSelectUnit]
+    [unit, onSelectUnit],
   );
 
   useEffect(() => {
-    if (!selected) return;
+    if (!selected || onSelectUnit == null) return;
     // In case we haven't set the position of the unit (if we don't have a target), set the selected unit
     onSelectUnit(unit, ref.current, null);
 
@@ -175,7 +208,7 @@ export function UnitKeyboardNavigation<T extends BaseUnit>({
       selectUnit(units[nextIx], null, null);
       event.stopPropagation();
     },
-    [units, ix]
+    [units, ix],
   );
   return null;
 }

package/src/units/types.ts

@@ -5,6 +5,8 @@ export interface IUnit {
   t_age: number;
   b_age: number;
   [x: string]: any;
+  patternID?: string | number;
+  color?: string;
 }
 
 export interface RectBounds {