@macrostrat/column-views 1.0.3 → 2.0.1

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
+
+

package/src/column.ts

@@ -1,185 +1,199 @@
-import {
-  ColumnAxisType,
-  ColumnLayoutContext,
-  ColumnProvider,
-} from "@macrostrat/column-components";
+import { ColumnAxisType } from "@macrostrat/column-components";
 import { hyperStyled } from "@macrostrat/hyper";
 import { useDarkMode } from "@macrostrat/ui-components";
 import classNames from "classnames";
-import { createRef, RefObject, useContext, useMemo, useState } from "react";
+import { RefObject, useRef, HTMLAttributes } from "react";
 import styles from "./column.module.sass";
 import {
-  TrackedLabeledUnit,
-  UnitKeyboardNavigation,
   UnitSelectionProvider,
+  UnitComponent,
+  UnitKeyboardNavigation,
   useUnitSelectionDispatch,
 } from "./units";
-import { SectionInfo } from "./section";
-import { RectBounds } from "./units/boxes";
-import { UnitSelectionPopover } from "./selection-popover";
-import { MacrostratUnitsProvider } from "./store";
-import { IColumnProps, Section } from "./section";
+
+import { ColumnHeightScaleOptions } from "./prepare-units/composite-scale";
+import { UnitSelectionPopover } from "./unit-details";
 import {
-  _mergeOverlappingSections,
-  ensureArray,
-  groupUnitsIntoSections,
-} from "./helpers";
+  MacrostratColumnDataProvider,
+  useMacrostratColumnData,
+} from "./data-provider";
+import {
+  SectionSharedProps,
+  CompositeTimescale,
+  SectionsColumn,
+} from "./section";
+import { CompositeAgeAxis } from "./age-axis";
+import { MergeSectionsMode, usePreparedColumnUnits } from "./prepare-units";
+import { UnitLong } from "@macrostrat/api-types";
+import { NonIdealState } from "@blueprintjs/core";
 
 const h = hyperStyled(styles);
 
