@macrostrat/column-views 1.0.2 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/column-views",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "description": "Data views for Macrostrat stratigraphic columns",
   "type": "module",
   "source": "src/index.ts",
@@ -29,14 +29,24 @@
     "build": "rm -rf dist && parcel build"
   },
   "dependencies": {
-    "@macrostrat/api-types": "^1.0.0",
-    "@macrostrat/column-components": "^1.0.3",
-    "@macrostrat/data-components": "^0.0.6",
+    "@macrostrat/api-types": "^1.1.0",
+    "@macrostrat/color-utils": "^1.1.0",
+    "@macrostrat/column-components": "^1.1.0",
+    "@macrostrat/data-components": "^0.1.0",
     "@macrostrat/hyper": "^3.0.6",
+    "@macrostrat/map-interface": "^1.3.0",
+    "@macrostrat/map-styles": "^1.2.0",
+    "@macrostrat/mapbox-react": "^2.6.0",
+    "@macrostrat/mapbox-utils": "^1.5.0",
     "@macrostrat/stratigraphy-utils": "^1.0.0",
-    "@macrostrat/svg-map-components": "^1.0.3",
+    "@macrostrat/svg-map-components": "^1.0.4",
     "@macrostrat/timescale": "^2.1.1",
-    "@macrostrat/ui-components": "^4.1.2",
+    "@macrostrat/ui-components": "^4.2.0",
+    "@turf/buffer": "^7.2.0",
+    "@turf/centroid": "^7.2.0",
+    "@turf/distance": "^7.2.0",
+    "@turf/line-intersect": "^7.2.0",
+    "@turf/nearest-point-on-line": "^7.2.0",
     "@types/chroma-js": "^3",
     "@types/d3-format": "^3",
     "@types/d3-geo": "^3",
@@ -45,14 +55,19 @@
     "@visx/axis": "^3.12.0",
     "chroma-js": "^3.1.2",
     "classnames": "^2.5.1",
+    "cross-fetch": "^4.1.0",
     "d3-array": "^3.2.4",
     "d3-format": "^3.1.0",
     "d3-geo": "^3.1.1",
     "d3-geo-voronoi": "^2.1.0",
+    "d3-path": "^3.1.0",
+    "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
+    "mapbox-gl": "^2.11.0",
     "react-spring": "^9.7.5",
     "topojson-client": "^3.1.0",
-    "zustand": "^5.0.3"
+    "zustand": "^5.0.3",
+    "zustand-computed": "^2.0.2"
   },
   "peerDependencies": {
     "@blueprintjs/core": "^3.43.0 || ^4.3.0 || ^5.0.0",
@@ -64,6 +79,8 @@
     "directory": "packages/column-views"
   },
   "devDependencies": {
+    "@types/d3-path": "^3",
+    "@types/d3-scale": "^4",
     "parcel": "^2.13.3",
     "postcss": "^8.0.0",
     "postcss-modules": "^6.0.0"

package/src/age-axis.module.sass

@@ -0,0 +1,27 @@
+.age-axis
+  transform: translateX(20px)
+
+  :global(.tick)
+    text
+      text-anchor: middle
+      // TODO: allow font size to vary without this..
+      font-weight: 400 !important
+      transform: rotate(-90deg) translate(8px, -12px)
+      font-size: var(--column-axis-font-size, 0.8rem)
+
+    line
+      stroke-width: 1px !important
+
+.age-axis-column
+  flex-shrink: 0
+
+.age-axis-label
+  writing-mode: vertical-lr
+  transform: rotate(180deg)
+  font-size: var(--column-axis-font-size, 0.8rem)
+  text-align: center
+  position: sticky
+  top: 0
+  max-height: 100vh
+.age-axis-unit
+  color: var(--text-subtle-color)

package/src/age-axis.ts

@@ -1,12 +1,20 @@
-import h from "@macrostrat/hyper";
+import hyper from "@macrostrat/hyper";
 import {
+  SVG,
   ColumnSVG,
   ColumnAxis,
   ColumnContext,
+  ColumnAxisType,
+  AgeAxis,
 } from "@macrostrat/column-components";
 import { useContext } from "react";
-// import "@macrostrat/timescale/dist/timescale.css";
-//
+import styles from "./age-axis.module.sass";
+import { useMacrostratColumnData } from "./data-provider";
+import { Parenthetical } from "@macrostrat/data-components";
+import { PackageScaleLayoutData } from "./prepare-units/composite-scale";
+
+const h = hyper.styled(styles);
+
 const AgeAxisCore = ({ ticks, tickSpacing = 40, showDomain = false }) => {
   const { pixelHeight } = useContext(ColumnContext);
   // A tick roughly every 40 pixels
@@ -20,23 +28,78 @@ const AgeAxisCore = ({ ticks, tickSpacing = 40, showDomain = false }) => {
   ]);
 };
 
