Static map utils

.gitignore

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

.mise.toml

@@ -1,2 +1,2 @@
 [tools]
-node = "20"
+node = "22"

.storybook/main.ts

@@ -1,3 +1,4 @@
+// This file has been automatically migrated to valid ESM format by Storybook.
 import { createRequire } from "node:module";
 import { dirname, join } from "node:path";
 import type { StorybookConfig } from "@storybook/react-vite";
@@ -14,11 +15,11 @@ export default {
     "../packages/**/*.stories.@(mdx|js|jsx|ts|tsx)",
   ],
   addons: [
-    "@storybook/addon-docs",
-    "@storybook/addon-links",
-    "@vueless/storybook-dark-mode",
+    getAbsolutePath("@storybook/addon-docs"),
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@vueless/storybook-dark-mode"),
   ],
-  framework: "@storybook/react-vite",
+  framework: getAbsolutePath("@storybook/react-vite"),
   docs: {},
 } as StorybookConfig;
 

.storybook/preview.ts

@@ -23,7 +23,7 @@ export const parameters = {
     container: DocsContainer,
   },
   backgrounds: {
-    disable: true,
+    disabled: true,
   },
   darkMode: {
     // Override the default light theme
@@ -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,
   });
 }

.yarnrc.yml

@@ -28,8 +28,10 @@ packageExtensions:
     dependencies:
       supports-color: "*"
 
-pnpFallbackMode: all
+#pnpFallbackMode: all
+#
+#pnpMode: loose
 
-pnpMode: loose
+nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.8.1.cjs
+yarnPath: .yarn/releases/yarn-4.10.3.cjs

package.json

@@ -32,10 +32,10 @@
     "@parcel/config-default": "^2.16.0",
     "@parcel/transformer-sass": "^2.16.0",
     "@parcel/transformer-typescript-types": "^2.16.0",
-    "@storybook/addon-docs": "9.0.12",
-    "@storybook/addon-links": "9.0.12",
-    "@storybook/builder-vite": "9.0.12",
-    "@storybook/react-vite": "9.0.12",
+    "@storybook/addon-docs": "10.0.0",
+    "@storybook/addon-links": "10.0.0",
+    "@storybook/builder-vite": "10.0.0",
+    "@storybook/react-vite": "10.0.0",
     "@types/d3-geo": "^3.1.0",
     "@types/geojson": "^7946.0.16",
     "@types/react": "^18.3.12",
@@ -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",
@@ -52,7 +53,7 @@
     "react": "^19",
     "react-dom": "^19",
     "sass-embedded": "^1.83.0",
-    "storybook": "9.0.12",
+    "storybook": "10.0.0",
     "tsx": "^4.19.1",
     "typescript": "^5.8.3",
     "underscore": "^1.12.0",
@@ -69,7 +70,7 @@
     "toolchain/*",
     "examples/*"
   ],
-  "packageManager": "yarn@4.8.1",
+  "packageManager": "yarn@4.10.3",
   "devDependencies": {
     "@parcel/packager-ts": "^2.16.0",
     "@parcel/transformer-stylus": "^2.16.0",

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/index.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/flooding-surface.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/frame.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,
   ]);
 }
 

packages/column-components/src/index.ts

@@ -9,7 +9,6 @@ export * from "./photos";
 export * from "./axis";
 export * from "./lithology";
 export * from "./flooding-surface";
-export * from "./symbol-column";
 export * from "./edit-overlay";
 export * from "./editor";
 export * from "./grainsize";