@macrostrat/column-views 3.10.0 → 3.12.0

package/dist/timescale-zoom.js

@@ -0,0 +1,191 @@
+import { useState, useMemo, useCallback } from "react";
+import { useAnimatedAgeWindow } from "./animated-age-window.js";
+const MIN_TIMESCALE_LEVEL = 1;
+const MAX_TIMESCALE_LEVEL = 5;
+const LEVEL_WINDOW = 3;
+const DEFAULT_LEVEL = 3;
+const SELECTED_INTERVAL_STYLE = { fontWeight: "bold" };
+function useTimescaleZoom(options) {
+  const {
+    fullExtent,
+    enabled = true,
+    levelWindow = LEVEL_WINDOW,
+    defaultLevel = DEFAULT_LEVEL,
+    minLevel = MIN_TIMESCALE_LEVEL,
+    maxLevel = MAX_TIMESCALE_LEVEL,
+    duration,
+    selectedIntervalStyle = SELECTED_INTERVAL_STYLE
+  } = options;
+  const anim = useAnimatedAgeWindow({ fullExtent, duration });
+  const [intervals, setIntervals] = useState([]);
+  const [addedIntervals, setAddedIntervals] = useState([]);
+  const [selectedTimescaleID, setSelectedTimescaleID] = useState(
+    null
+  );
+  const selectedInterval = intervals[intervals.length - 1] ?? null;
+  const selectedIntervals = useMemo(() => {
+    if (selectedInterval == null) return addedIntervals;
+    return [selectedInterval, ...addedIntervals];
+  }, [selectedInterval, addedIntervals]);
+  const reset = useCallback(() => {
+    setIntervals([]);
+    setAddedIntervals([]);
+    setSelectedTimescaleID(null);
+    anim.reset();
+  }, [anim.reset]);
+  const extendToInterval = useCallback(
+    (interval) => {
+      let added = addedIntervals.filter((d) => d.oid !== interval.oid);
+      const wasSelected = added.length !== addedIntervals.length;
+      if (!wasSelected && interval.oid !== selectedInterval?.oid) {
+        added = [...addedIntervals, interval];
+      }
+      setAddedIntervals(added);
+      let selection = added;
+      if (selectedInterval != null) {
+        selection = [selectedInterval, ...added];
+      }
+      if (selection.length === 0) {
+        anim.reset();
+        return;
+      }
+      anim.zoomToWindow(intervalsWindow(selection));
+    },
+    [addedIntervals, selectedInterval, anim.zoomToWindow, anim.reset]
+  );
+  const zoomToInterval = useCallback(
+    (interval, timescaleID = null) => {
+      const containing = intervals.filter(
+        (d) => d.lvl < interval.lvl && d.eag >= interval.eag && d.lag <= interval.lag
+      );
+      setIntervals([...containing, interval]);
+      setAddedIntervals([]);
+      setSelectedTimescaleID(timescaleID);
+      anim.zoomToInterval(interval);
+    },
+    [intervals, anim.zoomToInterval]
+  );
+  const onClickTimescaleInterval = useCallback(
+    (event, data) => {
+      const interval = data?.interval;
+      if (interval == null || interval.lvl == null) return;
+      const timescaleID = data.timescaleID ?? null;
+      if (event?.shiftKey) {
+        extendToInterval(interval);
+        return;
+      }
+      if (interval.oid === selectedInterval?.oid && addedIntervals.length === 0) {
+        const next = intervals.slice(0, -1);
+        setIntervals(next);
+        setSelectedTimescaleID(null);
+        const parent = next[next.length - 1] ?? null;
+        if (parent == null) {
+          anim.reset();
+        } else {
+          anim.zoomToInterval(parent);
+        }
+        return;
+      }
+      zoomToInterval(interval, timescaleID);
+    },
+    [
+      intervals,
+      selectedInterval,
+      selectedTimescaleID,
+      addedIntervals,
+      extendToInterval,
+      zoomToInterval,
+      anim.reset
+    ]
+  );
+  const timescaleIntervalStyle = useCallback(
+    (interval) => {
+      if (selectedIntervals.some((d) => d.oid === interval.oid)) {
+        return selectedIntervalStyle;
+      }
+      return {};
+    },
+    [selectedIntervals, selectedIntervalStyle]
+  );
+  const levels = useMemo(() => {
+    let level = defaultLevel;
+    for (const interval of selectedIntervals) {
+      if (interval.lvl != null) level = Math.max(level, interval.lvl);
+    }
+    return levelsForSelected(level, { levelWindow, minLevel, maxLevel });
+  }, [selectedIntervals, defaultLevel, levelWindow, minLevel, maxLevel]);
+  if (!enabled) {
+    return {
+      ...disabledZoom,
+      selectedTimescaleID: null,
+      selectedIntervals: [],
+      timescaleLevels: levels,
+      reset,
+      zoomToInterval,
+      onClickTimescaleInterval,
+      timescaleIntervalStyle
+    };
+  }
+  const window = anim.window ?? fullExtent;
+  return {
+    enabled: true,
+    window,
+    intervals,
+    selectedInterval,
+    selectedTimescaleID,
+    selectedIntervals,
+    timescaleLevels: levels,
+    isFullExtent: anim.isFullExtent,
+    isAnimating: anim.isAnimating,
+    reset,
+    zoomToInterval,
+    onClickTimescaleInterval,
+    timescaleIntervalStyle,
+    columnProps: {
+      showTimescale: true,
+      timescaleLevels: levels,
+      timescaleIntervalStyle,
+      onClickTimescaleInterval,
+      t_age: window?.t_age,
+      b_age: window?.b_age,
+      isTransitioning: anim.isAnimating
+    }
+  };
+}
+const disabledZoom = {
+  enabled: false,
+  window: null,
+  intervals: [],
+  selectedInterval: null,
+  isFullExtent: true,
+  isAnimating: false,
+  columnProps: {}
+};
+function levelsForSelected(selectedLevel, options) {
+  const { levelWindow, minLevel, maxLevel } = options;
+  const span = Math.max(levelWindow - 1, 0);
+  const lo = Math.min(
+    Math.max(selectedLevel - 1, minLevel),
+    Math.max(maxLevel - span, minLevel)
+  );
+  return [lo, lo + span];
+}
+function intervalsWindow(intervals) {
+  return {
+    t_age: Math.min(...intervals.map((d) => d.lag)),
+    b_age: Math.max(...intervals.map((d) => d.eag))
+  };
+}
+function unitsAgeExtent(units) {
+  if (units == null || units.length === 0) return null;
+  return {
+    t_age: Math.min(...units.map((d) => d.t_age)),
+    b_age: Math.max(...units.map((d) => d.b_age))
+  };
+}
+export {
+  levelsForSelected,
+  unitsAgeExtent,
+  useTimescaleZoom
+};
+//# sourceMappingURL=timescale-zoom.js.map

