@macrostrat/column-views 1.0.3 → 2.0.0

package/dist/esm/layers.033d3fb0.js

@@ -0,0 +1,170 @@
+import {useColumnFeatures as $33a46f9423c8104a$export$e3270a4e30e40ff9} from "./fetch.99aec438.js";
+import {buildKeyMapping as $40b71acee908f16d$export$b3975a0f05980d25, buildTriangulation as $40b71acee908f16d$export$39cd73f2cb8dc4f7} from "./keyboard-navigation.6713401b.js";
+import $26TqL$macrostrathyper from "@macrostrat/hyper";
+import {FeatureLayer as $26TqL$FeatureLayer, Feature as $26TqL$Feature, MapContext as $26TqL$MapContext} from "@macrostrat/svg-map-components";
+import {useAPIResult as $26TqL$useAPIResult, useKeyHandler as $26TqL$useKeyHandler} from "@macrostrat/ui-components";
+import $26TqL$chromajs from "chroma-js";
+import {useContext as $26TqL$useContext, useMemo as $26TqL$useMemo} from "react";
+
+
+
+
+
+
+
+
+const $93f116a6493b17c3$var$defaultStyle = {
+    fill: "rgb(239, 180, 249)",
+    stroke: "magenta"
+};
+function $93f116a6493b17c3$export$2254347cd20e6080(props) {
+    const { style: style = $93f116a6493b17c3$var$defaultStyle, ...params } = props;
+    const res = (0, $26TqL$useAPIResult)("/measurements", {
+        ...params,
+        format: "geojson",
+        response: "light"
+    });
+    if (res == null) return null;
+    return (0, $26TqL$macrostrathyper)((0, $26TqL$FeatureLayer), {
+        useCanvas: false,
+        style: style,
+        features: res.features.filter((d)=>d.properties.unit_id != null)
+    });
+}
+function $93f116a6493b17c3$export$f177ff57c101017a(props) {
+    const { features: features, onClick: onClick, color: color = "rgba(150,150,150, 1)", singleFeature: singleFeature = true } = props;
+    console.log(features);
+    const c = (0, $26TqL$chromajs)(color);
+    return (0, $26TqL$macrostrathyper)((0, $26TqL$FeatureLayer), {
+        className: "columns",
+        useCanvas: onClick == null,
+        style: {
+            fill: c.alpha(0.2).css(),
+            stroke: c.alpha(0.4).css()
+        }
+    }, features.map((f)=>{
+        return (0, $26TqL$macrostrathyper)((0, $26TqL$Feature), {
+            id: f.id ?? f.properties.col_id,
+            onClick: onClick,
+            feature: f
+        });
+    }));
+}
+var $93f116a6493b17c3$var$MacrostratStatusCode = /*#__PURE__*/ function(MacrostratStatusCode) {
+    MacrostratStatusCode["InProcess"] = "in process";
+    return MacrostratStatusCode;
+}($93f116a6493b17c3$var$MacrostratStatusCode || {});
+function $93f116a6493b17c3$export$8c41dd563753848(props) {
+    /** Keyboard navigation of columns using a Delaunay triangulation */ const { features: features = [], col_id: col_id = null, onChange: onChange, showLayers: showLayers = false, ...projectArgs } = props;
+    const { projection: projection } = (0, $26TqL$useContext)((0, $26TqL$MapContext));
+    const { centroids: centroids, tri: tri } = (0, $26TqL$useMemo)(()=>(0, $40b71acee908f16d$export$39cd73f2cb8dc4f7)(features), [
+        features
+    ]);
+    const currentIndex = (0, $26TqL$useMemo)(()=>{
+        return features.findIndex((d)=>d.properties.col_id == col_id);
+    }, [
+        features,
+        col_id
+    ]);
+    const neighbors = tri.delaunay.neighbors[currentIndex];
+    const keyMapping = (0, $26TqL$useMemo)(()=>{
+        return (0, $40b71acee908f16d$export$b3975a0f05980d25)(neighbors, centroids, currentIndex, projection);
+    }, [
+        neighbors,
+        currentIndex
+    ]);
+    (0, $26TqL$useKeyHandler)((event)=>{
+        const nextColumnIx = keyMapping[event.keyCode];
+        if (nextColumnIx == null) return;
+        // @ts-ignore
+        onChange(features[nextColumnIx]);
+    }, [
+        keyMapping
+    ]);
+    if (neighbors == null) return null;
+    const neighborFeatures = neighbors.map((d)=>features[d]);
+    return (0, $26TqL$macrostrathyper).if(showLayers)([
+        (0, $26TqL$macrostrathyper)((0, $26TqL$FeatureLayer), {
+            features: tri.links().features,
+            useCanvas: false,
+            style: {
+                stroke: "purple",
+                fill: "transparent"
+            }
+        }),
+        (0, $26TqL$macrostrathyper)((0, $26TqL$FeatureLayer), {
+            features: neighborFeatures,
+            useCanvas: false,
+            style: {
+                stroke: "rgb(93, 101, 212)",
+                strokeWidth: 3,
+                fill: "rgba(93, 101, 212, 0.5)"
+            }
+        }),
+        (0, $26TqL$macrostrathyper)((0, $26TqL$FeatureLayer), {
+            features: [
+                {
+                    type: "Feature",
+                    geometry: {
+                        type: "MultiPoint",
+                        coordinates: centroids
+                    }
+                }
+            ],
+            useCanvas: false,
+            style: {
+                r: 1,
+                fill: "purple"
+            }
+        })
+    ]);
+}
+const $93f116a6493b17c3$export$f02cc02ad0e0bba3 = (props)=>{
+    const { apiRoute: apiRoute = "/columns", onChange: onChange, col_id: col_id = null, status_code: status_code, project_id: project_id, color: color, filterColumns: filterColumns, showDebugLayers: showDebugLayers = false, format: format = "topojson" } = props;
+    let features = (0, $33a46f9423c8104a$export$e3270a4e30e40ff9)({
+        apiRoute: apiRoute,
+        status_code: status_code,
+        project_id: project_id,
+        format: format
+    });
+    if (features == null) return null;
+    if (filterColumns != null) features = features.filter(filterColumns);
+    return (0, $26TqL$macrostrathyper)([
+        (0, $26TqL$macrostrathyper)($93f116a6493b17c3$export$8c41dd563753848, {
+            features: features,
+            col_id: col_id,
+            onChange: onChange,
+            status_code: status_code,
+            project_id: project_id,
+            showLayers: showDebugLayers
+        }),
+        (0, $26TqL$macrostrathyper)($93f116a6493b17c3$export$f177ff57c101017a, {
+            features: features,
+            onClick: onChange,
+            color: color
+        })
+    ]);
+};
+const $93f116a6493b17c3$export$4d8f6e6df85d9012 = (props)=>{
+    return (0, $26TqL$macrostrathyper)($93f116a6493b17c3$export$f02cc02ad0e0bba3, {
+        apiRoute: "/defs/columns",
+        ...props
+    });
+};
+const $93f116a6493b17c3$export$b9d912252344e099 = (props)=>{
+    const { feature: feature } = props;
+    return (0, $26TqL$macrostrathyper)((0, $26TqL$FeatureLayer), {
+        features: [
+            feature
+        ],
+        style: {
+            fill: "rgba(255,0,0,0.4)",
+            stroke: "rgba(255,0,0,0.6)",
+            strokeWidth: 2
+        }
+    });
+};
+
+
+export {$93f116a6493b17c3$export$2254347cd20e6080 as MeasurementsLayer, $93f116a6493b17c3$export$f177ff57c101017a as ColumnFeatures, $93f116a6493b17c3$export$8c41dd563753848 as ColumnKeyboardNavigation, $93f116a6493b17c3$export$f02cc02ad0e0bba3 as Columns, $93f116a6493b17c3$export$4d8f6e6df85d9012 as ColumnCenters, $93f116a6493b17c3$export$b9d912252344e099 as CurrentColumn};
+//# sourceMappingURL=layers.033d3fb0.js.map

