@macrostrat/column-views 3.2.2 → 3.3.0

package/dist/maps/layers/columns.cjs

@@ -0,0 +1,161 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const mapboxReact = require("@macrostrat/mapbox-react");
+const mapboxUtils = require("@macrostrat/mapbox-utils");
+const colorUtils = require("@macrostrat/color-utils");
+function BaseColumnsLayer({
+  enabled = true,
+  columns,
+  ...rest
+}) {
+  mapboxReact.useOverlayStyle(() => enabled ? buildColumnsStyle(rest) : null, [enabled]);
+  mapboxReact.useMapStyleOperator(
+    (map) => {
+      if (columns == null) {
+        return;
+      }
+      mapboxUtils.setGeoJSON(map, "columns", promoteToFeatureCollection(columns));
+    },
+    [columns, enabled]
+  );
+  return null;
+}
+function promoteToFeatureCollection(data) {
+  if (data == null) return null;
+  if ("type" in data && data.type == "Feature") {
+    return {
+      type: "FeatureCollection",
+      features: [data]
+    };
+  }
+  if ("type" in data && data.type == "FeatureCollection" && "features" in data) {
+    return data;
+  }
+  return {
+    type: "FeatureCollection",
+    features: data
+  };
+}
+function buildColumnsStyle(opts = {}) {
+  const { color } = opts;
+  const columnBaseColor = color ?? colorUtils.getCSSVariable("--text-subtle-color", "black");
+  let columnColor = columnBaseColor;
+  const columnSelectedColor = opts.selectedColor ?? colorUtils.getCSSVariable("--selection-color", "purple");
+  const lineColor = opts.lineColor ?? columnBaseColor;
+  const isHovered = ["boolean", ["feature-state", "hover"], false];
+  if (typeof columnColor === "string") {
+    columnColor = [
+      "coalesce",
+      ["feature-state", "color"],
+      ["get", "color"],
+      columnColor
+    ];
+  }
+  const fillOpacity = opts.opacity ?? 0.1;
+  const lineOpacity = opts.lineOpacity ?? 0.5;
+  const lineWidth = opts.lineWidth ?? 2;
+  const circleRadius = opts.circleRadius ?? 4;
+  return {
+    sources: {
+      columns: mapboxUtils.buildGeoJSONSource()
+    },
+    version: 8,
+    layers: [
+      {
+        id: "columns-fill",
+        type: "fill",
+        source: "columns",
+        paint: {
+          "fill-color": columnColor,
+          "fill-opacity": fillOpacity
+        }
+      },
+      {
+        id: "columns-points",
+        type: "circle",
+        source: "columns",
+        paint: {
+          "circle-radius": circleRadius,
+          "circle-color": columnColor,
+          "circle-opacity": fillOpacity
+        },
+        filter: ["==", "$type", "Point"]
+      },
+      {
+        id: "columns-line",
+        type: "line",
+        source: "columns",
+        paint: {
+          "line-color": ["case", isHovered, columnSelectedColor, lineColor],
+          "line-width": lineWidth,
+          "line-opacity": ["case", isHovered, 1, lineOpacity]
+        }
+      }
+    ]
+  };
+}
+const selectedColumnSourceID = "selectedColumn";
+function SelectedColumnOverlay({
+  selectedColumn,
+  ...styleOpts
+}) {
+  mapboxReact.useOverlayStyle(() => buildSelectedColumnStyle(styleOpts), []);
+  mapboxReact.useMapStyleOperator(
+    (map) => {
+      mapboxUtils.setGeoJSON(
+        map,
+        selectedColumnSourceID,
+        promoteToFeatureCollection(selectedColumn)
+      );
+    },
+    [selectedColumn]
+  );
+  return null;
+}
+function buildSelectedColumnStyle(opts = {}) {
+  const columnSelectedColor = opts.color ?? colorUtils.getCSSVariable("--selection-color", "purple");
+  return {
+    sources: {
+      selectedColumn: mapboxUtils.buildGeoJSONSource()
+    },
+    version: 8,
+    layers: [
+      {
+        id: "selected-column-highlight",
+        type: "fill",
+        source: selectedColumnSourceID,
+        paint: {
+          "fill-color": columnSelectedColor,
+          "fill-opacity": 0.5
+        },
+        filter: ["==", "$type", "Polygon"]
+      },
+      {
+        id: "selected-column-edge",
+        type: "line",
+        source: selectedColumnSourceID,
+        paint: {
+          "line-color": columnSelectedColor,
+          "line-width": 2,
+          "line-opacity": 1
+        },
+        filter: ["==", "$type", "Polygon"]
+      },
+      {
+        id: "selected-column-point",
+        type: "circle",
+        source: selectedColumnSourceID,
+        paint: {
+          "circle-radius": 6,
+          "circle-color": columnSelectedColor,
+          "circle-opacity": 1
+        },
+        filter: ["==", "$type", "Point"]
+      }
+    ]
+  };
+}
+exports.BaseColumnsLayer = BaseColumnsLayer;
+exports.SelectedColumnOverlay = SelectedColumnOverlay;
+exports.buildColumnsStyle = buildColumnsStyle;
+//# sourceMappingURL=columns.cjs.map

