@macrostrat/column-views 2.1.4 → 2.2.1

package/src/{units/selection.ts → data-provider/unit-selection.ts}

@@ -10,17 +10,12 @@ 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";
+import type { RectBounds, IUnit } from "../units/types";
 
 type UnitSelectDispatch = (
-  unit: BaseUnit | null,
+  unit: number | BaseUnit | null,
   target: HTMLElement | null,
   event: Event | null,
 ) => void;
@@ -92,7 +87,26 @@ export function UnitSelectionProvider<T extends BaseUnit>(props: {
           });
         }
       },
-      onUnitSelected: (unit: T, target: HTMLElement, event: PointerEvent) => {
+      onUnitSelected: (
+        input: number | T | null,
+        target: HTMLElement = null,
+        event: PointerEvent = null,
+      ) => {
+        if (input == null) {
+          return set({
+            selectedUnit: null,
+            selectedUnitData: null,
+            overlayPosition: null,
+          });
+        }
+
+        let unit: T | null = null;
+        if (typeof input === "number") {
+          unit = props.units.find((u) => u.unit_id === input) || null;
+        } else {
+          unit = input;
+        }
+
         const el = props.columnRef?.current;
         let overlayPosition = null;
 

package/src/facets/base-sample-column.module.sass

@@ -0,0 +1,14 @@
+.truncated-list
+  padding-left: 0.2em
+  font-size: 0.9em
+  list-style: none
+  border-left: 1px solid var(--column-stroke-color)
+  margin: 1px 0
+  li
+    display: inline
+    &:not(:last-child):after
+      content: ", "
+      color: var(--secondary-color)
+  li.too-many
+    color: var(--secondary-color)
+    font-style: italic

package/src/facets/base-sample-column.ts

@@ -0,0 +1,114 @@
+import { useMacrostratColumnData } from "../data-provider";
+import { useCallback, useMemo } from "react";
+import hyper from "@macrostrat/hyper";
+import styles from "./base-sample-column.module.sass";
+import { getUnitHeightRange } from "../prepare-units";
+import { ColumnNotes } from "../notes";
+const h = hyper.styled(styles);
+
+export interface BaseMeasurementsColumnProps<T> {
+  data: T[];
+  noteComponent?: any;
+  width?: number;
+  paddingLeft?: number;
+  className?: string;
+  // TODO: these props are confusing
+  getUnitID?: (d: T) => number | string;
+  matchingUnit?: (dz: T) => (d: any) => boolean;
+}
+
+export function BaseMeasurementsColumn({
+  data,
+  noteComponent,
+  width = 500,
+  paddingLeft = 40,
+  className,
+  getUnitID = (d) => d.unit_id,
+  matchingUnit,
+}: BaseMeasurementsColumnProps<any>) {
+  const { axisType, units } = useMacrostratColumnData();
+
+  const _matchingUnit =
+    matchingUnit ??
+    useCallback(
+      (dz) => {
+        return (d) => {
+          return getUnitID(d) === dz.unit_id;
+        };
+      },
+      [getUnitID],
+    );
+
+  const notes: any[] = useMemo(() => {
+    if (data == null || units == null) return [];
+    let unitRefData = Array.from(data.values())
+      .map((d) => {
+        return {
+          data: d,
+          unit: units.find(_matchingUnit(d)),
+        };
+      })
+      .filter((d) => d.unit != null);
+
+    unitRefData.sort((a, b) => {
+      const v1 = units.indexOf(a.unit);
+      const v2 = units.indexOf(b.unit);
+      return v1 - v2;
+    });
+
+    return unitRefData.map((d) => {
+      const { unit, data } = d;
+      const heightRange = getUnitHeightRange(unit, axisType);
+
+      return {
+        top_height: heightRange[1],
+        height: heightRange[0],
+        data,
+        unit,
+        id: unit.unit_id,
+      };
+    });
+  }, [data, units, matchingUnit]);
+
+  if (data == null || units == null) return null;
+
+  return h(
+    "div",
+    { className },
+    h(ColumnNotes, {
+      width,
+      paddingLeft,
+      notes,
+      noteComponent,
+    }),
+  );
+}
+
+interface TruncatedListProps {
+  data: any[];
+  className?: string;
+  maxItems?: number;
+  itemRenderer?: (props: { data: any }) => any;
+}
+
+export function TruncatedList({
+  data,
+  className,
+  maxItems = 5,
+  itemRenderer = (p) => h("span", p.data),
+}: TruncatedListProps) {
+  let tooMany = null;
+  let d1 = data;
+  if (data.length > maxItems) {
+    const n = data.length - maxItems;
+    d1 = data.slice(0, maxItems);
+    tooMany = h("li.too-many", `and ${n} more`);
+  }
+
+  return h("ul.truncated-list", { className }, [
+    d1.map((d, i) => {
+      return h("li.element", { key: i }, h(itemRenderer, { data: d }));
+    }),
+    tooMany,
+  ]);
+}

package/src/facets/detrital-zircon/index.ts

@@ -3,14 +3,13 @@ import {
   DetritalSeries,
   usePlotArea,
 } from "@macrostrat/data-components";
-import { IUnit } from "../../units/types";
+import type { IUnit } from "../../units/types";
 import hyper from "@macrostrat/hyper";
 import { useDetritalMeasurements, MeasurementInfo } from "./provider";
-import { useMacrostratUnits } from "../../data-provider";
-import { ColumnNotes } from "../../notes";
 import { useMemo } from "react";
 import styles from "./index.module.sass";
 import classNames from "classnames";
+import { BaseMeasurementsColumn } from "../base-sample-column";
 
 const h = hyper.styled(styles);
 
@@ -28,6 +27,35 @@ interface DetritalItemProps {
   color?: string;
 }
 
+const matchingUnit = (dz) => (d) => d.unit_id == dz[0].unit_id;
+
+function DetritalColumn({ columnID, color = "magenta" }) {
+  const data = useDetritalMeasurements({ col_id: columnID });
+
+  const width = 400;
+  const paddingLeft = 40;
+
+  const spectrumWidth = width - paddingLeft;
+
+  const noteComponent = useMemo(() => {
+    return (props) => {
+      return h(DetritalGroup, {
+        width: spectrumWidth,
+        height: 40,
+        color,
+        ...props,
+      });
+    };
+  }, [width, color]);
+
+  return h(BaseMeasurementsColumn, {
+    data,
+    noteComponent,
+    getUnitID: (d) => d[0].unit_id,
+    matchingUnit,
+  });
+}
+
 function DepositionalAge({ unit }) {
   const { xScale, height } = usePlotArea();
 
@@ -41,7 +69,6 @@ function DepositionalAge({ unit }) {
 function DetritalGroup(props: DetritalItemProps) {
   const { note, width, height, color, spacing } = props;
   const { data, unit } = note;
-  const { geo_unit } = data[0];
 
   const _color = color;
 
@@ -70,63 +97,4 @@ function DetritalGroup(props: DetritalItemProps) {
   );
 }
 
-const matchingUnit = (dz) => (d) => d.unit_id == dz[0].unit_id;
-
-function DetritalColumn({ columnID, color = "magenta" }) {
-  const data = useDetritalMeasurements({ col_id: columnID });
-  const units = useMacrostratUnits();
-
-  const notes: any[] = useMemo(() => {
-    if (data == null || units == null) return [];
-    let dzUnitData = Array.from(data.values());
-    dzUnitData.sort((a, b) => {
-      const v1 = units.findIndex(matchingUnit(a));
-      const v2 = units.findIndex(matchingUnit(b));
-      return v1 - v2;
-    });
-
-    const data1 = dzUnitData.map((d) => {
-      const unit = units.find(matchingUnit(d));
-      return {
-        top_height: unit?.t_age,
-        height: unit?.b_age,
-        data: d,
-        unit,
-        id: unit?.unit_id,
-      };
-    });
-
-    return data1.filter((d) => d.unit != null);
-  }, [data, units]);
-
-  const width = 400;
-  const paddingLeft = 40;
-
-  const spectrumWidth = width - paddingLeft;
-
-  const noteComponent = useMemo(() => {
-    return (props) => {
-      return h(DetritalGroup, {
-        width: spectrumWidth,
-        height: 40,
-        color,
-        ...props,
-      });
-    };
-  }, [width, color]);
-
-  if (data == null || units == null) return null;
-
-  return h(
-    "div.dz-spectra",
-    h(ColumnNotes, {
-      width,
-      paddingLeft,
-      notes,
-      noteComponent,
-      deltaConnectorAttachment: 20,
-    }),
-  );
-}
-
 export { DetritalColumn, DetritalGroup };

package/src/facets/fossils/index.module.sass

@@ -1,14 +1,44 @@
-.truncated-list
-  padding-left: 0.2em
-  font-size: 0.9em
-  list-style: none
-  border-left: 1px solid var(--column-stroke-color)
-  margin: 1px 0
-  li
-    display: inline
-    &:not(:last-child):after
-      content: ", "
-      color: var(--secondary-color)
-  li.too-many
-    color: var(--secondary-color)
+.taxa-occurrences-matrix
+  color: var(--column-text-color)
+  line
+    stroke: var(--column-stroke-color)
+    stroke-width: 2px
+  text.taxon-name
+    fill: var(--column-text-color)
+    transform: rotate(90deg) translate(0, 4px)
+    text-anchor: end
+    position: sticky
+    top: 0
+
+.taxon-ranges
+  position: relative
+  &>svg
+    position: absolute
+    height: 100%
+
+.taxon-labels
+  z-index: 10
+  position: absolute
+  width: 100%
+  height: 100%
+  pointer-events: none
+
+  .taxon-label
+    position: absolute
+    height: 100%
+
+  .taxon-label-inner
+    position: sticky
+    top: calc(var(--label-width, 200px) - 10px)
+    transform: rotate(-90deg) translate(10px, 8px)
+    transform-origin: bottom left
+    background-color: var(--column-background-color)
+
+  .taxon-label-text
+
     font-style: italic
+    text-align: left
+    padding: 0 8px
+    max-width: 300px
+    //position: sticky
+    //top: 200px