@macrostrat/column-views 1.0.3 → 2.0.1

package/src/correlation-chart/main.module.sass

@@ -0,0 +1,122 @@
+$map-size: 40em
+$map-size-inset: 12em
+
+.page-header
+  display: flex
+  flex-direction: row
+  justify-content: space-between
+  margin-bottom: 1em
+
+.diagram-container
+  flex: 1
+  position: relative
+  min-height: 0
+  display: flex
+
+  &.map-inset
+    .column-selection-map
+      position: absolute
+      top: 1em
+      right: 1em
+      height: $map-size-inset
+      width: $map-size-inset
+      z-index: 1000
+
+  &.map-expanded
+    flex-direction: row
+    gap: 1em
+
+    .assistant
+      width: 40em
+      position: relative
+
+.column-selection-map, .unit-details-panel, .main-area
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3)
+  border-radius: 6px
+
+.column-selection-map
+  overflow: hidden
+
+  .correlation-map
+    height: 100%
+    position: relative
+
+  flex: 1
+  min-height: $map-size-inset
+  max-height: $map-size
+  width: $map-size
+  position: relative
+  top: 0
+  right: 0
+
+.unit-details-panel
+  overflow: scroll
+  background: var(--panel-secondary-background-color)
+  flex: 2
+  padding: 1em
+  max-width: 100%
+
+.main-area
+  position: relative
+  flex: 1
+  min-height: 0
+  min-width: 0
+  overflow: scroll
+  background-color: var(--panel-secondary-background-color)
+
+
+.correlation-diagram
+  padding: 1em
+  padding-left: 0
+  background-color: var(--panel-secondary-background-color)
+  //box-shadow: 0 0 0.3em 0 var(--card-shadow-color)
+  --column-background-color: var(--background-color)
+  --column-stroke-color: var(--text-color)
+
+
+.package
+  position: relative
+
+  .package-overlay
+    position: absolute
+    top: 9px
+    left: 0
+    border: 2px solid red
+
+  .laterally-extensive-unit .strat-col-span
+    position: absolute
+    border: 2px solid red
+
+  .column-container
+    display: flex
+    flex-direction: row
+
+.map-expanded-button
+  position: absolute
+  top: 0.5em
+  right: 0.5em
+  z-index: 100
+
+.main-panel
+  position: relative
+  height: 100%
+  display: flex
+  flex-direction: column
+
+.main-chart
+  position: relative
+
+.correlation-chart-inner
+  display: flex
+  flex-direction: row
+  position: relative
+
+.age-axis-container
+  display: flex
+  flex-direction: row
+  position: sticky
+  left: 0
+  z-index: 100
+  padding-left: 1em
+  padding-right: 2px
+  background-color: var(--panel-secondary-background-color)

package/src/correlation-chart/main.ts

