Merge branch 'section-overlap-test'

* section-overlap-test:
  Remove some docs code
  Fixed some stories
  Split sections by overlap

Author: davenquinn

packages/column-views/src/facets/fossils/index.ts

@@ -84,11 +84,8 @@ export function PBDBFossilsColumn({ columnID, color = "magenta" }) {
 
     return unitRefData.map((d) => {
       const { unit, data } = d;
-      console.log(unit);
       const heightRange = getUnitHeightRange(unit, axisType);
 
-      console.log(heightRange);
-
       return {
         top_height: heightRange[1],
         height: heightRange[0],

packages/column-views/src/prepare-units/helpers.ts

@@ -7,7 +7,9 @@ import {
   createUnitSorter,
   ensureArray,
   ensureRealFloat,
+  PossiblyClippedUnit,
 } from "./utils";
+import { compareAgeRanges } from "@macrostrat/stratigraphy-utils";
 
 const dt = 0.001;
 
@@ -111,6 +113,13 @@ export function groupUnitsIntoSections<T extends UnitLong>(
   units: T[],
   axisType: ColumnAxisType = ColumnAxisType.AGE
 ): SectionInfo<T>[] {
+  if (axisType != ColumnAxisType.AGE) {
+    return groupUnitsIntoSectionByOverlap(units, axisType);
+  }
+
+  /** Group units into sections by section_id.
+   * This works for large-scale Macrostrat columns, where units are grouped by section_id.
+   * */
   let groups = Array.from(group(units, (d) => d.section_id));
   const unitComparator = createUnitSorter(axisType);
 
@@ -130,6 +139,60 @@ export function groupUnitsIntoSections<T extends UnitLong>(
   return groups1;
 }
 
+interface WorkingSection {
+  units: UnitLong[];
+  // Position or age
+  heightRange?: [number, number];
+}
+
+function groupUnitsIntoSectionByOverlap<T extends UnitLong>(
+  units: T[],
+  axisType: ColumnAxisType = ColumnAxisType.AGE
+): SectionInfo<T>[] {
+  /** Group units into sections by overlap.
+   * This creates "synthetic" sections that correspond to packages bound by scale gaps.
+   * This is most useful in the height and depth domains, where gaps (e.g., missing core) are
+   * common.
+   * */
+  // 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)
+    );
+    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
+      section.heightRange = [
+        Math.max(section.heightRange[0], heightRange[0]),
+        Math.min(section.heightRange[1], heightRange[1]),
+      ];
+    }
+  }
+  // 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) => {
+    const [b_age, t_age] = getSectionAgeRange(section.units);
+    return {
+      // Negative section IDs are used to indicate that these are synthetic sections
+      section_id: -i,
+      t_age: t_age,
+      b_age: b_age,
+      units: section.units as T[],
+    };
+  });
+}
+
 export function getSectionAgeRange(units: BaseUnit[]): [number, number] {
   /** Get the overall age range of a set of units. */
   const t_ages = units.map((d) => d.t_age);

packages/column-views/src/prepare-units/index.ts

@@ -17,7 +17,7 @@ import {
   PackageLayoutData,
 } from "./composite-scale";
 import type { SectionInfo } from "./helpers";
-import { agesOverlap, unitsOverlap } from "./utils";
+import { agesOverlap, getUnitHeightRange, unitsOverlap } from "./utils";
 
 export * from "./utils";
 export { preprocessUnits, groupUnitsIntoSections };

packages/column-views/src/prepare-units/utils.ts

@@ -46,7 +46,7 @@ export function agesOverlap(
   return unitsOverlap(a, b, ColumnAxisType.AGE, tolerance);
 }
 
-interface PossiblyClippedUnit extends BaseUnit {
+export interface PossiblyClippedUnit extends BaseUnit {
   // Internally created clipped positions
   t_clip_pos?: number;
   b_clip_pos?: number;

packages/column-views/stories/column-ui/standalone.ts

@@ -41,9 +41,8 @@ export function StandaloneColumn(props: StandaloneColumnProps) {
   }
 
   return h("div", [
-    h(FlexRow, { alignmentBaseline: "baseline" }, [
+    h(FlexRow, { gap: "2em", alignItems: "baseline" }, [
       h("h2", info.col_name),
-      h(Spacer),
       h("code", info.col_id),
     ]),
     h(Column, { ...rest, units }),

packages/column-views/stories/column-ui/story-ui.module.sass

@@ -3,7 +3,7 @@
   flex-direction: row
   justify-content: center
 
-.column-container
+.column-container, .column-view
   width: 600px
 
 .right-column

packages/column-views/stories/facets/carbon-isotopes.stories.ts

@@ -45,6 +45,7 @@ function CarbonIsotopesColumn(props) {
 }
 
 export default {
+  tags: ["!autodocs"],
   title: "Column views/Facets/Carbon isotopes",
   component: CarbonIsotopesColumn,
 };
@@ -97,13 +98,13 @@ export function EdiacaranCompilation(defaultArgs) {
             },
           })
         ),
-      ]),
-      h("div.column-view", [
-        h(CarbonIsotopesColumn, {
-          id: columnArgs.col_id,
-          inProcess: true,
-          showLabelColumn: false,
-        }),
+        h("div.column-view", [
+          h(CarbonIsotopesColumn, {
+            id: columnArgs.col_id,
+            inProcess: true,
+            showLabelColumn: false,
+          }),
+        ]),
       ]),
     ])
   );

packages/column-views/stories/facets/detrital-zircon.stories.ts

@@ -33,6 +33,7 @@ function DetritalZirconColumn(props) {
 }
 
 export default {
+  tags: ["!autodocs"],
   title: "Column views/Facets/Detrital zircons",
   component: DetritalZirconColumn,
 };

packages/column-views/stories/facets/pbdb.stories.ts

@@ -31,15 +31,40 @@ function PBDBFossilsDemoColumn(props) {
 export default {
   title: "Column views/Facets/Fossil occurrences",
   component: PBDBFossilsDemoColumn,
-  autodocs: false,
+  tags: ["!autodocs"],
+  argTypes: {
+    axisType: {
+      options: ["age", "depth"],
+      control: { type: "radio" },
+    },
+  },
 } as Meta;
 
 export const eODPColumn: Story = {
   args: {
     id: 5576,
     inProcess: true,
     axisType: ColumnAxisType.DEPTH,
+    pixelScale: 5,
+    allowUnitSelection: true,
+    showUnitPopover: true,
+    collapseSmallUnconformities: true,
+    keyboardNavigation: true,
+  },
+};
+
+export const eODPColumnMoreComplete: Story = {
+  args: {
+    id: 5278,
+    inProcess: true,
+    axisType: ColumnAxisType.DEPTH,
+    pixelScale: 5,
+    allowUnitSelection: true,
+    showUnitPopover: true,
+    collapseSmallUnconformities: true,
+    keyboardNavigation: true,
   },
+  title: "eODP Column (more complete)",
 };
 
 export const eODPColumnAgeFramework: Story = {
@@ -49,6 +74,7 @@ export const eODPColumnAgeFramework: Story = {
     collapseSmallUnconformities: false,
     mergeSections: MergeSectionsMode.OVERLAPPING,
   },
+  title: "eODP Column (with age model applied)",
 };
 
 export const ParadoxBasin = {
@@ -70,5 +96,8 @@ export const BighornBasinColored = {
     allowUnitSelection: true,
     unitComponent: ColoredUnitComponent,
     spectraColor: "lightgreen",
+    showUnitPopover: true,
+    collapseSmallUnconformities: true,
+    keyboardNavigation: true,
   },
 };