package/dist/esm/layers.033d3fb0.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/column-views/src/maps/column-navigation/svg/layers.ts"],"sourcesContent":["import h from \"@macrostrat/hyper\";\nimport {\n  Feature,\n  FeatureLayer,\n  MapContext,\n} from \"@macrostrat/svg-map-components\";\nimport { useAPIResult, useKeyHandler } from \"@macrostrat/ui-components\";\nimport chroma from \"chroma-js\";\nimport { ExtendedFeature } from \"d3-geo\";\nimport { Polygon } from \"geojson\";\nimport { useContext, useMemo } from \"react\";\nimport { useColumnFeatures } from \"../../../data-provider\";\nimport {\n  buildKeyMapping,\n  buildTriangulation,\n} from \"../utils/keyboard-navigation\";\n\nconst defaultStyle = {\n  fill: \"rgb(239, 180, 249)\",\n  stroke: \"magenta\",\n};\n\nexport function MeasurementsLayer(props) {\n  const { style = defaultStyle, ...params } = props;\n  const res: any = useAPIResult(\"/measurements\", {\n    ...params,\n    format: \"geojson\",\n    response: \"light\",\n  });\n  if (res == null) return null;\n\n  return h(FeatureLayer, {\n    useCanvas: false,\n    style,\n    features: res.features.filter((d) => d.properties.unit_id != null),\n  });\n}\n\ntype ColumnProps = { col_id: number };\n\ntype ColumnFeature = ExtendedFeature<Polygon, ColumnProps>;\n\nfunction ColumnFeatures(props) {\n  const {\n    features,\n    onClick,\n    color = \"rgba(150,150,150, 1)\",\n    singleFeature = true,\n  } = props;\n\n  console.log(features);\n\n  const c = chroma(color);\n\n  return h(\n    FeatureLayer,\n    {\n      className: \"columns\",\n      useCanvas: onClick == null,\n      style: {\n        fill: c.alpha(0.2).css(),\n        stroke: c.alpha(0.4).css(),\n      },\n    },\n    features.map((f) => {\n      return h(Feature, {\n        id: f.id ?? f.properties.col_id,\n        onClick,\n        feature: f,\n      });\n    })\n  );\n}\n\nenum MacrostratStatusCode {\n  InProcess = \"in process\",\n}\n\ninterface ColumnNavProps {\n  col_id: number;\n  status_code?: MacrostratStatusCode;\n  project_id?: number;\n  onChange(col_id: number): void;\n}\n\ninterface KeyboardNavProps extends ColumnNavProps {\n  features: ColumnFeature[];\n  showLayers: boolean;\n}\n\nfunction ColumnKeyboardNavigation(props: KeyboardNavProps) {\n  /** Keyboard navigation of columns using a Delaunay triangulation */\n  const {\n    features = [],\n    col_id = null,\n    onChange,\n    showLayers = false,\n    ...projectArgs\n  } = props;\n  const { projection } = useContext(MapContext);\n  const { centroids, tri } = useMemo(\n    () => buildTriangulation(features),\n    [features]\n  );\n\n  const currentIndex = useMemo(() => {\n    return features.findIndex((d) => d.properties.col_id == col_id);\n  }, [features, col_id]);\n\n  const neighbors = tri.delaunay.neighbors[currentIndex];\n\n  const keyMapping = useMemo(() => {\n    return buildKeyMapping(neighbors, centroids, currentIndex, projection);\n  }, [neighbors, currentIndex]);\n\n  useKeyHandler(\n    (event) => {\n      const nextColumnIx = keyMapping[event.keyCode];\n      if (nextColumnIx == null) return;\n      // @ts-ignore\n      onChange(features[nextColumnIx]);\n    },\n    [keyMapping]\n  );\n\n  if (neighbors == null) return null;\n  const neighborFeatures = neighbors.map((d) => features[d]);\n\n  return h.if(showLayers)([\n    h(FeatureLayer, {\n      features: tri.links().features,\n      useCanvas: false,\n      style: {\n        stroke: \"purple\",\n        fill: \"transparent\",\n      },\n    }),\n    h(FeatureLayer, {\n      features: neighborFeatures,\n      useCanvas: false,\n      style: {\n        stroke: \"rgb(93, 101, 212)\",\n        strokeWidth: 3,\n        fill: \"rgba(93, 101, 212, 0.5)\",\n      },\n    }),\n    h(FeatureLayer, {\n      features: [\n        {\n          type: \"Feature\",\n          geometry: {\n            type: \"MultiPoint\",\n            coordinates: centroids,\n          },\n        },\n      ],\n      useCanvas: false,\n      style: {\n        r: 1,\n        fill: \"purple\",\n      },\n    }),\n  ]);\n}\n\ninterface ColumnExtraInfo {\n  apiRoute?: string;\n  color?: string;\n  filterColumns?(d: ColumnFeature): boolean;\n  showDebugLayers?: boolean;\n  format?: \"topojson\" | \"geojson\";\n}\n\nconst Columns = (props: ColumnNavProps & ColumnExtraInfo) => {\n  const {\n    apiRoute = \"/columns\",\n    onChange,\n    col_id = null,\n    status_code,\n    project_id,\n    color,\n    filterColumns,\n    showDebugLayers = false,\n    format = \"topojson\",\n  } = props;\n\n  let features: any[] = useColumnFeatures({\n    apiRoute,\n    status_code,\n    project_id,\n    format,\n  }) as any;\n\n  if (features == null) return null;\n\n  if (filterColumns != null) {\n    features = features.filter(filterColumns);\n  }\n\n  return h([\n    h(ColumnKeyboardNavigation, {\n      features,\n      col_id,\n      onChange,\n      status_code,\n      project_id,\n      showLayers: showDebugLayers,\n    }),\n    h(ColumnFeatures, { features, onClick: onChange, color }),\n  ]);\n};\n\nconst ColumnCenters = (props: ColumnNavProps) => {\n  return h(Columns, { apiRoute: \"/defs/columns\", ...props });\n};\n\nconst CurrentColumn = (props) => {\n  const { feature } = props;\n  return h(FeatureLayer, {\n    features: [feature],\n    style: {\n      fill: \"rgba(255,0,0,0.4)\",\n      stroke: \"rgba(255,0,0,0.6)\",\n      strokeWidth: 2,\n    },\n  });\n};\n\nexport {\n  Columns,\n  CurrentColumn,\n  ColumnCenters,\n  ColumnFeatures,\n  ColumnKeyboardNavigation,\n};\n"],"names":[],"version":3,"file":"layers.033d3fb0.js.map"}

