@macrostrat/column-views 3.2.1 → 3.2.2

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,3 @@
+export declare const formatProportion: (d: any) => any;
+export declare function formatRange(min: any, max: any, precision?: any): any;
+export declare function formatSignificance(value: any, precision?: any): any;

package/dist/unit-details/utils.js

@@ -0,0 +1,31 @@
+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) {
+    return min.toFixed(precision);
+  }
+  return `${formatSignificance(min, precision)}–${formatSignificance(
+    max,
+    precision
+  )}`;
+}
+function formatSignificance(value, precision = null) {
+  if (precision == null) {
+    return value.toLocaleString();
+  }
+  if (precision >= 0) {
+    return value.toFixed(precision);
+  }
+  if (precision < 0) {
+    return (value / Math.pow(10, -precision)).toFixed(0) + "0".repeat(-precision);
+  }
+}
+export {
+  formatProportion,
+  formatRange,
+  formatSignificance
+};
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +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;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/column-views",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "description": "Data views for Macrostrat stratigraphic columns",
   "repository": {
     "type": "git",
@@ -49,10 +49,10 @@
     "@macrostrat/api-types": "^1.1.5",
     "@macrostrat/color-utils": "^1.2.1",
     "@macrostrat/column-components": "^2.0.4",
-    "@macrostrat/data-components": "^1.1.1",
+    "@macrostrat/data-components": "^1.1.2",
     "@macrostrat/data-provider": "^1.0.1",
     "@macrostrat/hyper": "^3.0.6",
-    "@macrostrat/map-interface": "^2.0.2",
+    "@macrostrat/map-interface": "^2.1.0",
     "@macrostrat/map-styles": "^2.1.0",
     "@macrostrat/mapbox-react": "^3.0.2",
     "@macrostrat/mapbox-utils": "^1.7.2",

package/src/unit-details/age-range.module.sass

@@ -0,0 +1,15 @@
+.interval-proportions
+  display: inline-flex
+  flex-flow: row wrap
+  gap: 0.5em
+  text-align: right
+  align-items: baseline
+
+.interval-proportions, .discourage-break
+  align-items: baseline
+  white-space: nowrap
+  display: inline-flex
+  gap: 0.5em
+
+.sep
+  color: var(--secondary-color)

package/src/unit-details/age-range.ts

@@ -0,0 +1,191 @@
+import {
+  DataField,
+  IntervalShort,
+  IntervalTag,
+  ItemList,
+  Value,
+} from "@macrostrat/data-components";
+import { useMacrostratDefs } from "@macrostrat/data-provider";
+import h from "./age-range.module.sass";
+import { formatProportion, formatRange } from "./utils";
+
+export function AgeField({ unit, children }) {
+  const [b_age, t_age, _unit] = getAgeRange(unit);
+
+  return h(
+    DataField,
+    {
+      label: "Age",
+      value: formatRange(b_age, t_age),
+      unit: _unit,
+    },
+    children,
+  );
+}
+
+export function AgeLabel({
+  age,
+  maximumFractionDigits = 2,
+  minimumFractionDigits = 0,
+  className,
+}: {
+  age: number;
+  className?: string;
+  maximumFractionDigits?: number;
+  minimumFractionDigits?: number;
+}) {
+  /** Component to display a single age value with unit conversion from
+   * Ma to ka or Ga as appropriate.
+   */
+  const [value, unit] = getAge(age);
+
+  const _value = value.toLocaleString("en-US", {
+    maximumFractionDigits,
+    minimumFractionDigits,
+  });
+
+  return h(Value, { value: _value, unit, className });
+}
+
+export function Duration({
+  value,
+  maximumFractionDigits = 2,
+  minimumFractionDigits = 0,
+}) {
+  let unit = "Myr";
+  if (value < 0.8) {
+    unit = "kyr";
+    value *= 1000;
+    if (value < 5) {
+      unit = "yr";
+      value *= 1000;
+    }
+  } else if (value > 1000) {
+    unit = "Gyr";
+    value /= 1000;
+  }
+
+  let _value = value.toLocaleString("en-US", {
+    maximumFractionDigits,
+    minimumFractionDigits,
+  });
+
+  return h(Value, { value: _value, unit });
+}
+
+export function IntervalProportions({ unit, onClickItem }) {
+  /** Display the proportions of the unit that belong to the base and top intervals, if they are different */
+  if (
+    unit.b_int_id == null &&
+    unit.t_int_id == null &&
+    unit.b_prop == null &&
+    unit.t_prop == null
+  )
+    return null;
+
+  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 interval0: IntervalShort = {
+    ...int0,
+    id: i0,
+    name: unit.b_int_name,
+  };
+
+  let p0: any = null;
+  const int1 = intervalMap?.get(i1) ?? {};
+  const p1: any = h(Proportion, { value: t_prop });
+
+  if (i0 !== i1 || b_prop !== 0 || t_prop !== 1) {
+    // We have a single interval with undefined proportions
+    p0 = h(Proportion, { value: b_prop });
+  }
+
+  if (i0 === i1 && (b_prop !== 0 || t_prop !== 1)) {
+    p0 = h("span.joint-proportion", [p0, " ", h("span.sep", "to"), " ", p1]);
+  }
+
+  const clickable = onClickItem != null;
+
+  const handleClick = (event: MouseEvent) => {
+    if (onClickItem) {
+      onClickItem(event, interval0);
+    }
+  };
+
+  return h(ItemList, { className: "interval-proportions" }, [
+    h(IntervalTag, {
+      className: clickable ? "clickable" : "",
+      onClick: clickable ? handleClick : undefined,
+      interval: interval0,
+      prefix: p0,
+    }),
+    h.if(i0 != i1)("span.discourage-break", [
+      h("span.sep", " to "),
+      h(IntervalTag, {
+        className: clickable ? "clickable" : "",
+        onClick: clickable ? handleClick : undefined,
+        interval: {
+          ...int1,
+          id: i1,
+          name: unit.t_int_name,
+        },
+        prefix: p1,
+      }),
+    ]),
+  ]);
+}
+
+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);
+}
+
+export function getAgeRange(_unit) {
+  let b_age = _unit.b_age;
+  let t_age = _unit.t_age;
+  let unit = "Ma";
+
+  if (b_age < 0.8 && t_age < 1.2) {
+    b_age *= 1000;
+    t_age *= 1000;
+    unit = "ka";
+  } else if (b_age > 800 && t_age > 1200) {
+    b_age /= 1000;
+    t_age /= 1000;
+    unit = "Ga";
+  }
+
+  return [b_age, t_age, unit];
+}
+
+export function getAge(value) {
+  /** Get the age value in Ma, ka, or Ga as appropriate */
+  let unit = "Ma";
+  if (value < 0.8) {
+    unit = "ka";
+    value *= 1000;
+    if (value < 5) {
+      unit = "yr";
+      value *= 1000;
+    }
+  } else if (value > 1000) {
+    unit = "Ga";
+    value /= 1000;
+  }
+
+  return [value, unit];
+}

