Correlation chart

package.json

@@ -37,6 +37,7 @@
     "@macrostrat/storybook": "workspace:*",
     "@mdx-js/rollup": "^2.3.0",
     "@types/esprima": "^4",
+    "@types/underscore": "^1",
     "@typescript-eslint/eslint-plugin": "^6.3.0",
     "@typescript-eslint/parser": "^6.3.0",
     "@yarnpkg/sdks": "^3.1.0",
@@ -62,6 +63,7 @@
     "@macrostrat-web/security": "workspace:*",
     "@macrostrat-web/settings": "workspace:*",
     "@macrostrat-web/sift": "workspace:*",
+    "@macrostrat-web/utility-functions": "workspace:*",
     "@macrostrat/api-utils": "workspace:*",
     "@macrostrat/api-views": "workspace:*",
     "@macrostrat/auth-components": "workspace:*",
@@ -85,7 +87,10 @@
     "@turf/bbox": "^6.5.0",
     "@turf/boolean-contains": "^6.5.0",
     "@turf/buffer": "^6.5.0",
-    "@turf/centroid": "^6.5.0",
+    "@turf/centroid": "^7.0.0",
+    "@turf/distance": "^7.0.0",
+    "@turf/line-intersect": "^7.0.0",
+    "@turf/nearest-point-on-line": "^7.0.0",
     "@types/compression": "^1.7.2",
     "@types/express": "^4.17.17",
     "@types/geojson": "^7946.0.10",
@@ -135,6 +140,7 @@
     "topojson-client": "^3.0.0",
     "transition-hook": "^1.5.2",
     "tsx": "^4.11.2",
+    "underscore": "^1.13.6",
     "use-debounce": "^9.0.4",
     "use-react-router-breadcrumbs": "^3.2.1",
     "use-resize-observer": "^9.1.0",

packages/utility-functions/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@macrostrat-web/utility-functions",
+  "version": "1.0.0",
+  "main": "src/index.ts"
+}

packages/utility-functions/src/chronostratigraphy.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/utility-functions/src/index.ts

@@ -0,0 +1 @@
+export * from "./chronostratigraphy";

src/_utils/map-layers.ts

@@ -0,0 +1,62 @@
+/** Functions to apply specific layers to map UIs */
+
+export function buildCrossSectionLayers(): mapboxgl.Layer[] {
+  // Get CSS colors from settings
+  const ruleColor = getComputedStyle(document.body).getPropertyValue(
+    "--panel-background-color"
+  );
+
+  const centerColor = getComputedStyle(document.body).getPropertyValue(
+    "--panel-rule-color"
+  );
+
+  const crossSectionPointPaint = {
+    "circle-radius": {
+      stops: [
+        [0, 3],
+        [12, 5]
+      ]
+    },
+    "circle-color": centerColor,
+    "circle-stroke-width": {
+      stops: [
+        [0, 2],
+        [12, 4]
+      ]
+    },
+    "circle-stroke-color": ruleColor
+  };
+
+  return [
+    {
+      id: "crossSectionLine",
+      type: "line",
+      source: "crossSectionLine",
+      paint: {
+        "line-width": {
+          stops: [
+            [0, 1],
+            [12, 3]
+          ]
+        },
+        "line-color": ruleColor,
+        "line-opacity": 1
+      }
+    },
+    {
+      id: "crossSectionEndpoint",
+      type: "circle",
+      source: "crossSectionEndpoints",
+      paint: crossSectionPointPaint
+    },
+    {
+      id: "elevationMarker",
+      type: "circle",
+      source: "elevationMarker",
+      paint: {
+        ...crossSectionPointPaint,
+        "circle-color": "#4bc0c0"
+      }
+    }
+  ];
+}

src/components/index.ts

@@ -5,3 +5,4 @@ export * from "./tags";
 export * from "./map-info";
 export * from "./lithology";
 export * from "./buttons";
+export { buildCrossSectionLayers } from "~/_utils/map-layers";