@macrostrat/column-views 3.11.0 → 3.12.0

package/dist/section.cjs

@@ -5,13 +5,13 @@ const timescale = require("@macrostrat/timescale");
 const columnComponents = require("@macrostrat/column-components");
 const h$1 = require("@macrostrat/hyper");
 const column_module = require("./column.module.sass.cjs");
-const dataProvider = require("@macrostrat/data-provider");
 const dataComponents = require("@macrostrat/data-components");
 const store = require("./data-provider/store.cjs");
 const composite = require("./units/composite.cjs");
 const ageRange = require("./unit-details/age-range.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const h__default = /* @__PURE__ */ _interopDefault(h$1);
+const INTERNATIONAL_TIMESCALE_ID = 11;
 const h = h__default.default.styled(column_module.default);
 function SectionsColumn(props) {
   const {
@@ -23,7 +23,8 @@ function SectionsColumn(props) {
     columnWidth = 150,
     showLabelColumn = true,
     clipUnits = true,
-    maxInternalColumns
+    maxInternalColumns,
+    labelSuppressHeight
   } = props;
   const units = store.useMacrostratUnits();
   const key = units[0]?.col_id;
@@ -38,7 +39,8 @@ function SectionsColumn(props) {
       unconformityLabels
     }),
     h.if(showLabelColumn)(composite.SectionLabelsColumn, {
-      width: width - columnWidth
+      width: width - columnWidth,
+      labelSuppressHeight
     })
   ]);
 }
@@ -53,7 +55,7 @@ function SectionUnitsColumn(props) {
     axisType,
     unconformityLabels = true
   } = props;
-  const { sections, totalHeight } = store.useMacrostratColumnData();
+  const { sections, totalHeight, axisType: columnAxisType } = store.useMacrostratColumnData();
   const scaleData = sections.map((section) => {
     return section.scaleInfo;
   });
@@ -90,6 +92,9 @@ function SectionUnitsColumn(props) {
     h.if(unconformityLabels)(UnconformityLabels, {
       width,
       sections: scaleData,
+      // A gap between sections is measured in whatever the axis is: metres
+      // down a core, Myr across a time column
+      axisType: axisType ?? columnAxisType,
       verbose: false
     })
   ]);
@@ -153,44 +158,71 @@ function CompositeTimescale(props) {
     ...props
   });
 }
