@macrostrat/map-interface 1.0.12 → 1.2.0

package/dist/esm/vector-tile-features.e1a24df0.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/map-interface/src/dev/vector-tile-features.ts"],"sourcesContent":["import { Spinner, Switch, Button, Intent } from \"@blueprintjs/core\";\nimport { useMapRef, useMapStatus } from \"@macrostrat/mapbox-react\";\nimport mapboxgl from \"mapbox-gl\";\nimport hyper from \"@macrostrat/hyper\";\nimport styles from \"./main.module.sass\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { JSONView } from \"@macrostrat/ui-components\";\nimport { group } from \"d3-array\";\nimport { ExpansionPanel } from \"../expansion-panel\";\n\nconst h = hyper.styled(styles);\n\nexport function FeatureProperties({ data, ...rest }) {\n  // Instead of managing hover state with CSS, we use a state variable,\n  // so that the button re-renders when the state changes\n  const [showControls, setShowControls] = useState(false);\n  const onMouseEnter = useCallback(() => setShowControls(true), []);\n  const onMouseLeave = useCallback(() => setShowControls(false), []);\n\n  return h(\"div.feature-properties\", { onMouseEnter, onMouseLeave }, [\n    h.if(showControls)(\"div.controls\", h(CopyJSONButton, { data })),\n    h(JSONView, {\n      data,\n      hideRoot: true,\n      ...rest,\n    }),\n  ]);\n}\n\nexport function FeatureRecord({ feature }) {\n  const props = feature.properties;\n  return h(\"div.feature-record\", [\n    h.if(Object.keys(props).length > 0)(FeatureProperties, { data: props }),\n  ]);\n}\n\nfunction CopyJSONButton({ data }) {\n  const [copied, setCopied] = useState(false);\n  return h(Button, {\n    icon: copied ? \"tick\" : \"clipboard\",\n    intent: copied ? Intent.SUCCESS : Intent.NONE,\n    minimal: true,\n    small: true,\n    onClick() {\n      navigator.clipboard.writeText(JSON.stringify(data, null, 2));\n      setCopied(true);\n    },\n  });\n}\n\n/** This component wraps queryRenderedFeatures to get features at a given location */\nexport function FeatureSelectionHandler({\n  selectedLocation,\n  setFeatures,\n  radius = 2,\n}: {\n  selectedLocation: mapboxgl.LngLat;\n  setFeatures: (features: mapboxgl.MapboxGeoJSONFeature[]) => void;\n  radius?: number;\n}) {\n  const mapRef = useMapRef();\n  const isLoading = useMapStatus((s) => s.isLoading);\n  const isInitialized = useMapStatus((s) => s.isInitialized);\n  const prevLocation = useRef(null);\n  const prevFeatures = useRef([]);\n\n  useEffect(() => {\n    const map = mapRef?.current;\n    if (map == null) return;\n    if (selectedLocation == null) {\n      setFeatures(null);\n      return;\n    }\n\n    if (!isInitialized) return;\n\n    const hasPreviouslyLoadedFeatures = prevFeatures.current.length > 0;\n\n    const locationMemo = JSON.stringify(selectedLocation);\n    if (locationMemo == prevLocation.current && hasPreviouslyLoadedFeatures)\n      return;\n\n    prevLocation.current = locationMemo;\n\n    // Don't update if the location hasn't changed\n    //if (selectedLocation == prevLocation) return;\n\n    const r = radius;\n    const pt = map.project(selectedLocation);\n\n    const bbox: [mapboxgl.PointLike, mapboxgl.PointLike] = [\n      [pt.x - r, pt.y - r],\n      [pt.x + r, pt.y + r],\n    ];\n    const features = map.queryRenderedFeatures(bbox);\n    prevFeatures.current = features ?? [];\n    setFeatures(features);\n  }, [isInitialized, selectedLocation, isLoading]);\n\n  return null;\n}\n\nfunction FeatureHeader({ feature }) {\n  return h(\"div.feature-header\", [\n    h(\"h3\", [\n      h(KeyValue, { label: \"Source\", value: feature.source }),\n      h(KeyValue, { label: \"Source layer\", value: feature.sourceLayer }),\n    ]),\n  ]);\n}\n\nfunction KeyValue({ label, value }) {\n  return h(\"span.key-value\", [h(\"span.key\", label), h(\"code.value\", value)]);\n}\n\nfunction LoadingAwareFeatureSet({ features, sourceID }) {\n  const map = useMapRef();\n  if (map?.current == null) return null;\n  const [isLoaded, setIsLoaded] = useState(false);\n\n  const sourceFeatures = features.filter((d) => d.source == \"burwell\");\n\n  useEffect(() => {\n    if (sourceFeatures.length > 0) {\n      setIsLoaded(true);\n      return;\n    }\n\n    const isLoaded = map.current.isSourceLoaded(sourceID);\n    setIsLoaded(isLoaded);\n    if (!isLoaded) {\n      map.current.once(\"sourcedata\", (e) => {\n        if (e.sourceId == sourceID) {\n          setIsLoaded(true);\n        }\n      });\n    }\n  }, [map.current, sourceID, sourceFeatures.length]);\n\n  if (!isLoaded) return h(Spinner);\n  return h(Features, { features: sourceFeatures });\n}\n\nexport function TileInfo({ feature, showExtent, setShowExtent }) {\n  if (feature == null) return null;\n  const size = feature._vectorTileFeature._pbf.length;\n  return h(\"div.tile-info\", [\n    h(\"h3\", \"Tile\"),\n    h(\"div.tile-index\", [\n      h(KeyValue, { label: \"x\", value: feature._x }),\n      h(KeyValue, { label: \"y\", value: feature._y }),\n      h(KeyValue, { label: \"z\", value: feature._z }),\n    ]),\n    h(\"div.spacer\"),\n    h(KeyValue, { label: \"Size\", value: formatSize(size) }),\n    h(Switch, {\n      label: \"Show extent\",\n      alignIndicator: \"right\",\n      checked: showExtent,\n      onChange() {\n        setShowExtent(!showExtent);\n      },\n    }),\n  ]);\n}\n\nfunction formatSize(size: number) {\n  if (size > 1000000)\n    return h(UnitNumber, { value: size / 1000000, unit: \"Mb\" });\n  if (size > 1000) return h(UnitNumber, { value: size / 1000, unit: \"Kb\" });\n  return `${size} bytes`;\n}\n\nfunction UnitNumber({ value, unit, precision = 1 }) {\n  return h(\"span.unit-number\", [\n    h(\"span.number\", value.toFixed(precision)),\n    h(\"span.unit\", unit),\n  ]);\n}\n\nexport function FeaturePanel({ features, focusedSource = null }) {\n  if (features == null) return null;\n\n  let focusedSourcePanel = null;\n  let filteredFeatures = features;\n  let title = \"Features\";\n\n  if (focusedSource != null) {\n    title = \"Basemap features\";\n    focusedSourcePanel = h(\n      ExpansionPanel,\n      {\n        title: \"Macrostrat features\",\n        className: \"macrostrat-features\",\n        expanded: true,\n      },\n      [\n        h(LoadingAwareFeatureSet, {\n          features,\n          sourceID: focusedSource,\n        }),\n      ]\n    );\n    filteredFeatures = features.filter((d) => d.source != focusedSource);\n  }\n\n  return h(\"div.feature-panel\", [\n    focusedSourcePanel,\n    h(\n      ExpansionPanel,\n      { title, className: \"basemap-features\", expanded: focusedSource == null },\n      [\n        h(FeatureGroups, {\n          features: filteredFeatures,\n        }),\n      ]\n    ),\n  ]);\n}\n\nfunction FeatureGroups({ features }) {\n  /** Group features by source and sourceLayer */\n  if (features == null) return null;\n\n  const groups = group(features, (d) => `${d.source} - ${d.sourceLayer}`);\n\n  return h(\n    \"div.feature-groups\",\n    Array.from(groups).map(([key, features]) => {\n      return h(\"div.feature-group\", [\n        h(FeatureHeader, { feature: features[0] }),\n        h(Features, { features }),\n      ]);\n    })\n  );\n}\n\nexport function Features({ features }) {\n  return h(\n    \"div.features\",\n    features.map((feature, i) => h(FeatureRecord, { key: i, feature }))\n  );\n}\n"],"names":[],"version":3,"file":"vector-tile-features.e1a24df0.js.map"}

