@macrostrat/column-views 1.0.3 → 2.0.0

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,
+  };
+}

package/src/correlation-chart/stories/correlation-chart.stories.ts

@@ -0,0 +1,192 @@
+import { Meta } from "@storybook/react";
+import "@macrostrat/style-system";
+import { useArgs } from "@storybook/preview-api";
+import { useCallback } from "react";
+import {
+  ColumnCorrelationMap,
+  ColumnCorrelationProvider,
+  fetchUnits,
+  useCorrelationMapStore,
+} from "@macrostrat/column-views";
+import { hyperStyled } from "@macrostrat/hyper";
+
+import styles from "./stories.module.sass";
+import { CorrelationChart, CorrelationChartProps } from "../main";
+import { ErrorBoundary, useAsyncMemo } from "@macrostrat/ui-components";
+import { OverlaysProvider } from "@blueprintjs/core";
+import { parseLineFromString, stringifyLine } from "../hash-string";
+
+const mapboxToken = import.meta.env.VITE_MAPBOX_API_TOKEN;
+
+const h = hyperStyled(styles);
+
+function CorrelationStoryUI({
+  focusedLine,
+  setFocusedLine,
+  columnID,
+  setColumn,
+  selectedUnit,
+  setSelectedUnit,
+  inProcess,
+  projectID,
+  ...rest
+}: any) {
+  return h(
+    ColumnCorrelationProvider,
+    {
+      focusedLine,
+      columns: null,
+      onSelectColumns(cols, line) {
+        setFocusedLine(line);
+      },
+    },
+    h("div.correlation-ui", [
+      h("div.correlation-container", h(CorrelationDiagramWrapper, rest)),
+      h("div.right-column", [
+        h(ColumnCorrelationMap, {
+          accessToken: mapboxToken,
+          className: "correlation-map",
+          //showLogo: false,
+        }),
+      ]),
+    ])
+  );
+}
+
+function CorrelationDiagramWrapper(props: Omit<CorrelationChartProps, "data">) {
+  /** This state management is a bit too complicated, but it does kinda sorta work */
+
+  // Sync focused columns with map
+  const focusedColumns = useCorrelationMapStore(
+    (state) => state.focusedColumns
+  );
+
+  const columnUnits = useAsyncMemo(async () => {
+    const col_ids = focusedColumns.map((col) => col.properties.col_id);
+    return await fetchUnits(col_ids);
+  }, [focusedColumns]);
+
+  return h("div.correlation-diagram", [
+    h(
+      ErrorBoundary,
+      h(OverlaysProvider, [
+        h(CorrelationChart, { data: columnUnits, ...props }),
+      ])
+    ),
+  ]);
+}
+
+export default {
+  title: "Column views/Correlation chart",
+  component: CorrelationStoryUI,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component: "Correlation chart for Macrostrat columns",
+      },
+      story: {
+        inline: false,
+        iframeHeight: 500,
+      },
+    },
+  },
+  args: {
+    focusedLine: "-100,45 -90,50",
+    columnSpacing: 0,
+    columnWidth: 100,
+    collapseSmallUnconformities: false,
+    targetUnitHeight: 20,
+  },
+  argTypes: {
+    selectedUnit: {
+      control: {
+        type: "number",
+      },
+    },
+    t_age: {
+      control: {
+        type: "number",
+      },
+    },
+    b_age: {
+      control: {
+        type: "number",
+      },
+    },
+    columnSpacing: {
+      control: {
+        type: "number",
+      },
+    },
+    columnWidth: {
+      control: {
+        type: "number",
+      },
+    },
+    mergeSections: {
+      options: ["all", "overlapping", null],
+      control: { type: "radio" },
+    },
+    pixelScale: {
+      control: {
+        type: "number",
+      },
+    },
+    collapseSmallUnconformities: {
+      control: {
+        type: "boolean",
+      },
+    },
+    minSectionHeight: {
+      control: {
+        type: "number",
+      },
+    },
+    targetUnitHeight: {
+      control: {
+        type: "number",
+      },
+    },
+    showLabelColumn: {
+      control: {
+        type: "boolean",
+      },
+    },
+    maxInternalColumns: {
+      control: {
+        type: "number",
+      },
+    },
+  },
+} as Meta<typeof CorrelationStoryUI>;
+
+function useCorrelationLine() {
+  const [{ focusedLine, selectedUnit }, updateArgs] = useArgs();
+  const setFocusedLine = (line) => {
+    updateArgs({ focusedLine: stringifyLine(line) });
+  };
+
+  const setSelectedUnit = useCallback(
+    (selectedUnit) => {
+      updateArgs({ selectedUnit });
+    },
+    [updateArgs]
+  );
+
+  return {
+    focusedLine: parseLineFromString(focusedLine),
+    setFocusedLine,
+    selectedUnit,
+    setSelectedUnit,
+  };
+}
+
+function Template(args) {
+  return h(CorrelationStoryUI, {
+    ...args,
+    ...useCorrelationLine(),
+  });
+}
+
+export const Primary = Template.bind({});