package/dist/maps/layers/columns.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"columns.cjs","sources":["../../../src/maps/layers/columns.ts"],"sourcesContent":["import { useMapStyleOperator, useOverlayStyle } from \"@macrostrat/mapbox-react\";\nimport { setGeoJSON } from \"@macrostrat/mapbox-utils\";\nimport GeoJSON, { FeatureCollection } from \"geojson\";\nimport { GeoJSONFeature } from \"mapbox-gl\";\nimport { getCSSVariable } from \"@macrostrat/color-utils\";\nimport { buildGeoJSONSource } from \"@macrostrat/mapbox-utils\";\nimport { StyleFragment } from \"@macrostrat/mapbox-react\";\n\nexport interface ColumnsStyleOptions {\n  color?: string | any[];\n  selectedColor?: string | any[];\n  opacity?: number | any[];\n  circleRadius?: number | any[];\n  lineOpacity?: number | any[];\n  lineWidth?: number | any[];\n  lineColor?: string | any[];\n}\n\ninterface ColumnLayerOptions extends ColumnsStyleOptions {\n  enabled: boolean;\n  columns: FeatureCollection | GeoJSONFeature[];\n}\n\nexport function BaseColumnsLayer({\n  enabled = true,\n  columns,\n  ...rest\n}: ColumnLayerOptions) {\n  useOverlayStyle(() => (enabled ? buildColumnsStyle(rest) : null), [enabled]);\n\n  useMapStyleOperator(\n    (map) => {\n      if (columns == null) {\n        return;\n      }\n\n      setGeoJSON(map, \"columns\", promoteToFeatureCollection(columns));\n    },\n    [columns, enabled],\n  );\n  return null;\n}\n\nfunction promoteToFeatureCollection(\n  data: FeatureCollection | GeoJSONFeature | GeoJSONFeature[] | null,\n): FeatureCollection | null {\n  if (data == null) return null;\n  if (\"type\" in data && data.type == \"Feature\") {\n    return {\n      type: \"FeatureCollection\",\n      features: [data],\n    };\n  }\n  if (\n    \"type\" in data &&\n    data.type == \"FeatureCollection\" &&\n    \"features\" in data\n  ) {\n    return data;\n  }\n  return {\n    type: \"FeatureCollection\",\n    features: data,\n  };\n}\n\nexport function buildColumnsStyle(\n  opts: ColumnsStyleOptions = {},\n): StyleFragment {\n  const { color } = opts;\n  const columnBaseColor =\n    color ?? getCSSVariable(\"--text-subtle-color\", \"black\");\n  let columnColor: any = columnBaseColor;\n  const columnSelectedColor =\n    opts.selectedColor ?? getCSSVariable(\"--selection-color\", \"purple\");\n\n  const lineColor = opts.lineColor ?? columnBaseColor;\n  const isHovered = [\"boolean\", [\"feature-state\", \"hover\"], false];\n  // If color is in the feature state or geojson properties, use that as second choice\n  if (typeof columnColor === \"string\") {\n    columnColor = [\n      \"coalesce\",\n      [\"feature-state\", \"color\"],\n      [\"get\", \"color\"],\n      columnColor,\n    ];\n  }\n\n  const fillOpacity = opts.opacity ?? 0.1;\n\n  const lineOpacity = opts.lineOpacity ?? 0.5;\n  const lineWidth = opts.lineWidth ?? 2;\n\n  const circleRadius = opts.circleRadius ?? 4;\n\n  return {\n    sources: {\n      columns: buildGeoJSONSource(),\n    },\n    version: 8,\n    layers: [\n      {\n        id: \"columns-fill\",\n        type: \"fill\",\n        source: \"columns\",\n        paint: {\n          \"fill-color\": columnColor,\n          \"fill-opacity\": fillOpacity,\n        },\n      },\n      {\n        id: \"columns-points\",\n        type: \"circle\",\n        source: \"columns\",\n        paint: {\n          \"circle-radius\": circleRadius,\n          \"circle-color\": columnColor,\n          \"circle-opacity\": fillOpacity,\n        },\n        filter: [\"==\", \"$type\", \"Point\"],\n      },\n      {\n        id: \"columns-line\",\n        type: \"line\",\n        source: \"columns\",\n        paint: {\n          \"line-color\": [\"case\", isHovered, columnSelectedColor, lineColor],\n          \"line-width\": lineWidth,\n          \"line-opacity\": [\"case\", isHovered, 1.0, lineOpacity],\n        },\n      },\n    ],\n  };\n}\n\nexport type ColumnFeature = GeoJSON.Feature & { id: number };\n\nconst selectedColumnSourceID = \"selectedColumn\";\n\nexport function SelectedColumnOverlay({\n  selectedColumn,\n  ...styleOpts\n}: { selectedColumn: ColumnFeature | null } & SelectedColumnStyleOpts) {\n  useOverlayStyle(() => buildSelectedColumnStyle(styleOpts), []);\n\n  useMapStyleOperator(\n    (map) => {\n      setGeoJSON(\n        map,\n        selectedColumnSourceID,\n        promoteToFeatureCollection(selectedColumn as GeoJSONFeature | null),\n      );\n    },\n    [selectedColumn],\n  );\n\n  return null;\n}\n\ninterface SelectedColumnStyleOpts {\n  color?: string | any[];\n}\n\nfunction buildSelectedColumnStyle(\n  opts: SelectedColumnStyleOpts = {},\n): StyleFragment {\n  const columnSelectedColor: any =\n    opts.color ?? getCSSVariable(\"--selection-color\", \"purple\");\n\n  return {\n    sources: {\n      selectedColumn: buildGeoJSONSource(),\n    },\n    version: 8,\n    layers: [\n      {\n        id: \"selected-column-highlight\",\n        type: \"fill\",\n        source: selectedColumnSourceID,\n        paint: {\n          \"fill-color\": columnSelectedColor,\n          \"fill-opacity\": 0.5,\n        },\n        filter: [\"==\", \"$type\", \"Polygon\"],\n      },\n      {\n        id: \"selected-column-edge\",\n        type: \"line\",\n        source: selectedColumnSourceID,\n        paint: {\n          \"line-color\": columnSelectedColor,\n          \"line-width\": 2,\n          \"line-opacity\": 1.0,\n        },\n        filter: [\"==\", \"$type\", \"Polygon\"],\n      },\n      {\n        id: \"selected-column-point\",\n        type: \"circle\",\n        source: selectedColumnSourceID,\n        paint: {\n          \"circle-radius\": 6,\n          \"circle-color\": columnSelectedColor,\n          \"circle-opacity\": 1.0,\n        },\n        filter: [\"==\", \"$type\", \"Point\"],\n      },\n    ],\n  };\n}\n"],"names":["useOverlayStyle","useMapStyleOperator","setGeoJSON","getCSSVariable","buildGeoJSONSource"],"mappings":"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"}

