@macrostrat/column-views 2.0.1 → 2.1.1

package/src/column.ts

@@ -2,7 +2,7 @@ import { ColumnAxisType } from "@macrostrat/column-components";
 import { hyperStyled } from "@macrostrat/hyper";
 import { useDarkMode } from "@macrostrat/ui-components";
 import classNames from "classnames";
-import { RefObject, useRef, HTMLAttributes } from "react";
+import { RefObject, useRef, HTMLAttributes, useCallback } from "react";
 import styles from "./column.module.sass";
 import {
   UnitSelectionProvider,
@@ -15,6 +15,7 @@ import { ColumnHeightScaleOptions } from "./prepare-units/composite-scale";
 import { UnitSelectionPopover } from "./unit-details";
 import {
   MacrostratColumnDataProvider,
+  useCompositeScale,
   useMacrostratColumnData,
 } from "./data-provider";
 import {
@@ -38,6 +39,11 @@ interface BaseColumnProps extends SectionSharedProps {
   // Timescale properties
   showTimescale?: boolean;
   timescaleLevels?: number | [number, number];
+  onMouseOver?: (
+    unit: UnitLong | null,
+    height: number | null,
+    evt: MouseEvent,
+  ) => void;
 }
 
 export interface ColumnProps extends BaseColumnProps, ColumnHeightScaleOptions {
@@ -47,6 +53,7 @@ export interface ColumnProps extends BaseColumnProps, ColumnHeightScaleOptions {
   b_age?: number;
   mergeSections?: MergeSectionsMode;
   showUnitPopover?: boolean;
+  allowUnitSelection?: boolean;
   selectedUnit?: number | null;
   onUnitSelected?: (unitID: number | null, unit: any) => void;
   // Unconformity height in pixels
@@ -71,6 +78,7 @@ export function Column(props: ColumnProps) {
     minPixelScale = 0.2,
     minSectionHeight = 50,
     collapseSmallUnconformities = true,
+    allowUnitSelection,
     ...rest
   } = props;
   const ref = useRef<HTMLElement>();
@@ -96,22 +104,41 @@ export function Column(props: ColumnProps) {
         title: "Empty column",
         description: "No sections found in this column.",
         icon: "warning-sign",
-      })
+      }),
+    );
+  }
+
+  let main: any = h(ColumnInner, { columnRef: ref, ...rest }, [
+    children,
+    h.if(showUnitPopover)(UnitSelectionPopover),
+    h.if(keyboardNavigation)(UnitKeyboardNavigation, { units }),
+  ]);
+
+  /* By default, unit selection is disabled. However, if any related props are passed,
+   we enable it.
+   */
+  let _allowUnitSelection = allowUnitSelection ?? false;
+  if (showUnitPopover || selectedUnit != null || onUnitSelected != null) {
+    _allowUnitSelection = true;
+  }
+
+  if (_allowUnitSelection) {
+    main = h(
+      UnitSelectionProvider,
+      {
+        columnRef: ref,
+        onUnitSelected,
+        selectedUnit,
+        units,
+      },
+      main,
     );
   }
 
   return h(
     MacrostratColumnDataProvider,
     { units, sections, totalHeight, axisType },
-    h(
-      UnitSelectionProvider,
-      { columnRef: ref, onUnitSelected, selectedUnit, units },
-      h(ColumnInner, { columnRef: ref, ...rest }, [
-        children,
-        h.if(showUnitPopover)(UnitSelectionPopover),
-        h.if(keyboardNavigation)(UnitKeyboardNavigation, { units }),
-      ])
-    )
+    main,
   );
 }
 
@@ -134,12 +161,11 @@ function ColumnInner(props: ColumnInnerProps) {
     showTimescale,
     timescaleLevels,
     maxInternalColumns,
+    onMouseOver,
   } = props;
 
   const { axisType } = useMacrostratColumnData();
 