package/dist/esm/xray.c0663c25.js

@@ -0,0 +1,83 @@
+import {getMapboxStyle as $gWtFU$getMapboxStyle, mergeStyles as $gWtFU$mergeStyles} from "@macrostrat/mapbox-utils";
+import {asChromaColor as $gWtFU$asChromaColor, toRGBAString as $gWtFU$toRGBAString} from "@macrostrat/color-utils";
+
+
+
+async function $64ee2eed3ed5ffbc$export$eff5fb2e10d05b1d(baseStyle, params = null) {
+    const { inDarkMode: inDarkMode = false, color: color = "rgb(74, 242, 161)", mapboxToken: mapboxToken, xRaySources: xRaySources } = params;
+    const style = await (0, $gWtFU$getMapboxStyle)(baseStyle, {
+        access_token: mapboxToken
+    });
+    const sources = xRaySources ?? Object.keys(style.sources);
+    let layers = [];
+    for (let layer of style.layers){
+        if (!sources.includes(layer.source)) {
+            layers.push(layer);
+            continue;
+        }
+        let newLayer = $64ee2eed3ed5ffbc$var$transformMapboxLayer(layer, color, inDarkMode);
+        if (newLayer != null) layers.push(newLayer);
+    }
+    return {
+        ...style,
+        layers: layers
+    };
+}
+function $64ee2eed3ed5ffbc$var$transformMapboxLayer(layer, color, inDarkMode) {
+    const c = (0, $gWtFU$asChromaColor)(color);
+    const xRayColor = (opacity = 1, darken = 0)=>{
+        if (!inDarkMode) return (0, $gWtFU$toRGBAString)(c.darken(2 - darken).alpha(opacity));
+        return (0, $gWtFU$toRGBAString)(c.alpha(opacity).darken(darken));
+    };
+    if (layer.type == "background") return null;
+    let newLayer = {
+        ...layer
+    };
+    console.log(xRayColor(0.5));
+    if (layer.type == "fill") newLayer.paint = {
+        "fill-color": xRayColor(0.1),
+        "fill-outline-color": xRayColor(0.5)
+    };
+    else if (layer.type == "line") newLayer.paint = {
+        "line-color": xRayColor(0.5, 0),
+        "line-width": 1.5
+    };
+    else if (layer.type == "symbol") newLayer.paint = {
+        "text-color": xRayColor(1, -0.5),
+        "text-halo-color": "#000"
+    };
+    else if (layer.type == "circle") newLayer.paint = {
+        "circle-color": xRayColor(0.5, 0),
+        "circle-stroke-color": xRayColor(0.5, 1),
+        "circle-radius": 2
+    };
+    return newLayer;
+}
+async function $64ee2eed3ed5ffbc$export$e739dc8dfc0db9a6(baseStyle, overlayStyle = null, params = {}) {
+    const { mapboxToken: mapboxToken, xRay: xRay = false, xRaySources: _xRaySources, ...rest } = params;
+    let xRaySources = _xRaySources;
+    let style = await (0, $gWtFU$getMapboxStyle)(baseStyle, {
+        access_token: mapboxToken
+    });
+    if (overlayStyle != null) {
+        const overlay = await (0, $gWtFU$getMapboxStyle)(overlayStyle, {
+            access_token: mapboxToken
+        });
+        style = (0, $gWtFU$mergeStyles)(style, overlay);
+        xRaySources ??= Object.keys(overlay.sources);
+    }
+    if (xRay) {
+        // If we haven't specified sources, then we'll use all of them
+        xRaySources ??= Object.keys(style.sources);
+        style = await $64ee2eed3ed5ffbc$export$eff5fb2e10d05b1d(style, {
+            ...rest,
+            mapboxToken: mapboxToken,
+            xRaySources: xRaySources
+        });
+    }
+    return style;
+}
+
+
+export {$64ee2eed3ed5ffbc$export$eff5fb2e10d05b1d as buildXRayStyle, $64ee2eed3ed5ffbc$export$e739dc8dfc0db9a6 as buildInspectorStyle};
+//# sourceMappingURL=xray.c0663c25.js.map