package/src/unit-details/index.ts

@@ -1,3 +1,4 @@
 export * from "./panel";
 export * from "./popover";
 export * from "./modal-panel";
+export * from "./age-range";

package/src/unit-details/panel.module.sass

@@ -82,15 +82,6 @@
   margin: 0
   padding-left: 0
 
-.interval-proportions
-  flex-grow: 1
-  width: 100%
-  text-align: right
-  .discourage-break
-    white-space: nowrap
-  .sep
-    margin: 0 0.3em
-
 .clickable
   cursor: pointer
 

package/src/unit-details/panel.ts

@@ -2,24 +2,22 @@ import hyper from "@macrostrat/hyper";
 import styles from "./panel.module.sass";
 import { JSONView } from "@macrostrat/ui-components";
 import { Button, ButtonGroup } from "@blueprintjs/core";
-import { ReactNode, useCallback, useMemo, useState } from "react";
+import { ReactNode, useMemo, useState } from "react";
 import {
   DataField,
   EnvironmentsList,
-  IntervalShort,
-  IntervalTag,
+  isClickable,
+  ItemInteractionProps,
   ItemList,
   LithologyList,
   LithologyTagFeature,
-  Parenthetical,
-  Value,
   MacrostratInteractionManager,
-  useInteractionProps,
-  ItemInteractionProps,
-  useInteractionManager,
-  MacrostratItemIdentifier,
   MacrostratInteractionProvider,
-  isClickable,
+  MacrostratItemIdentifier,
+  Parenthetical,
+  useInteractionManager,
+  useInteractionProps,
+  Value,
 } from "@macrostrat/data-components";
 import { useColumnUnitsMap } from "../data-provider";
 import {
@@ -30,13 +28,15 @@ import {
 } from "@macrostrat/data-provider";
 import type {
   Environment,
+  Interval,
+  Lithology,
   UnitLong,
   UnitLongFull,
-  Lithology,
-  Interval,
 } from "@macrostrat/api-types";
 import { defaultNameFunction } from "../units/names";
 import classNames from "classnames";
+import { AgeField, Duration, IntervalProportions } from "./age-range";
+import { formatRange, formatSignificance } from "./utils.ts";
 
 const h = hyper.styled(styles);
 
@@ -479,106 +479,6 @@ function Citation({ data, tag = "p" }) {
   ]);
 }
 