package/dist/maps/layers/columns.d.ts

@@ -0,0 +1,28 @@
+import { default as GeoJSON, FeatureCollection } from 'geojson';
+import { GeoJSONFeature } from 'mapbox-gl';
+import { StyleFragment } from '@macrostrat/mapbox-react';
+export interface ColumnsStyleOptions {
+    color?: string | any[];
+    selectedColor?: string | any[];
+    opacity?: number | any[];
+    circleRadius?: number | any[];
+    lineOpacity?: number | any[];
+    lineWidth?: number | any[];
+    lineColor?: string | any[];
+}
+interface ColumnLayerOptions extends ColumnsStyleOptions {
+    enabled: boolean;
+    columns: FeatureCollection | GeoJSONFeature[];
+}
+export declare function BaseColumnsLayer({ enabled, columns, ...rest }: ColumnLayerOptions): any;
+export declare function buildColumnsStyle(opts?: ColumnsStyleOptions): StyleFragment;
+export type ColumnFeature = GeoJSON.Feature & {
+    id: number;
+};
+export declare function SelectedColumnOverlay({ selectedColumn, ...styleOpts }: {
+    selectedColumn: ColumnFeature | null;
+} & SelectedColumnStyleOpts): any;
+interface SelectedColumnStyleOpts {
+    color?: string | any[];
+}
+export {};

package/dist/maps/layers/columns.js