-  const dispatch = useUnitSelectionDispatch();
-
   let width = _width;
   let columnWidth = _columnWidth;
   if (columnWidth > width) {
@@ -150,8 +176,8 @@ function ColumnInner(props: ColumnInnerProps) {
     showLabelColumn = false;
   }
 
-  let _showTimescale = showTimescale;
-  if (timescaleLevels !== null) {
+  let _showTimescale = showTimescale ?? true;
+  if (timescaleLevels != null) {
     _showTimescale = true;
   }
   _showTimescale = axisType == ColumnAxisType.AGE && _showTimescale;
@@ -159,9 +185,7 @@ function ColumnInner(props: ColumnInnerProps) {
   return h(
     ColumnContainer,
     {
-      onClick(evt) {
-        dispatch?.(null, null, evt as any);
-      },
+      ...useMouseEventHandlers(onMouseOver),
       className,
     },
     h("div.column", { ref: columnRef }, [
@@ -178,10 +202,59 @@ function ColumnInner(props: ColumnInnerProps) {
         maxInternalColumns,
       }),
       children,
-    ])
+    ]),
   );
 }
 
+type ColumnMouseOverHandler = (
+  unit: UnitLong | null,
+  height: number | null,
+  evt: MouseEvent,
+) => void;
+
+function useMouseEventHandlers(
+  _onMouseOver: ColumnMouseOverHandler | null = null,
+) {
+  /** Click event handler */
+
+  // Click handler for unit selection
+  const dispatch = useUnitSelectionDispatch();
+  const onClick = useCallback(
+    (evt) => {
+      dispatch?.(null, null, evt as any);
+    },
+    [dispatch],
+  );
+
+  /** Hover event handlers */
+  const scale = useCompositeScale();
+
+  const onMouseOver = useCallback(
+    (evt) => {
+      const height = scale.invert(
+        evt.clientY - evt.currentTarget.getBoundingClientRect().top,
+      );
+      _onMouseOver?.(null, height, evt);
+    },
+    [scale, _onMouseOver],
+  );
+
+  const onMouseOut = useCallback(() => {
+    _onMouseOver?.(null, null, null);
+  }, [_onMouseOver]);
+
+  if (_onMouseOver == null) {
+    return {
+      onClick,
+      onMouseOver: undefined,
+      onMouseMove: undefined,
+      onMouseOut: undefined,
+    };
+  }
+
+  return { onMouseOver, onMouseMove: onMouseOver, onMouseOut, onClick };
+}
+
 export interface ColumnContainerProps extends HTMLAttributes<HTMLDivElement> {
   className?: string;
 }

package/src/correlation-chart/main.ts

@@ -44,6 +44,7 @@ export interface CorrelationChartProps extends CorrelationChartSettings {
   unconformityLabels?: boolean;
   selectedUnit?: number | null;
   showUnitPopover?: boolean;
+  unitComponent?: any;
   onUnitSelected?: (unitID: number | null, unit: BaseUnit | null) => void;
 }
 
@@ -55,6 +56,7 @@ export function CorrelationChart({
   showUnitPopover = true,
   selectedUnit,
   onUnitSelected,
+  unitComponent,
   ...scaleProps
 }: CorrelationChartProps) {
   const defaultScaleProps = {
@@ -124,15 +126,16 @@ export function CorrelationChart({
                 offset,
                 domain,
                 pixelScale,
+                unitComponent,
               });
-            })
+            }),
           ),
           h.if(showUnitPopover)(UnitSelectionPopover),
           // Navigation only works within a column for now...
           h(UnitKeyboardNavigation, { units }),
         ]),
-      ])
-    )
+      ]),
+    ),
   );
 }
 
@@ -140,6 +143,7 @@ function Package({
   columnData,
   columnSpacing,
   columnWidth,
+  unitComponent,
   offset,
   domain,
   pixelScale,
@@ -151,6 +155,7 @@ function Package({
       columnData.map((data, i) => {
         return h(Column, {
           units: data.units,
+          unitComponent,
           width: columnWidth,
           key: i,
           domain,
@@ -177,7 +182,14 @@ interface ColumnProps {
 }
 
 function Column(props: ColumnProps) {
-  const { units, width = 150, offsetLeft, domain, pixelScale } = props;
+  const {
+    units,
+    width = 150,
+    offsetLeft,
+    domain,
+    pixelScale,
+    unitComponent = ColoredUnitComponent,
+  } = props;
 
   const columnWidth = width;
 
@@ -200,13 +212,14 @@ function Column(props: ColumnProps) {
         axisType: ColumnAxisType.AGE,
       },
       h(UnitBoxes, {
-        unitComponent: ColoredUnitComponent,
+        unitComponent,
         unitComponentProps: {
           nColumns: 2,
           width: columnWidth,
+          showLabel: false,
         },
-      })
-    )
+      }),
+    ),
   );
 }
 
@@ -232,7 +245,7 @@ function PackageSVGOverlay({ data, columnWidth = 100, columnSpacing = 0 }) {
         pixelScale: bestPixelScale,
         columnSpacing,
       });
-    })
+    }),
   );
 }
 
