@macrostrat/column-views 3.5.0 → 3.6.0

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 { 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  let reducedWidth = _nColumns;\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":";;;;;;;;;;;;AAsBO,SAAS,YAAY,EAAE,QAAQ,OAAO;AAI3C,SAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,SAAS,CAAC;AACnD;AAEO,SAAS,kBAAkB,OAA4B;AAK5D,QAAM,EAAE,aAAa,OAAO,cAAc,GAAG,cAAc,OAAO;AAElE,SAAO,EAAE;AAAA,IACP,EAAE,aAAa;AAAA,MACb,OAAO;AAAA,IAAA,CACR;AAAA,IACD,EAAE,iBAAiB;AAAA,MACjB,WAAW,aAAa,cAAc,WAAW;AAAA,MACjD,aAAa;AAAA,MACb,OAAO,QAAQ,cAAc;AAAA,IAAA,CAC9B;AAAA,EAAA,CACF;AACH;AAEO,SAAS,mBAAmB,EAAE,UAAU,GAAG,QAAQ;AAGxD,SAAO,EAAE,eAAe;AAAA,IACtB;AAAA,IACA,GAAG;AAAA,IACH,iBAAiB,SAAS;AAAA,IAC1B,WAAW,SAAS;AAAA,EAAA,CACrB;AACH;AAQO,SAAS,cAAkC;AAAA,EAChD;AAAA,EACA,WAAW;AAAA,EACX,GAAG;AACL,GAA0B;AACxB,QAAM,QAAQ,KAAK,SAAS,gBAAA,GAAmB;AAE/C,MAAI,YAAY;AAChB,MAAI,MAAM,SAAS,GAAG;AACpB,gBAAY;AAAA,EACd;AACA,MAAI,WAAW;AACf,MAAI,IAAI;AAER,MAAI,eAAe;AACnB,MAAI,aAAa,UAAU;AACzB,UAAM,UAAU,SAAS;AACzB,gBAAY,KAAK,IAAI,WAAW,QAAQ,QAAQ;AAChD,eAAW,QAAQ;AACnB,mBAAe,QAAQ;AACvB,QAAK,WAAW,QAAS;AAAA,EAC3B;AACA,SAAO,EAAE,oBAAoB;AAAA,IAC3B;AAAA,IACA,GAAG;AAAA,IACH,OAAO;AAAA,IACP;AAAA,EAAA,CACD;AACH;AAMO,SAAS,aAAa,MAAM,OAAyB,IAAmB;AAE7E,QAAM,UAAU,eAAA;AAChB,QAAM,aAAa,cAAA;AACnB,QAAM,EAAE,eAAe,KAAA,IAAS;AAEhC,SAAO,QAAQ,MAAM;AACnB,QAAI,QAAQ,QAAQ,WAAW,KAAM,QAAO;AAC5C,WAAO,kBAAkB,MAAM,SAAS,YAAY,YAAY;AAAA,EAClE,GAAG,CAAC,MAAM,SAAS,SAAS,YAAY,YAAY,CAAC;AACvD;AAEO,SAAS,qBAAqB,OAAO;AAG1C,QAAM,kBAAkB,aAAa,MAAM,QAAQ;AAEnD,QAAM,YAAY,QAAQ,MAAM;AAC9B,WAAO,UAAU,MAAM,QAAQ;AAAA,EACjC,GAAG,CAAC,MAAM,UAAU,OAAO,CAAC;AAE5B,QAAM,OAAO,mBAAmB,SAAS;AAEzC,SAAO,EAAE,eAAe;AAAA,IACtB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,CACJ;AACH;AAEO,SAAS,0BACd,MACA,OAAyB,IACV;AAEf,QAAM,iBAAiB,gBAAA;AACvB,QAAM,UAAU,eAAA;AAChB,QAAM,aAAa,cAAA;AACnB,QAAM,EAAE,eAAe,KAAA,IAAS;AAEhC,SAAO,QAAQ,MAAM;AACnB,QAAI,QAAQ,QAAQ,kBAAkB,KAAM,QAAO;AACnD,QAAI,IAAI,kBAAkB,MAAM,gBAAgB,YAAY,cAAc;AAAA,MACxE,KAAK;AAAA,MACL,QAAQ;AAAA,IAAA,CACT;AACD,QAAI,KAAK,MAAM;AACb,aAAO;AAAA,IACT;AAEA,WAAO,kBAAkB,MAAM,SAAS,YAAY,YAAY;AAAA,EAClE,GAAG,CAAC,MAAM,SAAS,gBAAgB,SAAS,YAAY,YAAY,CAAC;AACvE;AAEO,SAAS,gCAAgC,OAAO;AAGrD,QAAM,kBAAkB,0BAA0B,MAAM,QAAQ;AAEhE,QAAM,YAAY,QAAQ,MAAM;AAC9B,WAAO,UAAU,MAAM,QAAQ;AAAA,EACjC,GAAG,CAAC,MAAM,UAAU,OAAO,CAAC;AAE5B,QAAM,OAAO,mBAAmB,SAAS;AAEzC,SAAO,EAAE,eAAe;AAAA,IACtB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,CACJ;AACH;"}
+{"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 { UnitWithLayoutParameters } 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: UnitWithLayoutParameters<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  let reducedWidth = _nColumns;\n  if (\"layout\" in division) {\n    const layout = division.layout;\n    _nColumns = Math.min(_nColumns, layout.totalColumns);\n    columnIx = layout.column;\n    reducedWidth = width / layout.totalColumns / layout.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/column-views",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "description": "Data views for Macrostrat stratigraphic columns",
   "repository": {
     "type": "git",
@@ -48,18 +48,19 @@
     "@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.12",
+    "@macrostrat/column-components": "^2.0.9",
+    "@macrostrat/data-components": "^1.4.0",
     "@macrostrat/data-provider": "^1.1.0",
     "@macrostrat/hyper": "^3.1.1",
-    "@macrostrat/map-interface": "^2.2.6",
-    "@macrostrat/map-styles": "^2.2.4",
-    "@macrostrat/mapbox-react": "^3.2.2",
-    "@macrostrat/mapbox-utils": "^1.7.4",
+    "@macrostrat/map-interface": "^2.3.0",
+    "@macrostrat/map-styles": "^2.2.6",
+    "@macrostrat/mapbox-react": "^3.3.0",
+    "@macrostrat/mapbox-utils": "^1.8.0",
+    "@macrostrat/scoped-store": "^1.0.1",
     "@macrostrat/stratigraphy-utils": "^1.3.0",
     "@macrostrat/svg-map-components": "^2.0.3",
-    "@macrostrat/timescale": "^3.1.4",
-    "@macrostrat/ui-components": "^5.0.10",
+    "@macrostrat/timescale": "^3.1.5",
+    "@macrostrat/ui-components": "^5.1.0",
     "@turf/boolean-point-in-polygon": "^7.3.2",
     "@turf/buffer": "^7.3.2",
     "@turf/centroid": "^7.3.2",

package/src/correlation-chart/stories/namibia-correlation.stories.ts

@@ -0,0 +1,151 @@
+import "@macrostrat/style-system";
+import { MergeSectionsMode, UnitComponent } from "../..";
+import { Meta } from "@storybook/react-vite";
+
+import h from "./stories.module.sass";
+import { CorrelationChart } from "../main";
+import { BaseUnit } from "@macrostrat/api-types";
+import { useGeologicPattern } from "@macrostrat/column-components";
+
+export default {
+  title: "Column views/Correlation chart",
+  component: CorrelationChart,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component: "Correlation chart for Macrostrat columns",
+      },
+      story: {
+        inline: false,
+        iframeHeight: 500,
+      },
+    },
+  },
+  args: {},
+} as Meta<typeof CorrelationChart>;
+
+const nosib = {
+  b_age: 900,
+  t_age: 800,
+  name: "Nosib",
+  color: "#ffd4ba",
+};
+
+const namUnits: (BaseUnit | BaseUnit[])[] = [
+  [
+    nosib,
+    { b_age: 746, t_age: 720, name: "Chuos", color: "#d0b4ff" },
+    {
+      b_age: 720,
+      t_age: 600,
+      name: "Otavi",
+      color: "dodgerblue",
+    },
+  ],
+  [
+    nosib,
+    {
+      b_age: 740,
+      t_age: 600,
+      name: "Swakop",
+      color: "#aaa",
+    },
+  ],
+  [
+    nosib,
+    {
+      b_age: 670,
+      t_age: 580,
+      name: "Witvlei",
+      color: "#fffc4e",
+    },
+  ],
+  [
+    {
+      b_age: 610,
+      t_age: 575,
+      name: "Zebra Series",
+      color: "#fdbcf0",
+    },
+    {
+      b_age: 660,
+      t_age: 610,
+      name: "Naukluft complex",
+      color: "#fdbcbc",
+    },
+  ],
+  {
+    b_age: 550,
+    t_age: 520,
+    name: "Nama",
+    color: "#baf1a7",
+  },
+  // {
+  //   unit_id: 0,
+  //   b_age: 900,
+  //   t_age: 0,
+  //   unit_name: "",
+  //   column: 8,
+  // },
+];
+
+export function NamibiaCorrelationChart() {
+  return h(
+    "div",
+    {
+      style: {
+        "--column-unit-font-size": "14px",
+        "--column-unit-font-style": "bold",
+        "--column-text-color": "white",
+      },
+    },
+    [
+      h(CorrelationChart, {
+        id: 432,
+        data: namUnits.map((u, i) => {
+          let units: any = null;
+          if (Array.isArray(u)) {
+            units = u.map((u) => buildUnit(u, i));
+          } else {
+            units = [buildUnit(u, i)];
+          }
+          return {
+            columnID: i,
+            units,
+          };
+        }),
+        columnSpacing: 10,
+        t_age: 450,
+        b_age: 850,
+        //width: 400,
+        //columnWidth: 400,
+        pixelScale: 2,
+        //showLabelColumn: false,
+        mergeSections: MergeSectionsMode.ALL,
+        unitComponent: ProvidedColorUnitComponent,
+      }),
+    ],
+  );
+}
+
+function buildUnit(unit, i) {
+  return {
+    unit_id: i,
+    col_id: i,
+    ...unit,
+    unit_name: unit.name,
+  };
+}
+
+function ProvidedColorUnitComponent(props) {
+  /** A unit component that is colored by its own properties. */
+
+  const fill = useGeologicPattern(props.division.patternID);
+
+  return h(UnitComponent, {
+    fill,
+    backgroundColor: props.division.color ?? null,
+    ...props,
+  });
+}

