@macrostrat/column-views 2.0.1 → 2.1.1

package/src/prepare-units/index.ts

@@ -17,7 +17,7 @@ import {
   PackageLayoutData,
 } from "./composite-scale";
 import type { SectionInfo } from "./helpers";
-import { agesOverlap, unitsOverlap } from "./utils";
+import { agesOverlap, getUnitHeightRange, unitsOverlap } from "./utils";
 
 export * from "./utils";
 export { preprocessUnits, groupUnitsIntoSections };
@@ -42,7 +42,7 @@ export interface PreparedColumnData extends CompositeColumnData {
 
 export function usePreparedColumnUnits(
   data: UnitLong[],
-  options: PrepareColumnOptions
+  options: PrepareColumnOptions,
 ): PreparedColumnData {
   /** This function wraps and memoizes all preparation steps for converting
    * an array of units from the /units route to a form ready for usage.
@@ -54,7 +54,7 @@ export function usePreparedColumnUnits(
 
 export function prepareColumnUnits(
   units: UnitLong[],
-  options: PrepareColumnOptions
+  options: PrepareColumnOptions,
 ): PreparedColumnData {
   /** Prepare units for rendering into Macrostrat columns */
 
@@ -136,26 +136,14 @@ export function prepareColumnUnits(
     sectionsWithScales = collapseUnconformitiesByPixelHeight(
       sectionsWithScales,
       threshold,
-      options
+      options,
     );
   }
 
-  /** Reconstitute the units so that they are sorted by section.
-   * This is mostly important so that unit keyboard navigation
-   * predictably selects adjacent units.
-   */
-  const units2 = sectionsWithScales.reduce((acc, group) => {
-    const { units } = group;
-    for (const unit of units) {
-      acc.push(unit);
-    }
-    return acc;
-  }, []);
-
   /** Prepare section scale information using groups */
   const { totalHeight, sections: sections2 } = finalizeSectionHeights(
     sectionsWithScales,
-    unconformityHeight
+    unconformityHeight,
   );
 
   /** For each section, find units that are overlapping.
@@ -169,6 +157,18 @@ export function prepareColumnUnits(
     };
   });
 
+  /** Reconstitute the units so that they are sorted by section and properly enhanced.
+   * This is mostly important so that unit keyboard navigation
+   * predictably selects adjacent units.
+   */
+  const units2 = sectionsOut.reduce((acc, group) => {
+    const { units } = group;
+    for (const unit of units) {
+      acc.push(unit);
+    }
+    return acc;
+  }, []);
+
   return {
     units: units2,
     totalHeight,

package/src/prepare-units/utils.ts

@@ -13,13 +13,13 @@ interface UnitsOverlap {
     a: StratigraphicPackage,
     b: StratigraphicPackage,
     axisType?: ColumnAxisType.AGE,
-    tolerance?: number
+    tolerance?: number,
   ): boolean;
   (
     a: BaseUnit,
     b: BaseUnit,
     axisType: ColumnAxisType,
-    tolerance?: number
+    tolerance?: number,
   ): boolean;
 }
 
@@ -27,12 +27,12 @@ export const unitsOverlap: UnitsOverlap = function (
   a,
   b,
   axisType: ColumnAxisType = ColumnAxisType.AGE,
-  tolerance: number = 0.001
+  tolerance: number = 0.001,
 ): boolean {
   const rel = compareAgeRanges(
     getUnitHeightRange(a, axisType),
     getUnitHeightRange(b, axisType),
-    tolerance
+    tolerance,
   );
   return rel != AgeRangeRelationship.Disjoint;
 };
@@ -41,12 +41,12 @@ export const unitsOverlap: UnitsOverlap = function (
 export function agesOverlap(
   a: StratigraphicPackage,
   b: StratigraphicPackage,
-  tolerance: number = dt
+  tolerance: number = dt,
 ): boolean {
   return unitsOverlap(a, b, ColumnAxisType.AGE, tolerance);
 }
 
-interface PossiblyClippedUnit extends BaseUnit {
+export interface PossiblyClippedUnit extends BaseUnit {
   // Internally created clipped positions
   t_clip_pos?: number;
   b_clip_pos?: number;
@@ -54,7 +54,7 @@ interface PossiblyClippedUnit extends BaseUnit {
 
 export function getUnitHeightRange(
   unit: PossiblyClippedUnit,
-  axisType: ColumnAxisType
+  axisType: ColumnAxisType,
 ): [number, number] {
   switch (axisType) {
     case ColumnAxisType.AGE:

package/src/section.ts

@@ -120,9 +120,9 @@ function SectionUnitsColumn(props: SectionSharedProps) {
             width: innerWidth,
             clipUnits,
             maxInternalColumns,
-          } // This unconformity is with the section _above_
+          }, // This unconformity is with the section _above_
         );
-      })
+      }),
     ),
     h.if(unconformityLabels)(UnconformityLabels, {
       width,
@@ -157,7 +157,7 @@ function SectionUnits(props: SectionProps) {
       nColumns: Math.min(
         maxInternalColumns ?? Math.floor(width / 10),
         unitComponentProps?.nColumns ?? Infinity,
-        Math.max(...units.map((d) => d.column)) + 1
+        Math.max(...units.map((d) => d.column)) + 1,
       ),
       //axisType,
     };
@@ -184,8 +184,8 @@ function SectionUnits(props: SectionProps) {
         unitComponent,
         unitComponentProps: _unitComponentProps,
         clipToFrame: clipUnits,
-      })
-    )
+      }),
+    ),
   );
 }
 
