Merge branch 'unit-details'

* unit-details:
  Refactor column views
  Fixed unit selection
  Added popover component
  Starting point for pattern recoloring and reweighting
  Change styling system for patterns
  Pretty decent unit details view
  Improved unit details
  Better unit details panel

Author: davenquinn

.storybook/main.ts

@@ -7,6 +7,12 @@ const config: StorybookConfig = {
     "../packages/**/*.mdx",
     "../packages/**/*.stories.@(mdx|js|jsx|ts|tsx)",
   ],
+  staticDirs: [
+    {
+      from: "../deps/geologic-patterns/assets/svg",
+      to: "/patterns",
+    },
+  ],
   addons: [
     getAbsolutePath("@storybook/addon-links"),
     getAbsolutePath("@storybook/addon-essentials"),

package.json

@@ -19,7 +19,8 @@
     "@macrostrat/timescale": "./packages/timescale/src",
     "@macrostrat/mapbox-styles": "./packages/mapbox-styles/src",
     "@macrostrat/ui-components": "./packages/ui-components/src",
-    "@macrostrat/column-components": "./packages/column-components/src"
+    "@macrostrat/column-components": "./packages/column-components/src",
+    "@macrostrat/chronostrat-utils": "./packages/chronostrat-utils/src"
   },
   "devDependencies": {
     "@babel/core": "^7.18.6",
@@ -77,7 +78,8 @@
     "map-interface",
     "style-system",
     "vite-plugin-hyperstyles",
-    "color-utils"
+    "color-utils",
+    "chronostrat-utils"
   ],
   "workspaces": [
     "packages/*",

packages/chronostrat-utils/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@macrostrat/chronostrat-utils",
+  "version": "1.0.0",
+  "description": "Chronostratigraphy utility functions",
+  "type": "module",
+  "main": "dist/main.js",
+  "types": "dist/types.d.ts",
+  "source": "src/index.ts",
+  "scripts": {
+    "build": "parcel build"
+  },
+  "author": "Daven Quinn",
+  "license": "ISC",
+  "exports": {
+    ".": {
+      "typescript": "./src",
+      "import": "./dist/main.js",
+      "require": "./dist/main.js",
+      "types:": "./dist/types.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/UW-Macrostrat/web-components.git",
+    "directory": "packages/chronostrat-utils"
+  }
+}

packages/chronostrat-utils/src/index.ts

@@ -0,0 +1,68 @@
+export type AgeRange = [number, number];
+
+enum MergeMode {
+  Inner,
+  Outer,
+}
+
+export function mergeAgeRanges(
+  ranges: AgeRange[],
+  mergeMode: MergeMode = MergeMode.Outer
+): AgeRange {
+  /** Merge a set of age ranges to get the inner or outer bounds */
+  let min = Infinity;
+  let max = 0;
+  // Negative ages are not handled
+
+  if (mergeMode === MergeMode.Inner) {
+    min = Math.min(...ranges.map((d) => d[0]));
+    max = Math.max(...ranges.map((d) => d[1]));
+  } else {
+    min = Math.max(...ranges.map((d) => d[0]));
+    max = Math.min(...ranges.map((d) => d[1]));
+  }
+
+  // Age ranges should start with the oldest (largest) age
+  if (min < max) {
+    return [max, min];
+  }
+  return [min, max];
+}
+
+enum AgeRangeRelationship {
+  Disjoint,
+  Contains,
+  Contained,
+  Identical,
+}
+
+function convertToForwardOrdinal(a: AgeRange): AgeRange {
+  /** Age ranges are naturally expressed as [b_age, t_age] where
+   * b_age is the older age and t_age is the younger age. This function
+   * converts the age range to [min, max] where min is the oldest age,
+   * expressed as negative numbers. This assists with intuitive ordering
+   * in certain cases.
+   */
+  return [-a[0], -a[1]];
+}
+
+export function compareAgeRanges(
+  a: AgeRange,
+  b: AgeRange
+): AgeRangeRelationship {
+  const a1 = convertToForwardOrdinal(a);
+  const b1 = convertToForwardOrdinal(b);
+  /** Compare two age ranges */
+  if (a1[0] > b1[1] || a1[1] < b1[0]) {
+    return AgeRangeRelationship.Disjoint;
+  }
+  if (a1[0] === b1[0] && a1[1] === b1[1]) {
+    return AgeRangeRelationship.Identical;
+  }
+  if (a1[0] <= b1[0] && a1[1] >= b1[1]) {
+    return AgeRangeRelationship.Contains;
+  }
+  if (a1[0] >= b1[0] && a1[1] <= b1[1]) {
+    return AgeRangeRelationship.Contained;
+  }
+}

packages/column-components/src/lithology/column-patterns.ts

@@ -84,6 +84,12 @@ function PatternDefsProvider(props: LithProviderProps) {
   );
 }
 
