@macrostrat/column-views 1.0.2 → 2.0.0

package/src/units/selection.ts

@@ -1,21 +1,18 @@
 import { BaseUnit } from "@macrostrat/api-types";
 import h from "@macrostrat/hyper";
+import { useKeyHandler } from "@macrostrat/ui-components";
 import {
-  getQueryString,
-  setQueryString,
-  useKeyHandler,
-} from "@macrostrat/ui-components";
-import {
-  Dispatch,
-  SetStateAction,
   createContext,
   useContext,
   useEffect,
-  useMemo,
   useState,
   ReactNode,
+  RefObject,
+  useRef,
   useCallback,
 } from "react";
+import { createStore, StoreApi, useStore } from "zustand";
+import type { RectBounds, IUnit } from "./types";
 
 type UnitSelectDispatch = (
   unit: BaseUnit | null,
@@ -23,120 +20,137 @@ type UnitSelectDispatch = (
   event: Event | null
 ) => void;
 
-const UnitSelectionContext = createContext<BaseUnit | null>(null);
-const DispatchContext = createContext<UnitSelectDispatch | null>(null);
+const UnitSelectionContext = createContext<StoreApi<UnitSelectionStore>>(null);
 
-export function useUnitSelectionDispatch() {
-  return useContext(DispatchContext);
+export function useUnitSelectionDispatch(): UnitSelectDispatch {
+  const store = useContext(UnitSelectionContext);
+  if (store == null) {
+    return () => {};
+  }
+  return useStore(store, (state) => state.onUnitSelected);
 }
 
-export function useSelectedUnit() {
-  return useContext(UnitSelectionContext);
+export function useUnitSelectionStore<T>(
+  selector: (state: UnitSelectionStore) => T
+): T {
+  const store = useContext(UnitSelectionContext);
+  if (store == null) {
+    throw new Error(
+      "useUnitSelectionStore must be used within a UnitSelectionProvider"
+    );
+  }
+  return useStore(store, selector);
 }
 
-export interface UnitSelectionProps<T extends BaseUnit> {
-  children: React.ReactNode;
-  unit: T | null;
-  setUnit: Dispatch<SetStateAction<T>>;
-  onUnitSelected?: (unit: T, target: HTMLElement, event: Event) => void;
+export function useSelectedUnit() {
+  return useUnitSelectionStore((state) => state.selectedUnitData);
 }
 
-export function UnitSelectionProvider<T extends BaseUnit>(
-  props: Partial<UnitSelectionProps<T>>
-) {
-  const { unit, setUnit, onUnitSelected, children } = props;
-
-  if (unit == null && setUnit == null) {
-    return h(StatefulUnitSelectionProvider, props);
-  }
-
-  return h(
-    BaseUnitSelectionProvider,
-    { unit, setUnit, onUnitSelected },
-    children
-  );
+interface UnitSelectionStore {
+  selectedUnit: number | null;
+  selectedUnitData: BaseUnit | null;
+  overlayPosition: RectBounds | null;
+  onUnitSelected: UnitSelectDispatch;
+  setSelectedUnit: (unit: number | null) => void;
 }
 
-function StatefulUnitSelectionProvider<T extends BaseUnit>(props: {
+export function UnitSelectionProvider<T extends BaseUnit>(props: {
   children: ReactNode;
-  onUnitSelected?: (unit: T, target: HTMLElement, event: Event) => void;
+  columnRef?: RefObject<HTMLElement>;
+  units: T[];
+  selectedUnit: number | null;
+  onUnitSelected?: (unitID: number | null, unit: T | null) => void;
 }) {
-  const [unit, setUnit] = useState<T | null>(null);
-
-  return h(BaseUnitSelectionProvider, { ...props, unit, setUnit });
-}
-
-function BaseUnitSelectionProvider<T extends BaseUnit>({
-  children,
-  unit,
-  setUnit,
-  onUnitSelected,
-}: UnitSelectionProps<T>) {
-  const value = useMemo(() => unit, [unit?.unit_id]);
-
-  const _onUnitSelected = useCallback(
-    (u: T, target: HTMLElement, event: Event) => {
-      let newUnit = u;
-      setUnit(newUnit);
-      onUnitSelected?.(newUnit, target, event);
-    },
-    [setUnit, onUnitSelected]
+  const [store] = useState(() =>
+    createStore<UnitSelectionStore>((set) => ({
+      selectedUnit: null,
+      selectedUnitData: null,
+      overlayPosition: null,
+      setSelectedUnit(selectedUnit: number | null | BaseUnit) {
+        if (selectedUnit == null) {
+          set({ selectedUnit: null, selectedUnitData: null });
+          return;
+          // If it's a number, set the selected unit
+        } else if (typeof selectedUnit === "number") {
+          set({ selectedUnit, selectedUnitData: null });
+        } else if ("unit_id" in selectedUnit) {
+          set({
+            selectedUnit: selectedUnit.unit_id,
+            selectedUnitData: selectedUnit,
+          });
+        }
+      },
+      onUnitSelected: (unit: T, target: HTMLElement, event: Event) => {
+        console.log("onUnitSelected", unit, target, event);
+        const el = props.columnRef?.current;
+        let overlayPosition = null;
+        if (unit != null && el != null && target != null) {
+          const rect = el.getBoundingClientRect();
+          const targetRect = target.getBoundingClientRect();
+
+          overlayPosition = {
+            x: targetRect.left - rect.left,
+            y: targetRect.top - rect.top,
+            width: targetRect.width,
+            height: targetRect.height,
+          };
+        }
+        props.onUnitSelected?.(unit?.unit_id, unit);
+
+        return set({
+          selectedUnit: unit?.unit_id,
+          selectedUnitData: unit,
+          overlayPosition,
+        });
+      },
+    }))
   );
 
-  return h(
-    DispatchContext.Provider,
-    { value: _onUnitSelected },
-    h(UnitSelectionContext.Provider, { value }, children)
-  );
-}
-
-export interface ColumnArgs {
-  col_id?: number;
-  unit_id?: number;
-  project_id?: number;
-  status_code?: "in process";
-}
+  const { units, selectedUnit } = props;
 
-type ColumnManagerData = [ColumnArgs, (c: ColumnArgs) => void];
+  useEffect(() => {
+    // Synchronize store with provided props
+    if (selectedUnit != null) {
+      const unitData = units?.find((u) => u.unit_id === selectedUnit);
+      store.setState({ selectedUnit, selectedUnitData: unitData });
+    } else {
+      store.setState({ selectedUnit: null, selectedUnitData: null });
+    }
+  }, [selectedUnit, units]);
 
-const ColumnNavCtx = createContext<ColumnManagerData | null>(null);
+  return h(UnitSelectionContext.Provider, { value: store }, props.children);
+}
 
-export function useColumnNav(
-  defaultArgs: ColumnArgs = { col_id: 495, unit_id: null }
-): ColumnManagerData {
-  const ctx = useContext(ColumnNavCtx);
-  if (ctx != null) return ctx;
+export function useUnitSelectionTarget(
+  unit: IUnit
+): [React.RefObject<HTMLElement>, boolean, (evt: Event) => void] {
+  const ref = useRef<HTMLElement>();
+  const selectedUnit = useSelectedUnit();
+  const onSelectUnit = useUnitSelectionStore((state) => state.onUnitSelected);
+  const selected = selectedUnit?.unit_id == unit.unit_id;
 
-  const [columnArgs, setColumnArgs] = useState<ColumnArgs>(
-    extractColumnArgs(getQueryString(window.location.search)) ?? defaultArgs
+  const onClick = useCallback(
+    (evt: Event) => {
+      onSelectUnit(unit, ref.current, evt);
+      evt.stopPropagation();
+    },
+    [unit, onSelectUnit]
   );
 
-  useEffect(() => setQueryString(columnArgs), [columnArgs]);
+  useEffect(() => {
+    if (!selected) return;
+    // In case we haven't set the position of the unit (if we don't have a target), set the selected unit
+    onSelectUnit(unit, ref.current, null);
 
-  const { col_id, project_id, status_code } = columnArgs;
-
-  const setCurrentColumn = (obj) => {
-    let args = obj;
-    if ("properties" in obj) {
-      args = { col_id: obj.properties.col_id, project_id, status_code };
-    }
-    // Set query string
-    setQueryString(args);
-    setColumnArgs(args);
-  };
-
-  return [columnArgs, setCurrentColumn];
-}
-
-function extractColumnArgs(search: any): ColumnArgs | null {
-  const { col_id, unit_id, project_id, status_code } = search;
-  if (col_id == null) return null;
-  return { col_id, unit_id, project_id, status_code };
-}
+    // Scroll the unit into view
+    ref.current?.scrollIntoView({
+      behavior: "smooth",
+      block: "center",
+      inline: "nearest",
+    });
+  }, [selected, onSelectUnit]);
 
-export function ColumnNavProvider({ children, ...defaultArgs }) {
-  const value = useColumnNav(defaultArgs as any);
-  return h(ColumnNavCtx.Provider, { value }, children);
+  return [ref, selected, onClick];
 }
 
 export function UnitKeyboardNavigation<T extends BaseUnit>({

package/src/units/types.ts

@@ -1,4 +1,3 @@
-import { ColumnAxisType } from "@macrostrat/column-components";
 export interface IUnit {
   unit_id: number;
   col_id: number;
@@ -8,19 +7,9 @@ export interface IUnit {
   [x: string]: any;
 }
 
-enum MacrostratAxisKey {
-  AGE = "age",
-  POS = "pos"
+export interface RectBounds {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
 }
-
-function transformAxisType(t: ColumnAxisType): MacrostratAxisKey {
-  switch (t) {
-    case "age":
-      return MacrostratAxisKey.AGE;
-    case "height":
-    case "depth":
-      return MacrostratAxisKey.POS;
-  }
-}
-
-export { MacrostratAxisKey, transformAxisType };

package/dist/esm/age-axis.64c509ee.js

@@ -1,41 +0,0 @@
-import $lfxOo$macrostrathyper from "@macrostrat/hyper";
-import {ColumnContext as $lfxOo$ColumnContext, ColumnAxis as $lfxOo$ColumnAxis, ColumnSVG as $lfxOo$ColumnSVG} from "@macrostrat/column-components";
-import {useContext as $lfxOo$useContext} from "react";
-
-
-
-
-// import "@macrostrat/timescale/dist/timescale.css";
-//
-const $43794af7643cdf40$var$AgeAxisCore = ({ ticks: ticks, tickSpacing: tickSpacing = 40, showDomain: showDomain = false })=>{
-    const { pixelHeight: pixelHeight } = (0, $lfxOo$useContext)((0, $lfxOo$ColumnContext));
-    // A tick roughly every 40 pixels
-    let v = Math.max(Math.round(pixelHeight / tickSpacing), 1);
-    return (0, $lfxOo$macrostrathyper)("g.axis", {
-        transform: "translate(20 0)"
-    }, [
-        (0, $lfxOo$macrostrathyper)((0, $lfxOo$ColumnAxis), {
-            ticks: v,
-            showDomain: showDomain
-        })
-    ]);
-};
-function $43794af7643cdf40$export$25ce20521d0ab97d(props) {
-    const { ticks: ticks, tickSpacing: tickSpacing, showLabel: showLabel = true, paddingV: paddingV = 10, showDomain: showDomain, ...rest } = props;
-    // Not sure where this extra 5px comes from.
-    return (0, $lfxOo$macrostrathyper)("div.column.age-axis", [
-        (0, $lfxOo$macrostrathyper).if(showLabel)("div.age-axis-label", "Age (Ma)"),
-        (0, $lfxOo$macrostrathyper)((0, $lfxOo$ColumnSVG), {
-            paddingV: paddingV,
-            ...rest
-        }, (0, $lfxOo$macrostrathyper)($43794af7643cdf40$var$AgeAxisCore, {
-            ticks: ticks,
-            tickSpacing: tickSpacing,
-            showDomain: showDomain
-        }))
-    ]);
-}
-
-
-export {$43794af7643cdf40$export$25ce20521d0ab97d as AgeAxis};
-//# sourceMappingURL=age-axis.64c509ee.js.map

package/dist/esm/age-axis.64c509ee.js.map

@@ -1 +0,0 @@
-{"mappings":";;;;;;;AAOA,qDAAqD;AACrD,EAAE;AACF,MAAM,oCAAc,CAAC,SAAE,KAAK,eAAE,cAAc,gBAAI,aAAa,OAAO;IAClE,MAAM,eAAE,WAAW,EAAE,GAAG,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,oBAAY;IAC/C,iCAAiC;IACjC,IAAI,IAAI,KAAK,GAAG,CAAC,KAAK,KAAK,CAAC,cAAc,cAAc;IAExD,OAAO,CAAA,GAAA,sBAAA,EAAE,UAAU;QAAE,WAAW;IAAkB,GAAG;QACnD,CAAA,GAAA,sBAAA,EAAE,CAAA,GAAA,iBAAS,GAAG;YACZ,OAAO;wBACP;QACF;KACD;AACH;AAEO,SAAS,0CAAQ,KAAK;IAC3B,MAAM,SACJ,KAAK,eACL,WAAW,aACX,YAAY,gBACZ,WAAW,gBACX,UAAU,EACV,GAAG,MACJ,GAAG;IAEJ,4CAA4C;IAC5C,OAAO,CAAA,GAAA,sBAAA,EAAE,uBAAuB;QAC9B,CAAA,GAAA,sBAAA,EAAE,EAAE,CAAC,WAAW,sBAAsB;QACtC,CAAA,GAAA,sBAAA,EACE,CAAA,GAAA,gBAAQ,GACR;sBAAE;YAAU,GAAG,IAAI;QAAC,GACpB,CAAA,GAAA,sBAAA,EAAE,mCAAa;mBAAE;yBAAO;wBAAa;QAAW;KAEnD;AACH","sources":["packages/column-views/src/age-axis.ts"],"sourcesContent":["import h from \"@macrostrat/hyper\";\nimport {\n  ColumnSVG,\n  ColumnAxis,\n  ColumnContext,\n} from \"@macrostrat/column-components\";\nimport { useContext } from \"react\";\n// import \"@macrostrat/timescale/dist/timescale.css\";\n//\nconst AgeAxisCore = ({ ticks, tickSpacing = 40, showDomain = false }) => {\n  const { pixelHeight } = useContext(ColumnContext);\n  // A tick roughly every 40 pixels\n  let v = Math.max(Math.round(pixelHeight / tickSpacing), 1);\n\n  return h(\"g.axis\", { transform: \"translate(20 0)\" }, [\n    h(ColumnAxis, {\n      ticks: v,\n      showDomain,\n    }),\n  ]);\n};\n\nexport function AgeAxis(props) {\n  const {\n    ticks,\n    tickSpacing,\n    showLabel = true,\n    paddingV = 10,\n    showDomain,\n    ...rest\n  } = props;\n\n  // Not sure where this extra 5px comes from.\n  return h(\"div.column.age-axis\", [\n    h.if(showLabel)(\"div.age-axis-label\", \"Age (Ma)\"),\n    h(\n      ColumnSVG,\n      { paddingV, ...rest },\n      h(AgeAxisCore, { ticks, tickSpacing, showDomain })\n    ),\n  ]);\n}\n"],"names":[],"version":3,"file":"age-axis.64c509ee.js.map"}

package/dist/esm/boxes.13968b76.js

@@ -1,164 +0,0 @@
-import {resolveID as $d3e69bd163d41f63$export$7be7d732f3de9464, scalePattern as $d3e69bd163d41f63$export$e8deec7b02ce51eb} from "./resolvers.b5c82b78.js";
-import {useSelectedUnit as $4d5d1c15f39f6a14$export$f0dd93f90aa8e5da, useUnitSelectionDispatch as $4d5d1c15f39f6a14$export$77a278d5ca56e309} from "./selection.bbf26d0e.js";
-import {transformAxisType as $faf1eba02aecac6a$export$ab2a19f8a72df19b} from "./types.f016e032.js";
-import "./boxes.module.28873d08.css";
-import $lClM8$boxesmodule605bdcd6js from "./boxes.module.605bdcd6.js";
-import {ColumnAxisType as $lClM8$ColumnAxisType, ColumnContext as $lClM8$ColumnContext, ColumnLayoutContext as $lClM8$ColumnLayoutContext, useColumn as $lClM8$useColumn, useGeologicPattern as $lClM8$useGeologicPattern, ForeignObject as $lClM8$ForeignObject, PatternDefsProvider as $lClM8$PatternDefsProvider} from "@macrostrat/column-components";
-import {SizeAwareLabel as $lClM8$SizeAwareLabel} from "@macrostrat/ui-components";
-import $lClM8$macrostrathyper from "@macrostrat/hyper";
-import {useContext as $lClM8$useContext, useRef as $lClM8$useRef, useCallback as $lClM8$useCallback, useEffect as $lClM8$useEffect, useMemo as $lClM8$useMemo} from "react";
-
-
-function $parcel$interopDefault(a) {
-  return a && a.__esModule ? a.default : a;
-}
-
-
-
-
-
-
-
-
-const $d254716a820e9c85$var$h = (0, $lClM8$macrostrathyper).styled((0, ($parcel$interopDefault($lClM8$boxesmodule605bdcd6js))));
-function $d254716a820e9c85$var$useUnitRect(division, options = {}) {
-    const { widthFraction: widthFraction = 1, axisType: axisType = (0, $lClM8$ColumnAxisType).AGE } = options;
-    const { scale: scale } = (0, $lClM8$useContext)((0, $lClM8$ColumnContext));
-    const { width: width } = (0, $lClM8$useContext)((0, $lClM8$ColumnLayoutContext));
-    const macrostratAxisKey = (0, $faf1eba02aecac6a$export$ab2a19f8a72df19b)(axisType);
-    const t_key = "t_" + macrostratAxisKey;
-    const b_key = "b_" + macrostratAxisKey;
-    const topHeight = division[t_key];
-    const bottomHeight = division[b_key];
-    if (topHeight == null && bottomHeight == null) console.warn(`Missing keys ${t_key} and ${b_key} for ${division.unit_id} (${division.unit_name})`);
-    const y = scale(topHeight);
-    const height = Math.abs(scale(bottomHeight) - y);
-    return {
-        x: width * (1 - widthFraction),
-        y: y,
-        height: height,
-        width: widthFraction * width
-    };
-}
-function $d254716a820e9c85$export$1d8b9ae22d404866(props) {
-    const { division: d, children: children, defaultFill: defaultFill = "transparent", className: className, widthFraction: widthFraction = 1, ...baseBounds } = props;
-    const { axisType: axisType } = (0, $lClM8$useColumn)();
-    const bounds = {
-        ...$d254716a820e9c85$var$useUnitRect(d, {
-            widthFraction: widthFraction,
-            axisType: axisType
-        }),
-        ...baseBounds
-    };
-    const patternID = (0, $d3e69bd163d41f63$export$7be7d732f3de9464)(d);
-    const fill = (0, $lClM8$useGeologicPattern)(patternID, defaultFill);
-    // Allow us to select this unit if in the proper context
-    const ref = (0, $lClM8$useRef)();
-    const [selected, onClick] = $d254716a820e9c85$var$useUnitSelectionManager(ref, d);
-    return $d254716a820e9c85$var$h("g.unit", {
-        className: className
-    }, [
-        $d254716a820e9c85$var$h("rect.unit", {
-            ref: ref,
-            ...bounds,
-            fill: fill,
-            onClick: onClick
-        }),
-        $d254716a820e9c85$var$h.if(selected)("rect.selection-overlay", bounds),
-        children
-    ]);
-}
-function $d254716a820e9c85$var$useUnitSelectionManager(ref, unit) {
-    const selectedUnit = (0, $4d5d1c15f39f6a14$export$f0dd93f90aa8e5da)();
-    const selected = selectedUnit?.unit_id == unit.unit_id;
-    const dispatch = (0, $4d5d1c15f39f6a14$export$77a278d5ca56e309)();
-    const onClick = (0, $lClM8$useCallback)((evt)=>{
-        dispatch(unit, ref.current, evt);
-        evt.stopPropagation();
-    }, [
-        unit,
-        ref,
-        dispatch
-    ]);
-    (0, $lClM8$useEffect)(()=>{
-        if (!selected) return;
-        // In case we haven't set the position of the unit (if we don't have a target), set the selected unit
-        dispatch(unit, ref.current, null);
-        // Scroll the unit into view
-        ref.current?.scrollIntoView({
-            behavior: "smooth",
-            block: "center",
-            inline: "nearest"
-        });
-    }, [
-        selected
-    ]);
-    return [
-        selected,
-        onClick
-    ];
-}
-function $d254716a820e9c85$export$b4f0ca233b98f9af(props) {
-    const { division: division, label: label, onLabelUpdated: onLabelUpdated, widthFraction: widthFraction, ...baseBounds } = props;
-    const { axisType: axisType } = (0, $lClM8$useColumn)();
-    const bounds = {
-        ...$d254716a820e9c85$var$useUnitRect(division, {
-            widthFraction: widthFraction,
-            axisType: axisType
-        }),
-        ...baseBounds
-    };
-    const { width: width, height: height } = bounds;
-    return $d254716a820e9c85$var$h($d254716a820e9c85$export$1d8b9ae22d404866, {
-        className: "labeled-unit",
-        division: division,
-        ...bounds
-    }, [
-        $d254716a820e9c85$var$h((0, $lClM8$ForeignObject), {
-            ...bounds,
-            className: "unit-label-container"
-        }, $d254716a820e9c85$var$h((0, $lClM8$SizeAwareLabel), {
-            className: "unit-overlay",
-            labelClassName: "unit-label",
-            style: {
-                width: width,
-                height: height
-            },
-            label: label,
-            onVisibilityChanged (viz) {
-                onLabelUpdated(label, viz);
-            }
-        }))
-    ]);
-}
-function $d254716a820e9c85$export$5d1cdfabe8dc8085(props) {
-    const { unitComponent: unitComponent = $d254716a820e9c85$export$1d8b9ae22d404866, unitComponentProps: unitComponentProps = {} } = props;
-    const { divisions: divisions } = (0, $lClM8$useContext)((0, $lClM8$ColumnContext));
-    if (divisions.length == 0) {
-        console.warn("No divisions found in column context");
-        return null;
-    }
-    const children = (0, $lClM8$useMemo)(()=>{
-        return divisions.map((division, i)=>{
-            // @ts-ignore
-            return $d254716a820e9c85$var$h(unitComponent, {
-                division: division,
-                key: division.unit_id,
-                axisType: (0, $lClM8$ColumnAxisType).HEIGHT,
-                ...unitComponentProps
-            });
-        });
-    }, [
-        divisions,
-        unitComponent,
-        unitComponentProps
-    ]);
-    return $d254716a820e9c85$var$h((0, $lClM8$PatternDefsProvider), {
-        resolveID: $d3e69bd163d41f63$export$7be7d732f3de9464,
-        scalePattern: $d3e69bd163d41f63$export$e8deec7b02ce51eb
-    }, $d254716a820e9c85$var$h("g.divisions", children));
-}
-
-
-export {$d254716a820e9c85$export$1d8b9ae22d404866 as Unit, $d254716a820e9c85$export$b4f0ca233b98f9af as LabeledUnit, $d254716a820e9c85$export$5d1cdfabe8dc8085 as UnitBoxes};
-//# sourceMappingURL=boxes.13968b76.js.map

package/dist/esm/boxes.13968b76.js.map

@@ -1 +0,0 @@
-{"mappings":"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","sources":["packages/column-views/src/units/boxes.ts"],"sourcesContent":["import {\n  ColumnAxisType,\n  ColumnContext,\n  ColumnLayoutContext,\n  ForeignObject,\n  PatternDefsProvider,\n  useColumn,\n  useGeologicPattern,\n} from \"@macrostrat/column-components\";\nimport { SizeAwareLabel, Clickable } from \"@macrostrat/ui-components\";\nimport hyper from \"@macrostrat/hyper\";\nimport {\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { resolveID, scalePattern } from \"./resolvers\";\nimport { useSelectedUnit, useUnitSelectionDispatch } from \"./selection\";\nimport { IUnit, transformAxisType } from \"./types\";\nimport styles from \"./boxes.module.sass\";\n\nconst h = hyper.styled(styles);\n\nexport interface RectBounds {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\ninterface UnitRectOptions {\n  widthFraction?: number;\n  axisType?: ColumnAxisType;\n}\n\ninterface UnitProps extends Clickable, Partial<RectBounds>, UnitRectOptions {\n  division: IUnit;\n  resolveID?(IUnit): string;\n  UUID?: string;\n  defaultFill?: string;\n  widthFraction?: number;\n  children?: ReactNode;\n  className?: string;\n}\n\nexport interface LabeledUnitProps\n  extends UnitRectOptions,\n    Clickable,\n    Partial<RectBounds> {\n  division: IUnit;\n  label: string;\n  onLabelUpdated?(label: string, shown: boolean);\n  halfWidth?: boolean;\n}\n\nfunction useUnitRect(\n  division: IUnit,\n  options: UnitRectOptions = {}\n): RectBounds {\n  const { widthFraction = 1, axisType = ColumnAxisType.AGE } = options;\n  const { scale } = useContext(ColumnContext);\n  const { width } = useContext(ColumnLayoutContext);\n  const macrostratAxisKey = transformAxisType(axisType);\n  const t_key = \"t_\" + macrostratAxisKey;\n  const b_key = \"b_\" + macrostratAxisKey;\n\n  const topHeight = division[t_key];\n  const bottomHeight = division[b_key];\n  if (topHeight == null && bottomHeight == null) {\n    console.warn(\n      `Missing keys ${t_key} and ${b_key} for ${division.unit_id} (${division.unit_name})`\n    );\n  }\n\n  const y = scale(topHeight);\n  const height = Math.abs(scale(bottomHeight) - y);\n\n  return {\n    x: width * (1 - widthFraction),\n    y,\n    height,\n    width: widthFraction * width,\n  };\n}\n\nfunction Unit(props: UnitProps) {\n  const {\n    division: d,\n    children,\n    defaultFill = \"transparent\",\n    className,\n    widthFraction = 1,\n    ...baseBounds\n  } = props;\n\n  const { axisType } = useColumn();\n  const bounds = {\n    ...useUnitRect(d, { widthFraction, axisType }),\n    ...baseBounds,\n  };\n  const patternID = resolveID(d);\n  const fill = useGeologicPattern(patternID, defaultFill);\n  // Allow us to select this unit if in the proper context\n\n  const ref = useRef<HTMLElement>();\n\n  const [selected, onClick] = useUnitSelectionManager(ref, d);\n\n  return h(\"g.unit\", { className }, [\n    h(\"rect.unit\", {\n      ref,\n      ...bounds,\n      fill,\n      onClick,\n    }),\n    h.if(selected)(\"rect.selection-overlay\", bounds),\n    children,\n  ]);\n}\n\nfunction useUnitSelectionManager(\n  ref: React.RefObject<HTMLElement>,\n  unit: IUnit\n): [boolean, (evt: Event) => void] {\n  const selectedUnit = useSelectedUnit();\n  const selected = selectedUnit?.unit_id == unit.unit_id;\n\n  const dispatch = useUnitSelectionDispatch();\n\n  const onClick = useCallback(\n    (evt: Event) => {\n      dispatch(unit, ref.current, evt);\n      evt.stopPropagation();\n    },\n    [unit, ref, dispatch]\n  );\n\n  useEffect(() => {\n    if (!selected) return;\n    // In case we haven't set the position of the unit (if we don't have a target), set the selected unit\n    dispatch(unit, ref.current, null);\n\n    // Scroll the unit into view\n    ref.current?.scrollIntoView({\n      behavior: \"smooth\",\n      block: \"center\",\n      inline: \"nearest\",\n    });\n  }, [selected]);\n\n  return [selected, onClick];\n}\n\nfunction LabeledUnit(props: LabeledUnitProps) {\n  const { division, label, onLabelUpdated, widthFraction, ...baseBounds } =\n    props;\n\n  const { axisType } = useColumn();\n  const bounds = {\n    ...useUnitRect(division, { widthFraction, axisType }),\n    ...baseBounds,\n  };\n  const { width, height } = bounds;\n  return h(Unit, { className: \"labeled-unit\", division, ...bounds }, [\n    h(\n      ForeignObject,\n      { ...bounds, className: \"unit-label-container\" },\n      h(SizeAwareLabel, {\n        className: \"unit-overlay\",\n        labelClassName: \"unit-label\",\n        style: { width, height },\n        label,\n        onVisibilityChanged(viz) {\n          onLabelUpdated(label, viz);\n        },\n      })\n    ),\n  ]);\n}\n\nfunction UnitBoxes<T>(props: {\n  unitComponent: React.FunctionComponent<{ division: T }>;\n  unitComponentProps?: any;\n  transformDivisions?(divisions: T[]): T[];\n  transformDivision?: (\n    division: any,\n    index: number,\n    divisions: any[]\n  ) => T | null;\n}) {\n  const { unitComponent = Unit, unitComponentProps = {} } = props;\n  const { divisions } = useContext(ColumnContext);\n\n  if (divisions.length == 0) {\n    console.warn(\"No divisions found in column context\");\n    return null;\n  }\n\n  const children = useMemo(() => {\n    return divisions.map((division: any, i) => {\n      // @ts-ignore\n      return h(unitComponent, {\n        division,\n        key: division.unit_id,\n        axisType: ColumnAxisType.HEIGHT,\n        ...unitComponentProps,\n      });\n    });\n  }, [divisions, unitComponent, unitComponentProps]);\n\n  return h(\n    PatternDefsProvider,\n    { resolveID, scalePattern },\n    h(\"g.divisions\", children)\n  );\n}\n\nexport { LabeledUnit, Unit, UnitBoxes, UnitProps };\n"],"names":[],"version":3,"file":"boxes.13968b76.js.map"}

package/dist/esm/boxes.module.28873d08.css

@@ -1,4 +0,0 @@
-.WkKD8q_unit-label-container {
-  pointer-events: none;
-}
-/*# sourceMappingURL=boxes.module.28873d08.css.map */

package/dist/esm/boxes.module.28873d08.css.map

@@ -1 +0,0 @@
-{"mappings":"AAAA","sources":["packages/column-views/src/units/boxes.module.sass"],"sourcesContent":[".unit-label-container\n  pointer-events: none\n\n"],"names":[],"version":3,"file":"boxes.module.28873d08.css.map"}

package/dist/esm/boxes.module.605bdcd6.js

@@ -1,13 +0,0 @@
-
-function $parcel$export(e, n, v, s) {
-  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
-}
-var $b9031ec72fd2f651$exports = {};
-
-$parcel$export($b9031ec72fd2f651$exports, "unit-label-container", () => $b9031ec72fd2f651$export$7756584041496870, (v) => $b9031ec72fd2f651$export$7756584041496870 = v);
-var $b9031ec72fd2f651$export$7756584041496870;
-$b9031ec72fd2f651$export$7756584041496870 = `WkKD8q_unit-label-container`;
-
-
-export {$b9031ec72fd2f651$exports as default};
-//# sourceMappingURL=boxes.module.605bdcd6.js.map

package/dist/esm/boxes.module.605bdcd6.js.map

@@ -1 +0,0 @@
-{"mappings":";;;;;;;AAAA,IAAA;AAAA,4CAAyC,CAAC,2BAA2B,CAAC","sources":["packages/column-views/src/units/boxes.module.sass"],"sourcesContent":[".unit-label-container\n  pointer-events: none\n\n"],"names":[],"version":3,"file":"boxes.module.605bdcd6.js.map"}