@macrostrat/column-views 3.2.2 → 3.3.0

package/dist/maps/{units-overlay/index.js → layers/units.js}

@@ -1,16 +1,21 @@
 import { useLithologies, useMacrostratColumns } from "@macrostrat/data-provider";
 import { useAPIResult } from "@macrostrat/ui-components";
-import { useMapStyleOperator } from "@macrostrat/mapbox-react";
+import { useOverlayStyle, useMapStyleOperator } from "@macrostrat/mapbox-react";
 import { useMemo } from "react";
-import { setGeoJSON, buildGeoJSONSource, mergeStyles } from "@macrostrat/mapbox-utils";
+import { buildGeoJSONSource, mergeStyles, setGeoJSON } from "@macrostrat/mapbox-utils";
 import { getBestFGDCPatternForLithologyList } from "../../units/resolvers.js";
 import { setupStyleImageManager, loadStyleImage } from "@macrostrat/map-styles";
-import { getCSSVariable, asChromaColor } from "@macrostrat/color-utils";
+import { asChromaColor } from "@macrostrat/color-utils";
 import pMap from "p-map";
+import { BaseColumnsLayer } from "./columns.js";
+import h from "@macrostrat/hyper";
 import { flattenLithologies, getMixedColorForData } from "../../units/colors.js";
 function MacrostratUnitsOverlay(props) {
   const { time, ageSpan = 0.05, patterns = false } = props;
   const lithMap = useLithologies();
+  useOverlayStyle(() => {
+    return buildUnitsStyle({ patterns });
+  }, [patterns]);
   useMapStyleOperator(
     (map) => {
       if (!patterns) return;
@@ -35,19 +40,6 @@ function MacrostratUnitsOverlay(props) {
   }, [time, ageSpan, props.project]);
   const units = useAPIResult("/units", params);
   const columns = useMacrostratColumns(params.project, false);
-  useMapStyleOperator(
-    (map) => {
-      if (columns == null) {
-        return;
-      }
-      const data = {
-        type: "FeatureCollection",
-        features: columns
-      };
-      setGeoJSON(map, "columns", data);
-    },
-    [columns]
-  );
   useMapStyleOperator(
     (map) => {
       if (units == null || columns == null || lithMap == null) {
@@ -70,7 +62,28 @@ function MacrostratUnitsOverlay(props) {
     },
     [units, lithMap, columns, patterns]
   );
-  return null;
+  const isHovered = ["boolean", ["feature-state", "hover"], false];
+  const isShown = ["boolean", ["feature-state", "shown"], false];
+  const opacity = [
+    "case",
+    ["all", isHovered, isShown],
+    0.9,
+    isShown,
+    0.8,
+    isHovered,
+    0.3,
+    0
+  ];
+  return h([
+    h(BaseColumnsLayer, {
+      enabled: true,
+      columns,
+      opacity,
+      lineOpacity: 0.2,
+      lineColor: "lightgray",
+      color: "transparent"
+    })
+  ]);
 }
 function handleUnitsLayerUpdate(map, unitsMap, columns) {
   for (const column of columns) {
@@ -158,71 +171,10 @@ function getPatternSpec(liths, getColor) {
   return `fgdc:${patternID}:${color}:transparent`;
 }
 function buildUnitsStyle(opts = {}) {
-  const { color = null, patterns = false } = opts;
-  let columnBaseColor = color ?? getCSSVariable("--text-subtle-color", "black");
-  getCSSVariable("--selection-color", "purple");
-  let columnColor = [
-    "coalesce",
-    ["feature-state", "color"],
-    ["get", "color"],
-    columnBaseColor
-  ];
+  const { patterns = false } = opts;
   const baseStyle = {
-    sources: {
-      columns: buildGeoJSONSource()
-    },
-    version: 8,
-    layers: [
-      {
-        id: "columns-fill",
-        type: "fill",
-        source: "columns",
-        paint: {
-          "fill-color": columnColor,
-          "fill-opacity": [
-            "case",
-            ["boolean", ["feature-state", "shown"], false],
-            0.8,
-            ["boolean", ["feature-state", "hover"], false],
-            0.3,
-            0.1
-          ]
-        }
-      },
-      {
-        id: "columns-line",
-        type: "line",
-        source: "columns",
-        paint: {
-          "line-color": columnColor,
-          "line-width": 1,
-          "line-opacity": 0.5
-        }
-      },
-      {
-        id: "columns-points",
-        type: "circle",
-        source: "columns",
-        paint: {
-          "circle-radius": 4,
-          "circle-color": [
-            "case",
-            ["boolean", ["feature-state", "shown"], false],
-            columnColor,
-            columnBaseColor
-          ],
-          "circle-opacity": [
-            "case",
-            ["boolean", ["feature-state", "shown"], false],
-            0.8,
-            ["boolean", ["feature-state", "hover"], false],
-            0.3,
-            0.1
-          ]
-        },
-        filter: ["==", "$type", "Point"]
-      }
-    ]
+    sources: {},
+    version: 8
   };
   if (!patterns) {
     return baseStyle;
@@ -249,4 +201,4 @@ export {
   MacrostratUnitsOverlay,
   buildUnitsStyle
 };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=units.js.map

package/dist/maps/layers/units.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"units.js","sources":["../../../src/maps/layers/units.ts"],"sourcesContent":["import {\n  useLithologies,\n  useMacrostratColumns,\n} from \"@macrostrat/data-provider\";\nimport { useAPIResult } from \"@macrostrat/ui-components\";\nimport { useMapStyleOperator, useOverlayStyle } from \"@macrostrat/mapbox-react\";\nimport { FeatureCollection } from \"geojson\";\nimport { useMemo } from \"react\";\nimport { mergeStyles, setGeoJSON } from \"@macrostrat/mapbox-utils\";\nimport { UnitLithology, UnitLong } from \"@macrostrat/api-types\";\nimport { flattenLithologies, getMixedColorForData } from \"../../units\";\nimport { getBestFGDCPatternForLithologyList } from \"../../units/resolvers\";\nimport {\n  setupStyleImageManager,\n  loadStyleImage,\n  StyleFragment,\n} from \"@macrostrat/map-styles\";\nimport { asChromaColor } from \"@macrostrat/color-utils\";\nimport { buildGeoJSONSource } from \"@macrostrat/mapbox-utils\";\nimport pMap from \"p-map\";\nimport { BaseColumnsLayer } from \"./columns\";\nimport h from \"@macrostrat/hyper\";\n\nexport interface UnitsOverlayProps {\n  time: number;\n  ageSpan?: number;\n  project?: number | number[];\n  patterns?: boolean;\n}\n\nexport function MacrostratUnitsOverlay(props: UnitsOverlayProps) {\n  const { time, ageSpan = 0.05, patterns = false } = props;\n  const lithMap = useLithologies();\n\n  useOverlayStyle(() => {\n    return buildUnitsStyle({ patterns });\n  }, [patterns]);\n\n  useMapStyleOperator(\n    (map) => {\n      if (!patterns) return;\n      setupStyleImageManager(map, { verbose: false });\n    },\n    [patterns],\n  );\n\n  const params = useMemo(() => {\n    let project: number[] | undefined;\n    if (Number.isFinite(props.project)) {\n      project = [props.project as number];\n    } else if (!Array.isArray(props.project)) {\n      project = undefined;\n    }\n    // Project can only be a single project for now\n    const projectCompat =\n      project != null && project.length > 0 ? project[0] : undefined;\n\n    return {\n      age_bottom: time + ageSpan / 2,\n      age_top: time - ageSpan / 2,\n      response: \"long\",\n      project: projectCompat,\n    };\n  }, [time, ageSpan, props.project]);\n\n  const units: UnitLong[] = useAPIResult(\"/units\", params);\n  const columns = useMacrostratColumns(params.project, false);\n\n  useMapStyleOperator(\n    (map) => {\n      if (units == null || columns == null || lithMap == null) {\n        return;\n      }\n\n      const getColorForLithology = (data: UnitLithology): string | null => {\n        return lithMap?.get(data.lith_id)?.color ?? null;\n      };\n\n      const unitsMap = postProcessUnits(units, getColorForLithology);\n      handleUnitsLayerUpdate(map, unitsMap, columns);\n      if (patterns) {\n        handlePatternOverlayUpdate(\n          map,\n          unitsMap,\n          columns,\n          getColorForLithology,\n        ).then(() => {});\n      }\n    },\n    [units, lithMap, columns, patterns],\n  );\n\n  const isHovered = [\"boolean\", [\"feature-state\", \"hover\"], false];\n  const isShown = [\"boolean\", [\"feature-state\", \"shown\"], false];\n\n  const opacity = [\n    \"case\",\n    [\"all\", isHovered, isShown],\n    0.9,\n    isShown,\n    0.8,\n    isHovered,\n    0.3,\n    0.0,\n  ];\n\n  return h([\n    h(BaseColumnsLayer, {\n      enabled: true,\n      columns,\n      opacity,\n      lineOpacity: 0.2,\n      lineColor: \"lightgray\",\n      color: \"transparent\",\n    }),\n  ]);\n}\n\nfunction handleUnitsLayerUpdate(\n  map,\n  unitsMap: Map<number, UnitsDisplayInfo>,\n  columns: any[],\n) {\n  // Update feature states\n  for (const column of columns) {\n    const col_id = column.properties.col_id;\n    const info = unitsMap.get(Number(col_id));\n    const color = info?.color;\n    map.setFeatureState(\n      { source: \"columns\", id: col_id },\n      {\n        color,\n        shown: color != null,\n      },\n    );\n  }\n}\n\nasync function handlePatternOverlayUpdate(\n  map,\n  unitsMap: Map<number, UnitsDisplayInfo>,\n  columns: any[],\n  getColor: LithologyColorGetter,\n) {\n  // synthesize patterns not yet in cache\n\n  const colsWithPatterns = [];\n  const patternIDs = new Set<string>();\n  // Update feature states\n  for (const column of columns) {\n    const col_id = column.properties.col_id;\n    const info = unitsMap.get(Number(col_id));\n    if (info == null) continue;\n    const pattern = getPatternSpec(info?.liths, getColor);\n    if (pattern == null) continue;\n\n    colsWithPatterns.push({\n      type: \"Feature\",\n      geometry: column.geometry,\n      properties: {\n        col_id,\n        pattern,\n      },\n    });\n    patternIDs.add(pattern);\n  }\n\n  const patternsToLoad = patternIDs.values().filter((d) => !map.hasImage(d));\n\n  const mapper = async (patternID) => {\n    try {\n      await loadStyleImage(map, patternID, { pixelRatio: 10 });\n    } catch (e) {}\n  };\n  // Load all pattern images\n  await pMap(patternsToLoad, mapper, { concurrency: 5 });\n\n  // Set data for pattern layer\n  // This is inefficient but the only way to set per-feature patterns in Mapbox\n  const patternData: FeatureCollection = {\n    type: \"FeatureCollection\",\n    features: colsWithPatterns,\n  };\n  setGeoJSON(map, \"column-patterns\", patternData);\n}\n\nconst cachedColors = new Map<string, string>();\n\nfunction getDarkenedColor(color: string): string {\n  /** Memoized function to get a darkened version of a color for pattern use */\n  if (cachedColors.has(color)) {\n    return cachedColors.get(color);\n  }\n  const c1 = asChromaColor(color).set(\"hsl.l\", 0.4).set(\"hsl.s\", 0.8).hex();\n  cachedColors.set(color, c1);\n  return c1;\n}\n\ninterface UnitsDisplayInfo {\n  col_id: number;\n  units: UnitLong[];\n  color: string;\n  liths: UnitLithology[];\n}\n\ntype LithologyColorGetter = (val: UnitLithology) => string | null;\n\nfunction postProcessUnits(\n  units: UnitLong[],\n  getColor: LithologyColorGetter,\n): Map<number, UnitsDisplayInfo> {\n  // Group by col_id\n  const unitsByColumn: Map<number, UnitLong[]> = new Map();\n  for (const unit of units) {\n    const col_id = Number(unit.col_id);\n    if (!unitsByColumn.has(col_id)) {\n      unitsByColumn.set(col_id, [unit]);\n    } else {\n      unitsByColumn.set(col_id, [...unitsByColumn.get(col_id), unit]);\n    }\n  }\n\n  // Summarize units for display\n  const res = new Map<number, UnitsDisplayInfo>();\n  for (const [col_id, unitList] of unitsByColumn.entries()) {\n    const liths = flattenLithologies(unitList.map((u) => u.lith));\n    res.set(col_id, {\n      col_id,\n      units: unitList,\n      liths,\n      color: getMixedColorForData(liths, getColor),\n    });\n  }\n\n  return res;\n}\n\nfunction getPatternSpec(\n  liths: UnitLithology[],\n  getColor: LithologyColorGetter,\n): string | null {\n  const patternData = getBestFGDCPatternForLithologyList(liths);\n  if (patternData == null) return null;\n  let { patternID, lith } = patternData;\n  const color = getDarkenedColor(getColor(lith));\n  return `fgdc:${patternID}:${color}:transparent`;\n}\n\ntype UnitsStyleOptions = {\n  color?: string;\n  patterns?: boolean;\n};\n\nexport function buildUnitsStyle(opts: UnitsStyleOptions = {}): StyleFragment {\n  const { patterns = false } = opts;\n\n  // If color is in the feature state or geojson properties, use that as second choice\n\n  const baseStyle: StyleFragment = {\n    sources: {},\n    version: 8,\n  };\n\n  if (!patterns) {\n    return baseStyle;\n  }\n\n  const patternStyle: StyleFragment = {\n    sources: {\n      \"column-patterns\": buildGeoJSONSource(),\n    },\n    layers: [\n      {\n        id: \"columns-fill-pattern\",\n        type: \"fill\",\n        source: \"column-patterns\",\n        paint: {\n          \"fill-pattern\": [\"get\", \"pattern\"],\n          \"fill-opacity\": 1,\n        },\n      },\n    ],\n  };\n\n  return mergeStyles(baseStyle, patternStyle);\n}\n"],"names":[],"mappings":"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"}

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

@@ -4,18 +4,34 @@ const dataComponents = require("@macrostrat/data-components");
 const dataProvider = require("@macrostrat/data-provider");
 const ageRange_module = require("./age-range.module.sass.cjs");
 const utils = require("./utils.cjs");
-function AgeField({ unit, children }) {
-  const [b_age, t_age, _unit] = getAgeRange(unit);
+const classNames = require("classnames");
+const React = require("react");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const classNames__default = /* @__PURE__ */ _interopDefault(classNames);
+function AgeField({ unit, children, ...rest }) {
+  const [_b_age, _t_age, _unit] = getAgeRange(unit);
   return ageRange_module.default(
     dataComponents.DataField,
     {
       label: "Age",
-      value: utils.formatRange(b_age, t_age),
-      unit: _unit
+      value: utils.formatRange(_b_age, _t_age),
+      unit: _unit,
+      ...rest
     },
     children
   );
 }
+function AgeRange({
+  data,
+  className
+}) {
+  const [_b_age, _t_age, _unit] = getAgeRange(data);
+  return ageRange_module.default(dataComponents.Value, {
+    value: utils.formatRange(_b_age, _t_age),
+    unit: _unit,
+    className
+  });
+}
 function AgeLabel({
   age,
   maximumFractionDigits = 2,
@@ -52,56 +68,82 @@ function Duration({
   });
   return ageRange_module.default(dataComponents.Value, { value: _value, unit });
 }
-function IntervalProportions({ unit, onClickItem }) {
-  if (unit.b_int_id == null && unit.t_int_id == null && unit.b_prop == null && unit.t_prop == null)
-    return null;
+function IntervalProportions({
+  unit,
+  className,
+  showProportions,
+  calculateProportionsFromAges = true,
+  ...rest
+}) {
+  if (unit.b_int_id == null && unit.t_int_id == null) return null;
+  let _showProps = showProportions;
   const i0 = unit.b_int_id;
   const i1 = unit.t_int_id;
-  let b_prop = unit.b_prop ?? 0;
-  let t_prop = unit.t_prop ?? 1;
   const intervalMap = dataProvider.useMacrostratDefs("intervals");
-  const int0 = intervalMap?.get(i0) ?? {};
+  const [int0, int1] = React.useMemo(() => {
+    const int02 = intervalMap?.get(i0) ?? {};
+    if (i0 === i1) {
+      return [int02, int02];
+    }
+    const int12 = intervalMap?.get(i1) ?? {};
+    return [int02, int12];
+  }, [intervalMap, i0, i1]);
   const interval0 = {
-    ...int0,
     id: i0,
-    name: unit.b_int_name
+    name: unit.b_int_name,
+    ...int0
   };
-  let p0 = null;
-  const int1 = intervalMap?.get(i1) ?? {};
-  const p1 = ageRange_module.default(Proportion, { value: t_prop });
-  if (i0 !== i1 || b_prop !== 0 || t_prop !== 1) {
-    p0 = ageRange_module.default(Proportion, { value: b_prop });
+  let b_prop = unit.b_prop;
+  let t_prop = unit.t_prop;
+  if (b_prop == null && unit.b_age != null && calculateProportionsFromAges) {
+    b_prop = getProportion(unit.b_age, int0);
+  }
+  if (t_prop == null && unit.t_age != null && calculateProportionsFromAges) {
+    t_prop = getProportion(unit.t_age, int1);
   }
-  if (i0 === i1 && (b_prop !== 0 || t_prop !== 1)) {
-    p0 = ageRange_module.default("span.joint-proportion", [p0, " ", ageRange_module.default("span.sep", "to"), " ", p1]);
+  if (b_prop == null && t_prop == null) {
+    _showProps ??= false;
   }
-  const clickable = onClickItem != null;
-  const handleClick = (event) => {
-    if (onClickItem) {
-      onClickItem(event, interval0);
+  b_prop ??= 0;
+  t_prop ??= 1;
+  let p0 = null;
+  let p1 = null;
+  if (_showProps !== false) {
+    p1 = ageRange_module.default(Proportion, { value: t_prop });
+    if (i0 !== i1 || b_prop !== 0 || t_prop !== 1) {
+      p0 = ageRange_module.default(Proportion, { value: b_prop });
     }
-  };
-  return ageRange_module.default(dataComponents.ItemList, { className: "interval-proportions" }, [
-    ageRange_module.default(dataComponents.IntervalTag, {
-      className: clickable ? "clickable" : "",
-      onClick: clickable ? handleClick : void 0,
-      interval: interval0,
-      prefix: p0
-    }),
-    ageRange_module.default.if(i0 != i1)("span.discourage-break", [
-      ageRange_module.default("span.sep", " to "),
+    if (i0 === i1 && (b_prop !== 0 || t_prop !== 1)) {
+      p0 = ageRange_module.default("span.joint-proportion", [p0, " ", ageRange_module.default("span.sep", "to"), " ", p1]);
+    }
+  }
+  return ageRange_module.default(
+    dataComponents.ItemList,
+    { className: classNames__default.default("interval-proportions", className) },
+    [
       ageRange_module.default(dataComponents.IntervalTag, {
-        className: clickable ? "clickable" : "",
-        onClick: clickable ? handleClick : void 0,
-        interval: {
-          ...int1,
-          id: i1,
-          name: unit.t_int_name
-        },
-        prefix: p1
-      })
-    ])
-  ]);
+        interval: interval0,
+        prefix: p0,
+        ...rest
+      }),
+      ageRange_module.default.if(i0 != i1)("span.discourage-break", [
+        ageRange_module.default("span.sep", " to "),
+        ageRange_module.default(dataComponents.IntervalTag, {
+          interval: {
+            id: i1,
+            name: unit.t_int_name,
+            ...int1
+          },
+          prefix: p1,
+          ...rest
+        })
+      ])
+    ]
+  );
+}
+function getProportion(age, interval) {
+  console.log(age, interval);
+  return (interval.b_age - age) / (interval.b_age - interval.t_age);
 }
 function Proportion({ value }) {
   let content = null;
@@ -146,6 +188,7 @@ function getAge(value) {
 }
 exports.AgeField = AgeField;
 exports.AgeLabel = AgeLabel;
+exports.AgeRange = AgeRange;
 exports.Duration = Duration;
 exports.IntervalProportions = IntervalProportions;
 exports.getAge = getAge;

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  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\";\n\nexport function AgeField({ unit, children }) {\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    },\n    children,\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\nexport function IntervalProportions({ unit, onClickItem }) {\n  /** Display the proportions of the unit that belong to the base and top intervals, if they are different */\n  if (\n    unit.b_int_id == null &&\n    unit.t_int_id == null &&\n    unit.b_prop == null &&\n    unit.t_prop == null\n  )\n    return null;\n\n  const i0 = unit.b_int_id;\n  const i1 = unit.t_int_id;\n  let b_prop = unit.b_prop ?? 0;\n  let t_prop = unit.t_prop ?? 1;\n\n  const intervalMap = useMacrostratDefs(\"intervals\");\n  const int0 = intervalMap?.get(i0) ?? {};\n\n  const interval0: IntervalShort = {\n    ...int0,\n    id: i0,\n    name: unit.b_int_name,\n  };\n\n  let p0: any = null;\n  const int1 = intervalMap?.get(i1) ?? {};\n  const p1: any = 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  const clickable = onClickItem != null;\n\n  const handleClick = (event: MouseEvent) => {\n    if (onClickItem) {\n      onClickItem(event, interval0);\n    }\n  };\n\n  return h(ItemList, { className: \"interval-proportions\" }, [\n    h(IntervalTag, {\n      className: clickable ? \"clickable\" : \"\",\n      onClick: clickable ? handleClick : undefined,\n      interval: interval0,\n      prefix: p0,\n    }),\n    h.if(i0 != i1)(\"span.discourage-break\", [\n      h(\"span.sep\", \" to \"),\n      h(IntervalTag, {\n        className: clickable ? \"clickable\" : \"\",\n        onClick: clickable ? handleClick : undefined,\n        interval: {\n          ...int1,\n          id: i1,\n          name: unit.t_int_name,\n        },\n        prefix: p1,\n      }),\n    ]),\n  ]);\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","ItemList","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 { 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}\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  /** Get interval information */\n  const intervalMap = useMacrostratDefs(\"intervals\");\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  console.log(age, interval);\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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"}

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

@@ -1,4 +1,6 @@
-export declare function AgeField({ unit, children }: {
+import { IntervalTagProps } from '@macrostrat/data-components';
+export declare function AgeField({ unit, children, ...rest }: {
+    [x: string]: any;
     unit: any;
     children: any;
 }): import('react').FunctionComponentElement<{
@@ -11,6 +13,18 @@ export declare function AgeField({ unit, children }: {
     unit?: string;
     row?: boolean;
 }>;
+export declare function AgeRange({ data, className, }: {
+    data: {
+        t_age: number;
+        b_age: number;
+    };
+    className?: string;
+}): import('react').FunctionComponentElement<{
+    value?: any;
+    unit?: string;
+    children?: any;
+    className?: string;
+}>;
 export declare function AgeLabel({ age, maximumFractionDigits, minimumFractionDigits, className, }: {
     age: number;
     className?: string;
@@ -32,12 +46,25 @@ export declare function Duration({ value, maximumFractionDigits, minimumFraction
     children?: any;
     className?: string;
 }>;
-export declare function IntervalProportions({ unit, onClickItem }: {
-    unit: any;
-    onClickItem: any;
-}): import('react').FunctionComponentElement<{
+interface UnitIntervalConstraints {
+    b_int_id?: number;
+    t_int_id?: number;
+    b_prop?: number;
+    t_prop?: number;
+    b_int_name?: string;
+    t_int_name?: string;
+    b_age?: number;
+    t_age?: number;
+}
+export interface IntervalProportionsProps extends Omit<IntervalTagProps, "interval"> {
+    unit: UnitIntervalConstraints;
+    showProportions?: boolean;
+    calculateProportionsFromAges?: boolean;
+}
+export declare function IntervalProportions({ unit, className, showProportions, calculateProportionsFromAges, ...rest }: IntervalProportionsProps): import('react').FunctionComponentElement<{
     children?: import('react').ReactNode;
     className: string;
 }>;
 export declare function getAgeRange(_unit: any): any[];
 export declare function getAge(value: any): any[];
+export {};

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

@@ -2,18 +2,32 @@ import { DataField, Value, ItemList, IntervalTag } from "@macrostrat/data-compon
 import { useMacrostratDefs } from "@macrostrat/data-provider";
 import h from "./age-range.module.sass.js";
 import { formatRange, formatProportion } from "./utils.js";
-function AgeField({ unit, children }) {
-  const [b_age, t_age, _unit] = getAgeRange(unit);
+import classNames from "classnames";
+import { useMemo } from "react";
+function AgeField({ unit, children, ...rest }) {
+  const [_b_age, _t_age, _unit] = getAgeRange(unit);
   return h(
     DataField,
     {
       label: "Age",
-      value: formatRange(b_age, t_age),
-      unit: _unit
+      value: formatRange(_b_age, _t_age),
+      unit: _unit,
+      ...rest
     },
     children
   );
 }
+function AgeRange({
+  data,
+  className
+}) {
+  const [_b_age, _t_age, _unit] = getAgeRange(data);
+  return h(Value, {
+    value: formatRange(_b_age, _t_age),
+    unit: _unit,
+    className
+  });
+}
 function AgeLabel({
   age,
   maximumFractionDigits = 2,
@@ -50,56 +64,82 @@ function Duration({
   });
   return h(Value, { value: _value, unit });
 }
-function IntervalProportions({ unit, onClickItem }) {
-  if (unit.b_int_id == null && unit.t_int_id == null && unit.b_prop == null && unit.t_prop == null)
-    return null;
+function IntervalProportions({
+  unit,
+  className,
+  showProportions,
+  calculateProportionsFromAges = true,
+  ...rest
+}) {
+  if (unit.b_int_id == null && unit.t_int_id == null) return null;
+  let _showProps = showProportions;
   const i0 = unit.b_int_id;
   const i1 = unit.t_int_id;
-  let b_prop = unit.b_prop ?? 0;
-  let t_prop = unit.t_prop ?? 1;
   const intervalMap = useMacrostratDefs("intervals");
-  const int0 = intervalMap?.get(i0) ?? {};
+  const [int0, int1] = useMemo(() => {
+    const int02 = intervalMap?.get(i0) ?? {};
+    if (i0 === i1) {
+      return [int02, int02];
+    }
+    const int12 = intervalMap?.get(i1) ?? {};
+    return [int02, int12];
+  }, [intervalMap, i0, i1]);
   const interval0 = {
-    ...int0,
     id: i0,
-    name: unit.b_int_name
+    name: unit.b_int_name,
+    ...int0
   };
-  let p0 = null;
-  const int1 = intervalMap?.get(i1) ?? {};
-  const p1 = h(Proportion, { value: t_prop });
-  if (i0 !== i1 || b_prop !== 0 || t_prop !== 1) {
-    p0 = h(Proportion, { value: b_prop });
+  let b_prop = unit.b_prop;
+  let t_prop = unit.t_prop;
+  if (b_prop == null && unit.b_age != null && calculateProportionsFromAges) {
+    b_prop = getProportion(unit.b_age, int0);
+  }
+  if (t_prop == null && unit.t_age != null && calculateProportionsFromAges) {
+    t_prop = getProportion(unit.t_age, int1);
   }
-  if (i0 === i1 && (b_prop !== 0 || t_prop !== 1)) {
-    p0 = h("span.joint-proportion", [p0, " ", h("span.sep", "to"), " ", p1]);
+  if (b_prop == null && t_prop == null) {
+    _showProps ??= false;
   }
-  const clickable = onClickItem != null;
-  const handleClick = (event) => {
-    if (onClickItem) {
-      onClickItem(event, interval0);
+  b_prop ??= 0;
+  t_prop ??= 1;
+  let p0 = null;
+  let p1 = null;
+  if (_showProps !== false) {
+    p1 = h(Proportion, { value: t_prop });
+    if (i0 !== i1 || b_prop !== 0 || t_prop !== 1) {
+      p0 = h(Proportion, { value: b_prop });
     }
-  };
-  return h(ItemList, { className: "interval-proportions" }, [
-    h(IntervalTag, {
-      className: clickable ? "clickable" : "",
-      onClick: clickable ? handleClick : void 0,
-      interval: interval0,
-      prefix: p0
-    }),
-    h.if(i0 != i1)("span.discourage-break", [
-      h("span.sep", " to "),
+    if (i0 === i1 && (b_prop !== 0 || t_prop !== 1)) {
+      p0 = h("span.joint-proportion", [p0, " ", h("span.sep", "to"), " ", p1]);
+    }
+  }
+  return h(
+    ItemList,
+    { className: classNames("interval-proportions", className) },
+    [
       h(IntervalTag, {
-        className: clickable ? "clickable" : "",
-        onClick: clickable ? handleClick : void 0,
-        interval: {
-          ...int1,
-          id: i1,
-          name: unit.t_int_name
-        },
-        prefix: p1
-      })
-    ])
-  ]);
+        interval: interval0,
+        prefix: p0,
+        ...rest
+      }),
+      h.if(i0 != i1)("span.discourage-break", [
+        h("span.sep", " to "),
+        h(IntervalTag, {
+          interval: {
+            id: i1,
+            name: unit.t_int_name,
+            ...int1
+          },
+          prefix: p1,
+          ...rest
+        })
+      ])
+    ]
+  );
+}
+function getProportion(age, interval) {
+  console.log(age, interval);
+  return (interval.b_age - age) / (interval.b_age - interval.t_age);
 }
 function Proportion({ value }) {
   let content = null;
@@ -145,6 +185,7 @@ function getAge(value) {
 export {
   AgeField,
   AgeLabel,
+  AgeRange,
   Duration,
   IntervalProportions,
   getAge,