package/dist/timescale-zoom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timescale-zoom.js","sources":["../src/timescale-zoom.ts"],"sourcesContent":["/** Click-to-zoom navigation over geologic time.\n *\n * `useTimescaleZoom` turns clicks on a column's timescale into an animated\n * age window: clicking an interval zooms to it, clicking the interval you are\n * already in zooms back out a level, and the timescale shows a sliding window\n * of levels that follows the selection, so finer intervals come into reach as\n * you drill. The result spreads straight onto a `Column`.\n */\nimport { type CSSProperties, useCallback, useMemo, useState } from \"react\";\nimport type {\n  Interval,\n  IntervalStyleBuilder,\n  TimescaleClickData,\n  TimescaleClickHandler,\n} from \"@macrostrat/timescale\";\nimport { type AgeWindow, useAnimatedAgeWindow } from \"./animated-age-window\";\n\n/** Coarsest level worth showing; level 0 is \"all of geologic time\" */\nconst MIN_TIMESCALE_LEVEL = 1;\n/** Deepest level in the timescale (age/stage) */\nconst MAX_TIMESCALE_LEVEL = 5;\n/** How many levels are shown at once */\nconst LEVEL_WINDOW = 3;\n/** The level anchored on before an interval is picked. 3 (period) puts the\n * starting window at era–epoch, the levels a `Column` shows by default. */\nconst DEFAULT_LEVEL = 3;\n\nconst SELECTED_INTERVAL_STYLE: CSSProperties = { fontWeight: \"bold\" };\n\nexport interface UseTimescaleZoomOptions {\n  /** The full data extent — the window zooming returns to. `null` until the\n   * data (and hence the extent) is known. */\n  fullExtent: AgeWindow | null;\n  /** When false the hook reports no window and no column props, so a view can\n   * offer zooming as an option without changing hook order (default `true`). */\n  enabled?: boolean;\n  /** How many timescale levels to show at once (default 3) */\n  levelWindow?: number;\n  /** The level to anchor the window on before an interval is picked\n   * (default 3, period) */\n  defaultLevel?: number;\n  minLevel?: number;\n  maxLevel?: number;\n  /** Animation duration in ms */\n  duration?: number;\n  /** Style for the selected interval — the one whose click zooms out\n   * (default bold) */\n  selectedIntervalStyle?: CSSProperties;\n}\n\n/** Timescale and age-window props, ready to spread onto a `Column`. */\nexport interface TimescaleZoomColumnProps {\n  showTimescale?: boolean;\n  timescaleLevels?: [number, number];\n  timescaleIntervalStyle?: IntervalStyleBuilder;\n  onClickTimescaleInterval?: TimescaleClickHandler;\n  t_age?: number;\n  b_age?: number;\n  isTransitioning?: boolean;\n}\n\nexport interface TimescaleZoom {\n  enabled: boolean;\n  /** The rendered age window — `null` when disabled or before the extent is\n   * known */\n  window: AgeWindow | null;\n  /** The drill path: coarse to fine, the last entry being the selection */\n  intervals: Interval[];\n  selectedInterval: Interval | null;\n  /** The timescale the selection was made in, when the click said so */\n  selectedTimescaleID: number | null;\n  /** Every interval in the selection: the one drilled to, plus any added by\n   * shift-clicking. The window spans all of them. */\n  selectedIntervals: Interval[];\n  /** The levels the timescale should show, following the selection */\n  timescaleLevels: [number, number];\n  isFullExtent: boolean;\n  isAnimating: boolean;\n  /** Return to the full extent, clearing the drill path */\n  reset(): void;\n  zoomToInterval(interval: Interval): void;\n  onClickTimescaleInterval: TimescaleClickHandler;\n  timescaleIntervalStyle: (interval: Interval) => CSSProperties;\n  columnProps: TimescaleZoomColumnProps;\n}\n\nexport function useTimescaleZoom(\n  options: UseTimescaleZoomOptions,\n): TimescaleZoom {\n  const {\n    fullExtent,\n    enabled = true,\n    levelWindow = LEVEL_WINDOW,\n    defaultLevel = DEFAULT_LEVEL,\n    minLevel = MIN_TIMESCALE_LEVEL,\n    maxLevel = MAX_TIMESCALE_LEVEL,\n    duration,\n    selectedIntervalStyle = SELECTED_INTERVAL_STYLE,\n  } = options;\n\n  const anim = useAnimatedAgeWindow({ fullExtent, duration });\n\n  // The intervals drilled through; the last one is the current selection\n  const [intervals, setIntervals] = useState<Interval[]>([]);\n  // Intervals shift-clicked into the selection alongside it\n  const [addedIntervals, setAddedIntervals] = useState<Interval[]>([]);\n  // Which timescale the selection was made in. The same interval is drawn in\n  // every timescale that contains it, and those copies are not the same\n  // selection: clicking one in another column moves the selection there.\n  const [selectedTimescaleID, setSelectedTimescaleID] = useState<number | null>(\n    null,\n  );\n  const selectedInterval = intervals[intervals.length - 1] ?? null;\n\n  const selectedIntervals = useMemo(() => {\n    if (selectedInterval == null) return addedIntervals;\n    return [selectedInterval, ...addedIntervals];\n  }, [selectedInterval, addedIntervals]);\n\n  const reset = useCallback(() => {\n    setIntervals([]);\n    setAddedIntervals([]);\n    setSelectedTimescaleID(null);\n    anim.reset();\n  }, [anim.reset]);\n\n  /** Take the interval clicked into (or out of) the selection, and span the\n   * result — how you widen a window to the interval next door. */\n  const extendToInterval = useCallback(\n    (interval: Interval) => {\n      let added = addedIntervals.filter((d) => d.oid !== interval.oid);\n      const wasSelected = added.length !== addedIntervals.length;\n      if (!wasSelected && interval.oid !== selectedInterval?.oid) {\n        added = [...addedIntervals, interval];\n      }\n      setAddedIntervals(added);\n\n      let selection = added;\n      if (selectedInterval != null) {\n        selection = [selectedInterval, ...added];\n      }\n      if (selection.length === 0) {\n        anim.reset();\n        return;\n      }\n      anim.zoomToWindow(intervalsWindow(selection));\n    },\n    [addedIntervals, selectedInterval, anim.zoomToWindow, anim.reset],\n  );\n\n  const zoomToInterval = useCallback(\n    (interval: Interval, timescaleID: number | null = null) => {\n      // Keep only the coarser intervals that actually contain this one, so\n      // stepping sideways into a different parent (the last stage of the\n      // Cambrian → the first of the Ordovician) doesn't strand the old one\n      const containing = intervals.filter(\n        (d) =>\n          d.lvl < interval.lvl &&\n          d.eag >= interval.eag &&\n          d.lag <= interval.lag,\n      );\n      setIntervals([...containing, interval]);\n      setAddedIntervals([]);\n      setSelectedTimescaleID(timescaleID);\n      anim.zoomToInterval(interval);\n    },\n    [intervals, anim.zoomToInterval],\n  );\n\n  const onClickTimescaleInterval = useCallback<TimescaleClickHandler>(\n    (event: Event, data: TimescaleClickData & { timescaleID?: number }) => {\n      const interval = data?.interval;\n      if (interval == null || interval.lvl == null) return;\n\n      const timescaleID = data.timescaleID ?? null;\n      // A click in a different timescale is a different selection, even on the\n      // same interval: it moves to that column rather than zooming back out\n      const sameTimescale =\n        timescaleID == null ||\n        selectedTimescaleID == null ||\n        timescaleID === selectedTimescaleID;\n\n      // Shift-click widens the window instead of moving it, so a selection can\n      // grow into the interval next door\n      if ((event as MouseEvent)?.shiftKey) {\n        extendToInterval(interval);\n        return;\n      }\n\n      // Clicking the interval you are in is the way back out: pop a level, or\n      // return to the full extent past the root\n      if (interval.oid === selectedInterval?.oid && addedIntervals.length === 0) {\n        const next = intervals.slice(0, -1);\n        setIntervals(next);\n        setSelectedTimescaleID(null);\n        const parent = next[next.length - 1] ?? null;\n        if (parent == null) {\n          anim.reset();\n        } else {\n          anim.zoomToInterval(parent);\n        }\n        return;\n      }\n\n      // Every other click navigates *to* the interval clicked, whatever its\n      // rank: a finer one drills in, a neighbor moves along the timescale, a\n      // coarser one zooms out to it\n      zoomToInterval(interval, timescaleID);\n    },\n    [\n      intervals,\n      selectedInterval,\n      selectedTimescaleID,\n      addedIntervals,\n      extendToInterval,\n      zoomToInterval,\n      anim.reset,\n    ],\n  );\n\n  const timescaleIntervalStyle = useCallback(\n    (interval: Interval): CSSProperties => {\n      if (selectedIntervals.some((d) => d.oid === interval.oid)) {\n        return selectedIntervalStyle;\n      }\n      return {};\n    },\n    [selectedIntervals, selectedIntervalStyle],\n  );\n\n  const levels = useMemo(() => {\n    let level = defaultLevel;\n    for (const interval of selectedIntervals) {\n      if (interval.lvl != null) level = Math.max(level, interval.lvl);\n    }\n    return levelsForSelected(level, { levelWindow, minLevel, maxLevel });\n  }, [selectedIntervals, defaultLevel, levelWindow, minLevel, maxLevel]);\n\n  if (!enabled) {\n    return {\n      ...disabledZoom,\n      selectedTimescaleID: null,\n      selectedIntervals: [],\n      timescaleLevels: levels,\n      reset,\n      zoomToInterval,\n      onClickTimescaleInterval,\n      timescaleIntervalStyle,\n    };\n  }\n\n  const window = anim.window ?? fullExtent;\n\n  return {\n    enabled: true,\n    window,\n    intervals,\n    selectedInterval,\n    selectedTimescaleID,\n    selectedIntervals,\n    timescaleLevels: levels,\n    isFullExtent: anim.isFullExtent,\n    isAnimating: anim.isAnimating,\n    reset,\n    zoomToInterval,\n    onClickTimescaleInterval,\n    timescaleIntervalStyle,\n    columnProps: {\n      showTimescale: true,\n      timescaleLevels: levels,\n      timescaleIntervalStyle,\n      onClickTimescaleInterval,\n      t_age: window?.t_age,\n      b_age: window?.b_age,\n      isTransitioning: anim.isAnimating,\n    },\n  };\n}\n\n/** What the hook reports when zooming is switched off: no window, and no\n * props to change how the column renders. */\nconst disabledZoom: Pick<\n  TimescaleZoom,\n  | \"enabled\"\n  | \"window\"\n  | \"intervals\"\n  | \"selectedInterval\"\n  | \"isFullExtent\"\n  | \"isAnimating\"\n  | \"columnProps\"\n> = {\n  enabled: false,\n  window: null,\n  intervals: [],\n  selectedInterval: null,\n  isFullExtent: true,\n  isAnimating: false,\n  columnProps: {},\n};\n\ninterface LevelWindowOptions {\n  levelWindow: number;\n  minLevel: number;\n  maxLevel: number;\n}\n\n/** A fixed window of timescale levels that slides with the selected level —\n * one coarser for context, the rest finer to drill into. Clamped so the\n * useless level 0 is never shown. */\nexport function levelsForSelected(\n  selectedLevel: number,\n  options: LevelWindowOptions,\n): [number, number] {\n  const { levelWindow, minLevel, maxLevel } = options;\n  const span = Math.max(levelWindow - 1, 0);\n  const lo = Math.min(\n    Math.max(selectedLevel - 1, minLevel),\n    Math.max(maxLevel - span, minLevel),\n  );\n  return [lo, lo + span];\n}\n\n/** The window spanning a set of intervals. */\nfunction intervalsWindow(intervals: Interval[]): AgeWindow {\n  return {\n    t_age: Math.min(...intervals.map((d) => d.lag)),\n    b_age: Math.max(...intervals.map((d) => d.eag)),\n  };\n}\n\n/** The age extent of a set of units, in the shape the age-window props take.\n * `null` for an empty or absent set. */\nexport function unitsAgeExtent(\n  units: { t_age: number; b_age: number }[] | null | undefined,\n): AgeWindow | null {\n  if (units == null || units.length === 0) return null;\n  return {\n    t_age: Math.min(...units.map((d) => d.t_age)),\n    b_age: Math.max(...units.map((d) => d.b_age)),\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/unit-details/age-range.cjs

@@ -191,6 +191,7 @@ exports.AgeLabel = AgeLabel;
 exports.AgeRange = AgeRange;
 exports.Duration = Duration;
 exports.IntervalProportions = IntervalProportions;
+exports.Proportion = Proportion;
 exports.getAge = getAge;
 exports.getAgeRange = getAgeRange;
 //# sourceMappingURL=age-range.cjs.map