@@ -0,0 +1,161 @@
+import { useOverlayStyle, useMapStyleOperator } from "@macrostrat/mapbox-react";
+import { setGeoJSON, buildGeoJSONSource } from "@macrostrat/mapbox-utils";
+import { getCSSVariable } from "@macrostrat/color-utils";
+function BaseColumnsLayer({
+  enabled = true,
+  columns,
+  ...rest
+}) {
+  useOverlayStyle(() => enabled ? buildColumnsStyle(rest) : null, [enabled]);
+  useMapStyleOperator(
+    (map) => {
+      if (columns == null) {
+        return;
+      }
+      setGeoJSON(map, "columns", promoteToFeatureCollection(columns));
+    },
+    [columns, enabled]
+  );
+  return null;
+}
+function promoteToFeatureCollection(data) {
+  if (data == null) return null;
+  if ("type" in data && data.type == "Feature") {
+    return {
+      type: "FeatureCollection",
+      features: [data]
+    };
+  }
+  if ("type" in data && data.type == "FeatureCollection" && "features" in data) {
+    return data;
+  }
+  return {
+    type: "FeatureCollection",
+    features: data
+  };
+}
+function buildColumnsStyle(opts = {}) {
+  const { color } = opts;
+  const columnBaseColor = color ?? getCSSVariable("--text-subtle-color", "black");
+  let columnColor = columnBaseColor;
+  const columnSelectedColor = opts.selectedColor ?? getCSSVariable("--selection-color", "purple");
+  const lineColor = opts.lineColor ?? columnBaseColor;
+  const isHovered = ["boolean", ["feature-state", "hover"], false];
+  if (typeof columnColor === "string") {
+    columnColor = [
+      "coalesce",
+      ["feature-state", "color"],
+      ["get", "color"],
+      columnColor
+    ];
+  }
+  const fillOpacity = opts.opacity ?? 0.1;
+  const lineOpacity = opts.lineOpacity ?? 0.5;
+  const lineWidth = opts.lineWidth ?? 2;
+  const circleRadius = opts.circleRadius ?? 4;
+  return {
+    sources: {
+      columns: buildGeoJSONSource()
+    },
+    version: 8,
+    layers: [
+      {
+        id: "columns-fill",
+        type: "fill",
+        source: "columns",
+        paint: {
+          "fill-color": columnColor,
+          "fill-opacity": fillOpacity
+        }
+      },
+      {
+        id: "columns-points",
+        type: "circle",
+        source: "columns",
+        paint: {
+          "circle-radius": circleRadius,
+          "circle-color": columnColor,
+          "circle-opacity": fillOpacity
+        },
+        filter: ["==", "$type", "Point"]
+      },
+      {
+        id: "columns-line",
+        type: "line",
+        source: "columns",
+        paint: {
+          "line-color": ["case", isHovered, columnSelectedColor, lineColor],
+          "line-width": lineWidth,
+          "line-opacity": ["case", isHovered, 1, lineOpacity]
+        }
+      }
+    ]
+  };
+}
+const selectedColumnSourceID = "selectedColumn";
+function SelectedColumnOverlay({
+  selectedColumn,
+  ...styleOpts
+}) {
+  useOverlayStyle(() => buildSelectedColumnStyle(styleOpts), []);
+  useMapStyleOperator(
+    (map) => {
+      setGeoJSON(
+        map,
+        selectedColumnSourceID,
+        promoteToFeatureCollection(selectedColumn)
+      );
+    },
+    [selectedColumn]
+  );
+  return null;
+}
+function buildSelectedColumnStyle(opts = {}) {
+  const columnSelectedColor = opts.color ?? getCSSVariable("--selection-color", "purple");
+  return {
+    sources: {
+      selectedColumn: buildGeoJSONSource()
+    },
+    version: 8,
+    layers: [
+      {
+        id: "selected-column-highlight",
+        type: "fill",
+        source: selectedColumnSourceID,
+        paint: {
+          "fill-color": columnSelectedColor,
+          "fill-opacity": 0.5
+        },
+        filter: ["==", "$type", "Polygon"]
+      },
+      {
+        id: "selected-column-edge",
+        type: "line",
+        source: selectedColumnSourceID,
+        paint: {
+          "line-color": columnSelectedColor,
+          "line-width": 2,
+          "line-opacity": 1
+        },
+        filter: ["==", "$type", "Polygon"]
+      },
+      {
+        id: "selected-column-point",
+        type: "circle",
+        source: selectedColumnSourceID,
+        paint: {
+          "circle-radius": 6,
+          "circle-color": columnSelectedColor,
+          "circle-opacity": 1
+        },
+        filter: ["==", "$type", "Point"]
+      }
+    ]
+  };
+}
+export {
+  BaseColumnsLayer,
+  SelectedColumnOverlay,
+  buildColumnsStyle
+};
+//# sourceMappingURL=columns.js.map

