@macrostrat/column-views 2.0.0 → 2.1.0

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;

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