package/dist/esm/main.2e0375a5.js

@@ -0,0 +1,221 @@
+import {ColoredUnitComponent as $4c8184c4a7317749$export$6012fd1584b5d0c0} from "./units.5a4fc058.js";
+import {UnitKeyboardNavigation as $4d5d1c15f39f6a14$export$70f5ee19650fc7d1, UnitSelectionProvider as $4d5d1c15f39f6a14$export$f19d75b1d4b676a4, useUnitSelectionStore as $4d5d1c15f39f6a14$export$b220b1d3591dc9e5} from "./selection.f5b0297e.js";
+import {UnitSelectionPopover as $a9bcb536274d1bf9$export$db1115efab13710d} from "./popover.a810b7bc.js";
+import "./main.module.3dd9500b.css";
+import $2d5zd$mainmodulec09154b1js from "./main.module.c09154b1.js";
+import {CompositeTimescaleCore as $7d0f52717c0de7e1$export$463f46772c64d403} from "./section.a34d379a.js";
+import {buildCorrelationChartData as $2c6a8e6a98a077ae$export$7f21dc14b8199dc0, findLaterallyExtensiveUnits as $2c6a8e6a98a077ae$export$cc5d9b95e199a6de, splitStratIntoBoxes as $2c6a8e6a98a077ae$export$3e71a3125322d04b} from "./prepare-data.d4284b4a.js";
+import {CompositeAgeAxisCore as $43794af7643cdf40$export$ac30ca3cf5df959d} from "./age-axis.4a8cf5e6.js";
+import {UnitBoxes as $d254716a820e9c85$export$5d1cdfabe8dc8085} from "./boxes.8292cff2.js";
+import {ColumnContainer as $2118f0266dc7e955$export$2194471aa3d52446} from "./column.01d68dd8.js";
+import $2d5zd$macrostrathyper from "@macrostrat/hyper";
+import {useMemo as $2d5zd$useMemo, useRef as $2d5zd$useRef} from "react";
+import {useInDarkMode as $2d5zd$useInDarkMode} from "@macrostrat/ui-components";
+import $2d5zd$classnames from "classnames";
+import {SVG as $2d5zd$SVG, ColumnProvider as $2d5zd$ColumnProvider, ColumnAxisType as $2d5zd$ColumnAxisType} from "@macrostrat/column-components";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/** Correlation chart */ 
+
+
+
+
+
+
+
+
+
+
+
+
+const $ed7dc56184962590$var$h = (0, $2d5zd$macrostrathyper).styled((0, ($parcel$interopDefault($2d5zd$mainmodulec09154b1js))));
+function $ed7dc56184962590$export$9ebf875c09445bec({ data: data, columnSpacing: columnSpacing = 0, columnWidth: columnWidth = 130, unconformityLabels: unconformityLabels = true, showUnitPopover: showUnitPopover = true, selectedUnit: selectedUnit, onUnitSelected: onUnitSelected, ...scaleProps }) {
+    const defaultScaleProps = {
+        targetUnitHeight: 10,
+        unconformityHeight: 60,
+        minSectionHeight: 60,
+        collapseSmallUnconformities: true
+    };
+    const chartData = (0, $2d5zd$useMemo)(()=>{
+        if (!data) return null;
+        return (0, $2c6a8e6a98a077ae$export$7f21dc14b8199dc0)(data, {
+            ...defaultScaleProps,
+            ...scaleProps
+        });
+    }, [
+        data,
+        ...Object.values(scaleProps)
+    ]);
+    const columnRef = (0, $2d5zd$useRef)(null);
+    // A flattened units array is used to support keyboard navigation
+    const units = (0, $2d5zd$useMemo)(()=>{
+        return data?.map((d0)=>d0.units).flat() ?? [];
+    }, [
+        data
+    ]);
+    const inDarkMode = (0, $2d5zd$useInDarkMode)();
+    const className = (0, $2d5zd$classnames)({
+        "dark-mode": inDarkMode
+    });
+    if (chartData == null) return null;
+    const { packages: packages, scaleInfo: scaleInfo, nColumns: nColumns } = chartData;
+    const mainWidth = (columnWidth + columnSpacing) * nColumns;
+    return $ed7dc56184962590$var$h((0, $2118f0266dc7e955$export$2194471aa3d52446), {
+        className: "correlation-diagram"
+    }, $ed7dc56184962590$var$h((0, $4d5d1c15f39f6a14$export$f19d75b1d4b676a4), {
+        columnRef: columnRef,
+        selectedUnit: selectedUnit,
+        onUnitSelected: onUnitSelected,
+        units: units
+    }, $ed7dc56184962590$var$h($ed7dc56184962590$var$ChartArea, [
+        $ed7dc56184962590$var$h($ed7dc56184962590$var$TimescaleColumn, {
+            key: "timescale",
+            scaleInfo: scaleInfo,
+            unconformityLabels: unconformityLabels
+        }),
+        $ed7dc56184962590$var$h("div.main-chart", {
+            ref: columnRef
+        }, [
+            $ed7dc56184962590$var$h((0, $2d5zd$SVG), {
+                className: className,
+                innerWidth: mainWidth,
+                height: scaleInfo.totalHeight,
+                paddingH: 4
+            }, packages.map((pkg, i)=>{
+                const { offset: offset, domain: domain, pixelScale: pixelScale, key: key } = scaleInfo.packages[i];
+                return $ed7dc56184962590$var$h($ed7dc56184962590$var$Package, {
+                    columnData: pkg.columnData,
+                    key: key,
+                    columnWidth: columnWidth,
+                    columnSpacing: columnSpacing,
+                    offset: offset,
+                    domain: domain,
+                    pixelScale: pixelScale
+                });
+            })),
+            $ed7dc56184962590$var$h.if(showUnitPopover)((0, $a9bcb536274d1bf9$export$db1115efab13710d)),
+            // Navigation only works within a column for now...
+            $ed7dc56184962590$var$h((0, $4d5d1c15f39f6a14$export$70f5ee19650fc7d1), {
+                units: units
+            })
+        ])
+    ])));
+}
+function $ed7dc56184962590$var$Package({ columnData: columnData, columnSpacing: columnSpacing, columnWidth: columnWidth, offset: offset, domain: domain, pixelScale: pixelScale }) {
+    return $ed7dc56184962590$var$h("g.package", {
+        transform: `translate(0 ${offset})`
+    }, [
+        // Disable the SVG overlay for now
+        //h(PackageSVGOverlay, { data, columnSpacing }),
+        $ed7dc56184962590$var$h("g.column-units", [
+            columnData.map((data, i)=>{
+                return $ed7dc56184962590$var$h($ed7dc56184962590$var$Column, {
+                    units: data.units,
+                    width: columnWidth,
+                    key: i,
+                    domain: domain,
+                    pixelScale: pixelScale,
+                    offsetLeft: i * (columnWidth + columnSpacing)
+                });
+            })
+        ])
+    ]);
+}
+function $ed7dc56184962590$var$Column(props) {
+    const { units: units, width: width = 150, offsetLeft: offsetLeft, domain: domain, pixelScale: pixelScale } = props;
+    const columnWidth = width;
+    if (units.length == 0) return null;
+    return $ed7dc56184962590$var$h("g.section", {
+        transform: `translate(${offsetLeft} 0)`
+    }, $ed7dc56184962590$var$h((0, $2d5zd$ColumnProvider), {
+        // Need to tighten up types here...
+        divisions: units,
+        range: domain,
+        pixelsPerMeter: pixelScale,
+        axisType: (0, $2d5zd$ColumnAxisType).AGE
+    }, $ed7dc56184962590$var$h((0, $d254716a820e9c85$export$5d1cdfabe8dc8085), {
+        unitComponent: (0, $4c8184c4a7317749$export$6012fd1584b5d0c0),
+        unitComponentProps: {
+            nColumns: 2,
+            width: columnWidth
+        }
+    })));
+}
+function $ed7dc56184962590$var$PackageSVGOverlay({ data: data, columnWidth: columnWidth = 100, columnSpacing: columnSpacing = 0 }) {
+    const { b_age: b_age, t_age: t_age, bestPixelScale: bestPixelScale, columnData: columnData } = data;
+    const width = (columnWidth + columnSpacing) * columnData.length;
+    const height = Math.ceil((b_age - t_age) * bestPixelScale) + 2;
+    const extensiveUnits = (0, $2c6a8e6a98a077ae$export$cc5d9b95e199a6de)(data);
+    const scale = (val)=>{
+        return (val - t_age) * bestPixelScale;
+    };
+    return $ed7dc56184962590$var$h("div.package-overlay", {
+        style: {
+            width: width,
+            height: height
+        }
+    }, extensiveUnits.map((d)=>{
+        return $ed7dc56184962590$var$h($ed7dc56184962590$var$LaterallyExtensiveUnit, {
+            data: d,
+            scale: scale,
+            pixelScale: bestPixelScale,
+            columnSpacing: columnSpacing
+        });
+    }));
+}
+function $ed7dc56184962590$var$LaterallyExtensiveUnit({ data: data, scale: scale, pixelScale: pixelScale, columnSpacing: columnSpacing }) {
+    const { b_age: b_age, t_age: t_age, strat_name_long: strat_name_long, units: units } = data;
+    // Build boxes by column groups
+    const boxes = (0, $2c6a8e6a98a077ae$export$3e71a3125322d04b)(data);
+    return $ed7dc56184962590$var$h("div.laterally-extensive-unit", boxes.map((d, i)=>{
+        return $ed7dc56184962590$var$h($ed7dc56184962590$var$StratColSpan, {
+            scale: scale,
+            data: d,
+            pixelScale: pixelScale,
+            key: i,
+            columnSpacing: columnSpacing
+        });
+    }));
+}
+function $ed7dc56184962590$var$StratColSpan({ data: data, scale: scale, columnWidth: columnWidth = 100, columnSpacing: columnSpacing = 0, pixelScale: pixelScale = 1 }) {
+    const { startCol: startCol, endCol: endCol, strat_name_long: strat_name_long, t_age: t_age, b_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 $ed7dc56184962590$var$h("div.strat-col-span", {
+        style: {
+            top: top,
+            height: height,
+            width: width,
+            left: left
+        }
+    }, strat_name_long);
+}
+function $ed7dc56184962590$var$ChartArea({ children: children }) {
+    const setSelectedUnit = (0, $4d5d1c15f39f6a14$export$b220b1d3591dc9e5)((state)=>state.setSelectedUnit);
+    return $ed7dc56184962590$var$h("div.correlation-chart-inner", {
+        onClick () {
+            setSelectedUnit(null);
+        }
+    }, children);
+}
+function $ed7dc56184962590$var$TimescaleColumn(props) {
+    const { scaleInfo: scaleInfo, unconformityLabels: unconformityLabels = true } = props;
+    return $ed7dc56184962590$var$h("div.column-container.age-axis-container", [
+        $ed7dc56184962590$var$h((0, $43794af7643cdf40$export$ac30ca3cf5df959d), {
+            ...scaleInfo
+        }),
+        $ed7dc56184962590$var$h((0, $7d0f52717c0de7e1$export$463f46772c64d403), {
+            ...scaleInfo,
+            unconformityLabels: unconformityLabels
+        })
+    ]);
+}
+
+
+export {$ed7dc56184962590$export$9ebf875c09445bec as CorrelationChart};
+//# sourceMappingURL=main.2e0375a5.js.map

package/dist/esm/main.2e0375a5.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,sBAAsB;;;;;;;;;;;;;AAoCtB,MAAM,0BAAI,CAAA,GAAA,sBAAI,EAAE,MAAM,CAAC,CAAA,GAAA,sEAAK;AAarB,SAAS,0CAAiB,QAC/B,IAAI,iBACJ,gBAAgB,gBAChB,cAAc,yBACd,qBAAqB,uBACrB,kBAAkB,oBAClB,YAAY,kBACZ,cAAc,EACd,GAAG,YACmB;IACtB,MAAM,oBAAoB;QACxB,kBAAkB;QAClB,oBAAoB;QACpB,kBAAkB;QAClB,6BAA6B;IAC/B;IAEA,MAAM,YAAY,CAAA,GAAA,cAAM,EAAE;QACxB,IAAI,CAAC,MAAM,OAAO;QAClB,OAAO,CAAA,GAAA,yCAAwB,EAAE,MAAM;YACrC,GAAG,iBAAiB;YACpB,GAAG,UAAU;QACf;IACF,GAAG;QAAC;WAAS,OAAO,MAAM,CAAC;KAAY;IAEvC,MAAM,YAAY,CAAA,GAAA,aAAK,EAAE;IAEzB,iEAAiE;IACjE,MAAM,QAAQ,CAAA,GAAA,cAAM,EAAE;QACpB,OAAO,MAAM,IAAI,CAAC,KAAO,GAAG,KAAK,EAAE,UAAU,EAAE;IACjD,GAAG;QAAC;KAAK;IAET,MAAM,aAAa,CAAA,GAAA,oBAAY;IAE/B,MAAM,YAAY,CAAA,GAAA,iBAAS,EAAE;QAC3B,aAAa;IACf;IAEA,IAAI,aAAa,MACf,OAAO;IAGT,MAAM,YAAE,QAAQ,aAAE,SAAS,YAAE,QAAQ,EAAE,GAAG;IAE1C,MAAM,YAAY,AAAC,CAAA,cAAc,aAAY,IAAK;IAElD,OAAO,wBACL,CAAA,GAAA,yCAAc,GACd;QAAE,WAAW;IAAsB,GACnC,wBACE,CAAA,GAAA,yCAAoB,GACpB;mBAAE;sBAAW;wBAAc;eAAgB;IAAM,GACjD,wBAAE,iCAAW;QACX,wBAAE,uCAAiB;YACjB,KAAK;uBACL;gCACA;QACF;QACA,wBAAE,kBAAkB;YAAE,KAAK;QAAU,GAAG;YACtC,wBACE,CAAA,GAAA,UAAE,GACF;2BACE;gBACA,YAAY;gBACZ,QAAQ,UAAU,WAAW;gBAC7B,UAAU;YACZ,GACA,SAAS,GAAG,CAAC,CAAC,KAAK;gBACjB,MAAM,UAAE,MAAM,UAAE,MAAM,cAAE,UAAU,OAAE,GAAG,EAAE,GAAG,UAAU,QAAQ,CAAC,EAAE;gBACjE,OAAO,wBAAE,+BAAS;oBAChB,YAAY,IAAI,UAAU;yBAC1B;iCACA;mCACA;4BACA;4BACA;gCACA;gBACF;YACF;YAEF,wBAAE,EAAE,CAAC,iBAAiB,CAAA,GAAA,yCAAmB;YACzC,mDAAmD;YACnD,wBAAE,CAAA,GAAA,yCAAqB,GAAG;uBAAE;YAAM;SACnC;KACF;AAGP;AAEA,SAAS,8BAAQ,cACf,UAAU,iBACV,aAAa,eACb,WAAW,UACX,MAAM,UACN,MAAM,cACN,UAAU,EACX;IACC,OAAO,wBAAE,aAAa;QAAE,WAAW,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;IAAC,GAAG;QAC7D,kCAAkC;QAClC,gDAAgD;QAChD,wBAAE,kBAAkB;YAClB,WAAW,GAAG,CAAC,CAAC,MAAM;gBACpB,OAAO,wBAAE,8BAAQ;oBACf,OAAO,KAAK,KAAK;oBACjB,OAAO;oBACP,KAAK;4BACL;gCACA;oBACA,YAAY,IAAK,CAAA,cAAc,aAAY;gBAC7C;YACF;SACD;KACF;AACH;AAgBA,SAAS,6BAAO,KAAkB;IAChC,MAAM,SAAE,KAAK,SAAE,QAAQ,iBAAK,UAAU,UAAE,MAAM,cAAE,UAAU,EAAE,GAAG;IAE/D,MAAM,cAAc;IAEpB,IAAI,MAAM,MAAM,IAAI,GAClB,OAAO;IAGT,OAAO,wBACL,aACA;QACE,WAAW,CAAC,UAAU,EAAE,WAAW,GAAG,CAAC;IACzC,GACA,wBACE,CAAA,GAAA,qBAAa,GACb;QACE,mCAAmC;QACnC,WAAW;QACX,OAAO;QACP,gBAAgB;QAChB,UAAU,CAAA,GAAA,qBAAa,EAAE,GAAG;IAC9B,GACA,wBAAE,CAAA,GAAA,yCAAQ,GAAG;QACX,eAAe,CAAA,GAAA,yCAAmB;QAClC,oBAAoB;YAClB,UAAU;YACV,OAAO;QACT;IACF;AAGN;AAEA,SAAS,wCAAkB,QAAE,IAAI,eAAE,cAAc,oBAAK,gBAAgB,GAAG;IACvE,MAAM,SAAE,KAAK,SAAE,KAAK,kBAAE,cAAc,cAAE,UAAU,EAAE,GAAG;IAErD,MAAM,QAAQ,AAAC,CAAA,cAAc,aAAY,IAAK,WAAW,MAAM;IAC/D,MAAM,SAAS,KAAK,IAAI,CAAC,AAAC,CAAA,QAAQ,KAAI,IAAK,kBAAkB;IAE7D,MAAM,iBAAiB,CAAA,GAAA,yCAA0B,EAAE;IAEnD,MAAM,QAAQ,CAAC;QACb,OAAO,AAAC,CAAA,MAAM,KAAI,IAAK;IACzB;IAEA,OAAO,wBACL,uBACA;QAAE,OAAO;mBAAE;oBAAO;QAAO;IAAE,GAC3B,eAAe,GAAG,CAAC,CAAC;QAClB,OAAO,wBAAE,8CAAwB;YAC/B,MAAM;mBACN;YACA,YAAY;2BACZ;QACF;IACF;AAEJ;AAEA,SAAS,6CAAuB,QAAE,IAAI,SAAE,KAAK,cAAE,UAAU,iBAAE,aAAa,EAAE;IACxE,MAAM,SAAE,KAAK,SAAE,KAAK,mBAAE,eAAe,SAAE,KAAK,EAAE,GAAG;IACjD,+BAA+B;IAC/B,MAAM,QAAwB,CAAA,GAAA,yCAAkB,EAAE;IAElD,OAAO,wBACL,gCACA,MAAM,GAAG,CAAC,CAAC,GAAG;QACZ,OAAO,wBAAE,oCAAc;mBACrB;YACA,MAAM;wBACN;YACA,KAAK;2BACL;QACF;IACF;AAEJ;AAEA,SAAS,mCAAa,QACpB,IAAI,SACJ,KAAK,eACL,cAAc,oBACd,gBAAgB,eAChB,aAAa,GACd;IACC,MAAM,YAAE,QAAQ,UAAE,MAAM,mBAAE,eAAe,SAAE,KAAK,SAAE,KAAK,EAAE,GAAG;IAC5D,MAAM,MAAM,MAAM;IAClB,MAAM,OAAO,WAAY,CAAA,cAAc,aAAY;IACnD,MAAM,QAAQ,AAAC,CAAA,SAAS,WAAW,CAAA,IAAM,CAAA,cAAc,aAAY;IACnE,MAAM,SAAS,AAAC,CAAA,QAAQ,KAAI,IAAK;IACjC,OAAO,wBACL,sBACA;QAAE,OAAO;iBAAE;oBAAK;mBAAQ;kBAAO;QAAK;IAAE,GACtC;AAEJ;AAEA,SAAS,gCAAU,YAAE,QAAQ,EAAE;IAC7B,MAAM,kBAAkB,CAAA,GAAA,yCAAoB,EAC1C,CAAC,QAAU,MAAM,eAAe;IAGlC,OAAO,wBACL,+BACA;QACE;YACE,gBAAgB;QAClB;IACF,GACA;AAEJ;AAQA,SAAS,sCAAgB,KAA2B;IAClD,MAAM,aAAE,SAAS,sBAAE,qBAAqB,MAAM,GAAG;IACjD,OAAO,wBAAE,2CAA2C;QAClD,wBAAE,CAAA,GAAA,yCAAmB,GAAG;YAAE,GAAG,SAAS;QAAC;QACvC,wBAAE,CAAA,GAAA,yCAAqB,GAAG;YAAE,GAAG,SAAS;gCAAE;QAAmB;KAC9D;AACH","sources":["packages/column-views/src/correlation-chart/main.ts"],"sourcesContent":["/** Correlation chart */\nimport {\n  UnitSelectionProvider,\n  UnitKeyboardNavigation,\n  useUnitSelectionStore,\n} from \"../units\";\nimport { UnitSelectionPopover } from \"../unit-details\";\nimport hyper from \"@macrostrat/hyper\";\nimport styles from \"./main.module.sass\";\nimport { useMemo, useRef } 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 { ExtUnit } from \"../prepare-units/helpers\";\nimport { ColumnContainer } from \"../column\";\nimport { ColumnData } from \"../data-provider\";\nimport { BaseUnit } from \"@macrostrat/api-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  onUnitSelected?: (unitID: number | null, unit: BaseUnit | null) => void;\n}\n\nexport function CorrelationChart({\n  data,\n  columnSpacing = 0,\n  columnWidth = 130,\n  unconformityLabels = true,\n  showUnitPopover = true,\n  selectedUnit,\n  onUnitSelected,\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  const columnRef = useRef(null);\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      { columnRef, selectedUnit, onUnitSelected, units },\n      h(ChartArea, [\n        h(TimescaleColumn, {\n          key: \"timescale\",\n          scaleInfo,\n          unconformityLabels,\n        }),\n        h(\"div.main-chart\", { ref: columnRef }, [\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, key } = scaleInfo.packages[i];\n              return h(Package, {\n                columnData: pkg.columnData,\n                key,\n                columnWidth,\n                columnSpacing,\n                offset,\n                domain,\n                pixelScale,\n              });\n            })\n          ),\n          h.if(showUnitPopover)(UnitSelectionPopover),\n          // Navigation only works within a column for now...\n          h(UnitKeyboardNavigation, { units }),\n        ]),\n      ])\n    )\n  );\n}\n\nfunction Package({\n  columnData,\n  columnSpacing,\n  columnWidth,\n  offset,\n  domain,\n  pixelScale,\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          width: columnWidth,\n          key: i,\n          domain,\n          pixelScale,\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}\n\nfunction Column(props: ColumnProps) {\n  const { units, width = 150, offsetLeft, domain, pixelScale } = 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        pixelsPerMeter: pixelScale, // Actually pixels per myr\n        axisType: ColumnAxisType.AGE,\n      },\n      h(UnitBoxes, {\n        unitComponent: ColoredUnitComponent,\n        unitComponentProps: {\n          nColumns: 2,\n          width: columnWidth,\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 = useUnitSelectionStore(\n    (state) => state.setSelectedUnit\n  );\n\n  return h(\n    \"div.correlation-chart-inner\",\n    {\n      onClick() {\n        setSelectedUnit(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":[],"version":3,"file":"main.2e0375a5.js.map"}

