@macrostrat/column-views 3.1.0 → 3.2.0

package/dist/maps/_shared/styles.js

@@ -3,7 +3,12 @@ import { buildGeoJSONSource } from "@macrostrat/mapbox-utils";
 function buildColumnsStyle(color) {
   let columnColor = color ?? getCSSVariable("--text-subtle-color", "black");
   const columnSelectedColor = getCSSVariable("--selection-color", "purple");
-  columnColor = ["coalesce", ["get", "color"], columnColor];
+  columnColor = [
+    "coalesce",
+    ["feature-state", "color"],
+    ["get", "color"],
+    columnColor
+  ];
   return {
     sources: {
       columns: buildGeoJSONSource()

package/dist/maps/_shared/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../src/maps/_shared/styles.ts"],"sourcesContent":["import { getCSSVariable } from \"@macrostrat/color-utils\";\nimport { buildGeoJSONSource } from \"@macrostrat/mapbox-utils\";\nimport type { Style } from \"mapbox-gl\";\n\nexport function buildColumnsStyle(color: string): Style {\n  let columnColor = color ?? getCSSVariable(\"--text-subtle-color\", \"black\");\n  const columnSelectedColor = getCSSVariable(\"--selection-color\", \"purple\");\n\n  // If color is in the geojson properties, use that\n  columnColor = [\"coalesce\", [\"get\", \"color\"], columnColor];\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\": [\n            \"case\",\n            [\"boolean\", [\"feature-state\", \"selected\"], false],\n            0.5,\n            [\"boolean\", [\"feature-state\", \"hover\"], false],\n            0.3,\n            0.1,\n          ],\n        },\n      },\n      {\n        id: \"columns-line\",\n        type: \"line\",\n        source: \"columns\",\n        paint: {\n          \"line-color\": columnColor,\n          \"line-width\": 2,\n          \"line-opacity\": 0.5,\n        },\n      },\n      {\n        id: \"columns-points\",\n        type: \"circle\",\n        source: \"columns\",\n        paint: {\n          \"circle-radius\": 4,\n          \"circle-color\": [\n            \"case\",\n            [\"boolean\", [\"feature-state\", \"selected\"], false],\n            columnSelectedColor,\n            columnColor,\n          ],\n          \"circle-opacity\": [\n            \"case\",\n            [\"boolean\", [\"feature-state\", \"selected\"], false],\n            1,\n            [\"boolean\", [\"feature-state\", \"hover\"], false],\n            0.7,\n            0.5,\n          ],\n        },\n        filter: [\"==\", \"$type\", \"Point\"],\n      },\n    ],\n  };\n}\n"],"names":[],"mappings":";;AAIO,SAAS,kBAAkB,OAAsB;AACtD,MAAI,cAAc,SAAS,eAAe,uBAAuB,OAAO;AACxE,QAAM,sBAAsB,eAAe,qBAAqB,QAAQ;AAGxE,gBAAc,CAAC,YAAY,CAAC,OAAO,OAAO,GAAG,WAAW;AAExD,SAAO;AAAA,IACL,SAAS;AAAA,MACP,SAAS,mBAAA;AAAA,IAAmB;AAAA,IAE9B,SAAS;AAAA,IACT,QAAQ;AAAA,MACN;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,cAAc;AAAA,UACd,gBAAgB;AAAA,YACd;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,UAAU,GAAG,KAAK;AAAA,YAChD;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,YAC7C;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MACF;AAAA,MAEF;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,cAAc;AAAA,UACd,cAAc;AAAA,UACd,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,MAEF;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,iBAAiB;AAAA,UACjB,gBAAgB;AAAA,YACd;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,UAAU,GAAG,KAAK;AAAA,YAChD;AAAA,YACA;AAAA,UAAA;AAAA,UAEF,kBAAkB;AAAA,YAChB;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,UAAU,GAAG,KAAK;AAAA,YAChD;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,YAC7C;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QAEF,QAAQ,CAAC,MAAM,SAAS,OAAO;AAAA,MAAA;AAAA,IACjC;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"styles.js","sources":["../../../src/maps/_shared/styles.ts"],"sourcesContent":["import { getCSSVariable } from \"@macrostrat/color-utils\";\nimport { buildGeoJSONSource } from \"@macrostrat/mapbox-utils\";\nimport type { Style } from \"mapbox-gl\";\n\nexport function buildColumnsStyle(color: string): Style {\n  let columnColor: any =\n    color ?? getCSSVariable(\"--text-subtle-color\", \"black\");\n  const columnSelectedColor = getCSSVariable(\"--selection-color\", \"purple\");\n\n  // If color is in the feature state or geojson properties, use that as second choice\n\n  columnColor = [\n    \"coalesce\",\n    [\"feature-state\", \"color\"],\n    [\"get\", \"color\"],\n    columnColor,\n  ];\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\": [\n            \"case\",\n            [\"boolean\", [\"feature-state\", \"selected\"], false],\n            0.5,\n            [\"boolean\", [\"feature-state\", \"hover\"], false],\n            0.3,\n            0.1,\n          ],\n        },\n      },\n      {\n        id: \"columns-line\",\n        type: \"line\",\n        source: \"columns\",\n        paint: {\n          \"line-color\": columnColor,\n          \"line-width\": 2,\n          \"line-opacity\": 0.5,\n        },\n      },\n      {\n        id: \"columns-points\",\n        type: \"circle\",\n        source: \"columns\",\n        paint: {\n          \"circle-radius\": 4,\n          \"circle-color\": [\n            \"case\",\n            [\"boolean\", [\"feature-state\", \"selected\"], false],\n            columnSelectedColor,\n            columnColor,\n          ],\n          \"circle-opacity\": [\n            \"case\",\n            [\"boolean\", [\"feature-state\", \"selected\"], false],\n            1,\n            [\"boolean\", [\"feature-state\", \"hover\"], false],\n            0.7,\n            0.5,\n          ],\n        },\n        filter: [\"==\", \"$type\", \"Point\"],\n      },\n    ],\n  };\n}\n"],"names":[],"mappings":";;AAIO,SAAS,kBAAkB,OAAsB;AACtD,MAAI,cACF,SAAS,eAAe,uBAAuB,OAAO;AACxD,QAAM,sBAAsB,eAAe,qBAAqB,QAAQ;AAIxE,gBAAc;AAAA,IACZ;AAAA,IACA,CAAC,iBAAiB,OAAO;AAAA,IACzB,CAAC,OAAO,OAAO;AAAA,IACf;AAAA,EAAA;AAGF,SAAO;AAAA,IACL,SAAS;AAAA,MACP,SAAS,mBAAA;AAAA,IAAmB;AAAA,IAE9B,SAAS;AAAA,IACT,QAAQ;AAAA,MACN;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,cAAc;AAAA,UACd,gBAAgB;AAAA,YACd;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,UAAU,GAAG,KAAK;AAAA,YAChD;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,YAC7C;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MACF;AAAA,MAEF;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,cAAc;AAAA,UACd,cAAc;AAAA,UACd,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,MAEF;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,iBAAiB;AAAA,UACjB,gBAAgB;AAAA,YACd;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,UAAU,GAAG,KAAK;AAAA,YAChD;AAAA,YACA;AAAA,UAAA;AAAA,UAEF,kBAAkB;AAAA,YAChB;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,UAAU,GAAG,KAAK;AAAA,YAChD;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,YAC7C;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QAEF,QAAQ,CAAC,MAAM,SAAS,OAAO;AAAA,MAAA;AAAA,IACjC;AAAA,EACF;AAEJ;"}