package/dist/unit-details/age-range.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"age-range.cjs","sources":["../../src/unit-details/age-range.ts"],"sourcesContent":["import {\n  DataField,\n  IntervalShort,\n  IntervalTag,\n  type IntervalTagProps,\n  ItemList,\n  Value,\n} from \"@macrostrat/data-components\";\nimport { useMacrostratDefs } from \"@macrostrat/data-provider\";\nimport h from \"./age-range.module.sass\";\nimport { formatProportion, formatRange } from \"./utils\";\nimport classNames from \"classnames\";\nimport { useMemo } from \"react\";\n\nexport function AgeField({ unit, children, ...rest }) {\n  const [_b_age, _t_age, _unit] = getAgeRange(unit);\n\n  return h(\n    DataField,\n    {\n      label: \"Age\",\n      value: formatRange(_b_age, _t_age),\n      unit: _unit,\n      ...rest,\n    },\n    children,\n  );\n}\n\nexport function AgeRange({\n  data,\n  className,\n}: {\n  data: {\n    t_age: number;\n    b_age: number;\n  };\n  className?: string;\n}) {\n  const [_b_age, _t_age, _unit] = getAgeRange(data);\n\n  return h(Value, {\n    value: formatRange(_b_age, _t_age),\n    unit: _unit,\n    className,\n  });\n}\n\nexport function AgeLabel({\n  age,\n  maximumFractionDigits = 2,\n  minimumFractionDigits = 0,\n  className,\n}: {\n  age: number;\n  className?: string;\n  maximumFractionDigits?: number;\n  minimumFractionDigits?: number;\n}) {\n  /** Component to display a single age value with unit conversion from\n   * Ma to ka or Ga as appropriate.\n   */\n  const [value, unit] = getAge(age);\n\n  const _value = value.toLocaleString(\"en-US\", {\n    maximumFractionDigits,\n    minimumFractionDigits,\n  });\n\n  return h(Value, { value: _value, unit, className });\n}\n\nexport function Duration({\n  value,\n  maximumFractionDigits = 2,\n  minimumFractionDigits = 0,\n}) {\n  let unit = \"Myr\";\n  if (value < 0.8) {\n    unit = \"kyr\";\n    value *= 1000;\n    if (value < 5) {\n      unit = \"yr\";\n      value *= 1000;\n    }\n  } else if (value > 1000) {\n    unit = \"Gyr\";\n    value /= 1000;\n  }\n\n  let _value = value.toLocaleString(\"en-US\", {\n    maximumFractionDigits,\n    minimumFractionDigits,\n  });\n\n  return h(Value, { value: _value, unit });\n}\n\ninterface UnitIntervalConstraints {\n  b_int_id?: number;\n  t_int_id?: number;\n  b_prop?: number;\n  t_prop?: number;\n  b_int_name?: string;\n  t_int_name?: string;\n  b_age?: number;\n  t_age?: number;\n}\n\nexport interface IntervalProportionsProps extends Omit<\n  IntervalTagProps,\n  \"interval\"\n> {\n  unit: UnitIntervalConstraints;\n  showProportions?: boolean;\n  calculateProportionsFromAges?: boolean;\n  onClickItem?: any;\n}\n\nexport function IntervalProportions({\n  unit,\n  className,\n  showProportions,\n  calculateProportionsFromAges = true,\n  ...rest\n}: IntervalProportionsProps) {\n  /** Display the proportions of the unit that belong to the base and top intervals, if they are different */\n  if (unit.b_int_id == null && unit.t_int_id == null) return null;\n\n  let _showProps = showProportions;\n\n  const i0 = unit.b_int_id;\n  const i1 = unit.t_int_id;\n\n  const ints = new Set([i0, i1]);\n\n  /** Get interval information */\n  const intervalMap = useMacrostratDefs(\"intervals\", Array.from(ints), null);\n  const [int0, int1] = useMemo(() => {\n    const int0 = intervalMap?.get(i0) ?? {};\n    if (i0 === i1) {\n      return [int0, int0];\n    }\n    const int1 = intervalMap?.get(i1) ?? {};\n    return [int0, int1];\n  }, [intervalMap, i0, i1]);\n\n  const interval0: IntervalShort = {\n    id: i0,\n    name: unit.b_int_name,\n    ...int0,\n  };\n\n  let b_prop = unit.b_prop;\n  let t_prop = unit.t_prop;\n\n  // If we have b_age and t_age, then we can calculate proportions if they are not given\n  if (b_prop == null && unit.b_age != null && calculateProportionsFromAges) {\n    b_prop = getProportion(unit.b_age, int0);\n  }\n  if (t_prop == null && unit.t_age != null && calculateProportionsFromAges) {\n    t_prop = getProportion(unit.t_age, int1);\n  }\n\n  // If there are no proportions given and we are not explicitly directed to show them,\n  // then we set them to hidden.\n  if (b_prop == null && t_prop == null) {\n    _showProps ??= false;\n  }\n\n  /*\n    Set default proportions to 0 and 1 if they are not given,\n    so that we can display \"base\" and \"top\" labels\n   */\n  b_prop ??= 0;\n  t_prop ??= 1;\n\n  let p0: any = null;\n  let p1: any = null;\n\n  if (_showProps !== false) {\n    p1 = h(Proportion, { value: t_prop });\n\n    if (i0 !== i1 || b_prop !== 0 || t_prop !== 1) {\n      // We have a single interval with undefined proportions\n      p0 = h(Proportion, { value: b_prop });\n    }\n\n    if (i0 === i1 && (b_prop !== 0 || t_prop !== 1)) {\n      p0 = h(\"span.joint-proportion\", [p0, \" \", h(\"span.sep\", \"to\"), \" \", p1]);\n    }\n  }\n\n  return h(\n    ItemList,\n    { className: classNames(\"interval-proportions\", className) },\n    [\n      h(IntervalTag, {\n        interval: interval0,\n        prefix: p0,\n        ...rest,\n      }),\n      h.if(i0 != i1)(\"span.discourage-break\", [\n        h(\"span.sep\", \" to \"),\n        h(IntervalTag, {\n          interval: {\n            id: i1,\n            name: unit.t_int_name,\n            ...int1,\n          },\n          prefix: p1,\n          ...rest,\n        }),\n      ]),\n    ],\n  );\n}\n\nfunction getProportion(age: number, interval: IntervalShort): number | null {\n  /** Get proportion with the age */\n  return (interval.b_age - age) / (interval.b_age - interval.t_age);\n}\n\nfunction Proportion({ value }) {\n  let content = null;\n  if (value == 0) {\n    content = \"base\";\n  } else if (value == 1) {\n    content = \"top\";\n  } else {\n    content = formatProportion(value * 100) + \"%\";\n  }\n\n  return h(\"span.proportion\", content);\n}\n\nexport function getAgeRange(_unit) {\n  let b_age = _unit.b_age;\n  let t_age = _unit.t_age;\n  let unit = \"Ma\";\n\n  if (b_age < 0.8 && t_age < 1.2) {\n    b_age *= 1000;\n    t_age *= 1000;\n    unit = \"ka\";\n  } else if (b_age > 800 && t_age > 1200) {\n    b_age /= 1000;\n    t_age /= 1000;\n    unit = \"Ga\";\n  }\n\n  return [b_age, t_age, unit];\n}\n\nexport function getAge(value) {\n  /** Get the age value in Ma, ka, or Ga as appropriate */\n  let unit = \"Ma\";\n  if (value < 0.8) {\n    unit = \"ka\";\n    value *= 1000;\n    if (value < 5) {\n      unit = \"yr\";\n      value *= 1000;\n    }\n  } else if (value > 1000) {\n    unit = \"Ga\";\n    value /= 1000;\n  }\n\n  return [value, unit];\n}\n"],"names":["h","DataField","formatRange","Value","useMacrostratDefs","useMemo","int0","int1","ItemList","classNames","IntervalTag","formatProportion"],"mappings":"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"}
+{"version":3,"file":"age-range.cjs","sources":["../../src/unit-details/age-range.ts"],"sourcesContent":["import {\n  DataField,\n  IntervalShort,\n  IntervalTag,\n  type IntervalTagProps,\n  ItemList,\n  Value,\n} from \"@macrostrat/data-components\";\nimport { useMacrostratDefs } from \"@macrostrat/data-provider\";\nimport h from \"./age-range.module.sass\";\nimport { formatProportion, formatRange } from \"./utils\";\nimport classNames from \"classnames\";\nimport { ReactNode, useMemo } from \"react\";\n\nexport function AgeField({ unit, children, ...rest }) {\n  const [_b_age, _t_age, _unit] = getAgeRange(unit);\n\n  return h(\n    DataField,\n    {\n      label: \"Age\",\n      value: formatRange(_b_age, _t_age),\n      unit: _unit,\n      ...rest,\n    },\n    children,\n  );\n}\n\nexport function AgeRange({\n  data,\n  className,\n}: {\n  data: {\n    t_age: number;\n    b_age: number;\n  };\n  className?: string;\n}) {\n  const [_b_age, _t_age, _unit] = getAgeRange(data);\n\n  return h(Value, {\n    value: formatRange(_b_age, _t_age),\n    unit: _unit,\n    className,\n  });\n}\n\nexport function AgeLabel({\n  age,\n  maximumFractionDigits = 2,\n  minimumFractionDigits = 0,\n  className,\n}: {\n  age: number;\n  className?: string;\n  maximumFractionDigits?: number;\n  minimumFractionDigits?: number;\n}) {\n  /** Component to display a single age value with unit conversion from\n   * Ma to ka or Ga as appropriate.\n   */\n  const [value, unit] = getAge(age);\n\n  const _value = value.toLocaleString(\"en-US\", {\n    maximumFractionDigits,\n    minimumFractionDigits,\n  });\n\n  return h(Value, { value: _value, unit, className });\n}\n\nexport function Duration({\n  value,\n  maximumFractionDigits = 2,\n  minimumFractionDigits = 0,\n}) {\n  let unit = \"Myr\";\n  if (value < 0.8) {\n    unit = \"kyr\";\n    value *= 1000;\n    if (value < 5) {\n      unit = \"yr\";\n      value *= 1000;\n    }\n  } else if (value > 1000) {\n    unit = \"Gyr\";\n    value /= 1000;\n  }\n\n  let _value = value.toLocaleString(\"en-US\", {\n    maximumFractionDigits,\n    minimumFractionDigits,\n  });\n\n  return h(Value, { value: _value, unit });\n}\n\ninterface UnitIntervalConstraints {\n  b_int_id?: number;\n  t_int_id?: number;\n  b_prop?: number;\n  t_prop?: number;\n  b_int_name?: string;\n  t_int_name?: string;\n  b_age?: number;\n  t_age?: number;\n}\n\nexport interface IntervalProportionsProps extends Omit<\n  IntervalTagProps,\n  \"interval\"\n> {\n  unit: UnitIntervalConstraints;\n  showProportions?: boolean;\n  calculateProportionsFromAges?: boolean;\n  onClickItem?: any;\n}\n\nexport function IntervalProportions({\n  unit,\n  className,\n  showProportions,\n  calculateProportionsFromAges = true,\n  ...rest\n}: IntervalProportionsProps) {\n  /** Display the proportions of the unit that belong to the base and top intervals, if they are different */\n  if (unit.b_int_id == null && unit.t_int_id == null) return null;\n\n  let _showProps = showProportions;\n\n  const i0 = unit.b_int_id;\n  const i1 = unit.t_int_id;\n\n  const ints = new Set([i0, i1]);\n\n  /** Get interval information */\n  const intervalMap = useMacrostratDefs(\"intervals\", Array.from(ints), null);\n  const [int0, int1] = useMemo(() => {\n    const int0 = intervalMap?.get(i0) ?? {};\n    if (i0 === i1) {\n      return [int0, int0];\n    }\n    const int1 = intervalMap?.get(i1) ?? {};\n    return [int0, int1];\n  }, [intervalMap, i0, i1]);\n\n  const interval0: IntervalShort = {\n    id: i0,\n    name: unit.b_int_name,\n    ...int0,\n  };\n\n  let b_prop = unit.b_prop;\n  let t_prop = unit.t_prop;\n\n  // If we have b_age and t_age, then we can calculate proportions if they are not given\n  if (b_prop == null && unit.b_age != null && calculateProportionsFromAges) {\n    b_prop = getProportion(unit.b_age, int0);\n  }\n  if (t_prop == null && unit.t_age != null && calculateProportionsFromAges) {\n    t_prop = getProportion(unit.t_age, int1);\n  }\n\n  // If there are no proportions given and we are not explicitly directed to show them,\n  // then we set them to hidden.\n  if (b_prop == null && t_prop == null) {\n    _showProps ??= false;\n  }\n\n  /*\n    Set default proportions to 0 and 1 if they are not given,\n    so that we can display \"base\" and \"top\" labels\n   */\n  b_prop ??= 0;\n  t_prop ??= 1;\n\n  let p0: any = null;\n  let p1: any = null;\n\n  if (_showProps !== false) {\n    p1 = h(Proportion, { value: t_prop });\n\n    if (i0 !== i1 || b_prop !== 0 || t_prop !== 1) {\n      // We have a single interval with undefined proportions\n      p0 = h(Proportion, { value: b_prop });\n    }\n\n    if (i0 === i1 && (b_prop !== 0 || t_prop !== 1)) {\n      p0 = h(\"span.joint-proportion\", [p0, \" \", h(\"span.sep\", \"to\"), \" \", p1]);\n    }\n  }\n\n  return h(\n    ItemList,\n    { className: classNames(\"interval-proportions\", className) },\n    [\n      h(IntervalTag, {\n        interval: interval0,\n        prefix: p0,\n        ...rest,\n      }),\n      h.if(i0 != i1)(\"span.discourage-break\", [\n        h(\"span.sep\", \" to \"),\n        h(IntervalTag, {\n          interval: {\n            id: i1,\n            name: unit.t_int_name,\n            ...int1,\n          },\n          prefix: p1,\n          ...rest,\n        }),\n      ]),\n    ],\n  );\n}\n\nfunction getProportion(age: number, interval: IntervalShort): number | null {\n  /** Get proportion with the age */\n  return (interval.b_age - age) / (interval.b_age - interval.t_age);\n}\n\nexport function Proportion({ value }: { value: number }) {\n  let content: ReactNode | null = null;\n  if (value == 0) {\n    content = \"base\";\n  } else if (value == 1) {\n    content = \"top\";\n  } else {\n    content = formatProportion(value * 100) + \"%\";\n  }\n\n  return h(\"span.proportion\", content);\n}\n\nexport function getAgeRange(_unit) {\n  let b_age = _unit.b_age;\n  let t_age = _unit.t_age;\n  let unit = \"Ma\";\n\n  if (b_age < 0.8 && t_age < 1.2) {\n    b_age *= 1000;\n    t_age *= 1000;\n    unit = \"ka\";\n  } else if (b_age > 800 && t_age > 1200) {\n    b_age /= 1000;\n    t_age /= 1000;\n    unit = \"Ga\";\n  }\n\n  return [b_age, t_age, unit];\n}\n\nexport function getAge(value) {\n  /** Get the age value in Ma, ka, or Ga as appropriate */\n  let unit = \"Ma\";\n  if (value < 0.8) {\n    unit = \"ka\";\n    value *= 1000;\n    if (value < 5) {\n      unit = \"yr\";\n      value *= 1000;\n    }\n  } else if (value > 1000) {\n    unit = \"Ga\";\n    value /= 1000;\n  }\n\n  return [value, unit];\n}\n"],"names":["h","DataField","formatRange","Value","useMacrostratDefs","useMemo","int0","int1","ItemList","classNames","IntervalTag","formatProportion"],"mappings":"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"}

