@macrostrat/column-views 1.0.0

package/src/units/index.ts

@@ -0,0 +1,36 @@
+import h from "@macrostrat/hyper";
+import { LithologyColumn } from "@macrostrat/column-components";
+import { UnitNamesColumn } from "./names";
+import { ICompositeUnitProps } from "./composite";
+import { UnitBoxes } from "./boxes";
+
+const UnitsColumn = ({ width = 100 }) => {
+  /*
+  A column showing units with USGS color fill
+  */
+  return h(LithologyColumn, { width }, h(UnitBoxes));
+};
+
+const SimpleUnitsColumn = (props: ICompositeUnitProps) => {
+  /*
+  A column with units and names either
+  overlapping or offset to the right
+  */
+  const { columnWidth, width, gutterWidth = 0, labelOffset = 30 } = props;
+
+  return h([
+    h(UnitsColumn, {
+      width: columnWidth,
+    }),
+    h(UnitNamesColumn, {
+      transform: `translate(${columnWidth + gutterWidth})`,
+      paddingLeft: labelOffset,
+      width: width - columnWidth - gutterWidth,
+    }),
+  ]);
+};
+
+export { UnitsColumn, SimpleUnitsColumn };
+export * from "./composite";
+export * from "./types";
+export * from "./selection";

package/src/units/names.ts

@@ -0,0 +1,118 @@
+import h from "@macrostrat/hyper";
+import { useContext, useCallback } from "react";
+import {
+  ColumnContext,
+  ColumnAxisType,
+  NotesColumn,
+  NotesColumnProps,
+} from "@macrostrat/column-components";
+import type { ColumnDivision } from "@macrostrat/column-components";
+import { IUnit, transformAxisType } from "./types";
+import React from "react";
+
+interface UnitDataProps extends NotesColumnProps {
+  left?: number;
+  transform?: string;
+  noteComponent?: React.ComponentType<any>;
+  shouldRenderNote?(div: ColumnDivision | IUnit, index: number): boolean;
+  divisions?: IUnit[];
+  minimumHeight?: number;
+}
+
+type UnitNote = {
+  height: number;
+  top_height: number;
+  data: IUnit;
+  id: number;
+};
+
+function noteForDivision(
+  div: IUnit,
+  opts: { axisType: ColumnAxisType }
+): UnitNote {
+  const { axisType } = opts;
+
+  const key = transformAxisType(axisType);
+  return {
+    height: div[`b_${key}`],
+    top_height: div[`t_${key}`],
+    data: div,
+    id: div.unit_id,
+  };
+}
+
+const defaultNameFunction = (div) => {
+  return div.unit_name
+    .replace("Mbr", "Member")
+    .replace("Fm", "Formation")
+    .replace("Gp", "Group");
+};
+
+function UnitDataColumn_(props: UnitDataProps) {
+  const ctx = useContext(ColumnContext);
+  const {
+    left,
+    noteComponent,
+    shouldRenderNote = (note: ColumnDivision | IUnit, i: number) => true,
+    minimumHeight = 0,
+    divisions = ctx?.divisions,
+    ...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]
+  );
+
+  if (divisions == null) return null;
+  const notes: UnitNote[] = divisions
+    .filter(shouldRenderNote)
+    .map((d: IUnit) => noteForDivision(d, { axisType: ctx.axisType }))
+    .filter(minimumHeightFilter);
+
+  return h(NotesColumn, {
+    transform: `translate(${left || 0})`,
+    editable: false,
+    noteComponent,
+    notes,
+    forceOptions: {
+      nodeSpacing: 1,
+    },
+    ...rest,
+  });
+}
+
+const UnitDataColumn = React.memo(UnitDataColumn_);
+
+interface UnitNamesProps extends UnitDataProps {
+  nameForDivision?(obj: IUnit): string;
+  paddingLeft?: number;
+  width: number;
+}
+
+export function UnitNamesColumn(props: UnitNamesProps) {
+  const {
+    nameForDivision = defaultNameFunction,
+    noteComponent,
+    ...rest
+  } = props;
+
+  const NoteComponent = (props) => {
+    const { note } = props;
+    return h("p.col-note-label", nameForDivision(note.data));
+  };
+
+  return h(UnitDataColumn, {
+    noteComponent: noteComponent ?? NoteComponent,
+    ...rest,
+  });
+}
+
+export type { UnitNamesProps };
+export { defaultNameFunction, noteForDivision, UnitDataColumn };