package/dist/maps/column-navigation/mapbox/keyboard-navigation.d.ts

@@ -4,7 +4,7 @@ interface KeyboardNavProps {
 export declare function ColumnKeyboardNavigation(props: KeyboardNavProps): any;
 export declare function buildKeyboardNavigationStyle(color?: string): {
     sources: {
-        "column-links": GeoJSONSourceRaw;
+        "column-links": import('mapbox-gl').GeoJSONSourceSpecification;
     };
     layers: ({
         id: string;

package/dist/maps/index.d.ts

@@ -1,3 +1,4 @@
 export * from './column-navigation';
 export * from './column-correlation';
 export * from './_shared';
+export * from './units-overlay';

package/dist/maps/units-overlay/index.cjs

@@ -0,0 +1,254 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const dataProvider = require("@macrostrat/data-provider");
+const uiComponents = require("@macrostrat/ui-components");
+const mapboxReact = require("@macrostrat/mapbox-react");
+const React = require("react");
+const mapboxUtils = require("@macrostrat/mapbox-utils");
+const resolvers = require("../../units/resolvers.cjs");
+const mapStyles = require("@macrostrat/map-styles");
+const colorUtils = require("@macrostrat/color-utils");
+const pMap = require("p-map");
+const colors = require("../../units/colors.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const pMap__default = /* @__PURE__ */ _interopDefault(pMap);
+function MacrostratUnitsOverlay(props) {
+  const { time, ageSpan = 0.05, patterns = false } = props;
+  const lithMap = dataProvider.useLithologies();
+  mapboxReact.useMapStyleOperator(
+    (map) => {
+      if (!patterns) return;
+      mapStyles.setupStyleImageManager(map, { verbose: false });
+    },
+    [patterns]
+  );
+  const params = React.useMemo(() => {
+    let project;
+    if (Number.isFinite(props.project)) {
+      project = [props.project];
+    } else if (!Array.isArray(props.project)) {
+      project = void 0;
+    }
+    const projectCompat = project != null && project.length > 0 ? project[0] : void 0;
+    return {
+      age_bottom: time + ageSpan / 2,
+      age_top: time - ageSpan / 2,
+      response: "long",
+      project: projectCompat
+    };
+  }, [time, ageSpan, props.project]);
+  const units = uiComponents.useAPIResult("/units", params);
+  const columns = 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) {
+        return;
+      }
+      const getColorForLithology = (data) => {
+        return lithMap?.get(data.lith_id)?.color ?? null;
+      };
+      const unitsMap = postProcessUnits(units, getColorForLithology);
+      handleUnitsLayerUpdate(map, unitsMap, columns);
+      if (patterns) {
+        handlePatternOverlayUpdate(
+          map,
+          unitsMap,
+          columns,
+          getColorForLithology
+        ).then(() => {
+        });
+      }
+    },
+    [units, lithMap, columns, patterns]
+  );
+  return null;
+}
+function handleUnitsLayerUpdate(map, unitsMap, columns) {
+  for (const column of columns) {
+    const col_id = column.properties.col_id;
+    const info = unitsMap.get(Number(col_id));
+    const color = info?.color;
+    map.setFeatureState(
+      { source: "columns", id: col_id },
+      {
+        color,
+        shown: color != null
+      }
+    );
+  }
+}
+async function handlePatternOverlayUpdate(map, unitsMap, columns, getColor) {
+  const colsWithPatterns = [];
+  const patternIDs = /* @__PURE__ */ new Set();
+  for (const column of columns) {
+    const col_id = column.properties.col_id;
+    const info = unitsMap.get(Number(col_id));
+    if (info == null) continue;
+    const pattern = getPatternSpec(info?.liths, getColor);
+    if (pattern == null) continue;
+    colsWithPatterns.push({
+      type: "Feature",
+      geometry: column.geometry,
+      properties: {
+        col_id,
+        pattern
+      }
+    });
+    patternIDs.add(pattern);
+  }
+  const patternsToLoad = patternIDs.values().filter((d) => !map.hasImage(d));
+  const mapper = async (patternID) => {
+    try {
+      await mapStyles.loadStyleImage(map, patternID, { pixelRatio: 10 });
+    } catch (e) {
+    }
+  };
+  await pMap__default.default(patternsToLoad, mapper, { concurrency: 5 });
+  const patternData = {
+    type: "FeatureCollection",
+    features: colsWithPatterns
+  };
+  mapboxUtils.setGeoJSON(map, "column-patterns", patternData);
+}
+const cachedColors = /* @__PURE__ */ new Map();
+function getDarkenedColor(color) {
+  if (cachedColors.has(color)) {
+    return cachedColors.get(color);
+  }
+  const c1 = colorUtils.asChromaColor(color).set("hsl.l", 0.4).set("hsl.s", 0.8).hex();
+  cachedColors.set(color, c1);
+  return c1;
+}
+function postProcessUnits(units, getColor) {
+  const unitsByColumn = /* @__PURE__ */ new Map();
+  for (const unit of units) {
+    const col_id = Number(unit.col_id);
+    if (!unitsByColumn.has(col_id)) {
+      unitsByColumn.set(col_id, [unit]);
+    } else {
+      unitsByColumn.set(col_id, [...unitsByColumn.get(col_id), unit]);
+    }
+  }
+  const res = /* @__PURE__ */ new Map();
+  for (const [col_id, unitList] of unitsByColumn.entries()) {
+    const liths = colors.flattenLithologies(unitList.map((u) => u.lith));
+    res.set(col_id, {
+      col_id,
+      units: unitList,
+      liths,
+      color: colors.getMixedColorForData(liths, getColor)
+    });
+  }
+  return res;
+}
+function getPatternSpec(liths, getColor) {
+  const patternData = resolvers.getBestFGDCPatternForLithologyList(liths);
+  if (patternData == null) return null;
+  let { patternID, lith } = patternData;
+  const color = getDarkenedColor(getColor(lith));
+  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 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"]
+      }
+    ]
+  };
+  if (!patterns) {
+    return baseStyle;
+  }
+  const patternStyle = {
+    sources: {
+      "column-patterns": mapboxUtils.buildGeoJSONSource()
+    },
+    layers: [
+      {
+        id: "columns-fill-pattern",
+        type: "fill",
+        source: "column-patterns",
+        paint: {
+          "fill-pattern": ["get", "pattern"],
+          "fill-opacity": 1
+        }
+      }
+    ]
+  };
+  return mapboxUtils.mergeStyles(baseStyle, patternStyle);
+}
+exports.MacrostratUnitsOverlay = MacrostratUnitsOverlay;
+exports.buildUnitsStyle = buildUnitsStyle;
+//# sourceMappingURL=index.cjs.map