package/dist/unit-details/age-range.d.ts

@@ -1,4 +1,5 @@
 import { IntervalTagProps } from '@macrostrat/data-components';
+import { ReactNode } from 'react';
 export declare function AgeField({ unit, children, ...rest }: {
     [x: string]: any;
     unit: any;
@@ -63,9 +64,12 @@ export interface IntervalProportionsProps extends Omit<IntervalTagProps, "interv
     onClickItem?: any;
 }
 export declare function IntervalProportions({ unit, className, showProportions, calculateProportionsFromAges, ...rest }: IntervalProportionsProps): import('react').FunctionComponentElement<{
-    children?: import('react').ReactNode;
+    children?: ReactNode;
     className: string;
 }> | null;
+export declare function Proportion({ value }: {
+    value: number;
+}): import('react').DOMElement<import('react').DOMAttributes<Element>, Element>;
 export declare function getAgeRange(_unit: any): any[];
 export declare function getAge(value: any): any[];
 export {};

package/dist/unit-details/age-range.js

@@ -188,6 +188,7 @@ export {
   AgeRange,
   Duration,
   IntervalProportions,
+  Proportion,
   getAge,
   getAgeRange
 };

package/dist/unit-details/age-range.js.map

@@ -1 +1 @@
-{"version":3,"file":"age-range.js","sources":["../../src/unit-details/age-range.ts"],"sourcesContent":["import {\n  DataField,\n  IntervalShort,\n  IntervalTag,\n  type IntervalTagProps,\n  ItemList,\n  Value,\n} from \"@macrostrat/data-components\";\nimport { useMacrostratDefs } from \"@macrostrat/data-provider\";\nimport h from \"./age-range.module.sass\";\nimport { formatProportion, formatRange } from \"./utils\";\nimport classNames from \"classnames\";\nimport { useMemo } from \"react\";\n\nexport function AgeField({ unit, children, ...rest }) {\n  const [_b_age, _t_age, _unit] = getAgeRange(unit);\n\n  return h(\n    DataField,\n    {\n      label: \"Age\",\n      value: formatRange(_b_age, _t_age),\n      unit: _unit,\n      ...rest,\n    },\n    children,\n  );\n}\n\nexport function AgeRange({\n  data,\n  className,\n}: {\n  data: {\n    t_age: number;\n    b_age: number;\n  };\n  className?: string;\n}) {\n  const [_b_age, _t_age, _unit] = getAgeRange(data);\n\n  return h(Value, {\n    value: formatRange(_b_age, _t_age),\n    unit: _unit,\n    className,\n  });\n}\n\nexport function AgeLabel({\n  age,\n  maximumFractionDigits = 2,\n  minimumFractionDigits = 0,\n  className,\n}: {\n  age: number;\n  className?: string;\n  maximumFractionDigits?: number;\n  minimumFractionDigits?: number;\n}) {\n  /** Component to display a single age value with unit conversion from\n   * Ma to ka or Ga as appropriate.\n   */\n  const [value, unit] = getAge(age);\n\n  const _value = value.toLocaleString(\"en-US\", {\n    maximumFractionDigits,\n    minimumFractionDigits,\n  });\n\n  return h(Value, { value: _value, unit, className });\n}\n\nexport function Duration({\n  value,\n  maximumFractionDigits = 2,\n  minimumFractionDigits = 0,\n}) {\n  let unit = \"Myr\";\n  if (value < 0.8) {\n    unit = \"kyr\";\n    value *= 1000;\n    if (value < 5) {\n      unit = \"yr\";\n      value *= 1000;\n    }\n  } else if (value > 1000) {\n    unit = \"Gyr\";\n    value /= 1000;\n  }\n\n  let _value = value.toLocaleString(\"en-US\", {\n    maximumFractionDigits,\n    minimumFractionDigits,\n  });\n\n  return h(Value, { value: _value, unit });\n}\n\ninterface UnitIntervalConstraints {\n  b_int_id?: number;\n  t_int_id?: number;\n  b_prop?: number;\n  t_prop?: number;\n  b_int_name?: string;\n  t_int_name?: string;\n  b_age?: number;\n  t_age?: number;\n}\n\nexport interface IntervalProportionsProps extends Omit<\n  IntervalTagProps,\n  \"interval\"\n> {\n  unit: UnitIntervalConstraints;\n  showProportions?: boolean;\n  calculateProportionsFromAges?: boolean;\n  onClickItem?: any;\n}\n\nexport function IntervalProportions({\n  unit,\n  className,\n  showProportions,\n  calculateProportionsFromAges = true,\n  ...rest\n}: IntervalProportionsProps) {\n  /** Display the proportions of the unit that belong to the base and top intervals, if they are different */\n  if (unit.b_int_id == null && unit.t_int_id == null) return null;\n\n  let _showProps = showProportions;\n\n  const i0 = unit.b_int_id;\n  const i1 = unit.t_int_id;\n\n  const ints = new Set([i0, i1]);\n\n  /** Get interval information */\n  const intervalMap = useMacrostratDefs(\"intervals\", Array.from(ints), null);\n  const [int0, int1] = useMemo(() => {\n    const int0 = intervalMap?.get(i0) ?? {};\n    if (i0 === i1) {\n      return [int0, int0];\n    }\n    const int1 = intervalMap?.get(i1) ?? {};\n    return [int0, int1];\n  }, [intervalMap, i0, i1]);\n\n  const interval0: IntervalShort = {\n    id: i0,\n    name: unit.b_int_name,\n    ...int0,\n  };\n\n  let b_prop = unit.b_prop;\n  let t_prop = unit.t_prop;\n\n  // If we have b_age and t_age, then we can calculate proportions if they are not given\n  if (b_prop == null && unit.b_age != null && calculateProportionsFromAges) {\n    b_prop = getProportion(unit.b_age, int0);\n  }\n  if (t_prop == null && unit.t_age != null && calculateProportionsFromAges) {\n    t_prop = getProportion(unit.t_age, int1);\n  }\n\n  // If there are no proportions given and we are not explicitly directed to show them,\n  // then we set them to hidden.\n  if (b_prop == null && t_prop == null) {\n    _showProps ??= false;\n  }\n\n  /*\n    Set default proportions to 0 and 1 if they are not given,\n    so that we can display \"base\" and \"top\" labels\n   */\n  b_prop ??= 0;\n  t_prop ??= 1;\n\n  let p0: any = null;\n  let p1: any = null;\n\n  if (_showProps !== false) {\n    p1 = h(Proportion, { value: t_prop });\n\n    if (i0 !== i1 || b_prop !== 0 || t_prop !== 1) {\n      // We have a single interval with undefined proportions\n      p0 = h(Proportion, { value: b_prop });\n    }\n\n    if (i0 === i1 && (b_prop !== 0 || t_prop !== 1)) {\n      p0 = h(\"span.joint-proportion\", [p0, \" \", h(\"span.sep\", \"to\"), \" \", p1]);\n    }\n  }\n\n  return h(\n    ItemList,\n    { className: classNames(\"interval-proportions\", className) },\n    [\n      h(IntervalTag, {\n        interval: interval0,\n        prefix: p0,\n        ...rest,\n      }),\n      h.if(i0 != i1)(\"span.discourage-break\", [\n        h(\"span.sep\", \" to \"),\n        h(IntervalTag, {\n          interval: {\n            id: i1,\n            name: unit.t_int_name,\n            ...int1,\n          },\n          prefix: p1,\n          ...rest,\n        }),\n      ]),\n    ],\n  );\n}\n\nfunction getProportion(age: number, interval: IntervalShort): number | null {\n  /** Get proportion with the age */\n  return (interval.b_age - age) / (interval.b_age - interval.t_age);\n}\n\nfunction Proportion({ value }) {\n  let content = null;\n  if (value == 0) {\n    content = \"base\";\n  } else if (value == 1) {\n    content = \"top\";\n  } else {\n    content = formatProportion(value * 100) + \"%\";\n  }\n\n  return h(\"span.proportion\", content);\n}\n\nexport function getAgeRange(_unit) {\n  let b_age = _unit.b_age;\n  let t_age = _unit.t_age;\n  let unit = \"Ma\";\n\n  if (b_age < 0.8 && t_age < 1.2) {\n    b_age *= 1000;\n    t_age *= 1000;\n    unit = \"ka\";\n  } else if (b_age > 800 && t_age > 1200) {\n    b_age /= 1000;\n    t_age /= 1000;\n    unit = \"Ga\";\n  }\n\n  return [b_age, t_age, unit];\n}\n\nexport function getAge(value) {\n  /** Get the age value in Ma, ka, or Ga as appropriate */\n  let unit = \"Ma\";\n  if (value < 0.8) {\n    unit = \"ka\";\n    value *= 1000;\n    if (value < 5) {\n      unit = \"yr\";\n      value *= 1000;\n    }\n  } else if (value > 1000) {\n    unit = \"Ga\";\n    value /= 1000;\n  }\n\n  return [value, unit];\n}\n"],"names":["int0","int1"],"mappings":"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"}
+{"version":3,"file":"age-range.js","sources":["../../src/unit-details/age-range.ts"],"sourcesContent":["import {\n  DataField,\n  IntervalShort,\n  IntervalTag,\n  type IntervalTagProps,\n  ItemList,\n  Value,\n} from \"@macrostrat/data-components\";\nimport { useMacrostratDefs } from \"@macrostrat/data-provider\";\nimport h from \"./age-range.module.sass\";\nimport { formatProportion, formatRange } from \"./utils\";\nimport classNames from \"classnames\";\nimport { ReactNode, useMemo } from \"react\";\n\nexport function AgeField({ unit, children, ...rest }) {\n  const [_b_age, _t_age, _unit] = getAgeRange(unit);\n\n  return h(\n    DataField,\n    {\n      label: \"Age\",\n      value: formatRange(_b_age, _t_age),\n      unit: _unit,\n      ...rest,\n    },\n    children,\n  );\n}\n\nexport function AgeRange({\n  data,\n  className,\n}: {\n  data: {\n    t_age: number;\n    b_age: number;\n  };\n  className?: string;\n}) {\n  const [_b_age, _t_age, _unit] = getAgeRange(data);\n\n  return h(Value, {\n    value: formatRange(_b_age, _t_age),\n    unit: _unit,\n    className,\n  });\n}\n\nexport function AgeLabel({\n  age,\n  maximumFractionDigits = 2,\n  minimumFractionDigits = 0,\n  className,\n}: {\n  age: number;\n  className?: string;\n  maximumFractionDigits?: number;\n  minimumFractionDigits?: number;\n}) {\n  /** Component to display a single age value with unit conversion from\n   * Ma to ka or Ga as appropriate.\n   */\n  const [value, unit] = getAge(age);\n\n  const _value = value.toLocaleString(\"en-US\", {\n    maximumFractionDigits,\n    minimumFractionDigits,\n  });\n\n  return h(Value, { value: _value, unit, className });\n}\n\nexport function Duration({\n  value,\n  maximumFractionDigits = 2,\n  minimumFractionDigits = 0,\n}) {\n  let unit = \"Myr\";\n  if (value < 0.8) {\n    unit = \"kyr\";\n    value *= 1000;\n    if (value < 5) {\n      unit = \"yr\";\n      value *= 1000;\n    }\n  } else if (value > 1000) {\n    unit = \"Gyr\";\n    value /= 1000;\n  }\n\n  let _value = value.toLocaleString(\"en-US\", {\n    maximumFractionDigits,\n    minimumFractionDigits,\n  });\n\n  return h(Value, { value: _value, unit });\n}\n\ninterface UnitIntervalConstraints {\n  b_int_id?: number;\n  t_int_id?: number;\n  b_prop?: number;\n  t_prop?: number;\n  b_int_name?: string;\n  t_int_name?: string;\n  b_age?: number;\n  t_age?: number;\n}\n\nexport interface IntervalProportionsProps extends Omit<\n  IntervalTagProps,\n  \"interval\"\n> {\n  unit: UnitIntervalConstraints;\n  showProportions?: boolean;\n  calculateProportionsFromAges?: boolean;\n  onClickItem?: any;\n}\n\nexport function IntervalProportions({\n  unit,\n  className,\n  showProportions,\n  calculateProportionsFromAges = true,\n  ...rest\n}: IntervalProportionsProps) {\n  /** Display the proportions of the unit that belong to the base and top intervals, if they are different */\n  if (unit.b_int_id == null && unit.t_int_id == null) return null;\n\n  let _showProps = showProportions;\n\n  const i0 = unit.b_int_id;\n  const i1 = unit.t_int_id;\n\n  const ints = new Set([i0, i1]);\n\n  /** Get interval information */\n  const intervalMap = useMacrostratDefs(\"intervals\", Array.from(ints), null);\n  const [int0, int1] = useMemo(() => {\n    const int0 = intervalMap?.get(i0) ?? {};\n    if (i0 === i1) {\n      return [int0, int0];\n    }\n    const int1 = intervalMap?.get(i1) ?? {};\n    return [int0, int1];\n  }, [intervalMap, i0, i1]);\n\n  const interval0: IntervalShort = {\n    id: i0,\n    name: unit.b_int_name,\n    ...int0,\n  };\n\n  let b_prop = unit.b_prop;\n  let t_prop = unit.t_prop;\n\n  // If we have b_age and t_age, then we can calculate proportions if they are not given\n  if (b_prop == null && unit.b_age != null && calculateProportionsFromAges) {\n    b_prop = getProportion(unit.b_age, int0);\n  }\n  if (t_prop == null && unit.t_age != null && calculateProportionsFromAges) {\n    t_prop = getProportion(unit.t_age, int1);\n  }\n\n  // If there are no proportions given and we are not explicitly directed to show them,\n  // then we set them to hidden.\n  if (b_prop == null && t_prop == null) {\n    _showProps ??= false;\n  }\n\n  /*\n    Set default proportions to 0 and 1 if they are not given,\n    so that we can display \"base\" and \"top\" labels\n   */\n  b_prop ??= 0;\n  t_prop ??= 1;\n\n  let p0: any = null;\n  let p1: any = null;\n\n  if (_showProps !== false) {\n    p1 = h(Proportion, { value: t_prop });\n\n    if (i0 !== i1 || b_prop !== 0 || t_prop !== 1) {\n      // We have a single interval with undefined proportions\n      p0 = h(Proportion, { value: b_prop });\n    }\n\n    if (i0 === i1 && (b_prop !== 0 || t_prop !== 1)) {\n      p0 = h(\"span.joint-proportion\", [p0, \" \", h(\"span.sep\", \"to\"), \" \", p1]);\n    }\n  }\n\n  return h(\n    ItemList,\n    { className: classNames(\"interval-proportions\", className) },\n    [\n      h(IntervalTag, {\n        interval: interval0,\n        prefix: p0,\n        ...rest,\n      }),\n      h.if(i0 != i1)(\"span.discourage-break\", [\n        h(\"span.sep\", \" to \"),\n        h(IntervalTag, {\n          interval: {\n            id: i1,\n            name: unit.t_int_name,\n            ...int1,\n          },\n          prefix: p1,\n          ...rest,\n        }),\n      ]),\n    ],\n  );\n}\n\nfunction getProportion(age: number, interval: IntervalShort): number | null {\n  /** Get proportion with the age */\n  return (interval.b_age - age) / (interval.b_age - interval.t_age);\n}\n\nexport function Proportion({ value }: { value: number }) {\n  let content: ReactNode | null = null;\n  if (value == 0) {\n    content = \"base\";\n  } else if (value == 1) {\n    content = \"top\";\n  } else {\n    content = formatProportion(value * 100) + \"%\";\n  }\n\n  return h(\"span.proportion\", content);\n}\n\nexport function getAgeRange(_unit) {\n  let b_age = _unit.b_age;\n  let t_age = _unit.t_age;\n  let unit = \"Ma\";\n\n  if (b_age < 0.8 && t_age < 1.2) {\n    b_age *= 1000;\n    t_age *= 1000;\n    unit = \"ka\";\n  } else if (b_age > 800 && t_age > 1200) {\n    b_age /= 1000;\n    t_age /= 1000;\n    unit = \"Ga\";\n  }\n\n  return [b_age, t_age, unit];\n}\n\nexport function getAge(value) {\n  /** Get the age value in Ma, ka, or Ga as appropriate */\n  let unit = \"Ma\";\n  if (value < 0.8) {\n    unit = \"ka\";\n    value *= 1000;\n    if (value < 5) {\n      unit = \"yr\";\n      value *= 1000;\n    }\n  } else if (value > 1000) {\n    unit = \"Ga\";\n    value /= 1000;\n  }\n\n  return [value, unit];\n}\n"],"names":["int0","int1"],"mappings":";;;;;;AAcO,SAAS,SAAS,EAAE,MAAM,UAAU,GAAG,QAAQ;AACpD,QAAM,CAAC,QAAQ,QAAQ,KAAK,IAAI,YAAY,IAAI;AAEhD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO,YAAY,QAAQ,MAAM;AAAA,MACjC,MAAM;AAAA,MACN,GAAG;AAAA,IAAA;AAAA,IAEL;AAAA,EAAA;AAEJ;AAEO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AACF,GAMG;AACD,QAAM,CAAC,QAAQ,QAAQ,KAAK,IAAI,YAAY,IAAI;AAEhD,SAAO,EAAE,OAAO;AAAA,IACd,OAAO,YAAY,QAAQ,MAAM;AAAA,IACjC,MAAM;AAAA,IACN;AAAA,EAAA,CACD;AACH;AAEO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB;AACF,GAKG;AAID,QAAM,CAAC,OAAO,IAAI,IAAI,OAAO,GAAG;AAEhC,QAAM,SAAS,MAAM,eAAe,SAAS;AAAA,IAC3C;AAAA,IACA;AAAA,EAAA,CACD;AAED,SAAO,EAAE,OAAO,EAAE,OAAO,QAAQ,MAAM,WAAW;AACpD;AAEO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA,wBAAwB;AAAA,EACxB,wBAAwB;AAC1B,GAAG;AACD,MAAI,OAAO;AACX,MAAI,QAAQ,KAAK;AACf,WAAO;AACP,aAAS;AACT,QAAI,QAAQ,GAAG;AACb,aAAO;AACP,eAAS;AAAA,IACX;AAAA,EACF,WAAW,QAAQ,KAAM;AACvB,WAAO;AACP,aAAS;AAAA,EACX;AAEA,MAAI,SAAS,MAAM,eAAe,SAAS;AAAA,IACzC;AAAA,IACA;AAAA,EAAA,CACD;AAED,SAAO,EAAE,OAAO,EAAE,OAAO,QAAQ,MAAM;AACzC;AAuBO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA,+BAA+B;AAAA,EAC/B,GAAG;AACL,GAA6B;AAE3B,MAAI,KAAK,YAAY,QAAQ,KAAK,YAAY,KAAM,QAAO;AAE3D,MAAI,aAAa;AAEjB,QAAM,KAAK,KAAK;AAChB,QAAM,KAAK,KAAK;AAEhB,QAAM,OAAO,oBAAI,IAAI,CAAC,IAAI,EAAE,CAAC;AAG7B,QAAM,cAAc,kBAAkB,aAAa,MAAM,KAAK,IAAI,GAAG,IAAI;AACzE,QAAM,CAAC,MAAM,IAAI,IAAI,QAAQ,MAAM;AACjC,UAAMA,QAAO,aAAa,IAAI,EAAE,KAAK,CAAA;AACrC,QAAI,OAAO,IAAI;AACb,aAAO,CAACA,OAAMA,KAAI;AAAA,IACpB;AACA,UAAMC,QAAO,aAAa,IAAI,EAAE,KAAK,CAAA;AACrC,WAAO,CAACD,OAAMC,KAAI;AAAA,EACpB,GAAG,CAAC,aAAa,IAAI,EAAE,CAAC;AAExB,QAAM,YAA2B;AAAA,IAC/B,IAAI;AAAA,IACJ,MAAM,KAAK;AAAA,IACX,GAAG;AAAA,EAAA;AAGL,MAAI,SAAS,KAAK;AAClB,MAAI,SAAS,KAAK;AAGlB,MAAI,UAAU,QAAQ,KAAK,SAAS,QAAQ,8BAA8B;AACxE,aAAS,cAAc,KAAK,OAAO,IAAI;AAAA,EACzC;AACA,MAAI,UAAU,QAAQ,KAAK,SAAS,QAAQ,8BAA8B;AACxE,aAAS,cAAc,KAAK,OAAO,IAAI;AAAA,EACzC;AAIA,MAAI,UAAU,QAAQ,UAAU,MAAM;AACpC,mBAAe;AAAA,EACjB;AAMA,aAAW;AACX,aAAW;AAEX,MAAI,KAAU;AACd,MAAI,KAAU;AAEd,MAAI,eAAe,OAAO;AACxB,SAAK,EAAE,YAAY,EAAE,OAAO,QAAQ;AAEpC,QAAI,OAAO,MAAM,WAAW,KAAK,WAAW,GAAG;AAE7C,WAAK,EAAE,YAAY,EAAE,OAAO,QAAQ;AAAA,IACtC;AAEA,QAAI,OAAO,OAAO,WAAW,KAAK,WAAW,IAAI;AAC/C,WAAK,EAAE,yBAAyB,CAAC,IAAI,KAAK,EAAE,YAAY,IAAI,GAAG,KAAK,EAAE,CAAC;AAAA,IACzE;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA,EAAE,WAAW,WAAW,wBAAwB,SAAS,EAAA;AAAA,IACzD;AAAA,MACE,EAAE,aAAa;AAAA,QACb,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,GAAG;AAAA,MAAA,CACJ;AAAA,MACD,EAAE,GAAG,MAAM,EAAE,EAAE,yBAAyB;AAAA,QACtC,EAAE,YAAY,MAAM;AAAA,QACpB,EAAE,aAAa;AAAA,UACb,UAAU;AAAA,YACR,IAAI;AAAA,YACJ,MAAM,KAAK;AAAA,YACX,GAAG;AAAA,UAAA;AAAA,UAEL,QAAQ;AAAA,UACR,GAAG;AAAA,QAAA,CACJ;AAAA,MAAA,CACF;AAAA,IAAA;AAAA,EACH;AAEJ;AAEA,SAAS,cAAc,KAAa,UAAwC;AAE1E,UAAQ,SAAS,QAAQ,QAAQ,SAAS,QAAQ,SAAS;AAC7D;AAEO,SAAS,WAAW,EAAE,SAA4B;AACvD,MAAI,UAA4B;AAChC,MAAI,SAAS,GAAG;AACd,cAAU;AAAA,EACZ,WAAW,SAAS,GAAG;AACrB,cAAU;AAAA,EACZ,OAAO;AACL,cAAU,iBAAiB,QAAQ,GAAG,IAAI;AAAA,EAC5C;AAEA,SAAO,EAAE,mBAAmB,OAAO;AACrC;AAEO,SAAS,YAAY,OAAO;AACjC,MAAI,QAAQ,MAAM;AAClB,MAAI,QAAQ,MAAM;AAClB,MAAI,OAAO;AAEX,MAAI,QAAQ,OAAO,QAAQ,KAAK;AAC9B,aAAS;AACT,aAAS;AACT,WAAO;AAAA,EACT,WAAW,QAAQ,OAAO,QAAQ,MAAM;AACtC,aAAS;AACT,aAAS;AACT,WAAO;AAAA,EACT;AAEA,SAAO,CAAC,OAAO,OAAO,IAAI;AAC5B;AAEO,SAAS,OAAO,OAAO;AAE5B,MAAI,OAAO;AACX,MAAI,QAAQ,KAAK;AACf,WAAO;AACP,aAAS;AACT,QAAI,QAAQ,GAAG;AACb,aAAO;AACP,eAAS;AAAA,IACX;AAAA,EACF,WAAW,QAAQ,KAAM;AACvB,WAAO;AACP,aAAS;AAAA,EACX;AAEA,SAAO,CAAC,OAAO,IAAI;AACrB;"}

package/dist/unit-details/age-window-tag.cjs

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const core = require("@blueprintjs/core");
+const dataComponents = require("@macrostrat/data-components");
+const classNames = require("classnames");
+const ageWindowTag_module = require("./age-window-tag.module.sass.cjs");
+const ageRange = require("./age-range.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const classNames__default = /* @__PURE__ */ _interopDefault(classNames);
+function intervalShortFromTimescale(interval) {
+  return {
+    id: interval.int_id ?? interval.oid,
+    name: interval.nam,
+    color: interval.col,
+    b_age: interval.eag,
+    t_age: interval.lag,
+    rank: interval.lvl
+  };
+}
+function AgeWindowTag(props) {
+  const {
+    interval = null,
+    window = null,
+    onClear,
+    size = dataComponents.TagSize.Small,
+    className
+  } = props;
+  if (interval == null && window == null) return null;
+  let tag = null;
+  if (interval == null) {
+    tag = ageWindowTag_module(dataComponents.Tag, { size, name: ageWindowTag_module(ageRange.AgeRange, { data: window }) });
+  } else if (window == null || windowMatchesInterval(window, interval)) {
+    tag = ageWindowTag_module(dataComponents.IntervalTag, { interval, showAgeRange: true, size });
+  } else {
+    tag = ageWindowTag_module(RefinedIntervalTag, { interval, window, size });
+  }
+  return ageWindowTag_module("span.age-window-tag", { className: classNames__default.default(className) }, [
+    tag,
+    ageWindowTag_module.if(onClear != null)(core.Button, {
+      className: "clear-button",
+      icon: "cross",
+      minimal: true,
+      small: true,
+      title: "Clear",
+      onClick: onClear
+    })
+  ]);
+}
+function RefinedIntervalTag({
+  interval,
+  window,
+  size
+}) {
+  const interaction = dataComponents.useInteractionProps({ int_id: interval.id });
+  return ageWindowTag_module(dataComponents.Tag, {
+    ...interaction,
+    size,
+    name: interval.name,
+    color: interval.color,
+    details: ageWindowTag_module(ageRange.AgeRange, { data: window })
+  });
+}
+function windowMatchesInterval(window, interval) {
+  return window.t_age === interval.t_age && window.b_age === interval.b_age;
+}
+exports.AgeWindowTag = AgeWindowTag;
+exports.intervalShortFromTimescale = intervalShortFromTimescale;
+//# sourceMappingURL=age-window-tag.cjs.map

package/dist/unit-details/age-window-tag.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"age-window-tag.cjs","sources":["../../src/unit-details/age-window-tag.ts"],"sourcesContent":["import { Button } from \"@blueprintjs/core\";\nimport {\n  IntervalShort,\n  IntervalTag,\n  Tag,\n  TagSize,\n  useInteractionProps,\n} from \"@macrostrat/data-components\";\nimport type { Interval } from \"@macrostrat/timescale\";\nimport classNames from \"classnames\";\nimport h from \"./age-window-tag.module.sass\";\nimport { AgeRange } from \"./age-range\";\nimport type { AgeWindow } from \"../animated-age-window\";\n\n/** Adapt a timescale `Interval` (as delivered by a `Timescale` click, with\n * `eag`/`lag`/`nam`/`col`) to the `IntervalShort` shape the tag components\n * take. The id prefers the Macrostrat `int_id` when the interval tree was built\n * from the API, falling back to the interval's own `oid`. */\nexport function intervalShortFromTimescale(interval: Interval): IntervalShort {\n  return {\n    id: interval.int_id ?? interval.oid,\n    name: interval.nam,\n    color: interval.col,\n    b_age: interval.eag,\n    t_age: interval.lag,\n    rank: interval.lvl,\n  };\n}\n\nexport interface AgeWindowTagProps {\n  /** The interval the window was set from, if any. */\n  interval?: IntervalShort | null;\n  /** The rendered window. When it differs from the interval's own span (a\n   * refined window) it is shown in place of the interval's range. */\n  window?: AgeWindow | null;\n  /** Renders a clear button when given. */\n  onClear?: () => void;\n  size?: TagSize;\n  className?: string;\n}\n\n/** A compact, clearable indicator of the age window a column or correlation\n * chart is focused on — an interval tag (linking to the interval, with its\n * range) or a bare age range. Renders nothing without an interval or window,\n * so it can live permanently in a chart's `axisTopContent`. */\nexport function AgeWindowTag(props: AgeWindowTagProps) {\n  const {\n    interval = null,\n    window = null,\n    onClear,\n    size = TagSize.Small,\n    className,\n  } = props;\n  if (interval == null && window == null) return null;\n\n  let tag = null;\n  if (interval == null) {\n    tag = h(Tag, { size, name: h(AgeRange, { data: window }) });\n  } else if (window == null || windowMatchesInterval(window, interval)) {\n    tag = h(IntervalTag, { interval, showAgeRange: true, size });\n  } else {\n    tag = h(RefinedIntervalTag, { interval, window, size });\n  }\n\n  return h(\"span.age-window-tag\", { className: classNames(className) }, [\n    tag,\n    h.if(onClear != null)(Button, {\n      className: \"clear-button\",\n      icon: \"cross\",\n      minimal: true,\n      small: true,\n      title: \"Clear\",\n      onClick: onClear,\n    }),\n  ]);\n}\n\nfunction RefinedIntervalTag({\n  interval,\n  window,\n  size,\n}: {\n  interval: IntervalShort;\n  window: AgeWindow;\n  size: TagSize;\n}) {\n  const interaction = useInteractionProps({ int_id: interval.id });\n  return h(Tag, {\n    ...interaction,\n    size,\n    name: interval.name,\n    color: interval.color,\n    details: h(AgeRange, { data: window }),\n  });\n}\n\nfunction windowMatchesInterval(\n  window: AgeWindow,\n  interval: IntervalShort,\n): boolean {\n  return window.t_age === interval.t_age && window.b_age === interval.b_age;\n}\n"],"names":["TagSize","h","Tag","AgeRange","IntervalTag","classNames","Button","useInteractionProps"],"mappings":";;;;;;;;;AAkBO,SAAS,2BAA2B,UAAmC;AAC5E,SAAO;AAAA,IACL,IAAI,SAAS,UAAU,SAAS;AAAA,IAChC,MAAM,SAAS;AAAA,IACf,OAAO,SAAS;AAAA,IAChB,OAAO,SAAS;AAAA,IAChB,OAAO,SAAS;AAAA,IAChB,MAAM,SAAS;AAAA,EAAA;AAEnB;AAkBO,SAAS,aAAa,OAA0B;AACrD,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,SAAS;AAAA,IACT;AAAA,IACA,OAAOA,eAAAA,QAAQ;AAAA,IACf;AAAA,EAAA,IACE;AACJ,MAAI,YAAY,QAAQ,UAAU,KAAM,QAAO;AAE/C,MAAI,MAAM;AACV,MAAI,YAAY,MAAM;AACpB,UAAMC,oBAAEC,oBAAK,EAAE,MAAM,MAAMD,oBAAEE,SAAAA,UAAU,EAAE,MAAM,OAAA,CAAQ,EAAA,CAAG;AAAA,EAC5D,WAAW,UAAU,QAAQ,sBAAsB,QAAQ,QAAQ,GAAG;AACpE,UAAMF,oBAAEG,4BAAa,EAAE,UAAU,cAAc,MAAM,MAAM;AAAA,EAC7D,OAAO;AACL,UAAMH,oBAAE,oBAAoB,EAAE,UAAU,QAAQ,MAAM;AAAA,EACxD;AAEA,SAAOA,oBAAE,uBAAuB,EAAE,WAAWI,oBAAAA,QAAW,SAAS,KAAK;AAAA,IACpE;AAAA,IACAJ,oBAAE,GAAG,WAAW,IAAI,EAAEK,KAAAA,QAAQ;AAAA,MAC5B,WAAW;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,MACT,OAAO;AAAA,MACP,OAAO;AAAA,MACP,SAAS;AAAA,IAAA,CACV;AAAA,EAAA,CACF;AACH;AAEA,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,cAAcC,eAAAA,oBAAoB,EAAE,QAAQ,SAAS,IAAI;AAC/D,SAAON,oBAAEC,eAAAA,KAAK;AAAA,IACZ,GAAG;AAAA,IACH;AAAA,IACA,MAAM,SAAS;AAAA,IACf,OAAO,SAAS;AAAA,IAChB,SAASD,oBAAEE,SAAAA,UAAU,EAAE,MAAM,QAAQ;AAAA,EAAA,CACtC;AACH;AAEA,SAAS,sBACP,QACA,UACS;AACT,SAAO,OAAO,UAAU,SAAS,SAAS,OAAO,UAAU,SAAS;AACtE;;;"}

package/dist/unit-details/age-window-tag.d.ts

@@ -0,0 +1,26 @@
+import { IntervalShort, TagSize } from '@macrostrat/data-components';
+import { Interval } from '@macrostrat/timescale';
+import { AgeWindow } from '../animated-age-window';
+/** Adapt a timescale `Interval` (as delivered by a `Timescale` click, with
+ * `eag`/`lag`/`nam`/`col`) to the `IntervalShort` shape the tag components
+ * take. The id prefers the Macrostrat `int_id` when the interval tree was built
+ * from the API, falling back to the interval's own `oid`. */
+export declare function intervalShortFromTimescale(interval: Interval): IntervalShort;
+export interface AgeWindowTagProps {
+    /** The interval the window was set from, if any. */
+    interval?: IntervalShort | null;
+    /** The rendered window. When it differs from the interval's own span (a
+     * refined window) it is shown in place of the interval's range. */
+    window?: AgeWindow | null;
+    /** Renders a clear button when given. */
+    onClear?: () => void;
+    size?: TagSize;
+    className?: string;
+}
+/** A compact, clearable indicator of the age window a column or correlation
+ * chart is focused on — an interval tag (linking to the interval, with its
+ * range) or a bare age range. Renders nothing without an interval or window,
+ * so it can live permanently in a chart's `axisTopContent`. */
+export declare function AgeWindowTag(props: AgeWindowTagProps): import('react').ReactElement<{
+    className: string;
+}, string | import('react').JSXElementConstructor<any>> | null;

package/dist/unit-details/age-window-tag.js

@@ -0,0 +1,66 @@
+import { Button } from "@blueprintjs/core";
+import { TagSize, Tag, IntervalTag, useInteractionProps } from "@macrostrat/data-components";
+import classNames from "classnames";
+import h from "./age-window-tag.module.sass.js";
+import { AgeRange } from "./age-range.js";
+function intervalShortFromTimescale(interval) {
+  return {
+    id: interval.int_id ?? interval.oid,
+    name: interval.nam,
+    color: interval.col,
+    b_age: interval.eag,
+    t_age: interval.lag,
+    rank: interval.lvl
+  };
+}
+function AgeWindowTag(props) {
+  const {
+    interval = null,
+    window = null,
+    onClear,
+    size = TagSize.Small,
+    className
+  } = props;
+  if (interval == null && window == null) return null;
+  let tag = null;
+  if (interval == null) {
+    tag = h(Tag, { size, name: h(AgeRange, { data: window }) });
+  } else if (window == null || windowMatchesInterval(window, interval)) {
+    tag = h(IntervalTag, { interval, showAgeRange: true, size });
+  } else {
+    tag = h(RefinedIntervalTag, { interval, window, size });
+  }
+  return h("span.age-window-tag", { className: classNames(className) }, [
+    tag,
+    h.if(onClear != null)(Button, {
+      className: "clear-button",
+      icon: "cross",
+      minimal: true,
+      small: true,
+      title: "Clear",
+      onClick: onClear
+    })
+  ]);
+}
+function RefinedIntervalTag({
+  interval,
+  window,
+  size
+}) {
+  const interaction = useInteractionProps({ int_id: interval.id });
+  return h(Tag, {
+    ...interaction,
+    size,
+    name: interval.name,
+    color: interval.color,
+    details: h(AgeRange, { data: window })
+  });
+}
+function windowMatchesInterval(window, interval) {
+  return window.t_age === interval.t_age && window.b_age === interval.b_age;
+}
+export {
+  AgeWindowTag,
+  intervalShortFromTimescale
+};
+//# sourceMappingURL=age-window-tag.js.map

package/dist/unit-details/age-window-tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"age-window-tag.js","sources":["../../src/unit-details/age-window-tag.ts"],"sourcesContent":["import { Button } from \"@blueprintjs/core\";\nimport {\n  IntervalShort,\n  IntervalTag,\n  Tag,\n  TagSize,\n  useInteractionProps,\n} from \"@macrostrat/data-components\";\nimport type { Interval } from \"@macrostrat/timescale\";\nimport classNames from \"classnames\";\nimport h from \"./age-window-tag.module.sass\";\nimport { AgeRange } from \"./age-range\";\nimport type { AgeWindow } from \"../animated-age-window\";\n\n/** Adapt a timescale `Interval` (as delivered by a `Timescale` click, with\n * `eag`/`lag`/`nam`/`col`) to the `IntervalShort` shape the tag components\n * take. The id prefers the Macrostrat `int_id` when the interval tree was built\n * from the API, falling back to the interval's own `oid`. */\nexport function intervalShortFromTimescale(interval: Interval): IntervalShort {\n  return {\n    id: interval.int_id ?? interval.oid,\n    name: interval.nam,\n    color: interval.col,\n    b_age: interval.eag,\n    t_age: interval.lag,\n    rank: interval.lvl,\n  };\n}\n\nexport interface AgeWindowTagProps {\n  /** The interval the window was set from, if any. */\n  interval?: IntervalShort | null;\n  /** The rendered window. When it differs from the interval's own span (a\n   * refined window) it is shown in place of the interval's range. */\n  window?: AgeWindow | null;\n  /** Renders a clear button when given. */\n  onClear?: () => void;\n  size?: TagSize;\n  className?: string;\n}\n\n/** A compact, clearable indicator of the age window a column or correlation\n * chart is focused on — an interval tag (linking to the interval, with its\n * range) or a bare age range. Renders nothing without an interval or window,\n * so it can live permanently in a chart's `axisTopContent`. */\nexport function AgeWindowTag(props: AgeWindowTagProps) {\n  const {\n    interval = null,\n    window = null,\n    onClear,\n    size = TagSize.Small,\n    className,\n  } = props;\n  if (interval == null && window == null) return null;\n\n  let tag = null;\n  if (interval == null) {\n    tag = h(Tag, { size, name: h(AgeRange, { data: window }) });\n  } else if (window == null || windowMatchesInterval(window, interval)) {\n    tag = h(IntervalTag, { interval, showAgeRange: true, size });\n  } else {\n    tag = h(RefinedIntervalTag, { interval, window, size });\n  }\n\n  return h(\"span.age-window-tag\", { className: classNames(className) }, [\n    tag,\n    h.if(onClear != null)(Button, {\n      className: \"clear-button\",\n      icon: \"cross\",\n      minimal: true,\n      small: true,\n      title: \"Clear\",\n      onClick: onClear,\n    }),\n  ]);\n}\n\nfunction RefinedIntervalTag({\n  interval,\n  window,\n  size,\n}: {\n  interval: IntervalShort;\n  window: AgeWindow;\n  size: TagSize;\n}) {\n  const interaction = useInteractionProps({ int_id: interval.id });\n  return h(Tag, {\n    ...interaction,\n    size,\n    name: interval.name,\n    color: interval.color,\n    details: h(AgeRange, { data: window }),\n  });\n}\n\nfunction windowMatchesInterval(\n  window: AgeWindow,\n  interval: IntervalShort,\n): boolean {\n  return window.t_age === interval.t_age && window.b_age === interval.b_age;\n}\n"],"names":[],"mappings":";;;;;AAkBO,SAAS,2BAA2B,UAAmC;AAC5E,SAAO;AAAA,IACL,IAAI,SAAS,UAAU,SAAS;AAAA,IAChC,MAAM,SAAS;AAAA,IACf,OAAO,SAAS;AAAA,IAChB,OAAO,SAAS;AAAA,IAChB,OAAO,SAAS;AAAA,IAChB,MAAM,SAAS;AAAA,EAAA;AAEnB;AAkBO,SAAS,aAAa,OAA0B;AACrD,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,SAAS;AAAA,IACT;AAAA,IACA,OAAO,QAAQ;AAAA,IACf;AAAA,EAAA,IACE;AACJ,MAAI,YAAY,QAAQ,UAAU,KAAM,QAAO;AAE/C,MAAI,MAAM;AACV,MAAI,YAAY,MAAM;AACpB,UAAM,EAAE,KAAK,EAAE,MAAM,MAAM,EAAE,UAAU,EAAE,MAAM,OAAA,CAAQ,EAAA,CAAG;AAAA,EAC5D,WAAW,UAAU,QAAQ,sBAAsB,QAAQ,QAAQ,GAAG;AACpE,UAAM,EAAE,aAAa,EAAE,UAAU,cAAc,MAAM,MAAM;AAAA,EAC7D,OAAO;AACL,UAAM,EAAE,oBAAoB,EAAE,UAAU,QAAQ,MAAM;AAAA,EACxD;AAEA,SAAO,EAAE,uBAAuB,EAAE,WAAW,WAAW,SAAS,KAAK;AAAA,IACpE;AAAA,IACA,EAAE,GAAG,WAAW,IAAI,EAAE,QAAQ;AAAA,MAC5B,WAAW;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,MACT,OAAO;AAAA,MACP,OAAO;AAAA,MACP,SAAS;AAAA,IAAA,CACV;AAAA,EAAA,CACF;AACH;AAEA,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,cAAc,oBAAoB,EAAE,QAAQ,SAAS,IAAI;AAC/D,SAAO,EAAE,KAAK;AAAA,IACZ,GAAG;AAAA,IACH;AAAA,IACA,MAAM,SAAS;AAAA,IACf,OAAO,SAAS;AAAA,IAChB,SAAS,EAAE,UAAU,EAAE,MAAM,QAAQ;AAAA,EAAA,CACtC;AACH;AAEA,SAAS,sBACP,QACA,UACS;AACT,SAAO,OAAO,UAAU,SAAS,SAAS,OAAO,UAAU,SAAS;AACtE;"}

