@macrostrat/column-views 2.4.4 → 3.0.0

package/dist/correlation-chart/hash-string.cjs

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function parseLineFromString(section) {
+  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;
+  }
+}
+function stringifyLine(line) {
+  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) {
+  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) {
+  let s1 = s;
+  if (s1[0] == "−") {
+    s1 = "-" + s1.slice(1);
+  }
+  return Number(s1);
+}
+const stringifyNumber = (d) => d.toLocaleString("en-US", {
+  maximumFractionDigits: 2
+});
+exports.parseLineFromString = parseLineFromString;
+exports.stringifyLine = stringifyLine;
+//# sourceMappingURL=hash-string.cjs.map

package/dist/correlation-chart/hash-string.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hash-string.cjs","sources":["../../src/correlation-chart/hash-string.ts"],"sourcesContent":["import { LineString } from \"geojson\";\n\nexport function parseLineFromString(section: string): LineString | null {\n  /* Section should be specified as space-separated coordinates */\n  if (section == null || typeof section !== \"string\") {\n    return null;\n  }\n\n  try {\n    let coords = section.split(\" \").map(parseCoordinates);\n    return {\n      type: \"LineString\",\n      coordinates: coords,\n    };\n  } catch (e) {\n    console.warn(e);\n    return null;\n  }\n}\n\nexport function stringifyLine(line: LineString | null): string | null {\n  if (\n    line == null ||\n    line.type !== \"LineString\" ||\n    line.coordinates.length < 2\n  ) {\n    return null;\n  }\n  return line.coordinates\n    .map((coord) => coord.map(stringifyNumber).join(\",\"))\n    .join(\" \");\n}\n\nfunction parseCoordinates(s: string): [number, number] {\n  let [x, y] = s.split(\",\").map(parseNumber);\n  if (x == null || y == null || isNaN(x) || isNaN(y)) {\n    throw new Error(\"Invalid coordinate string\");\n  }\n  if (x > 180 || x < -180 || y > 90 || y < -90) {\n    throw new Error(\"Invalid coordinate value\");\n  }\n  return [x, y];\n}\n\nfunction parseNumber(s: string): number {\n  let s1 = s;\n  // For some reason, we sometimes get en-dashes in the hash string\n  if (s1[0] == \"−\") {\n    s1 = \"-\" + s1.slice(1);\n  }\n  return Number(s1);\n}\n\nconst stringifyNumber = (d) =>\n  d.toLocaleString(\"en-US\", {\n    maximumFractionDigits: 2,\n  });\n"],"names":[],"mappings":";;AAEO,SAAS,oBAAoB,SAAoC;AAEtE,MAAI,WAAW,QAAQ,OAAO,YAAY,UAAU;AAClD,WAAO;AAAA,EACT;AAEA,MAAI;AACF,QAAI,SAAS,QAAQ,MAAM,GAAG,EAAE,IAAI,gBAAgB;AACpD,WAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,IAAA;AAAA,EAEjB,SAAS,GAAG;AACV,YAAQ,KAAK,CAAC;AACd,WAAO;AAAA,EACT;AACF;AAEO,SAAS,cAAc,MAAwC;AACpE,MACE,QAAQ,QACR,KAAK,SAAS,gBACd,KAAK,YAAY,SAAS,GAC1B;AACA,WAAO;AAAA,EACT;AACA,SAAO,KAAK,YACT,IAAI,CAAC,UAAU,MAAM,IAAI,eAAe,EAAE,KAAK,GAAG,CAAC,EACnD,KAAK,GAAG;AACb;AAEA,SAAS,iBAAiB,GAA6B;AACrD,MAAI,CAAC,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,EAAE,IAAI,WAAW;AACzC,MAAI,KAAK,QAAQ,KAAK,QAAQ,MAAM,CAAC,KAAK,MAAM,CAAC,GAAG;AAClD,UAAM,IAAI,MAAM,2BAA2B;AAAA,EAC7C;AACA,MAAI,IAAI,OAAO,IAAI,QAAQ,IAAI,MAAM,IAAI,KAAK;AAC5C,UAAM,IAAI,MAAM,0BAA0B;AAAA,EAC5C;AACA,SAAO,CAAC,GAAG,CAAC;AACd;AAEA,SAAS,YAAY,GAAmB;AACtC,MAAI,KAAK;AAET,MAAI,GAAG,CAAC,KAAK,KAAK;AAChB,SAAK,MAAM,GAAG,MAAM,CAAC;AAAA,EACvB;AACA,SAAO,OAAO,EAAE;AAClB;AAEA,MAAM,kBAAkB,CAAC,MACvB,EAAE,eAAe,SAAS;AAAA,EACxB,uBAAuB;AACzB,CAAC;;;"}