@@ -240,9 +240,9 @@ export function CompositeTimescaleCore(props: CompositeTimescaleCoreProps) {
               showAgeAxis: false,
               ageRange: domain as [number, number],
             }),
-          ]
+          ],
         );
-      })
+      }),
     ),
     h.if(unconformityLabels)(UnconformityLabels, {
       width: "100%",
@@ -281,7 +281,7 @@ export function UnconformityLabels(props: {
           top,
         },
       });
-    })
+    }),
   );
 }
 

package/src/unit-details/panel.ts

@@ -15,7 +15,13 @@ import {
   Value,
 } from "@macrostrat/data-components";
 import { useMacrostratData, useMacrostratDefs } from "../data-provider";
-import { Environment, UnitLong, UnitLongFull } from "@macrostrat/api-types";
+import {
+  Environment,
+  UnitLong,
+  UnitLongFull,
+  Lithology,
+  Interval,
+} from "@macrostrat/api-types";
 import { defaultNameFunction } from "../units/names";
 import classNames from "classnames";
 
@@ -35,6 +41,7 @@ export function UnitDetailsPanel({
   actions,
   selectUnit,
   columnUnits,
+  onClickItem,
 }: {
   unit: any;
   onClose?: any;
@@ -45,6 +52,7 @@ export function UnitDetailsPanel({
   lithologyFeatures?: Set<LithologyTagFeature>;
   columnUnits?: UnitLong[];
   selectUnit?: (unitID: number) => void;
+  onClickItem?: (item: any) => void;
 }) {
   const [showJSON, setShowJSON] = useState(false);
 
@@ -52,7 +60,12 @@ export function UnitDetailsPanel({
   if (showJSON) {
     content = h(JSONView, { data: unit, showRoot: false });
   } else {
-    content = h(UnitDetailsContent, { unit, features, lithologyFeatures });
+    content = h(UnitDetailsContent, {
+      unit,
+      features,
+      lithologyFeatures,
+      onClickItem,
+    });
   }
 
   let title = defaultNameFunction(unit);
@@ -136,12 +149,19 @@ function UnitDetailsContent({
     UnitDetailsFeature.AdjacentUnits,
     UnitDetailsFeature.OutcropType,
   ]),
+  onClickItem,
+  getItemHref,
 }: {
   unit: UnitLong;
   selectUnit?: (unitID: number) => void;
   columnUnits?: UnitLong[];
   lithologyFeatures?: Set<LithologyTagFeature>;
   features?: Set<UnitDetailsFeature>;
+  onClickItem?: (
+    event: MouseEvent,
+    item: Lithology | Environment | UnitLong | Interval,
+  ) => void;
+  getItemHref?: (item: Lithology | Environment | UnitLong) => string | null;
 }) {
   const lithMap = useMacrostratDefs("lithologies");
   const envMap = useMacrostratDefs("environments");
@@ -190,7 +210,7 @@ function UnitDetailsContent({
       value: formatRange(unit.b_pos, unit.t_pos),
       children: h(
         Parenthetical,
-        h(Value, { value: thickness, unit: thicknessUnit })
+        h(Value, { value: thickness, unit: thicknessUnit }),
       ),
     });
   }
@@ -215,37 +235,46 @@ function UnitDetailsContent({
       label: "Lithology",
       lithologies,
       features: lithologyFeatures,
+      getItemHref,
+      onClickItem,
     }),
     h(AgeField, { unit }, [
       h(Parenthetical, h(Duration, { value: unit.b_age - unit.t_age })),
-      h(IntervalProportions, { unit }),
+      h(IntervalProportions, {
+        unit,
+        onClickItem,
+      }),
     ]),
-    h(EnvironmentsList, { environments }),
+    h(EnvironmentsList, {
+      environments,
+      onClickItem,
+      getItemHref,
+    }),
     h.if(unit.strat_name_id != null)(
       DataField,
       {
         label: "Stratigraphic name",
       },
-      h("span.strat-name-id", unit.strat_name_id)
+      h("span.strat-name-id", unit.strat_name_id),
     ),
     outcropField,
     h.if(features.has(UnitDetailsFeature.AdjacentUnits))([
       h(
         DataField,
         { label: "Above" },
-        h(UnitIDList, { units: unit.units_above, selectUnit })
+        h(UnitIDList, { units: unit.units_above, selectUnit }),
       ),
       h(
         DataField,
         { label: "Below" },
-        h(UnitIDList, { units: unit.units_below, selectUnit })
+        h(UnitIDList, { units: unit.units_below, selectUnit }),
       ),
     ]),
     colorSwatch,
     h(
       DataField,
       { label: "Source", inline: true },
-      h(BibInfo, { refs: unit.refs })
+      h(BibInfo, { refs: unit.refs }),
     ),
   ]);
 }
