@macrostrat/column-views 3.3.4 → 3.4.0

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

@@ -1,4 +1,4 @@
-import { IntervalTagProps } from '../../../data-components/src/index.ts';
+import { IntervalTagProps } from '@macrostrat/data-components';
 export declare function AgeField({ unit, children, ...rest }: {
     [x: string]: any;
     unit: any;
@@ -60,6 +60,7 @@ export interface IntervalProportionsProps extends Omit<IntervalTagProps, "interv
     unit: UnitIntervalConstraints;
     showProportions?: boolean;
     calculateProportionsFromAges?: boolean;
+    onClickItem?: any;
 }
 export declare function IntervalProportions({ unit, className, showProportions, calculateProportionsFromAges, ...rest }: IntervalProportionsProps): import('react').FunctionComponentElement<{
     children?: import('react').ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"age-range.js","sources":["../../src/unit-details/age-range.ts"],"sourcesContent":["import {\n  DataField,\n  IntervalShort,\n  IntervalTag,\n  type IntervalTagProps,\n  ItemList,\n  Value,\n} from \"@macrostrat/data-components\";\nimport { useMacrostratDefs } from \"@macrostrat/data-provider\";\nimport h from \"./age-range.module.sass\";\nimport { formatProportion, formatRange } from \"./utils\";\nimport classNames from \"classnames\";\nimport { useMemo } from \"react\";\n\nexport function AgeField({ unit, children, ...rest }) {\n  const [_b_age, _t_age, _unit] = getAgeRange(unit);\n\n  return h(\n    DataField,\n    {\n      label: \"Age\",\n      value: formatRange(_b_age, _t_age),\n      unit: _unit,\n      ...rest,\n    },\n    children,\n  );\n}\n\nexport function AgeRange({\n  data,\n  className,\n}: {\n  data: {\n    t_age: number;\n    b_age: number;\n  };\n  className?: string;\n}) {\n  const [_b_age, _t_age, _unit] = getAgeRange(data);\n\n  return h(Value, {\n    value: formatRange(_b_age, _t_age),\n    unit: _unit,\n    className,\n  });\n}\n\nexport function AgeLabel({\n  age,\n  maximumFractionDigits = 2,\n  minimumFractionDigits = 0,\n  className,\n}: {\n  age: number;\n  className?: string;\n  maximumFractionDigits?: number;\n  minimumFractionDigits?: number;\n}) {\n  /** Component to display a single age value with unit conversion from\n   * Ma to ka or Ga as appropriate.\n   */\n  const [value, unit] = getAge(age);\n\n  const _value = value.toLocaleString(\"en-US\", {\n    maximumFractionDigits,\n    minimumFractionDigits,\n  });\n\n  return h(Value, { value: _value, unit, className });\n}\n\nexport function Duration({\n  value,\n  maximumFractionDigits = 2,\n  minimumFractionDigits = 0,\n}) {\n  let unit = \"Myr\";\n  if (value < 0.8) {\n    unit = \"kyr\";\n    value *= 1000;\n    if (value < 5) {\n      unit = \"yr\";\n      value *= 1000;\n    }\n  } else if (value > 1000) {\n    unit = \"Gyr\";\n    value /= 1000;\n  }\n\n  let _value = value.toLocaleString(\"en-US\", {\n    maximumFractionDigits,\n    minimumFractionDigits,\n  });\n\n  return h(Value, { value: _value, unit });\n}\n\ninterface UnitIntervalConstraints {\n  b_int_id?: number;\n  t_int_id?: number;\n  b_prop?: number;\n  t_prop?: number;\n  b_int_name?: string;\n  t_int_name?: string;\n  b_age?: number;\n  t_age?: number;\n}\n\nexport interface IntervalProportionsProps extends Omit<\n  IntervalTagProps,\n  \"interval\"\n> {\n  unit: UnitIntervalConstraints;\n  showProportions?: boolean;\n  calculateProportionsFromAges?: boolean;\n}\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  return (interval.b_age - age) / (interval.b_age - interval.t_age);\n}\n\nfunction Proportion({ value }) {\n  let content = null;\n  if (value == 0) {\n    content = \"base\";\n  } else if (value == 1) {\n    content = \"top\";\n  } else {\n    content = formatProportion(value * 100) + \"%\";\n  }\n\n  return h(\"span.proportion\", content);\n}\n\nexport function getAgeRange(_unit) {\n  let b_age = _unit.b_age;\n  let t_age = _unit.t_age;\n  let unit = \"Ma\";\n\n  if (b_age < 0.8 && t_age < 1.2) {\n    b_age *= 1000;\n    t_age *= 1000;\n    unit = \"ka\";\n  } else if (b_age > 800 && t_age > 1200) {\n    b_age /= 1000;\n    t_age /= 1000;\n    unit = \"Ga\";\n  }\n\n  return [b_age, t_age, unit];\n}\n\nexport function getAge(value) {\n  /** Get the age value in Ma, ka, or Ga as appropriate */\n  let unit = \"Ma\";\n  if (value < 0.8) {\n    unit = \"ka\";\n    value *= 1000;\n    if (value < 5) {\n      unit = \"yr\";\n      value *= 1000;\n    }\n  } else if (value > 1000) {\n    unit = \"Ga\";\n    value /= 1000;\n  }\n\n  return [value, unit];\n}\n"],"names":["int0","int1"],"mappings":"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"}
+{"version":3,"file":"age-range.js","sources":["../../src/unit-details/age-range.ts"],"sourcesContent":["import {\n  DataField,\n  IntervalShort,\n  IntervalTag,\n  type IntervalTagProps,\n  ItemList,\n  Value,\n} from \"@macrostrat/data-components\";\nimport { useMacrostratDefs } from \"@macrostrat/data-provider\";\nimport h from \"./age-range.module.sass\";\nimport { formatProportion, formatRange } from \"./utils\";\nimport classNames from \"classnames\";\nimport { 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  /** 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  return (interval.b_age - age) / (interval.b_age - interval.t_age);\n}\n\nfunction Proportion({ value }) {\n  let content = null;\n  if (value == 0) {\n    content = \"base\";\n  } else if (value == 1) {\n    content = \"top\";\n  } else {\n    content = formatProportion(value * 100) + \"%\";\n  }\n\n  return h(\"span.proportion\", content);\n}\n\nexport function getAgeRange(_unit) {\n  let b_age = _unit.b_age;\n  let t_age = _unit.t_age;\n  let unit = \"Ma\";\n\n  if (b_age < 0.8 && t_age < 1.2) {\n    b_age *= 1000;\n    t_age *= 1000;\n    unit = \"ka\";\n  } else if (b_age > 800 && t_age > 1200) {\n    b_age /= 1000;\n    t_age /= 1000;\n    unit = \"Ga\";\n  }\n\n  return [b_age, t_age, unit];\n}\n\nexport function getAge(value) {\n  /** Get the age value in Ma, ka, or Ga as appropriate */\n  let unit = \"Ma\";\n  if (value < 0.8) {\n    unit = \"ka\";\n    value *= 1000;\n    if (value < 5) {\n      unit = \"yr\";\n      value *= 1000;\n    }\n  } else if (value > 1000) {\n    unit = \"Ga\";\n    value /= 1000;\n  }\n\n  return [value, unit];\n}\n"],"names":["int0","int1"],"mappings":"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"}

package/dist/unit-details/identifiers.cjs

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const dataComponents = require("@macrostrat/data-components");
+const panel_module = require("./panel.module.sass.cjs");
+const classNames = require("classnames");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const classNames__default = /* @__PURE__ */ _interopDefault(classNames);
+function ClickableText({
+  className,
+  ...rest
+}) {
+  const clickable = dataComponents.isClickable(rest);
+  const tag = clickable ? "a" : "span";
+  return panel_module.default(tag, { className: classNames__default.default(className, { clickable }), ...rest });
+}
+function Identifier({
+  id,
+  className,
+  ...rest
+}) {
+  return panel_module.default(
+    ClickableText,
+    {
+      className: classNames__default.default("identifier", className),
+      ...rest
+    },
+    id
+  );
+}
+function UnitIdentifier({
+  unitID,
+  colID,
+  name,
+  ...interactionProps
+}) {
+  if (name != null) {
+    return panel_module.default(
+      ClickableText,
+      {
+        className: "unit-name",
+        ...interactionProps
+      },
+      name
+    );
+  }
+  return panel_module.default(Identifier, {
+    className: "unit-id",
+    key: unitID,
+    id: unitID,
+    ...interactionProps
+  });
+}
+exports.ClickableText = ClickableText;
+exports.Identifier = Identifier;
+exports.UnitIdentifier = UnitIdentifier;
+//# sourceMappingURL=identifiers.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"identifiers.cjs","sources":["../../src/unit-details/identifiers.ts"],"sourcesContent":["import { isClickable, ItemInteractionProps } from \"@macrostrat/data-components\";\nimport h from \"./panel.module.sass\";\nimport { ReactNode } from \"react\";\nimport classNames from \"classnames\";\n\nexport function ClickableText({\n  className,\n  ...rest\n}: {\n  className?: string;\n  children: ReactNode;\n} & ItemInteractionProps) {\n  /** An optionally clickable text element */\n  const clickable = isClickable(rest);\n  const tag = clickable ? \"a\" : \"span\";\n  return h(tag, { className: classNames(className, { clickable }), ...rest });\n}\n\nexport function Identifier({\n  id,\n  className,\n  ...rest\n}: {\n  id: number | string;\n  className?: string;\n} & ItemInteractionProps) {\n  /** An item that displays a numeric identifier, optionally clickable */\n  return h(\n    ClickableText,\n    {\n      className: classNames(\"identifier\", className),\n      ...rest,\n    },\n    id,\n  );\n}\n\nexport type UnitInfo = {\n  unitID: number;\n  colID?: number;\n  name?: string;\n};\n\nexport function UnitIdentifier({\n  unitID,\n  colID,\n  name,\n  ...interactionProps\n}: UnitInfo & ItemInteractionProps) {\n  if (name != null) {\n    return h(\n      ClickableText,\n      {\n        className: \"unit-name\",\n        ...interactionProps,\n      },\n      name,\n    );\n  }\n\n  return h(Identifier, {\n    className: \"unit-id\",\n    key: unitID,\n    id: unitID,\n    ...interactionProps,\n  });\n}\n"],"names":["isClickable","h","classNames"],"mappings":";;;;;;;AAKO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,GAAG;AACL,GAG0B;AAExB,QAAM,YAAYA,eAAAA,YAAY,IAAI;AAClC,QAAM,MAAM,YAAY,MAAM;AAC9B,SAAOC,qBAAE,KAAK,EAAE,WAAWC,oBAAAA,QAAW,WAAW,EAAE,UAAA,CAAW,GAAG,GAAG,MAAM;AAC5E;AAEO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAG0B;AAExB,SAAOD,aAAAA;AAAAA,IACL;AAAA,IACA;AAAA,MACE,WAAWC,oBAAAA,QAAW,cAAc,SAAS;AAAA,MAC7C,GAAG;AAAA,IAAA;AAAA,IAEL;AAAA,EAAA;AAEJ;AAQO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoC;AAClC,MAAI,QAAQ,MAAM;AAChB,WAAOD,aAAAA;AAAAA,MACL;AAAA,MACA;AAAA,QACE,WAAW;AAAA,QACX,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,IAAA;AAAA,EAEJ;AAEA,SAAOA,aAAAA,QAAE,YAAY;AAAA,IACnB,WAAW;AAAA,IACX,KAAK;AAAA,IACL,IAAI;AAAA,IACJ,GAAG;AAAA,EAAA,CACJ;AACH;;;;"}

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

@@ -0,0 +1,31 @@
+import { ItemInteractionProps } from '@macrostrat/data-components';
+import { ReactNode } from 'react';
+export declare function ClickableText({ className, ...rest }: {
+    className?: string;
+    children: ReactNode;
+} & ItemInteractionProps): import('react').ReactElement<{
+    children: ReactNode;
+    href?: string | null;
+    target?: string;
+    onClick?: (event: MouseEvent) => void;
+    className: string;
+}, string | import('react').JSXElementConstructor<any>>;
+export declare function Identifier({ id, className, ...rest }: {
+    id: number | string;
+    className?: string;
+} & ItemInteractionProps): import('react').FunctionComponentElement<{
+    className?: string;
+    children: ReactNode;
+} & ItemInteractionProps>;
+export type UnitInfo = {
+    unitID: number;
+    colID?: number;
+    name?: string;
+};
+export declare function UnitIdentifier({ unitID, colID, name, ...interactionProps }: UnitInfo & ItemInteractionProps): import('react').FunctionComponentElement<{
+    className?: string;
+    children: ReactNode;
+} & ItemInteractionProps> | import('react').FunctionComponentElement<{
+    id: number | string;
+    className?: string;
+} & ItemInteractionProps>;

package/dist/unit-details/identifiers.js

@@ -0,0 +1,54 @@
+import { isClickable } from "@macrostrat/data-components";
+import h from "./panel.module.sass.js";
+import classNames from "classnames";
+function ClickableText({
+  className,
+  ...rest
+}) {
+  const clickable = isClickable(rest);
+  const tag = clickable ? "a" : "span";
+  return h(tag, { className: classNames(className, { clickable }), ...rest });
+}
+function Identifier({
+  id,
+  className,
+  ...rest
+}) {
+  return h(
+    ClickableText,
+    {
+      className: classNames("identifier", className),
+      ...rest
+    },
+    id
+  );
+}
+function UnitIdentifier({
+  unitID,
+  colID,
+  name,
+  ...interactionProps
+}) {
+  if (name != null) {
+    return h(
+      ClickableText,
+      {
+        className: "unit-name",
+        ...interactionProps
+      },
+      name
+    );
+  }
+  return h(Identifier, {
+    className: "unit-id",
+    key: unitID,
+    id: unitID,
+    ...interactionProps
+  });
+}
+export {
+  ClickableText,
+  Identifier,
+  UnitIdentifier
+};
+//# sourceMappingURL=identifiers.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"identifiers.js","sources":["../../src/unit-details/identifiers.ts"],"sourcesContent":["import { isClickable, ItemInteractionProps } from \"@macrostrat/data-components\";\nimport h from \"./panel.module.sass\";\nimport { ReactNode } from \"react\";\nimport classNames from \"classnames\";\n\nexport function ClickableText({\n  className,\n  ...rest\n}: {\n  className?: string;\n  children: ReactNode;\n} & ItemInteractionProps) {\n  /** An optionally clickable text element */\n  const clickable = isClickable(rest);\n  const tag = clickable ? \"a\" : \"span\";\n  return h(tag, { className: classNames(className, { clickable }), ...rest });\n}\n\nexport function Identifier({\n  id,\n  className,\n  ...rest\n}: {\n  id: number | string;\n  className?: string;\n} & ItemInteractionProps) {\n  /** An item that displays a numeric identifier, optionally clickable */\n  return h(\n    ClickableText,\n    {\n      className: classNames(\"identifier\", className),\n      ...rest,\n    },\n    id,\n  );\n}\n\nexport type UnitInfo = {\n  unitID: number;\n  colID?: number;\n  name?: string;\n};\n\nexport function UnitIdentifier({\n  unitID,\n  colID,\n  name,\n  ...interactionProps\n}: UnitInfo & ItemInteractionProps) {\n  if (name != null) {\n    return h(\n      ClickableText,\n      {\n        className: \"unit-name\",\n        ...interactionProps,\n      },\n      name,\n    );\n  }\n\n  return h(Identifier, {\n    className: \"unit-id\",\n    key: unitID,\n    id: unitID,\n    ...interactionProps,\n  });\n}\n"],"names":[],"mappings":";;;AAKO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,GAAG;AACL,GAG0B;AAExB,QAAM,YAAY,YAAY,IAAI;AAClC,QAAM,MAAM,YAAY,MAAM;AAC9B,SAAO,EAAE,KAAK,EAAE,WAAW,WAAW,WAAW,EAAE,UAAA,CAAW,GAAG,GAAG,MAAM;AAC5E;AAEO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAG0B;AAExB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,MACE,WAAW,WAAW,cAAc,SAAS;AAAA,MAC7C,GAAG;AAAA,IAAA;AAAA,IAEL;AAAA,EAAA;AAEJ;AAQO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoC;AAClC,MAAI,QAAQ,MAAM;AAChB,WAAO;AAAA,MACL;AAAA,MACA;AAAA,QACE,WAAW;AAAA,QACX,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,IAAA;AAAA,EAEJ;AAEA,SAAO,EAAE,YAAY;AAAA,IACnB,WAAW;AAAA,IACX,KAAK;AAAA,IACL,IAAI;AAAA,IACJ,GAAG;AAAA,EAAA,CACJ;AACH;"}

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

@@ -2,3 +2,5 @@ export * from './panel';
 export * from './popover';
 export * from './modal-panel';
 export * from './age-range';
+export * from './strat-names';
+export * from './identifiers';

package/dist/unit-details/panel.cjs

@@ -1,7 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const h$1 = require("@macrostrat/hyper");
-const panel_module = require("./panel.module.sass.cjs");
 const uiComponents = require("@macrostrat/ui-components");
 const core = require("@blueprintjs/core");
 const React = require("react");
@@ -11,11 +9,12 @@ const names = require("../units/names.cjs");
 const classNames = require("classnames");
 const ageRange = require("./age-range.cjs");
 const utils = require("./utils.cjs");
+const panel_module = require("./panel.module.sass.cjs");
+const stratNames = require("./strat-names.cjs");
+const identifiers = require("./identifiers.cjs");
 const store = require("../data-provider/store.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const h__default = /* @__PURE__ */ _interopDefault(h$1);
 const classNames__default = /* @__PURE__ */ _interopDefault(classNames);
-const h = h__default.default.styled(panel_module.default);
 function UnitDetailsPanel({
   unit,
   onClose,
@@ -31,14 +30,15 @@ function UnitDetailsPanel({
   actions,
   hiddenActions = null,
   onSelectUnit,
-  onClickItem
+  onClickItem,
+  showJSON
 }) {
-  const [showJSON, setShowJSON] = React.useState(false);
+  const [_showJSON, setShowJSON] = React.useState(false);
   let content = null;
-  if (showJSON) {
-    content = h(uiComponents.JSONView, { data: unit, showRoot: false });
+  if (showJSON ?? _showJSON) {
+    content = panel_module.default(uiComponents.JSONView, { data: unit, showRoot: false });
   } else {
-    content = h(UnitDetailsContent, {
+    content = panel_module.default(UnitDetailsContent, {
       unit,
       features,
       lithologyFeatures,
@@ -50,8 +50,8 @@ function UnitDetailsPanel({
     "json-toggle"
     /* JSONToggle */
   )) {
-    hiddenActions = h([
-      h(core.Button, {
+    hiddenActions = panel_module.default([
+      panel_module.default(core.Button, {
         icon: "code",
         small: true,
         minimal: true,
@@ -65,22 +65,28 @@ function UnitDetailsPanel({
       hiddenActions
     ]);
   }
-  const main = h("div.unit-details-panel", { className }, [
-    h(LegendPanelHeader, {
+  const main = panel_module.default("div.unit-details-panel", { className }, [
+    panel_module.default(LegendPanelHeader, {
       onClose,
       title,
       id: unit.unit_id,
       actions,
       hiddenActions
     }),
-    h("div.unit-details-content-holder", content)
+    panel_module.default("div.unit-details-content-holder", content)
   ]);
   const clickHandlerForItem = React.useMemo(() => {
     if (onSelectUnit == null && onClickItem == null) return null;
     return (item) => {
       if ("unit_id" in item && !("col_id" in item)) {
         return (event) => {
-          onSelectUnit(item.unit_id);
+          if (onSelectUnit != null) {
+            onSelectUnit(item.unit_id);
+          } else if (onClickItem != null) {
+            console.warn(
+              "Unit selection: onClickItem is defined but onSelectUnit is not; ignoring click"
+            );
+          }
           event.preventDefault();
         };
       }
@@ -88,7 +94,7 @@ function UnitDetailsPanel({
     };
   }, [onSelectUnit, onClickItem]);
   if (clickHandlerForItem != null) {
-    return h(
+    return panel_module.default(
       dataComponents.MacrostratInteractionProvider,
       {
         clickHandlerForItem,
@@ -106,23 +112,23 @@ function LegendPanelHeader({
   actions = null,
   hiddenActions
 }) {
-  return h("header.legend-panel-header", [
-    h("div.title-container", [
-      h.if(title != null)("h3", title),
-      h.if(hiddenActions != null)(
+  return panel_module.default("header.legend-panel-header", [
+    panel_module.default("div.title-container", [
+      panel_module.default.if(title != null)("h3", title),
+      panel_module.default.if(hiddenActions != null)(
         "span.hidden-actions-container",
-        h("div.hidden-actions", hiddenActions)
+        panel_module.default("div.hidden-actions", hiddenActions)
       )
     ]),
-    h("div.spacer"),
-    h.if(id != null)("code.unit-id", id),
-    h.if(actions != null)(core.ButtonGroup, { minimal: true }, actions),
-    h.if(onClose != null)(core.Button, {
+    panel_module.default("div.spacer"),
+    panel_module.default.if(id != null)("code.unit-id", id),
+    panel_module.default.if(actions != null)(core.ButtonGroup, { minimal: true }, actions),
+    panel_module.default.if(onClose != null)(core.Button, {
       icon: "cross",
       minimal: true,
       small: true,
       onClick() {
-        onClose();
+        onClose?.();
       }
     })
   ]);
@@ -163,7 +169,7 @@ function UnitDetailsContent({
     if (outcrop == "both") {
       outcrop = "surface and subsurface";
     }
-    outcropField = h(dataComponents.DataField, {
+    outcropField = panel_module.default(dataComponents.DataField, {
       label: "Outcrop",
       value: outcrop
     });
@@ -177,17 +183,17 @@ function UnitDetailsContent({
   unit.min_thick != 0) {
     const label = unit.t_pos < unit.b_pos ? "Depth" : "Height";
     const u1 = "m";
-    thicknessOrHeightRange = h(dataComponents.DataField, {
+    thicknessOrHeightRange = panel_module.default(dataComponents.DataField, {
       unit: u1,
       label,
       value: utils.formatRange(unit.b_pos, unit.t_pos),
-      children: h(
+      children: panel_module.default(
         dataComponents.Parenthetical,
-        h(dataComponents.Value, { value: thickness, unit: thicknessUnit })
+        panel_module.default(dataComponents.Value, { value: thickness, unit: thicknessUnit })
       )
     });
   }
-  thicknessOrHeightRange ??= h(dataComponents.DataField, {
+  thicknessOrHeightRange ??= panel_module.default(dataComponents.DataField, {
     label: "Thickness",
     value: thickness,
     unit: thicknessUnit
@@ -198,60 +204,60 @@ function UnitDetailsContent({
     /* Color */
   )) {
     const unit1 = unit;
-    colorSwatch = h("div.color-swatch", {
+    colorSwatch = panel_module.default("div.color-swatch", {
       style: { backgroundColor: unit1.color }
     });
   }
-  return h("div.unit-details-content", [
-    h.if(features.has(
+  return panel_module.default("div.unit-details-content", [
+    panel_module.default.if(features.has(
       "column-name"
       /* ColumnName */
     ))(ColumnNameField, {
       col_id: unit.col_id
     }),
     thicknessOrHeightRange,
-    h.if(lithologies != null)(dataComponents.LithologyList, {
+    panel_module.default.if(lithologies != null)(dataComponents.LithologyList, {
       label: "Lithology",
-      lithologies,
+      lithologies: lithologies ?? [],
       features: lithologyFeatures
     }),
-    h(ageRange.AgeField, { unit }, [
-      h(dataComponents.Parenthetical, h(ageRange.Duration, { value: unit.b_age - unit.t_age })),
-      h(ageRange.IntervalProportions, {
+    panel_module.default(ageRange.AgeField, { unit }, [
+      panel_module.default(dataComponents.Parenthetical, panel_module.default(ageRange.Duration, { value: unit.b_age - unit.t_age })),
+      panel_module.default(ageRange.IntervalProportions, {
         unit,
         onClickItem
       })
     ]),
-    h.if(environments != null)(dataComponents.EnvironmentsList, {
+    panel_module.default.if(environments != null)(dataComponents.EnvironmentsList, {
       environments
     }),
-    h.if(unit.strat_name_id != null)(StratNameField, {
+    panel_module.default.if(unit.strat_name_id != null)(stratNames.StratNameField, {
       strat_name_id: unit.strat_name_id
     }),
     outcropField,
-    h.if(features.has(
+    panel_module.default.if(features.has(
       "adjacent-units"
       /* AdjacentUnits */
     ))([
-      h.if(unit.units_above != null)(
+      panel_module.default.if(unit.units_above != null)(
         dataComponents.DataField,
         { label: "Above" },
-        h(UnitIDList, {
+        panel_module.default(UnitIDList, {
           units: unit.units_above,
           showNames: true
         })
       ),
-      h.if(unit.units_below != null)(
+      panel_module.default.if(unit.units_below != null)(
         dataComponents.DataField,
         { label: "Below" },
-        h(UnitIDList, {
+        panel_module.default(UnitIDList, {
           units: unit.units_below,
           showNames: true
         })
       )
     ]),
     colorSwatch,
-    h(ReferencesField, { refs: unit.refs, inline: true })
+    panel_module.default(ReferencesField, { refs: unit.refs, inline: true })
   ]);
 }
 function ColumnNameField({
@@ -259,15 +265,15 @@ function ColumnNameField({
   showIdentifier = false
 }) {
   const colData = dataProvider.useMacrostratColumnInfo(col_id);
-  let inner = h(Identifier, { id: col_id });
+  let inner = panel_module.default(identifiers.Identifier, { id: col_id });
   const name = colData?.col_name;
   if (name != null) {
-    inner = h("span.value", [
-      h("span.col-name", name),
-      h.if(showIdentifier)([" ", h(dataComponents.Parenthetical, inner)])
+    inner = panel_module.default("span.value", [
+      panel_module.default("span.col-name", name),
+      panel_module.default.if(showIdentifier)([" ", panel_module.default(dataComponents.Parenthetical, inner)])
     ]);
   }
-  return h(
+  return panel_module.default(
     dataComponents.DataField,
     {
       label: "Column"
@@ -279,47 +285,14 @@ function ReferencesField({ refs, className = null, ...rest }) {
   if (refs == null || refs.length === 0) {
     return null;
   }
-  return h(
+  return panel_module.default(
     dataComponents.DataField,
     {
       label: "References",
       className: classNames__default.default("refs-field", className),
       ...rest
     },
-    h(BibInfo, { refs })
-  );
-}
-function useStratNameData(strat_name_id) {
-  const stratNames = dataProvider.useStratNames([strat_name_id]);
-  return stratNames?.[0];
-}
-function StratNameField(props) {
-  const { strat_name_id, className, ...rest } = props;
-  const data = useStratNameData(strat_name_id);
-  const baseInteractionProps = dataComponents.useInteractionProps({ strat_name_id });
-  const coreProps = {
-    ...baseInteractionProps,
-    ...rest
-  };
-  let inner = h(Identifier, { id: strat_name_id });
-  const name = data?.strat_name_long;
-  if (name != null) {
-    inner = h("span.strat-name", name);
-  }
-  const clickable = dataComponents.isClickable(coreProps);
-  return h(
-    dataComponents.DataField,
-    {
-      label: "Stratigraphic name"
-    },
-    h(
-      clickable ? "a" : "span",
-      {
-        className: classNames__default.default({ clickable }, className),
-        ...coreProps
-      },
-      inner
-    )
+    panel_module.default(BibInfo, { refs })
   );
 }
 function getThickness(unit) {
@@ -345,7 +318,7 @@ function getThickness(unit) {
 }
 function ThicknessField({ unit, label = "Thickness" }) {
   const [value, thicknessUnit] = getThickness(unit);
-  return h(dataComponents.DataField, {
+  return panel_module.default(dataComponents.DataField, {
     label,
     value,
     unit: thicknessUnit
@@ -357,26 +330,26 @@ function BibInfo({ refs }) {
     return null;
   }
   if (refData.length == 1) {
-    return h(Citation, {
+    return panel_module.default(Citation, {
       data: refData[0],
       tag: "span",
       key: refData[0].ref_id
     });
   }
-  return h(
+  return panel_module.default(
     "ul.refs",
     refData.map(
-      (data, i) => h(Citation, { data, tag: "li", key: data.ref_id })
+      (data, i) => panel_module.default(Citation, { data, tag: "li", key: data.ref_id })
     )
   );
 }
 function Citation({ data, tag = "p" }) {
-  return h(tag, { className: "citation" }, [
-    h("span.authors", data.author),
+  return panel_module.default(tag, { className: "citation" }, [
+    panel_module.default("span.authors", data.author),
     ", ",
-    h("span.year", data.pub_year),
+    panel_module.default("span.year", data.pub_year),
     ", ",
-    h("span.title", data.ref)
+    panel_module.default("span.title", data.ref)
   ]);
 }
 function enhanceEnvironments(environments, envMap) {
@@ -397,28 +370,6 @@ function enhanceLithologies(lithologies, lithMap) {
     };
   });
 }
-function ClickableText({
-  className,
-  ...rest
-}) {
-  const clickable = dataComponents.isClickable(rest);
-  const tag = clickable ? "a" : "span";
-  return h(tag, { className: classNames__default.default(className, { clickable }), ...rest });
-}
-function Identifier({
-  id,
-  className,
-  ...rest
-}) {
-  return h(
-    ClickableText,
-    {
-      className: classNames__default.default("identifier", className),
-      ...rest
-    },
-    id
-  );
-}
 function UnitIDList({ units, showNames = false }) {
   const unitsMap = store.useColumnUnitsMap();
   const interactionManager = dataComponents.useInteractionManager();
@@ -427,7 +378,7 @@ function UnitIDList({ units, showNames = false }) {
     if (showNames) {
       return u1.map((unitID) => {
         const unitData = unitsMap?.get(unitID);
-        let name = void 0;
+        let name = null;
         if (unitData != null) {
           name = names.defaultNameFunction(unitData);
         }
@@ -442,15 +393,15 @@ function UnitIDList({ units, showNames = false }) {
     }
   }, [units, unitsMap]);
   if (extUnits.length === 0) {
-    return h("span.no-units", "None");
+    return panel_module.default("span.no-units", "None");
   }
-  return h(
+  return panel_module.default(
     dataComponents.ItemList,
     { className: "units-list" },
     extUnits.map((info) => {
-      return h(
+      return panel_module.default(
         "span.item",
-        h(UnitIdentifier, {
+        panel_module.default(identifiers.UnitIdentifier, {
           ...info,
           ...interactionManager?.interactionPropsForItem({
             unit_id: info.unitID
@@ -460,31 +411,6 @@ function UnitIDList({ units, showNames = false }) {
     })
   );
 }
-function UnitIdentifier({
-  unitID,
-  colID,
-  name,
-  ...interactionProps
-}) {
-  if (name != null) {
-    return h(
-      ClickableText,
-      {
-        className: "unit-name",
-        ...interactionProps
-      },
-      name
-    );
-  }
-  return h(Identifier, {
-    className: "unit-id",
-    key: unitID,
-    id: unitID,
-    ...interactionProps
-  });
-}
-exports.ClickableText = ClickableText;
-exports.Identifier = Identifier;
 exports.LegendPanelHeader = LegendPanelHeader;
 exports.ReferencesField = ReferencesField;
 exports.ThicknessField = ThicknessField;