package/dist/maps/units-overlay/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/maps/units-overlay/index.ts"],"sourcesContent":["import {\n  useLithologies,\n  useMacrostratColumns,\n} from \"@macrostrat/data-provider\";\nimport { useAPIResult } from \"@macrostrat/ui-components\";\nimport { useMapStyleOperator } 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, getCSSVariable } from \"@macrostrat/color-utils\";\nimport { buildGeoJSONSource } from \"@macrostrat/mapbox-utils\";\nimport pMap from \"p-map\";\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  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  // Set up basic columns layer\n  useMapStyleOperator(\n    (map) => {\n      if (columns == null) {\n        return;\n      }\n      const data: FeatureCollection = {\n        type: \"FeatureCollection\",\n        features: columns,\n      };\n      setGeoJSON(map, \"columns\", data);\n    },\n    [columns],\n  );\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  return null;\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 { color = null, patterns = false } = opts;\n\n  let columnBaseColor: any =\n    color ?? getCSSVariable(\"--text-subtle-color\", \"black\");\n  const columnSelectedColor = getCSSVariable(\"--selection-color\", \"purple\");\n\n  // If color is in the feature state or geojson properties, use that as second choice\n\n  let columnColor: any = [\n    \"coalesce\",\n    [\"feature-state\", \"color\"],\n    [\"get\", \"color\"],\n    columnBaseColor,\n  ];\n\n  const baseStyle: StyleFragment = {\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\": [\n            \"case\",\n            [\"boolean\", [\"feature-state\", \"shown\"], false],\n            0.8,\n            [\"boolean\", [\"feature-state\", \"hover\"], false],\n            0.3,\n            0.1,\n          ],\n        },\n      },\n      {\n        id: \"columns-line\",\n        type: \"line\",\n        source: \"columns\",\n        paint: {\n          \"line-color\": columnColor,\n          \"line-width\": 1,\n          \"line-opacity\": 0.5,\n        },\n      },\n      {\n        id: \"columns-points\",\n        type: \"circle\",\n        source: \"columns\",\n        paint: {\n          \"circle-radius\": 4,\n          \"circle-color\": [\n            \"case\",\n            [\"boolean\", [\"feature-state\", \"shown\"], false],\n            columnColor,\n            columnBaseColor,\n          ],\n          \"circle-opacity\": [\n            \"case\",\n            [\"boolean\", [\"feature-state\", \"shown\"], false],\n            0.8,\n            [\"boolean\", [\"feature-state\", \"hover\"], false],\n            0.3,\n            0.1,\n          ],\n        },\n        filter: [\"==\", \"$type\", \"Point\"],\n      },\n    ],\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","useMapStyleOperator","setupStyleImageManager","useMemo","useAPIResult","useMacrostratColumns","setGeoJSON","loadStyleImage","pMap","asChromaColor","flattenLithologies","getMixedColorForData","getBestFGDCPatternForLithologyList","getCSSVariable","buildGeoJSONSource","mergeStyles"],"mappings":"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"}

