@macrostrat/column-views 2.0.1 → 2.1.1

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

@@ -1,3 +1,2 @@
 export * from "./isotopes-column";
 export * from "./data-provider";
-export * from "./core";

package/src/facets/carbon-isotopes/isotopes-column.module.sass

@@ -0,0 +1,31 @@
+.isotopes-column
+  position: relative
+
+.isotopes-scale-axis
+  position: sticky
+  bottom: 0
+  left: 0
+  pointer-events: none
+  margin-top: -45px
+  height: 45px
+
+  svg
+    background-color: var(--column-background-color)
+
+  path, line
+    stroke: var(--column-text-color)
+    fill: none
+
+  text
+    fill: var(--column-text-color)
+
+.scale-lines
+  .tick
+    &.zero
+      line
+        stroke-width: 1px
+        stroke-dasharray: none
+    line
+      stroke: var(--column-text-color)
+      stroke-dasharray: 1 4
+

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

@@ -1,6 +1,5 @@
-import { format } from "d3-format";
-import { useContext } from "react";
-import h from "@macrostrat/hyper";
+import { useMemo } from "react";
+import hyper from "@macrostrat/hyper";
 import classNames from "classnames";
 import { AxisBottom } from "@visx/axis";
 import { useMeasurementData } from "./data-provider";
@@ -12,14 +11,18 @@ import {
 } from "./data-area";
 import { referenceMeasuresToColumn } from "@macrostrat/stratigraphy-utils";
 import {
-  CrossAxisLayoutProvider,
-  ColumnLayoutContext,
-  useColumnDivisions,
+  SVG,
+  ColumnLayoutProvider,
+  useColumnLayout,
 } from "@macrostrat/column-components";
-import { BaseUnit } from "@macrostrat/api-types";
-import { AxisProps } from "@visx/axis/lib/axis/Axis";
+import {
+  useMacrostratColumnData,
+  useMacrostratUnits,
+} from "../../data-provider";
+import styles from "./isotopes-column.module.sass";
+import { scaleLinear } from "d3-scale";
 
-const fmt = format(".1f");
+const h = hyper.styled(styles);
 
 type IsotopesTextProps = {
   datum: any;
@@ -36,64 +39,10 @@ function IsotopeText({ datum, text, ...rest }: IsotopesTextProps) {
       y,
       ...rest,
     },
-    text
+    text,
   );
 }
 