package/dist/esm/main.module.3dd9500b.css

@@ -0,0 +1,134 @@
+.vpjVaa_page-header {
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 1em;
+  display: flex;
+}
+
+.vpjVaa_diagram-container {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  position: relative;
+}
+
+.vpjVaa_diagram-container.vpjVaa_map-inset .vpjVaa_column-selection-map {
+  z-index: 1000;
+  width: 12em;
+  height: 12em;
+  position: absolute;
+  top: 1em;
+  right: 1em;
+}
+
+.vpjVaa_diagram-container.vpjVaa_map-expanded {
+  flex-direction: row;
+  gap: 1em;
+}
+
+.vpjVaa_diagram-container.vpjVaa_map-expanded .vpjVaa_assistant {
+  width: 40em;
+  position: relative;
+}
+
+.vpjVaa_column-selection-map, .vpjVaa_unit-details-panel, .vpjVaa_main-area {
+  border-radius: 6px;
+  box-shadow: 0 1px 3px #0000004d;
+}
+
+.vpjVaa_column-selection-map {
+  flex: 1;
+  width: 40em;
+  min-height: 12em;
+  max-height: 40em;
+  position: relative;
+  top: 0;
+  right: 0;
+  overflow: hidden;
+}
+
+.vpjVaa_column-selection-map .vpjVaa_correlation-map {
+  height: 100%;
+  position: relative;
+}
+
+.vpjVaa_unit-details-panel {
+  background: var(--panel-secondary-background-color);
+  flex: 2;
+  max-width: 100%;
+  padding: 1em;
+  overflow: scroll;
+}
+
+.vpjVaa_main-area {
+  background-color: var(--panel-secondary-background-color);
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  position: relative;
+  overflow: scroll;
+}
+
+.vpjVaa_correlation-diagram {
+  background-color: var(--panel-secondary-background-color);
+  --column-background-color: var(--background-color);
+  --column-stroke-color: var(--text-color);
+  padding: 1em 1em 1em 0;
+}
+
+.vpjVaa_package {
+  position: relative;
+}
+
+.vpjVaa_package .vpjVaa_package-overlay {
+  border: 2px solid red;
+  position: absolute;
+  top: 9px;
+  left: 0;
+}
+
+.vpjVaa_package .vpjVaa_laterally-extensive-unit .vpjVaa_strat-col-span {
+  border: 2px solid red;
+  position: absolute;
+}
+
+.vpjVaa_package .vpjVaa_column-container {
+  flex-direction: row;
+  display: flex;
+}
+
+.vpjVaa_map-expanded-button {
+  z-index: 100;
+  position: absolute;
+  top: .5em;
+  right: .5em;
+}
+
+.vpjVaa_main-panel {
+  flex-direction: column;
+  height: 100%;
+  display: flex;
+  position: relative;
+}
+
+.vpjVaa_main-chart {
+  position: relative;
+}
+
+.vpjVaa_correlation-chart-inner {
+  flex-direction: row;
+  display: flex;
+  position: relative;
+}
+
+.vpjVaa_age-axis-container {
+  z-index: 100;
+  background-color: var(--panel-secondary-background-color);
+  flex-direction: row;
+  padding-left: 1em;
+  padding-right: 2px;
+  display: flex;
+  position: sticky;
+  left: 0;
+}
+/*# sourceMappingURL=main.module.3dd9500b.css.map */