package/dist/esm/xray.c0663c25.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;AAWO,eAAe,0CACpB,SAA0B,EAC1B,SAAsB,IAAI;IAE1B,MAAM,cACJ,aAAa,cACb,QAAQ,kCACR,WAAW,eACX,WAAW,EACZ,GAAG;IACJ,MAAM,QAAQ,MAAM,CAAA,GAAA,qBAAa,EAAE,WAAW;QAAE,cAAc;IAAY;IAC1E,MAAM,UAAU,eAAe,OAAO,IAAI,CAAC,MAAM,OAAO;IAExD,IAAI,SAAS,EAAE;IACf,KAAK,IAAI,SAAS,MAAM,MAAM,CAAE;QAC9B,IAAI,CAAC,QAAQ,QAAQ,CAAC,MAAM,MAAM,GAAG;YACnC,OAAO,IAAI,CAAC;YACZ;QACF;QACA,IAAI,WAAW,2CAAqB,OAAO,OAAO;QAClD,IAAI,YAAY,MACd,OAAO,IAAI,CAAC;IAEhB;IAEA,OAAO;QACL,GAAG,KAAK;gBACR;IACF;AACF;AAEA,SAAS,2CAAqB,KAAK,EAAE,KAAK,EAAE,UAAU;IACpD,MAAM,IAAI,CAAA,GAAA,oBAAY,EAAE;IACxB,MAAM,YAAY,CAAC,UAAU,CAAC,EAAE,SAAS,CAAC;QACxC,IAAI,CAAC,YACH,OAAO,CAAA,GAAA,mBAAW,EAAE,EAAE,MAAM,CAAC,IAAI,QAAQ,KAAK,CAAC;QAEjD,OAAO,CAAA,GAAA,mBAAW,EAAE,EAAE,KAAK,CAAC,SAAS,MAAM,CAAC;IAC9C;IAEA,IAAI,MAAM,IAAI,IAAI,cAChB,OAAO;IAGT,IAAI,WAAW;QAAE,GAAG,KAAK;IAAC;IAE1B,QAAQ,GAAG,CAAC,UAAU;IAEtB,IAAI,MAAM,IAAI,IAAI,QAChB,SAAS,KAAK,GAAG;QACf,cAAc,UAAU;QACxB,sBAAsB,UAAU;IAClC;SACK,IAAI,MAAM,IAAI,IAAI,QACvB,SAAS,KAAK,GAAG;QACf,cAAc,UAAU,KAAK;QAC7B,cAAc;IAChB;SACK,IAAI,MAAM,IAAI,IAAI,UACvB,SAAS,KAAK,GAAG;QACf,cAAc,UAAU,GAAG;QAC3B,mBAAmB;IACrB;SACK,IAAI,MAAM,IAAI,IAAI,UACvB,SAAS,KAAK,GAAG;QACf,gBAAgB,UAAU,KAAK;QAC/B,uBAAuB,UAAU,KAAK;QACtC,iBAAiB;IACnB;IAGF,OAAO;AACT;AAMO,eAAe,0CACpB,SAAkC,EAClC,eAA+C,IAAI,EACnD,SAAgC,CAAC,CAAC;IAElC,MAAM,eACJ,WAAW,QACX,OAAO,OACP,aAAa,YAAY,EACzB,GAAG,MACJ,GAAG;IACJ,IAAI,cAAc;IAClB,IAAI,QAAQ,MAAM,CAAA,GAAA,qBAAa,EAAE,WAAW;QAC1C,cAAc;IAChB;IAEA,IAAI,gBAAgB,MAAM;QACxB,MAAM,UAAU,MAAM,CAAA,GAAA,qBAAa,EAAE,cAAc;YACjD,cAAc;QAChB;QACA,QAAQ,CAAA,GAAA,kBAAU,EAAE,OAAO;QAC3B,gBAAgB,OAAO,IAAI,CAAC,QAAQ,OAAO;IAC7C;IAEA,IAAI,MAAM;QACR,8DAA8D;QAC9D,gBAAgB,OAAO,IAAI,CAAC,MAAM,OAAO;QAEzC,QAAQ,MAAM,0CAAe,OAAO;YAAE,GAAG,IAAI;yBAAE;yBAAa;QAAY;IAC1E;IACA,OAAO;AACT","sources":["packages/map-interface/src/dev/xray.ts"],"sourcesContent":["import { getMapboxStyle, mergeStyles } from \"@macrostrat/mapbox-utils\";\nimport { asChromaColor, toRGBAString } from \"@macrostrat/color-utils\";\nimport mapboxgl from \"mapbox-gl\";\n\ninterface XRayOptions {\n  color?: string;\n  inDarkMode?: boolean;\n  mapboxToken?: string;\n  xRaySources?: string[];\n}\n\nexport async function buildXRayStyle(\n  baseStyle: string | object,\n  params: XRayOptions = null\n) {\n  const {\n    inDarkMode = false,\n    color = \"rgb(74, 242, 161)\",\n    mapboxToken,\n    xRaySources,\n  } = params;\n  const style = await getMapboxStyle(baseStyle, { access_token: mapboxToken });\n  const sources = xRaySources ?? Object.keys(style.sources);\n\n  let layers = [];\n  for (let layer of style.layers) {\n    if (!sources.includes(layer.source)) {\n      layers.push(layer);\n      continue;\n    }\n    let newLayer = transformMapboxLayer(layer, color, inDarkMode);\n    if (newLayer != null) {\n      layers.push(newLayer);\n    }\n  }\n\n  return {\n    ...style,\n    layers,\n  };\n}\n\nfunction transformMapboxLayer(layer, color, inDarkMode) {\n  const c = asChromaColor(color);\n  const xRayColor = (opacity = 1, darken = 0) => {\n    if (!inDarkMode) {\n      return toRGBAString(c.darken(2 - darken).alpha(opacity));\n    }\n    return toRGBAString(c.alpha(opacity).darken(darken));\n  };\n\n  if (layer.type == \"background\") {\n    return null;\n  }\n\n  let newLayer = { ...layer };\n\n  console.log(xRayColor(0.5));\n\n  if (layer.type == \"fill\") {\n    newLayer.paint = {\n      \"fill-color\": xRayColor(0.1),\n      \"fill-outline-color\": xRayColor(0.5),\n    };\n  } else if (layer.type == \"line\") {\n    newLayer.paint = {\n      \"line-color\": xRayColor(0.5, 0),\n      \"line-width\": 1.5,\n    };\n  } else if (layer.type == \"symbol\") {\n    newLayer.paint = {\n      \"text-color\": xRayColor(1, -0.5),\n      \"text-halo-color\": \"#000\",\n    };\n  } else if (layer.type == \"circle\") {\n    newLayer.paint = {\n      \"circle-color\": xRayColor(0.5, 0),\n      \"circle-stroke-color\": xRayColor(0.5, 1),\n      \"circle-radius\": 2,\n    };\n  }\n\n  return newLayer;\n}\n\ntype InspectorStyleOptions = XRayOptions & {\n  xRay?: boolean;\n};\n\nexport async function buildInspectorStyle(\n  baseStyle: mapboxgl.Style | string,\n  overlayStyle: mapboxgl.Style | string | null = null,\n  params: InspectorStyleOptions = {}\n) {\n  const {\n    mapboxToken,\n    xRay = false,\n    xRaySources: _xRaySources,\n    ...rest\n  } = params;\n  let xRaySources = _xRaySources;\n  let style = await getMapboxStyle(baseStyle, {\n    access_token: mapboxToken,\n  });\n\n  if (overlayStyle != null) {\n    const overlay = await getMapboxStyle(overlayStyle, {\n      access_token: mapboxToken,\n    });\n    style = mergeStyles(style, overlay);\n    xRaySources ??= Object.keys(overlay.sources);\n  }\n\n  if (xRay) {\n    // If we haven't specified sources, then we'll use all of them\n    xRaySources ??= Object.keys(style.sources);\n\n    style = await buildXRayStyle(style, { ...rest, mapboxToken, xRaySources });\n  }\n  return style;\n}\n"],"names":[],"version":3,"file":"xray.c0663c25.js.map"}

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@macrostrat/map-interface",
-  "version": "1.0.12",
+  "version": "1.2.0",
   "description": "Map interface for Macrostrat",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.js",
