@macrostrat/column-views 1.0.0

package/src/column.module.sass

@@ -0,0 +1,114 @@
+.column-container
+  --column-background-color: var(--background-color, #fff)
+  --column-stroke-color: var(--text-color, #000)
+  --column-text-color: var(--text-color, #000)
+
+@media (prefers-color-scheme: dark)
+  .column-container
+    --column-background-color: var(--background-color, #000)
+    --column-stroke-color: var(--text-color, #fff)
+    --column-text-color: var(--text-color, #fff)
+    color-scheme: dark
+
+.column-container :global
+  .column
+    display: flex
+    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
+    stroke: var(--column-stroke-color)
+    stroke-width: 1px
+
+  g.lithology-column use.frame
+    stroke: var(--column-stroke-color)
+    stroke-width: 1.5px !important
+    pointer-events: none
+
+.column-container :global .unit-label
+  text-align: center
+
+.column-container :global .col-note-label
+  font-size: 10px
+  margin-top: 3px
+  padding: 2px
+  padding-left: 3px
+  line-height: 9px
+  border-left: none !important
+
+.column-container :global g.height-range
+  display: none
+
+.column-container :global .note-inner
+  border: none
+
+.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
+
+.column-container :global div.section
+  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)
+  --timescale-level-size: 1.5em
+
+.unconformity
+  height: 0px
+  font-size: 10px
+  font-style: italic
+  text-align: center
+  margin-left: calc(6em + 4px + 40px)
+
+.unconformity-text
+  transform: translateY(-0.5em)
+  width: var(--column-width)
+  color: var(--column-stroke-color)
+
+.column-container.dark-mode :global
+  color: var(--column-text-color)
+
+.column-container.dark-mode :global .timescale
+  color: #000
+
+.column-container.dark-mode :global g.inner pattern image
+  filter: invert(80%)
+

package/src/column.ts

@@ -0,0 +1,185 @@
+import {
+  ColumnAxisType,
+  ColumnLayoutContext,
+  ColumnProvider,
+} 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 styles from "./column.module.sass";
+import {
+  TrackedLabeledUnit,
+  UnitKeyboardNavigation,
+  UnitSelectionProvider,
+  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 {
+  _mergeOverlappingSections,
+  ensureArray,
+  groupUnitsIntoSections,
+} from "./helpers";
+
+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;
+  className?: string;
+  mergeOverlappingSections?: boolean;
+  showLabelColumn?: boolean;
+  columnRef?: RefObject<HTMLElement>;
+  keyboardNavigation?: boolean;
+  showUnitPopover?: boolean;
+  t_age?: number;
+  b_age?: number;
+}
+
+export function Column(props: ColumnProps) {
+  const { showUnitPopover = false, ...rest } = props;
+  const ref = createRef<HTMLElement>();
+  // Selected item position
+  const [position, setPosition] = useState<RectBounds | null>(null);
+
+  if (!showUnitPopover) {
+    return h(_Column, rest);
+  }
+
+  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,
+        });
+      },
+    },
+    h(
+      _Column,
+      { ...rest, columnRef: ref },
+      h(UnitSelectionPopover, { position })
+    )
+  );
+}
+
+function _Column(props: Omit<ColumnProps, "showUnitPopover">) {
+  const {
+    data,
+    unitComponent = UnitComponent,
+    unconformityLabels = true,
+    showLabels = true,
+    width = 300,
+    columnWidth = 150,
+    className: baseClassName,
+    showLabelColumn = true,
+    mergeOverlappingSections = true,
+    keyboardNavigation = false,
+    columnRef,
+    children,
+    ...rest
+  } = 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,
+  });
+
+  // Clear unit selection on click outside of units, if we have a dispatch function
+  const dispatch = useUnitSelectionDispatch();
+
+  return h(
+    "div.column-container",
+    {
+      className,
+      onClick(evt) {
+        dispatch?.(null, null, evt as any);
+      },
+    },
+    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,
+      ]),
+    ])
+  );
+}

package/src/helpers.ts