package/dist/esm/main.module.3dd9500b.css.map

@@ -0,0 +1 @@
+{"mappings":"AAGA;;;;;;;AAMA;;;;;;;AAOI;;;;;;;;;AAQF;;;;;AAIE;;;;;AAIJ;;;;;AAIA;;;;;;;;;;;AAGE;;;;;AAYF;;;;;;;;AAOA;;;;;;;;;AASA;;;;;;;AASA;;;;AAGE;;;;;;;AAMA;;;;;AAIA;;;;;AAIF;;;;;;;AAMA;;;;;;;AAMA;;;;AAGA;;;;;;AAKA","sources":["packages/column-views/src/correlation-chart/main.module.sass"],"sourcesContent":["$map-size: 40em\n$map-size-inset: 12em\n\n.page-header\n  display: flex\n  flex-direction: row\n  justify-content: space-between\n  margin-bottom: 1em\n\n.diagram-container\n  flex: 1\n  position: relative\n  min-height: 0\n  display: flex\n\n  &.map-inset\n    .column-selection-map\n      position: absolute\n      top: 1em\n      right: 1em\n      height: $map-size-inset\n      width: $map-size-inset\n      z-index: 1000\n\n  &.map-expanded\n    flex-direction: row\n    gap: 1em\n\n    .assistant\n      width: 40em\n      position: relative\n\n.column-selection-map, .unit-details-panel, .main-area\n  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3)\n  border-radius: 6px\n\n.column-selection-map\n  overflow: hidden\n\n  .correlation-map\n    height: 100%\n    position: relative\n\n  flex: 1\n  min-height: $map-size-inset\n  max-height: $map-size\n  width: $map-size\n  position: relative\n  top: 0\n  right: 0\n\n.unit-details-panel\n  overflow: scroll\n  background: var(--panel-secondary-background-color)\n  flex: 2\n  padding: 1em\n  max-width: 100%\n\n.main-area\n  position: relative\n  flex: 1\n  min-height: 0\n  min-width: 0\n  overflow: scroll\n  background-color: var(--panel-secondary-background-color)\n\n\n.correlation-diagram\n  padding: 1em\n  padding-left: 0\n  background-color: var(--panel-secondary-background-color)\n  //box-shadow: 0 0 0.3em 0 var(--card-shadow-color)\n  --column-background-color: var(--background-color)\n  --column-stroke-color: var(--text-color)\n\n\n.package\n  position: relative\n\n  .package-overlay\n    position: absolute\n    top: 9px\n    left: 0\n    border: 2px solid red\n\n  .laterally-extensive-unit .strat-col-span\n    position: absolute\n    border: 2px solid red\n\n  .column-container\n    display: flex\n    flex-direction: row\n\n.map-expanded-button\n  position: absolute\n  top: 0.5em\n  right: 0.5em\n  z-index: 100\n\n.main-panel\n  position: relative\n  height: 100%\n  display: flex\n  flex-direction: column\n\n.main-chart\n  position: relative\n\n.correlation-chart-inner\n  display: flex\n  flex-direction: row\n  position: relative\n\n.age-axis-container\n  display: flex\n  flex-direction: row\n  position: sticky\n  left: 0\n  z-index: 100\n  padding-left: 1em\n  padding-right: 2px\n  background-color: var(--panel-secondary-background-color)\n"],"names":[],"version":3,"file":"main.module.3dd9500b.css.map"}