package/src/units/resolvers.ts

@@ -0,0 +1,111 @@
+const symbolIndex = {
+  "dolomite-limestone": 641,
+  lime_mudstone: 627,
+  sandstone: 607,
+  "quartz arenite": 607,
+  litharenite: 608,
+  sand: 608,
+  siltstone: 616,
+  silt: 616,
+  "dolomitic siltstone": 616,
+  shale: 620,
+  limestone: 627,
+  dolomite: 642,
+  conglomerate: 602,
+  carbonate: 627,
+  "dolomite-mudstone": 642,
+  dolostone: 642,
+  mudstone: 620,
+  "sandy-dolomite": 645,
+  quartzite: 702,
+  halite: 668,
+  basalt: 717,
+  rhyolite: 722,
+  andesite: 723,
+  till: 681,
+  loess: 684,
+  "calcareous ooze": 653,
+  chalk: 626,
+  gravel: 601,
+  plutonic: 721,
+  granite: 719,
+  clay: 660,
+  syenite: 722,
+  tuff: 711,
+  volcanic: 725,
+  metamorphic: 707,
+  volcaniclastic: 714,
+  migmatite: 709,
+  gneiss: 708,
+  tonalite: 727,
+  granodiorite: 725,
+  monzonite: 723,
+  argillite: 624,
+};
+
+const resolveID = (d: any) => {
+  let liths = d.lith;
+  let environs = d.environ.map((d) => d.name).join(" ");
+  liths.sort((a, b) => b.prop - a.prop);
+
+  //console.log(d, d.unit_name, liths.map(d => d.name), environs)
+
+  let sym = null;
+
+  // overrides for IODP columns
+  if (d.unit_name == "clay") {
+    return "650";
+  }
+  if (d.unit_name == "calcareous clay") {
+    return "651";
+  }
+
+  for (const k of liths) {
+    if (k.name == "sandstone") {
+      // Special cases for sandstone
+      if (environs.includes("dune")) {
+        return "609";
+      }
+      if (environs.includes("marine")) {
+        return "608";
+      }
+      if (environs.includes("shore")) {
+        return "611";
+      }
+      if (environs.includes("loess")) {
+        return "686";
+      }
+    }
+
+    if (k.name == "conglomerate") {
+      // Special cases for sandstone
+      if (environs.includes("fluvial")) {
+        return "603";
+      }
+    }
+
+    if (k.name.includes("tuff")) {
+      return "711";
+    }
+    sym = symbolIndex[k.name];
+    if (sym != null) {
+      return sym;
+    }
+
+    if (k.type == "volcanic") {
+      return "725";
+    }
+  }
+  return sym;
+};
+
+const patternScale = {
+  "609": 1.5,
+  "603": 1.5,
+};
+
+const scalePattern = (id) => {
+  return patternScale[`${id}`] ?? 1;
+};
+
+export { resolveID, scalePattern };

package/src/units/selection.ts