package/dist/correlation-chart/hash-string.d.ts

@@ -0,0 +1,3 @@
+import { LineString } from 'geojson';
+export declare function parseLineFromString(section: string): LineString | null;
+export declare function stringifyLine(line: LineString | null): string | null;

package/dist/correlation-chart/hash-string.js

@@ -0,0 +1,46 @@
+function parseLineFromString(section) {
+  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;
+  }
+}
+function stringifyLine(line) {
+  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) {
+  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) {
+  let s1 = s;
+  if (s1[0] == "−") {
+    s1 = "-" + s1.slice(1);
+  }
+  return Number(s1);
+}
+const stringifyNumber = (d) => d.toLocaleString("en-US", {
+  maximumFractionDigits: 2
+});
+export {
+  parseLineFromString,
+  stringifyLine
+};
+//# sourceMappingURL=hash-string.js.map

package/dist/correlation-chart/hash-string.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hash-string.js","sources":["../../src/correlation-chart/hash-string.ts"],"sourcesContent":["import { LineString } from \"geojson\";\n\nexport function parseLineFromString(section: string): LineString | null {\n  /* Section should be specified as space-separated coordinates */\n  if (section == null || typeof section !== \"string\") {\n    return null;\n  }\n\n  try {\n    let coords = section.split(\" \").map(parseCoordinates);\n    return {\n      type: \"LineString\",\n      coordinates: coords,\n    };\n  } catch (e) {\n    console.warn(e);\n    return null;\n  }\n}\n\nexport function stringifyLine(line: LineString | null): string | null {\n  if (\n    line == null ||\n    line.type !== \"LineString\" ||\n    line.coordinates.length < 2\n  ) {\n    return null;\n  }\n  return line.coordinates\n    .map((coord) => coord.map(stringifyNumber).join(\",\"))\n    .join(\" \");\n}\n\nfunction parseCoordinates(s: string): [number, number] {\n  let [x, y] = s.split(\",\").map(parseNumber);\n  if (x == null || y == null || isNaN(x) || isNaN(y)) {\n    throw new Error(\"Invalid coordinate string\");\n  }\n  if (x > 180 || x < -180 || y > 90 || y < -90) {\n    throw new Error(\"Invalid coordinate value\");\n  }\n  return [x, y];\n}\n\nfunction parseNumber(s: string): number {\n  let s1 = s;\n  // For some reason, we sometimes get en-dashes in the hash string\n  if (s1[0] == \"−\") {\n    s1 = \"-\" + s1.slice(1);\n  }\n  return Number(s1);\n}\n\nconst stringifyNumber = (d) =>\n  d.toLocaleString(\"en-US\", {\n    maximumFractionDigits: 2,\n  });\n"],"names":[],"mappings":"AAEO,SAAS,oBAAoB,SAAoC;AAEtE,MAAI,WAAW,QAAQ,OAAO,YAAY,UAAU;AAClD,WAAO;AAAA,EACT;AAEA,MAAI;AACF,QAAI,SAAS,QAAQ,MAAM,GAAG,EAAE,IAAI,gBAAgB;AACpD,WAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,IAAA;AAAA,EAEjB,SAAS,GAAG;AACV,YAAQ,KAAK,CAAC;AACd,WAAO;AAAA,EACT;AACF;AAEO,SAAS,cAAc,MAAwC;AACpE,MACE,QAAQ,QACR,KAAK,SAAS,gBACd,KAAK,YAAY,SAAS,GAC1B;AACA,WAAO;AAAA,EACT;AACA,SAAO,KAAK,YACT,IAAI,CAAC,UAAU,MAAM,IAAI,eAAe,EAAE,KAAK,GAAG,CAAC,EACnD,KAAK,GAAG;AACb;AAEA,SAAS,iBAAiB,GAA6B;AACrD,MAAI,CAAC,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,EAAE,IAAI,WAAW;AACzC,MAAI,KAAK,QAAQ,KAAK,QAAQ,MAAM,CAAC,KAAK,MAAM,CAAC,GAAG;AAClD,UAAM,IAAI,MAAM,2BAA2B;AAAA,EAC7C;AACA,MAAI,IAAI,OAAO,IAAI,QAAQ,IAAI,MAAM,IAAI,KAAK;AAC5C,UAAM,IAAI,MAAM,0BAA0B;AAAA,EAC5C;AACA,SAAO,CAAC,GAAG,CAAC;AACd;AAEA,SAAS,YAAY,GAAmB;AACtC,MAAI,KAAK;AAET,MAAI,GAAG,CAAC,KAAK,KAAK;AAChB,SAAK,MAAM,GAAG,MAAM,CAAC;AAAA,EACvB;AACA,SAAO,OAAO,EAAE;AAClB;AAEA,MAAM,kBAAkB,CAAC,MACvB,EAAE,eAAe,SAAS;AAAA,EACxB,uBAAuB;AACzB,CAAC;"}