package/dist/esm/main.module.c09154b1.js

@@ -0,0 +1,70 @@
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+var $e36693a971586437$exports = {};
+
+$parcel$export($e36693a971586437$exports, "age-axis-container", () => $e36693a971586437$export$53d6db7fa950f022, (v) => $e36693a971586437$export$53d6db7fa950f022 = v);
+$parcel$export($e36693a971586437$exports, "assistant", () => $e36693a971586437$export$fae495e3391779c8, (v) => $e36693a971586437$export$fae495e3391779c8 = v);
+$parcel$export($e36693a971586437$exports, "column-container", () => $e36693a971586437$export$e908cef0cccb98df, (v) => $e36693a971586437$export$e908cef0cccb98df = v);
+$parcel$export($e36693a971586437$exports, "column-selection-map", () => $e36693a971586437$export$bc0171800478417d, (v) => $e36693a971586437$export$bc0171800478417d = v);
+$parcel$export($e36693a971586437$exports, "correlation-chart-inner", () => $e36693a971586437$export$4c778511934e4e40, (v) => $e36693a971586437$export$4c778511934e4e40 = v);
+$parcel$export($e36693a971586437$exports, "correlation-diagram", () => $e36693a971586437$export$28de7fe908bd38f2, (v) => $e36693a971586437$export$28de7fe908bd38f2 = v);
+$parcel$export($e36693a971586437$exports, "correlation-map", () => $e36693a971586437$export$e7725fcc0ad1c39c, (v) => $e36693a971586437$export$e7725fcc0ad1c39c = v);
+$parcel$export($e36693a971586437$exports, "diagram-container", () => $e36693a971586437$export$4e26ad0da8ba28db, (v) => $e36693a971586437$export$4e26ad0da8ba28db = v);
+$parcel$export($e36693a971586437$exports, "laterally-extensive-unit", () => $e36693a971586437$export$e140ecc72f1136a5, (v) => $e36693a971586437$export$e140ecc72f1136a5 = v);
+$parcel$export($e36693a971586437$exports, "main-area", () => $e36693a971586437$export$dca7b16f1db64b2b, (v) => $e36693a971586437$export$dca7b16f1db64b2b = v);
+$parcel$export($e36693a971586437$exports, "main-chart", () => $e36693a971586437$export$5bfdb779e754a706, (v) => $e36693a971586437$export$5bfdb779e754a706 = v);
+$parcel$export($e36693a971586437$exports, "main-panel", () => $e36693a971586437$export$6c5fa97bff632194, (v) => $e36693a971586437$export$6c5fa97bff632194 = v);
+$parcel$export($e36693a971586437$exports, "map-expanded", () => $e36693a971586437$export$a3424548d0b50801, (v) => $e36693a971586437$export$a3424548d0b50801 = v);
+$parcel$export($e36693a971586437$exports, "map-expanded-button", () => $e36693a971586437$export$2b57bca09e4d744b, (v) => $e36693a971586437$export$2b57bca09e4d744b = v);
+$parcel$export($e36693a971586437$exports, "map-inset", () => $e36693a971586437$export$e4b97290e92a7354, (v) => $e36693a971586437$export$e4b97290e92a7354 = v);
+$parcel$export($e36693a971586437$exports, "package", () => $e36693a971586437$export$e34a79f58350377, (v) => $e36693a971586437$export$e34a79f58350377 = v);
+$parcel$export($e36693a971586437$exports, "package-overlay", () => $e36693a971586437$export$a5f301d8153d7da5, (v) => $e36693a971586437$export$a5f301d8153d7da5 = v);
+$parcel$export($e36693a971586437$exports, "page-header", () => $e36693a971586437$export$d7514905725b998f, (v) => $e36693a971586437$export$d7514905725b998f = v);
+$parcel$export($e36693a971586437$exports, "strat-col-span", () => $e36693a971586437$export$89d9e0b078361adf, (v) => $e36693a971586437$export$89d9e0b078361adf = v);
+$parcel$export($e36693a971586437$exports, "unit-details-panel", () => $e36693a971586437$export$f94e3d1eb82ee550, (v) => $e36693a971586437$export$f94e3d1eb82ee550 = v);
+var $e36693a971586437$export$53d6db7fa950f022;
+var $e36693a971586437$export$fae495e3391779c8;
+var $e36693a971586437$export$e908cef0cccb98df;
+var $e36693a971586437$export$bc0171800478417d;
+var $e36693a971586437$export$4c778511934e4e40;
+var $e36693a971586437$export$28de7fe908bd38f2;
+var $e36693a971586437$export$e7725fcc0ad1c39c;
+var $e36693a971586437$export$4e26ad0da8ba28db;
+var $e36693a971586437$export$e140ecc72f1136a5;
+var $e36693a971586437$export$dca7b16f1db64b2b;
+var $e36693a971586437$export$5bfdb779e754a706;
+var $e36693a971586437$export$6c5fa97bff632194;
+var $e36693a971586437$export$a3424548d0b50801;
+var $e36693a971586437$export$2b57bca09e4d744b;
+var $e36693a971586437$export$e4b97290e92a7354;
+var $e36693a971586437$export$e34a79f58350377;
+var $e36693a971586437$export$a5f301d8153d7da5;
+var $e36693a971586437$export$d7514905725b998f;
+var $e36693a971586437$export$89d9e0b078361adf;
+var $e36693a971586437$export$f94e3d1eb82ee550;
+$e36693a971586437$export$53d6db7fa950f022 = `vpjVaa_age-axis-container`;
+$e36693a971586437$export$fae495e3391779c8 = `vpjVaa_assistant`;
+$e36693a971586437$export$e908cef0cccb98df = `vpjVaa_column-container`;
+$e36693a971586437$export$bc0171800478417d = `vpjVaa_column-selection-map`;
+$e36693a971586437$export$4c778511934e4e40 = `vpjVaa_correlation-chart-inner`;
+$e36693a971586437$export$28de7fe908bd38f2 = `vpjVaa_correlation-diagram`;
+$e36693a971586437$export$e7725fcc0ad1c39c = `vpjVaa_correlation-map`;
+$e36693a971586437$export$4e26ad0da8ba28db = `vpjVaa_diagram-container`;
+$e36693a971586437$export$e140ecc72f1136a5 = `vpjVaa_laterally-extensive-unit`;
+$e36693a971586437$export$dca7b16f1db64b2b = `vpjVaa_main-area`;
+$e36693a971586437$export$5bfdb779e754a706 = `vpjVaa_main-chart`;
+$e36693a971586437$export$6c5fa97bff632194 = `vpjVaa_main-panel`;
+$e36693a971586437$export$a3424548d0b50801 = `vpjVaa_map-expanded`;
+$e36693a971586437$export$2b57bca09e4d744b = `vpjVaa_map-expanded-button`;
+$e36693a971586437$export$e4b97290e92a7354 = `vpjVaa_map-inset`;
+$e36693a971586437$export$e34a79f58350377 = `vpjVaa_package`;
+$e36693a971586437$export$a5f301d8153d7da5 = `vpjVaa_package-overlay`;
+$e36693a971586437$export$d7514905725b998f = `vpjVaa_page-header`;
+$e36693a971586437$export$89d9e0b078361adf = `vpjVaa_strat-col-span`;
+$e36693a971586437$export$f94e3d1eb82ee550 = `vpjVaa_unit-details-panel`;
+
+
+export {$e36693a971586437$exports as default};
+//# sourceMappingURL=main.module.c09154b1.js.map