@@ -251,7 +264,7 @@ function LaterallyExtensiveUnit({ data, scale, pixelScale, columnSpacing }) {
         key: i,
         columnSpacing,
       });
-    })
+    }),
   );
 }
 
@@ -270,13 +283,13 @@ function StratColSpan({
   return h(
     "div.strat-col-span",
     { style: { top, height, width, left } },
-    strat_name_long
+    strat_name_long,
   );
 }
 
 function ChartArea({ children }) {
   const setSelectedUnit = useUnitSelectionStore(
-    (state) => state.setSelectedUnit
+    (state) => state.setSelectedUnit,
   );
 
   return h(
@@ -286,7 +299,7 @@ function ChartArea({ children }) {
         setSelectedUnit(null);
       },
     },
-    children
+    children,
   );
 }
 

package/src/correlation-chart/prepare-data.ts

@@ -40,7 +40,7 @@ export interface ColumnIdentifier {
 
 export function buildCorrelationChartData(
   columns: ColumnData[],
-  settings: CorrelationChartSettings
+  settings: CorrelationChartSettings,
 ): CorrelationChartData {
   console.log(settings);
   const {
@@ -108,7 +108,7 @@ interface MultiColumnPackageData {
 }
 
 export function findLaterallyExtensiveUnits(
-  pkg: MultiColumnPackageData
+  pkg: MultiColumnPackageData,
 ): UnitGroup[] {
   const { columnData, b_age, t_age } = pkg;
   // Group units by strat_name_id
@@ -130,7 +130,7 @@ export function findLaterallyExtensiveUnits(
     const units = columnData.map((d) => unitIndex0.get(d.columnID) ?? null);
     const filteredUnits = units.filter((d) => d != null);
     const [t_age, b_age] = mergeAgeRanges(
-      filteredUnits.map((d) => [d.t_age, d.b_age])
+      filteredUnits.map((d) => [d.t_age, d.b_age]),
     );
     if (filteredUnits.length <= 1) continue;
 
@@ -179,7 +179,7 @@ export function splitStratIntoBoxes(pkg: UnitGroup): UnitGroupBox[] {
 
 function separateColumns(
   pkg: PackageLayoutData,
-  columnIDs: number[]
+  columnIDs: number[],
 ): MultiColumnPackageData {
   /** Separate columns by col_id */
   const { units, t_age, b_age } = pkg;
@@ -196,7 +196,7 @@ function separateColumns(
             ...pkg,
             units: u1,
           },
-          ColumnAxisType.AGE
+          ColumnAxisType.AGE,
         ),
       };
     }),
@@ -207,7 +207,7 @@ function separateColumns(
 }
 
 export function columnGeoJSONRecordToColumnIdentifier(
-  col: ColumnGeoJSONRecord
+  col: ColumnGeoJSONRecord,
 ): ColumnIdentifier {
   return {
     col_id: col.properties.col_id,

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

@@ -1,6 +1,6 @@
-import { Meta } from "@storybook/react";
+import { Meta } from "@storybook/react-vite";
 import "@macrostrat/style-system";
-import { useArgs } from "@storybook/preview-api";
+import { useArgs } from "storybook/preview-api";
 import { useCallback } from "react";
 import {
   ColumnCorrelationMap,
@@ -15,6 +15,7 @@ import { CorrelationChart, CorrelationChartProps } from "../main";
 import { ErrorBoundary, useAsyncMemo } from "@macrostrat/ui-components";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { parseLineFromString, stringifyLine } from "../hash-string";
+import { EnvironmentColoredUnitComponent } from "../../units";
 
 const mapboxToken = import.meta.env.VITE_MAPBOX_API_TOKEN;
 
@@ -49,7 +50,7 @@ function CorrelationStoryUI({
           //showLogo: false,
         }),
       ]),
-    ])
+    ]),
   );
 }
 