@@ -0,0 +1,305 @@
+/** Correlation chart */
+import {
+  UnitSelectionProvider,
+  UnitKeyboardNavigation,
+  useUnitSelectionStore,
+} from "../units";
+import { UnitSelectionPopover } from "../unit-details";
+import hyper from "@macrostrat/hyper";
+import styles from "./main.module.sass";
+import { useMemo, useRef } from "react";
+import { useInDarkMode } from "@macrostrat/ui-components";
+import { CompositeTimescaleCore } from "../section";
+import classNames from "classnames";
+import {
+  findLaterallyExtensiveUnits,
+  splitStratIntoBoxes,
+  UnitGroupBox,
+  CorrelationChartSettings,
+  buildCorrelationChartData,
+} from "./prepare-data";
+import {
+  CompositeAgeAxisCore,
+  CompositeStratigraphicScaleInfo,
+} from "../age-axis";
+import {
+  ColumnAxisType,
+  ColumnProvider,
+  SVG,
+} from "@macrostrat/column-components";
+import { ColoredUnitComponent } from "../units";
+import { UnitBoxes } from "../units/boxes";
+import { ExtUnit } from "../prepare-units/helpers";
+import { ColumnContainer } from "../column";
+import { ColumnData } from "../data-provider";
+import { BaseUnit } from "@macrostrat/api-types";
+
+const h = hyper.styled(styles);
+
+export interface CorrelationChartProps extends CorrelationChartSettings {
+  data: ColumnData[];
+  columnWidth?: number;
+  columnSpacing?: number;
+  targetUnitHeight?: number;
+  unconformityLabels?: boolean;
+  selectedUnit?: number | null;
+  showUnitPopover?: boolean;
+  onUnitSelected?: (unitID: number | null, unit: BaseUnit | null) => void;
+}
+
+export function CorrelationChart({
+  data,
+  columnSpacing = 0,
+  columnWidth = 130,
+  unconformityLabels = true,
+  showUnitPopover = true,
+  selectedUnit,
+  onUnitSelected,
+  ...scaleProps
+}: CorrelationChartProps) {
+  const defaultScaleProps = {
+    targetUnitHeight: 10,
+    unconformityHeight: 60,
+    minSectionHeight: 60,
+    collapseSmallUnconformities: true,
+  };
+
+  const chartData = useMemo(() => {
+    if (!data) return null;
+    return buildCorrelationChartData(data, {
+      ...defaultScaleProps,
+      ...scaleProps,
+    });
+  }, [data, ...Object.values(scaleProps)]);
+
+  const columnRef = useRef(null);
+
+  // A flattened units array is used to support keyboard navigation
+  const units = useMemo(() => {
+    return data?.map((d0) => d0.units).flat() ?? [];
+  }, [data]);
+
+  const inDarkMode = useInDarkMode();
+
+  const className = classNames({
+    "dark-mode": inDarkMode,
+  });
+
+  if (chartData == null) {
+    return null;
+  }
+
+  const { packages, scaleInfo, nColumns } = chartData;
+
+  const mainWidth = (columnWidth + columnSpacing) * nColumns;
+
+  return h(
+    ColumnContainer,
+    { className: "correlation-diagram" },
+    h(
+      UnitSelectionProvider,
+      { columnRef, selectedUnit, onUnitSelected, units },
+      h(ChartArea, [
+        h(TimescaleColumn, {
+          key: "timescale",
+          scaleInfo,
+          unconformityLabels,
+        }),
+        h("div.main-chart", { ref: columnRef }, [
+          h(
+            SVG,
+            {
+              className,
+              innerWidth: mainWidth,
+              height: scaleInfo.totalHeight,
+              paddingH: 4,
+            },
+            packages.map((pkg, i) => {
+              const { offset, domain, pixelScale, key } = scaleInfo.packages[i];
+              return h(Package, {
+                columnData: pkg.columnData,
+                key,
+                columnWidth,
+                columnSpacing,
+                offset,
+                domain,
+                pixelScale,
+              });
+            })
+          ),
+          h.if(showUnitPopover)(UnitSelectionPopover),
+          // Navigation only works within a column for now...
+          h(UnitKeyboardNavigation, { units }),
+        ]),
+      ])
+    )
+  );
+}
+
+function Package({
+  columnData,
+  columnSpacing,
+  columnWidth,
+  offset,
+  domain,
+  pixelScale,
+}) {
+  return h("g.package", { transform: `translate(0 ${offset})` }, [
+    // Disable the SVG overlay for now
+    //h(PackageSVGOverlay, { data, columnSpacing }),
+    h("g.column-units", [
+      columnData.map((data, i) => {
+        return h(Column, {
+          units: data.units,
+          width: columnWidth,
+          key: i,
+          domain,
+          pixelScale,
+          offsetLeft: i * (columnWidth + columnSpacing),
+        });
+      }),
+    ]),
+  ]);
+}
+
+interface ColumnProps {
+  units: ExtUnit[];
+  unitComponent?: React.FunctionComponent<any>;
+  unitComponentProps?: any;
+  showLabels?: boolean;
+  width?: number;
+  columnWidth?: number;
+  columnSpacing?: number;
+  targetUnitHeight?: number;
+  offsetLeft?: number;
+  domain: [number, number];
+  pixelScale: number;
+}
+
+function Column(props: ColumnProps) {
+  const { units, width = 150, offsetLeft, domain, pixelScale } = props;
+
+  const columnWidth = width;
+
+  if (units.length == 0) {
+    return null;
+  }
+
+  return h(
+    "g.section",
+    {
+      transform: `translate(${offsetLeft} 0)`,
+    },
+    h(
+      ColumnProvider,
+      {
+        // Need to tighten up types here...
+        divisions: units as any[],
+        range: domain,
+        pixelsPerMeter: pixelScale, // Actually pixels per myr
+        axisType: ColumnAxisType.AGE,
+      },
+      h(UnitBoxes, {
+        unitComponent: ColoredUnitComponent,
+        unitComponentProps: {
+          nColumns: 2,
+          width: columnWidth,
+        },
+      })
+    )
+  );
+}
+
+function PackageSVGOverlay({ data, columnWidth = 100, columnSpacing = 0 }) {
+  const { b_age, t_age, bestPixelScale, columnData } = data;
+
+  const width = (columnWidth + columnSpacing) * columnData.length;
+  const height = Math.ceil((b_age - t_age) * bestPixelScale) + 2;
+
+  const extensiveUnits = findLaterallyExtensiveUnits(data);
+
+  const scale = (val: number) => {
+    return (val - t_age) * bestPixelScale;
+  };
+
+  return h(
+    "div.package-overlay",
+    { style: { width, height } },
+    extensiveUnits.map((d) => {
+      return h(LaterallyExtensiveUnit, {
+        data: d,
+        scale,
+        pixelScale: bestPixelScale,
+        columnSpacing,
+      });
+    })
+  );
+}
+
+function LaterallyExtensiveUnit({ data, scale, pixelScale, columnSpacing }) {
+  const { b_age, t_age, strat_name_long, units } = data;
+  // Build boxes by column groups
+  const boxes: UnitGroupBox[] = splitStratIntoBoxes(data);
+
+  return h(
+    "div.laterally-extensive-unit",
+    boxes.map((d, i) => {
+      return h(StratColSpan, {
+        scale,
+        data: d,
+        pixelScale,
+        key: i,
+        columnSpacing,
+      });
+    })
+  );
+}
+
+function StratColSpan({
+  data,
+  scale,
+  columnWidth = 100,
+  columnSpacing = 0,
+  pixelScale = 1,
+}) {
+  const { startCol, endCol, strat_name_long, t_age, b_age } = data;
+  const top = scale(t_age);
+  const left = startCol * (columnWidth + columnSpacing);
+  const width = (endCol - startCol + 1) * (columnWidth + columnSpacing);
+  const height = (b_age - t_age) * pixelScale;
+  return h(
+    "div.strat-col-span",
+    { style: { top, height, width, left } },
+    strat_name_long
+  );
+}
+
+function ChartArea({ children }) {
+  const setSelectedUnit = useUnitSelectionStore(
+    (state) => state.setSelectedUnit
+  );
+
+  return h(
+    "div.correlation-chart-inner",
+    {
+      onClick() {
+        setSelectedUnit(null);
+      },
+    },
+    children
+  );
+}
+
+interface TimescaleColumnProps {
+  scaleInfo: CompositeStratigraphicScaleInfo;
+  showLabels?: boolean;
+  unconformityLabels?: boolean;
+}
+
+function TimescaleColumn(props: TimescaleColumnProps) {
+  const { scaleInfo, unconformityLabels = true } = props;
+  return h("div.column-container.age-axis-container", [
+    h(CompositeAgeAxisCore, { ...scaleInfo }),
+    h(CompositeTimescaleCore, { ...scaleInfo, unconformityLabels }),
+  ]);
+}