package/dist/correlation-chart/index.d.ts

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

package/dist/correlation-chart/main.cjs

@@ -0,0 +1,202 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const h$1 = require("@macrostrat/hyper");
+const main_module = require("./main.module.sass.cjs");
+const React = require("react");
+const uiComponents = require("@macrostrat/ui-components");
+const section = require("../section.cjs");
+const classNames = require("classnames");
+const prepareData = require("./prepare-data.cjs");
+const ageAxis = require("../age-axis.cjs");
+const columnComponents = require("@macrostrat/column-components");
+const index = require("../units/index.cjs");
+const boxes = require("../units/boxes.cjs");
+const column = require("../column.cjs");
+const store = require("../data-provider/store.cjs");
+const panel = require("../unit-details/panel.cjs");
+const popover = require("../unit-details/popover.cjs");
+const unitSelection = require("../data-provider/unit-selection.cjs");
+const h = h$1.styled(main_module.default);
+function MainChartArea({ children }) {
+  const columnRef = unitSelection.useColumnRef();
+  return h("div.main-chart", { ref: columnRef }, children);
+}
+const unitPopoverFeatures = /* @__PURE__ */ new Set([
+  panel.UnitDetailsFeature.AdjacentUnits,
+  panel.UnitDetailsFeature.OutcropType,
+  panel.UnitDetailsFeature.DepthRange,
+  panel.UnitDetailsFeature.ColumnName
+]);
+function CorrelationChart({
+  data,
+  columnSpacing = 0,
+  columnWidth = 130,
+  unconformityLabels = true,
+  showUnitPopover = true,
+  selectedUnit,
+  onUnitSelected,
+  unitComponent,
+  ...scaleProps
+}) {
+  const defaultScaleProps = {
+    targetUnitHeight: 10,
+    unconformityHeight: 60,
+    minSectionHeight: 60,
+    collapseSmallUnconformities: true
+  };
+  const chartData = React.useMemo(() => {
+    if (!data) return null;
+    return prepareData.buildCorrelationChartData(data, {
+      ...defaultScaleProps,
+      ...scaleProps
+    });
+  }, [data, ...Object.values(scaleProps)]);
+  const units = React.useMemo(() => {
+    return data?.map((d0) => d0.units).flat() ?? [];
+  }, [data]);
+  const inDarkMode = uiComponents.useInDarkMode();
+  const className = classNames({
+    "dark-mode": inDarkMode
+  });
+  if (chartData == null) {
+    return null;
+  }
+  const { packages, scaleInfo, nColumns } = chartData;
+  const mainWidth = (columnWidth + columnSpacing) * nColumns;
+  return h(
+    column.ColumnContainer,
+    { className: "correlation-diagram" },
+    h(
+      store.UnitSelectionProvider,
+      { selectedUnit, onUnitSelected, units },
+      h(ChartArea, [
+        h(TimescaleColumn, {
+          key: "timescale",
+          scaleInfo,
+          unconformityLabels
+        }),
+        h(MainChartArea, [
+          h(
+            columnComponents.SVG,
+            {
+              className,
+              innerWidth: mainWidth,
+              height: scaleInfo.totalHeight,
+              paddingH: 4
+            },
+            packages.map((pkg, i) => {
+              const { offset, domain, pixelScale, scale, key } = scaleInfo.packages[i];
+              return h(Package, {
+                columnData: pkg.columnData,
+                key,
+                columnWidth,
+                columnSpacing,
+                offset,
+                domain,
+                pixelScale,
+                scale,
+                unitComponent
+              });
+            })
+          ),
+          h.if(showUnitPopover)(popover.UnitSelectionPopover, {
+            features: unitPopoverFeatures
+          }),
+          // Navigation only works within a column for now...
+          h(unitSelection.UnitKeyboardNavigation, { columnData: data })
+        ])
+      ])
+    )
+  );
+}
+function Package({
+  columnData,
+  columnSpacing,
+  columnWidth,
+  unitComponent,
+  offset,
+  domain,
+  pixelScale,
+  scale
+}) {
+  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,
+          unitComponent,
+          width: columnWidth,
+          key: i,
+          domain,
+          pixelScale,
+          scale,
+          offsetLeft: i * (columnWidth + columnSpacing)
+        });
+      })
+    ])
+  ]);
+}
+function Column(props) {
+  const {
+    units,
+    width = 150,
+    offsetLeft,
+    domain,
+    pixelScale,
+    scale,
+    unitComponent = index.ColoredUnitComponent
+  } = props;
+  const columnWidth = width;
+  if (units.length == 0) {
+    return null;
+  }
+  return h(
+    "g.section",
+    {
+      transform: `translate(${offsetLeft} 0)`
+    },
+    h(
+      columnComponents.ColumnProvider,
+      {
+        // Need to tighten up types here...
+        divisions: units,
+        range: domain,
+        scale,
+        pixelsPerMeter: pixelScale,
+        // Actually pixels per myr
+        axisType: columnComponents.ColumnAxisType.AGE
+      },
+      h(boxes.UnitBoxes, {
+        unitComponent,
+        unitComponentProps: {
+          nColumns: 2,
+          width: columnWidth,
+          showLabel: false
+        }
+      })
+    )
+  );
+}
+function ChartArea({ children }) {
+  const setSelectedUnit = unitSelection.useUnitSelectionDispatch();
+  return h(
+    "div.correlation-chart-inner",
+    {
+      onClick() {
+        setSelectedUnit(null, null);
+      }
+    },
+    children
+  );
+}
+function TimescaleColumn(props) {
+  const { scaleInfo, unconformityLabels = true } = props;
+  return h("div.column-container.age-axis-container", [
+    h(ageAxis.CompositeAgeAxisCore, { ...scaleInfo }),
+    h(section.CompositeTimescaleCore, { ...scaleInfo, unconformityLabels })
+  ]);
+}
+exports.CorrelationChart = CorrelationChart;
+//# sourceMappingURL=main.cjs.map