@@ -300,7 +329,7 @@ function BibInfo({ refs }) {
 
   return h(
     "ul.refs",
-    refData.map((data, i) => h(Citation, { data, tag: "li", key: i }))
+    refData.map((data, i) => h(Citation, { data, tag: "li", key: i })),
   );
 }
 
@@ -324,7 +353,7 @@ function AgeField({ unit, children }) {
       value: formatRange(b_age, t_age),
       unit: _unit,
     },
-    children
+    children,
   );
 }
 
@@ -346,6 +375,48 @@ function getAgeRange(_unit) {
   return [b_age, t_age, unit];
 }
 
+function getAge(value) {
+  /** Get the age value in Ma, ka, or Ga as appropriate */
+  let unit = "Ma";
+  if (value < 0.8) {
+    unit = "ka";
+    value *= 1000;
+    if (value < 5) {
+      unit = "yr";
+      value *= 1000;
+    }
+  } else if (value > 1000) {
+    unit = "Ga";
+    value /= 1000;
+  }
+
+  return [value, unit];
+}
+
+export function AgeLabel({
+  age,
+  maximumFractionDigits = 2,
+  minimumFractionDigits = 0,
+  className,
+}: {
+  age: number;
+  className?: string;
+  maximumFractionDigits?: number;
+  minimumFractionDigits?: number;
+}) {
+  /** Component to display a single age value with unit conversion from
+   * Ma to ka or Ga as appropriate.
+   */
+  const [value, unit] = getAge(age);
+
+  const _value = value.toLocaleString("en-US", {
+    maximumFractionDigits,
+    minimumFractionDigits,
+  });
+
+  return h(Value, { value: _value, unit, className });
+}
+
 export function Duration({
   value,
   maximumFractionDigits = 2,
@@ -374,7 +445,7 @@ export function Duration({
 
 function enhanceEnvironments(
   environments: Partial<Environment>[],
-  envMap: Map<number, Environment>
+  envMap: Map<number, Environment>,
 ) {
   return environments.map((env) => {
     return {
@@ -386,7 +457,7 @@ function enhanceEnvironments(
 
 function enhanceLithologies(
   lithologies: Partial<UnitLong["lith"]>,
-  lithMap: Map<number, any>
+  lithMap: Map<number, any>,
 ) {
   return lithologies.map((lith) => {
     return {
@@ -422,13 +493,13 @@ function UnitIDList({ units, selectUnit }) {
           },
           key: unit.id,
         },
-        unit
+        unit,
       );
-    })
+    }),
   );
 }
 
-function IntervalProportions({ unit }) {
+function IntervalProportions({ unit, onClickItem }) {
   const i0 = unit.b_int_id;
   const i1 = unit.t_int_id;
   let b_prop = unit.b_prop ?? 0;
@@ -456,14 +527,26 @@ function IntervalProportions({ unit }) {
     p0 = h("span.joint-proportion", [p0, h("span.sep", "to"), p1]);
   }
 
+  const clickable = onClickItem != null;
+
+  const handleClick = (event: MouseEvent) => {
+    if (onClickItem) {
+      onClickItem({ event, data: interval0 });
+    }
+  };
+
   return h("div.interval-proportions", [
     h(IntervalTag, {
+      className: clickable ? "clickable" : "",
+      onClick: clickable ? handleClick : undefined,
       interval: interval0,
       prefix: p0,
     }),
     h.if(i0 != i1)("span.discourage-break", [
       h("span.sep", "to"),
       h(IntervalTag, {
+        className: clickable ? "clickable" : "",
+        onClick: clickable ? handleClick : undefined,
         interval: {
           ...int1,
           id: i1,
@@ -501,7 +584,7 @@ function formatRange(min, max, precision = null) {
 
   return `${formatSignificance(min, precision)}–${formatSignificance(
     max,
-    precision
+    precision,
   )}`;
 }
 

package/src/unit-details/popover.ts

@@ -34,8 +34,8 @@ export function UnitDetailsPopover({
           preventOverflow: { options: { padding: viewportPadding } },
         },
       },
-      h("span.popover-target")
-    )
+      h("span.popover-target"),
+    ),
   );
 }
 
@@ -48,7 +48,7 @@ function InteractionBarrier({ children }) {
         e.stopPropagation();
       },
     },
-    children
+    children,
   );
 }
 
@@ -76,7 +76,7 @@ export function UnitSelectionPopover() {
         unit,
         showLithologyProportions: true,
         className: "legend-panel",
-      })
-    )
+      }),
+    ),
   );
 }

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) {