-export function AgeAxis(props) {
-  const {
-    ticks,
-    tickSpacing,
-    showLabel = true,
-    paddingV = 10,
-    showDomain,
-    ...rest
-  } = props;
-
-  // Not sure where this extra 5px comes from.
-  return h("div.column.age-axis", [
-    h.if(showLabel)("div.age-axis-label", "Age (Ma)"),
+export function VerticalAxisLabel(props) {
+  const { label = "Age", unit = "Ma", className } = props;
+  return h("div.column-axis-label.age-axis-label", { className }, [
+    label,
+    " ",
+    h.if(unit)(Parenthetical, { className: "age-axis-unit" }, unit),
+  ]);
+}
+
+export function CompositeAgeAxis() {
+  const { axisType, sections, totalHeight } = useMacrostratColumnData();
+
+  const packages = sections.map((section) => {
+    return {
+      key: `section-${section.section_id}`,
+      ...section.scaleInfo,
+    };
+  });
+
+  return h(CompositeAgeAxisCore, {
+    axisType,
+    packages,
+    totalHeight,
+  });
+}
+
+export interface CompositeStratigraphicScaleInfo {
+  axisType: ColumnAxisType;
+  totalHeight: number;
+  packages: PackageScaleLayoutData[];
+}
+
+export function CompositeAgeAxisCore(props: CompositeStratigraphicScaleInfo) {
+  const { axisType, totalHeight, packages } = props;
+
+  if (axisType == ColumnAxisType.ORDINAL) {
+    return null;
+  }
+
+  let axisLabel: string = "Age";
+  let axisUnit = "Ma";
+  if (axisType == ColumnAxisType.DEPTH) {
+    axisLabel = "Depth";
+    axisUnit = "m";
+  } else if (axisType == ColumnAxisType.HEIGHT) {
+    axisLabel = "Height";
+    axisUnit = "m";
+  }
+
+  return h([
+    h(VerticalAxisLabel, {
+      label: axisLabel,
+      unit: axisUnit,
+    }),
     h(
-      ColumnSVG,
-      { paddingV, ...rest },
-      h(AgeAxisCore, { ticks, tickSpacing, showDomain })
+      SVG,
+      {
+        className: "age-axis-column",
+        style: { width: `22px`, height: `${totalHeight}px` },
+        width: 22,
+        height: totalHeight,
+      },
+      packages.map((group, i) => {
+        const { key, scale } = group;
+
+        return h(AgeAxis, {
+          key,
+          className: "age-axis",
+          scale,
+          tickSizeOuter: 3,
+        });
+      })
     ),
   ]);
 }

package/src/age-model-overlay.module.sass

@@ -0,0 +1,11 @@
+.boundary-age-model
+  top: 0
+  left: 0
+  position: absolute
+  width: 100%
+
+.boundary-age-model-surface
+  left: 0
+  right: 0
+  position: absolute
+  border-top: 1px solid lightgreen

package/src/age-model-overlay.ts

@@ -0,0 +1,73 @@
+/** An in-development overlay for a column's age model.
+ *
+ * Age model info:
+ *       {
+ *         "boundary_id": 8049,
+ *         "col_id": 432,
+ *         "section_id": 3104,
+ *         "interval_id": 268,
+ *         "interval_name": "Calymmian",
+ *         "age_bottom": 1600,
+ *         "age_top": 1400,
+ *         "rel_position": 0.85,
+ *         "model_age": 1430,
+ *         "boundary_status": "absolute",
+ *         "boundary_type": "",
+ *         "boundary_position": null,
+ *         "unit_below": 11541,
+ *         "unit_above": 0,
+ *         "ref_id": 217
+ *       },
+ *
+ * */
+
+import hyper from "@macrostrat/hyper";
+import styles from "./age-model-overlay.module.sass";
+import { useAPIResult } from "@macrostrat/ui-components";
+import { useCompositeScale, useMacrostratUnits } from "./data-provider";
+const h = hyper.styled(styles);
+
+interface AgeModelSurface {
+  boundary_id: number;
+  col_id: number;
+  section_id: number;
+  interval_id: number;
+  interval_name: string;
+  age_bottom: number;
+  age_top: number;
+  rel_position: number;
+  model_age: number;
+  boundary_status: "absolute" | "relative" | "modeled";
+  boundary_type: string;
+  boundary_position: null | number;
+  unit_below: number;
+  unit_above: number;
+  ref_id: number;
+}
+
+export function BoundaryAgeModelOverlay() {
+  const col_id = useMacrostratUnits()?.[0]?.col_id;
+  const scale = useCompositeScale();
+
+  const ageModel = useAPIResult(
+    "https://macrostrat.org/api/v2/age_model",
+    { col_id },
+    (res) => res.success.data
+  );
+
+  if (ageModel == null) {
+    return null;
+  }
+
+  return h(
+    "div.boundary-age-model",
+    ageModel.map((surface) => {
+      const height = scale(surface.model_age);
+
+      return h("div.boundary-age-model-surface", {
+        key: surface.boundary_id,
+        style: { top: `${height}px` },
+      });
+    })
+  );
+}

package/src/carbon-isotopes/column.ts

@@ -6,10 +6,10 @@ import {
   ColumnAxis,
   ColumnContext,
 } from "@macrostrat/column-components";
-import { SimpleUnitsColumn, IUnit, ColumnArgs } from "../units";
+import { SimpleUnitsColumn, IUnit } from "../units";
 import { useContext } from "react";
 import { IsotopesColumn } from "./isotopes-column";
-import { MacrostratColumnProvider } from "../providers";
+import { MacrostratColumnProvider } from "../data-provider";
 import styles from "./column.module.sass";
 
 const h = hyper.styled(styles);
@@ -98,6 +98,8 @@ const Section = (props: IColumnProps) => {
   );
 };
 
+type ColumnArgs = any;
+
 function Column(props: Omit<IColumnProps, "data"> & { params: ColumnArgs }) {
   const { params } = props;
   const data: IUnit[] = useAPIResult("/units", {

package/src/carbon-isotopes/core.ts

@@ -3,10 +3,13 @@ import styles from "./column.module.sass";
 
 import { useAPIResult } from "@macrostrat/ui-components";
 import BaseColumn from "./column";
-import { ColumnNavigatorMap, MeasurementsLayer } from "../map";
+import { ColumnNavigationSVGMap, MeasurementsLayer } from "../maps";
+import {
+  MacrostratDataProvider,
+  ColumnArgs,
+  useColumnNav,
+} from "../data-provider";
 import { MeasurementDataProvider } from "./data-provider";
-import { MacrostratAPIProvider } from "../providers";
-import { ColumnArgs, useColumnNav } from "../units";
 import { useMemo } from "react";
 import { FeatureCollection } from "geojson";
 
@@ -25,7 +28,7 @@ const defaultArgs: ColumnArgs = {
 
 export function CarbonIsotopesColumn(columnArgs) {
   return h(
-    MacrostratAPIProvider,
+    MacrostratDataProvider,
     h(MeasurementDataProvider, columnArgs, [
       // @ts-ignore
       h(BaseColumn, { params: columnArgs }),
@@ -53,7 +56,7 @@ function ColumnManager() {
       ]),
       h("div.map-column", [
         h(
-          ColumnNavigatorMap,
+          ColumnNavigationSVGMap,
           {
             currentColumn: columnFeature,
             setCurrentColumn,
@@ -74,5 +77,5 @@ function ColumnManager() {
 }
 
 export function CarbonIsotopesApp() {
-  return h(MacrostratAPIProvider, h(ColumnManager));
+  return h(MacrostratDataProvider, h(ColumnManager));
 }

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

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

package/src/column.module.sass

@@ -1,7 +1,7 @@
 .column-container, body:global(.light-mode) .column-container
   --column-background-color: var(--background-color, #fff)
-  --column-stroke-color: var(--text-color, #000)
-  --column-text-color: var(--text-color, #000)
+  --column-stroke-color: var(--text-emphasized-color, #000)
+  --column-text-color: var(--text-emphasized-color, #000)
 
 /* We have to duplicate the dark mode styles here
   because we want to set them either if the preferred
@@ -11,27 +11,27 @@
 @media (prefers-color-scheme: dark)
   body:not(:global(.light-mode)) .column-container
     --column-background-color: var(--background-color, #000)
-    --column-stroke-color: var(--text-color, #fff)
-    --column-text-color: var(--text-color, #fff)
+    --column-stroke-color: var(--text-emphasized-color, #fff)
+    --column-text-color: var(--text-emphasized-color, #fff)
     color-scheme: dark
     color: var(--column-text-color)
     :global
       .timescale
         color: #000
-      g.inner pattern image
-        filter: invert(80%)
+      svg pattern image
+        filter: invert(100%)
 
 body:global(.dark-mode) .column-container
   --column-background-color: var(--background-color, #000)
-  --column-stroke-color: var(--text-color, #fff)
-  --column-text-color: var(--text-color, #fff)
+  --column-stroke-color: var(--text-emphasized-color, #fff)
+  --column-text-color: var(--text-emphasized-color, #fff)
   color-scheme: dark
   color: var(--column-text-color)
   :global
     .timescale
       color: #000
-    g.inner pattern image
-      filter: invert(80%)
+    svg pattern image
+      filter: invert(100%)
 
 .column-container :global
   .column
@@ -39,24 +39,14 @@ body:global(.dark-mode) .column-container
     flex-direction: row
     position: relative
 
-    .age-axis-label
-      writing-mode: vertical-lr
-      transform: rotate(180deg)
-      font-size: 12px
-      text-align: center
-      position: sticky
-      top: 0
-      max-height: 100vh
-
-    .tick text
-      text-anchor: middle
-      font-weight: 400 !important
-      transform: rotate(-90deg) translate(8px, -12px)
-
-  rect.unit
+  .unit
     stroke: var(--column-stroke-color)
     stroke-width: 1px
 
+  .selection-overlay
+    fill: var(--selection-overlay-color, red)
+    fill-opacity: var(--selection-overlay-opacity, 0.5)
+
   g.lithology-column use.frame
     stroke: var(--column-stroke-color)
     stroke-width: 1.5px !important
@@ -82,17 +72,6 @@ body:global(.dark-mode) .column-container
 .column-container :global .frame rect
   fill: transparent
 
-.column-container :global .labeled-unit .unit-overlay
-  font-size: 10px
-  font-style: italic
-  display: flex
-  align-items: center
-  justify-content: center
-
-.column-container :global .labeled-unit .unit-overlay .unit-label
-  display: block
-  text-shadow: 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color), 0px 0px 4px var(--column-background-color)
-
 .column-container :global .default-buttons
   width: 100%
   margin: 0 -10px
@@ -101,27 +80,57 @@ body:global(.dark-mode) .column-container
   display: flex
   flex-direction: row
 
-.column-container :global div.section :global(.timescale)
-  transform: translateY(0.5)
-
 .column-container :global .section .divisions .unit
   cursor: pointer
 
-.column-container :global rect.selection-overlay
-  fill: rgba(255,0,0,0.5)
-
-.column-container :global div.timescale
-  width: calc(6em + 4px)
+.column-container :global(.timescale)
+  width: calc(calc(1.5em + 1.5px) * var(--timescale-level-count, 4))
   --timescale-level-size: 1.5em
 
+.timescale-column
+  position: relative
+
+.section-main
+  position: relative
+  margin-bottom: -4px
+
+.section-units-container
+  position: relative
+
+.main-column
+  position: relative
+
+.unconformity-labels
+  position: absolute
+  top: 0
+  left: 0
+  pointer-events: none
+
+
 .unconformity
-  height: 0px
-  font-size: 10px
-  font-style: italic
   text-align: center
-  margin-left: calc(6em + 4px + 40px)
+  position: absolute
+  top: 0px
+  display: flex
+  justify-content: center
+  align-items: center
+  font-size: 0.8em
+  &.giga
+    font-weight: 800
+    font-size: 1em
+  &.mega
+    font-weight: 600
+    font-weight: 700
+    font-size: 0.9em
+  &.large
+    font-weight:  600
+  &.small
+    font-weight: 300
+
 
 .unconformity-text
-  transform: translateY(-0.5em)
   width: var(--column-width)
   color: var(--column-stroke-color)
+  --unit-font-style: normal
+
+