package/dist/correlation-chart/main.cjs.map

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

package/dist/correlation-chart/main.d.ts

@@ -0,0 +1,15 @@
+import { CorrelationChartSettings } from './prepare-data';
+import { ColumnData } from '../data-provider';
+import { BaseUnit } from '@macrostrat/api-types';
+export interface CorrelationChartProps extends CorrelationChartSettings {
+    data: ColumnData[];
+    columnWidth?: number;
+    columnSpacing?: number;
+    targetUnitHeight?: number;
+    unconformityLabels?: boolean;
+    selectedUnit?: number | null;
+    showUnitPopover?: boolean;
+    unitComponent?: any;
+    onUnitSelected?: (unitID: number | null, unit: BaseUnit | null) => void;
+}
+export declare function CorrelationChart({ data, columnSpacing, columnWidth, unconformityLabels, showUnitPopover, selectedUnit, onUnitSelected, unitComponent, ...scaleProps }: CorrelationChartProps): import('react').FunctionComponentElement<import('..').ColumnContainerProps>;

package/dist/correlation-chart/main.js

@@ -0,0 +1,202 @@
+import h$1 from "@macrostrat/hyper";
+import styles from "./main.module.sass.js";
+import { useMemo } from "react";
+import { useInDarkMode } from "@macrostrat/ui-components";
+import { CompositeTimescaleCore } from "../section.js";
+import classNames from "classnames";
+import { buildCorrelationChartData } from "./prepare-data.js";
+import { CompositeAgeAxisCore } from "../age-axis.js";
+import { SVG, ColumnProvider, ColumnAxisType } from "@macrostrat/column-components";
+import { ColoredUnitComponent } from "../units/index.js";
+import { UnitBoxes } from "../units/boxes.js";
+import { ColumnContainer } from "../column.js";
+import { UnitSelectionProvider } from "../data-provider/store.js";
+import { UnitDetailsFeature } from "../unit-details/panel.js";
+import { UnitSelectionPopover } from "../unit-details/popover.js";
+import { UnitKeyboardNavigation, useUnitSelectionDispatch, useColumnRef } from "../data-provider/unit-selection.js";
+const h = h$1.styled(styles);
+function MainChartArea({ children }) {
+  const columnRef = useColumnRef();
+  return h("div.main-chart", { ref: columnRef }, children);
+}
+const unitPopoverFeatures = /* @__PURE__ */ new Set([
+  UnitDetailsFeature.AdjacentUnits,
+  UnitDetailsFeature.OutcropType,
+  UnitDetailsFeature.DepthRange,
+  UnitDetailsFeature.ColumnName
+]);
+function CorrelationChart({
+  data,
+  columnSpacing = 0,
+  columnWidth = 130,
+  unconformityLabels = true,
+  showUnitPopover = true,
+  selectedUnit,
+  onUnitSelected,
+  unitComponent,
+  ...scaleProps
+}) {
+  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 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,
+      { selectedUnit, onUnitSelected, units },
+      h(ChartArea, [
+        h(TimescaleColumn, {
+          key: "timescale",
+          scaleInfo,
+          unconformityLabels
+        }),
+        h(MainChartArea, [
+          h(
+            SVG,
+            {
+              className,
+              innerWidth: mainWidth,
+              height: scaleInfo.totalHeight,
+              paddingH: 4
+            },
+            packages.map((pkg, i) => {
+              const { offset, domain, pixelScale, scale, key } = scaleInfo.packages[i];
+              return h(Package, {
+                columnData: pkg.columnData,
+                key,
+                columnWidth,
+                columnSpacing,
+                offset,
+                domain,
+                pixelScale,
+                scale,
+                unitComponent
+              });
+            })
+          ),
+          h.if(showUnitPopover)(UnitSelectionPopover, {
+            features: unitPopoverFeatures
+          }),
+          // Navigation only works within a column for now...
+          h(UnitKeyboardNavigation, { columnData: data })
+        ])
+      ])
+    )
+  );
+}
+function Package({
+  columnData,
+  columnSpacing,
+  columnWidth,
+  unitComponent,
+  offset,
+  domain,
+  pixelScale,
+  scale
+}) {
+  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,
+          unitComponent,
+          width: columnWidth,
+          key: i,
+          domain,
+          pixelScale,
+          scale,
+          offsetLeft: i * (columnWidth + columnSpacing)
+        });
+      })
+    ])
+  ]);
+}
+function Column(props) {
+  const {
+    units,
+    width = 150,
+    offsetLeft,
+    domain,
+    pixelScale,
+    scale,
+    unitComponent = ColoredUnitComponent
+  } = 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,
+        range: domain,
+        scale,
+        pixelsPerMeter: pixelScale,
+        // Actually pixels per myr
+        axisType: ColumnAxisType.AGE
+      },
+      h(UnitBoxes, {
+        unitComponent,
+        unitComponentProps: {
+          nColumns: 2,
+          width: columnWidth,
+          showLabel: false
+        }
+      })
+    )
+  );
+}
+function ChartArea({ children }) {
+  const setSelectedUnit = useUnitSelectionDispatch();
+  return h(
+    "div.correlation-chart-inner",
+    {
+      onClick() {
+        setSelectedUnit(null, null);
+      }
+    },
+    children
+  );
+}
+function TimescaleColumn(props) {
+  const { scaleInfo, unconformityLabels = true } = props;
+  return h("div.column-container.age-axis-container", [
+    h(CompositeAgeAxisCore, { ...scaleInfo }),
+    h(CompositeTimescaleCore, { ...scaleInfo, unconformityLabels })
+  ]);
+}
+export {
+  CorrelationChart
+};
+//# sourceMappingURL=main.js.map