@@ -0,0 +1,133 @@
+import { BaseUnit, UnitLong } from "@macrostrat/api-types";
+import { IUnit } from "./units";
+import { SectionInfo } from "./section";
+import { group } from "d3-array";
+import {
+  AgeRange,
+  compareAgeRanges,
+  AgeRangeRelationship,
+} from "@macrostrat/stratigraphy-utils";
+
+const dt = 0.001;
+
+function unitsOverlap<T extends BaseUnit>(a: T, b: T) {
+  const rel = compareAgeRanges(unitAgeRange(a), unitAgeRange(b), 0.001);
+  return rel != AgeRangeRelationship.Disjoint;
+}
+
+function unitAgeRange<T extends BaseUnit>(unit: T): AgeRange {
+  return [unit.b_age, unit.t_age];
+}
+
+interface ExtUnit extends UnitLong {
+  bottomOverlap: boolean;
+  overlappingUnits: number[];
+  column?: number;
+}
+
+export function extendDivision(
+  unit: UnitLong,
+  i: number,
+  divisions: UnitLong[]
+): ExtUnit {
+  const overlappingUnits = divisions.filter(
+    (d) => d.unit_id != unit.unit_id && unitsOverlap(unit, d)
+  );
+  let bottomOverlap = false;
+  for (const d of overlappingUnits) {
+    if (d.b_age < unit.b_age + dt) bottomOverlap = true;
+  }
+
+  let column = 0;
+  if (overlappingUnits.length == 1) {
+    column = 1;
+  }
+
+  return {
+    ...unit,
+    bottomOverlap,
+    column,
+    overlappingUnits: overlappingUnits.map((d) => d.unit_id),
+  };
+}
+
+export function preprocessUnits(units: UnitLong[]) {
+  let divisions = units.map(extendDivision);
+  for (let d of divisions) {
+    const overlappingUnits = divisions.filter((u) =>
+      d.overlappingUnits.includes(u.unit_id)
+    );
+
+    const maxNOverlapping = Math.max(
+      Math.max(
+        ...d.overlappingUnits.map(
+          (uid) =>
+            divisions.find((u) => u.unit_id == uid).overlappingUnits.length
+        ),
+        0
+      )
+    );
+
+    //d.maxNOverlapping = maxNOverlapping;
+
+    // Overlapping columns
+    const columns = overlappingUnits.map((d) => d.column);
+
+    if (columns.includes(d.column)) {
+      let col = 0;
+      // Go through columns to find a better index
+      while (columns.includes(col)) {
+        col++;
+      }
+      d.column = col;
+    }
+  }
+
+  return divisions;
+}
+
+export function groupUnitsIntoSections(units: IUnit[]): SectionInfo[] {
+  let groups = Array.from(group(units, (d) => d.section_id));
+  return groups.map(([section_id, units]) => {
+    const t_age = Math.min(...units.map((d) => d.t_age));
+    const b_age = Math.max(...units.map((d) => d.b_age));
+    return { section_id, t_age, b_age, units };
+  });
+}
+
+export function _mergeOverlappingSections(
+  sections: SectionInfo[]
+): SectionInfo[] {
+  /** Columns can have sections that overlap in time. Here, we merge overlapping
+   * sections into a single section to correctly render gap-bound packages.
+   */
+  const [firstSection, ...rest] = sections;
+  const newSections = [firstSection];
+  for (const section of rest) {
+    const lastSection = newSections[newSections.length - 1];
+    if (
+      lastSection.b_age < section.t_age ||
+      lastSection.t_age > section.b_age
+    ) {
+      // No overlap, add the section as normal
+      newSections.push(section);
+      continue;
+    }
+    // Overlap, merge the sections
+    lastSection.section_id = [
+      ...ensureArray(lastSection.section_id),
+      ...ensureArray(section.section_id),
+    ];
+    lastSection.units.push(...section.units);
+    lastSection.b_age = Math.max(lastSection.b_age, section.b_age);
+    lastSection.t_age = Math.min(lastSection.t_age, section.t_age);
+  }
+  return newSections;
+}
+
+export function ensureArray<T>(x: T | T[]): T[] {
+  if (Array.isArray(x)) {
+    return x;
+  }
+  return [x];
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+export * from "./units";
+export * from "./age-axis";
+export * from "./carbon-isotopes";
+export * from "./providers";
+export * from "./helpers";
+export * from "./map";
+export * from "./column";

package/src/map/animated.ts

@@ -0,0 +1,78 @@
+import { useState } from "react";
+import h from "@macrostrat/hyper";
+import { Globe } from "@macrostrat/svg-map-components";
+import { Button } from "@blueprintjs/core";
+import { geoCentroid } from "d3-geo";
+import { LandLayer } from "@macrostrat/svg-map-components";
+import { Columns, CurrentColumn } from "./layers";
+import classNames from "classnames";
+import { useSpring, animated } from "react-spring";
+
+const AnimatedGlobe = animated(Globe);
+
+const MapViewFrame = (props) => {
+  const [expanded, setExpanded] = useState(false);
+  const className = classNames({ expanded }, "context-map");
+  const { children, center, margin = 10 } = props;
+  const baseSize = 250;
+  const sz = expanded ? 450 : baseSize;
+
+  let scale = sz / 2 - margin;
+  if (expanded) {
+    scale *= 3;
+  }
+
+  const targetProps = {
+    width: sz,
+    height: sz,
+    scale,
+  };
+
+  const animationProps = useSpring(targetProps);
+
+  return h(
+    "div.map-placeholder",
+    { style: { width: baseSize, height: baseSize } },
+    [
+      h(animated.div, { className, style: animationProps }, [
+        h(
+          AnimatedGlobe,
+          {
+            ...targetProps,
+            margin,
+            center,
+            allowDrag: expanded,
+            allowZoom: false,
+            keepNorthUp: true,
+            onClick() {
+              setExpanded(true);
+            },
+          },
+          [h(LandLayer), children]
+        ),
+        h.if(expanded)(Button, {
+          className: "close-button",
+          icon: "cross",
+          minimal: true,
+          onClick() {
+            setExpanded(false);
+          },
+          intent: "danger",
+        }),
+      ]),
+    ]
+  );
+};
+
+export const AnimatedMapView = (props) => {
+  const { currentColumn, setCurrentColumn, children, ...rest } = props;
+  const center = geoCentroid(currentColumn);
+
+  return h(MapViewFrame, { center, ...rest }, [
+    h(Columns, { onClick: setCurrentColumn, ...rest }),
+    children,
+    h.if(currentColumn != null)(CurrentColumn, {
+      feature: currentColumn,
+    }),
+  ]);
+};

package/src/map/index.ts

@@ -0,0 +1,86 @@
+import { useRef } from "react";
+import h from "@macrostrat/hyper";
+import { Globe, LandLayer } from "@macrostrat/svg-map-components";
+import { geoCentroid } from "d3-geo";
+import { useElementSize } from "@macrostrat/ui-components";
+import { Columns, CurrentColumn } from "./layers";
+
+function ResizableMapFrame(props) {
+  const { center, children, style, margin, className, allowZoom, ...rest } =
+    props;
+  let { scale } = props;
+  const ref = useRef(null);
+  const sz = useElementSize(ref);
+  const { width, height } = sz ?? { width: 0, height: 0 };
+  if (scale == null) {
+    scale = Math.min(width, height) + 2 * margin;
+  }
+
+  let zoomScaleExtent = null;
+
+  if (allowZoom) {
+    zoomScaleExtent = [
+      0.1 * Math.min(width, height),
+      2 * Math.max(width, height),
+    ];
+  }
+
+  return h("div.map-area", { ref, style, className }, [
+    h(
+      Globe,
+      {
+        width,
+        height,
+        margin,
+        center,
+        allowDrag: true,
+        allowZoom,
+        keepNorthUp: true,
+        zoomScaleExtent,
+        ...rest,
+        scale,
+      },
+      [h(LandLayer), children]
+    ),
+  ]);
+}
+
+const ColumnNavigatorMap = (props) => {
+  const {
+    currentColumn,
+    setCurrentColumn,
+    children,
+    style,
+    margin = 10,
+    scale,
+    className,
+    showInProcessColumns = false,
+    ...rest
+  } = props;
+
+  const columnCenter = geoCentroid(currentColumn);
+
+  return h(
+    ResizableMapFrame,
+    { center: columnCenter, style, margin, scale, className },
+    [
+      children,
+      h(Columns, {
+        onChange: setCurrentColumn,
+        col_id: currentColumn?.properties.col_id,
+        ...rest,
+      }),
+      h.if(showInProcessColumns)(Columns, {
+        onChange: setCurrentColumn,
+        col_id: currentColumn?.properties.col_id,
+        status_code: "in process",
+        color: "rgba(200,150,150, 0.5)",
+        ...rest,
+      }),
+      h.if(currentColumn != null)(CurrentColumn, { feature: currentColumn }),
+    ]
+  );
+};
+
+export * from "./layers";
+export { ColumnNavigatorMap, ResizableMapFrame };