+function TimescaleLabel({ timescale: timescale2 }) {
+  const { label, name } = timescale2;
+  const style = levelCountStyle(levelCount(timescale2));
+  let content = label;
+  if (label == null && name != null) {
+    content = h("span.timescale-label-text", name);
+  }
+  if (content == null) return h("div.timescale-label", { style });
+  return h("div.timescale-label", { style }, content);
+}
+function levelCountStyle(levelCount2) {
+  return { "--timescale-level-count": levelCount2 };
+}
 function CompositeTimescaleCore(props) {
   const {
-    levels = 3,
     packages,
     unconformityLabels = false,
     onClickInterval,
-    intervalStyle
+    intervalStyle,
+    showLabels = false,
+    className
   } = props;
-  const baseURL = dataProvider.useMacrostratBaseURL();
-  const intervals = timescale.useMacrostratIntervals({ baseURL });
-  let _levels;
-  if (typeof levels === "number") {
-    _levels = [2, Math.max(2 + Math.min(levels, 5) - 1, 1)];
-  } else {
-    _levels = levels;
+  const timescales = useColumnTimescales(props);
+  function forTimescale(id) {
+    let onClick = null;
+    if (onClickInterval != null) {
+      onClick = (event, data) => {
+        onClickInterval(event, { ...data, timescaleID: id });
+      };
+    }
+    let style = intervalStyle;
+    if (typeof intervalStyle === "function") {
+      style = (interval) => intervalStyle(interval, id);
+    }
+    return { onClick, intervalStyle: style };
   }
-  const nCols = _levels[1] - _levels[0] + 1;
-  return h("div.timescale-column", [
+  return h("div.timescale-column", { className }, [
+    h.if(showLabels)(
+      "div.timescale-labels",
+      timescales.map(
+        (timescale2) => h(TimescaleLabel, { key: timescale2.id, timescale: timescale2 })
+      )
+    ),
     h(
       "div.timescales",
       packages.map((group) => {
         const { pixelHeight, paddingTop, key, scale } = group;
         return h(
-          "div.timescale-container",
-          { style: { paddingTop, "--timescale-level-count": nCols }, key },
-          [
-            h(timescale.Timescale, {
+          "div.section-timescales",
+          { style: { paddingTop }, key },
+          timescales.map(
+            (timescale$1) => h(timescale.Timescale, {
+              key: timescale$1.id,
               orientation: timescale.TimescaleOrientation.VERTICAL,
               length: pixelHeight,
-              levels: _levels,
+              levels: timescale$1.levels,
+              rootInterval: timescale$1.rootInterval,
               absoluteAgeScale: true,
               showAgeAxis: false,
               scale,
-              intervals,
-              onClick: onClickInterval,
-              intervalStyle
+              intervals: timescale$1.intervals,
+              style: levelCountStyle(levelCount(timescale$1)),
+              ...forTimescale(timescale$1.id)
             })
-          ]
+          )
         );
       })
     ),
@@ -202,6 +234,58 @@ function CompositeTimescaleCore(props) {
     })
   ]);
 }
+function useColumnTimescales(props) {
+  const { timescales, levels = 3, timescaleID, additionalTimescales } = props;
+  const specs = React.useMemo(
+    () => timescaleSpecs({ timescales, levels, timescaleID, additionalTimescales }),
+    [
+      timescales,
+      levels,
+      timescaleID,
+      additionalTimescales?.join(",")
+    ]
+  );
+  const fetchIDs = React.useMemo(
+    () => specs.filter((d) => d.intervals == null).map((d) => d.id),
+    [specs]
+  );
+  const intervalSets = timescale.useMacrostratTimescales(fetchIDs);
+  return React.useMemo(
+    () => specs.map((spec) => ({
+      ...spec,
+      intervals: spec.intervals ?? intervalSets.get(spec.id) ?? []
+    })),
+    [specs, intervalSets]
+  );
+}
+function timescaleSpecs(props) {
+  const { timescales, levels = 3, timescaleID, additionalTimescales = [] } = props;
+  if (timescales != null) {
+    return timescales.map(normalizeTimescale);
+  }
+  return [
+    {
+      id: timescaleID ?? INTERNATIONAL_TIMESCALE_ID,
+      levels: levelRange(levels)
+    },
+    ...additionalTimescales.map(normalizeTimescale)
+  ];
+}
+function normalizeTimescale(timescale2) {
+  if (typeof timescale2 === "number") {
+    return { id: timescale2, levels: FLAT_TIMESCALE_LEVELS };
+  }
+  return { levels: FLAT_TIMESCALE_LEVELS, ...timescale2 };
+}
+const FLAT_TIMESCALE_LEVELS = [1, 1];
+function levelRange(levels) {
+  if (typeof levels !== "number") return levels;
+  return [2, Math.max(2 + Math.min(levels, 5) - 1, 1)];
+}
+function levelCount(timescale2) {
+  const [min, max] = timescale2.levels ?? FLAT_TIMESCALE_LEVELS;
+  return Math.max(max - min + 1, 1);
+}
 function UnconformityLabels(props) {
   const { width, sections, className, axisType, verbose } = props;
   return h(

package/dist/section.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"section.cjs","sources":["../src/section.ts"],"sourcesContent":["import {\n  CompositeUnitsColumn,\n  LabelTrackerProvider,\n  SectionLabelsColumn,\n} from \"./units\";\nimport { ReactNode, FunctionComponent, useMemo } from \"react\";\nimport {\n  Timescale,\n  TimescaleOrientation,\n  TimescaleClickHandler,\n  useMacrostratIntervals,\n  type IntervalStyleBuilder,\n} from \"@macrostrat/timescale\";\nimport { ColumnAxisType, SVG } from \"@macrostrat/column-components\";\nimport hyper from \"@macrostrat/hyper\";\nimport styles from \"./column.module.sass\";\nimport {\n  useMacrostratColumnData,\n  useMacrostratUnits,\n  MacrostratColumnProvider,\n} from \"./data-provider\";\nimport {\n  useMacrostratBaseURL,\n  useMacrostratData,\n} from \"@macrostrat/data-provider\";\nimport { Duration } from \"./unit-details\";\nimport { Value } from \"@macrostrat/data-components\";\nimport type { ExtUnit, PackageScaleLayoutData } from \"./prepare-units/types\";\n\nconst h = hyper.styled(styles);\n\nexport interface SectionSharedProps {\n  unitComponent?: FunctionComponent<any>;\n  unitComponentProps?: any;\n  showLabels?: boolean;\n  width?: number;\n  columnWidth?: number;\n  children?: ReactNode;\n  showLabelColumn?: boolean;\n  axisType?: ColumnAxisType;\n  className?: string;\n  clipUnits?: boolean;\n  maxInternalColumns?: number;\n  // Space between sections\n  verticalSpacing?: number;\n  // Whether to render unconformity labels\n  unconformityLabels?: boolean;\n}\n\nexport interface SectionProps extends SectionSharedProps {\n  units: ExtUnit[];\n  scaleInfo: PackageScaleLayoutData;\n}\n\nexport function SectionsColumn(props: SectionSharedProps) {\n  const {\n    unconformityLabels = true,\n    unitComponent,\n    unitComponentProps,\n    showLabels = true,\n    width = 300,\n    columnWidth = 150,\n    showLabelColumn = true,\n    clipUnits = true,\n    maxInternalColumns,\n  } = props;\n\n  const units = useMacrostratUnits();\n\n  // Get a unique key for the column\n  const key = units[0]?.col_id;\n\n  return h(LabelTrackerProvider, { units, key }, [\n    h(SectionUnitsColumn, {\n      width: columnWidth,\n      unitComponent,\n      unitComponentProps,\n      showLabels,\n      clipUnits,\n      maxInternalColumns,\n      unconformityLabels,\n    }),\n    h.if(showLabelColumn)(SectionLabelsColumn, {\n      width: width - columnWidth,\n    }),\n  ]);\n}\n\nfunction SectionUnitsColumn(props: SectionSharedProps) {\n  const {\n    width,\n    showLabels,\n    unitComponent,\n    unitComponentProps,\n    clipUnits,\n    maxInternalColumns,\n    axisType,\n    unconformityLabels = true,\n  } = props;\n\n  const { sections, totalHeight } = useMacrostratColumnData();\n\n  const scaleData: PackageScaleLayoutData[] = sections.map((section) => {\n    return section.scaleInfo;\n  });\n\n  const innerWidth = width - 2;\n\n  return h(\"div.section-units-container\", { style: { width } }, [\n    h(\n      SVG,\n      {\n        className: \"sections\",\n        height: totalHeight,\n        innerWidth,\n        paddingH: 1,\n      },\n      sections.map((group) => {\n        const { units, scaleInfo, section_id } = group;\n\n        const key = `section-${section_id}`;\n        return h(\n          SectionUnits,\n          {\n            units,\n            scaleInfo,\n            key,\n            unitComponent,\n            unitComponentProps,\n            showLabels,\n            width: innerWidth,\n            clipUnits,\n            maxInternalColumns,\n          }, // This unconformity is with the section _above_\n        );\n      }),\n    ),\n    h.if(unconformityLabels)(UnconformityLabels, {\n      width,\n      sections: scaleData,\n      verbose: false,\n    }),\n  ]);\n}\n\nfunction SectionUnits(props: SectionProps) {\n  // Section with \"squishy\" timescale\n  const {\n    units,\n    scaleInfo,\n    unitComponent,\n    showLabels = true,\n    width = 300,\n    unitComponentProps,\n    className,\n    clipUnits = true,\n    maxInternalColumns,\n  } = props;\n\n  const { domain, pixelScale, pixelHeight, scale } = scaleInfo;\n\n  /** Ensure that we can arrange units into the maximum number\n   * of columns defined by unitComponentProps, but that we don't\n   * use more than necessary.\n   */\n  const _unitComponentProps = useMemo(() => {\n    return {\n      ...unitComponentProps,\n      nColumns: Math.min(\n        maxInternalColumns ?? Math.floor(width / 10),\n        unitComponentProps?.nColumns ?? Infinity,\n      ),\n      //axisType,\n    };\n  }, [units, unitComponentProps, maxInternalColumns, width]);\n\n  const style = {\n    \"--section-height\": `${pixelHeight}px`,\n    \"--section-width\": `${width}px`,\n  };\n\n  return h(\n    \"g.section\",\n    { className, style, transform: `translate(0 ${scaleInfo.offset})` },\n    h(\n      MacrostratColumnProvider,\n      {\n        units,\n        domain,\n        pixelScale, // Actually pixels per myr,\n        scale,\n      },\n      h(CompositeUnitsColumn, {\n        width,\n        showLabels,\n        unitComponent,\n        unitComponentProps: _unitComponentProps,\n        clipToFrame: clipUnits,\n      }),\n    ),\n  );\n}\n\ninterface CompositeTimescaleProps {\n  levels?: [number, number] | number;\n  unconformityLabels?: boolean;\n  onClickInterval?: TimescaleClickHandler;\n  /** Per-interval style (e.g. to highlight the currently selected interval). */\n  intervalStyle?: IntervalStyleBuilder;\n}\n\nexport function CompositeTimescale(props: CompositeTimescaleProps) {\n  const { sections } = useMacrostratColumnData();\n  const sectionScales = sections.map((section) => {\n    return section.scaleInfo;\n  });\n\n  return h(CompositeTimescaleCore, {\n    packages: sectionScales,\n    ...props,\n  });\n}\n\ntype CompositeTimescaleCoreProps = CompositeTimescaleProps & {\n  packages: PackageScaleLayoutData[];\n  onClickInterval?: TimescaleClickHandler;\n};\n\nexport function CompositeTimescaleCore(props: CompositeTimescaleCoreProps) {\n  const {\n    levels = 3,\n    packages,\n    unconformityLabels = false,\n    onClickInterval,\n    intervalStyle,\n  } = props;\n\n  // Use intervals from Macrostrat API\n  const baseURL = useMacrostratBaseURL();\n  const intervals = useMacrostratIntervals({ baseURL });\n\n  let _levels: [number, number];\n  if (typeof levels === \"number\") {\n    // If levels is a number, use the most common starting level\n    _levels = [2, Math.max(2 + Math.min(levels, 5) - 1, 1)];\n  } else {\n    _levels = levels;\n  }\n\n  const nCols = _levels[1] - _levels[0] + 1;\n\n  return h(\"div.timescale-column\", [\n    h(\n      \"div.timescales\",\n      packages.map((group) => {\n        const { pixelHeight, paddingTop, key, scale } = group;\n        return h(\n          \"div.timescale-container\",\n          { style: { paddingTop, \"--timescale-level-count\": nCols }, key },\n          [\n            h(Timescale, {\n              orientation: TimescaleOrientation.VERTICAL,\n              length: pixelHeight,\n              levels: _levels,\n              absoluteAgeScale: true,\n              showAgeAxis: false,\n              scale,\n              intervals,\n              onClick: onClickInterval,\n              intervalStyle,\n            }),\n          ],\n        );\n      }),\n    ),\n    h.if(unconformityLabels)(UnconformityLabels, {\n      width: \"100%\",\n      sections: packages,\n      className: \"unconformity-labels\",\n      axisType: ColumnAxisType.AGE,\n    }),\n  ]);\n}\n\nexport function UnconformityLabels(props: {\n  width: string | number;\n  sections: PackageScaleLayoutData[];\n  axisType?: ColumnAxisType;\n  className?: string;\n  verbose?: boolean;\n}) {\n  const { width, sections, className, axisType, verbose } = props;\n\n  return h(\n    \"div.unconformity-labels\",\n    {\n      style: {\n        width,\n      },\n      className,\n    },\n    sections.map((scaleInfo, i) => {\n      const lastGroup = sections[i - 1];\n      const top = scaleInfo.offset - scaleInfo.paddingTop;\n      const upperAge = lastGroup?.domain[0];\n      const lowerAge = scaleInfo.domain[1];\n      return h(Unconformity, {\n        axisType,\n        upperAge,\n        lowerAge,\n        style: {\n          width,\n          height: scaleInfo.paddingTop,\n          top,\n        },\n        verbose,\n      });\n    }),\n  );\n}\n\nfunction Unconformity({\n  upperAge,\n  lowerAge,\n  style,\n  axisType,\n  verbose = false,\n}) {\n  if (upperAge == null || lowerAge == null) {\n    return null;\n  }\n\n  const ageGap = Math.abs(upperAge - lowerAge);\n\n  let maximumFractionDigits = 0;\n\n  let className: string = null;\n  if (ageGap > 1000) {\n    className = \"giga\";\n  } else if (ageGap > 100) {\n    className = \"mega\";\n  } else if (ageGap > 10) {\n    className = \"large\";\n  } else if (ageGap < 1) {\n    className = \"small\";\n    maximumFractionDigits = 2;\n  } else {\n    maximumFractionDigits = 1;\n  }\n\n  let val: ReactNode;\n  if (axisType === ColumnAxisType.DEPTH || axisType === ColumnAxisType.HEIGHT) {\n    const _txt = ageGap.toLocaleString(\"en-US\", { maximumFractionDigits });\n    val = h(Value, { value: _txt, unit: \"m\" });\n  } else {\n    val = h(Duration, { value: ageGap, maximumFractionDigits });\n  }\n\n  let prefix: ReactNode = null;\n  if (verbose) {\n    prefix = h([\" \", h(\"span.prefix\", \" gap\")]);\n  }\n\n  return h(\"div.unconformity\", { style, className }, [\n    h(\"div.unconformity-inner\", h(\"div.unconformity-text\", [val, prefix])),\n  ]);\n}\n"],"names":["hyper","styles","useMacrostratUnits","LabelTrackerProvider","SectionLabelsColumn","useMacrostratColumnData","SVG","useMemo","MacrostratColumnProvider","CompositeUnitsColumn","useMacrostratBaseURL","useMacrostratIntervals","Timescale","TimescaleOrientation","ColumnAxisType","Value","Duration"],"mappings":"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"}
+{"version":3,"file":"section.cjs","sources":["../src/section.ts"],"sourcesContent":["import {\n  CompositeUnitsColumn,\n  LabelTrackerProvider,\n  SectionLabelsColumn,\n} from \"./units\";\nimport {\n  type CSSProperties,\n  ReactNode,\n  FunctionComponent,\n  useMemo,\n} from \"react\";\nimport {\n  Timescale,\n  TimescaleOrientation,\n  useMacrostratTimescales,\n  type Interval,\n  type IntervalStyleBuilder,\n  type TimescaleClickData,\n} from \"@macrostrat/timescale\";\n\n/** Macrostrat's international timescale, the default for a column */\nconst INTERNATIONAL_TIMESCALE_ID = 11;\nimport { ColumnAxisType, SVG } from \"@macrostrat/column-components\";\nimport hyper from \"@macrostrat/hyper\";\nimport styles from \"./column.module.sass\";\nimport {\n  useMacrostratColumnData,\n  useMacrostratUnits,\n  MacrostratColumnProvider,\n} from \"./data-provider\";\nimport { Duration } from \"./unit-details\";\nimport { Value } from \"@macrostrat/data-components\";\nimport type { ExtUnit, PackageScaleLayoutData } from \"./prepare-units/types\";\n\nconst h = hyper.styled(styles);\n\nexport interface SectionSharedProps {\n  unitComponent?: FunctionComponent<any>;\n  unitComponentProps?: any;\n  showLabels?: boolean;\n  width?: number;\n  columnWidth?: number;\n  children?: ReactNode;\n  showLabelColumn?: boolean;\n  /** Suppress the label for a unit drawn thinner than this many pixels */\n  labelSuppressHeight?: number;\n  axisType?: ColumnAxisType;\n  className?: string;\n  clipUnits?: boolean;\n  maxInternalColumns?: number;\n  // Space between sections\n  verticalSpacing?: number;\n  // Whether to render unconformity labels\n  unconformityLabels?: boolean;\n}\n\nexport interface SectionProps extends SectionSharedProps {\n  units: ExtUnit[];\n  scaleInfo: PackageScaleLayoutData;\n}\n\nexport function SectionsColumn(props: SectionSharedProps) {\n  const {\n    unconformityLabels = true,\n    unitComponent,\n    unitComponentProps,\n    showLabels = true,\n    width = 300,\n    columnWidth = 150,\n    showLabelColumn = true,\n    clipUnits = true,\n    maxInternalColumns,\n    labelSuppressHeight,\n  } = props;\n\n  const units = useMacrostratUnits();\n\n  // Get a unique key for the column\n  const key = units[0]?.col_id;\n\n  return h(LabelTrackerProvider, { units, key }, [\n    h(SectionUnitsColumn, {\n      width: columnWidth,\n      unitComponent,\n      unitComponentProps,\n      showLabels,\n      clipUnits,\n      maxInternalColumns,\n      unconformityLabels,\n    }),\n    h.if(showLabelColumn)(SectionLabelsColumn, {\n      width: width - columnWidth,\n      labelSuppressHeight,\n    }),\n  ]);\n}\n\nfunction SectionUnitsColumn(props: SectionSharedProps) {\n  const {\n    width,\n    showLabels,\n    unitComponent,\n    unitComponentProps,\n    clipUnits,\n    maxInternalColumns,\n    axisType,\n    unconformityLabels = true,\n  } = props;\n\n  const { sections, totalHeight, axisType: columnAxisType } =\n    useMacrostratColumnData();\n\n  const scaleData: PackageScaleLayoutData[] = sections.map((section) => {\n    return section.scaleInfo;\n  });\n\n  const innerWidth = width - 2;\n\n  return h(\"div.section-units-container\", { style: { width } }, [\n    h(\n      SVG,\n      {\n        className: \"sections\",\n        height: totalHeight,\n        innerWidth,\n        paddingH: 1,\n      },\n      sections.map((group) => {\n        const { units, scaleInfo, section_id } = group;\n\n        const key = `section-${section_id}`;\n        return h(\n          SectionUnits,\n          {\n            units,\n            scaleInfo,\n            key,\n            unitComponent,\n            unitComponentProps,\n            showLabels,\n            width: innerWidth,\n            clipUnits,\n            maxInternalColumns,\n          }, // This unconformity is with the section _above_\n        );\n      }),\n    ),\n    h.if(unconformityLabels)(UnconformityLabels, {\n      width,\n      sections: scaleData,\n      // A gap between sections is measured in whatever the axis is: metres\n      // down a core, Myr across a time column\n      axisType: axisType ?? columnAxisType,\n      verbose: false,\n    }),\n  ]);\n}\n\nfunction SectionUnits(props: SectionProps) {\n  // Section with \"squishy\" timescale\n  const {\n    units,\n    scaleInfo,\n    unitComponent,\n    showLabels = true,\n    width = 300,\n    unitComponentProps,\n    className,\n    clipUnits = true,\n    maxInternalColumns,\n  } = props;\n\n  const { domain, pixelScale, pixelHeight, scale } = scaleInfo;\n\n  /** Ensure that we can arrange units into the maximum number\n   * of columns defined by unitComponentProps, but that we don't\n   * use more than necessary.\n   */\n  const _unitComponentProps = useMemo(() => {\n    return {\n      ...unitComponentProps,\n      nColumns: Math.min(\n        maxInternalColumns ?? Math.floor(width / 10),\n        unitComponentProps?.nColumns ?? Infinity,\n      ),\n      //axisType,\n    };\n  }, [units, unitComponentProps, maxInternalColumns, width]);\n\n  const style = {\n    \"--section-height\": `${pixelHeight}px`,\n    \"--section-width\": `${width}px`,\n  };\n\n  return h(\n    \"g.section\",\n    { className, style, transform: `translate(0 ${scaleInfo.offset})` },\n    h(\n      MacrostratColumnProvider,\n      {\n        units,\n        domain,\n        pixelScale, // Actually pixels per myr,\n        scale,\n      },\n      h(CompositeUnitsColumn, {\n        width,\n        showLabels,\n        unitComponent,\n        unitComponentProps: _unitComponentProps,\n        clipToFrame: clipUnits,\n      }),\n    ),\n  );\n}\n\n/** A per-interval style that also knows which timescale the interval was\n * drawn from. The same interval often appears in several of the timescales\n * beside each other, and they aren't interchangeable — only one of them is\n * the one a selection was made in. */\nexport type ColumnIntervalStyleBuilder =\n  | CSSProperties\n  | ((interval: Interval, timescaleID: number) => CSSProperties)\n  | null;\n\n/** A timescale click, reporting which timescale was clicked in */\nexport type ColumnTimescaleClickHandler = (\n  event: Event,\n  data: TimescaleClickData & { timescaleID: number },\n) => void;\n\n/** A timescale to draw beside a column.\n *\n * The international timescale is one of these, not a special case: it is the\n * one that happens to be nested several levels deep. Anything with the same\n * shape can take its place or sit beside it — a regional set from the API, a\n * zonation assembled locally, or a hierarchy that isn't a timescale at all,\n * so long as its \"intervals\" carry ages.\n */\nexport interface ColumnTimescale {\n  /** Integer identifier. Clicks and per-interval styles report it, so a\n   * consumer can tell one column's copy of an interval from another's. For a\n   * Macrostrat timescale it is the `timescale_id`. */\n  id: number;\n  /** Shown above the column, unless `label` says otherwise */\n  name?: string;\n  /** The intervals themselves, flat or already nested by `pid`. Left out,\n   * the timescale `id` is fetched from the Macrostrat API. */\n  intervals?: Interval[];\n  /** Levels to draw, and so how many slots wide the column is (default\n   * `[1, 1]`: one level, which is what a flat timescale has) */\n  levels?: [number, number];\n  /** `oid` of the interval the tree hangs from (default 0) */\n  rootInterval?: number;\n  /** Drawn above the column in place of the name — any node, so a consumer\n   * can put a control or a legend there instead of text */\n  label?: ReactNode;\n}\n\nexport type ColumnTimescaleLike = number | ColumnTimescale;\n\ninterface CompositeTimescaleProps {\n  /** Every timescale to draw, in order. A bare number is a Macrostrat\n   * timescale to fetch and draw as a single level.\n   *\n   * Given this, `levels`, `timescaleID` and `additionalTimescales` are\n   * ignored: it says what they say and more. */\n  timescales?: ColumnTimescaleLike[];\n  /** Levels of the ICS hierarchy to show. If a number, the finest level is\n   * `levels[0]`, the second-finest is `levels[1]`, etc. If an array, the\n   * first element is the starting level, the second is the ending level. */\n  levels?: [number, number] | number;\n  unconformityLabels?: boolean;\n  onClickInterval?: ColumnTimescaleClickHandler;\n  /** Per-interval style (e.g. to highlight the currently selected interval). */\n  intervalStyle?: ColumnIntervalStyleBuilder;\n  /** The timescale to draw. Defaults to the international one; any other\n   * Macrostrat timescale (a regional or project-specific set of intervals)\n   * can be drawn in its place. */\n  timescaleID?: number;\n  /** Further timescales drawn as extra level columns beside the main one,\n   * against the same scale. Shorthand for listing them in `timescales`. */\n  additionalTimescales?: number[];\n  /** Draw the names above the columns. They sit above the column proper, so\n   * leave top padding for them. */\n  showLabels?: boolean;\n  className?: string;\n}\n\nexport function CompositeTimescale(props: CompositeTimescaleProps) {\n  const { sections } = useMacrostratColumnData();\n  const sectionScales = sections.map((section) => {\n    return section.scaleInfo;\n  });\n\n  return h(CompositeTimescaleCore, {\n    packages: sectionScales,\n    ...props,\n  });\n}\n\ntype CompositeTimescaleCoreProps = CompositeTimescaleProps & {\n  packages: PackageScaleLayoutData[];\n};\n\n/** What is drawn above a timescale: its name, reading up the page, or\n * whatever node the consumer gave instead. */\nfunction TimescaleLabel({ timescale }: { timescale: ColumnTimescale }) {\n  const { label, name } = timescale;\n  const style = levelCountStyle(levelCount(timescale));\n\n  let content: ReactNode = label;\n  if (label == null && name != null) {\n    content = h(\"span.timescale-label-text\", name);\n  }\n  if (content == null) return h(\"div.timescale-label\", { style });\n\n  return h(\"div.timescale-label\", { style }, content);\n}\n\n/** How wide a timescale draws: one slot per level it shows. */\nfunction levelCountStyle(levelCount: number): CSSProperties {\n  return { \"--timescale-level-count\": levelCount } as CSSProperties;\n}\n\nexport function CompositeTimescaleCore(props: CompositeTimescaleCoreProps) {\n  const {\n    packages,\n    unconformityLabels = false,\n    onClickInterval,\n    intervalStyle,\n    showLabels = false,\n    className,\n  } = props;\n\n  const timescales = useColumnTimescales(props);\n\n  /** Clicks and styles carry the timescale they came from, so a consumer can\n   * tell one column's copy of an interval from another's. */\n  function forTimescale(id: number) {\n    let onClick = null;\n    if (onClickInterval != null) {\n      onClick = (event: Event, data: TimescaleClickData) => {\n        onClickInterval(event, { ...data, timescaleID: id });\n      };\n    }\n    let style = intervalStyle as IntervalStyleBuilder;\n    if (typeof intervalStyle === \"function\") {\n      style = (interval: Interval) => intervalStyle(interval, id);\n    }\n    return { onClick, intervalStyle: style };\n  }\n\n  return h(\"div.timescale-column\", { className }, [\n    h.if(showLabels)(\n      \"div.timescale-labels\",\n      timescales.map((timescale) =>\n        h(TimescaleLabel, { key: timescale.id, timescale }),\n      ),\n    ),\n    h(\n      \"div.timescales\",\n      packages.map((group) => {\n        const { pixelHeight, paddingTop, key, scale } = group;\n        return h(\n          \"div.section-timescales\",\n          { style: { paddingTop }, key },\n          timescales.map((timescale) =>\n            h(Timescale, {\n              key: timescale.id,\n              orientation: TimescaleOrientation.VERTICAL,\n              length: pixelHeight,\n              levels: timescale.levels,\n              rootInterval: timescale.rootInterval,\n              absoluteAgeScale: true,\n              showAgeAxis: false,\n              scale,\n              intervals: timescale.intervals,\n              style: levelCountStyle(levelCount(timescale)),\n              ...forTimescale(timescale.id),\n            }),\n          ),\n        );\n      }),\n    ),\n    h.if(unconformityLabels)(UnconformityLabels, {\n      width: \"100%\",\n      sections: packages,\n      className: \"unconformity-labels\",\n      axisType: ColumnAxisType.AGE,\n    }),\n  ]);\n}\n\n/** The timescales to draw, with their intervals.\n *\n * Every timescale a column draws is fetched in one place: a column is split\n * into sections, and fetching per section would ask for the same timescale\n * once per section per timescale.\n */\nfunction useColumnTimescales(props: CompositeTimescaleProps): ColumnTimescale[] {\n  const { timescales, levels = 3, timescaleID, additionalTimescales } = props;\n\n  const specs = useMemo(\n    () => timescaleSpecs({ timescales, levels, timescaleID, additionalTimescales }),\n    [\n      timescales,\n      levels,\n      timescaleID,\n      additionalTimescales?.join(\",\"),\n    ],\n  );\n\n  // Only the ones that didn't come with their own intervals need fetching\n  const fetchIDs = useMemo(\n    () => specs.filter((d) => d.intervals == null).map((d) => d.id),\n    [specs],\n  );\n  const intervalSets = useMacrostratTimescales(fetchIDs);\n\n  return useMemo(\n    () =>\n      specs.map((spec) => ({\n        ...spec,\n        intervals: spec.intervals ?? intervalSets.get(spec.id) ?? [],\n      })),\n    [specs, intervalSets],\n  );\n}\n\n/** The `timescales` list, or one built from the older props that name the\n * leveled timescale and the flat ones beside it. */\nfunction timescaleSpecs(props: CompositeTimescaleProps): ColumnTimescale[] {\n  const { timescales, levels = 3, timescaleID, additionalTimescales = [] } = props;\n\n  if (timescales != null) {\n    return timescales.map(normalizeTimescale);\n  }\n\n  return [\n    {\n      id: timescaleID ?? INTERNATIONAL_TIMESCALE_ID,\n      levels: levelRange(levels),\n    },\n    ...additionalTimescales.map(normalizeTimescale),\n  ];\n}\n\nfunction normalizeTimescale(timescale: ColumnTimescaleLike): ColumnTimescale {\n  if (typeof timescale === \"number\") {\n    return { id: timescale, levels: FLAT_TIMESCALE_LEVELS };\n  }\n  return { levels: FLAT_TIMESCALE_LEVELS, ...timescale };\n}\n\n/** Regional and project timescales come back flat: one level of intervals. */\nconst FLAT_TIMESCALE_LEVELS: [number, number] = [1, 1];\n\nfunction levelRange(levels: [number, number] | number): [number, number] {\n  if (typeof levels !== \"number\") return levels;\n  // A count, rather than a range: start at the level most columns start at\n  return [2, Math.max(2 + Math.min(levels, 5) - 1, 1)];\n}\n\n/** How many slots wide a timescale draws: one per level it shows. */\nfunction levelCount(timescale: ColumnTimescale): number {\n  const [min, max] = timescale.levels ?? FLAT_TIMESCALE_LEVELS;\n  return Math.max(max - min + 1, 1);\n}\n\nexport function UnconformityLabels(props: {\n  width: string | number;\n  sections: PackageScaleLayoutData[];\n  axisType?: ColumnAxisType;\n  className?: string;\n  verbose?: boolean;\n}) {\n  const { width, sections, className, axisType, verbose } = props;\n\n  return h(\n    \"div.unconformity-labels\",\n    {\n      style: {\n        width,\n      },\n      className,\n    },\n    sections.map((scaleInfo, i) => {\n      const lastGroup = sections[i - 1];\n      const top = scaleInfo.offset - scaleInfo.paddingTop;\n      const upperAge = lastGroup?.domain[0];\n      const lowerAge = scaleInfo.domain[1];\n      return h(Unconformity, {\n        axisType,\n        upperAge,\n        lowerAge,\n        style: {\n          width,\n          height: scaleInfo.paddingTop,\n          top,\n        },\n        verbose,\n      });\n    }),\n  );\n}\n\nfunction Unconformity({\n  upperAge,\n  lowerAge,\n  style,\n  axisType,\n  verbose = false,\n}) {\n  if (upperAge == null || lowerAge == null) {\n    return null;\n  }\n\n  const ageGap = Math.abs(upperAge - lowerAge);\n\n  let maximumFractionDigits = 0;\n\n  let className: string = null;\n  if (ageGap > 1000) {\n    className = \"giga\";\n  } else if (ageGap > 100) {\n    className = \"mega\";\n  } else if (ageGap > 10) {\n    className = \"large\";\n  } else if (ageGap < 1) {\n    className = \"small\";\n    maximumFractionDigits = 2;\n  } else {\n    maximumFractionDigits = 1;\n  }\n\n  let val: ReactNode;\n  if (axisType === ColumnAxisType.DEPTH || axisType === ColumnAxisType.HEIGHT) {\n    const _txt = ageGap.toLocaleString(\"en-US\", { maximumFractionDigits });\n    val = h(Value, { value: _txt, unit: \"m\" });\n  } else {\n    val = h(Duration, { value: ageGap, maximumFractionDigits });\n  }\n\n  let prefix: ReactNode = null;\n  if (verbose) {\n    prefix = h([\" \", h(\"span.prefix\", \" gap\")]);\n  }\n\n  return h(\"div.unconformity\", { style, className }, [\n    h(\"div.unconformity-inner\", h(\"div.unconformity-text\", [val, prefix])),\n  ]);\n}\n"],"names":["hyper","styles","useMacrostratUnits","LabelTrackerProvider","SectionLabelsColumn","useMacrostratColumnData","SVG","useMemo","MacrostratColumnProvider","CompositeUnitsColumn","timescale","levelCount","Timescale","TimescaleOrientation","ColumnAxisType","useMacrostratTimescales","Value","Duration"],"mappings":"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"}

package/dist/section.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode, FunctionComponent } from 'react';
-import { TimescaleClickHandler, IntervalStyleBuilder } from '@macrostrat/timescale';
+import { CSSProperties, ReactNode, FunctionComponent } from 'react';
+import { Interval, TimescaleClickData } from '@macrostrat/timescale';
 import { ColumnAxisType } from '@macrostrat/column-components';
 import { ExtUnit, PackageScaleLayoutData } from './prepare-units/types';
 export interface SectionSharedProps {
@@ -10,6 +10,8 @@ export interface SectionSharedProps {
     columnWidth?: number;
     children?: ReactNode;
     showLabelColumn?: boolean;
+    /** Suppress the label for a unit drawn thinner than this many pixels */
+    labelSuppressHeight?: number;
     axisType?: ColumnAxisType;
     className?: string;
     clipUnits?: boolean;
@@ -22,19 +24,77 @@ export interface SectionProps extends SectionSharedProps {
     scaleInfo: PackageScaleLayoutData;
 }
 export declare function SectionsColumn(props: SectionSharedProps): import('react').FunctionComponentElement<any>;
+/** A per-interval style that also knows which timescale the interval was
+ * drawn from. The same interval often appears in several of the timescales
+ * beside each other, and they aren't interchangeable — only one of them is
+ * the one a selection was made in. */
+export type ColumnIntervalStyleBuilder = CSSProperties | ((interval: Interval, timescaleID: number) => CSSProperties) | null;
+/** A timescale click, reporting which timescale was clicked in */
+export type ColumnTimescaleClickHandler = (event: Event, data: TimescaleClickData & {
+    timescaleID: number;
+}) => void;
+/** A timescale to draw beside a column.
+ *
+ * The international timescale is one of these, not a special case: it is the
+ * one that happens to be nested several levels deep. Anything with the same
+ * shape can take its place or sit beside it — a regional set from the API, a
+ * zonation assembled locally, or a hierarchy that isn't a timescale at all,
+ * so long as its "intervals" carry ages.
+ */
+export interface ColumnTimescale {
+    /** Integer identifier. Clicks and per-interval styles report it, so a
+     * consumer can tell one column's copy of an interval from another's. For a
+     * Macrostrat timescale it is the `timescale_id`. */
+    id: number;
+    /** Shown above the column, unless `label` says otherwise */
+    name?: string;
+    /** The intervals themselves, flat or already nested by `pid`. Left out,
+     * the timescale `id` is fetched from the Macrostrat API. */
+    intervals?: Interval[];
+    /** Levels to draw, and so how many slots wide the column is (default
+     * `[1, 1]`: one level, which is what a flat timescale has) */
+    levels?: [number, number];
+    /** `oid` of the interval the tree hangs from (default 0) */
+    rootInterval?: number;
+    /** Drawn above the column in place of the name — any node, so a consumer
+     * can put a control or a legend there instead of text */
+    label?: ReactNode;
+}
+export type ColumnTimescaleLike = number | ColumnTimescale;
 interface CompositeTimescaleProps {
+    /** Every timescale to draw, in order. A bare number is a Macrostrat
+     * timescale to fetch and draw as a single level.
+     *
+     * Given this, `levels`, `timescaleID` and `additionalTimescales` are
+     * ignored: it says what they say and more. */
+    timescales?: ColumnTimescaleLike[];
+    /** Levels of the ICS hierarchy to show. If a number, the finest level is
+     * `levels[0]`, the second-finest is `levels[1]`, etc. If an array, the
+     * first element is the starting level, the second is the ending level. */
     levels?: [number, number] | number;
     unconformityLabels?: boolean;
-    onClickInterval?: TimescaleClickHandler;
+    onClickInterval?: ColumnTimescaleClickHandler;
     /** Per-interval style (e.g. to highlight the currently selected interval). */
-    intervalStyle?: IntervalStyleBuilder;
+    intervalStyle?: ColumnIntervalStyleBuilder;
+    /** The timescale to draw. Defaults to the international one; any other
+     * Macrostrat timescale (a regional or project-specific set of intervals)
+     * can be drawn in its place. */
+    timescaleID?: number;
+    /** Further timescales drawn as extra level columns beside the main one,
+     * against the same scale. Shorthand for listing them in `timescales`. */
+    additionalTimescales?: number[];
+    /** Draw the names above the columns. They sit above the column proper, so
+     * leave top padding for them. */
+    showLabels?: boolean;
+    className?: string;
 }
 export declare function CompositeTimescale(props: CompositeTimescaleProps): import('react').FunctionComponentElement<CompositeTimescaleCoreProps>;
 type CompositeTimescaleCoreProps = CompositeTimescaleProps & {
     packages: PackageScaleLayoutData[];
-    onClickInterval?: TimescaleClickHandler;
 };
-export declare function CompositeTimescaleCore(props: CompositeTimescaleCoreProps): import('react').DOMElement<import('react').DOMAttributes<Element>, Element>;
+export declare function CompositeTimescaleCore(props: CompositeTimescaleCoreProps): import('react').ReactElement<{
+    className: string | undefined;
+}, string | import('react').JSXElementConstructor<any>>;
 export declare function UnconformityLabels(props: {
     width: string | number;
     sections: PackageScaleLayoutData[];

package/dist/section.js

@@ -1,13 +1,13 @@
 import { useMemo } from "react";
-import { useMacrostratIntervals, Timescale, TimescaleOrientation } from "@macrostrat/timescale";
+import { Timescale, TimescaleOrientation, useMacrostratTimescales } from "@macrostrat/timescale";
 import { ColumnAxisType, SVG } from "@macrostrat/column-components";
 import h$1 from "@macrostrat/hyper";
 import h$2 from "./column.module.sass.js";
-import { useMacrostratBaseURL } from "@macrostrat/data-provider";
 import { Value } from "@macrostrat/data-components";
 import { useMacrostratColumnData, useMacrostratUnits, MacrostratColumnProvider } from "./data-provider/store.js";
 import { LabelTrackerProvider, SectionLabelsColumn, CompositeUnitsColumn } from "./units/composite.js";
 import { Duration } from "./unit-details/age-range.js";
+const INTERNATIONAL_TIMESCALE_ID = 11;
 const h = h$1.styled(h$2);
 function SectionsColumn(props) {
   const {
@@ -19,7 +19,8 @@ function SectionsColumn(props) {
     columnWidth = 150,
     showLabelColumn = true,
     clipUnits = true,
-    maxInternalColumns
+    maxInternalColumns,
+    labelSuppressHeight
   } = props;
   const units = useMacrostratUnits();
   const key = units[0]?.col_id;
@@ -34,7 +35,8 @@ function SectionsColumn(props) {
       unconformityLabels
     }),
     h.if(showLabelColumn)(SectionLabelsColumn, {
-      width: width - columnWidth
+      width: width - columnWidth,
+      labelSuppressHeight
     })
   ]);
 }
@@ -49,7 +51,7 @@ function SectionUnitsColumn(props) {
     axisType,
     unconformityLabels = true
   } = props;
-  const { sections, totalHeight } = useMacrostratColumnData();
+  const { sections, totalHeight, axisType: columnAxisType } = useMacrostratColumnData();
   const scaleData = sections.map((section) => {
     return section.scaleInfo;
   });
@@ -86,6 +88,9 @@ function SectionUnitsColumn(props) {
     h.if(unconformityLabels)(UnconformityLabels, {
       width,
       sections: scaleData,
+      // A gap between sections is measured in whatever the axis is: metres
+      // down a core, Myr across a time column
+      axisType: axisType ?? columnAxisType,
       verbose: false
     })
   ]);
@@ -149,44 +154,71 @@ function CompositeTimescale(props) {
     ...props
   });
 }
+function TimescaleLabel({ timescale }) {
+  const { label, name } = timescale;
+  const style = levelCountStyle(levelCount(timescale));
+  let content = label;
+  if (label == null && name != null) {
+    content = h("span.timescale-label-text", name);
+  }
+  if (content == null) return h("div.timescale-label", { style });
+  return h("div.timescale-label", { style }, content);
+}
+function levelCountStyle(levelCount2) {
+  return { "--timescale-level-count": levelCount2 };
+}
 function CompositeTimescaleCore(props) {
   const {
-    levels = 3,
     packages,
     unconformityLabels = false,
     onClickInterval,
-    intervalStyle
+    intervalStyle,
+    showLabels = false,
+    className
   } = props;
-  const baseURL = useMacrostratBaseURL();
-  const intervals = useMacrostratIntervals({ baseURL });
-  let _levels;
-  if (typeof levels === "number") {
-    _levels = [2, Math.max(2 + Math.min(levels, 5) - 1, 1)];
-  } else {
-    _levels = levels;
+  const timescales = useColumnTimescales(props);
+  function forTimescale(id) {
+    let onClick = null;
+    if (onClickInterval != null) {
+      onClick = (event, data) => {
+        onClickInterval(event, { ...data, timescaleID: id });
+      };
+    }
+    let style = intervalStyle;
+    if (typeof intervalStyle === "function") {
+      style = (interval) => intervalStyle(interval, id);
+    }
+    return { onClick, intervalStyle: style };
   }
-  const nCols = _levels[1] - _levels[0] + 1;
-  return h("div.timescale-column", [
+  return h("div.timescale-column", { className }, [
+    h.if(showLabels)(
+      "div.timescale-labels",
+      timescales.map(
+        (timescale) => h(TimescaleLabel, { key: timescale.id, timescale })
+      )
+    ),
     h(
       "div.timescales",
       packages.map((group) => {
         const { pixelHeight, paddingTop, key, scale } = group;
         return h(
-          "div.timescale-container",
-          { style: { paddingTop, "--timescale-level-count": nCols }, key },
-          [
-            h(Timescale, {
+          "div.section-timescales",
+          { style: { paddingTop }, key },
+          timescales.map(
+            (timescale) => h(Timescale, {
+              key: timescale.id,
               orientation: TimescaleOrientation.VERTICAL,
               length: pixelHeight,
-              levels: _levels,
+              levels: timescale.levels,
+              rootInterval: timescale.rootInterval,
               absoluteAgeScale: true,
               showAgeAxis: false,
               scale,
-              intervals,
-              onClick: onClickInterval,
-              intervalStyle
+              intervals: timescale.intervals,
+              style: levelCountStyle(levelCount(timescale)),
+              ...forTimescale(timescale.id)
             })
-          ]
+          )
         );
       })
     ),
@@ -198,6 +230,58 @@ function CompositeTimescaleCore(props) {
     })
   ]);
 }
+function useColumnTimescales(props) {
+  const { timescales, levels = 3, timescaleID, additionalTimescales } = props;
+  const specs = useMemo(
+    () => timescaleSpecs({ timescales, levels, timescaleID, additionalTimescales }),
+    [
+      timescales,
+      levels,
+      timescaleID,
+      additionalTimescales?.join(",")
+    ]
+  );
+  const fetchIDs = useMemo(
+    () => specs.filter((d) => d.intervals == null).map((d) => d.id),
+    [specs]
+  );
+  const intervalSets = useMacrostratTimescales(fetchIDs);
+  return useMemo(
+    () => specs.map((spec) => ({
+      ...spec,
+      intervals: spec.intervals ?? intervalSets.get(spec.id) ?? []
+    })),
+    [specs, intervalSets]
+  );
+}
+function timescaleSpecs(props) {
+  const { timescales, levels = 3, timescaleID, additionalTimescales = [] } = props;
+  if (timescales != null) {
+    return timescales.map(normalizeTimescale);
+  }
+  return [
+    {
+      id: timescaleID ?? INTERNATIONAL_TIMESCALE_ID,
+      levels: levelRange(levels)
+    },
+    ...additionalTimescales.map(normalizeTimescale)
+  ];
+}
+function normalizeTimescale(timescale) {
+  if (typeof timescale === "number") {
+    return { id: timescale, levels: FLAT_TIMESCALE_LEVELS };
+  }
+  return { levels: FLAT_TIMESCALE_LEVELS, ...timescale };
+}
+const FLAT_TIMESCALE_LEVELS = [1, 1];
+function levelRange(levels) {
+  if (typeof levels !== "number") return levels;
+  return [2, Math.max(2 + Math.min(levels, 5) - 1, 1)];
+}
+function levelCount(timescale) {
+  const [min, max] = timescale.levels ?? FLAT_TIMESCALE_LEVELS;
+  return Math.max(max - min + 1, 1);
+}
 function UnconformityLabels(props) {
   const { width, sections, className, axisType, verbose } = props;
   return h(