package/dist/maps/units-overlay/index.d.ts

@@ -0,0 +1,14 @@
+import { StyleFragment } from '@macrostrat/map-styles';
+export interface UnitsOverlayProps {
+    time: number;
+    ageSpan?: number;
+    project?: number | number[];
+    patterns?: boolean;
+}
+export declare function MacrostratUnitsOverlay(props: UnitsOverlayProps): any;
+type UnitsStyleOptions = {
+    color?: string;
+    patterns?: boolean;
+};
+export declare function buildUnitsStyle(opts?: UnitsStyleOptions): StyleFragment;
+export {};

package/dist/maps/units-overlay/index.js

@@ -0,0 +1,252 @@
+import { useLithologies, useMacrostratColumns } from "@macrostrat/data-provider";
+import { useAPIResult } from "@macrostrat/ui-components";
+import { useMapStyleOperator } from "@macrostrat/mapbox-react";
+import { useMemo } from "react";
+import { setGeoJSON, buildGeoJSONSource, mergeStyles } from "@macrostrat/mapbox-utils";
+import { getBestFGDCPatternForLithologyList } from "../../units/resolvers.js";
+import { setupStyleImageManager, loadStyleImage } from "@macrostrat/map-styles";
+import { getCSSVariable, asChromaColor } from "@macrostrat/color-utils";
+import pMap from "p-map";
+import { flattenLithologies, getMixedColorForData } from "../../units/colors.js";
+function MacrostratUnitsOverlay(props) {
+  const { time, ageSpan = 0.05, patterns = false } = props;
+  const lithMap = useLithologies();
+  useMapStyleOperator(
+    (map) => {
+      if (!patterns) return;
+      setupStyleImageManager(map, { verbose: false });
+    },
+    [patterns]
+  );
+  const params = useMemo(() => {
+    let project;
+    if (Number.isFinite(props.project)) {
+      project = [props.project];
+    } else if (!Array.isArray(props.project)) {
+      project = void 0;
+    }
+    const projectCompat = project != null && project.length > 0 ? project[0] : void 0;
+    return {
+      age_bottom: time + ageSpan / 2,
+      age_top: time - ageSpan / 2,
+      response: "long",
+      project: projectCompat
+    };
+  }, [time, ageSpan, props.project]);
+  const units = useAPIResult("/units", params);
+  const columns = useMacrostratColumns(params.project, false);
+  useMapStyleOperator(
+    (map) => {
+      if (columns == null) {
+        return;
+      }
+      const data = {
+        type: "FeatureCollection",
+        features: columns
+      };
+      setGeoJSON(map, "columns", data);
+    },
+    [columns]
+  );
+  useMapStyleOperator(
+    (map) => {
+      if (units == null || columns == null || lithMap == null) {
+        return;
+      }
+      const getColorForLithology = (data) => {
+        return lithMap?.get(data.lith_id)?.color ?? null;
+      };
+      const unitsMap = postProcessUnits(units, getColorForLithology);
+      handleUnitsLayerUpdate(map, unitsMap, columns);
+      if (patterns) {
+        handlePatternOverlayUpdate(
+          map,
+          unitsMap,
+          columns,
+          getColorForLithology
+        ).then(() => {
+        });
+      }
+    },
+    [units, lithMap, columns, patterns]
+  );
+  return null;
+}
+function handleUnitsLayerUpdate(map, unitsMap, columns) {
+  for (const column of columns) {
+    const col_id = column.properties.col_id;
+    const info = unitsMap.get(Number(col_id));
+    const color = info?.color;
+    map.setFeatureState(
+      { source: "columns", id: col_id },
+      {
+        color,
+        shown: color != null
+      }
+    );
+  }
+}
+async function handlePatternOverlayUpdate(map, unitsMap, columns, getColor) {
+  const colsWithPatterns = [];
+  const patternIDs = /* @__PURE__ */ new Set();
+  for (const column of columns) {
+    const col_id = column.properties.col_id;
+    const info = unitsMap.get(Number(col_id));
+    if (info == null) continue;
+    const pattern = getPatternSpec(info?.liths, getColor);
+    if (pattern == null) continue;
+    colsWithPatterns.push({
+      type: "Feature",
+      geometry: column.geometry,
+      properties: {
+        col_id,
+        pattern
+      }
+    });
+    patternIDs.add(pattern);
+  }
+  const patternsToLoad = patternIDs.values().filter((d) => !map.hasImage(d));
+  const mapper = async (patternID) => {
+    try {
+      await loadStyleImage(map, patternID, { pixelRatio: 10 });
+    } catch (e) {
+    }
+  };
+  await pMap(patternsToLoad, mapper, { concurrency: 5 });
+  const patternData = {
+    type: "FeatureCollection",
+    features: colsWithPatterns
+  };
+  setGeoJSON(map, "column-patterns", patternData);
+}
+const cachedColors = /* @__PURE__ */ new Map();
+function getDarkenedColor(color) {
+  if (cachedColors.has(color)) {
+    return cachedColors.get(color);
+  }
+  const c1 = asChromaColor(color).set("hsl.l", 0.4).set("hsl.s", 0.8).hex();
+  cachedColors.set(color, c1);
+  return c1;
+}
+function postProcessUnits(units, getColor) {
+  const unitsByColumn = /* @__PURE__ */ new Map();
+  for (const unit of units) {
+    const col_id = Number(unit.col_id);
+    if (!unitsByColumn.has(col_id)) {
+      unitsByColumn.set(col_id, [unit]);
+    } else {
+      unitsByColumn.set(col_id, [...unitsByColumn.get(col_id), unit]);
+    }
+  }
+  const res = /* @__PURE__ */ new Map();
+  for (const [col_id, unitList] of unitsByColumn.entries()) {
+    const liths = flattenLithologies(unitList.map((u) => u.lith));
+    res.set(col_id, {
+      col_id,
+      units: unitList,
+      liths,
+      color: getMixedColorForData(liths, getColor)
+    });
+  }
+  return res;
+}
+function getPatternSpec(liths, getColor) {
+  const patternData = getBestFGDCPatternForLithologyList(liths);
+  if (patternData == null) return null;
+  let { patternID, lith } = patternData;
+  const color = getDarkenedColor(getColor(lith));
+  return `fgdc:${patternID}:${color}:transparent`;
+}
+function buildUnitsStyle(opts = {}) {
+  const { color = null, patterns = false } = opts;
+  let columnBaseColor = color ?? getCSSVariable("--text-subtle-color", "black");
+  getCSSVariable("--selection-color", "purple");
+  let columnColor = [
+    "coalesce",
+    ["feature-state", "color"],
+    ["get", "color"],
+    columnBaseColor
+  ];
+  const baseStyle = {
+    sources: {
+      columns: 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"]
+      }
+    ]
+  };
+  if (!patterns) {
+    return baseStyle;
+  }
+  const patternStyle = {
+    sources: {
+      "column-patterns": buildGeoJSONSource()
+    },
+    layers: [
+      {
+        id: "columns-fill-pattern",
+        type: "fill",
+        source: "column-patterns",
+        paint: {
+          "fill-pattern": ["get", "pattern"],
+          "fill-opacity": 1
+        }
+      }
+    ]
+  };
+  return mergeStyles(baseStyle, patternStyle);
+}
+export {
+  MacrostratUnitsOverlay,
+  buildUnitsStyle
+};
+//# sourceMappingURL=index.js.map