@@ -0,0 +1,167 @@
+import { BaseUnit } from "@macrostrat/api-types";
+import h from "@macrostrat/hyper";
+import {
+  getQueryString,
+  setQueryString,
+  useKeyHandler,
+} from "@macrostrat/ui-components";
+import {
+  Dispatch,
+  SetStateAction,
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  ReactNode,
+  useCallback,
+} from "react";
+
+type UnitSelectDispatch = (
+  unit: BaseUnit | null,
+  target: HTMLElement | null,
+  event: Event | null
+) => void;
+
+const UnitSelectionContext = createContext<BaseUnit | null>(null);
+const DispatchContext = createContext<UnitSelectDispatch | null>(null);
+
+export function useUnitSelectionDispatch() {
+  return useContext(DispatchContext);
+}
+
+export function useSelectedUnit() {
+  return useContext(UnitSelectionContext);
+}
+
+export interface UnitSelectionProps<T extends BaseUnit> {
+  children: React.ReactNode;
+  unit: T | null;
+  setUnit: Dispatch<SetStateAction<T>>;
+  onUnitSelected?: (unit: T, target: HTMLElement, event: Event) => void;
+}
+
+export function UnitSelectionProvider<T extends BaseUnit>(
+  props: Partial<UnitSelectionProps<T>>
+) {
+  const { unit, setUnit, onUnitSelected, children } = props;
+
+  if (unit == null && setUnit == null) {
+    return h(StatefulUnitSelectionProvider, props);
+  }
+
+  return h(
+    BaseUnitSelectionProvider,
+    { unit, setUnit, onUnitSelected },
+    children
+  );
+}
+
+function StatefulUnitSelectionProvider<T extends BaseUnit>(props: {
+  children: ReactNode;
+  onUnitSelected?: (unit: T, target: HTMLElement, event: Event) => void;
+}) {
+  const [unit, setUnit] = useState<T | null>(null);
+
+  return h(BaseUnitSelectionProvider, { ...props, unit, setUnit });
+}
+
+function BaseUnitSelectionProvider<T extends BaseUnit>({
+  children,
+  unit,
+  setUnit,
+  onUnitSelected,
+}: UnitSelectionProps<T>) {
+  const value = useMemo(() => unit, [unit?.unit_id]);
+
+  const _onUnitSelected = useCallback(
+    (u: T, target: HTMLElement, event: Event) => {
+      let newUnit = u;
+      setUnit(newUnit);
+      onUnitSelected?.(newUnit, target, event);
+    },
+    [setUnit, onUnitSelected]
+  );
+
+  return h(
+    DispatchContext.Provider,
+    { value: _onUnitSelected },
+    h(UnitSelectionContext.Provider, { value }, children)
+  );
+}
+
+export interface ColumnArgs {
+  col_id?: number;
+  unit_id?: number;
+  project_id?: number;
+  status_code?: "in process";
+}
+
+type ColumnManagerData = [ColumnArgs, (c: ColumnArgs) => void];
+
+const ColumnNavCtx = createContext<ColumnManagerData | null>(null);
+
+export function useColumnNav(
+  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
+  );
+
+  useEffect(() => setQueryString(columnArgs), [columnArgs]);
+
+  const { col_id, project_id, status_code } = columnArgs;
+
+  const setCurrentColumn = (obj) => {
+    let args = obj;
+    if ("properties" in obj) {
+      args = { col_id: obj.properties.col_id, project_id, status_code };
+    }
+    // Set query string
+    setQueryString(args);
+    setColumnArgs(args);
+  };
+
+  return [columnArgs, setCurrentColumn];
+}
+
+function extractColumnArgs(search: any): ColumnArgs | null {
+  const { col_id, unit_id, project_id, status_code } = search;
+  if (col_id == null) return null;
+  return { col_id, unit_id, project_id, status_code };
+}
+
+export function ColumnNavProvider({ children, ...defaultArgs }) {
+  const value = useColumnNav(defaultArgs as any);
+  return h(ColumnNavCtx.Provider, { value }, children);
+}
+
+export function UnitKeyboardNavigation<T extends BaseUnit>({
+  units,
+}: {
+  units: T[];
+}) {
+  const selectedUnit = useSelectedUnit();
+  const selectUnit = useUnitSelectionDispatch();
+
+  const ix = units.findIndex((unit) => unit.unit_id === selectedUnit?.unit_id);
+
+  const keyMap = {
+    38: ix - 1,
+    40: ix + 1,
+  };
+
+  useKeyHandler(
+    (event) => {
+      const nextIx = keyMap[event.keyCode];
+      if (nextIx == null || nextIx < 0 || nextIx >= units.length) return;
+      selectUnit(units[nextIx], null, null);
+      event.stopPropagation();
+    },
+    [units, ix]
+  );
+  return null;
+}

package/src/units/types.ts

@@ -0,0 +1,26 @@
+import { ColumnAxisType } from "@macrostrat/column-components";
+export interface IUnit {
+  unit_id: number;
+  col_id: number;
+  section_id: number;
+  t_age: number;
+  b_age: number;
+  [x: string]: any;
+}
+
+enum MacrostratAxisKey {
+  AGE = "age",
+  POS = "pos"
+}
+
+function transformAxisType(t: ColumnAxisType): MacrostratAxisKey {
+  switch (t) {
+    case "age":
+      return MacrostratAxisKey.AGE;
+    case "height":
+    case "depth":
+      return MacrostratAxisKey.POS;
+  }
+}
+
+export { MacrostratAxisKey, transformAxisType };

package/src/units/units.scss

@@ -0,0 +1,16 @@
+g.labeled-unit div.unit-name {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+g.labeled-unit span.label-text {
+  text-align: center;
+}
+@media (prefers-color-scheme: dark) {
+  .lithology-column .frame {
+    stroke: #fff;
+  }
+  g.inner pattern image {
+    filter: invert(100%);
+  }
+}