package/dist/{age-model-overlay.module.sass.cjs → unit-details/age-window-tag.module.sass.cjs}

@@ -3,10 +3,10 @@ const h$1 = require("@macrostrat/hyper");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const h__default = /* @__PURE__ */ _interopDefault(h$1);
 const styles = {
-  "boundary-age-model": "_boundary-age-model_16scl_1",
-  "boundary-age-model-surface": "_boundary-age-model-surface_16scl_8"
+  "age-window-tag": "_age-window-tag_1tskh_1",
+  "clear-button": "_clear-button_1tskh_8"
 };
 let h = h__default.default.styled(styles);
 Object.assign(h, styles);
 module.exports = h;
-//# sourceMappingURL=age-model-overlay.module.sass.cjs.map
+//# sourceMappingURL=age-window-tag.module.sass.cjs.map

package/dist/unit-details/age-window-tag.module.sass.cjs.map

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

package/dist/unit-details/age-window-tag.module.sass.js

@@ -0,0 +1,11 @@
+import h$1 from "@macrostrat/hyper";
+const styles = {
+  "age-window-tag": "_age-window-tag_1tskh_1",
+  "clear-button": "_clear-button_1tskh_8"
+};
+let h = h$1.styled(styles);
+Object.assign(h, styles);
+export {
+  h as default
+};
+//# sourceMappingURL=age-window-tag.module.sass.js.map