-  "types": "dist/types.d.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
   "source": "src/index.ts",
-  "style": "dist/index.css",
+  "types": "dist/esm/index.d.ts",
   "dependencies": {
-    "@macrostrat/color-utils": "^1.0.0",
-    "@macrostrat/hyper": "^3.0.0",
-    "@macrostrat/mapbox-react": "^2.2.3",
-    "@macrostrat/mapbox-utils": "^1.3.2",
-    "@macrostrat/ui-components": "^4.0.4",
+    "@blueprintjs/core": "^5.0.0",
+    "@macrostrat/color-utils": "^1.0.1",
+    "@macrostrat/hyper": "^3.0.6",
+    "@macrostrat/mapbox-react": "^2.5.0",
+    "@macrostrat/mapbox-utils": "^1.4.0",
+    "@macrostrat/ui-components": "^4.1.0",
     "@mapbox/tilebelt": "^2.0.0",
     "classnames": "^2.5.1",
     "d3-array": "^3.2.4",
@@ -23,47 +23,30 @@
     "underscore": "^1.13.6",
     "use-resize-observer": "^9.1.0"
   },
+  "devDependencies": {
+    "parcel": "^2.13.3",
+    "ui-box": "^5.4.1"
+  },
   "peerDependencies": {
-    "@blueprintjs/core": "^5.0.0",
     "react": "^16.8.6||^17.0.0||^18.0.0",
     "react-dom": "^16.8.6||^17.0.0||^18.0.0"
   },
   "scripts": {
     "dev": "parcel watch",
-    "build": "parcel build"
+    "build": "rm -rf dist && parcel build"
   },
   "exports": {
     ".": {
-      "typescript": "./src",
-      "import": {
-        "types": "./dist/types.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/types.d.ts",
-        "default": "./dist/index.cjs.js"
-      },
-      "types:": "./dist/types.d.ts",
-      "style": "./dist/index.css"
-    },
-    "./dist/": {
-      "import": "./dist/",
-      "require": "./dist/"
-    },
-    "./dist/index.css": {
-      "import": "./dist/index.css",
-      "require": "./dist/index.css"
+      "source": "./src/index.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/esm/index.d.ts"
     }
   },
   "files": [
     "dist",
     "src"
   ],