package/dist/esm/main.module.c09154b1.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AAnBA,4CAAuC,CAAC,yBAAyB,CAAC;AAClE,4CAA8B,CAAC,gBAAgB,CAAC;AAChD,4CAAqC,CAAC,uBAAuB,CAAC;AAC9D,4CAAyC,CAAC,2BAA2B,CAAC;AACtE,4CAA4C,CAAC,8BAA8B,CAAC;AAC5E,4CAAwC,CAAC,0BAA0B,CAAC;AACpE,4CAAoC,CAAC,sBAAsB,CAAC;AAC5D,4CAAsC,CAAC,wBAAwB,CAAC;AAChE,4CAA6C,CAAC,+BAA+B,CAAC;AAC9E,4CAA8B,CAAC,gBAAgB,CAAC;AAChD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAiC,CAAC,mBAAmB,CAAC;AACtD,4CAAwC,CAAC,0BAA0B,CAAC;AACpE,4CAA8B,CAAC,gBAAgB,CAAC;AAChD,2CAA4B,CAAC,cAAc,CAAC;AAC5C,4CAAoC,CAAC,sBAAsB,CAAC;AAC5D,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAAuC,CAAC,yBAAyB,CAAC","sources":["packages/column-views/src/correlation-chart/main.module.sass"],"sourcesContent":["$map-size: 40em\n$map-size-inset: 12em\n\n.page-header\n  display: flex\n  flex-direction: row\n  justify-content: space-between\n  margin-bottom: 1em\n\n.diagram-container\n  flex: 1\n  position: relative\n  min-height: 0\n  display: flex\n\n  &.map-inset\n    .column-selection-map\n      position: absolute\n      top: 1em\n      right: 1em\n      height: $map-size-inset\n      width: $map-size-inset\n      z-index: 1000\n\n  &.map-expanded\n    flex-direction: row\n    gap: 1em\n\n    .assistant\n      width: 40em\n      position: relative\n\n.column-selection-map, .unit-details-panel, .main-area\n  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3)\n  border-radius: 6px\n\n.column-selection-map\n  overflow: hidden\n\n  .correlation-map\n    height: 100%\n    position: relative\n\n  flex: 1\n  min-height: $map-size-inset\n  max-height: $map-size\n  width: $map-size\n  position: relative\n  top: 0\n  right: 0\n\n.unit-details-panel\n  overflow: scroll\n  background: var(--panel-secondary-background-color)\n  flex: 2\n  padding: 1em\n  max-width: 100%\n\n.main-area\n  position: relative\n  flex: 1\n  min-height: 0\n  min-width: 0\n  overflow: scroll\n  background-color: var(--panel-secondary-background-color)\n\n\n.correlation-diagram\n  padding: 1em\n  padding-left: 0\n  background-color: var(--panel-secondary-background-color)\n  //box-shadow: 0 0 0.3em 0 var(--card-shadow-color)\n  --column-background-color: var(--background-color)\n  --column-stroke-color: var(--text-color)\n\n\n.package\n  position: relative\n\n  .package-overlay\n    position: absolute\n    top: 9px\n    left: 0\n    border: 2px solid red\n\n  .laterally-extensive-unit .strat-col-span\n    position: absolute\n    border: 2px solid red\n\n  .column-container\n    display: flex\n    flex-direction: row\n\n.map-expanded-button\n  position: absolute\n  top: 0.5em\n  right: 0.5em\n  z-index: 100\n\n.main-panel\n  position: relative\n  height: 100%\n  display: flex\n  flex-direction: column\n\n.main-chart\n  position: relative\n\n.correlation-chart-inner\n  display: flex\n  flex-direction: row\n  position: relative\n\n.age-axis-container\n  display: flex\n  flex-direction: row\n  position: sticky\n  left: 0\n  z-index: 100\n  padding-left: 1em\n  padding-right: 2px\n  background-color: var(--panel-secondary-background-color)\n"],"names":[],"version":3,"file":"main.module.c09154b1.js.map"}