package/dist/maps/units-overlay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/maps/units-overlay/index.ts"],"sourcesContent":["import {\n  useLithologies,\n  useMacrostratColumns,\n} from \"@macrostrat/data-provider\";\nimport { useAPIResult } from \"@macrostrat/ui-components\";\nimport { useMapStyleOperator } 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, getCSSVariable } from \"@macrostrat/color-utils\";\nimport { buildGeoJSONSource } from \"@macrostrat/mapbox-utils\";\nimport pMap from \"p-map\";\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  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  // Set up basic columns layer\n  useMapStyleOperator(\n    (map) => {\n      if (columns == null) {\n        return;\n      }\n      const data: FeatureCollection = {\n        type: \"FeatureCollection\",\n        features: columns,\n      };\n      setGeoJSON(map, \"columns\", data);\n    },\n    [columns],\n  );\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  return null;\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 { color = null, patterns = false } = opts;\n\n  let columnBaseColor: any =\n    color ?? getCSSVariable(\"--text-subtle-color\", \"black\");\n  const columnSelectedColor = getCSSVariable(\"--selection-color\", \"purple\");\n\n  // If color is in the feature state or geojson properties, use that as second choice\n\n  let columnColor: any = [\n    \"coalesce\",\n    [\"feature-state\", \"color\"],\n    [\"get\", \"color\"],\n    columnBaseColor,\n  ];\n\n  const baseStyle: StyleFragment = {\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\": [\n            \"case\",\n            [\"boolean\", [\"feature-state\", \"shown\"], false],\n            0.8,\n            [\"boolean\", [\"feature-state\", \"hover\"], false],\n            0.3,\n            0.1,\n          ],\n        },\n      },\n      {\n        id: \"columns-line\",\n        type: \"line\",\n        source: \"columns\",\n        paint: {\n          \"line-color\": columnColor,\n          \"line-width\": 1,\n          \"line-opacity\": 0.5,\n        },\n      },\n      {\n        id: \"columns-points\",\n        type: \"circle\",\n        source: \"columns\",\n        paint: {\n          \"circle-radius\": 4,\n          \"circle-color\": [\n            \"case\",\n            [\"boolean\", [\"feature-state\", \"shown\"], false],\n            columnColor,\n            columnBaseColor,\n          ],\n          \"circle-opacity\": [\n            \"case\",\n            [\"boolean\", [\"feature-state\", \"shown\"], false],\n            0.8,\n            [\"boolean\", [\"feature-state\", \"hover\"], false],\n            0.3,\n            0.1,\n          ],\n        },\n        filter: [\"==\", \"$type\", \"Point\"],\n      },\n    ],\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":[],"mappings":"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"}

package/dist/section.js

@@ -2,13 +2,13 @@ import { useMemo } from "react";
 import { useMacrostratIntervals, Timescale, TimescaleOrientation } from "@macrostrat/timescale";
 import { ColumnAxisType, SVG } from "@macrostrat/column-components";
 import h$1 from "@macrostrat/hyper";
-import styles from "./column.module.sass.js";
+import h$2 from "./column.module.sass.js";
 import { useMacrostratBaseURL } from "@macrostrat/data-provider";
 import { Value } from "@macrostrat/data-components";
 import { useMacrostratColumnData, useMacrostratUnits, MacrostratColumnProvider } from "./data-provider/store.js";
 import { LabelTrackerProvider, SectionLabelsColumn, CompositeUnitsColumn } from "./units/composite.js";
 import { Duration } from "./unit-details/panel.js";
-const h = h$1.styled(styles);
+const h = h$1.styled(h$2);
 function SectionsColumn(props) {
   const {
     unconformityLabels = true,