-function ColumnScale(props) {
-  const {
-    label,
-    showAxis = true,
-    nTicks = 6,
-    tickValues: _tickVals,
-    ...rest
-  } = props;
-  const { xScale, pixelHeight, width } = useContext(ColumnLayoutContext);
-
-  const tickValues = _tickVals ?? xScale.ticks(nTicks);
-
-  return h("g.scale.isotope-scale-axis", [
-    h(
-      "g.scale-lines",
-      tickValues.map((value) => {
-        const strokeDasharray = value == 0 ? null : "2 6";
-        return h(ScaleLine, { value, stroke: "#ddd", strokeDasharray });
-      })
-    ),
-    h.if(showAxis)([
-      h("rect.underlay", {
-        x: 0,
-        y: pixelHeight,
-        width,
-        height: 30,
-      }),
-      h(AxisBottom, {
-        scale: xScale,
-        tickLength: 3,
-        tickValues,
-        ...rest,
-        top: pixelHeight,
-        tickLabelProps(tickValue, i) {
-          // Compensate for negative sign
-          let dx;
-          if (tickValue < 0) {
-            dx = -2;
-          }
-          return {
-            dy: "-1px",
-            dx,
-            fontSize: 10,
-            textAnchor: "middle",
-            fill: "#aaa",
-          };
-        },
-        labelOffset: 0,
-        label,
-      }),
-    ]),
-  ]);
-}
-
 interface ScaleLineProps {
   value: number;
   className?: string;
@@ -105,19 +54,27 @@ interface ScaleLineProps {
 
 function ScaleLine(props: ScaleLineProps) {
   let { value, className, labelBottom, labelOffset, ...rest } = props;
-  if (labelBottom == null) {
-    labelBottom = false;
-  }
-  if (labelOffset == null) {
-    labelOffset = 12;
-  }
-  const { xScale, pixelHeight } = useContext(ColumnLayoutContext);
+  const { sections } = useMacrostratColumnData();
+
+  const { xScale } = useColumnLayout();
   const x = xScale(value);
   const transform = `translate(${x})`;
   className = classNames(className, { zero: value === 0 });
   return h("g.tick", { transform, className, key: value }, [
-    h("line", { x0: 0, x1: 0, y0: 0, y1: pixelHeight, ...rest }),
-    h.if(labelBottom)("text", { y: pixelHeight + labelOffset }, `${value}`),
+    h(
+      "g.tick-lines",
+      sections.map((d) => {
+        const { scaleInfo } = d;
+        const y1 = scaleInfo.offset;
+        const y2 = y1 + scaleInfo.pixelHeight;
+        return h("line", {
+          y1,
+          y2,
+          strokeDasharray: props.strokeDasharray,
+          strokeWidth: 1,
+        });
+      }),
+    ),
   ]);
 }
 
@@ -151,16 +108,20 @@ interface IsotopeColumnProps extends IsotopesDatasetProps {
   domain: [number, number];
   transform?: string;
   getHeight?: Function;
+  nTicks?: number;
+  showAxis?: boolean;
 }
 
 function IsotopesDataset(props) {
   const { parameter, color = "dodgerblue" } = props;
-  const divisions: BaseUnit[] = useColumnDivisions() as any;
+  const units = useMacrostratUnits();
   const measures = useMeasurementData() ?? [];
-  const refMeasures = referenceMeasuresToColumn(divisions, measures).filter(
-    (d) => d.measurement == parameter
-  );
-  const points = unnestPoints(refMeasures);
+
+  const points = useMemo(() => {
+    const data = measures.filter((d) => d.measurement === parameter);
+    const refMeasures = referenceMeasuresToColumn(units, data);
+    return unnestPoints(refMeasures);
+  }, [measures, parameter, units]);
 
   return h(
     IsotopesDataArea,
@@ -176,13 +137,13 @@ function IsotopesDataset(props) {
           datum: d,
           fill: color,
         });
-      })
-    )
+      }),
+    ),
   );
 }
 
 function IsotopesColumn(
-  props: IsotopeColumnProps & { children?: React.ReactNode } & AxisProps<any>
+  props: IsotopeColumnProps & { children?: React.ReactNode },
 ) {
   const {
     width = 120,
@@ -193,21 +154,92 @@ function IsotopesColumn(
     children = null,
     transform,
     getHeight,
+    showAxis = true,
+    tickValues: _tickVals,
+    nTicks = 6,
     ...rest
   } = props;
 
+  const { totalHeight } = useMacrostratColumnData();
+
   let _children: any = children;
   if (children == null && parameter != null) {
     _children = h(IsotopesDataset, { parameter, color, getHeight });
   }
 
+  const xScale = useMemo(
+    () => scaleLinear().domain(domain).range([0, width]),
+    [domain, width],
+  );
+
+  const tickValues = _tickVals ?? xScale.ticks(nTicks);
+
+  return h("div.isotopes-column", [
+    h(
+      SVG,
+      {
+        height: totalHeight,
+        innerWidth: width,
+        paddingH: 15,
+      },
+      h(
+        ColumnLayoutProvider,
+        { width, xScale },
+        h("g.isotopes-column", { className: parameter, transform }, [
+          h(ColumnScaleLines, {
+            xScale,
+            tickValues,
+            width,
+            ...rest,
+          }),
+          _children,
+        ]),
+      ),
+    ),
+    h.if(showAxis)(ColumnScaleAxis, {
+      width,
+      label: label ?? parameter,
+      xScale,
+      tickValues,
+      ...rest,
+    }),
+  ]);
+}
+
+function ColumnScaleAxis(props) {
+  const { label, xScale, width, showAxis = true, tickValues, ...rest } = props;
+
+  return h("div.isotopes-scale-axis", [
+    h(
+      SVG,
+      {
+        innerWidth: width,
+        height: 45,
+        paddingH: 15,
+      },
+      [
+        h(AxisBottom, {
+          scale: xScale,
+          tickLength: 5,
+          tickValues,
+          stroke: "var(--column-stroke-color)",
+          tickStroke: "var(--column-stroke-color)",
+          ...rest,
+          label,
+        }),
+      ],
+    ),
+  ]);
+}
+
+function ColumnScaleLines(props) {
+  const { tickValues, xScale } = props;
+
   return h(
-    CrossAxisLayoutProvider,
-    { width, domain },
-    h("g.isotopes-column", { className: parameter, transform }, [
-      h(ColumnScale, { label: label ?? parameter, ...rest }),
-      _children,
-    ])
+    "g.scale-lines",
+    tickValues.map((value) => {
+      return h(ScaleLine, { value });
+    }),
   );
 }
 

package/src/facets/detrital-zircon/index.module.sass

@@ -0,0 +1,22 @@
+
+.depositional-age
+  fill: var(--column-stroke-color)
+  fill-opacity: 0.25
+  stroke-width: 1px
+  stroke: var(--column-stroke-color)
+
+.detrital-group
+  margin: -5px
+  margin-left: -10px
+  margin-bottom: -36px
+
+  &.hide-axis :global .visx-axis
+    tspan, text
+      display: none
+
+.dz-spectra
+  position: relative
+
+.floating-axis
+  position: sticky
+  bottom: 0

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

@@ -0,0 +1,132 @@
+import {
+  DetritalSpectrumPlot,
+  DetritalSeries,
+  usePlotArea,
+} from "@macrostrat/data-components";
+import { 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";
+
+const h = hyper.styled(styles);
+
+interface DetritalItemProps {
+  note: {
+    data: MeasurementInfo[];
+    unit?: IUnit;
+  };
+  spacing?: {
+    below?: number;
+    above?: number;
+  };
+  width?: number;
+  height?: number;
+  color?: string;
+}
+
+function DepositionalAge({ unit }) {
+  const { xScale, height } = usePlotArea();
+
+  const { t_age, b_age } = unit;
+  const x = xScale(t_age);
+  const x1 = xScale(b_age);
+
+  return h("rect.depositional-age", { x, width: x1 - x, y: 0, height });
+}
+
+function DetritalGroup(props: DetritalItemProps) {
+  const { note, width, height, color, spacing } = props;
+  const { data, unit } = note;
+  const { geo_unit } = data[0];
+
+  const _color = color;
+
+  const spaceBelow = spacing?.below ?? 100;
+  const hideAxisLabels = spaceBelow < 60;
+
+  return h(
+    "div.detrital-group",
+    { className: classNames({ "hide-axis": hideAxisLabels }) },
+    [
+      h(
+        DetritalSpectrumPlot,
+        { width, innerHeight: height, showAxisLabels: true, paddingBottom: 40 },
+        [
+          h.if(unit != null)(DepositionalAge, { unit }),
+          data.map((d) => {
+            return h(DetritalSeries, {
+              bandwidth: 20,
+              data: d.measure_value,
+              color: _color,
+            });
+          }),
+        ],
+      ),
+    ],
+  );
+}
+
+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/detrital-zircon/provider.ts

@@ -0,0 +1,51 @@
+import { group } from "d3-array";
+import { useAPIResult } from "@macrostrat/ui-components";
+
+export interface MeasurementInfo {
+  measurement_id: number;
+  measuremeta_id: number;
+  measurement: string;
+  measure_units: string;
+  measure_phase: string;
+  method: string;
+  n: number;
+  ref_id: number;
+  sample_name: string;
+  geo_unit: string;
+  samp_lith: string;
+  samp_lith_id: number;
+  samp_desc: string;
+  samp_age: string;
+  lat: number;
+  lng: number;
+  unit_id: number;
+  unit_rel_pos?: any;
+  col_id: number;
+  strat_name_id: number;
+  match_basis: string;
+  ref: string;
+  measure_value: number[];
+  measure_error: number[];
+  measure_position: any[];
+  measure_n: number[];
+  sample_no: string[];
+  error_units: string;
+}
+
+export function useDetritalMeasurements(columnArgs) {
+  const params = {
+    ...columnArgs,
+    measure_phase: "zircon",
+    response: "long",
+    show_values: true,
+    // Other isotope systems are organized separately
+    measurement: "207Pb-206Pb",
+  };
+  const res: MeasurementInfo[] = useAPIResult(
+    "/measurements",
+    params,
+    columnArgs,
+  );
+  if (res == null) return null;
+  return group(res, (d) => d.unit_id);
+}

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

@@ -0,0 +1,14 @@
+.fossil-collections
+  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/fossils/index.ts

@@ -0,0 +1,120 @@
+import { getUnitHeightRange } from "../../prepare-units";
+import { useMacrostratColumnData } from "../../data-provider";
+import hyper from "@macrostrat/hyper";
+import { PBDBCollection, useFossilData } from "./provider";
+import { useMacrostratUnits } from "../../data-provider";
+import { ColumnNotes } from "../../notes";
+import { useMemo } from "react";
+import type { IUnit } from "../../units";
+import styles from "./index.module.sass";
+
+const h = hyper.styled(styles);
+
+interface FossilItemProps {
+  note: {
+    data: PBDBCollection[];
+    unit?: IUnit;
+  };
+  spacing?: {
+    below?: number;
+    above?: number;
+  };
+  width?: number;
+  height?: number;
+  color?: string;
+}
+
+function FossilInfo(props: FossilItemProps) {
+  const { note, spacing } = props;
+  const { data, unit } = note;
+
+  let d1 = data;
+
+  let tooMany = null;
+  if (data.length > 5) {
+    const n = data.length - 5;
+    d1 = data.slice(0, 5);
+    tooMany = h("li.too-many", `and ${n} more`);
+  }
+
+  return h("ul.fossil-collections", [
+    d1.map((d) => {
+      return h("li.collection", { key: d.cltn_id }, [
+        h(PBDBCollectionLink, { collection: d }),
+      ]);
+    }),
+    tooMany,
+  ]);
+}
+
+function PBDBCollectionLink({ collection }: { collection: PBDBCollection }) {
+  return h(
+    "a.link-id",
+    {
+      href: `https://paleobiodb.org/classic/basicCollectionSearch?collection_no=${collection.cltn_id}`,
+    },
+    collection.cltn_name,
+  );
+}
+
+const matchingUnit = (dz) => (d) => d.unit_id == dz.unit_id;
+
+export function PBDBFossilsColumn({ columnID, color = "magenta" }) {
+  const data = useFossilData({ col_id: columnID });
+  const { axisType, units } = useMacrostratColumnData();
+
+  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[0])),
+        };
+      })
+      .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]);
+
+  const width = 500;
+  const paddingLeft = 40;
+
+  const noteComponent = useMemo(() => {
+    return (props) => {
+      return h(FossilInfo, {
+        color,
+        ...props,
+      });
+    };
+  }, [width, color]);
+
+  if (data == null || units == null) return null;
+
+  return h(
+    "div.dz-spectra",
+    h(ColumnNotes, {
+      width,
+      paddingLeft,
+      notes,
+      noteComponent,
+    }),
+  );
+}