@macrostrat/column-views 3.3.4 → 3.4.0

package/dist/unit-details/strat-names.js

@@ -0,0 +1,42 @@
+import { useInteractionProps, isClickable, DataField } from "@macrostrat/data-components";
+import h from "./panel.module.sass.js";
+import classNames from "classnames";
+import { useStratNames } from "@macrostrat/data-provider";
+import { Identifier } from "./identifiers.js";
+function useStratNameData(strat_name_id) {
+  const stratNames = 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 = 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 = isClickable(coreProps);
+  return h(
+    DataField,
+    {
+      label: "Stratigraphic name"
+    },
+    h(
+      clickable ? "a" : "span",
+      {
+        className: classNames({ clickable }, className),
+        ...coreProps
+      },
+      inner
+    )
+  );
+}
+export {
+  StratNameField
+};
+//# sourceMappingURL=strat-names.js.map

package/dist/unit-details/strat-names.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"strat-names.js","sources":["../../src/unit-details/strat-names.ts"],"sourcesContent":["import {\n  DataField,\n  isClickable,\n  ItemInteractionProps,\n  useInteractionProps,\n} from \"@macrostrat/data-components\";\nimport h from \"./panel.module.sass\";\nimport classNames from \"classnames\";\nimport { useStratNames } from \"@macrostrat/data-provider\";\nimport { Identifier } from \"./identifiers.ts\";\n\nfunction useStratNameData(strat_name_id: number) {\n  const stratNames = useStratNames([strat_name_id]);\n  return stratNames?.[0];\n}\n\nexport function StratNameField(\n  props: {\n    strat_name_id: number;\n    className?: string;\n  } & ItemInteractionProps,\n) {\n  /** Handling for stratigraphic name field */\n  const { strat_name_id, className, ...rest } = props;\n\n  const data = useStratNameData(strat_name_id);\n\n  const baseInteractionProps = useInteractionProps({ strat_name_id });\n\n  const coreProps = {\n    ...baseInteractionProps,\n    ...rest,\n  };\n\n  let inner: any = h(Identifier, { id: strat_name_id });\n  const name = data?.strat_name_long;\n  if (name != null) {\n    inner = h(\"span.strat-name\", name);\n  }\n\n  const clickable = isClickable(coreProps);\n\n  return h(\n    DataField,\n    {\n      label: \"Stratigraphic name\",\n    },\n    h(\n      clickable ? \"a\" : \"span\",\n      {\n        className: classNames({ clickable }, className),\n        ...coreProps,\n      },\n      inner,\n    ),\n  );\n}\n"],"names":[],"mappings":";;;;;AAWA,SAAS,iBAAiB,eAAuB;AAC/C,QAAM,aAAa,cAAc,CAAC,aAAa,CAAC;AAChD,SAAO,aAAa,CAAC;AACvB;AAEO,SAAS,eACd,OAIA;AAEA,QAAM,EAAE,eAAe,WAAW,GAAG,SAAS;AAE9C,QAAM,OAAO,iBAAiB,aAAa;AAE3C,QAAM,uBAAuB,oBAAoB,EAAE,eAAe;AAElE,QAAM,YAAY;AAAA,IAChB,GAAG;AAAA,IACH,GAAG;AAAA,EAAA;AAGL,MAAI,QAAa,EAAE,YAAY,EAAE,IAAI,eAAe;AACpD,QAAM,OAAO,MAAM;AACnB,MAAI,QAAQ,MAAM;AAChB,YAAQ,EAAE,mBAAmB,IAAI;AAAA,EACnC;AAEA,QAAM,YAAY,YAAY,SAAS;AAEvC,SAAO;AAAA,IACL;AAAA,IACA;AAAA,MACE,OAAO;AAAA,IAAA;AAAA,IAET;AAAA,MACE,YAAY,MAAM;AAAA,MAClB;AAAA,QACE,WAAW,WAAW,EAAE,UAAA,GAAa,SAAS;AAAA,QAC9C,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/units/boxes.d.ts

