@macrostrat/column-views 3.12.0 → 3.12.2

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

@@ -1,5 +1,5 @@
 import { IntervalTagProps } from '@macrostrat/data-components';
-import { ReactNode } from 'react';
+export { AgeLabel, getAge, IntervalProportion as Proportion, } from '@macrostrat/data-components';
 export declare function AgeField({ unit, children, ...rest }: {
     [x: string]: any;
     unit: any;
@@ -26,17 +26,6 @@ export declare function AgeRange({ data, className, }: {
     children?: any;
     className?: string;
 }>;
-export declare function AgeLabel({ age, maximumFractionDigits, minimumFractionDigits, className, }: {
-    age: number;
-    className?: string;
-    maximumFractionDigits?: number;
-    minimumFractionDigits?: number;
-}): import('react').FunctionComponentElement<{
-    value?: any;
-    unit?: string;
-    children?: any;
-    className?: string;
-}>;
 export declare function Duration({ value, maximumFractionDigits, minimumFractionDigits, }: {
     value: any;
     maximumFractionDigits?: number | undefined;
@@ -64,12 +53,7 @@ export interface IntervalProportionsProps extends Omit<IntervalTagProps, "interv
     onClickItem?: any;
 }
 export declare function IntervalProportions({ unit, className, showProportions, calculateProportionsFromAges, ...rest }: IntervalProportionsProps): import('react').FunctionComponentElement<{
-    children?: ReactNode;
+    children?: import('react').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

@@ -1,7 +1,8 @@
-import { DataField, Value, ItemList, IntervalTag } from "@macrostrat/data-components";
+import { DataField, Value, IntervalProportion, ItemList, IntervalTag } from "@macrostrat/data-components";
+import { AgeLabel, IntervalProportion as IntervalProportion2, getAge } from "@macrostrat/data-components";
 import { useMacrostratDefs } from "@macrostrat/data-provider";
 import h from "./age-range.module.sass.js";
-import { formatRange, formatProportion } from "./utils.js";
+import { formatRange } from "./utils.js";
 import classNames from "classnames";
 import { useMemo } from "react";
 function AgeField({ unit, children, ...rest }) {
@@ -28,19 +29,6 @@ function AgeRange({
     className
   });
 }
-function AgeLabel({
-  age,
-  maximumFractionDigits = 2,
-  minimumFractionDigits = 0,
-  className
-}) {
-  const [value, unit] = getAge(age);
-  const _value = value.toLocaleString("en-US", {
-    maximumFractionDigits,
-    minimumFractionDigits
-  });
-  return h(Value, { value: _value, unit, className });
-}
 function Duration({
   value,
   maximumFractionDigits = 2,
@@ -106,9 +94,9 @@ function IntervalProportions({
   let p0 = null;
   let p1 = null;
   if (_showProps !== false) {
-    p1 = h(Proportion, { value: t_prop });
+    p1 = h(IntervalProportion, { value: t_prop });
     if (i0 !== i1 || b_prop !== 0 || t_prop !== 1) {
-      p0 = h(Proportion, { value: b_prop });
+      p0 = h(IntervalProportion, { value: b_prop });
     }
     if (i0 === i1 && (b_prop !== 0 || t_prop !== 1)) {
       p0 = h("span.joint-proportion", [p0, " ", h("span.sep", "to"), " ", p1]);
@@ -141,17 +129,6 @@ function IntervalProportions({
 function getProportion(age, interval) {
   return (interval.b_age - age) / (interval.b_age - interval.t_age);
 }
-function Proportion({ value }) {
-  let content = null;
-  if (value == 0) {
-    content = "base";
-  } else if (value == 1) {
-    content = "top";
-  } else {
-    content = formatProportion(value * 100) + "%";
-  }
-  return h("span.proportion", content);
-}
 function getAgeRange(_unit) {
   let b_age = _unit.b_age;
   let t_age = _unit.t_age;
@@ -167,28 +144,13 @@ function getAgeRange(_unit) {
   }
   return [b_age, t_age, unit];
 }
-function getAge(value) {
-  let unit = "Ma";
-  if (value < 0.8) {
-    unit = "ka";
-    value *= 1e3;
-    if (value < 5) {
-      unit = "yr";
-      value *= 1e3;
-    }
-  } else if (value > 1e3) {
-    unit = "Ga";
-    value /= 1e3;
-  }
-  return [value, unit];
-}
 export {
   AgeField,
   AgeLabel,
   AgeRange,
   Duration,
   IntervalProportions,
-  Proportion,
+  IntervalProportion2 as 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 { 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":"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"}
+{"version":3,"file":"age-range.js","sources":["../../src/unit-details/age-range.ts"],"sourcesContent":["import {\n  DataField,\n  IntervalProportion,\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 { formatRange } from \"./utils\";\nimport classNames from \"classnames\";\nimport { useMemo } from \"react\";\n\n// The interval tag, its proportion and single-age label live in\n// `@macrostrat/data-components`; re-exported under their names here.\nexport {\n  AgeLabel,\n  getAge,\n  IntervalProportion as Proportion,\n} from \"@macrostrat/data-components\";\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 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(IntervalProportion, { 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(IntervalProportion, { 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 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"],"names":["int0","int1"],"mappings":"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"}

package/dist/unit-details/utils.cjs

@@ -1,9 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const formatProportion = (d) => {
-  if (d == null) return null;
-  return d.toFixed(1);
-};
 function formatRange(min, max, precision = null) {
   if (min == null || max == null) return null;
   if (min === max) {
@@ -25,7 +21,6 @@ function formatSignificance(value, precision = null) {
     return (value / Math.pow(10, -precision)).toFixed(0) + "0".repeat(-precision);
   }
 }
-exports.formatProportion = formatProportion;
 exports.formatRange = formatRange;
 exports.formatSignificance = formatSignificance;
 //# sourceMappingURL=utils.cjs.map

package/dist/unit-details/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../src/unit-details/utils.ts"],"sourcesContent":["export const formatProportion = (d) => {\n  if (d == null) return null;\n  return d.toFixed(1);\n};\n\nexport function formatRange(min, max, precision = null) {\n  if (min == null || max == null) return null;\n  if (min === max) {\n    return min.toFixed(precision);\n  }\n\n  return `${formatSignificance(min, precision)}–${formatSignificance(\n    max,\n    precision,\n  )}`;\n}\n\nexport function formatSignificance(value, precision = null) {\n  // Format to preserve a reasonable number of significant figures\n  // this could be done with an easier algorithm, probably:\n\n  if (precision == null) {\n    return value.toLocaleString();\n  }\n  if (precision >= 0) {\n    return value.toFixed(precision);\n  }\n  if (precision < 0) {\n    return (\n      (value / Math.pow(10, -precision)).toFixed(0) + \"0\".repeat(-precision)\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAO,MAAM,mBAAmB,CAAC,MAAM;AACrC,MAAI,KAAK,KAAM,QAAO;AACtB,SAAO,EAAE,QAAQ,CAAC;AACpB;AAEO,SAAS,YAAY,KAAK,KAAK,YAAY,MAAM;AACtD,MAAI,OAAO,QAAQ,OAAO,KAAM,QAAO;AACvC,MAAI,QAAQ,KAAK;AACf,WAAO,IAAI,QAAQ,SAAS;AAAA,EAC9B;AAEA,SAAO,GAAG,mBAAmB,KAAK,SAAS,CAAC,IAAI;AAAA,IAC9C;AAAA,IACA;AAAA,EAAA,CACD;AACH;AAEO,SAAS,mBAAmB,OAAO,YAAY,MAAM;AAI1D,MAAI,aAAa,MAAM;AACrB,WAAO,MAAM,eAAA;AAAA,EACf;AACA,MAAI,aAAa,GAAG;AAClB,WAAO,MAAM,QAAQ,SAAS;AAAA,EAChC;AACA,MAAI,YAAY,GAAG;AACjB,YACG,QAAQ,KAAK,IAAI,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,IAAI,IAAI,OAAO,CAAC,SAAS;AAAA,EAEzE;AACF;;;;"}
+{"version":3,"file":"utils.cjs","sources":["../../src/unit-details/utils.ts"],"sourcesContent":["export const formatProportion = (d) => {\n  if (d == null) return null;\n  return d.toFixed(1);\n};\n\nexport function formatRange(min, max, precision = null) {\n  if (min == null || max == null) return null;\n  if (min === max) {\n    return min.toFixed(precision);\n  }\n\n  return `${formatSignificance(min, precision)}–${formatSignificance(\n    max,\n    precision,\n  )}`;\n}\n\nexport function formatSignificance(value, precision = null) {\n  // Format to preserve a reasonable number of significant figures\n  // this could be done with an easier algorithm, probably:\n\n  if (precision == null) {\n    return value.toLocaleString();\n  }\n  if (precision >= 0) {\n    return value.toFixed(precision);\n  }\n  if (precision < 0) {\n    return (\n      (value / Math.pow(10, -precision)).toFixed(0) + \"0\".repeat(-precision)\n    );\n  }\n}\n"],"names":[],"mappings":";;AAKO,SAAS,YAAY,KAAK,KAAK,YAAY,MAAM;AACtD,MAAI,OAAO,QAAQ,OAAO,KAAM,QAAO;AACvC,MAAI,QAAQ,KAAK;AACf,WAAO,IAAI,QAAQ,SAAS;AAAA,EAC9B;AAEA,SAAO,GAAG,mBAAmB,KAAK,SAAS,CAAC,IAAI;AAAA,IAC9C;AAAA,IACA;AAAA,EAAA,CACD;AACH;AAEO,SAAS,mBAAmB,OAAO,YAAY,MAAM;AAI1D,MAAI,aAAa,MAAM;AACrB,WAAO,MAAM,eAAA;AAAA,EACf;AACA,MAAI,aAAa,GAAG;AAClB,WAAO,MAAM,QAAQ,SAAS;AAAA,EAChC;AACA,MAAI,YAAY,GAAG;AACjB,YACG,QAAQ,KAAK,IAAI,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,IAAI,IAAI,OAAO,CAAC,SAAS;AAAA,EAEzE;AACF;;;"}

package/dist/unit-details/utils.js

@@ -1,7 +1,3 @@
-const formatProportion = (d) => {
-  if (d == null) return null;
-  return d.toFixed(1);
-};
 function formatRange(min, max, precision = null) {
   if (min == null || max == null) return null;
   if (min === max) {
@@ -24,7 +20,6 @@ function formatSignificance(value, precision = null) {
   }
 }
 export {
-  formatProportion,
   formatRange,
   formatSignificance
 };

package/dist/unit-details/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../src/unit-details/utils.ts"],"sourcesContent":["export const formatProportion = (d) => {\n  if (d == null) return null;\n  return d.toFixed(1);\n};\n\nexport function formatRange(min, max, precision = null) {\n  if (min == null || max == null) return null;\n  if (min === max) {\n    return min.toFixed(precision);\n  }\n\n  return `${formatSignificance(min, precision)}–${formatSignificance(\n    max,\n    precision,\n  )}`;\n}\n\nexport function formatSignificance(value, precision = null) {\n  // Format to preserve a reasonable number of significant figures\n  // this could be done with an easier algorithm, probably:\n\n  if (precision == null) {\n    return value.toLocaleString();\n  }\n  if (precision >= 0) {\n    return value.toFixed(precision);\n  }\n  if (precision < 0) {\n    return (\n      (value / Math.pow(10, -precision)).toFixed(0) + \"0\".repeat(-precision)\n    );\n  }\n}\n"],"names":[],"mappings":"AAAO,MAAM,mBAAmB,CAAC,MAAM;AACrC,MAAI,KAAK,KAAM,QAAO;AACtB,SAAO,EAAE,QAAQ,CAAC;AACpB;AAEO,SAAS,YAAY,KAAK,KAAK,YAAY,MAAM;AACtD,MAAI,OAAO,QAAQ,OAAO,KAAM,QAAO;AACvC,MAAI,QAAQ,KAAK;AACf,WAAO,IAAI,QAAQ,SAAS;AAAA,EAC9B;AAEA,SAAO,GAAG,mBAAmB,KAAK,SAAS,CAAC,IAAI;AAAA,IAC9C;AAAA,IACA;AAAA,EAAA,CACD;AACH;AAEO,SAAS,mBAAmB,OAAO,YAAY,MAAM;AAI1D,MAAI,aAAa,MAAM;AACrB,WAAO,MAAM,eAAA;AAAA,EACf;AACA,MAAI,aAAa,GAAG;AAClB,WAAO,MAAM,QAAQ,SAAS;AAAA,EAChC;AACA,MAAI,YAAY,GAAG;AACjB,YACG,QAAQ,KAAK,IAAI,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,IAAI,IAAI,OAAO,CAAC,SAAS;AAAA,EAEzE;AACF;"}
+{"version":3,"file":"utils.js","sources":["../../src/unit-details/utils.ts"],"sourcesContent":["export const formatProportion = (d) => {\n  if (d == null) return null;\n  return d.toFixed(1);\n};\n\nexport function formatRange(min, max, precision = null) {\n  if (min == null || max == null) return null;\n  if (min === max) {\n    return min.toFixed(precision);\n  }\n\n  return `${formatSignificance(min, precision)}–${formatSignificance(\n    max,\n    precision,\n  )}`;\n}\n\nexport function formatSignificance(value, precision = null) {\n  // Format to preserve a reasonable number of significant figures\n  // this could be done with an easier algorithm, probably:\n\n  if (precision == null) {\n    return value.toLocaleString();\n  }\n  if (precision >= 0) {\n    return value.toFixed(precision);\n  }\n  if (precision < 0) {\n    return (\n      (value / Math.pow(10, -precision)).toFixed(0) + \"0\".repeat(-precision)\n    );\n  }\n}\n"],"names":[],"mappings":"AAKO,SAAS,YAAY,KAAK,KAAK,YAAY,MAAM;AACtD,MAAI,OAAO,QAAQ,OAAO,KAAM,QAAO;AACvC,MAAI,QAAQ,KAAK;AACf,WAAO,IAAI,QAAQ,SAAS;AAAA,EAC9B;AAEA,SAAO,GAAG,mBAAmB,KAAK,SAAS,CAAC,IAAI;AAAA,IAC9C;AAAA,IACA;AAAA,EAAA,CACD;AACH;AAEO,SAAS,mBAAmB,OAAO,YAAY,MAAM;AAI1D,MAAI,aAAa,MAAM;AACrB,WAAO,MAAM,eAAA;AAAA,EACf;AACA,MAAI,aAAa,GAAG;AAClB,WAAO,MAAM,QAAQ,SAAS;AAAA,EAChC;AACA,MAAI,YAAY,GAAG;AACjB,YACG,QAAQ,KAAK,IAAI,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,IAAI,IAAI,OAAO,CAAC,SAAS;AAAA,EAEzE;AACF;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/column-views",
-  "version": "3.12.0",
+  "version": "3.12.2",
   "description": "Data views for Macrostrat stratigraphic columns",
   "repository": {
     "type": "git",
@@ -49,8 +49,8 @@
     "@macrostrat/api-types": "^1.4.0",
     "@macrostrat/color-utils": "^1.2.2",
     "@macrostrat/column-components": "^2.2.0",
-    "@macrostrat/data-components": "^1.5.1",
-    "@macrostrat/data-provider": "^1.3.1",
+    "@macrostrat/data-components": "^1.7.0",
+    "@macrostrat/data-provider": "^1.4.1",
     "@macrostrat/hyper": "^3.1.1",
     "@macrostrat/map-views": "^1.1.1",
     "@macrostrat/scoped-store": "^1.1.0",

package/src/age-model/details.ts

@@ -15,7 +15,7 @@ import {
 import { useMacrostratDefs } from "@macrostrat/data-provider";
 import type { UnitLong } from "@macrostrat/api-types";
 import { useColumnUnitsMap } from "../data-provider";
-import { AgeLabel, Proportion } from "../unit-details/age-range";
+import { AgeLabel } from "../unit-details/age-range";
 import { formatRange } from "../unit-details/utils";
 import { ReferencesField } from "../unit-details/panel";
 import { surfaceClasses } from "./surfaces";
@@ -187,7 +187,7 @@ function SurfaceCalibrationField({ surface }: { surface: ColumnSurface }) {
       "div.calibration-interval",
       h(IntervalTag, {
         interval,
-        prefix: h(Proportion, { value: proportion }),
+        proportion,
       }),
     ),
   ]);

package/src/age-model/surfaces.ts

@@ -30,7 +30,7 @@ import {
   useMacrostratColumnData,
 } from "../data-provider";
 import { ColumnNotes } from "../notes";
-import { AgeLabel, Proportion } from "../unit-details/age-range";
+import { AgeLabel } from "../unit-details/age-range";
 import columnStyles from "../column.module.sass";
 import styles from "./surfaces.module.sass";
 import {
@@ -351,7 +351,7 @@ function SurfaceNoteLabel({ note }: { note: SurfaceNote }) {
     primary = h(IntervalTag, {
       interval,
       size: TagSize.Small,
-      prefix: h(Proportion, { value: surface.proportion }),
+      proportion: surface.proportion,
       className: "surface-interval-tag",
     });
   } else {

package/src/column.ts

@@ -169,6 +169,22 @@ export function Column(props: ColumnProps) {
     _axisType = ColumnAxisType.AGE;
   }
 
+  let _sectionOptions = sectionOptions;
+  if (_sectionOptions == undefined) {
+    // Build our own section options function based on targetUnitHeight
+    _sectionOptions = (ctx) => {
+      /** Scale targetUnitHeight by the number of units, so that a section with just a few units
+       * is drawn taller than a section with many units.
+       */
+      const n = ctx.units.length;
+      const expansionFactor = 8 / Math.min(Math.max(n, 1), 8);
+
+      return {
+        targetUnitHeight: targetUnitHeight * expansionFactor,
+      };
+    };
+  }
+
   const { sections, units, totalHeight } = usePreparedColumnUnits(rawUnits, {
     axisType: _axisType,
     t_age,
@@ -177,7 +193,7 @@ export function Column(props: ColumnProps) {
     b_pos,
     mergeSections,
     targetUnitHeight,
-    sectionOptions,
+    sectionOptions: _sectionOptions,
     unconformityHeight,
     pixelScale,
     pixelsPerMyr,

package/src/prepare-units/composite-scale.ts

@@ -4,7 +4,6 @@ import { ScaleContinuousNumeric, scaleLinear } from "d3-scale";
 import { UnitLong } from "@macrostrat/api-types";
 import { buildHybridScale } from "./dynamic-scales";
 import { sectionDensity } from "./density";
-import { ExtUnit, HybridScaleType, SectionInfo } from "./types";
 import type {
   ColumnScaleOptions,
   CompositeColumnData,
@@ -14,6 +13,8 @@ import type {
   PackageScaleLayoutData,
   SectionScaleOptions,
 } from "./types";
+import { ExtUnit, HybridScaleType, SectionInfo } from "./types";
+import { mergeAgeRanges, MergeMode } from "@macrostrat/stratigraphy-utils";
 
 // Composite scale information augmented with units in each package
 
@@ -144,7 +145,13 @@ function buildSectionScale<T extends UnitLong>(
   } = opts;
   const domain = opts.domain ?? findSectionHeightRange(data, axisType);
 
-  const dAge = Math.abs(domain[0] - domain[1]);
+  const dAge = dx(domain);
+  let visibleExtent = dAge; // full section is visible
+  if (visibleWindow != null) {
+    visibleExtent = dx(
+      mergeAgeRanges([domain, visibleWindow], MergeMode.Inner),
+    );
+  }
 
   let _pixelScale: any = opts.pixelScale;
   let pixelHeight: number;
@@ -177,6 +184,7 @@ function buildSectionScale<T extends UnitLong>(
      * is what it's for, and never a sliver the window happens to cut. */
     _pixelScale = sectionDensity(opts)({
       extent: dAge,
+      visibleExtent,
       unitExtents: visibleUnitExtents(data, axisType, visibleWindow),
       units: data,
       sectionID,
@@ -194,6 +202,10 @@ function buildSectionScale<T extends UnitLong>(
   );
 }
 
+function dx(range: [number, number]) {
+  return Math.abs(range[0] - range[1]);
+}
+
 /**
  * The density each section will actually render at once the window is applied.
  *
@@ -275,9 +287,12 @@ function spendOutward<T extends UnitLong>(
   // Sections ordered outward from the edge, keeping only what lies beyond it.
   const beyond = sections
     .filter(
-      (s) => direction * (s.b_age - edge) > 0 || direction * (s.t_age - edge) > 0,
+      (s) =>
+        direction * (s.b_age - edge) > 0 || direction * (s.t_age - edge) > 0,
     )
-    .sort((a, b) => direction * (nearEdge(a, direction) - nearEdge(b, direction)));
+    .sort(
+      (a, b) => direction * (nearEdge(a, direction) - nearEdge(b, direction)),
+    );
 
   let bound = edge;
   let budget = padding;
@@ -290,7 +305,8 @@ function spendOutward<T extends UnitLong>(
       direction > 0
         ? Math.max(section.t_age, bound)
         : Math.min(section.b_age, bound);
-    const available = direction > 0 ? section.b_age - from : from - section.t_age;
+    const available =
+      direction > 0 ? section.b_age - from : from - section.t_age;
     if (available <= 0) continue;
 
     const cost = available * pixelScale;
@@ -451,10 +467,7 @@ function visibleUnitExtents(
         const [b_pos, t_pos] = getUnitHeightRange(d, axisType);
         if (!clip) return Math.abs(b_pos - t_pos);
         const [b_win, t_win] = visibleWindow;
-        return Math.max(
-          0,
-          Math.min(b_pos, b_win) - Math.max(t_pos, t_win),
-        );
+        return Math.max(0, Math.min(b_pos, b_win) - Math.max(t_pos, t_win));
       })
       .filter((d) => d > 0);
 

package/src/prepare-units/density.ts

@@ -12,6 +12,8 @@ import type { UnitLong } from "@macrostrat/api-types";
 export interface SectionDensityContext {
   /** The section's extent, in axis units */
   extent: number;
+  /** The section's shown extent, in axis units */
+  visibleExtent: number;
   /** Extents of the units the render window actually shows, each clipped to
    * it. Measuring what's on screen is what makes a unit-height rule mean the
    * same thing at every zoom depth. */
@@ -28,23 +30,14 @@ export type SectionDensity = (ctx: SectionDensityContext) => number;
 
 export type SectionDensityLike = number | SectionDensity;
 
-/** Room for a typical unit on screen: `px` tall, whatever its duration.
- *
- * "Typical" is the median of the visible extents, which is the only summary
- * that survives both tails. Unit durations are spread over orders of
- * magnitude: the arithmetic mean sits above any unit you would point at, so a
- * couple of long ones squeeze everything else below the target — and the
- * geometric mean fails the other way, since a single hair-thin unit (a
- * Holocene sliver beside a Pliocene terrace, say) drags the log-average down
- * and stretches the whole section to give that sliver its 20 pixels.
- */
-export function unitHeight(px: number): SectionDensity {
-  return (ctx) => px / typicalExtent(ctx.unitExtents);
+enum UnitHeightMode {
+  MEDIAN = "median",
+  MEAN = "mean",
 }
 
 /** Room for the section: `px` tall, whatever its extent. */
 export function sectionHeight(px: number): SectionDensity {
-  return (ctx) => px / ctx.extent;
+  return (ctx) => px / ctx.visibleExtent;
 }
 
 /** A density stated outright, in pixels per axis unit. */
@@ -75,15 +68,6 @@ export function resolveDensity(
   return rule(ctx);
 }
 
-function typicalExtent(extents: number[]): number {
-  const sorted = extents.filter((d) => d > 0).sort((a, b) => a - b);
-  if (sorted.length === 0) return NaN;
-  const mid = (sorted.length - 1) / 2;
-  const lower = Math.floor(mid);
-  const upper = Math.ceil(mid);
-  return (sorted[lower] + sorted[upper]) / 2;
-}
-
 /** Mirrors the default in `sectionDensity` */
 export const DEFAULT_TARGET_UNIT_HEIGHT = 20;
 /** Small sections often have a unit or two, and no room for axis labels */
@@ -131,8 +115,7 @@ export interface SectionSizeOptions {
  * holds. What it returns overrides the column-wide options for that section;
  * anything it leaves out keeps the column's value. */
 export type SectionOptionsLike =
-  | SectionSizeOptions
-  | ((ctx: SectionDensityContext) => SectionSizeOptions);
+  SectionSizeOptions | ((ctx: SectionDensityContext) => SectionSizeOptions);
 
 export interface SectionDensityOptions extends SectionSizeOptions {
   /** Sizing decided per section */
@@ -164,7 +147,7 @@ function densityRule(opts: SectionSizeOptions): SectionDensity {
   } = opts;
 
   const derived = atLeast(
-    unitHeight(targetUnitHeight),
+    unitHeight(targetUnitHeight, UnitHeightMode.MEAN),
     fixedDensity(minPixelScale),
     sectionHeight(minSectionHeight ?? targetUnitHeight ?? 0),
   );
@@ -182,6 +165,34 @@ function densityRule(opts: SectionSizeOptions): SectionDensity {
   };
 }
 
+/** Room for a typical unit on screen: `px` tall, whatever its duration.
+ *
+ * "Typical" is the median of the visible extents, which is the only summary
+ * that survives both tails. Unit durations are spread over orders of
+ * magnitude: the arithmetic mean sits above any unit you would point at, so a
+ * couple of long ones squeeze everything else below the target — and the
+ * geometric mean fails the other way, since a single hair-thin unit (a
+ * Holocene sliver beside a Pliocene terrace, say) drags the log-average down
+ * and stretches the whole section to give that sliver its 20 pixels.
+ */
+export function unitHeight(px: number, mode: UnitHeightMode): SectionDensity {
+  return (ctx) => px / typicalExtent(ctx.unitExtents, mode);
+}
+
+function typicalExtent(extents: number[], mode: UnitHeightMode): number {
+  /** The typical extent for a unit, the median of its extents. */
+  const filtered = extents.filter((d) => d > 0);
+  if (filtered.length === 0) return NaN;
+  if (mode === UnitHeightMode.MEAN) {
+    return filtered.reduce((sum, val) => sum + val, 0) / filtered.length;
+  }
+  const sorted = filtered.sort((a, b) => a - b);
+  const mid = (sorted.length - 1) / 2;
+  const lower = Math.floor(mid);
+  const upper = Math.ceil(mid);
+  return (sorted[lower] + sorted[upper]) / 2;
+}
+
 /** The density this axis was given, if any. The axis-specific spellings win
  * over the generic one, which is what lets both be held while the axis
  * changes. */

package/src/prepare-units/helpers.ts

@@ -282,7 +282,7 @@ export function groupUnitsIntoSectionsByOverlap<T extends BaseUnit>(
     }
   }
 
-  return finalSectionList.map((section, i) => {
+  const s1 = finalSectionList.map((section, i) => {
     const [b_age, t_age] = getSectionAgeRange(section.units);
     const [b_pos, t_pos] = getSectionPosRange(section.units, axisType);
     return {
@@ -295,6 +295,8 @@ export function groupUnitsIntoSectionsByOverlap<T extends BaseUnit>(
       units: section.units as T[],
     };
   });
+
+  return sortUnits(s1, axisType);
 }
 
 export function getSectionPosRange(
@@ -338,6 +340,38 @@ export function getSectionAgeRange(units: BaseUnit[]): [number, number] {
   return getSectionPosRange(units, ColumnAxisType.AGE);
 }
 
+function forEachSection(fn, sections, ...args) {
+  return sections.map((section) => {
+    return {
+      ...section,
+      units: fn(section.units, ...args),
+    };
+  });
+}
+
+function sortUnits(units: BaseUnit[], axisType: ColumnAxisType) {
+  return units.sort((a, b) => {
+    if (
+      axisType === ColumnAxisType.HEIGHT &&
+      b.t_pos !== undefined &&
+      a.t_pos !== undefined
+    ) {
+      return b.t_pos - a.t_pos;
+    }
+    if (
+      axisType === ColumnAxisType.DEPTH &&
+      b.t_pos !== undefined &&
+      a.t_pos !== undefined
+    ) {
+      return a.t_pos - b.t_pos;
+    }
+    if (axisType === ColumnAxisType.AGE) {
+      return a.t_age - b.t_age;
+    }
+    return 0;
+  });
+}
+
 export function mergeOverlappingSections<T extends UnitLong>(
   sections: SectionInfo<T>[],
 ): SectionInfo<T>[] {

package/src/prepare-units/index.ts

@@ -228,7 +228,6 @@ export function prepareColumnUnits(
     const natural = (section) =>
       scales.get(section) ?? section.scaleInfo.pixelScale;
 
-
     const scaleFor = natural;
 
     const window =