@@ -58,7 +59,7 @@ function CorrelationDiagramWrapper(props: Omit<CorrelationChartProps, "data">) {
 
   // Sync focused columns with map
   const focusedColumns = useCorrelationMapStore(
-    (state) => state.focusedColumns
+    (state) => state.focusedColumns,
   );
 
   const columnUnits = useAsyncMemo(async () => {
@@ -71,7 +72,7 @@ function CorrelationDiagramWrapper(props: Omit<CorrelationChartProps, "data">) {
       ErrorBoundary,
       h(OverlaysProvider, [
         h(CorrelationChart, { data: columnUnits, ...props }),
-      ])
+      ]),
     ),
   ]);
 }
@@ -171,7 +172,7 @@ function useCorrelationLine() {
     (selectedUnit) => {
       updateArgs({ selectedUnit });
     },
-    [updateArgs]
+    [updateArgs],
   );
 
   return {
@@ -190,3 +191,8 @@ function Template(args) {
 }
 
 export const Primary = Template.bind({});
+
+export const ColoredByEnvironment = Template.bind({});
+ColoredByEnvironment.args = {
+  unitComponent: EnvironmentColoredUnitComponent,
+};

package/src/data-provider/base.ts

@@ -53,12 +53,12 @@ interface MacrostratStore extends RefsSlice {
   columnFootprints: Map<number, ColumnFootprintsStorage>;
   getColumns(
     projectID: number | null,
-    inProcess: boolean
+    inProcess: boolean,
   ): Promise<ColumnGeoJSONRecord[]>;
 }
 
 function createMacrostratStore(
-  baseURL: string = "https://macrostrat.org/api/v2"
+  baseURL: string = "https://macrostrat.org/api/v2",
 ) {
   return create<MacrostratStore>((set, get): MacrostratStore => {
     return {
@@ -221,7 +221,7 @@ function createIntervalsSlice(set, get) {
         return Array.from(_intervals.values());
       if (timescaleID != null) {
         return Array.from(_intervals.values() as any[]).filter(
-          (d) => d.timescale_id == timescaleID
+          (d) => d.timescale_id == timescaleID,
         );
       }
       return ids.map((id) => intervals.get(id));
@@ -233,7 +233,7 @@ function includesTimescale(intervals: Map<number, any>, timescaleID: number) {
   if (intervals == null) return false;
   if (timescaleID == null) return true;
   return Array.from(intervals.values()).some(
-    (d) => d.timescale_id == timescaleID
+    (d) => d.timescale_id == timescaleID,
   );
 }
 
@@ -272,7 +272,7 @@ export function useMacrostratDefs(dataType: string): Map<number, any> | null {
 
 export function useMacrostratColumns(
   projectID: number | null,
-  inProcess: boolean
+  inProcess: boolean,
 ) {
   const getColumns = useMacrostratStore((s) => s.getColumns);
   const columnsMap = useMacrostratStore((s) => s.columnFootprints);
@@ -292,7 +292,7 @@ export function useMacrostratColumns(
     if (!inProcess && colData.inProcess) {
       // Our available set of columns includes 'in process' columns, but we don't want them
       columns.features = columns.features?.filter(
-        (d) => d.properties.status != "in process"
+        (d) => d.properties.status != "in process",
       );
     }
     return columns;
@@ -323,7 +323,7 @@ export function MacrostratDataProvider(props: MacrostratDataProviderProps) {
   return h(
     MacrostratAPIProvider,
     { baseURL },
-    h(MacrostratDataProviderContext.Provider, { value: store }, children)
+    h(MacrostratDataProviderContext.Provider, { value: store }, children),
   );
 }
 
@@ -341,7 +341,7 @@ export function MacrostratAPIProvider({
   baseURL,
 }: APIProviderProps) {
   baseURL ??= useDev
-    ? "https://dev2.macrostrat.org/api/v2"
+    ? "https://dev.macrostrat.org/api/v2"
     : "https://macrostrat.org/api/v2";
 
   return h(
@@ -350,7 +350,7 @@ export function MacrostratAPIProvider({
       baseURL,
       unwrapResponse: (res) => res.success.data,
     },
-    children
+    children,
   );
 }
 
@@ -364,7 +364,7 @@ export function MacrostratColumnProvider(props) {
   return h(
     ColumnProvider,
     { axisType, divisions: units, range: domain, pixelsPerMeter: pixelScale },
-    children
+    children,
   );
 }
 
@@ -372,7 +372,7 @@ export function MacrostratColumnProvider(props) {
 export function LithologiesProvider({ children }) {
   useEffect(() => {
     console.warn(
-      "LithologiesProvider is deprecated. Replace with MacrostratDataProvider"
+      "LithologiesProvider is deprecated. Replace with MacrostratDataProvider",
     );
   }, []);
   return children;
@@ -386,3 +386,12 @@ export function useLithologies() {
   }, [lithologies, getLithologies]);
   return lithologies;
 }
+
+export function useEnvironments() {
+  const getEnvironments = useMacrostratStore((s) => s.getEnvironments);
+  const environments = useMacrostratStore((s) => s.environments);
+  useEffect(() => {
+    if (environments == null) getEnvironments();
+  }, [environments, getEnvironments]);
+  return environments;
+}

package/src/data-provider/column-nav.ts

@@ -14,13 +14,13 @@ type ColumnManagerData = [ColumnArgs, (c: ColumnArgs) => void];
 const ColumnNavCtx = createContext<ColumnManagerData | null>(null);
 
 export function useColumnNav(
-  defaultArgs: ColumnArgs = { col_id: 495, unit_id: null }
+  defaultArgs: ColumnArgs = { col_id: 495, unit_id: null },
 ): ColumnManagerData {
   const ctx = useContext(ColumnNavCtx);
   if (ctx != null) return ctx;
 
   const [columnArgs, setColumnArgs] = useState<ColumnArgs>(
-    extractColumnArgs(getQueryString(window.location.search)) ?? defaultArgs
+    extractColumnArgs(getQueryString(window.location.search)) ?? defaultArgs,
   );
 
   useEffect(() => setQueryString(columnArgs), [columnArgs]);

package/src/data-provider/fetch.ts

@@ -15,7 +15,7 @@ import { geoArea } from "d3-geo";
 
 function defaultFetch(
   url: string,
-  options: RequestInit | undefined = undefined
+  options: RequestInit | undefined = undefined,
 ) {
   const baseURL = "https://macrostrat.org/api/v2";
   return crossFetch(baseURL + url, options);
@@ -30,7 +30,7 @@ export interface ColumnFetchOptions {
 }
 
 export async function fetchAllColumns(
-  options: ColumnFetchOptions = {}
+  options: ColumnFetchOptions = {},
 ): Promise<ColumnGeoJSONRecord[]> {
   const {
     apiBaseURL,
@@ -92,7 +92,7 @@ export function useColumnFeatures({
   return useAPIResult(
     apiRoute,
     { format, all, status_code, project_id },
-    processor
+    processor,
   );
 }
 
@@ -117,12 +117,12 @@ function processTopoJSON(res) {
 
 function postProcessColumns(columns) {
   return promoteColumnIDs(
-    convertSmallAreasToPoints(removeFeaturesWithoutGeometry(columns))
+    convertSmallAreasToPoints(removeFeaturesWithoutGeometry(columns)),
   );
 }
 
 function promoteColumnIDs(
-  features: ColumnGeoJSONRecord[]
+  features: ColumnGeoJSONRecord[],
 ): ColumnGeoJSONRecordWithID[] {
   return features.map((f, i) => {
     return {
@@ -171,7 +171,7 @@ export async function fetchLithologies(fetch = defaultFetch) {
 
 export async function fetchIntervals(
   timescaleID: number | null,
-  fetch = defaultFetch
+  fetch = defaultFetch,
 ) {
   let url = `/defs/intervals`;
   if (timescaleID != null) {
@@ -190,7 +190,7 @@ export async function fetchEnvironments(fetch = defaultFetch) {
 
 export async function fetchRefs(
   refs: number[],
-  fetch = defaultFetch
+  fetch = defaultFetch,
 ): Promise<MacrostratRef[]> {
   let url = `/defs/refs`;
   if (refs.length == 0) {
@@ -208,7 +208,7 @@ export type ColumnData = {
 
 export async function fetchUnits(
   columns: number[],
-  fetch = defaultFetch
+  fetch = defaultFetch,
 ): Promise<ColumnData[]> {
   const promises = columns.map((col_id) => fetchColumnUnits(col_id, fetch));
   return await Promise.all(promises);
@@ -216,7 +216,7 @@ export async function fetchUnits(
 
 export async function fetchColumnUnits(
   col_id: number,
-  fetch = defaultFetch
+  fetch = defaultFetch,
 ): Promise<ColumnData> {
   const params = new URLSearchParams();
   params.append("response", "long");

package/src/data-provider/store.ts

@@ -1,8 +1,15 @@
-import { createContext, useContext, ReactNode, useMemo } from "react";
+import {
+  createContext,
+  useContext,
+  ReactNode,
+  useMemo,
+  useEffect,
+} from "react";
 import h from "@macrostrat/hyper";
 import {
   createCompositeScale,
   PackageLayoutData,
+  CompositeColumnScale,
 } from "../prepare-units/composite-scale";
 import { ExtUnit } from "../prepare-units/helpers";
 import { ColumnAxisType } from "@macrostrat/column-components";
@@ -51,7 +58,7 @@ export function useMacrostratColumnData() {
   const ctx = useContext(MacrostratColumnDataContext);
   if (!ctx) {
     throw new Error(
-      "useMacrostratColumnData must be used within a MacrostratColumnDataProvider"
+      "useMacrostratColumnData must be used within a MacrostratColumnDataProvider",
     );
   }
   return ctx;
@@ -61,12 +68,10 @@ export function useMacrostratUnits() {
   return useMacrostratColumnData().units;
 }
 
-export function useCompositeScale() {
-  const ctx = useContext(MacrostratColumnDataContext);
-  if (!ctx) {
-    throw new Error(
-      "useCompositeScale must be used within a MacrostratUnitsProvider"
-    );
-  }
-  return createCompositeScale(ctx.sections, true);
+export function useCompositeScale(): CompositeColumnScale {
+  const ctx = useMacrostratColumnData();
+  return useMemo(
+    () => createCompositeScale(ctx.sections, true),
+    [ctx.sections],
+  );
 }

package/src/{carbon-isotopes → facets/carbon-isotopes}/data-area.ts

@@ -2,6 +2,7 @@ import { line } from "d3-shape";
 import { createContext, useContext } from "react";
 import h from "@macrostrat/hyper";
 import { ColumnLayoutContext } from "@macrostrat/column-components";
+import { useCompositeScale } from "../../data-provider";
 
 const inDomain = (scale, num) => {
   const domain = scale.domain();
@@ -29,9 +30,11 @@ export interface DataAreaProps {
 }
 
 const IsotopesDataArea = function (props: DataAreaProps) {
-  const { xScale, scale } = useContext(ColumnLayoutContext) ?? {};
+  const xScale = useContext(ColumnLayoutContext)?.xScale;
 
-  let { corrected, system, children, getHeight, clipY } = props;
+  const scale = useCompositeScale();
+
+  let { corrected, system, children, getHeight, clipY = false } = props;
   if (getHeight == null) {
     getHeight = function (d) {
       if (d.height == null) {
@@ -63,8 +66,6 @@ const IsotopesDataArea = function (props: DataAreaProps) {
   return h(IsotopesDataContext.Provider, { value }, h("g.data", children));
 };
 
-IsotopesDataArea.defaultProps = { clipY: false };
-
 const IsotopeDataPoint = function (props) {
   const { pointLocator } = useContext(IsotopesDataContext);
   const { datum, strokeWidth, ...rest } = props;