@@ -1,5 +1,5 @@
-import { ColumnAxisType } from '../../../column-components/src/index.ts';
-import { Clickable } from '../../../ui-components/src/index.ts';
+import { ColumnAxisType } from '@macrostrat/column-components';
+import { Clickable } from '@macrostrat/ui-components';
 import { ReactNode } from 'react';
 import { IUnit, RectBounds } from './types';
 interface UnitRectOptions {

package/dist/units/colors.d.ts

@@ -1,4 +1,4 @@
-import { Environment, Lithology, UnitLithology, UnitLong } from '../../../api-types/src/index.ts';
+import { Environment, Lithology, UnitLithology, UnitLong } from '@macrostrat/api-types';
 interface KeyOptions {
     key?: "lith" | "environ";
     id_key?: "lith_id" | "environ_id";

package/dist/units/composite.d.ts

@@ -1,5 +1,5 @@
-import { BaseUnit } from '../../../api-types/src/index.ts';
-export declare function LabelTrackerProvider(props: any): import('react').DetailedReactHTMLElement<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+import { BaseUnit } from '@macrostrat/api-types';
+export declare function LabelTrackerProvider(props: any): import('react').FunctionComponentElement<import('react').ProviderProps<null>>;
 declare function TrackedLabeledUnit({ division, nameForDivision, ...rest }: {
     [x: string]: any;
     division: any;
@@ -32,8 +32,8 @@ interface CompositeUnitProps {
     showLabels?: boolean;
     clipToFrame?: boolean;
 }
-export declare function CompositeUnitsColumn(props: CompositeUnitProps): import('react').FunctionComponentElement<import('../../../column-components/src/index.ts').LithologyColumnProps>;
+export declare function CompositeUnitsColumn(props: CompositeUnitProps): import('react').FunctionComponentElement<import('@macrostrat/column-components').LithologyColumnProps>;
 export declare function AnnotatedUnitsColumn(props: ICompositeUnitProps): null;
 export declare function SectionLabelsColumn(props: ICompositeUnitProps): import('react').DOMElement<import('react').DOMAttributes<Element>, Element>;
-export declare function ColumnNotesProvider(props: any): import('react').FunctionComponentElement<import('react').ProviderProps<import('../../../column-components/src/index.ts').ColumnCtx<import('../../../column-components/src/index.ts').ColumnDivision>>>;
+export declare function ColumnNotesProvider(props: any): import('react').FunctionComponentElement<import('react').ProviderProps<import('@macrostrat/column-components').ColumnCtx<import('@macrostrat/column-components').ColumnDivision>>>;
 export { TrackedLabeledUnit, ICompositeUnitProps };

package/dist/units/index.cjs

@@ -36,13 +36,27 @@ function BasicUnitComponent({ division, ...rest }) {
     patternID: division.patternID
   });
 }
-function UnitComponent({ division, nColumns = 2, ...rest }) {
+function UnitComponent({
+  division,
+  nColumns = 2,
+  ...rest
+}) {
   const width = rest.width ?? columnComponents.useColumnLayout()?.width;
-  const nOverlappingUnits = division.overlappingUnits?.length ?? 0;
-  const _nColumns = nOverlappingUnits == 0 ? 1 : nColumns;
-  const columnIx = (division.column ?? 0) % _nColumns;
-  const reducedWidth = width / _nColumns;
-  const x = columnIx * width / _nColumns;
+  let _nColumns = nColumns;
+  if (isNaN(_nColumns)) {
+    _nColumns = 2;
+  }
+  let columnIx = 0;
+  let x = 0;
+  console.log(rest, _nColumns, width);
+  let reducedWidth = _nColumns;
+  if ("overlap" in division) {
+    const overlap = division.overlap;
+    _nColumns = Math.min(_nColumns, overlap.nColumns);
+    columnIx = overlap.column;
+    reducedWidth = width / _nColumns;
+    x = columnIx * width / _nColumns;
+  }
   return h__default.default(composite.TrackedLabeledUnit, {
     division,
     ...rest,

package/dist/units/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/units/index.ts"],"sourcesContent":["import h from \"@macrostrat/hyper\";\nimport {\n  LithologyColumn,\n  useGeologicPattern,\n} from \"@macrostrat/column-components\";\nimport { UnitNamesColumn } from \"./names\";\nimport { ICompositeUnitProps } from \"./composite\";\nimport { UnitBoxes, UnitProps } from \"./boxes\";\nimport { useColumnLayout } from \"@macrostrat/column-components\";\nimport { useInDarkMode } from \"@macrostrat/ui-components\";\nimport { getMixedUnitColor } from \"./colors\";\nimport { TrackedLabeledUnit } from \"./composite\";\nimport { useEnvironments, useLithologies } from \"@macrostrat/data-provider\";\nimport { useMemo } from \"react\";\nimport { resolveID } from \"./resolvers\";\nimport { Lithology } from \"@macrostrat/api-types\";\n\nexport * from \"./composite\";\nexport * from \"./types\";\nexport * from \"./colors\";\n\nexport function UnitsColumn({ width = 100 }) {\n  /*\n  A column showing units with USGS color fill\n  */\n  return h(LithologyColumn, { width }, h(UnitBoxes));\n}\n\nexport function SimpleUnitsColumn(props: ICompositeUnitProps) {\n  /*\n  A column with units and names either\n  overlapping or offset to the right\n  */\n  const { columnWidth, width, gutterWidth = 0, labelOffset = 30 } = props;\n\n  return h([\n    h(UnitsColumn, {\n      width: columnWidth,\n    }),\n    h(UnitNamesColumn, {\n      transform: `translate(${columnWidth + gutterWidth})`,\n      paddingLeft: labelOffset,\n      width: width - columnWidth - gutterWidth,\n    }),\n  ]);\n}\n\nexport function BasicUnitComponent({ division, ...rest }) {\n  /** A unit that allows directly setting colors and patterns. */\n\n  return h(UnitComponent, {\n    division,\n    ...rest,\n    backgroundColor: division.color,\n    patternID: division.patternID,\n  });\n}\n\nexport function UnitComponent({ division, nColumns = 2, ...rest }) {\n  const width = rest.width ?? useColumnLayout()?.width;\n\n  const nOverlappingUnits = division.overlappingUnits?.length ?? 0;\n  const _nColumns = nOverlappingUnits == 0 ? 1 : nColumns;\n  const columnIx = (division.column ?? 0) % _nColumns;\n  const reducedWidth = width / _nColumns;\n  const x = (columnIx * width) / _nColumns;\n\n  return h(TrackedLabeledUnit, {\n    division,\n    ...rest,\n    width: reducedWidth,\n    x,\n  });\n}\n\ninterface UnitColorOptions {\n  asBackground?: boolean;\n}\n\nexport function useUnitColor(unit, opts: UnitColorOptions = {}): string | null {\n  /** Get the color for a unit based on its lithology */\n  const lithMap = useLithologies();\n  const inDarkMode = useInDarkMode();\n  const { asBackground = true } = opts;\n\n  return useMemo(() => {\n    if (unit == null || lithMap == null) return null;\n    return getMixedUnitColor(unit, lithMap, inDarkMode, asBackground);\n  }, [unit?.unit_id, lithMap, inDarkMode, asBackground]);\n}\n\nexport function ColoredUnitComponent(props) {\n  /** A unit component that is colored using a mixture of lithologies.\n   * This is a separate component because it depends on more providers/contexts to determine coloring. */\n  const backgroundColor = useUnitColor(props.division);\n\n  const patternID = useMemo(() => {\n    return resolveID(props.division); // ?? getPatternID(props.division.lith, lithMap);\n  }, [props.division?.unit_id]);\n\n  const fill = useGeologicPattern(patternID);\n\n  return h(UnitComponent, {\n    fill,\n    backgroundColor,\n    ...props,\n  });\n}\n\nexport function useUnitColorByEnvironment(\n  unit,\n  opts: UnitColorOptions = {},\n): string | null {\n  /** Get the color for a unit based on its lithology */\n  const environmentMap = useEnvironments();\n  const lithMap = useLithologies();\n  const inDarkMode = useInDarkMode();\n  const { asBackground = true } = opts;\n\n  return useMemo(() => {\n    if (unit == null || environmentMap == null) return null;\n    let c = getMixedUnitColor(unit, environmentMap, inDarkMode, asBackground, {\n      key: \"environ\",\n      id_key: \"environ_id\",\n    });\n    if (c != null) {\n      return c;\n    }\n    // Fallback to lithology color if no environment color is found\n    return getMixedUnitColor(unit, lithMap, inDarkMode, asBackground);\n  }, [unit?.unit_id, environmentMap, lithMap, inDarkMode, asBackground]);\n}\n\nexport function EnvironmentColoredUnitComponent(props) {\n  /** A unit component that is colored using a mixture of lithologies.\n   * This is a separate component because it depends on more providers/contexts to determine coloring. */\n  const backgroundColor = useUnitColorByEnvironment(props.division);\n\n  const patternID = useMemo(() => {\n    return resolveID(props.division); // ?? getPatternID(props.division.lith, lithMap);\n  }, [props.division?.unit_id]);\n\n  const fill = useGeologicPattern(patternID);\n\n  return h(UnitComponent, {\n    fill,\n    backgroundColor,\n    ...props,\n  });\n}\n\nfunction getPatternID(\n  liths: Array<Lithology>,\n  lithMap: Map<number, Lithology>,\n): string | null {\n  if (lithMap == null || liths == null || liths.length == 0) {\n    return null;\n  }\n  const patternIDs = new Set<string>();\n  for (const lith of liths) {\n    const lithData = lithMap.get(lith.lith_id);\n    if (lithData) {\n      patternIDs.add(`${lithData.fill}`);\n    }\n  }\n  let id = patternIDs.values()[0];\n  if (id == \"0\") return null;\n  return id;\n}\n"],"names":["h","LithologyColumn","UnitBoxes","UnitNamesColumn","useColumnLayout","TrackedLabeledUnit","useLithologies","useInDarkMode","useMemo","getMixedUnitColor","resolveID","useGeologicPattern","useEnvironments"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../src/units/index.ts"],"sourcesContent":["import h from \"@macrostrat/hyper\";\nimport {\n  LithologyColumn,\n  useGeologicPattern,\n} from \"@macrostrat/column-components\";\nimport { UnitNamesColumn } from \"./names\";\nimport { ICompositeUnitProps } from \"./composite\";\nimport { UnitBoxes, UnitProps } from \"./boxes\";\nimport { useColumnLayout } from \"@macrostrat/column-components\";\nimport { useInDarkMode } from \"@macrostrat/ui-components\";\nimport { getMixedUnitColor } from \"./colors\";\nimport { TrackedLabeledUnit } from \"./composite\";\nimport { useEnvironments, useLithologies } from \"@macrostrat/data-provider\";\nimport { useMemo } from \"react\";\nimport { resolveID } from \"./resolvers\";\nimport { BaseUnit, Lithology } from \"@macrostrat/api-types\";\nimport { UnitWithDefinedOverlap } from \"../prepare-units/helpers.ts\";\n\nexport * from \"./composite\";\nexport * from \"./types\";\nexport * from \"./colors\";\n\nexport function UnitsColumn({ width = 100 }) {\n  /*\n  A column showing units with USGS color fill\n  */\n  return h(LithologyColumn, { width }, h(UnitBoxes));\n}\n\nexport function SimpleUnitsColumn(props: ICompositeUnitProps) {\n  /*\n  A column with units and names either\n  overlapping or offset to the right\n  */\n  const { columnWidth, width, gutterWidth = 0, labelOffset = 30 } = props;\n\n  return h([\n    h(UnitsColumn, {\n      width: columnWidth,\n    }),\n    h(UnitNamesColumn, {\n      transform: `translate(${columnWidth + gutterWidth})`,\n      paddingLeft: labelOffset,\n      width: width - columnWidth - gutterWidth,\n    }),\n  ]);\n}\n\nexport function BasicUnitComponent({ division, ...rest }) {\n  /** A unit that allows directly setting colors and patterns. */\n\n  return h(UnitComponent, {\n    division,\n    ...rest,\n    backgroundColor: division.color,\n    patternID: division.patternID,\n  });\n}\n\ninterface UnitComponentProps<T extends BaseUnit> {\n  division: UnitWithDefinedOverlap<T> | T;\n  nColumns: number;\n  width?: number;\n}\n\nexport function UnitComponent<T extends BaseUnit>({\n  division,\n  nColumns = 2,\n  ...rest\n}: UnitComponentProps<T>) {\n  const width = rest.width ?? useColumnLayout()?.width;\n\n  let _nColumns = nColumns;\n  if (isNaN(_nColumns)) {\n    _nColumns = 2;\n  }\n  let columnIx = 0;\n  let x = 0;\n\n  console.log(rest, _nColumns, width);\n\n  let reducedWidth = _nColumns;\n  //const nOverlappingUnits = division.overlappingUnits?.length ?? 0;\n  if (\"overlap\" in division) {\n    const overlap = division.overlap;\n    _nColumns = Math.min(_nColumns, overlap.nColumns);\n    columnIx = overlap.column;\n    reducedWidth = width / _nColumns;\n    x = (columnIx * width) / _nColumns;\n  }\n  return h(TrackedLabeledUnit, {\n    division,\n    ...rest,\n    width: reducedWidth,\n    x,\n  });\n}\n\ninterface UnitColorOptions {\n  asBackground?: boolean;\n}\n\nexport function useUnitColor(unit, opts: UnitColorOptions = {}): string | null {\n  /** Get the color for a unit based on its lithology */\n  const lithMap = useLithologies();\n  const inDarkMode = useInDarkMode();\n  const { asBackground = true } = opts;\n\n  return useMemo(() => {\n    if (unit == null || lithMap == null) return null;\n    return getMixedUnitColor(unit, lithMap, inDarkMode, asBackground);\n  }, [unit?.unit_id, lithMap, inDarkMode, asBackground]);\n}\n\nexport function ColoredUnitComponent(props) {\n  /** A unit component that is colored using a mixture of lithologies.\n   * This is a separate component because it depends on more providers/contexts to determine coloring. */\n  const backgroundColor = useUnitColor(props.division);\n\n  const patternID = useMemo(() => {\n    return resolveID(props.division); // ?? getPatternID(props.division.lith, lithMap);\n  }, [props.division?.unit_id]);\n\n  const fill = useGeologicPattern(patternID);\n\n  return h(UnitComponent, {\n    fill,\n    backgroundColor,\n    ...props,\n  });\n}\n\nexport function useUnitColorByEnvironment(\n  unit,\n  opts: UnitColorOptions = {},\n): string | null {\n  /** Get the color for a unit based on its lithology */\n  const environmentMap = useEnvironments();\n  const lithMap = useLithologies();\n  const inDarkMode = useInDarkMode();\n  const { asBackground = true } = opts;\n\n  return useMemo(() => {\n    if (unit == null || environmentMap == null) return null;\n    let c = getMixedUnitColor(unit, environmentMap, inDarkMode, asBackground, {\n      key: \"environ\",\n      id_key: \"environ_id\",\n    });\n    if (c != null) {\n      return c;\n    }\n    // Fallback to lithology color if no environment color is found\n    return getMixedUnitColor(unit, lithMap, inDarkMode, asBackground);\n  }, [unit?.unit_id, environmentMap, lithMap, inDarkMode, asBackground]);\n}\n\nexport function EnvironmentColoredUnitComponent(props) {\n  /** A unit component that is colored using a mixture of lithologies.\n   * This is a separate component because it depends on more providers/contexts to determine coloring. */\n  const backgroundColor = useUnitColorByEnvironment(props.division);\n\n  const patternID = useMemo(() => {\n    return resolveID(props.division); // ?? getPatternID(props.division.lith, lithMap);\n  }, [props.division?.unit_id]);\n\n  const fill = useGeologicPattern(patternID);\n\n  return h(UnitComponent, {\n    fill,\n    backgroundColor,\n    ...props,\n  });\n}\n\nfunction getPatternID(\n  liths: Array<Lithology>,\n  lithMap: Map<number, Lithology>,\n): string | null {\n  if (lithMap == null || liths == null || liths.length == 0) {\n    return null;\n  }\n  const patternIDs = new Set<string>();\n  for (const lith of liths) {\n    const lithData = lithMap.get(lith.lith_id);\n    if (lithData) {\n      patternIDs.add(`${lithData.fill}`);\n    }\n  }\n  let id = patternIDs.values()[0];\n  if (id == \"0\") return null;\n  return id;\n}\n"],"names":["h","LithologyColumn","UnitBoxes","UnitNamesColumn","useColumnLayout","TrackedLabeledUnit","useLithologies","useInDarkMode","useMemo","getMixedUnitColor","resolveID","useGeologicPattern","useEnvironments"],"mappings":"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"}

package/dist/units/index.d.ts

@@ -1,24 +1,23 @@
 import { ICompositeUnitProps } from './composite';
+import { BaseUnit } from '@macrostrat/api-types';
+import { UnitWithDefinedOverlap } from '../prepare-units/helpers.ts';
 export * from './composite';
 export * from './types';
 export * from './colors';
 export declare function UnitsColumn({ width }: {
     width?: number | undefined;
-}): import('react').FunctionComponentElement<import('../../../column-components/src/index.ts').LithologyColumnProps>;
+}): import('react').FunctionComponentElement<import('@macrostrat/column-components').LithologyColumnProps>;
 export declare function SimpleUnitsColumn(props: ICompositeUnitProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export declare function BasicUnitComponent({ division, ...rest }: {
     [x: string]: any;
     division: any;
-}): import('react').FunctionComponentElement<{
-    [x: string]: any;
-    division: any;
-    nColumns?: number | undefined;
-}>;
-export declare function UnitComponent({ division, nColumns, ...rest }: {
-    [x: string]: any;
-    division: any;
-    nColumns?: number | undefined;
-}): import('react').FunctionComponentElement<{
+}): import('react').FunctionComponentElement<UnitComponentProps<BaseUnit>>;
+interface UnitComponentProps<T extends BaseUnit> {
+    division: UnitWithDefinedOverlap<T> | T;
+    nColumns: number;
+    width?: number;
+}
+export declare function UnitComponent<T extends BaseUnit>({ division, nColumns, ...rest }: UnitComponentProps<T>): import('react').FunctionComponentElement<{
     [x: string]: any;
     division: any;
     nameForDivision?: ((div: any) => any) | undefined;
@@ -27,14 +26,6 @@ interface UnitColorOptions {
     asBackground?: boolean;
 }
 export declare function useUnitColor(unit: any, opts?: UnitColorOptions): string | null;
-export declare function ColoredUnitComponent(props: any): import('react').FunctionComponentElement<{
-    [x: string]: any;
-    division: any;
-    nColumns?: number | undefined;
-}>;
+export declare function ColoredUnitComponent(props: any): import('react').FunctionComponentElement<UnitComponentProps<BaseUnit>>;
 export declare function useUnitColorByEnvironment(unit: any, opts?: UnitColorOptions): string | null;
-export declare function EnvironmentColoredUnitComponent(props: any): import('react').FunctionComponentElement<{
-    [x: string]: any;
-    division: any;
-    nColumns?: number | undefined;
-}>;
+export declare function EnvironmentColoredUnitComponent(props: any): import('react').FunctionComponentElement<UnitComponentProps<BaseUnit>>;

package/dist/units/index.js

@@ -34,13 +34,27 @@ function BasicUnitComponent({ division, ...rest }) {
     patternID: division.patternID
   });
 }
-function UnitComponent({ division, nColumns = 2, ...rest }) {
+function UnitComponent({
+  division,
+  nColumns = 2,
+  ...rest
+}) {
   const width = rest.width ?? useColumnLayout()?.width;
-  const nOverlappingUnits = division.overlappingUnits?.length ?? 0;
-  const _nColumns = nOverlappingUnits == 0 ? 1 : nColumns;
-  const columnIx = (division.column ?? 0) % _nColumns;
-  const reducedWidth = width / _nColumns;
-  const x = columnIx * width / _nColumns;
+  let _nColumns = nColumns;
+  if (isNaN(_nColumns)) {
+    _nColumns = 2;
+  }
+  let columnIx = 0;
+  let x = 0;
+  console.log(rest, _nColumns, width);
+  let reducedWidth = _nColumns;
+  if ("overlap" in division) {
+    const overlap = division.overlap;
+    _nColumns = Math.min(_nColumns, overlap.nColumns);
+    columnIx = overlap.column;
+    reducedWidth = width / _nColumns;
+    x = columnIx * width / _nColumns;
+  }
   return h(TrackedLabeledUnit, {
     division,
     ...rest,

package/dist/units/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/units/index.ts"],"sourcesContent":["import h from \"@macrostrat/hyper\";\nimport {\n  LithologyColumn,\n  useGeologicPattern,\n} from \"@macrostrat/column-components\";\nimport { UnitNamesColumn } from \"./names\";\nimport { ICompositeUnitProps } from \"./composite\";\nimport { UnitBoxes, UnitProps } from \"./boxes\";\nimport { useColumnLayout } from \"@macrostrat/column-components\";\nimport { useInDarkMode } from \"@macrostrat/ui-components\";\nimport { getMixedUnitColor } from \"./colors\";\nimport { TrackedLabeledUnit } from \"./composite\";\nimport { useEnvironments, useLithologies } from \"@macrostrat/data-provider\";\nimport { useMemo } from \"react\";\nimport { resolveID } from \"./resolvers\";\nimport { Lithology } from \"@macrostrat/api-types\";\n\nexport * from \"./composite\";\nexport * from \"./types\";\nexport * from \"./colors\";\n\nexport function UnitsColumn({ width = 100 }) {\n  /*\n  A column showing units with USGS color fill\n  */\n  return h(LithologyColumn, { width }, h(UnitBoxes));\n}\n\nexport function SimpleUnitsColumn(props: ICompositeUnitProps) {\n  /*\n  A column with units and names either\n  overlapping or offset to the right\n  */\n  const { columnWidth, width, gutterWidth = 0, labelOffset = 30 } = props;\n\n  return h([\n    h(UnitsColumn, {\n      width: columnWidth,\n    }),\n    h(UnitNamesColumn, {\n      transform: `translate(${columnWidth + gutterWidth})`,\n      paddingLeft: labelOffset,\n      width: width - columnWidth - gutterWidth,\n    }),\n  ]);\n}\n\nexport function BasicUnitComponent({ division, ...rest }) {\n  /** A unit that allows directly setting colors and patterns. */\n\n  return h(UnitComponent, {\n    division,\n    ...rest,\n    backgroundColor: division.color,\n    patternID: division.patternID,\n  });\n}\n\nexport function UnitComponent({ division, nColumns = 2, ...rest }) {\n  const width = rest.width ?? useColumnLayout()?.width;\n\n  const nOverlappingUnits = division.overlappingUnits?.length ?? 0;\n  const _nColumns = nOverlappingUnits == 0 ? 1 : nColumns;\n  const columnIx = (division.column ?? 0) % _nColumns;\n  const reducedWidth = width / _nColumns;\n  const x = (columnIx * width) / _nColumns;\n\n  return h(TrackedLabeledUnit, {\n    division,\n    ...rest,\n    width: reducedWidth,\n    x,\n  });\n}\n\ninterface UnitColorOptions {\n  asBackground?: boolean;\n}\n\nexport function useUnitColor(unit, opts: UnitColorOptions = {}): string | null {\n  /** Get the color for a unit based on its lithology */\n  const lithMap = useLithologies();\n  const inDarkMode = useInDarkMode();\n  const { asBackground = true } = opts;\n\n  return useMemo(() => {\n    if (unit == null || lithMap == null) return null;\n    return getMixedUnitColor(unit, lithMap, inDarkMode, asBackground);\n  }, [unit?.unit_id, lithMap, inDarkMode, asBackground]);\n}\n\nexport function ColoredUnitComponent(props) {\n  /** A unit component that is colored using a mixture of lithologies.\n   * This is a separate component because it depends on more providers/contexts to determine coloring. */\n  const backgroundColor = useUnitColor(props.division);\n\n  const patternID = useMemo(() => {\n    return resolveID(props.division); // ?? getPatternID(props.division.lith, lithMap);\n  }, [props.division?.unit_id]);\n\n  const fill = useGeologicPattern(patternID);\n\n  return h(UnitComponent, {\n    fill,\n    backgroundColor,\n    ...props,\n  });\n}\n\nexport function useUnitColorByEnvironment(\n  unit,\n  opts: UnitColorOptions = {},\n): string | null {\n  /** Get the color for a unit based on its lithology */\n  const environmentMap = useEnvironments();\n  const lithMap = useLithologies();\n  const inDarkMode = useInDarkMode();\n  const { asBackground = true } = opts;\n\n  return useMemo(() => {\n    if (unit == null || environmentMap == null) return null;\n    let c = getMixedUnitColor(unit, environmentMap, inDarkMode, asBackground, {\n      key: \"environ\",\n      id_key: \"environ_id\",\n    });\n    if (c != null) {\n      return c;\n    }\n    // Fallback to lithology color if no environment color is found\n    return getMixedUnitColor(unit, lithMap, inDarkMode, asBackground);\n  }, [unit?.unit_id, environmentMap, lithMap, inDarkMode, asBackground]);\n}\n\nexport function EnvironmentColoredUnitComponent(props) {\n  /** A unit component that is colored using a mixture of lithologies.\n   * This is a separate component because it depends on more providers/contexts to determine coloring. */\n  const backgroundColor = useUnitColorByEnvironment(props.division);\n\n  const patternID = useMemo(() => {\n    return resolveID(props.division); // ?? getPatternID(props.division.lith, lithMap);\n  }, [props.division?.unit_id]);\n\n  const fill = useGeologicPattern(patternID);\n\n  return h(UnitComponent, {\n    fill,\n    backgroundColor,\n    ...props,\n  });\n}\n\nfunction getPatternID(\n  liths: Array<Lithology>,\n  lithMap: Map<number, Lithology>,\n): string | null {\n  if (lithMap == null || liths == null || liths.length == 0) {\n    return null;\n  }\n  const patternIDs = new Set<string>();\n  for (const lith of liths) {\n    const lithData = lithMap.get(lith.lith_id);\n    if (lithData) {\n      patternIDs.add(`${lithData.fill}`);\n    }\n  }\n  let id = patternIDs.values()[0];\n  if (id == \"0\") return null;\n  return id;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/units/index.ts"],"sourcesContent":["import h from \"@macrostrat/hyper\";\nimport {\n  LithologyColumn,\n  useGeologicPattern,\n} from \"@macrostrat/column-components\";\nimport { UnitNamesColumn } from \"./names\";\nimport { ICompositeUnitProps } from \"./composite\";\nimport { UnitBoxes, UnitProps } from \"./boxes\";\nimport { useColumnLayout } from \"@macrostrat/column-components\";\nimport { useInDarkMode } from \"@macrostrat/ui-components\";\nimport { getMixedUnitColor } from \"./colors\";\nimport { TrackedLabeledUnit } from \"./composite\";\nimport { useEnvironments, useLithologies } from \"@macrostrat/data-provider\";\nimport { useMemo } from \"react\";\nimport { resolveID } from \"./resolvers\";\nimport { BaseUnit, Lithology } from \"@macrostrat/api-types\";\nimport { UnitWithDefinedOverlap } from \"../prepare-units/helpers.ts\";\n\nexport * from \"./composite\";\nexport * from \"./types\";\nexport * from \"./colors\";\n\nexport function UnitsColumn({ width = 100 }) {\n  /*\n  A column showing units with USGS color fill\n  */\n  return h(LithologyColumn, { width }, h(UnitBoxes));\n}\n\nexport function SimpleUnitsColumn(props: ICompositeUnitProps) {\n  /*\n  A column with units and names either\n  overlapping or offset to the right\n  */\n  const { columnWidth, width, gutterWidth = 0, labelOffset = 30 } = props;\n\n  return h([\n    h(UnitsColumn, {\n      width: columnWidth,\n    }),\n    h(UnitNamesColumn, {\n      transform: `translate(${columnWidth + gutterWidth})`,\n      paddingLeft: labelOffset,\n      width: width - columnWidth - gutterWidth,\n    }),\n  ]);\n}\n\nexport function BasicUnitComponent({ division, ...rest }) {\n  /** A unit that allows directly setting colors and patterns. */\n\n  return h(UnitComponent, {\n    division,\n    ...rest,\n    backgroundColor: division.color,\n    patternID: division.patternID,\n  });\n}\n\ninterface UnitComponentProps<T extends BaseUnit> {\n  division: UnitWithDefinedOverlap<T> | T;\n  nColumns: number;\n  width?: number;\n}\n\nexport function UnitComponent<T extends BaseUnit>({\n  division,\n  nColumns = 2,\n  ...rest\n}: UnitComponentProps<T>) {\n  const width = rest.width ?? useColumnLayout()?.width;\n\n  let _nColumns = nColumns;\n  if (isNaN(_nColumns)) {\n    _nColumns = 2;\n  }\n  let columnIx = 0;\n  let x = 0;\n\n  console.log(rest, _nColumns, width);\n\n  let reducedWidth = _nColumns;\n  //const nOverlappingUnits = division.overlappingUnits?.length ?? 0;\n  if (\"overlap\" in division) {\n    const overlap = division.overlap;\n    _nColumns = Math.min(_nColumns, overlap.nColumns);\n    columnIx = overlap.column;\n    reducedWidth = width / _nColumns;\n    x = (columnIx * width) / _nColumns;\n  }\n  return h(TrackedLabeledUnit, {\n    division,\n    ...rest,\n    width: reducedWidth,\n    x,\n  });\n}\n\ninterface UnitColorOptions {\n  asBackground?: boolean;\n}\n\nexport function useUnitColor(unit, opts: UnitColorOptions = {}): string | null {\n  /** Get the color for a unit based on its lithology */\n  const lithMap = useLithologies();\n  const inDarkMode = useInDarkMode();\n  const { asBackground = true } = opts;\n\n  return useMemo(() => {\n    if (unit == null || lithMap == null) return null;\n    return getMixedUnitColor(unit, lithMap, inDarkMode, asBackground);\n  }, [unit?.unit_id, lithMap, inDarkMode, asBackground]);\n}\n\nexport function ColoredUnitComponent(props) {\n  /** A unit component that is colored using a mixture of lithologies.\n   * This is a separate component because it depends on more providers/contexts to determine coloring. */\n  const backgroundColor = useUnitColor(props.division);\n\n  const patternID = useMemo(() => {\n    return resolveID(props.division); // ?? getPatternID(props.division.lith, lithMap);\n  }, [props.division?.unit_id]);\n\n  const fill = useGeologicPattern(patternID);\n\n  return h(UnitComponent, {\n    fill,\n    backgroundColor,\n    ...props,\n  });\n}\n\nexport function useUnitColorByEnvironment(\n  unit,\n  opts: UnitColorOptions = {},\n): string | null {\n  /** Get the color for a unit based on its lithology */\n  const environmentMap = useEnvironments();\n  const lithMap = useLithologies();\n  const inDarkMode = useInDarkMode();\n  const { asBackground = true } = opts;\n\n  return useMemo(() => {\n    if (unit == null || environmentMap == null) return null;\n    let c = getMixedUnitColor(unit, environmentMap, inDarkMode, asBackground, {\n      key: \"environ\",\n      id_key: \"environ_id\",\n    });\n    if (c != null) {\n      return c;\n    }\n    // Fallback to lithology color if no environment color is found\n    return getMixedUnitColor(unit, lithMap, inDarkMode, asBackground);\n  }, [unit?.unit_id, environmentMap, lithMap, inDarkMode, asBackground]);\n}\n\nexport function EnvironmentColoredUnitComponent(props) {\n  /** A unit component that is colored using a mixture of lithologies.\n   * This is a separate component because it depends on more providers/contexts to determine coloring. */\n  const backgroundColor = useUnitColorByEnvironment(props.division);\n\n  const patternID = useMemo(() => {\n    return resolveID(props.division); // ?? getPatternID(props.division.lith, lithMap);\n  }, [props.division?.unit_id]);\n\n  const fill = useGeologicPattern(patternID);\n\n  return h(UnitComponent, {\n    fill,\n    backgroundColor,\n    ...props,\n  });\n}\n\nfunction getPatternID(\n  liths: Array<Lithology>,\n  lithMap: Map<number, Lithology>,\n): string | null {\n  if (lithMap == null || liths == null || liths.length == 0) {\n    return null;\n  }\n  const patternIDs = new Set<string>();\n  for (const lith of liths) {\n    const lithData = lithMap.get(lith.lith_id);\n    if (lithData) {\n      patternIDs.add(`${lithData.fill}`);\n    }\n  }\n  let id = patternIDs.values()[0];\n  if (id == \"0\") return null;\n  return id;\n}\n"],"names":[],"mappings":"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"}

package/dist/units/names.d.ts

@@ -1,4 +1,4 @@
-import { ColumnAxisType, ColumnDivision, NoteData, NotesColumnProps } from '../../../column-components/src/index.ts';
+import { ColumnAxisType, ColumnDivision, NoteData, NotesColumnProps } from '@macrostrat/column-components';
 import { IUnit } from './types';
 import { default as React } from 'react';
 import { CompositeColumnScale } from '../prepare-units';
@@ -23,12 +23,12 @@ declare function noteForDivision(div: IUnit, opts: {
     nameForDivision?: (obj: IUnit) => string;
 }): UnitNote;
 declare const defaultNameFunction: (div: any) => any;
-declare function UnitDataColumn_(props: UnitDataProps): import('react').FunctionComponentElement<NotesColumnProps> | null;
+declare function UnitDataColumn_(props: UnitDataProps): React.FunctionComponentElement<NotesColumnProps> | null;
 declare const UnitDataColumn: React.MemoExoticComponent<typeof UnitDataColumn_>;
 export interface UnitNamesProps extends UnitDataProps {
     paddingLeft?: number;
     width: number;
     onClickNote?: (note: any) => void;
 }
-export declare function UnitNamesColumn(props: UnitNamesProps): import('react').FunctionComponentElement<UnitDataProps>;
+export declare function UnitNamesColumn(props: UnitNamesProps): React.FunctionComponentElement<UnitDataProps>;
 export { defaultNameFunction, noteForDivision, UnitDataColumn };

package/dist/units/resolvers.d.ts

@@ -1,8 +1,8 @@
-import { Lithology, UnitLithology } from '../../../api-types/src/index.ts';
+import { Lithology, UnitLithology } from '@macrostrat/api-types';
 export declare function getBestFGDCPatternForLithologyList<T extends UnitLithology | Lithology>(liths: T[]): {
     lith: T;
     patternID: string;
 } | null;
-declare const resolveID: (d: any) => any;
+declare const resolveID: (d: any) => "650" | "651" | "609" | "608" | "611" | "686" | "603" | "711" | "725" | null;
 declare const scalePattern: (id: any) => any;
 export { resolveID, scalePattern };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/column-views",
-  "version": "3.3.4",
+  "version": "3.4.0",
   "description": "Data views for Macrostrat stratigraphic columns",
   "repository": {
     "type": "git",
@@ -45,21 +45,21 @@
     "react": "^18.0.0||^19.0.0"
   },
   "dependencies": {
-    "@blueprintjs/core": "^6.11.3",
-    "@macrostrat/api-types": "^1.1.5",
-    "@macrostrat/color-utils": "^1.2.1",
-    "@macrostrat/column-components": "^2.0.6",
-    "@macrostrat/data-components": "^1.1.8",
-    "@macrostrat/data-provider": "^1.0.2",
-    "@macrostrat/hyper": "^3.1.0",
-    "@macrostrat/map-interface": "^2.2.4",
-    "@macrostrat/map-styles": "^2.2.1",
-    "@macrostrat/mapbox-react": "^3.2.0",
-    "@macrostrat/mapbox-utils": "^1.7.3",
-    "@macrostrat/stratigraphy-utils": "^1.2.1",
-    "@macrostrat/svg-map-components": "^2.0.2",
-    "@macrostrat/timescale": "^3.1.2",
-    "@macrostrat/ui-components": "^5.0.8",
+    "@blueprintjs/core": "^6.14.0",
+    "@macrostrat/api-types": "^1.2.0",
+    "@macrostrat/color-utils": "^1.2.2",
+    "@macrostrat/column-components": "^2.0.8",
+    "@macrostrat/data-components": "^1.1.10",
+    "@macrostrat/data-provider": "^1.0.4",
+    "@macrostrat/hyper": "^3.1.1",
+    "@macrostrat/map-interface": "^2.2.6",
+    "@macrostrat/map-styles": "^2.2.3",
+    "@macrostrat/mapbox-react": "^3.2.2",
+    "@macrostrat/mapbox-utils": "^1.7.4",
+    "@macrostrat/stratigraphy-utils": "^1.3.0",
+    "@macrostrat/svg-map-components": "^2.0.3",
+    "@macrostrat/timescale": "^3.1.3",
+    "@macrostrat/ui-components": "^5.0.10",
     "@turf/boolean-point-in-polygon": "^7.3.2",
     "@turf/buffer": "^7.3.2",
     "@turf/centroid": "^7.3.2",
@@ -82,8 +82,7 @@
     "d3-path": "^3.1.0",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
-    "jotai": "^2.16.0",
-    "jotai-scope": "^0.10.0",
+    "jotai": "^2.20.0",
     "mapbox-gl": "^3.0.0",
     "p-map": "^7.0.4",
     "react-spring": "^9.7.5",
@@ -92,7 +91,8 @@
     "zustand-computed": "^2.0.2"
   },
   "devDependencies": {
-    "@macrostrat/web-components-bundler": "1.0.1"
+    "@macrostrat/web-components-bundler": "1.0.1",
+    "jotai-scope": "^0.11.0"
   },
   "publishConfig": {
     "access": "public"

package/src/column.ts

@@ -118,7 +118,7 @@ export function Column(props: ColumnProps) {
 
   /* Make pixelScale and targetUnitHeight mutually exclusive. PixelScale implies
    * standardization of scales in all sections */
-  let _targetUnitHeight = targetUnitHeight;
+  let _targetUnitHeight: number | null = targetUnitHeight;
   let _minSectionHeight = minSectionHeight;
   let _minPixelScale = minPixelScale;
   if (pixelScale != null) {

package/src/data-provider/unit-selection.ts

@@ -16,6 +16,10 @@ type UnitSelectDispatch = (
   target: HTMLElement | null,
 ) => void;
 
+export function useUnitSelection() {
+  return scope.use(selectedUnitAtom);
+}
+
 export function useUnitSelectionDispatch(): UnitSelectDispatch {
   return scope.useSetAtom(selectedUnitAtom);
 }
@@ -70,6 +74,7 @@ const selectedUnitAtom = atom(
   ): BaseUnit | null => {
     if (!get(allowUnitSelectionAtom)) {
       console.error("Unit selection is disabled.");
+      return null;
     }
 
     let unitID: number | null = null;
@@ -83,8 +88,8 @@ const selectedUnitAtom = atom(
     }
 
     if (unitID != null) {
-      // Verify that the unit exists in the current colum, else throw
       const unitsMap = get(columnUnitsMapAtom);
+      // Verify that the unit exists in the current colum, else throw
       if (!unitsMap?.has(unitID)) {
         throw new Error(
           `Unit with ID ${unitID} not found in current column units.`,
@@ -150,9 +155,8 @@ if (props.onClickedColumn) {
 export function useUnitSelectionTarget(
   unit: IUnit,
 ): [React.RefObject<HTMLElement>, boolean, (evt: Event) => void] {
-  const ref = useRef<HTMLElement>();
-  const selectedUnit = useSelectedUnit();
-  const selectUnit = useUnitSelectionDispatch();
+  const ref = useRef<HTMLElement>(null);
+  const [selectedUnit, selectUnit] = useUnitSelection();
   const selected = selectedUnit?.unit_id == unit.unit_id;
 
   const onClick = useCallback(