package/src/data-provider/store.ts

@@ -24,7 +24,7 @@ import {
   type AtomMap,
   createScopedStore,
   StateIsolation,
-} from "@macrostrat/data-components";
+} from "@macrostrat/scoped-store";
 import { atom } from "jotai";
 import { useEffect } from "react";
 

package/src/prepare-units/helpers.ts

@@ -11,26 +11,40 @@ import {
 import {
   AgeRangeRelationship,
   compareAgeRanges,
+  mergeAgeRanges,
+  MergeMode,
 } from "@macrostrat/stratigraphy-utils";
 import type { ExtUnit, SectionInfo, StratigraphicPackage } from "./types";
 
 const dt = 0.001;
 
-export type UnitWithDefinedOverlap<T extends BaseUnit> = T & {
-  overlap: UnitOverlapInfo<T>;
+export type UnitWithLayoutParameters<T extends BaseUnit> = T & {
+  layout: UnitLayoutData<T>;
 };
 
-type UnitOverlapInfo<T extends BaseUnit> = {
+export type UnitWithLayoutHints<T extends BaseUnit> = T & {
+  layoutHints?: UnitLayoutHints;
+};
+
+interface UnitLayoutInfo {
   column: number;
   nColumns: number;
+}
+
+type UnitLayoutHints = Partial<UnitLayoutInfo>;
+
+type UnitLayoutData<T extends BaseUnit> = UnitLayoutInfo & {
+  totalColumns: number;
   unitGroup: UnitGroup<T>;
 };
 
 class UnitGroup<T extends BaseUnit> implements StratigraphicPackage {
   units: T[];
+  axisType: ColumnAxisType;
 
-  constructor(units: T[]) {
+  constructor(units: T[], axisType: ColumnAxisType = ColumnAxisType.AGE) {
     this.units = units;
+    this.axisType = axisType;
   }
 
   get t_age(): number {
@@ -41,7 +55,7 @@ class UnitGroup<T extends BaseUnit> implements StratigraphicPackage {
     return Math.max(...this.units.map((d) => d.b_age));
   }
 
-  getUnits(): UnitWithDefinedOverlap<T>[] {
+  getUnits(): UnitWithLayoutParameters<T>[] {
     return assignColumnsToUnitsWithinOverlappingGroup(this);
   }
 }
@@ -49,39 +63,51 @@ class UnitGroup<T extends BaseUnit> implements StratigraphicPackage {
 function groupUnitsByMutualOverlap<T extends BaseUnit>(
   units: T[],
   tolerance: number = dt,
+  axisType: ColumnAxisType = ColumnAxisType.AGE,
 ): UnitGroup<T>[] {
   /** Group units within a section that have mutual overlap. */
-  const sections = groupUnitsIntoSectionsByOverlap(
-    units,
-    ColumnAxisType.AGE,
-    tolerance,
-  );
+
+  const sections = groupUnitsIntoSectionsByOverlap(units, axisType, tolerance);
+
+  console.log("Grouped sections", sections);
+
   return sections.map((d) => {
-    return new UnitGroup(d.units);
+    return new UnitGroup(d.units, axisType);
   });
 }
 
 const sortByAge = createUnitSorter(ColumnAxisType.AGE);
 
 function assignColumnsToUnitsWithinOverlappingGroup<T extends BaseUnit>(
-  group: UnitGroup<T>,
-): UnitWithDefinedOverlap<T>[] {
+  group: UnitGroup<UnitWithLayoutHints<T>>,
+): UnitWithLayoutParameters<T>[] {
   /** A relatively naïve function to assign columns to units within a mutually overlapping group.
    * This gets the number of columns that would be needed to accommodate the units in the group.
    * It then assigns columns to units in the group based on the number of columns needed, with
    * lower units further to the left.
    */
 
-  const sortedUnits = [...group.units].sort((a, b) => b.b_age - a.b_age);
+  const sortedUnits = [...group.units].sort(createUnitSorter(group.axisType));
 
   const columns: T[][] = [];
 
+  let nColumns = 1;
+
   for (const unit of sortedUnits) {
+    let startIndex = 0;
+    let endIndex = 0;
     // Find a column that is not already occupied by an overlapping unit
+    const colHint = unit.layoutHints?.column;
+    if (colHint != null) {
+      columns[colHint] ??= [];
+      columns[colHint].push(unit);
+      continue;
+    }
     let didAddToExistingColumn = false;
+
     for (const column of columns) {
       const lastUnit = column[column.length - 1];
-      if (!unitsOverlap(unit, lastUnit, ColumnAxisType.AGE, dt)) {
+      if (!unitsOverlap(unit, lastUnit, group.axisType, dt)) {
         column.push(unit);
         didAddToExistingColumn = true;
         break;
@@ -92,14 +118,17 @@ function assignColumnsToUnitsWithinOverlappingGroup<T extends BaseUnit>(
     }
   }
 
-  const units: UnitWithDefinedOverlap<T>[] = columns.flatMap(
+  console.log(columns);
+
+  const units: UnitWithLayoutParameters<T>[] = columns.flatMap(
     (column, columnIndex) =>
       column.map((unit) => {
         return {
           ...unit,
-          overlap: {
+          layout: {
             column: columnIndex,
-            nColumns: columns.length,
+            nColumns: 1,
+            totalColumns: columns.length,
             unitGroup: group,
           },
         };
@@ -121,7 +150,7 @@ export function preprocessUnits<T extends UnitLong = UnitLong>(
     tolerance = 0.01; // 1cm tolerance for height/depth columns
   }
 
-  const unitGroups = groupUnitsByMutualOverlap(units, tolerance);
+  const unitGroups = groupUnitsByMutualOverlap(units, tolerance, axisType);
 
   const divisions: any[] = [];
   // Serialize all groups' units to a single array
@@ -186,7 +215,7 @@ export function groupUnitsIntoSectionsBySectionID<T extends UnitLong>(
 interface WorkingSection {
   units: UnitLong[];
   // Position or age
-  heightRange?: [number, number];
+  heightRange: [number, number];
 }
 
 export function groupUnitsIntoSectionsByOverlap<T extends BaseUnit>(
@@ -201,41 +230,60 @@ export function groupUnitsIntoSectionsByOverlap<T extends BaseUnit>(
    * */
   // Start with each unit as its own "section", and progressively merge...
   const sectionList: WorkingSection[] = [];
-  for (const unit of units) {
-    // Check if the unit overlaps with any existing section
-    const heightRange = getUnitHeightRange(unit, axisType);
-    let section: WorkingSection | undefined = sectionList.find(
-      (s) =>
-        compareAgeRanges(heightRange, s.heightRange, tolerance) !==
-        AgeRangeRelationship.Disjoint,
-    );
-    if (section == null) {
-      // No overlap, create a new section
-      sectionList.push({
-        heightRange,
-        units: [unit],
-      });
-    } else {
-      // Overlap, merge the unit into the section
-      section.units.push(unit);
-      // Update the height range
-      if (axisType == ColumnAxisType.DEPTH || axisType == ColumnAxisType.AGE) {
-        section.heightRange = [
-          Math.max(section.heightRange[0], heightRange[0]),
-          Math.min(section.heightRange[1], heightRange[1]),
-        ];
+
+  const initialSections: WorkingSection[] = units.map((unit) => {
+    return {
+      units: [unit],
+      heightRange: getUnitHeightRange(unit, axisType),
+    };
+  });
+
+  const isOverlapping = (a: WorkingSection, b: WorkingSection) => {
+    const res = compareAgeRanges(a.heightRange, b.heightRange, tolerance);
+    return res !== AgeRangeRelationship.Disjoint;
+  };
+
+  const mergeSections = (a: WorkingSection, b: WorkingSection) => {
+    return {
+      units: [...a.units, ...b.units],
+      heightRange: mergeAgeRanges(
+        [a.heightRange, b.heightRange],
+        MergeMode.Outer,
+      ),
+    };
+  };
+
+  // Merge overlapping sections progressively until no more merges are possible
+  let finalSectionList = initialSections;
+
+  while (true) {
+    let merged = false;
+    const nextSections: WorkingSection[] = [];
+
+    for (const section of finalSectionList) {
+      if (nextSections.length === 0) {
+        nextSections.push(section);
       } else {
-        section.heightRange = [
-          Math.min(section.heightRange[0], heightRange[0]),
-          Math.max(section.heightRange[1], heightRange[1]),
-        ];
+        const lastSection = nextSections[nextSections.length - 1];
+        if (isOverlapping(section, lastSection)) {
+          // Merge with the last section
+          nextSections[nextSections.length - 1] = mergeSections(lastSection, section);
+          merged = true;
+        } else {
+          nextSections.push(section);
+        }
       }
     }
+
+    finalSectionList = nextSections;
+
+    // Stop when no more merges occurred in this pass
+    if (!merged) {
+      break;
+    }
   }
-  // We should have a section for each unit, now we can convert to SectionInfo
-  // Ages have to be really actually ages, not heights
 
-  return sectionList.map((section, i) => {
+  return finalSectionList.map((section, i) => {
     const [b_age, t_age] = getSectionAgeRange(section.units);
     const [b_pos, t_pos] = getSectionPosRange(section.units, axisType);
     return {

package/src/prepare-units/index.ts

@@ -6,6 +6,7 @@ import {
   mergeOverlappingSections,
   preprocessSectionUnit,
   preprocessUnits,
+  UnitWithLayoutHints,
 } from "./helpers";
 import { ColumnAxisType } from "@macrostrat/column-components";
 import { useMemo } from "react";
@@ -43,7 +44,7 @@ export function usePreparedColumnUnits(
 }
 
 export function prepareColumnUnits(
-  units: UnitLong[],
+  units: UnitWithLayoutHints<UnitLong>[],
   options: PrepareColumnOptions,
 ): PreparedColumnData {
   /** Prepare units for rendering into Macrostrat columns */
@@ -184,6 +185,8 @@ export function prepareColumnUnits(
    * We do this after merging sections so that we can
    * handle cases where there are overlapping units across sections
    * */
+  console.log(sections2, "sections");
+
   const sectionsOut = sections2.map((section) => {
     return {
       ...section,

package/src/unit-details/panel.ts

@@ -93,7 +93,7 @@ export function UnitDetailsPanel({
         key: "json-view-toggle",
         className: classNames("json-view-toggle", { enabled: setShowJSON }),
         onClick(evt) {
-          setShowJSON(!showJSON);
+          setShowJSON(!_showJSON);
           evt.stopPropagation();
         },
       }),

package/src/units/boxes.module.sass

@@ -4,8 +4,8 @@
 .labeled-unit
   --column-unit-background-internal: var(--column-unit-background-color, var(--column-background-color))
   :global(.unit-overlay)
-    font-size: 10px
-    font-style: italic
+    font-size: var(--column-unit-font-size, 10px)
+    font-style: var(--column-unit-font-style, italic)
     display: flex
     align-items: center
     justify-content: center

package/src/units/index.ts

@@ -14,7 +14,7 @@ import { useEnvironments, useLithologies } from "@macrostrat/data-provider";
 import { useMemo } from "react";
 import { resolveID } from "./resolvers";
 import { BaseUnit, Lithology } from "@macrostrat/api-types";
-import { UnitWithDefinedOverlap } from "../prepare-units/helpers.ts";
+import { UnitWithLayoutParameters } from "../prepare-units/helpers.ts";
 
 export * from "./composite";
 export * from "./types";
@@ -58,7 +58,7 @@ export function BasicUnitComponent({ division, ...rest }) {
 }
 
 interface UnitComponentProps<T extends BaseUnit> {
-  division: UnitWithDefinedOverlap<T> | T;
+  division: UnitWithLayoutParameters<T> | T;
   nColumns: number;
   width?: number;
 }
@@ -78,11 +78,11 @@ export function UnitComponent<T extends BaseUnit>({
   let x = 0;
 
   let reducedWidth = _nColumns;
-  if ("overlap" in division) {
-    const overlap = division.overlap;
-    _nColumns = Math.min(_nColumns, overlap.nColumns);
-    columnIx = overlap.column;
-    reducedWidth = width / _nColumns;
+  if ("layout" in division) {
+    const layout = division.layout;
+    _nColumns = Math.min(_nColumns, layout.totalColumns);
+    columnIx = layout.column;
+    reducedWidth = width / layout.totalColumns / layout.nColumns;
     x = (columnIx * width) / _nColumns;
   }
   return h(TrackedLabeledUnit, {