-export function UnitComponent({ division, nColumns = 2, ...rest }) {
-  const { width } = useContext(ColumnLayoutContext);
-
-  //const nCols = Math.min(nColumns, division.overlappingUnits.length+1)
-  //console.log(division);
-  return h(TrackedLabeledUnit, {
-    division,
-    ...rest,
-    width: division.overlappingUnits.length > 0 ? width / nColumns : width,
-    x: (division.column * width) / nColumns,
-  });
-}
-
-function Unconformity({ upperUnits = [], lowerUnits = [], style }) {
-  if (upperUnits.length == 0 || lowerUnits.length == 0) {
-    return null;
-  }
-
-  const ageGap = lowerUnits[0].t_age - upperUnits[upperUnits.length - 1].b_age;
-
-  return h("div.unconformity", { style }, [
-    h("div.unconformity-text", `${ageGap.toFixed(1)} Ma`),
-  ]);
-}
-
-function sectionClassName(section: SectionInfo) {
-  return `section-${ensureArray(section.section_id).join("-")}`;
-}
-
-export interface ColumnProps extends IColumnProps {
-  unconformityLabels?: boolean;
+interface BaseColumnProps extends SectionSharedProps {
   className?: string;
-  mergeOverlappingSections?: boolean;
   showLabelColumn?: boolean;
-  columnRef?: RefObject<HTMLElement>;
   keyboardNavigation?: boolean;
-  showUnitPopover?: boolean;
+  showLabels?: boolean;
+  maxInternalColumns?: number;
+  // Timescale properties
+  showTimescale?: boolean;
+  timescaleLevels?: number | [number, number];
+}
+
+export interface ColumnProps extends BaseColumnProps, ColumnHeightScaleOptions {
+  // Macrostrat units
+  units: UnitLong[];
   t_age?: number;
   b_age?: number;
+  mergeSections?: MergeSectionsMode;
+  showUnitPopover?: boolean;
+  selectedUnit?: number | null;
+  onUnitSelected?: (unitID: number | null, unit: any) => void;
+  // Unconformity height in pixels
+  unconformityHeight?: number;
 }
 
 export function Column(props: ColumnProps) {
-  const { showUnitPopover = false, ...rest } = props;
-  const ref = createRef<HTMLElement>();
+  const {
+    showUnitPopover = false,
+    keyboardNavigation = false,
+    mergeSections,
+    onUnitSelected,
+    selectedUnit,
+    children,
+    units: rawUnits,
+    axisType = ColumnAxisType.AGE,
+    t_age,
+    b_age,
+    unconformityHeight = 30,
+    targetUnitHeight = 20,
+    pixelScale,
+    minPixelScale = 0.2,
+    minSectionHeight = 50,
+    collapseSmallUnconformities = true,
+    ...rest
+  } = props;
+  const ref = useRef<HTMLElement>();
   // Selected item position
-  const [position, setPosition] = useState<RectBounds | null>(null);
 
-  if (!showUnitPopover) {
-    return h(_Column, rest);
+  const { sections, units, totalHeight } = usePreparedColumnUnits(rawUnits, {
+    axisType,
+    t_age,
+    b_age,
+    mergeSections,
+    targetUnitHeight,
+    unconformityHeight,
+    pixelScale,
+    minPixelScale,
+    minSectionHeight,
+    collapseSmallUnconformities,
+  });
+
+  if (sections.length === 0) {
+    return h(
+      "div.column-container.empty",
+      h(NonIdealState, {
+        title: "Empty column",
+        description: "No sections found in this column.",
+        icon: "warning-sign",
+      })
+    );
   }
 
   return h(
-    UnitSelectionProvider,
-    {
-      onUnitSelected: (unit, target: SVGElement | HTMLElement | null) => {
-        if (!showUnitPopover) return;
-
-        if (unit == null) {
-          setPosition(null);
-          return;
-        }
-        const el: HTMLElement = ref.current;
-        if (el == null || target == null) return;
-        const rect = el.getBoundingClientRect();
-        const targetRect = target.getBoundingClientRect();
-        setPosition({
-          x: targetRect.left - rect.left,
-          y: targetRect.top - rect.top,
-          width: targetRect.width,
-          height: targetRect.height,
-        });
-      },
-    },
+    MacrostratColumnDataProvider,
+    { units, sections, totalHeight, axisType },
     h(
-      _Column,
-      { ...rest, columnRef: ref },
-      h(UnitSelectionPopover, { position })
+      UnitSelectionProvider,
+      { columnRef: ref, onUnitSelected, selectedUnit, units },
+      h(ColumnInner, { columnRef: ref, ...rest }, [
+        children,
+        h.if(showUnitPopover)(UnitSelectionPopover),
+        h.if(keyboardNavigation)(UnitKeyboardNavigation, { units }),
+      ])
     )
   );
 }
 
-function _Column(props: Omit<ColumnProps, "showUnitPopover">) {
+interface ColumnInnerProps extends BaseColumnProps {
+  columnRef: RefObject<HTMLElement>;
+}
+
+function ColumnInner(props: ColumnInnerProps) {
   const {
-    data,
     unitComponent = UnitComponent,
     unconformityLabels = true,
     showLabels = true,
-    width = 300,
-    columnWidth = 150,
-    className: baseClassName,
-    showLabelColumn = true,
-    mergeOverlappingSections = true,
-    keyboardNavigation = false,
+    width: _width = 300,
+    columnWidth: _columnWidth = 150,
+    showLabelColumn: _showLabelColumn = true,
+    className,
     columnRef,
+    clipUnits = false,
     children,
-    ...rest
+    showTimescale,
+    timescaleLevels,
+    maxInternalColumns,
   } = props;
 
-  const darkMode = useDarkMode();
-  const sectionGroups = useMemo(() => {
-    let res = groupUnitsIntoSections(data);
-    if (mergeOverlappingSections) {
-      res = _mergeOverlappingSections(res);
-    }
-    return res;
-  }, [data, mergeOverlappingSections]);
-
-  const className = classNames(baseClassName, {
-    "dark-mode": darkMode?.isEnabled ?? false,
-  });
+  const { axisType } = useMacrostratColumnData();
 
-  // Clear unit selection on click outside of units, if we have a dispatch function
   const dispatch = useUnitSelectionDispatch();
 
+  let width = _width;
+  let columnWidth = _columnWidth;
+  if (columnWidth > width) {
+    columnWidth = width;
+  }
+  let showLabelColumn = _showLabelColumn;
+  if (columnWidth > width - 10) {
+    showLabelColumn = false;
+  }
+
+  let _showTimescale = showTimescale;
+  if (timescaleLevels !== null) {
+    _showTimescale = true;
+  }
+  _showTimescale = axisType == ColumnAxisType.AGE && _showTimescale;
+
   return h(
-    "div.column-container",
+    ColumnContainer,
     {
-      className,
       onClick(evt) {
         dispatch?.(null, null, evt as any);
       },
+      className,
     },
-    h(MacrostratUnitsProvider, { units: data }, [
-      h("div.column", { ref: columnRef }, [
-        h("div.age-axis-label", "Age (Ma)"),
-        h(
-          "div.main-column",
-          sectionGroups.map((group, i) => {
-            const { section_id: id, units: data } = group;
-            const lastGroup = sectionGroups[i - 1];
-            return h([
-              h.if(unconformityLabels)(Unconformity, {
-                upperUnits: lastGroup?.units,
-                lowerUnits: data,
-                style: { width: showLabels ? columnWidth : width },
-              }),
-              h(`div.section`, { className: sectionClassName(group) }, [
-                h(Section, {
-                  data,
-                  unitComponent,
-                  showLabels,
-                  width,
-                  columnWidth,
-                  showLabelColumn,
-                  ...rest,
-                }),
-              ]),
-            ]);
-          })
-        ),
-        h.if(keyboardNavigation)(UnitKeyboardNavigation, { units: data }),
-        children,
-      ]),
+    h("div.column", { ref: columnRef }, [
+      h(CompositeAgeAxis),
+      h.if(_showTimescale)(CompositeTimescale, { levels: timescaleLevels }),
+      h(SectionsColumn, {
+        unitComponent,
+        showLabels,
+        width,
+        columnWidth,
+        showLabelColumn,
+        clipUnits,
+        unconformityLabels,
+        maxInternalColumns,
+      }),
+      children,
     ])
   );
 }
+
+export interface ColumnContainerProps extends HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+export function ColumnContainer(props: ColumnContainerProps) {
+  const { className, ...rest } = props;
+  const darkMode = useDarkMode();
+
+  return h("div.column-container", {
+    className: classNames(className, {
+      "dark-mode": darkMode?.isEnabled ?? false,
+    }),
+    ...rest,
+  });
+}

package/src/correlation-chart/hash-string.ts

@@ -0,0 +1,57 @@
+import { LineString } from "geojson";
+
+export function parseLineFromString(section: string): LineString | null {
+  /* Section should be specified as space-separated coordinates */
+  if (section == null || typeof section !== "string") {
+    return null;
+  }
+
+  try {
+    let coords = section.split(" ").map(parseCoordinates);
+    return {
+      type: "LineString",
+      coordinates: coords,
+    };
+  } catch (e) {
+    console.warn(e);
+    return null;
+  }
+}
+
+export function stringifyLine(line: LineString | null): string | null {
+  if (
+    line == null ||
+    line.type !== "LineString" ||
+    line.coordinates.length < 2
+  ) {
+    return null;
+  }
+  return line.coordinates
+    .map((coord) => coord.map(stringifyNumber).join(","))
+    .join(" ");
+}
+
+function parseCoordinates(s: string): [number, number] {
+  let [x, y] = s.split(",").map(parseNumber);
+  if (x == null || y == null || isNaN(x) || isNaN(y)) {
+    throw new Error("Invalid coordinate string");
+  }
+  if (x > 180 || x < -180 || y > 90 || y < -90) {
+    throw new Error("Invalid coordinate value");
+  }
+  return [x, y];
+}
+
+function parseNumber(s: string): number {
+  let s1 = s;
+  // For some reason, we sometimes get en-dashes in the hash string
+  if (s1[0] == "−") {
+    s1 = "-" + s1.slice(1);
+  }
+  return Number(s1);
+}
+
+const stringifyNumber = (d) =>
+  d.toLocaleString("en-US", {
+    maximumFractionDigits: 2,
+  });

package/src/correlation-chart/index.ts

@@ -0,0 +1,2 @@
+export * from "./main";
+export * from "./hash-string";