-  "devDependencies": {
-    "parcel": "^2.12.0",
-    "postcss": "^8.0.0",
-    "postcss-modules": "^4.3.0"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/UW-Macrostrat/web-components.git",

package/src/container.ts

@@ -35,6 +35,26 @@ export enum DetailPanelStyle {
 export const MapAreaContainer = (props) =>
   h(MapProviders, h(_MapAreaContainer, props));
 
+interface MapAreaContainerProps {
+  navbar: AnyElement;
+  children?: AnyElement;
+  mapControls?: AnyElement;
+  contextPanel?: AnyElement;
+  contextStack?: AnyElement;
+  mainPanel?: AnyElement;
+  detailPanel?: AnyElement;
+  bottomPanel?: AnyElement;
+  className?: string;
+  detailPanelOpen?: boolean;
+  contextPanelOpen?: boolean;
+  contextStackProps?: ContextStackProps;
+  detailStackProps?: HTMLDivProps;
+  detailPanelStyle: DetailPanelStyle;
+  fitViewport?: boolean;
+  showPanelOutlines?: boolean;
+  preventMapInteraction?: boolean;
+}
+
 function _MapAreaContainer({
   children,
   className,
@@ -53,24 +73,7 @@ function _MapAreaContainer({
   showPanelOutlines = false,
   preventMapInteraction = false,
   ...rest
-}: {
-  navbar: AnyElement;
-  children?: AnyElement;
-  mapControls?: AnyElement;
-  contextPanel?: AnyElement;
-  contextStack?: AnyElement;
-  mainPanel?: AnyElement;
-  detailPanel?: AnyElement;
-  bottomPanel?: AnyElement;
-  className?: string;
-  detailPanelOpen?: boolean;
-  contextPanelOpen?: boolean;
-  contextStackProps?: ContextStackProps;
-  detailStackProps?: HTMLDivProps;
-  detailPanelStyle: DetailPanelStyle;
-  fitViewport?: boolean;
-  showPanelOutlines?: boolean;
-}) {
+}: MapAreaContainerProps) {
   const _detailPanelOpen = detailPanelOpen ?? detailPanel != null;
   const contextPanelTrans = useTransition(contextPanelOpen, 800);
   const detailPanelTrans = useTransition(_detailPanelOpen, 800);
@@ -114,12 +117,17 @@ function _MapAreaContainer({
     ]
   );
 
+  let contextStack = null;
+  if (navbar != null && contextPanel != null) {
+    contextStack = h(ContextStack, { navbar, ...contextStackProps }, [
+      h.if(contextPanelTrans.shouldMount)([contextPanel]),
+    ]);
+  }
+
   return h(MapStyledContainer, { className: mainUIClassNames }, [
     h("div.main-row", [
       h("div.map-ui", { ...rest }, [
-        h(ContextStack, { navbar, ...contextStackProps }, [
-          h.if(contextPanelTrans.shouldMount)([contextPanel]),
-        ]),
+        contextStack,
         //h(MapView),
         children ?? mainPanel,
         h.if(detailPanelStyle == DetailPanelStyle.FLOATING)([detailStackExt]),

package/src/context-panel/index.ts

@@ -13,7 +13,7 @@ export function LoadingButton({
   isLoading = false,
   onClick,
   active = false,
-  large = false,
+  large = true,
   icon = "menu",
   style,
 }) {
@@ -29,22 +29,21 @@ export function LoadingButton({
 }
 
 export function MapLoadingButton(props) {
-  const { isLoading } = useMapStatus();
-  const mapIsLoading = useMemo(() => isLoading, [isLoading]);
-  return h(LoadingButton, { ...props, isLoading: mapIsLoading });
+  const isLoading = useMapStatus((s) => s.isLoading);
+  return h(LoadingButton, { ...props, isLoading });
 }
 
-type AnyChildren = React.ReactNode | React.ReactFragment;
+type AnyChildren = React.ReactNode;
 
 export interface FloatingNavbarProps {
   className?: string;
-  children: AnyChildren;
+  children?: AnyChildren;
   headerElement?: AnyChildren;
   title?: AnyChildren;
   statusElement?: AnyChildren;
   rightElement?: AnyChildren;
-  height: number | string;
-  width: number | string;
+  height?: number | string;
+  width?: number | string;
   style?: object;
 }
 

package/src/context-panel/main.module.sass

@@ -11,7 +11,7 @@
   .searchbar
     width: 100%
     background-color: var(--panel-background-color)
-    border-radius: 5px
+    border-radius: var(--map-panel-border-radius, 5px)
     padding: var(--navbar-padding, 10px)
     display: flex
     flex-direction: row

package/src/dev/main.module.sass

@@ -5,22 +5,35 @@
 .key-value
   display: inline-block
   margin-right: 1em
+
   .key
     font-weight: bold
     font-size: 0.9em
+
     &:after
       content: ': '
+
   .value
     font-size: 0.9em
 
 .feature-properties
   position: relative
+
   &:before
     content: "–"
     position: absolute
     top: 4px
     left: 0
 
+  .controls
+    display: flex
+    flex-direction: row
+    align-items: flex-end
+    position: absolute
+    top: 0
+    right: 0
+    gap: 0.5em
+
 .feature-header h3
   margin-bottom: 0
   margin-top: 0.5em
@@ -28,6 +41,7 @@
 .feature-group
   border-bottom: 1px solid var(--panel-rule-inner)
   margin-bottom: 0.5em
+
   &:last-child
     border-bottom: none
 
@@ -35,11 +49,13 @@
   display: flex
   flex-direction: row
   align-items: baseline
+
   h3
     margin-right: 0.5em
 
 .opacity-slider
   margin: 0 1em 0.5em
+
   :global
     .bp5-slider-handle .bp5-slider-label
       background-color: var(--secondary-color)

package/src/dev/map-page.ts

@@ -4,7 +4,7 @@ import hyper from "@macrostrat/hyper";
 import { Spacer, useDarkMode, useStoredState } from "@macrostrat/ui-components";
 import mapboxgl from "mapbox-gl";
 import { useCallback, useState, useEffect } from "react";
-import { buildInspectorStyle, buildXRayStyle } from "./xray";
+import { buildInspectorStyle } from "./xray";
 import { MapAreaContainer, PanelCard } from "../container";
 import { FloatingNavbar, MapLoadingButton } from "../context-panel";
 import { MapMarker } from "../helpers";
@@ -21,24 +21,27 @@ import { MapPosition } from "@macrostrat/mapbox-utils";
 
 export const h = hyper.styled(styles);
 
-export function MapInspector({
+export function MapInspectorV2({
   title = "Map inspector",
   headerElement = null,
   transformRequest = null,
   mapPosition = null,
   mapboxToken = null,
   overlayStyle = null,
-  children,
+  controls = null,
+  children = null,
   style,
   bounds = null,
   focusedSource = null,
   focusedSourceTitle = null,
   fitViewport = true,
+  styleType = "macrostrat",
 }: {
-  headerElement?: React.ReactElement;
+  headerElement?: React.ReactNode;
   transformRequest?: mapboxgl.TransformRequestFunction;
   title?: string;
   style?: mapboxgl.Style | string;
+  controls?: React.ReactNode;
   children?: React.ReactNode;
   mapboxToken?: string;
   overlayStyle?: mapboxgl.Style | string;
@@ -48,6 +51,7 @@ export function MapInspector({
   mapPosition?: MapPosition;
   bounds?: [number, number, number, number];
   fitViewport?: boolean;
+  styleType?: "standard" | "macrostrat";
 }) {
   /* We apply a custom style to the panel container when we are interacting
     with the search bar, so that we can block map interactions until search
@@ -63,9 +67,15 @@ export function MapInspector({
     mapboxgl.accessToken = mapboxToken;
   }
 
-  style ??= isEnabled
-    ? "mapbox://styles/mapbox/dark-v10"
-    : "mapbox://styles/mapbox/light-v10";
+  if (styleType == "macrostrat") {
+    style ??= isEnabled
+      ? "mapbox://styles/jczaplewski/cl5uoqzzq003614o6url9ou9z?optimize=true"
+      : "mapbox://styles/jczaplewski/clatdbkw4002q14lov8zx0bm0?optimize=true";
+  } else {
+    style ??= isEnabled
+      ? "mapbox://styles/mapbox/dark-v10"
+      : "mapbox://styles/mapbox/light-v10";
+  }
 
   const [isOpen, setOpen] = useState(false);
 
@@ -75,9 +85,7 @@ export function MapInspector({
   });
   const { showTileExtent, xRay } = state;
 
-  const [actualStyle, setActualStyle] = useState(style);
-
-  console.log("actualStyle", actualStyle);
+  const [actualStyle, setActualStyle] = useState(null);
 
   useEffect(() => {
     buildInspectorStyle(style, overlayStyle, {
@@ -141,6 +149,7 @@ export function MapInspector({
         title,
       }),
       contextPanel: h(PanelCard, [
+        controls,
         h(Switch, {
           checked: xRay,
           label: "X-ray mode",
@@ -148,7 +157,6 @@ export function MapInspector({
             setState({ ...state, xRay: !xRay });
           },
         }),
-        children,
       ]),
       detailPanel: detailElement,
       contextPanelOpen: isOpen,
@@ -174,10 +182,23 @@ export function MapInspector({
           setPosition: onSelectPosition,
         }),
         h(TileExtentLayer, { tile, color: isEnabled ? "white" : "black" }),
+        children,
       ]
     )
   );
 }
 
+function MapInspector(props) {
+  const { children, controls, ...rest } = props;
+  /** Compatibility wrapper for MapInspectorV2 */
+  // React warning about this legacy usage
+  console.warn("MapInspector is deprecated. Use MapInspectorV2 instead");
+
+  return h(MapInspectorV2, {
+    ...rest,
+    controls: [children, controls],
+  });
+}
+
 // Legacy export
 export const DevMapPage = MapInspector;

package/src/dev/vector-tile-features.ts

@@ -1,17 +1,24 @@
-import { Spinner, Switch } from "@blueprintjs/core";
+import { Spinner, Switch, Button, Intent } from "@blueprintjs/core";
 import { useMapRef, useMapStatus } from "@macrostrat/mapbox-react";
 import mapboxgl from "mapbox-gl";
 import hyper from "@macrostrat/hyper";
 import styles from "./main.module.sass";
-import { useEffect, useState } from "react";
-import { JSONView, usePrevious } from "@macrostrat/ui-components";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { JSONView } from "@macrostrat/ui-components";
 import { group } from "d3-array";
 import { ExpansionPanel } from "../expansion-panel";
 
 const h = hyper.styled(styles);
 
 export function FeatureProperties({ data, ...rest }) {
-  return h("div.feature-properties", [
+  // Instead of managing hover state with CSS, we use a state variable,
+  // so that the button re-renders when the state changes
+  const [showControls, setShowControls] = useState(false);
+  const onMouseEnter = useCallback(() => setShowControls(true), []);
+  const onMouseLeave = useCallback(() => setShowControls(false), []);
+
+  return h("div.feature-properties", { onMouseEnter, onMouseLeave }, [
+    h.if(showControls)("div.controls", h(CopyJSONButton, { data })),
     h(JSONView, {
       data,
       hideRoot: true,
@@ -27,6 +34,21 @@ export function FeatureRecord({ feature }) {
   ]);
 }
 
+function CopyJSONButton({ data }) {
+  const [copied, setCopied] = useState(false);
+  return h(Button, {
+    icon: copied ? "tick" : "clipboard",
+    intent: copied ? Intent.SUCCESS : Intent.NONE,
+    minimal: true,
+    small: true,
+    onClick() {
+      navigator.clipboard.writeText(JSON.stringify(data, null, 2));
+      setCopied(true);
+    },
+  });
+}
+
+/** This component wraps queryRenderedFeatures to get features at a given location */
 export function FeatureSelectionHandler({
   selectedLocation,
   setFeatures,
@@ -37,8 +59,10 @@ export function FeatureSelectionHandler({
   radius?: number;
 }) {
   const mapRef = useMapRef();
-  const { isLoading } = useMapStatus();
-  const prevLocation = usePrevious(selectedLocation);
+  const isLoading = useMapStatus((s) => s.isLoading);
+  const isInitialized = useMapStatus((s) => s.isInitialized);
+  const prevLocation = useRef(null);
+  const prevFeatures = useRef([]);
 
   useEffect(() => {
     const map = mapRef?.current;
@@ -48,8 +72,18 @@ export function FeatureSelectionHandler({
       return;
     }
 
+    if (!isInitialized) return;
+
+    const hasPreviouslyLoadedFeatures = prevFeatures.current.length > 0;
+
+    const locationMemo = JSON.stringify(selectedLocation);
+    if (locationMemo == prevLocation.current && hasPreviouslyLoadedFeatures)
+      return;
+
+    prevLocation.current = locationMemo;
+
     // Don't update if the location hasn't changed
-    if (selectedLocation == prevLocation) return;
+    //if (selectedLocation == prevLocation) return;
 
     const r = radius;
     const pt = map.project(selectedLocation);
@@ -59,8 +93,9 @@ export function FeatureSelectionHandler({
       [pt.x + r, pt.y + r],
     ];
     const features = map.queryRenderedFeatures(bbox);
+    prevFeatures.current = features ?? [];
     setFeatures(features);
-  }, [mapRef.current, prevLocation?.current, selectedLocation, isLoading]);
+  }, [isInitialized, selectedLocation, isLoading]);
 
   return null;
 }
@@ -143,11 +178,7 @@ function UnitNumber({ value, unit, precision = 1 }) {
   ]);
 }
 
-export function FeaturePanel({
-  features,
-  focusedSource = null,
-  focusedSourceTitle = null,
-}) {
+export function FeaturePanel({ features, focusedSource = null }) {
   if (features == null) return null;
 
   let focusedSourcePanel = null;