package/dist/correlation-chart/main.js.map

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

package/dist/correlation-chart/main.module.sass.cjs

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const assistant = "_assistant_jnc7r_26";
+const styles = {
+  "page-header": "_page-header_jnc7r_1",
+  "diagram-container": "_diagram-container_jnc7r_8",
+  "map-inset": "_map-inset_jnc7r_14",
+  "column-selection-map": "_column-selection-map_jnc7r_14",
+  "map-expanded": "_map-expanded_jnc7r_22",
+  assistant,
+  "unit-details-panel": "_unit-details-panel_jnc7r_31",
+  "main-area": "_main-area_jnc7r_31",
+  "correlation-map": "_correlation-map_jnc7r_46",
+  "correlation-diagram": "_correlation-diagram_jnc7r_68",
+  "package": "_package_jnc7r_76",
+  "package-overlay": "_package-overlay_jnc7r_79",
+  "laterally-extensive-unit": "_laterally-extensive-unit_jnc7r_85",
+  "strat-col-span": "_strat-col-span_jnc7r_85",
+  "column-container": "_column-container_jnc7r_89",
+  "map-expanded-button": "_map-expanded-button_jnc7r_94",
+  "main-panel": "_main-panel_jnc7r_101",
+  "main-chart": "_main-chart_jnc7r_108",
+  "correlation-chart-inner": "_correlation-chart-inner_jnc7r_112",
+  "age-axis-container": "_age-axis-container_jnc7r_118"
+};
+exports.assistant = assistant;
+exports.default = styles;
+//# sourceMappingURL=main.module.sass.cjs.map