-function AgeField({ unit, children }) {
-  const [b_age, t_age, _unit] = getAgeRange(unit);
-
-  return h(
-    DataField,
-    {
-      label: "Age",
-      value: formatRange(b_age, t_age),
-      unit: _unit,
-    },
-    children,
-  );
-}
-
-function getAgeRange(_unit) {
-  let b_age = _unit.b_age;
-  let t_age = _unit.t_age;
-  let unit = "Ma";
-
-  if (b_age < 0.8 && t_age < 1.2) {
-    b_age *= 1000;
-    t_age *= 1000;
-    unit = "ka";
-  } else if (b_age > 800 && t_age > 1200) {
-    b_age /= 1000;
-    t_age /= 1000;
-    unit = "Ga";
-  }
-
-  return [b_age, t_age, unit];
-}
-
-function getAge(value) {
-  /** Get the age value in Ma, ka, or Ga as appropriate */
-  let unit = "Ma";
-  if (value < 0.8) {
-    unit = "ka";
-    value *= 1000;
-    if (value < 5) {
-      unit = "yr";
-      value *= 1000;
-    }
-  } else if (value > 1000) {
-    unit = "Ga";
-    value /= 1000;
-  }
-
-  return [value, unit];
-}
-
-export function AgeLabel({
-  age,
-  maximumFractionDigits = 2,
-  minimumFractionDigits = 0,
-  className,
-}: {
-  age: number;
-  className?: string;
-  maximumFractionDigits?: number;
-  minimumFractionDigits?: number;
-}) {
-  /** Component to display a single age value with unit conversion from
-   * Ma to ka or Ga as appropriate.
-   */
-  const [value, unit] = getAge(age);
-
-  const _value = value.toLocaleString("en-US", {
-    maximumFractionDigits,
-    minimumFractionDigits,
-  });
-
-  return h(Value, { value: _value, unit, className });
-}
-
-export function Duration({
-  value,
-  maximumFractionDigits = 2,
-  minimumFractionDigits = 0,
-}) {
-  let unit = "Myr";
-  if (value < 0.8) {
-    unit = "kyr";
-    value *= 1000;
-    if (value < 5) {
-      unit = "yr";
-      value *= 1000;
-    }
-  } else if (value > 1000) {
-    unit = "Gyr";
-    value /= 1000;
-  }
-
-  let _value = value.toLocaleString("en-US", {
-    maximumFractionDigits,
-    minimumFractionDigits,
-  });
-
-  return h(Value, { value: _value, unit });
-}
-
 function enhanceEnvironments(
   environments: Partial<Environment>[] | null,
   envMap: Map<number, Environment>,
@@ -711,117 +611,3 @@ function UnitIdentifier({
     ...interactionProps,
   });
 }