+export function usePatternResolver() {
+  const ctx = useContext(PatternDefsContext);
+  console.log(ctx);
+  return ctx?.resolvePattern;
+}
+
 function useGeologicPattern(patternID: string, fallback: string = "#aaa") {
   const ctx1 = useContext(GeologicPatternContext);
   const ctx = useContext(PatternDefsContext);

packages/column-components/stories/base-section.ts

@@ -21,18 +21,9 @@ import styles from "./measured-section.stories.module.sass";
 
 const h = hyper.styled(styles);
 
-function patternPath(id) {
-  return `../../../deps/geologic-patterns/assets/svg/${id}.svg`;
-}
-
-const patterns = import.meta.glob(
-  "../../../deps/geologic-patterns/assets/svg/*.svg",
-  { eager: true, query: "url" }
-);
-
-const resolvePattern = (id) => {
-  const _id = patternPath(id);
-  return patterns[_id]?.default;
+// Patterns are included as static files in the storybook main.ts
+export const resolvePattern = (id) => {
+  return `/patterns/${id}.svg`;
 };
 
 export function PatternProvider({ children }) {

packages/column-views/package.json

@@ -10,7 +10,8 @@
     "@macrostrat/map-components": "workspace:*",
     "@macrostrat/timescale": "workspace:*",
     "d3-array": "^3.2.1",
-    "d3-geo-voronoi": "^2.0.1"
+    "d3-geo-voronoi": "^2.0.1",
+    "zustand": "^5.0.3"
   },
   "peerDependencies": {
     "@blueprintjs/core": "^3.43.0 || ^4.3.0 || ^5.0.0",

packages/column-views/src/column.module.sass

@@ -6,6 +6,7 @@
   .column-container
     --background-color: var(--column-background-color, #000)
     --stroke-color: var(--column-stroke-color, #fff)
+    color-scheme: dark
 
 .column-container :global
   .column

packages/column-views/src/helpers.ts

@@ -1,4 +1,6 @@
 import { BaseUnit, UnitLong } from "@macrostrat/api-types";
+import { IUnit } from "./units";
+import { group } from "d3-array";
 
 // Time resolution is 100 years
 const dt = 0.0001;
@@ -13,7 +15,7 @@ interface ExtUnit extends UnitLong {
   column?: number;
 }
 
-function extendDivision(
+export function extendDivision(
   unit: UnitLong,
   i: number,
   divisions: UnitLong[]
@@ -39,7 +41,7 @@ function extendDivision(
   };
 }
 
-function preprocessUnits(units: UnitLong[]) {
+export function preprocessUnits(units: UnitLong[]) {
   let divisions = units.map(extendDivision);
   for (let d of divisions) {
     const overlappingUnits = divisions.filter((u) =>
@@ -74,4 +76,55 @@ function preprocessUnits(units: UnitLong[]) {
   return divisions;
 }
 
-export { extendDivision, preprocessUnits };
+export interface SectionInfo {
+  section_id: number | number[];
+  t_age: number;
+  b_age: number;
+  units: IUnit[];
+}
+
+export function groupUnitsIntoSections(units: IUnit[]): SectionInfo[] {
+  let groups = Array.from(group(units, (d) => d.section_id));
+  return groups.map(([section_id, units]) => {
+    const t_age = Math.min(...units.map((d) => d.t_age));
+    const b_age = Math.max(...units.map((d) => d.b_age));
+    return { section_id, t_age, b_age, units };
+  });
+}
+
+export function _mergeOverlappingSections(
+  sections: SectionInfo[]
+): SectionInfo[] {
+  /** Columns can have sections that overlap in time. Here, we merge overlapping
+   * sections into a single section to correctly render gap-bound packages.
+   */
+  const [firstSection, ...rest] = sections;
+  const newSections = [firstSection];
+  for (const section of rest) {
+    const lastSection = newSections[newSections.length - 1];
+    if (
+      lastSection.b_age < section.t_age ||
+      lastSection.t_age > section.b_age
+    ) {
+      // No overlap, add the section as normal
+      newSections.push(section);
+      continue;
+    }
+    // Overlap, merge the sections
+    lastSection.section_id = [
+      ...ensureArray(lastSection.section_id),
+      ...ensureArray(section.section_id),
+    ];
+    lastSection.units.push(...section.units);
+    lastSection.b_age = Math.max(lastSection.b_age, section.b_age);
+    lastSection.t_age = Math.min(lastSection.t_age, section.t_age);
+  }
+  return newSections;
+}
+
+export function ensureArray<T>(x: T | T[]): T[] {
+  if (Array.isArray(x)) {
+    return x;
+  }
+  return [x];
+}