package/dist/correlation-chart/main.module.sass.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.module.sass.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/correlation-chart/main.module.sass.js

@@ -0,0 +1,28 @@
+const assistant = "_assistant_jnc7r_26";
+const styles = {
+  "page-header": "_page-header_jnc7r_1",
+  "diagram-container": "_diagram-container_jnc7r_8",
+  "map-inset": "_map-inset_jnc7r_14",
+  "column-selection-map": "_column-selection-map_jnc7r_14",
+  "map-expanded": "_map-expanded_jnc7r_22",
+  assistant,
+  "unit-details-panel": "_unit-details-panel_jnc7r_31",
+  "main-area": "_main-area_jnc7r_31",
+  "correlation-map": "_correlation-map_jnc7r_46",
+  "correlation-diagram": "_correlation-diagram_jnc7r_68",
+  "package": "_package_jnc7r_76",
+  "package-overlay": "_package-overlay_jnc7r_79",
+  "laterally-extensive-unit": "_laterally-extensive-unit_jnc7r_85",
+  "strat-col-span": "_strat-col-span_jnc7r_85",
+  "column-container": "_column-container_jnc7r_89",
+  "map-expanded-button": "_map-expanded-button_jnc7r_94",
+  "main-panel": "_main-panel_jnc7r_101",
+  "main-chart": "_main-chart_jnc7r_108",
+  "correlation-chart-inner": "_correlation-chart-inner_jnc7r_112",
+  "age-axis-container": "_age-axis-container_jnc7r_118"
+};
+export {
+  assistant,
+  styles as default
+};
+//# sourceMappingURL=main.module.sass.js.map

package/dist/correlation-chart/main.module.sass.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.module.sass.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}