package/src/correlation-chart/prepare-data.ts

@@ -0,0 +1,217 @@
+import { CompositeStratigraphicScaleInfo } from "../age-axis";
+import { PackageLayoutData } from "../prepare-units/composite-scale";
+import { ColumnAxisType } from "@macrostrat/column-components";
+import { type ColumnGeoJSONRecord, UnitLong } from "@macrostrat/api-types";
+import {
+  MergeSectionsMode,
+  PrepareColumnOptions,
+  prepareColumnUnits,
+  preprocessUnits,
+} from "../prepare-units";
+import { mergeAgeRanges } from "@macrostrat/stratigraphy-utils";
+
+export interface ColumnIdentifier {
+  col_id: number;
+  col_name: string;
+  project_id: number;
+}
+
+interface ColumnData {
+  columnID: number;
+  units: UnitLong[];
+}
+
+export interface CorrelationChartSettings
+  extends Omit<PrepareColumnOptions, "axisType"> {
+  targetUnitHeight?: number;
+}
+
+export interface CorrelationChartData {
+  packages: MultiColumnPackageData[];
+  scaleInfo: CompositeStratigraphicScaleInfo;
+  nColumns: number;
+}
+
+export interface ColumnIdentifier {
+  col_id: number;
+  col_name: string;
+  project_id: number;
+}
+
+export function buildCorrelationChartData(
+  columns: ColumnData[],
+  settings: CorrelationChartSettings
+): CorrelationChartData {
+  console.log(settings);
+  const {
+    mergeSections = MergeSectionsMode.OVERLAPPING,
+    targetUnitHeight,
+    ...rest
+  } = settings;
+
+  const opts: PrepareColumnOptions = {
+    axisType: ColumnAxisType.AGE,
+    targetUnitHeight,
+    ...rest,
+  };
+
+  if (columns.length == 0) {
+    return null;
+  }
+
+  // Flatten the units array to pretend that all units are in the same column
+  const _units = columns.map((d) => d.units).flat();
+
+  const columnIDs = columns.map((d) => d.columnID);
+
+  const preparedUnits = prepareColumnUnits(_units, opts);
+
+  const { sections, totalHeight } = preparedUnits;
+
+  const scaleInfo: CompositeStratigraphicScaleInfo = {
+    axisType: ColumnAxisType.AGE,
+    totalHeight,
+    packages: sections.map((d) => d.scaleInfo),
+  };
+
+  const packages = sections.map((d) => {
+    return separateColumns(d, columnIDs);
+  });
+
+  return { scaleInfo, packages, nColumns: columnIDs.length };
+}
+
+interface UnitGroup {
+  b_age: number;
+  t_age: number;
+  strat_name_id: number;
+  strat_name_long: string;
+  units: (UnitLong | null)[];
+}
+
+export interface UnitGroupBox extends UnitGroup {
+  units: UnitLong[];
+  startCol: number;
+  endCol: number;
+}
+
+interface ColumnExt {
+  columnID: number;
+  units: UnitLong[];
+}
+
+interface MultiColumnPackageData {
+  columnData: ColumnExt[];
+  bestPixelScale: number;
+  b_age: number;
+  t_age: number;
+}
+
+export function findLaterallyExtensiveUnits(
+  pkg: MultiColumnPackageData
+): UnitGroup[] {
+  const { columnData, b_age, t_age } = pkg;
+  // Group units by strat_name_id
+  const unitIndex = new Map<number, Map<number, UnitLong>>();
+  for (const column of columnData) {
+    const { units } = column;
+    for (const unit of units) {
+      if (unit.strat_name_id == null) continue;
+      if (!unitIndex.has(unit.strat_name_id)) {
+        unitIndex.set(unit.strat_name_id, new Map());
+      }
+      unitIndex.get(unit.strat_name_id).set(column.columnID, unit);
+    }
+  }
+
+  // Prepare grouped units for rendering
+  const unitGroups: UnitGroup[] = [];
+  for (const [strat_name_id, unitIndex0] of unitIndex) {
+    const units = columnData.map((d) => unitIndex0.get(d.columnID) ?? null);
+    const filteredUnits = units.filter((d) => d != null);
+    const [t_age, b_age] = mergeAgeRanges(
+      filteredUnits.map((d) => [d.t_age, d.b_age])
+    );
+    if (filteredUnits.length <= 1) continue;
+
+    unitGroups.push({
+      b_age,
+      t_age,
+      strat_name_id,
+      strat_name_long: filteredUnits[0].strat_name_long,
+      units,
+    });
+  }
+
+  return unitGroups;
+}
+
+export function splitStratIntoBoxes(pkg: UnitGroup): UnitGroupBox[] {
+  const { strat_name_long, strat_name_id, units } = pkg;
+  const boxes: UnitGroupBox[] = [];
+  let currentBox: UnitGroupBox = null;
+  for (let i = 0; i < units.length; i++) {
+    const unit = units[i];
+    if (unit == null) {
+      if (currentBox != null) {
+        boxes.push(currentBox);
+        currentBox = null;
+      }
+      continue;
+    }
+    if (currentBox == null) {
+      currentBox = {
+        startCol: i,
+        endCol: i,
+        strat_name_id,
+        strat_name_long,
+        t_age: unit.t_age,
+        b_age: unit.b_age,
+        units: [],
+      };
+    } else {
+      currentBox.endCol = i;
+    }
+    currentBox.units.push(unit);
+  }
+  return boxes;
+}
+
+function separateColumns(
+  pkg: PackageLayoutData,
+  columnIDs: number[]
+): MultiColumnPackageData {
+  /** Separate columns by col_id */
+  const { units, t_age, b_age } = pkg;
+
+  return {
+    columnData: columnIDs.map((d) => {
+      const u1 = units.filter((unit) => unit.col_id == d);
+      u1.sort((a, b) => a.t_age - b.t_age);
+      return {
+        columnID: d,
+        // Ensure that the units correctly show overlap
+        units: preprocessUnits(
+          {
+            ...pkg,
+            units: u1,
+          },
+          ColumnAxisType.AGE
+        ),
+      };
+    }),
+    bestPixelScale: pkg.scaleInfo.pixelScale,
+    t_age,
+    b_age,
+  };
+}
+
+export function columnGeoJSONRecordToColumnIdentifier(
+  col: ColumnGeoJSONRecord
+): ColumnIdentifier {
+  return {
+    col_id: col.properties.col_id,
+    col_name: col.properties.col_name,
+    project_id: col.properties.project_id,
+  };
+}