-
-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;
-
-  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 interval0: IntervalShort = {
-    ...int0,
-    id: i0,
-    name: unit.b_int_name,
-  };
-
-  let p0: ReactNode = null;
-  const int1 = intervalMap?.get(i1) ?? {};
-  const p1: ReactNode = h(Proportion, { value: t_prop });
-
-  if (i0 !== i1 || b_prop !== 0 || t_prop !== 1) {
-    // We have a single interval with undefined proportions
-    p0 = h(Proportion, { value: b_prop });
-  }
-
-  if (i0 === i1 && (b_prop !== 0 || t_prop !== 1)) {
-    p0 = h("span.joint-proportion", [p0, h("span.sep", "to"), p1]);
-  }
-
-  const clickable = onClickItem != null;
-
-  const handleClick = (event: MouseEvent) => {
-    if (onClickItem) {
-      onClickItem(event, interval0);
-    }
-  };
-
-  return h("div.interval-proportions", [
-    h(IntervalTag, {
-      className: clickable ? "clickable" : "",
-      onClick: clickable ? handleClick : undefined,
-      interval: interval0,
-      prefix: p0,
-    }),
-    h.if(i0 != i1)("span.discourage-break", [
-      h("span.sep", "to"),
-      h(IntervalTag, {
-        className: clickable ? "clickable" : "",
-        onClick: clickable ? handleClick : undefined,
-        interval: {
-          ...int1,
-          id: i1,
-          name: unit.t_int_name,
-        },
-        prefix: p1,
-      }),
-    ]),
-  ]);
-}
-
-const formatProportion = (d) => {
-  if (d == null) return null;
-  return d.toFixed(1);
-};
-
-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 formatRange(min, max, precision = null) {
-  if (min == null || max == null) return null;
-  if (min === max) {
-    return min.toFixed(precision);
-  }
-
-  return `${formatSignificance(min, precision)}–${formatSignificance(
-    max,
-    precision,
-  )}`;
-}
-
-function formatSignificance(value, precision = null) {
-  // Format to preserve a reasonable number of significant figures
-  // this could be done with an easier algorithm, probably:
-
-  if (precision == null) {
-    return value.toLocaleString();
-  }
-  if (precision >= 0) {
-    return value.toFixed(precision);
-  }
-  if (precision < 0) {
-    return (
-      (value / Math.pow(10, -precision)).toFixed(0) + "0".repeat(-precision)
-    );
-  }
-}

package/src/unit-details/utils.ts

@@ -0,0 +1,33 @@
+export const formatProportion = (d) => {
+  if (d == null) return null;
+  return d.toFixed(1);
+};
+
+export function formatRange(min, max, precision = null) {
+  if (min == null || max == null) return null;
+  if (min === max) {
+    return min.toFixed(precision);
+  }
+
+  return `${formatSignificance(min, precision)}–${formatSignificance(
+    max,
+    precision,
+  )}`;
+}
+
+export function formatSignificance(value, precision = null) {
+  // Format to preserve a reasonable number of significant figures
+  // this could be done with an easier algorithm, probably:
+
+  if (precision == null) {
+    return value.toLocaleString();
+  }
+  if (precision >= 0) {
+    return value.toFixed(precision);
+  }
+  if (precision < 0) {
+    return (
+      (value / Math.pow(10, -precision)).toFixed(0) + "0".repeat(-precision)
+    );
+  }
+}