package/dist/maps/layers/columns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"columns.js","sources":["../../../src/maps/layers/columns.ts"],"sourcesContent":["import { useMapStyleOperator, useOverlayStyle } from \"@macrostrat/mapbox-react\";\nimport { setGeoJSON } from \"@macrostrat/mapbox-utils\";\nimport GeoJSON, { FeatureCollection } from \"geojson\";\nimport { GeoJSONFeature } from \"mapbox-gl\";\nimport { getCSSVariable } from \"@macrostrat/color-utils\";\nimport { buildGeoJSONSource } from \"@macrostrat/mapbox-utils\";\nimport { StyleFragment } from \"@macrostrat/mapbox-react\";\n\nexport interface ColumnsStyleOptions {\n  color?: string | any[];\n  selectedColor?: string | any[];\n  opacity?: number | any[];\n  circleRadius?: number | any[];\n  lineOpacity?: number | any[];\n  lineWidth?: number | any[];\n  lineColor?: string | any[];\n}\n\ninterface ColumnLayerOptions extends ColumnsStyleOptions {\n  enabled: boolean;\n  columns: FeatureCollection | GeoJSONFeature[];\n}\n\nexport function BaseColumnsLayer({\n  enabled = true,\n  columns,\n  ...rest\n}: ColumnLayerOptions) {\n  useOverlayStyle(() => (enabled ? buildColumnsStyle(rest) : null), [enabled]);\n\n  useMapStyleOperator(\n    (map) => {\n      if (columns == null) {\n        return;\n      }\n\n      setGeoJSON(map, \"columns\", promoteToFeatureCollection(columns));\n    },\n    [columns, enabled],\n  );\n  return null;\n}\n\nfunction promoteToFeatureCollection(\n  data: FeatureCollection | GeoJSONFeature | GeoJSONFeature[] | null,\n): FeatureCollection | null {\n  if (data == null) return null;\n  if (\"type\" in data && data.type == \"Feature\") {\n    return {\n      type: \"FeatureCollection\",\n      features: [data],\n    };\n  }\n  if (\n    \"type\" in data &&\n    data.type == \"FeatureCollection\" &&\n    \"features\" in data\n  ) {\n    return data;\n  }\n  return {\n    type: \"FeatureCollection\",\n    features: data,\n  };\n}\n\nexport function buildColumnsStyle(\n  opts: ColumnsStyleOptions = {},\n): StyleFragment {\n  const { color } = opts;\n  const columnBaseColor =\n    color ?? getCSSVariable(\"--text-subtle-color\", \"black\");\n  let columnColor: any = columnBaseColor;\n  const columnSelectedColor =\n    opts.selectedColor ?? getCSSVariable(\"--selection-color\", \"purple\");\n\n  const lineColor = opts.lineColor ?? columnBaseColor;\n  const isHovered = [\"boolean\", [\"feature-state\", \"hover\"], false];\n  // If color is in the feature state or geojson properties, use that as second choice\n  if (typeof columnColor === \"string\") {\n    columnColor = [\n      \"coalesce\",\n      [\"feature-state\", \"color\"],\n      [\"get\", \"color\"],\n      columnColor,\n    ];\n  }\n\n  const fillOpacity = opts.opacity ?? 0.1;\n\n  const lineOpacity = opts.lineOpacity ?? 0.5;\n  const lineWidth = opts.lineWidth ?? 2;\n\n  const circleRadius = opts.circleRadius ?? 4;\n\n  return {\n    sources: {\n      columns: buildGeoJSONSource(),\n    },\n    version: 8,\n    layers: [\n      {\n        id: \"columns-fill\",\n        type: \"fill\",\n        source: \"columns\",\n        paint: {\n          \"fill-color\": columnColor,\n          \"fill-opacity\": fillOpacity,\n        },\n      },\n      {\n        id: \"columns-points\",\n        type: \"circle\",\n        source: \"columns\",\n        paint: {\n          \"circle-radius\": circleRadius,\n          \"circle-color\": columnColor,\n          \"circle-opacity\": fillOpacity,\n        },\n        filter: [\"==\", \"$type\", \"Point\"],\n      },\n      {\n        id: \"columns-line\",\n        type: \"line\",\n        source: \"columns\",\n        paint: {\n          \"line-color\": [\"case\", isHovered, columnSelectedColor, lineColor],\n          \"line-width\": lineWidth,\n          \"line-opacity\": [\"case\", isHovered, 1.0, lineOpacity],\n        },\n      },\n    ],\n  };\n}\n\nexport type ColumnFeature = GeoJSON.Feature & { id: number };\n\nconst selectedColumnSourceID = \"selectedColumn\";\n\nexport function SelectedColumnOverlay({\n  selectedColumn,\n  ...styleOpts\n}: { selectedColumn: ColumnFeature | null } & SelectedColumnStyleOpts) {\n  useOverlayStyle(() => buildSelectedColumnStyle(styleOpts), []);\n\n  useMapStyleOperator(\n    (map) => {\n      setGeoJSON(\n        map,\n        selectedColumnSourceID,\n        promoteToFeatureCollection(selectedColumn as GeoJSONFeature | null),\n      );\n    },\n    [selectedColumn],\n  );\n\n  return null;\n}\n\ninterface SelectedColumnStyleOpts {\n  color?: string | any[];\n}\n\nfunction buildSelectedColumnStyle(\n  opts: SelectedColumnStyleOpts = {},\n): StyleFragment {\n  const columnSelectedColor: any =\n    opts.color ?? getCSSVariable(\"--selection-color\", \"purple\");\n\n  return {\n    sources: {\n      selectedColumn: buildGeoJSONSource(),\n    },\n    version: 8,\n    layers: [\n      {\n        id: \"selected-column-highlight\",\n        type: \"fill\",\n        source: selectedColumnSourceID,\n        paint: {\n          \"fill-color\": columnSelectedColor,\n          \"fill-opacity\": 0.5,\n        },\n        filter: [\"==\", \"$type\", \"Polygon\"],\n      },\n      {\n        id: \"selected-column-edge\",\n        type: \"line\",\n        source: selectedColumnSourceID,\n        paint: {\n          \"line-color\": columnSelectedColor,\n          \"line-width\": 2,\n          \"line-opacity\": 1.0,\n        },\n        filter: [\"==\", \"$type\", \"Polygon\"],\n      },\n      {\n        id: \"selected-column-point\",\n        type: \"circle\",\n        source: selectedColumnSourceID,\n        paint: {\n          \"circle-radius\": 6,\n          \"circle-color\": columnSelectedColor,\n          \"circle-opacity\": 1.0,\n        },\n        filter: [\"==\", \"$type\", \"Point\"],\n      },\n    ],\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/maps/layers/index.d.ts

@@ -0,0 +1,2 @@
+export * from './columns';
+export * from './units';

package/dist/maps/{units-overlay/index.cjs → layers/units.cjs}

@@ -9,12 +9,18 @@ const resolvers = require("../../units/resolvers.cjs");
 const mapStyles = require("@macrostrat/map-styles");
 const colorUtils = require("@macrostrat/color-utils");
 const pMap = require("p-map");
+const columns = require("./columns.cjs");
+const h = require("@macrostrat/hyper");
 const colors = require("../../units/colors.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const pMap__default = /* @__PURE__ */ _interopDefault(pMap);
+const h__default = /* @__PURE__ */ _interopDefault(h);
 function MacrostratUnitsOverlay(props) {
   const { time, ageSpan = 0.05, patterns = false } = props;
   const lithMap = dataProvider.useLithologies();
+  mapboxReact.useOverlayStyle(() => {
+    return buildUnitsStyle({ patterns });
+  }, [patterns]);
   mapboxReact.useMapStyleOperator(
     (map) => {
       if (!patterns) return;
@@ -38,46 +44,54 @@ function MacrostratUnitsOverlay(props) {
     };
   }, [time, ageSpan, props.project]);
   const units = uiComponents.useAPIResult("/units", params);
-  const columns = dataProvider.useMacrostratColumns(params.project, false);
+  const columns$1 = dataProvider.useMacrostratColumns(params.project, false);
   mapboxReact.useMapStyleOperator(
     (map) => {
-      if (columns == null) {
-        return;
-      }
-      const data = {
-        type: "FeatureCollection",
-        features: columns
-      };
-      mapboxUtils.setGeoJSON(map, "columns", data);
-    },
-    [columns]
-  );
-  mapboxReact.useMapStyleOperator(
-    (map) => {
-      if (units == null || columns == null || lithMap == null) {
+      if (units == null || columns$1 == null || lithMap == null) {
         return;
       }
       const getColorForLithology = (data) => {
         return lithMap?.get(data.lith_id)?.color ?? null;
       };
       const unitsMap = postProcessUnits(units, getColorForLithology);
-      handleUnitsLayerUpdate(map, unitsMap, columns);
+      handleUnitsLayerUpdate(map, unitsMap, columns$1);
       if (patterns) {
         handlePatternOverlayUpdate(
           map,
           unitsMap,
-          columns,
+          columns$1,
           getColorForLithology
         ).then(() => {
         });
       }
     },
-    [units, lithMap, columns, patterns]
+    [units, lithMap, columns$1, patterns]
   );
-  return null;
+  const isHovered = ["boolean", ["feature-state", "hover"], false];
+  const isShown = ["boolean", ["feature-state", "shown"], false];
+  const opacity = [
+    "case",
+    ["all", isHovered, isShown],
+    0.9,
+    isShown,
+    0.8,
+    isHovered,
+    0.3,
+    0
+  ];
+  return h__default.default([
+    h__default.default(columns.BaseColumnsLayer, {
+      enabled: true,
+      columns: columns$1,
+      opacity,
+      lineOpacity: 0.2,
+      lineColor: "lightgray",
+      color: "transparent"
+    })
+  ]);
 }
-function handleUnitsLayerUpdate(map, unitsMap, columns) {
-  for (const column of columns) {
+function handleUnitsLayerUpdate(map, unitsMap, columns2) {
+  for (const column of columns2) {
     const col_id = column.properties.col_id;
     const info = unitsMap.get(Number(col_id));
     const color = info?.color;
@@ -90,10 +104,10 @@ function handleUnitsLayerUpdate(map, unitsMap, columns) {
     );
   }
 }
-async function handlePatternOverlayUpdate(map, unitsMap, columns, getColor) {
+async function handlePatternOverlayUpdate(map, unitsMap, columns2, getColor) {
   const colsWithPatterns = [];
   const patternIDs = /* @__PURE__ */ new Set();
-  for (const column of columns) {
+  for (const column of columns2) {
     const col_id = column.properties.col_id;
     const info = unitsMap.get(Number(col_id));
     if (info == null) continue;
@@ -162,71 +176,10 @@ function getPatternSpec(liths, getColor) {
   return `fgdc:${patternID}:${color}:transparent`;
 }
 function buildUnitsStyle(opts = {}) {
-  const { color = null, patterns = false } = opts;
-  let columnBaseColor = color ?? colorUtils.getCSSVariable("--text-subtle-color", "black");
-  colorUtils.getCSSVariable("--selection-color", "purple");
-  let columnColor = [
-    "coalesce",
-    ["feature-state", "color"],
-    ["get", "color"],
-    columnBaseColor
-  ];
+  const { patterns = false } = opts;
   const baseStyle = {
-    sources: {
-      columns: mapboxUtils.buildGeoJSONSource()
-    },
-    version: 8,
-    layers: [
-      {
-        id: "columns-fill",
-        type: "fill",
-        source: "columns",
-        paint: {
-          "fill-color": columnColor,
-          "fill-opacity": [
-            "case",
-            ["boolean", ["feature-state", "shown"], false],
-            0.8,
-            ["boolean", ["feature-state", "hover"], false],
-            0.3,
-            0.1
-          ]
-        }
-      },
-      {
-        id: "columns-line",
-        type: "line",
-        source: "columns",
-        paint: {
-          "line-color": columnColor,
-          "line-width": 1,
-          "line-opacity": 0.5
-        }
-      },
-      {
-        id: "columns-points",
-        type: "circle",
-        source: "columns",
-        paint: {
-          "circle-radius": 4,
-          "circle-color": [
-            "case",
-            ["boolean", ["feature-state", "shown"], false],
-            columnColor,
-            columnBaseColor
-          ],
-          "circle-opacity": [
-            "case",
-            ["boolean", ["feature-state", "shown"], false],
-            0.8,
-            ["boolean", ["feature-state", "hover"], false],
-            0.3,
-            0.1
-          ]
-        },
-        filter: ["==", "$type", "Point"]
-      }
-    ]
+    sources: {},
+    version: 8
   };
   if (!patterns) {
     return baseStyle;
@@ -251,4 +204,4 @@ function buildUnitsStyle(opts = {}) {
 }
 exports.MacrostratUnitsOverlay = MacrostratUnitsOverlay;
 exports.buildUnitsStyle = buildUnitsStyle;
-//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=units.cjs.map

package/dist/maps/layers/units.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"units.cjs","sources":["../../../src/maps/layers/units.ts"],"sourcesContent":["import {\n  useLithologies,\n  useMacrostratColumns,\n} from \"@macrostrat/data-provider\";\nimport { useAPIResult } from \"@macrostrat/ui-components\";\nimport { useMapStyleOperator, useOverlayStyle } from \"@macrostrat/mapbox-react\";\nimport { FeatureCollection } from \"geojson\";\nimport { useMemo } from \"react\";\nimport { mergeStyles, setGeoJSON } from \"@macrostrat/mapbox-utils\";\nimport { UnitLithology, UnitLong } from \"@macrostrat/api-types\";\nimport { flattenLithologies, getMixedColorForData } from \"../../units\";\nimport { getBestFGDCPatternForLithologyList } from \"../../units/resolvers\";\nimport {\n  setupStyleImageManager,\n  loadStyleImage,\n  StyleFragment,\n} from \"@macrostrat/map-styles\";\nimport { asChromaColor } from \"@macrostrat/color-utils\";\nimport { buildGeoJSONSource } from \"@macrostrat/mapbox-utils\";\nimport pMap from \"p-map\";\nimport { BaseColumnsLayer } from \"./columns\";\nimport h from \"@macrostrat/hyper\";\n\nexport interface UnitsOverlayProps {\n  time: number;\n  ageSpan?: number;\n  project?: number | number[];\n  patterns?: boolean;\n}\n\nexport function MacrostratUnitsOverlay(props: UnitsOverlayProps) {\n  const { time, ageSpan = 0.05, patterns = false } = props;\n  const lithMap = useLithologies();\n\n  useOverlayStyle(() => {\n    return buildUnitsStyle({ patterns });\n  }, [patterns]);\n\n  useMapStyleOperator(\n    (map) => {\n      if (!patterns) return;\n      setupStyleImageManager(map, { verbose: false });\n    },\n    [patterns],\n  );\n\n  const params = useMemo(() => {\n    let project: number[] | undefined;\n    if (Number.isFinite(props.project)) {\n      project = [props.project as number];\n    } else if (!Array.isArray(props.project)) {\n      project = undefined;\n    }\n    // Project can only be a single project for now\n    const projectCompat =\n      project != null && project.length > 0 ? project[0] : undefined;\n\n    return {\n      age_bottom: time + ageSpan / 2,\n      age_top: time - ageSpan / 2,\n      response: \"long\",\n      project: projectCompat,\n    };\n  }, [time, ageSpan, props.project]);\n\n  const units: UnitLong[] = useAPIResult(\"/units\", params);\n  const columns = useMacrostratColumns(params.project, false);\n\n  useMapStyleOperator(\n    (map) => {\n      if (units == null || columns == null || lithMap == null) {\n        return;\n      }\n\n      const getColorForLithology = (data: UnitLithology): string | null => {\n        return lithMap?.get(data.lith_id)?.color ?? null;\n      };\n\n      const unitsMap = postProcessUnits(units, getColorForLithology);\n      handleUnitsLayerUpdate(map, unitsMap, columns);\n      if (patterns) {\n        handlePatternOverlayUpdate(\n          map,\n          unitsMap,\n          columns,\n          getColorForLithology,\n        ).then(() => {});\n      }\n    },\n    [units, lithMap, columns, patterns],\n  );\n\n  const isHovered = [\"boolean\", [\"feature-state\", \"hover\"], false];\n  const isShown = [\"boolean\", [\"feature-state\", \"shown\"], false];\n\n  const opacity = [\n    \"case\",\n    [\"all\", isHovered, isShown],\n    0.9,\n    isShown,\n    0.8,\n    isHovered,\n    0.3,\n    0.0,\n  ];\n\n  return h([\n    h(BaseColumnsLayer, {\n      enabled: true,\n      columns,\n      opacity,\n      lineOpacity: 0.2,\n      lineColor: \"lightgray\",\n      color: \"transparent\",\n    }),\n  ]);\n}\n\nfunction handleUnitsLayerUpdate(\n  map,\n  unitsMap: Map<number, UnitsDisplayInfo>,\n  columns: any[],\n) {\n  // Update feature states\n  for (const column of columns) {\n    const col_id = column.properties.col_id;\n    const info = unitsMap.get(Number(col_id));\n    const color = info?.color;\n    map.setFeatureState(\n      { source: \"columns\", id: col_id },\n      {\n        color,\n        shown: color != null,\n      },\n    );\n  }\n}\n\nasync function handlePatternOverlayUpdate(\n  map,\n  unitsMap: Map<number, UnitsDisplayInfo>,\n  columns: any[],\n  getColor: LithologyColorGetter,\n) {\n  // synthesize patterns not yet in cache\n\n  const colsWithPatterns = [];\n  const patternIDs = new Set<string>();\n  // Update feature states\n  for (const column of columns) {\n    const col_id = column.properties.col_id;\n    const info = unitsMap.get(Number(col_id));\n    if (info == null) continue;\n    const pattern = getPatternSpec(info?.liths, getColor);\n    if (pattern == null) continue;\n\n    colsWithPatterns.push({\n      type: \"Feature\",\n      geometry: column.geometry,\n      properties: {\n        col_id,\n        pattern,\n      },\n    });\n    patternIDs.add(pattern);\n  }\n\n  const patternsToLoad = patternIDs.values().filter((d) => !map.hasImage(d));\n\n  const mapper = async (patternID) => {\n    try {\n      await loadStyleImage(map, patternID, { pixelRatio: 10 });\n    } catch (e) {}\n  };\n  // Load all pattern images\n  await pMap(patternsToLoad, mapper, { concurrency: 5 });\n\n  // Set data for pattern layer\n  // This is inefficient but the only way to set per-feature patterns in Mapbox\n  const patternData: FeatureCollection = {\n    type: \"FeatureCollection\",\n    features: colsWithPatterns,\n  };\n  setGeoJSON(map, \"column-patterns\", patternData);\n}\n\nconst cachedColors = new Map<string, string>();\n\nfunction getDarkenedColor(color: string): string {\n  /** Memoized function to get a darkened version of a color for pattern use */\n  if (cachedColors.has(color)) {\n    return cachedColors.get(color);\n  }\n  const c1 = asChromaColor(color).set(\"hsl.l\", 0.4).set(\"hsl.s\", 0.8).hex();\n  cachedColors.set(color, c1);\n  return c1;\n}\n\ninterface UnitsDisplayInfo {\n  col_id: number;\n  units: UnitLong[];\n  color: string;\n  liths: UnitLithology[];\n}\n\ntype LithologyColorGetter = (val: UnitLithology) => string | null;\n\nfunction postProcessUnits(\n  units: UnitLong[],\n  getColor: LithologyColorGetter,\n): Map<number, UnitsDisplayInfo> {\n  // Group by col_id\n  const unitsByColumn: Map<number, UnitLong[]> = new Map();\n  for (const unit of units) {\n    const col_id = Number(unit.col_id);\n    if (!unitsByColumn.has(col_id)) {\n      unitsByColumn.set(col_id, [unit]);\n    } else {\n      unitsByColumn.set(col_id, [...unitsByColumn.get(col_id), unit]);\n    }\n  }\n\n  // Summarize units for display\n  const res = new Map<number, UnitsDisplayInfo>();\n  for (const [col_id, unitList] of unitsByColumn.entries()) {\n    const liths = flattenLithologies(unitList.map((u) => u.lith));\n    res.set(col_id, {\n      col_id,\n      units: unitList,\n      liths,\n      color: getMixedColorForData(liths, getColor),\n    });\n  }\n\n  return res;\n}\n\nfunction getPatternSpec(\n  liths: UnitLithology[],\n  getColor: LithologyColorGetter,\n): string | null {\n  const patternData = getBestFGDCPatternForLithologyList(liths);\n  if (patternData == null) return null;\n  let { patternID, lith } = patternData;\n  const color = getDarkenedColor(getColor(lith));\n  return `fgdc:${patternID}:${color}:transparent`;\n}\n\ntype UnitsStyleOptions = {\n  color?: string;\n  patterns?: boolean;\n};\n\nexport function buildUnitsStyle(opts: UnitsStyleOptions = {}): StyleFragment {\n  const { patterns = false } = opts;\n\n  // If color is in the feature state or geojson properties, use that as second choice\n\n  const baseStyle: StyleFragment = {\n    sources: {},\n    version: 8,\n  };\n\n  if (!patterns) {\n    return baseStyle;\n  }\n\n  const patternStyle: StyleFragment = {\n    sources: {\n      \"column-patterns\": buildGeoJSONSource(),\n    },\n    layers: [\n      {\n        id: \"columns-fill-pattern\",\n        type: \"fill\",\n        source: \"column-patterns\",\n        paint: {\n          \"fill-pattern\": [\"get\", \"pattern\"],\n          \"fill-opacity\": 1,\n        },\n      },\n    ],\n  };\n\n  return mergeStyles(baseStyle, patternStyle);\n}\n"],"names":["useLithologies","useOverlayStyle","useMapStyleOperator","setupStyleImageManager","useMemo","useAPIResult","columns","useMacrostratColumns","h","BaseColumnsLayer","loadStyleImage","pMap","setGeoJSON","asChromaColor","flattenLithologies","getMixedColorForData","getBestFGDCPatternForLithologyList","buildGeoJSONSource","mergeStyles"],"mappings":"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"}

package/dist/maps/{units-overlay/index.d.ts → layers/units.d.ts}

@@ -5,7 +5,7 @@ export interface UnitsOverlayProps {
     project?: number | number[];
     patterns?: boolean;
 }
-export declare function MacrostratUnitsOverlay(props: UnitsOverlayProps): any;
+export declare function MacrostratUnitsOverlay(props: UnitsOverlayProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 type UnitsStyleOptions = {
     color?: string;
     patterns?: boolean;