@macrostrat/column-views 1.0.0

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

@@ -0,0 +1,136 @@
+@use "sass:color"
+
+.column-ui
+  width: 100vw
+  height: 100vh
+  overflow-y: scroll
+  display: flex
+  flex-direction: row
+
+.column-view
+  flex-grow: 1
+  padding: 1em
+  max-height: 100vh
+  overflow-y: scroll
+  h1
+    font-size: 1.2em
+    margin-bottom: 0.2em
+    padding-left: 35px
+
+// Column
+.column
+  margin-bottom: 1em
+  display: flex
+  flex-direction: row
+  .age-axis-label
+    writing-mode: vertical-lr
+    transform: rotate(180deg)
+    font-size: 12px
+    text-align: center
+    position: sticky
+    top: 0
+    max-height: 100vh
+
+  :global
+    .tick text
+      text-anchor: middle
+      font-weight: 400 !important
+      transform: rotate(-90deg) translate(8px,-12px)
+
+    rect.unit
+      stroke: black
+      stroke-width: 1px
+
+    g.lithology-column use.frame
+      stroke: black
+      stroke-width: 1.5px !important
+      pointer-events: none
+
+    g.isotopes-column
+      rect.underlay
+        fill: transparent
+
+    .col-note-label
+      font-size: 10px
+      margin-top: 3px
+      padding: 2px 2px 2px 3px
+      line-height: 9px
+      border-left: none !important
+
+    g.height-range
+      display: none
+
+    .note-inner
+      border: none
+
+    .frame rect
+      fill: transparent
+
+
+
+.bp5-dark
+  .column :global
+    .lithology-column .frame
+      stroke: white
+    g.inner
+      rect.unit
+        filter: invert(100%)
+    g.lithology-column use.frame
+      stroke: white
+    .note
+      line, path.col-note-link
+        stroke: white
+    .y.axis .tick line
+      stroke: white
+
+.column-nav
+  position: sticky
+  top: 2.2em
+  h3
+    color: #444
+    margin-bottom: 0.3em
+
+.default-buttons
+  width: 100%
+  margin: 0 -10px
+
+div.map-column
+  width: 600px
+  height: 100vh
+  display: flex
+  flex-direction: column
+
+  :global
+    .map-area
+      flex-grow: 1
+
+    .map-placeholder
+      position: relative
+
+    .macrostrat-map
+      .graticule
+        stroke-dasharray: inherit
+        stroke: color.adjust(#AFE6F0, $lightness: -5%)
+      .neatline
+        stroke-width: 1.5px
+
+    .context-map
+      position: absolute
+      top: 0
+      right: 0
+      width: 250px
+      height: 250px
+      cursor: pointer
+      z-index: 100
+      &.expanded
+        cursor: inherit
+        .columns path:hover
+          stroke: rgba(255,0,0,.4) !important
+
+      .close-button
+        position: absolute
+        top: 1em
+        right: 1em
+
+      .land
+        background-color: rgb(233, 252, 234)

package/src/carbon-isotopes/column.ts

@@ -0,0 +1,131 @@
+import hyper from "@macrostrat/hyper";
+import { group } from "d3-array";
+import { useAPIResult } from "@macrostrat/ui-components";
+import {
+  ColumnSVG,
+  ColumnAxis,
+  ColumnContext,
+} from "@macrostrat/column-components";
+import { SimpleUnitsColumn, IUnit, ColumnArgs } from "../units";
+import { useContext } from "react";
+import { IsotopesColumn } from "./isotopes-column";
+import { MacrostratColumnProvider } from "../providers";
+import styles from "./column.module.sass";
+
+const h = hyper.styled(styles);
+
+interface IColumnProps {
+  data: IUnit[];
+  pixelScale?: number;
+  isOldestColumn: boolean;
+  range?: [number, number];
+}
+
+const AgeAxis = ({ ticks }) => {
+  const { pixelHeight } = useContext(ColumnContext);
+  // A tick roughly every 40 pixels
+  let v = Math.max(Math.round(pixelHeight / 40), 1);
+
+  return h(ColumnAxis, {
+    ticks: v,
+    showDomain: false,
+  });
+};
+
+const Section = (props: IColumnProps) => {
+  // Section with "squishy" time scale
+  const {
+    data,
+    isOldestColumn = true,
+    range = [data[data.length - 1].b_age, data[0].t_age],
+  } = props;
+  let { pixelScale } = props;
+
+  const notesOffset = 100;
+
+  if (!pixelScale) {
+    // Make up a pixel scale
+    const dAge = range[0] - range[1];
+    const targetHeight = 50 * data.length;
+    pixelScale = Math.ceil(targetHeight / dAge);
+  }
+
+  return h(
+    MacrostratColumnProvider,
+    {
+      divisions: data,
+      range,
+      pixelsPerMeter: pixelScale, // Actually pixels per myr
+    },
+    [
+      h(
+        ColumnSVG,
+        {
+          width: 650,
+          padding: 20,
+          paddingTop: 5,
+          paddingBottom: 25,
+        },
+        [
+          h(AgeAxis),
+          h(SimpleUnitsColumn, {
+            width: 400,
+            columnWidth: 90,
+          }),
+          h(IsotopesColumn, {
+            parameter: "D13C",
+            label: "δ¹³C",
+            width: 100,
+            // @ts-ignore
+            nTicks: 4,
+            showAxis: isOldestColumn,
+            transform: "translate(250,0)",
+          }),
+          h(IsotopesColumn, {
+            parameter: "D18O",
+            label: "δ¹⁸O",
+            color: "red",
+            domain: [-40, 0],
+            width: 100,
+            // @ts-ignore
+            nTicks: 4,
+            showAxis: isOldestColumn,
+            transform: "translate(370,0)",
+          }),
+        ]
+      ),
+    ]
+  );
+};
+
+function Column(props: Omit<IColumnProps, "data"> & { params: ColumnArgs }) {
+  const { params } = props;
+  const data: IUnit[] = useAPIResult("/units", {
+    all: true,
+    ...params,
+    response: "long",
+  });
+  if (data == null) return null;
+
+  let sectionGroups = Array.from(group(data, (d) => d.section_id));
+
+  //sectionGroups.sort((a, b) => a.t_age - b.t_age);
+
+  return h("div.column", [
+    h("div.age-axis-label", "Age (Ma)"),
+    h(
+      "div.main-column",
+      sectionGroups.map(([id, values], i) => {
+        return h(`div.section-${id}`, [
+          h(Section, {
+            data: values,
+            isOldestColumn: i == sectionGroups.length - 1,
+          }),
+        ]);
+      })
+    ),
+  ]);
+}
+
+export { Section, IColumnProps };
+export default Column;

package/src/carbon-isotopes/core.ts

@@ -0,0 +1,78 @@
+import hyper from "@macrostrat/hyper";
+import styles from "./column.module.sass";
+
+import { useAPIResult } from "@macrostrat/ui-components";
+import BaseColumn from "./column";
+import { ColumnNavigatorMap, MeasurementsLayer } from "../map";
+import { MeasurementDataProvider } from "./data-provider";
+import { MacrostratAPIProvider } from "../providers";
+import { ColumnArgs, useColumnNav } from "../units";
+import { useMemo } from "react";
+import { FeatureCollection } from "geojson";
+
+const h = hyper.styled(styles);
+
+const ColumnTitle = (props) => {
+  return h.if(props.data != null)("h1", props.data?.col_name);
+};
+
+const defaultArgs: ColumnArgs = {
+  col_id: 2192,
+  //unit_id: null,
+  project_id: 10,
+  status_code: "in process",
+};
+
+export function CarbonIsotopesColumn(columnArgs) {
+  return h(
+    MacrostratAPIProvider,
+    h(MeasurementDataProvider, columnArgs, [
+      // @ts-ignore
+      h(BaseColumn, { params: columnArgs }),
+    ])
+  );
+}
+
+function ColumnManager() {
+  const [columnArgs, setCurrentColumn] = useColumnNav(defaultArgs);
+  const { col_id, ...projectParams } = columnArgs;
+
+  const colParams = useMemo(
+    () => ({ ...columnArgs, format: "geojson" }),
+    [columnArgs]
+  );
+  const res: FeatureCollection = useAPIResult("/columns", colParams);
+  const columnFeature = res?.features[0];
+
+  return h(MeasurementDataProvider, columnArgs, [
+    h("div.column-ui", [
+      h("div.column-view", [
+        h(ColumnTitle, { data: columnFeature?.properties }),
+        // @ts-ignore
+        h(BaseColumn, { params: columnArgs }),
+      ]),
+      h("div.map-column", [
+        h(
+          ColumnNavigatorMap,
+          {
+            currentColumn: columnFeature,
+            setCurrentColumn,
+            margin: 0,
+            ...projectParams,
+          },
+          h(MeasurementsLayer, {
+            ...projectParams,
+            style: {
+              fill: "dodgerblue",
+              stroke: "blue",
+            },
+          })
+        ),
+      ]),
+    ]),
+  ]);
+}
+
+export function CarbonIsotopesApp() {
+  return h(MacrostratAPIProvider, h(ColumnManager));
+}

package/src/carbon-isotopes/data-area.ts

@@ -0,0 +1,96 @@
+import { line } from "d3-shape";
+import { createContext, useContext } from "react";
+import h from "@macrostrat/hyper";
+import { ColumnLayoutContext } from "@macrostrat/column-components";
+
+const inDomain = (scale, num) => {
+  const domain = scale.domain();
+  return domain[0] < num < domain[1];
+};
+
+const createPointLocator = function (opts) {
+  const { xScale, scale, getHeight, ...rest } = opts;
+  return function (d, s = 0) {
+    const height = getHeight(d);
+    if (!inDomain(scale, height)) return null;
+    return [xScale(d.value), scale(height)];
+  };
+};
+
+const IsotopesDataContext = createContext(null);
+
+export interface DataAreaProps {
+  clipY: boolean;
+  parameter: string;
+  corrected: boolean;
+  system: string;
+  children: React.ReactNode;
+  getHeight?: Function;
+}
+
+const IsotopesDataArea = function (props: DataAreaProps) {
+  const { xScale, scale } = useContext(ColumnLayoutContext) ?? {};
+
+  let { corrected, system, children, getHeight, clipY } = props;
+  if (getHeight == null) {
+    getHeight = function (d) {
+      if (d.height == null) {
+        console.log(d);
+      }
+      return d.height;
+    };
+  }
+
+  // Handlers for creating points and lines
+  const pointLocator = createPointLocator({
+    xScale,
+    scale,
+    corrected,
+    system,
+    getHeight,
+  });
+
+  let column = "avg_" + system;
+  if (corrected) {
+    column += "_corr";
+  }
+  const lineLocator = line()
+    .x((d) => xScale(d[column]))
+    // @ts-ignore
+    .y((d) => scale(d.height));
+
+  const value = { pointLocator, lineLocator, corrected, system, clipY };
+  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;
+  const loc = pointLocator(datum);
+  if (loc == null) return null;
+  const [cx, cy] = loc;
+
+  return h("circle", {
+    key: datum.sample_id,
+    cx,
+    cy,
+    r: 2,
+    ...rest,
+  });
+};
+
+const IsotopeDataLine = function (props) {
+  const { values: lineValues, ...rest } = props;
+  const { lineLocator } = useContext(IsotopesDataContext);
+  return h("path", {
+    d: lineLocator(lineValues),
+    fill: "transparent",
+    ...rest,
+  });
+};
+
+const useDataLocator = () => useContext(IsotopesDataContext);
+
+export { IsotopesDataArea, IsotopeDataPoint, IsotopeDataLine, useDataLocator };

package/src/carbon-isotopes/data-provider.ts

@@ -0,0 +1,19 @@
+import h from "@macrostrat/hyper";
+import { useContext, createContext } from "react";
+import { useAPIResult } from "@macrostrat/ui-components";
+
+const MeasurementDataContext = createContext(null);
+
+function MeasurementDataProvider(props) {
+  const { children, ...params } = props;
+  const res = useAPIResult("/measurements", {
+    ...params,
+    show_values: true,
+    response: "long"
+  });
+  return h(MeasurementDataContext.Provider, { value: res, children });
+}
+
+const useMeasurementData = () => useContext(MeasurementDataContext);
+
+export { MeasurementDataProvider, useMeasurementData, MeasurementDataContext };

package/src/carbon-isotopes/index.ts

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

package/src/carbon-isotopes/isotopes-column.ts

@@ -0,0 +1,214 @@
+import { format } from "d3-format";
+import { useContext } from "react";
+import h from "@macrostrat/hyper";
+import classNames from "classnames";
+import { AxisBottom } from "@visx/axis";
+import { useMeasurementData } from "./data-provider";
+
+import {
+  IsotopesDataArea,
+  useDataLocator,
+  IsotopeDataPoint,
+} from "./data-area";
+import { referenceMeasuresToColumn } from "@macrostrat/stratigraphy-utils";
+import {
+  CrossAxisLayoutProvider,
+  ColumnLayoutContext,
+  useColumnDivisions,
+} from "@macrostrat/column-components";
+import { BaseUnit } from "@macrostrat/api-types";
+import { AxisProps } from "@visx/axis/lib/axis/Axis";
+
+const fmt = format(".1f");
+
+type IsotopesTextProps = {
+  datum: any;
+  text: string;
+};
+
+function IsotopeText({ datum, text, ...rest }: IsotopesTextProps) {
+  const { pointLocator } = useDataLocator();
+  const [x, y] = pointLocator(datum);
+  return h(
+    "text",
+    {
+      x,
+      y,
+      ...rest,
+    },
+    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;
+  labelBottom?: boolean;
+  labelOffset?: number;
+  strokeDasharray?: string;
+  stroke?: string | number;
+}
+
+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 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}`),
+  ]);
+}
+
+function unnestPoints(measures) {
+  let points = [];
+  for (const meas of measures) {
+    const vals = meas.measure_value.map((d, i) => {
+      return {
+        value: d,
+        age: meas.measure_age[i],
+        position: meas.measure_position[i],
+        unit_id: meas.unit_id,
+        sample_id: meas.sample_no[i],
+        measurement: meas.measurement,
+      };
+    });
+    Array.prototype.push.apply(points, vals);
+  }
+  return points;
+}
+
+interface IsotopesDatasetProps {
+  color: string;
+  parameter: string;
+}
+
+interface IsotopeColumnProps extends IsotopesDatasetProps {
+  width: number;
+  tickValues?: number[];
+  label: string;
+  domain: [number, number];
+  transform?: string;
+  getHeight?: Function;
+}
+
+function IsotopesDataset(props) {
+  const { parameter, color = "dodgerblue" } = props;
+  const divisions: BaseUnit[] = useColumnDivisions() as any;
+  const measures = useMeasurementData() ?? [];
+  const refMeasures = referenceMeasuresToColumn(divisions, measures).filter(
+    (d) => d.measurement == parameter
+  );
+  const points = unnestPoints(refMeasures);
+
+  return h(
+    IsotopesDataArea,
+    {
+      getHeight(d) {
+        return d.age;
+      },
+    } as any,
+    h(
+      "g.data-points",
+      points.map((d) => {
+        return h(IsotopeDataPoint, {
+          datum: d,
+          fill: color,
+        });
+      })
+    )
+  );
+}
+
+function IsotopesColumn(
+  props: IsotopeColumnProps & { children?: React.ReactNode } & AxisProps<any>
+) {
+  const {
+    width = 120,
+    domain = [-14, 6],
+    parameter,
+    label,
+    color = "dodgerblue",
+    children = null,
+    transform,
+    getHeight,
+    ...rest
+  } = props;
+
+  let _children: any = children;
+  if (children == null && parameter != null) {
+    _children = h(IsotopesDataset, { parameter, color, getHeight });
+  }
+
+  return h(
+    CrossAxisLayoutProvider,
+    { width, domain },
+    h("g.isotopes-column", { className: parameter, transform }, [
+      h(ColumnScale, { label: label ?? parameter, ...rest }),
+      _children,
+    ])
+  );
+}
+
+export { IsotopesColumn, IsotopesDataset };