package/dist/unit-details/age-window-tag.module.sass.js.map

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

package/dist/unit-details/index.d.ts

@@ -2,5 +2,6 @@ export * from './panel';
 export * from './popover';
 export * from './modal-panel';
 export * from './age-range';
+export * from './age-window-tag';
 export * from './strat-names';
 export { ClickableText, Identifier, UnitIdentifier, } from '@macrostrat/data-components';

package/dist/units/composite.cjs

@@ -83,13 +83,15 @@ function AnnotatedUnitsColumn(props) {
   }, []);
   return null;
 }
+const DEFAULT_LABEL_SUPPRESS_HEIGHT = 2;
 function SectionLabelsColumn(props) {
   const {
     width = 300,
     noteMode = "unlabeled",
     labelOffset = 30,
     noteComponent,
-    shouldRenderNote
+    shouldRenderNote,
+    labelSuppressHeight = DEFAULT_LABEL_SUPPRESS_HEIGHT
   } = props;
   const { totalHeight, axisType } = store.useMacrostratColumnData();
   const _compositeScale = store.useCompositeScale();
@@ -117,6 +119,7 @@ function SectionLabelsColumn(props) {
           divisions: unitsToLabel,
           paddingLeft: labelOffset,
           width,
+          minimumHeight: labelSuppressHeight,
           noteComponent,
           shouldRenderNote,
           scale: _compositeScale,