Merge branch 'main' of https://github.com/UW-Macrostrat/web-components

* 'main' of https://github.com/UW-Macrostrat/web-components:
  Apply formatting changes
  Update packaging
  Updated static map utils
  Updated timescale
  Static map mostly works
  Basic map utilities
  Basic static map generation module
  Updates to flooding-surfaces component
  Updated styles
  Updated groups
  Allow column heights to be rewritten
  Fixed frame component
  Size aware label fixes
  Removed symbol column from library

Author: davenquinn

.gitignore

@@ -37,3 +37,4 @@ packages/*/dist
 
 .idea/workspace.xml
 .idea/tasks.xml
+.npmrc

.storybook/preview.ts

@@ -62,11 +62,13 @@ export const decorators = [
 
 export const tags = ["autodocs"];
 
+export function resolvePattern(id: string) {
+  return `https://dev.macrostrat.org/assets/geologic-patterns/svg/${id}.svg`;
+}
+
 function PatternProvider({ children }) {
   return h(GeologicPatternProvider, {
-    resolvePattern(id: string) {
-      return `https://dev.macrostrat.org/assets/geologic-patterns/svg/${id}.svg`;
-    },
+    resolvePattern,
     children,
   });
 }

package.json

@@ -44,6 +44,7 @@
     "date-fns": "^4.1.0",
     "glob": "^11.0.1",
     "lorem-ipsum": "^2.0.8",
+    "maplibregl-mapbox-request-transformer": "^0.0.3",
     "marked": "^11.0",
     "marked-terminal": "^7.1.0",
     "node-fetch": "^3.2.9",

packages/column-components/CHANGELOG.md

@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file. The format
 is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this
 project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.3.0] - 2025-10-29
+
+- Switch to `@visx/axis` for axis rendering
+- Remove `SymbolColumn` component
+- Simplify many components
+- Improve surface generation
+
 ## [1.2.0] - 2025-06-25
 
 Major improvement and modernization for `Note` component for section-aligned

packages/column-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/column-components",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "React rendering primitives for stratigraphic columns",
   "keywords": [
     "geology",

packages/column-components/src/context/asset-path.ts

@@ -3,5 +3,4 @@ export * from "./layout";
 export * from "./facies";
 export * from "./settings";
 export * from "./lithology";
-export * from "./asset-path";
 export * from "./model-editor";

packages/column-components/src/context/index.ts

@@ -109,7 +109,7 @@ export class TriangleBars extends UUIDComponent<TriangleBarsProps> {
     zigZagLine(lineWidth, -lineWidth, 0, 16, 3);
     _.closePath();
 
-    return h("g.triangle-bars", {}, [
+    return h("g.triangle-bars", [
       h("defs", [
         createElement("clipPath", { id: this.UUID }, [
           h("path", { d: _.toString(), key: this.UUID + "-path" }),
@@ -128,7 +128,7 @@ export class TriangleBars extends UUIDComponent<TriangleBarsProps> {
     }
     const w = lineWidth / 2;
     const ol = offsetLeft + lineWidth * 2 + 5;
-    const __ = [];
+    const surfaces: SequenceStratSurface[] = [];
 
     for (i = 0; i < divisions.length; i++) {
       d = divisions[i];
@@ -141,31 +141,31 @@ export class TriangleBars extends UUIDComponent<TriangleBarsProps> {
       }
       const height = scale(d.bottom);
       if (surface_type === "mfs") {
-        __.push(["mfs", height]);
+        surfaces.push(["mfs", height]);
       }
       if (surface_type === "sb") {
-        if (__.length === 0) {
-          __.push(["sb", height]);
+        if (surfaces.length === 0) {
+          surfaces.push(["sb", height]);
           continue;
         }
-        const sz = __.length - 1;
-        if (__[sz][0] === "sb") {
-          __[sz][1] = height;
+        const sz = surfaces.length - 1;
+        if (surfaces[sz][0] === "sb") {
+          surfaces[sz][1] = height;
         } else {
-          __.push(["sb", height]);
+          surfaces.push(["sb", height]);
         }
       }
     }
 
-    if (!__.length) {
+    if (!surfaces.length) {
       return null;
     }
 
     const _ = path();
     let basalMFS = null;
     let sequenceBoundary = null;
-    for (i = 0; i < __.length; i++) {
-      const top = __[i];
+    for (i = 0; i < surfaces.length; i++) {
+      const top = surfaces[i];
       if (top[0] === "mfs" && basalMFS != null) {
         _.moveTo(0, basalMFS[1]);
         if (sequenceBoundary != null) {
@@ -199,3 +199,5 @@ export class TriangleBars extends UUIDComponent<TriangleBarsProps> {
     );
   }
 }
+
+type SequenceStratSurface = ["mfs" | "sb", number];

packages/column-components/src/flooding-surface.ts

@@ -6,11 +6,14 @@ import {
   useRef,
   ReactNode,
 } from "react";
-import hyper from "@macrostrat/hyper";
+import h from "@macrostrat/hyper";
 import { path } from "d3-path";
-import { ColumnLayoutContext, ColumnLayoutCtx } from "./context";
-import styles from "./frame.module.sass";
-const h = hyper.styled(styles);
+import {
+  ColumnLayoutContext,
+  ColumnLayoutCtx,
+  useColumnLayout,
+} from "./context";
+import { drawZigZagAtConstantHeight } from "./util";
 
 let sequence = 0; // Initialize a sequence counter
 function getUniqueIdentifier() {
@@ -72,16 +75,14 @@ function SimpleFrame(props: FrameProps) {
 
 interface GrainsizeFrameProps {
   id: string;
+  zigZagBottom?: boolean;
+  zigZagTop?: boolean;
 }
 
 function GrainsizeFrame(props: GrainsizeFrameProps) {
-  let { id: frameID } = props;
+  let { id: frameID, zigZagBottom = false, zigZagTop = false } = props;
 
-  const {
-    scale,
-    divisions,
-    grainsizeScale: gs,
-  } = useContext(ColumnLayoutContext);
+  const { scale, divisions, grainsizeScale: gs } = useColumnLayout();
   if (frameID.startsWith("#")) {
     frameID = frameID.slice(1);
   }
@@ -106,7 +107,7 @@ function GrainsizeFrame(props: GrainsizeFrameProps) {
     return scale(bottom);
   };
 
-  const filteredDivisions = divisions.filter(function (d) {
+  const filteredDivisions = Array.from(divisions).filter(function (d) {
     if (d.top <= bottomOfSection) {
       return false;
     }
@@ -116,28 +117,50 @@ function GrainsizeFrame(props: GrainsizeFrameProps) {
     return true;
   });
 
-  let _ = null;
+  let d = path();
   let currentGrainsize = "m";
-  let div: any = null;
-  for (div of Array.from(filteredDivisions)) {
-    if (_ == null) {
-      _ = path();
-      _.moveTo(0, bottomOf(div));
+  let i = 0;
+  for (const div of filteredDivisions) {
+    if (i === 0) {
+      // First division
+      // start the path at the bottom
+      const y = bottomOf(div);
+      d.moveTo(0, y);
     }
     if (div.grainsize != null) {
       currentGrainsize = div.grainsize;
     }
-    const x = gs(currentGrainsize);
-    _.lineTo(x, bottomOf(div));
-    _.lineTo(x, topOf(div));
+    const x1 = gs(currentGrainsize);
+    if (i === 0 && zigZagBottom) {
+      // Draw zig-zag at bottom
+      drawZigZagAtConstantHeight(d, 0, x1, bottomOf(div));
+    } else {
+      // Draw a normal line
+      d.lineTo(x1, bottomOf(div));
+    }
+
+    d.lineTo(x1, bottomOf(div));
+    d.lineTo(x1, topOf(div));
+
+    if (i === filteredDivisions.length - 1) {
+      // Last division
+      // Draw top
+      if (zigZagTop) {
+        drawZigZagAtConstantHeight(d, x1, 0, topOf(div));
+      } else {
+        d.lineTo(0, topOf(div));
+      }
+    }
+
+    i++;
   }
-  _.lineTo(0, topOf(div));
-  _.closePath();
+
+  d.closePath();
 
   return h("path", {
     id: frameID,
     key: frameID,
-    d: _.toString(),
+    d: d.toString(),
   });
 }
 
@@ -201,7 +224,7 @@ export function ClippingFrame(props: ClipToFrameProps) {
     transform = `translate(${left} ${shiftY})`;
   }
 
-  const frameClassName = "frame";
+  const frameClassName = "clip-frame column-clip-frame";
 
   let _frame: ReactNode = h(frame, { id: frameID, className: frameClassName });
   let defs = null;
@@ -217,8 +240,9 @@ export function ClippingFrame(props: ClipToFrameProps) {
 
   return h("g", { className, transform, onClick }, [
     defs,
-    _frame,
     h("g.inner", { clipPath }, children),
+    // Frame must go last
+    _frame,
   ]);
 }