@macrostrat/map-interface 1.2.1 → 1.2.3

package/dist/node/{vector-tile-features.c02e240c.js.map → vector-tile-features.b5a23b71.js.map}

@@ -1 +1 @@
-{"mappings":"A,Q,8C,Q,+C,Q,kD,Q,qB,Q,4B,I,E,Q,qB,S,E,C,E,O,G,E,U,C,E,O,C,C,C,Q,S,Q,6B,Q,Y,I,E,W,E,C,E,E,C,E,E,E,iB,A,O,I,A,C,E,S,C,E,G,K,E,O,C,C,E,C,O,C,G,K,E,C,I,E,C,C,E,A,Q,C,C,E,C,I,E,C,G,E,Q,C,C,E,O,C,C,E,C,E,E,I,C,E,O,C,E,E,O,E,E,O,A,C,I,E,A,M,uB,E,I,O,E,I,C,mB,C,C,E,Q,C,S,C,C,C,E,C,C,E,C,C,E,E,iB,C,G,E,Q,C,I,E,E,SEAiB,IAAA,IAAoB,+CAAA,QAAA,YAAgD,QAAQ,GDUnF,AAAA,AAAA,EAAA,GAAM,MAAM,CAAC,EAAA","sources":["<anon>","packages/map-interface/src/dev/vector-tile-features.ts","../../../../.yarn/berry/cache/@parcel-runtime-js-npm-2.13.3-f44fec8492-10c0.zip/node_modules/@parcel/runtime-js/lib/runtime-1865b63dee819005.js"],"sourcesContent":["require(\"./main.module.434acaf9.js\");\nrequire(\"./main.module.29a15f3d.css\");\nrequire(\"./expansion-panel.1553938f.js\");\nvar $aOXfC$blueprintjscore = require(\"@blueprintjs/core\");\nvar $aOXfC$macrostratmapboxreact = require(\"@macrostrat/mapbox-react\");\nvar $aOXfC$macrostrathyper = require(\"@macrostrat/hyper\");\nvar $aOXfC$react = require(\"react\");\nvar $aOXfC$macrostratuicomponents = require(\"@macrostrat/ui-components\");\nvar $aOXfC$d3array = require(\"d3-array\");\n\n\nfunction $parcel$interopDefault(a) {\n  return a && a.__esModule ? a.default : a;\n}\n\n      var $parcel$global = globalThis;\n    \nvar $parcel$modules = {};\nvar $parcel$inits = {};\n\nvar parcelRequire = $parcel$global[\"parcelRequire94c2\"];\n\nif (parcelRequire == null) {\n  parcelRequire = function(id) {\n    if (id in $parcel$modules) {\n      return $parcel$modules[id].exports;\n    }\n    if (id in $parcel$inits) {\n      var init = $parcel$inits[id];\n      delete $parcel$inits[id];\n      var module = {id: id, exports: {}};\n      $parcel$modules[id] = module;\n      init.call(module.exports, module, module.exports);\n      return module.exports;\n    }\n    var err = new Error(\"Cannot find module '\" + id + \"'\");\n    err.code = 'MODULE_NOT_FOUND';\n    throw err;\n  };\n\n  parcelRequire.register = function register(id, init) {\n    $parcel$inits[id] = init;\n  };\n\n  $parcel$global[\"parcelRequire94c2\"] = parcelRequire;\n}\n\nvar parcelRegister = parcelRequire.register;\n\n\n\n\nvar $7gWgo = parcelRequire(\"7gWgo\");\n\n\n\nvar $1b9f6bceeea1f7c0$exports = {};\n$1b9f6bceeea1f7c0$exports = new URL(\"expansion-panel.1553938f.js\", \"file:\" + __filename).toString();\n\n\nconst $24508fe2b4ce0838$var$h = (0, ($parcel$interopDefault($aOXfC$macrostrathyper))).styled((0, (/*@__PURE__*/$parcel$interopDefault($7gWgo))));\nfunction $24508fe2b4ce0838$export$2906e7f4b228efe9({ data: 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] = (0, $aOXfC$react.useState)(false);\n    const onMouseEnter = (0, $aOXfC$react.useCallback)(()=>setShowControls(true), []);\n    const onMouseLeave = (0, $aOXfC$react.useCallback)(()=>setShowControls(false), []);\n    return $24508fe2b4ce0838$var$h(\"div.feature-properties\", {\n        onMouseEnter: onMouseEnter,\n        onMouseLeave: onMouseLeave\n    }, [\n        $24508fe2b4ce0838$var$h.if(showControls)(\"div.controls\", $24508fe2b4ce0838$var$h($24508fe2b4ce0838$var$CopyJSONButton, {\n            data: data\n        })),\n        $24508fe2b4ce0838$var$h((0, $aOXfC$macrostratuicomponents.JSONView), {\n            data: data,\n            hideRoot: true,\n            ...rest\n        })\n    ]);\n}\nfunction $24508fe2b4ce0838$export$dc87b4d46cea200d({ feature: feature }) {\n    const props = feature.properties;\n    return $24508fe2b4ce0838$var$h(\"div.feature-record\", [\n        $24508fe2b4ce0838$var$h.if(Object.keys(props).length > 0)($24508fe2b4ce0838$export$2906e7f4b228efe9, {\n            data: props\n        })\n    ]);\n}\nfunction $24508fe2b4ce0838$var$CopyJSONButton({ data: data }) {\n    const [copied, setCopied] = (0, $aOXfC$react.useState)(false);\n    return $24508fe2b4ce0838$var$h((0, $aOXfC$blueprintjscore.Button), {\n        icon: copied ? \"tick\" : \"clipboard\",\n        intent: copied ? (0, $aOXfC$blueprintjscore.Intent).SUCCESS : (0, $aOXfC$blueprintjscore.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}\nfunction $24508fe2b4ce0838$export$214daccdda0f4ac6({ selectedLocation: selectedLocation, setFeatures: setFeatures, radius: radius = 2 }) {\n    const mapRef = (0, $aOXfC$macrostratmapboxreact.useMapRef)();\n    const isLoading = (0, $aOXfC$macrostratmapboxreact.useMapStatus)((s)=>s.isLoading);\n    const isInitialized = (0, $aOXfC$macrostratmapboxreact.useMapStatus)((s)=>s.isInitialized);\n    const prevLocation = (0, $aOXfC$react.useRef)(null);\n    const prevFeatures = (0, $aOXfC$react.useRef)([]);\n    (0, $aOXfC$react.useEffect)(()=>{\n        const map = mapRef?.current;\n        if (map == null) return;\n        if (selectedLocation == null) {\n            setFeatures(null);\n            return;\n        }\n        if (!isInitialized) return;\n        const hasPreviouslyLoadedFeatures = prevFeatures.current.length > 0;\n        const locationMemo = JSON.stringify(selectedLocation);\n        if (locationMemo == prevLocation.current && hasPreviouslyLoadedFeatures) return;\n        prevLocation.current = locationMemo;\n        // Don't update if the location hasn't changed\n        //if (selectedLocation == prevLocation) return;\n        const r = radius;\n        const pt = map.project(selectedLocation);\n        const bbox = [\n            [\n                pt.x - r,\n                pt.y - r\n            ],\n            [\n                pt.x + r,\n                pt.y + r\n            ]\n        ];\n        const features = map.queryRenderedFeatures(bbox);\n        prevFeatures.current = features ?? [];\n        setFeatures(features);\n    }, [\n        isInitialized,\n        selectedLocation,\n        isLoading\n    ]);\n    return null;\n}\nfunction $24508fe2b4ce0838$var$FeatureHeader({ feature: feature }) {\n    return $24508fe2b4ce0838$var$h(\"div.feature-header\", [\n        $24508fe2b4ce0838$var$h(\"h3\", [\n            $24508fe2b4ce0838$var$h($24508fe2b4ce0838$var$KeyValue, {\n                label: \"Source\",\n                value: feature.source\n            }),\n            $24508fe2b4ce0838$var$h($24508fe2b4ce0838$var$KeyValue, {\n                label: \"Source layer\",\n                value: feature.sourceLayer\n            })\n        ])\n    ]);\n}\nfunction $24508fe2b4ce0838$var$KeyValue({ label: label, value: value }) {\n    return $24508fe2b4ce0838$var$h(\"span.key-value\", [\n        $24508fe2b4ce0838$var$h(\"span.key\", label),\n        $24508fe2b4ce0838$var$h(\"code.value\", value)\n    ]);\n}\nfunction $24508fe2b4ce0838$var$LoadingAwareFeatureSet({ features: features, sourceID: sourceID }) {\n    const map = (0, $aOXfC$macrostratmapboxreact.useMapRef)();\n    if (map?.current == null) return null;\n    const [isLoaded, setIsLoaded] = (0, $aOXfC$react.useState)(false);\n    const sourceFeatures = features.filter((d)=>d.source == \"burwell\");\n    (0, $aOXfC$react.useEffect)(()=>{\n        if (sourceFeatures.length > 0) {\n            setIsLoaded(true);\n            return;\n        }\n        const isLoaded = map.current.isSourceLoaded(sourceID);\n        setIsLoaded(isLoaded);\n        if (!isLoaded) map.current.once(\"sourcedata\", (e)=>{\n            if (e.sourceId == sourceID) setIsLoaded(true);\n        });\n    }, [\n        map.current,\n        sourceID,\n        sourceFeatures.length\n    ]);\n    if (!isLoaded) return $24508fe2b4ce0838$var$h((0, $aOXfC$blueprintjscore.Spinner));\n    return $24508fe2b4ce0838$var$h($24508fe2b4ce0838$export$617d79dae526d2cf, {\n        features: sourceFeatures\n    });\n}\nfunction $24508fe2b4ce0838$export$43c75dec9d0b96c({ feature: feature, showExtent: showExtent, setShowExtent: setShowExtent }) {\n    if (feature == null) return null;\n    const size = feature._vectorTileFeature._pbf.length;\n    return $24508fe2b4ce0838$var$h(\"div.tile-info\", [\n        $24508fe2b4ce0838$var$h(\"h3\", \"Tile\"),\n        $24508fe2b4ce0838$var$h(\"div.tile-index\", [\n            $24508fe2b4ce0838$var$h($24508fe2b4ce0838$var$KeyValue, {\n                label: \"x\",\n                value: feature._x\n            }),\n            $24508fe2b4ce0838$var$h($24508fe2b4ce0838$var$KeyValue, {\n                label: \"y\",\n                value: feature._y\n            }),\n            $24508fe2b4ce0838$var$h($24508fe2b4ce0838$var$KeyValue, {\n                label: \"z\",\n                value: feature._z\n            })\n        ]),\n        $24508fe2b4ce0838$var$h(\"div.spacer\"),\n        $24508fe2b4ce0838$var$h($24508fe2b4ce0838$var$KeyValue, {\n            label: \"Size\",\n            value: $24508fe2b4ce0838$var$formatSize(size)\n        }),\n        $24508fe2b4ce0838$var$h((0, $aOXfC$blueprintjscore.Switch), {\n            label: \"Show extent\",\n            alignIndicator: \"right\",\n            checked: showExtent,\n            onChange () {\n                setShowExtent(!showExtent);\n            }\n        })\n    ]);\n}\nfunction $24508fe2b4ce0838$var$formatSize(size) {\n    if (size > 1000000) return $24508fe2b4ce0838$var$h($24508fe2b4ce0838$var$UnitNumber, {\n        value: size / 1000000,\n        unit: \"Mb\"\n    });\n    if (size > 1000) return $24508fe2b4ce0838$var$h($24508fe2b4ce0838$var$UnitNumber, {\n        value: size / 1000,\n        unit: \"Kb\"\n    });\n    return `${size} bytes`;\n}\nfunction $24508fe2b4ce0838$var$UnitNumber({ value: value, unit: unit, precision: precision = 1 }) {\n    return $24508fe2b4ce0838$var$h(\"span.unit-number\", [\n        $24508fe2b4ce0838$var$h(\"span.number\", value.toFixed(precision)),\n        $24508fe2b4ce0838$var$h(\"span.unit\", unit)\n    ]);\n}\nfunction $24508fe2b4ce0838$export$43277c51a01761c1({ features: features, focusedSource: focusedSource = null }) {\n    if (features == null) return null;\n    let focusedSourcePanel = null;\n    let filteredFeatures = features;\n    let title = \"Features\";\n    if (focusedSource != null) {\n        title = \"Basemap features\";\n        focusedSourcePanel = $24508fe2b4ce0838$var$h((0, $1b9f6bceeea1f7c0$exports.ExpansionPanel), {\n            title: \"Macrostrat features\",\n            className: \"macrostrat-features\",\n            expanded: true\n        }, [\n            $24508fe2b4ce0838$var$h($24508fe2b4ce0838$var$LoadingAwareFeatureSet, {\n                features: features,\n                sourceID: focusedSource\n            })\n        ]);\n        filteredFeatures = features.filter((d)=>d.source != focusedSource);\n    }\n    return $24508fe2b4ce0838$var$h(\"div.feature-panel\", [\n        focusedSourcePanel,\n        $24508fe2b4ce0838$var$h((0, $1b9f6bceeea1f7c0$exports.ExpansionPanel), {\n            title: title,\n            className: \"basemap-features\",\n            expanded: focusedSource == null\n        }, [\n            $24508fe2b4ce0838$var$h($24508fe2b4ce0838$var$FeatureGroups, {\n                features: filteredFeatures\n            })\n        ])\n    ]);\n}\nfunction $24508fe2b4ce0838$var$FeatureGroups({ features: features }) {\n    /** Group features by source and sourceLayer */ if (features == null) return null;\n    const groups = (0, $aOXfC$d3array.group)(features, (d)=>`${d.source} - ${d.sourceLayer}`);\n    return $24508fe2b4ce0838$var$h(\"div.feature-groups\", Array.from(groups).map(([key, features])=>{\n        return $24508fe2b4ce0838$var$h(\"div.feature-group\", [\n            $24508fe2b4ce0838$var$h($24508fe2b4ce0838$var$FeatureHeader, {\n                feature: features[0]\n            }),\n            $24508fe2b4ce0838$var$h($24508fe2b4ce0838$export$617d79dae526d2cf, {\n                features: features\n            })\n        ]);\n    }));\n}\nfunction $24508fe2b4ce0838$export$617d79dae526d2cf({ features: features }) {\n    return $24508fe2b4ce0838$var$h(\"div.features\", features.map((feature, i)=>$24508fe2b4ce0838$var$h($24508fe2b4ce0838$export$dc87b4d46cea200d, {\n            key: i,\n            feature: feature\n        })));\n}\n\n\n//# sourceMappingURL=vector-tile-features.c02e240c.js.map\n","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","module.exports = new __parcel__URL__(\"expansion-panel.1553938f.js\").toString();"],"names":["require","$aOXfC$macrostrathyper","$parcel$interopDefault","a","__esModule","default","$parcel$global","globalThis","$parcel$modules","$parcel$inits","parcelRequire","id","exports","init","module","call","err","Error","code","register","$7gWgo","URL","__filename","toString","styled"],"version":3,"file":"vector-tile-features.c02e240c.js.map","sourceRoot":"../../../../"}
+{"mappings":"A,Q,8C,Q,+C,Q,kD,Q,qB,Q,4B,I,E,Q,qB,S,E,C,E,O,G,E,U,C,E,O,C,C,C,Q,S,Q,6B,Q,Y,I,E,W,E,C,E,E,C,E,E,E,iB,A,O,I,A,C,E,S,C,E,G,K,E,O,C,C,E,C,O,C,G,K,E,C,I,E,C,C,E,A,Q,C,C,E,C,I,E,C,G,E,Q,C,C,E,O,C,C,E,C,E,E,I,C,E,O,C,E,E,O,E,E,O,A,C,I,E,A,M,uB,E,I,O,E,I,C,mB,C,C,E,Q,C,S,C,C,C,E,C,C,E,C,C,E,E,iB,C,G,E,Q,C,I,E,E,SEAiB,IAAA,IAAoB,+CAAA,QAAA,YAAgD,QAAQ,GDUnF,AAAA,AAAA,EAAA,GAAM,MAAM,CAAC,EAAA","sources":["<anon>","packages/map-interface/src/dev/vector-tile-features.ts","../../../../.yarn/berry/cache/@parcel-runtime-js-npm-2.13.3-f44fec8492-10c0.zip/node_modules/@parcel/runtime-js/lib/runtime-1865b63dee819005.js"],"sourcesContent":["require(\"./main.module.434acaf9.js\");\nrequire(\"./main.module.29a15f3d.css\");\nrequire(\"./expansion-panel.62240ee3.js\");\nvar $aOXfC$blueprintjscore = require(\"@blueprintjs/core\");\nvar $aOXfC$macrostratmapboxreact = require(\"@macrostrat/mapbox-react\");\nvar $aOXfC$macrostrathyper = require(\"@macrostrat/hyper\");\nvar $aOXfC$react = require(\"react\");\nvar $aOXfC$macrostratuicomponents = require(\"@macrostrat/ui-components\");\nvar $aOXfC$d3array = require(\"d3-array\");\n\n\nfunction $parcel$interopDefault(a) {\n  return a && a.__esModule ? a.default : a;\n}\n\n      var $parcel$global = globalThis;\n    \nvar $parcel$modules = {};\nvar $parcel$inits = {};\n\nvar parcelRequire = $parcel$global[\"parcelRequire94c2\"];\n\nif (parcelRequire == null) {\n  parcelRequire = function(id) {\n    if (id in $parcel$modules) {\n      return $parcel$modules[id].exports;\n    }\n    if (id in $parcel$inits) {\n      var init = $parcel$inits[id];\n      delete $parcel$inits[id];\n      var module = {id: id, exports: {}};\n      $parcel$modules[id] = module;\n      init.call(module.exports, module, module.exports);\n      return module.exports;\n    }\n    var err = new Error(\"Cannot find module '\" + id + \"'\");\n    err.code = 'MODULE_NOT_FOUND';\n    throw err;\n  };\n\n  parcelRequire.register = function register(id, init) {\n    $parcel$inits[id] = init;\n  };\n\n  $parcel$global[\"parcelRequire94c2\"] = parcelRequire;\n}\n\nvar parcelRegister = parcelRequire.register;\n\n\n\n\nvar $7gWgo = parcelRequire(\"7gWgo\");\n\n\n\nvar $1b9f6bceeea1f7c0$exports = {};\n$1b9f6bceeea1f7c0$exports = new URL(\"expansion-panel.62240ee3.js\", \"file:\" + __filename).toString();\n\n\nconst $24508fe2b4ce0838$var$h = (0, ($parcel$interopDefault($aOXfC$macrostrathyper))).styled((0, (/*@__PURE__*/$parcel$interopDefault($7gWgo))));\nfunction $24508fe2b4ce0838$export$2906e7f4b228efe9({ data: 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] = (0, $aOXfC$react.useState)(false);\n    const onMouseEnter = (0, $aOXfC$react.useCallback)(()=>setShowControls(true), []);\n    const onMouseLeave = (0, $aOXfC$react.useCallback)(()=>setShowControls(false), []);\n    return $24508fe2b4ce0838$var$h(\"div.feature-properties\", {\n        onMouseEnter: onMouseEnter,\n        onMouseLeave: onMouseLeave\n    }, [\n        $24508fe2b4ce0838$var$h.if(showControls)(\"div.controls\", $24508fe2b4ce0838$var$h($24508fe2b4ce0838$var$CopyJSONButton, {\n            data: data\n        })),\n        $24508fe2b4ce0838$var$h((0, $aOXfC$macrostratuicomponents.JSONView), {\n            data: data,\n            hideRoot: true,\n            ...rest\n        })\n    ]);\n}\nfunction $24508fe2b4ce0838$export$dc87b4d46cea200d({ feature: feature }) {\n    const props = feature.properties;\n    return $24508fe2b4ce0838$var$h(\"div.feature-record\", [\n        $24508fe2b4ce0838$var$h.if(Object.keys(props).length > 0)($24508fe2b4ce0838$export$2906e7f4b228efe9, {\n            data: props\n        })\n    ]);\n}\nfunction $24508fe2b4ce0838$var$CopyJSONButton({ data: data }) {\n    const [copied, setCopied] = (0, $aOXfC$react.useState)(false);\n    return $24508fe2b4ce0838$var$h((0, $aOXfC$blueprintjscore.Button), {\n        icon: copied ? \"tick\" : \"clipboard\",\n        intent: copied ? (0, $aOXfC$blueprintjscore.Intent).SUCCESS : (0, $aOXfC$blueprintjscore.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}\nfunction $24508fe2b4ce0838$export$214daccdda0f4ac6({ selectedLocation: selectedLocation, setFeatures: setFeatures, radius: radius = 2 }) {\n    const mapRef = (0, $aOXfC$macrostratmapboxreact.useMapRef)();\n    const isLoading = (0, $aOXfC$macrostratmapboxreact.useMapStatus)((s)=>s.isLoading);\n    const isInitialized = (0, $aOXfC$macrostratmapboxreact.useMapStatus)((s)=>s.isInitialized);\n    const prevLocation = (0, $aOXfC$react.useRef)(null);\n    const prevFeatures = (0, $aOXfC$react.useRef)([]);\n    (0, $aOXfC$react.useEffect)(()=>{\n        const map = mapRef?.current;\n        if (map == null) return;\n        if (selectedLocation == null) {\n            setFeatures(null);\n            return;\n        }\n        if (!isInitialized) return;\n        const hasPreviouslyLoadedFeatures = prevFeatures.current.length > 0;\n        const locationMemo = JSON.stringify(selectedLocation);\n        if (locationMemo == prevLocation.current && hasPreviouslyLoadedFeatures) return;\n        prevLocation.current = locationMemo;\n        // Don't update if the location hasn't changed\n        //if (selectedLocation == prevLocation) return;\n        const r = radius;\n        const pt = map.project(selectedLocation);\n        const bbox = [\n            [\n                pt.x - r,\n                pt.y - r\n            ],\n            [\n                pt.x + r,\n                pt.y + r\n            ]\n        ];\n        const features = map.queryRenderedFeatures(bbox);\n        prevFeatures.current = features ?? [];\n        setFeatures(features);\n    }, [\n        isInitialized,\n        selectedLocation,\n        isLoading\n    ]);\n    return null;\n}\nfunction $24508fe2b4ce0838$var$FeatureHeader({ feature: feature }) {\n    return $24508fe2b4ce0838$var$h(\"div.feature-header\", [\n        $24508fe2b4ce0838$var$h(\"h3\", [\n            $24508fe2b4ce0838$var$h($24508fe2b4ce0838$var$KeyValue, {\n                label: \"Source\",\n                value: feature.source\n            }),\n            $24508fe2b4ce0838$var$h($24508fe2b4ce0838$var$KeyValue, {\n                label: \"Source layer\",\n                value: feature.sourceLayer\n            })\n        ])\n    ]);\n}\nfunction $24508fe2b4ce0838$var$KeyValue({ label: label, value: value }) {\n    return $24508fe2b4ce0838$var$h(\"span.key-value\", [\n        $24508fe2b4ce0838$var$h(\"span.key\", label),\n        $24508fe2b4ce0838$var$h(\"code.value\", value)\n    ]);\n}\nfunction $24508fe2b4ce0838$var$LoadingAwareFeatureSet({ features: features, sourceID: sourceID }) {\n    const map = (0, $aOXfC$macrostratmapboxreact.useMapRef)();\n    if (map?.current == null) return null;\n    const [isLoaded, setIsLoaded] = (0, $aOXfC$react.useState)(false);\n    const sourceFeatures = features.filter((d)=>d.source == \"burwell\");\n    (0, $aOXfC$react.useEffect)(()=>{\n        if (sourceFeatures.length > 0) {\n            setIsLoaded(true);\n            return;\n        }\n        const isLoaded = map.current.isSourceLoaded(sourceID);\n        setIsLoaded(isLoaded);\n        if (!isLoaded) map.current.once(\"sourcedata\", (e)=>{\n            if (e.sourceId == sourceID) setIsLoaded(true);\n        });\n    }, [\n        map.current,\n        sourceID,\n        sourceFeatures.length\n    ]);\n    if (!isLoaded) return $24508fe2b4ce0838$var$h((0, $aOXfC$blueprintjscore.Spinner));\n    return $24508fe2b4ce0838$var$h($24508fe2b4ce0838$export$617d79dae526d2cf, {\n        features: sourceFeatures\n    });\n}\nfunction $24508fe2b4ce0838$export$43c75dec9d0b96c({ feature: feature, showExtent: showExtent, setShowExtent: setShowExtent }) {\n    if (feature == null) return null;\n    const size = feature._vectorTileFeature._pbf.length;\n    return $24508fe2b4ce0838$var$h(\"div.tile-info\", [\n        $24508fe2b4ce0838$var$h(\"h3\", \"Tile\"),\n        $24508fe2b4ce0838$var$h(\"div.tile-index\", [\n            $24508fe2b4ce0838$var$h($24508fe2b4ce0838$var$KeyValue, {\n                label: \"x\",\n                value: feature._x\n            }),\n            $24508fe2b4ce0838$var$h($24508fe2b4ce0838$var$KeyValue, {\n                label: \"y\",\n                value: feature._y\n            }),\n            $24508fe2b4ce0838$var$h($24508fe2b4ce0838$var$KeyValue, {\n                label: \"z\",\n                value: feature._z\n            })\n        ]),\n        $24508fe2b4ce0838$var$h(\"div.spacer\"),\n        $24508fe2b4ce0838$var$h($24508fe2b4ce0838$var$KeyValue, {\n            label: \"Size\",\n            value: $24508fe2b4ce0838$var$formatSize(size)\n        }),\n        $24508fe2b4ce0838$var$h((0, $aOXfC$blueprintjscore.Switch), {\n            label: \"Show extent\",\n            alignIndicator: \"right\",\n            checked: showExtent,\n            onChange () {\n                setShowExtent(!showExtent);\n            }\n        })\n    ]);\n}\nfunction $24508fe2b4ce0838$var$formatSize(size) {\n    if (size > 1000000) return $24508fe2b4ce0838$var$h($24508fe2b4ce0838$var$UnitNumber, {\n        value: size / 1000000,\n        unit: \"Mb\"\n    });\n    if (size > 1000) return $24508fe2b4ce0838$var$h($24508fe2b4ce0838$var$UnitNumber, {\n        value: size / 1000,\n        unit: \"Kb\"\n    });\n    return `${size} bytes`;\n}\nfunction $24508fe2b4ce0838$var$UnitNumber({ value: value, unit: unit, precision: precision = 1 }) {\n    return $24508fe2b4ce0838$var$h(\"span.unit-number\", [\n        $24508fe2b4ce0838$var$h(\"span.number\", value.toFixed(precision)),\n        $24508fe2b4ce0838$var$h(\"span.unit\", unit)\n    ]);\n}\nfunction $24508fe2b4ce0838$export$43277c51a01761c1({ features: features, focusedSource: focusedSource = null }) {\n    if (features == null) return null;\n    let focusedSourcePanel = null;\n    let filteredFeatures = features;\n    let title = \"Features\";\n    if (focusedSource != null) {\n        title = \"Basemap features\";\n        focusedSourcePanel = $24508fe2b4ce0838$var$h((0, $1b9f6bceeea1f7c0$exports.ExpansionPanel), {\n            title: \"Macrostrat features\",\n            className: \"macrostrat-features\",\n            expanded: true\n        }, [\n            $24508fe2b4ce0838$var$h($24508fe2b4ce0838$var$LoadingAwareFeatureSet, {\n                features: features,\n                sourceID: focusedSource\n            })\n        ]);\n        filteredFeatures = features.filter((d)=>d.source != focusedSource);\n    }\n    return $24508fe2b4ce0838$var$h(\"div.feature-panel\", [\n        focusedSourcePanel,\n        $24508fe2b4ce0838$var$h((0, $1b9f6bceeea1f7c0$exports.ExpansionPanel), {\n            title: title,\n            className: \"basemap-features\",\n            expanded: focusedSource == null\n        }, [\n            $24508fe2b4ce0838$var$h($24508fe2b4ce0838$var$FeatureGroups, {\n                features: filteredFeatures\n            })\n        ])\n    ]);\n}\nfunction $24508fe2b4ce0838$var$FeatureGroups({ features: features }) {\n    /** Group features by source and sourceLayer */ if (features == null) return null;\n    const groups = (0, $aOXfC$d3array.group)(features, (d)=>`${d.source} - ${d.sourceLayer}`);\n    return $24508fe2b4ce0838$var$h(\"div.feature-groups\", Array.from(groups).map(([key, features])=>{\n        return $24508fe2b4ce0838$var$h(\"div.feature-group\", [\n            $24508fe2b4ce0838$var$h($24508fe2b4ce0838$var$FeatureHeader, {\n                feature: features[0]\n            }),\n            $24508fe2b4ce0838$var$h($24508fe2b4ce0838$export$617d79dae526d2cf, {\n                features: features\n            })\n        ]);\n    }));\n}\nfunction $24508fe2b4ce0838$export$617d79dae526d2cf({ features: features }) {\n    return $24508fe2b4ce0838$var$h(\"div.features\", features.map((feature, i)=>$24508fe2b4ce0838$var$h($24508fe2b4ce0838$export$dc87b4d46cea200d, {\n            key: i,\n            feature: feature\n        })));\n}\n\n\n//# sourceMappingURL=vector-tile-features.b5a23b71.js.map\n","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","module.exports = new __parcel__URL__(\"expansion-panel.62240ee3.js\").toString();"],"names":["require","$aOXfC$macrostrathyper","$parcel$interopDefault","a","__esModule","default","$parcel$global","globalThis","$parcel$modules","$parcel$inits","parcelRequire","id","exports","init","module","call","err","Error","code","register","$7gWgo","URL","__filename","toString","styled"],"version":3,"file":"vector-tile-features.b5a23b71.js.map","sourceRoot":"../../../../"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/map-interface",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "Map interface for Macrostrat",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -11,9 +11,9 @@
     "@blueprintjs/core": "^5.0.0",
     "@macrostrat/color-utils": "^1.0.1",
     "@macrostrat/hyper": "^3.0.6",
-    "@macrostrat/mapbox-react": "^2.5.0",
+    "@macrostrat/mapbox-react": "^2.5.1",
     "@macrostrat/mapbox-utils": "^1.4.0",
-    "@macrostrat/ui-components": "^4.1.1",
+    "@macrostrat/ui-components": "^4.1.3",
     "@mapbox/tilebelt": "^2.0.0",
     "classnames": "^2.5.1",
     "d3-array": "^3.2.4",

package/src/container.ts

@@ -118,7 +118,7 @@ function _MapAreaContainer({
   );
 
   let contextStack = null;
-  if (navbar != null && contextPanel != null) {
+  if (navbar != null || contextPanel != null) {
     contextStack = h(ContextStack, { navbar, ...contextStackProps }, [
       h.if(contextPanelTrans.shouldMount)([contextPanel]),
     ]);

package/src/expansion-panel/index.ts

@@ -20,7 +20,7 @@ function ExpansionPanelSummary(props) {
       title,
       component: titleComponent,
     },
-    [children, h(Icon, { icon })]
+    [children, h(Icon, { icon, className: "expansion-panel-icon" })]
   );
 }
 

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

@@ -1,25 +1,29 @@
 
 .panel-subhead
-  padding: 0.2em var(--box-horizontal-padding)
-  border-top: 1px solid var(--panel-rule-color)
+  padding: 0 1rem
+  border: 1px solid var(--panel-rule-color)
   border-bottom: 1px solid var(--panel-rule-color)
   background-color: var(--accent-color)
   display: flex
   flex-direction: row
   align-items: center
   z-index: 1
-  gap: var(--box-horizontal-padding)
+  gap: var(--panel-header-gap, 0.5rem)
   top: -1px
   position: sticky
+  min-height: var(--panel-header-height, 40px)
   h1, h2, h3, h4
     font-family: Montserrat,sans-serif
     font-weight: 700
-    margin: 0.2em 0
+    margin: 0
   h4
     font-weight: 600
   .title
     flex-grow: 1
 
+  .expansion-panel-icon
+    margin-right: -0.35em
+
 // :global(.bp5-dark) .panel-subhead
 //   margin 0 1px
 
@@ -48,14 +52,14 @@
   .expansion-panel-header
     background-color: var(--accent-secondary-color)
     cursor: pointer
+    padding: 0 1rem
+
     &:hover
       background-color: var(--accent-secondary-hover-color)
     h2, h3, h4
       font-weight: 500
       border-bottom: 1px solid var(--tertiary-border-color)
       border-top: 1px solid var(--tertiary-border-color)
-      margin-top: -1px
-      padding: 5px 1em 5px
       align-items: center
 
 .expansion-summary-title-help
@@ -71,12 +75,18 @@
     transform: translate(0,3px)
 
 .expansion-children
-  padding: 5px 1em 10px
+  padding: 0 1rem
   .expansion-panel
-    margin-left: -1em
-    margin-right: -1em
+    margin-left: -1rem
+    margin-right: -1rem
     &:first-child
-      margin-top: -5px
+      margin-top: 0
+  &>:first-child
+    margin-top: 1rem
+  &>:last-child
+    margin-bottom: 1rem
+
+
 
 .expansion-panel-subtext
   font-size: 85%

package/src/location-panel/header.ts

@@ -8,6 +8,7 @@ import {
   useFocusState,
   isCentered,
 } from "@macrostrat/mapbox-react";
+import classNames from "classnames";
 
 const h = hyper.styled(styles);
 
@@ -74,6 +75,9 @@ export interface InfoDrawerHeaderProps {
   elevation?: number;
   showCopyPositionButton?: boolean;
   bounds?: mapboxgl.LngLatBounds;
+  fixedHeight?: boolean;
+  children?: React.ReactNode;
+  className?: string;
 }
 
 export function InfoDrawerHeader(props: InfoDrawerHeaderProps) {
@@ -84,7 +88,9 @@ export function InfoDrawerHeader(props: InfoDrawerHeaderProps) {
     zoom = 7,
     elevation,
     showCopyPositionButton,
+    fixedHeight = false,
     children,
+    className,
   } = props;
 
   let leftButton = null;
@@ -96,23 +102,29 @@ export function InfoDrawerHeader(props: InfoDrawerHeaderProps) {
     });
   }
 
-  return h("header.location-panel-header", [
-    leftButton,
-    children,
-    h("div.spacer"),
-    h.if(position != null)(LngLatCoords, {
-      position,
-      zoom,
-      className: "infodrawer-header-item",
-    }),
-    h.if(elevation != null)(Elevation, {
-      elevation,
-      className: "infodrawer-header-item",
-    }),
-    h.if(onClose != null)(Button, {
-      minimal: true,
-      icon: "cross",
-      onClick: onClose,
-    }),
-  ]);
+  return h(
+    "header.location-panel-header",
+    {
+      className: classNames(className, { "fixed-height": fixedHeight }),
+    },
+    [
+      leftButton,
+      children,
+      h("div.spacer"),
+      h.if(position != null)(LngLatCoords, {
+        position,
+        zoom,
+        className: "infodrawer-header-item",
+      }),
+      h.if(elevation != null)(Elevation, {
+        elevation,
+        className: "infodrawer-header-item",
+      }),
+      h.if(onClose != null)(Button, {
+        minimal: true,
+        icon: "cross",
+        onClick: onClose,
+      }),
+    ]
+  );
 }

package/src/location-panel/index.ts

@@ -4,6 +4,7 @@ import classNames from "classnames";
 import styles from "./main.module.sass";
 import { ErrorBoundary } from "@macrostrat/ui-components";
 import { PanelCard } from "../container";
+import { ComponentType } from "react";
 
 const h = hyper.styled(styles);
 
@@ -12,11 +13,14 @@ export function InfoDrawerContainer(props) {
   return h(PanelCard, { ...props, className });
 }
 
+type Component = string | ComponentType<any>;
+
 interface BaseInfoDrawerProps extends InfoDrawerHeaderProps {
   className?: string;
   title?: string;
   headerElement?: JSX.Element;
   children?: React.ReactNode;
+  contentContainer?: Component;
 }
 
 export function BaseInfoDrawer(props: BaseInfoDrawerProps) {
@@ -26,6 +30,7 @@ export function BaseInfoDrawer(props: BaseInfoDrawerProps) {
     title,
     onClose,
     children,
+    contentContainer = "div.infodrawer-contents",
     ...rest
   } = props;
   const header =
@@ -35,10 +40,7 @@ export function BaseInfoDrawer(props: BaseInfoDrawerProps) {
     ]);
   return h(InfoDrawerContainer, { className }, [
     header,
-    h(
-      "div.infodrawer-body",
-      h("div.infodrawer-contents", h(ErrorBoundary, null, children))
-    ),
+    h("div.infodrawer-body", h(ErrorBoundary, h(contentContainer, children))),
   ]);
 }
 

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

@@ -9,12 +9,16 @@
   display: flex
   flex-direction: row
   align-items: center
-  gap: 1em
-  min-height: 40px
+  gap: var(--panel-header-gap, 0.5rem)
+  min-height: var(--panel-header-height, 40px)
   border-bottom: 1px solid var(--panel-rule-color)
+  &.fixed-height
+    height: var(--panel-header-height, 40px)
 
   .spacer
     flex-grow: 1
+    // Ensure the spacer is not extra wide
+    margin-right: calc(-1 * var(--panel-header-gap, 0.5rem))
 
   .left-icon
     padding: 7px
@@ -25,6 +29,9 @@
   // Text elements should
   h1, h2, h3, h4, h5, h6, p
     margin: 0
+    font-size: 16px
+    overflow: hidden
+    text-overflow: ellipsis
     &:first-child
       margin-left: 10px
 
@@ -42,7 +49,7 @@
   height: fit-content
   display: flex
   flex-direction: column
-  overflow: hidden
+  overflow-y: hidden
   background-color: var(--panel-background-color)
 
   &:global(.bp5-card)
@@ -57,8 +64,13 @@
 
 
 .infodrawer-contents
-  padding: 0 1em 1em
+  padding: 0 1em
+  &>:first-child
+    margin-top: 1rem
+  &>:last-child
+    margin-bottom: 1rem
 
+// The scrollable body of the infodrawer
 .infodrawer-body
   flex-shrink: 1
   min-height: 0

package/src/{map-view/index.ts → map-view.ts}

@@ -3,25 +3,30 @@ import {
   useMapRef,
   useMapDispatch,
   useMapPosition,
+  setup3DTerrain,
+  use3DTerrain,
+  addTerrainToStyle,
 } from "@macrostrat/mapbox-react";
 import {
   mapViewInfo,
   MapPosition,
   setMapPosition,
+  getMapPosition,
+  getMapboxStyle,
 } from "@macrostrat/mapbox-utils";
 import classNames from "classnames";
 import mapboxgl from "mapbox-gl";
-import { useEffect, useRef, useCallback } from "react";
-import styles from "../main.module.sass";
-import { enable3DTerrain } from "./terrain";
+import { useEffect, useRef } from "react";
+import styles from "./main.module.sass";
 import {
   MapLoadingReporter,
   MapMovedReporter,
   MapPaddingManager,
   MapResizeManager,
-} from "../helpers";
+} from "./helpers";
 import "mapbox-gl/dist/mapbox-gl.css";
-import { getMapPadding } from "../utils";
+import { getMapPadding } from "./utils";
+import { useAsyncEffect } from "@macrostrat/ui-components";
 
 const h = hyper.styled(styles);
 
@@ -116,16 +121,45 @@ export function MapView(props: MapViewProps) {
   const ref = useRef<HTMLDivElement>();
   const parentRef = useRef<HTMLDivElement>();
 
-  useEffect(() => {
+  useAsyncEffect(async () => {
+    /** Manager to update map style */
     if (style == null) return;
     let map = mapRef.current;
+
+    /** If we can, we try to update the map style with terrain information
+     * immediately, before the style is loaded. This allows us to avoid a
+     * flash of the map without terrain.
+     *
+     * To do this, we need to estimate the map position before load, which
+     * doesn't always work.
+     */
+    // We either get the map position directly from the map or from props
+    const estMapPosition: MapPosition | null =
+      map == null ? mapPosition : getMapPosition(map);
+    let newStyle = style;
+    const { mapUse3D } = mapViewInfo(estMapPosition);
+
+    /** If style is a string, we can't update it with terrain layers immediately.
+     * We need to wait for the style to load and then update it.
+     */
+    if (typeof style === "string") {
+      newStyle = await getMapboxStyle(style, {
+        access_token: mapboxgl.accessToken,
+      });
+    }
+
+    if (mapUse3D) {
+      // We can update the style with terrain layers immediately
+      newStyle = addTerrainToStyle(newStyle as mapboxgl.Style, terrainSourceID);
+    }
+
     if (map != null) {
-      console.log("Setting style", style);
-      map.setStyle(style);
+      console.log("Setting style", newStyle);
+      map.setStyle(newStyle);
     } else {
-      console.log("Initializing map", style);
+      console.log("Initializing map", newStyle);
       const map = initializeMap(ref.current, {
-        style,
+        style: newStyle,
         projection,
         mapPosition,
         transformRequest,
@@ -138,11 +172,13 @@ export function MapView(props: MapViewProps) {
 
     const loadCallback = () => {
       onStyleLoaded?.(map);
+      // Set initial terrain state
       dispatch({ type: "set-style-loaded", payload: true });
     };
 
     map = mapRef.current;
-    if (map.isStyleLoaded()) {
+
+    if (map.style?._loaded) {
       // Catch a race condition where the style is loaded before the callback is set
       loadCallback();
     }
@@ -174,7 +210,7 @@ export function MapView(props: MapViewProps) {
     h(MapMovedReporter, { onMapMoved }),
     h(MapResizeManager, { containerRef: ref }),
     h(MapPaddingManager, { containerRef: ref, parentRef, infoMarkerPosition }),
-    h(MapTerrainManager, { mapUse3D, terrainSourceID }),
+    h(MapTerrainManager, { mapUse3D, terrainSourceID, style }),
     children,
   ]);
 }
@@ -182,16 +218,13 @@ export function MapView(props: MapViewProps) {
 export function MapTerrainManager({
   mapUse3D,
   terrainSourceID,
+  style,
 }: {
   mapUse3D?: boolean;
   terrainSourceID?: string;
+  style?: mapboxgl.Style | string;
 }) {
-  const mapRef = useMapRef();
+  use3DTerrain(mapUse3D, terrainSourceID);
 
-  useEffect(() => {
-    const map = mapRef.current;
-    if (map == null) return;
-    enable3DTerrain(map, mapUse3D, terrainSourceID);
-  }, [mapRef.current, mapUse3D]);
   return null;
 }

package/dist/cjs/expansion-panel.08532cee.js.map

@@ -1 +0,0 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,0BAAI,CAAA,GAAA,gDAAI,EAAE,MAAM,CAAC,CAAA,GAAA,mDAAK;AAE5B,SAAS,0CAAsB,KAAK;IAClC,MAAM,YAAE,QAAQ,YAAE,QAAQ,YAAE,QAAQ,aAAE,SAAS,SAAE,KAAK,kBAAE,cAAc,EAAE,GACtE;IACF,MAAM,OAAO,WAAW,eAAe;IACvC,OAAO,wBACL,CAAA,GAAA,sCAAW,GACX;QACE,WAAW,CAAA,GAAA,2CAAS,EAAE,0BAA0B;QAChD,SAAS;eACT;QACA,WAAW;IACb,GACA;QAAC;QAAU,wBAAE,CAAA,GAAA,2BAAG,GAAG;kBAAE;QAAK;KAAG;AAEjC;AAEA,SAAS,yCAAmB,KAAK;IAC/B,IAAI,SACF,KAAK,kBACL,iBAAiB,gBACjB,QAAQ,YACR,QAAQ,YACR,QAAQ,YACR,WAAW,KAAO,kBAClB,gBAAgB,iBAChB,SAAS,EACV,GAAG;IACJ,MAAM,CAAC,QAAQ,QAAQ,GAAG,CAAA,GAAA,qBAAO,EAAE,YAAY;IAE/C,MAAM,YAAY;QAChB;QACA,QAAQ,CAAC;IACX;IAEA,OAAO,wBACL,4BACA;QACE,WAAW,CAAA,GAAA,2CAAS,EAAE,WAAW;YAC/B,UAAU;YACV,WAAW,CAAC;QACd;IACF,GACA;QACE,wBACE,2CACA;YACE,UAAU;YACV,UAAU;mBACV;4BACA;QACF,GACA,wBAAE,oCAAoC;YACpC,wBAAE,gCAAgC;YAClC;YACA;SACD;QAEH,wBAAE,CAAA,GAAA,+BAAO,GAAG;oBAAE;QAAO,GAAG,wBAAE,0BAA0B,MAAM;KAC3D;AAEL;AAEO,SAAS,0CAAiB,KAAK;IACpC,IAAI,SAAE,KAAK,YAAE,QAAQ,aAAE,SAAS,iBAAE,gBAAgB,MAAM,GAAG;IAC3D,OAAO,wBAAE,0BAA0B;mBAAE;IAAU,GAAG;QAChD,wBAAE,qBAAqB,MAAM,iBAAiB,wBAAE,MAAM;QACtD,wBAAE,qBAAqB,MAAM;KAC9B;AACH;AAEA,SAAS,0CAAe,KAAK;IAC3B,OAAO,wBAAE,0CAAoB;QAC3B,GAAG,KAAK;QACR,WAAW;IACb;AACF;AAEA,SAAS,0CAAkB,KAAK;IAC9B,OAAO,wBAAE,0CAAoB;QAC3B,GAAG,KAAK;QACR,WAAW;QACX,gBAAgB;IAClB;AACF;AAEA,SAAS,0CAAuB,KAAK;IACnC,IAAI,SAAE,KAAK,YAAE,QAAQ,SAAE,KAAK,iBAAE,aAAa,aAAE,SAAS,EAAE,GAAG;IAC3D,MAAM,CAAC,QAAQ,UAAU,GAAG,CAAA,GAAA,qBAAO,EAAE;IACrC,kBAAkB,wBAAE;QAAC,wBAAE,aAAa;QAAQ;KAAM;IAClD,OAAO,wBAAE,0BAA0B;mBAAE;IAAU,GAAG;QAChD,wBAAE,+BAA+B;YAC/B,wBAAE,iCAAiC;YACnC,wBAAE,iCAAiC;gBACjC,wBAAE,CAAA,GAAA,6BAAK,GAAG;oBACR,OAAO;oBACP,SAAS;oBACT,QAAQ;oBACR,SAAS,IAAM,UAAU,CAAC;oBAC1B,MAAM;gBACR;aACD;SACF;QACD,wBACE,CAAA,GAAA,+BAAO,GACP;oBAAE;QAAO,GACT,wBAAE,mCAAmC,MAAM;KAE9C;AACH;AAEA,SAAS,0CAAc,SAAE,KAAK,aAAE,SAAS,YAAE,QAAQ,EAAE;IACnD,OAAO,wBAAE,sBAAsB;mBAAE;IAAU,GAAG;QAC5C,wBAAE,qCAAqC;QACvC,wBAAE,mCAAmC,MAAM;KAC5C;AACH","sources":["packages/map-interface/src/expansion-panel/index.ts"],"sourcesContent":["import { useState } from \"react\";\nimport { Collapse, Icon } from \"@blueprintjs/core\";\nimport hyper from \"@macrostrat/hyper\";\nimport styles from \"./main.module.sass\";\nimport classNames from \"classnames\";\nimport { Button } from \"@blueprintjs/core\";\nimport { PanelSubhead } from \"./headers\";\n\nconst h = hyper.styled(styles);\n\nfunction ExpansionPanelSummary(props) {\n  const { expanded, children, onChange, className, title, titleComponent } =\n    props;\n  const icon = expanded ? \"chevron-up\" : \"chevron-down\";\n  return h(\n    PanelSubhead,\n    {\n      className: classNames(\"expansion-panel-header\", className),\n      onClick: onChange,\n      title,\n      component: titleComponent,\n    },\n    [children, h(Icon, { icon })]\n  );\n}\n\nfunction ExpansionPanelBase(props) {\n  let {\n    title,\n    titleComponent = \"h3\",\n    children,\n    expanded,\n    helpText,\n    onChange = () => {},\n    sideComponent = null,\n    className,\n  } = props;\n  const [isOpen, setOpen] = useState(expanded || false);\n\n  const onChange_ = () => {\n    onChange();\n    setOpen(!isOpen);\n  };\n\n  return h(\n    \"div.expansion-panel-base\",\n    {\n      className: classNames(className, {\n        expanded: isOpen,\n        collapsed: !isOpen,\n      }),\n    },\n    [\n      h(\n        ExpansionPanelSummary,\n        {\n          onChange: onChange_,\n          expanded: isOpen,\n          title,\n          titleComponent,\n        },\n        h(\"div.expansion-summary-title-help\", [\n          h(\"span.expansion-panel-subtext\", helpText),\n          \" \",\n          sideComponent,\n        ])\n      ),\n      h(Collapse, { isOpen }, h(\"div.expansion-children\", null, children)),\n    ]\n  );\n}\n\nexport function InfoPanelSection(props) {\n  let { title, children, className, headerElement = null } = props;\n  return h(\"div.info-panel-section\", { className }, [\n    h(\"div.panel-subhead\", null, headerElement ?? h(\"h3\", title)),\n    h(\"div.panel-content\", null, children),\n  ]);\n}\n\nfunction ExpansionPanel(props) {\n  return h(ExpansionPanelBase, {\n    ...props,\n    className: \"expansion-panel\",\n  });\n}\n\nfunction SubExpansionPanel(props) {\n  return h(ExpansionPanelBase, {\n    ...props,\n    className: \"expansion-panel sub-expansion-panel\",\n    titleComponent: \"h4\",\n  });\n}\n\nfunction ExpandableDetailsPanel(props) {\n  let { title, children, value, headerElement, className } = props;\n  const [isOpen, setIsOpen] = useState(false);\n  headerElement ??= h([h(\"div.title\", title), value]);\n  return h(\"div.expandable-details\", { className }, [\n    h(\"div.expandable-details-main\", [\n      h(\"div.expandable-details-header\", headerElement),\n      h(\"div.expandable-details-toggle\", [\n        h(Button, {\n          small: true,\n          minimal: true,\n          active: isOpen,\n          onClick: () => setIsOpen(!isOpen),\n          icon: \"more\",\n        }),\n      ]),\n    ]),\n    h(\n      Collapse,\n      { isOpen },\n      h(\"div.expandable-details-children\", null, children)\n    ),\n  ]);\n}\n\nfunction ExpansionBody({ title, className, children }) {\n  return h(\"div.expansion-body\", { className }, [\n    h(\"div.expansion-panel-detail-header\", title),\n    h(\"div.expansion-panel-detail-body\", null, children),\n  ]);\n}\n\nexport {\n  ExpansionPanel,\n  ExpansionPanelSummary,\n  ExpandableDetailsPanel,\n  SubExpansionPanel,\n  ExpansionBody,\n  PanelSubhead,\n};\n"],"names":[],"version":3,"file":"expansion-panel.08532cee.js.map"}

package/dist/cjs/header.58c5c012.js.map

@@ -1 +0,0 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,0BAAI,CAAA,GAAA,gDAAI,EAAE,MAAM,CAAC,CAAA,GAAA,mDAAK;AAE5B,SAAS,qCAAe,YAAE,QAAQ,UAAE,MAAM,gBAAE,eAAe,OAAO;IAChE,MAAM,aAAa,CAAA,GAAA,0CAAY,EAAE;IAEjC,MAAM,oBAAoB,CAAA,GAAA,uCAAS,EAAE,eAAe;IAEpD,OAAO,wBAAE,yBAAyB;QAChC,wBAAE,CAAA,GAAA,gDAAkB,GAAG;YAAE,UAAU;oBAAU;wBAAQ;QAAW,GAAG,EAAE;QACrE,wBAAE,EAAE,CAAC,qBAAqB,YAAY,MAAM,sCAAgB;YAC1D,UAAU;QACZ;KACD;AACH;AAEA,SAAS,qCAAe,YAAE,QAAQ,YAAE,QAAQ,WAAE,OAAO,EAAE,GAAG,MAAM;IAC9D,MAAM,UAAU,CAAA,GAAA,wCAAS;IAEzB,IAAI,UAAU,CAAC,WAAW,CAAC;IAC3B,IAAI,YAAY,MACd,WAAW,CAAC,IAAI,EAAE,UAAU;IAE9B,WAAW;IAEX,OAAO,wBACL,CAAA,GAAA,6BAAK,GACL;QACE,WAAW;QACX,WAAW,wBAAE,CAAA,GAAA,2BAAG,GAAG;YAAE,MAAM;YAAQ,MAAM;QAAG;QAC5C,SAAS;QACT,OAAO;QACP;YACE,UAAU,SAAS,CAAC,SAAS,CAAC,OAAO,QAAQ,CAAC,IAAI,EAAE,IAAI,CACtD;gBACE,SAAS,KAAK;6BACZ;oBACA,QAAQ;oBACR,MAAM;oBACN,SAAS;gBACX;gBACA;YACF,GACA;gBACE,SAAS,KAAK;oBACZ,SAAS;oBACT,QAAQ;oBACR,MAAM;oBACN,SAAS;gBACX;YACF;QAEJ;QACA,GAAG,IAAI;IACT,GACA,YAAY;AAEhB;AAWO,SAAS,0CAAiB,KAA4B;IAC3D,MAAM,WACJ,OAAO,YACP,QAAQ,UACR,MAAM,QACN,OAAO,cACP,SAAS,0BACT,sBAAsB,YACtB,QAAQ,EACT,GAAG;IAEJ,IAAI,aAAa;IACjB,IAAI,UAAU,QAAQ,YAAY,MAChC,aAAa,wBAAE,sCAAgB;kBAC7B;gBACA;QACA,cAAc;IAChB;IAGF,OAAO,wBAAE,gCAAgC;QACvC;QACA;QACA,wBAAE;QACF,wBAAE,EAAE,CAAC,YAAY,MAAM,CAAA,GAAA,sCAAW,GAAG;sBACnC;kBACA;YACA,WAAW;QACb;QACA,wBAAE,EAAE,CAAC,aAAa,MAAM,CAAA,GAAA,mCAAQ,GAAG;uBACjC;YACA,WAAW;QACb;QACA,wBAAE,EAAE,CAAC,WAAW,MAAM,CAAA,GAAA,6BAAK,GAAG;YAC5B,SAAS;YACT,MAAM;YACN,SAAS;QACX;KACD;AACH","sources":["packages/map-interface/src/location-panel/header.ts"],"sourcesContent":["import { Icon, Button } from \"@blueprintjs/core\";\nimport hyper from \"@macrostrat/hyper\";\nimport styles from \"./main.module.sass\";\nimport { useToaster } from \"@macrostrat/ui-components\";\nimport { LngLatCoords, Elevation } from \"../location-info\";\nimport {\n  LocationFocusButton,\n  useFocusState,\n  isCentered,\n} from \"@macrostrat/mapbox-react\";\n\nconst h = hyper.styled(styles);\n\nfunction PositionButton({ position, bounds, showCopyLink = false }) {\n  const focusState = useFocusState(position);\n\n  const copyLinkIsVisible = isCentered(focusState) && showCopyLink;\n\n  return h(\"div.position-controls\", [\n    h(LocationFocusButton, { location: position, bounds, focusState }, []),\n    h.if(copyLinkIsVisible && position != null)(CopyLinkButton, {\n      itemName: \"position\",\n    }),\n  ]);\n}\n\nfunction CopyLinkButton({ itemName, children, onClick, ...rest }) {\n  const toaster = useToaster();\n\n  let message = `Copied link`;\n  if (itemName != null) {\n    message += ` to ${itemName}`;\n  }\n  message += \"!\";\n\n  return h(\n    Button,\n    {\n      className: \"copy-link-button\",\n      rightIcon: h(Icon, { icon: \"link\", size: 12 }),\n      minimal: true,\n      small: true,\n      onClick() {\n        navigator.clipboard.writeText(window.location.href).then(\n          () => {\n            toaster?.show({\n              message,\n              intent: \"success\",\n              icon: \"clipboard\",\n              timeout: 1000,\n            });\n            onClick?.();\n          },\n          () => {\n            toaster?.show({\n              message: \"Failed to copy link\",\n              intent: \"danger\",\n              icon: \"error\",\n              timeout: 1000,\n            });\n          }\n        );\n      },\n      ...rest,\n    },\n    children ?? \"Copy link\"\n  );\n}\n\nexport interface InfoDrawerHeaderProps {\n  onClose?: () => void;\n  position?: mapboxgl.LngLat;\n  zoom?: number;\n  elevation?: number;\n  showCopyPositionButton?: boolean;\n  bounds?: mapboxgl.LngLatBounds;\n}\n\nexport function InfoDrawerHeader(props: InfoDrawerHeaderProps) {\n  const {\n    onClose,\n    position,\n    bounds,\n    zoom = 7,\n    elevation,\n    showCopyPositionButton,\n    children,\n  } = props;\n\n  let leftButton = null;\n  if (bounds != null || position != null) {\n    leftButton = h(PositionButton, {\n      position,\n      bounds,\n      showCopyLink: showCopyPositionButton,\n    });\n  }\n\n  return h(\"header.location-panel-header\", [\n    leftButton,\n    children,\n    h(\"div.spacer\"),\n    h.if(position != null)(LngLatCoords, {\n      position,\n      zoom,\n      className: \"infodrawer-header-item\",\n    }),\n    h.if(elevation != null)(Elevation, {\n      elevation,\n      className: \"infodrawer-header-item\",\n    }),\n    h.if(onClose != null)(Button, {\n      minimal: true,\n      icon: \"cross\",\n      onClick: onClose,\n    }),\n  ]);\n}\n"],"names":[],"version":3,"file":"header.58c5c012.js.map"}

package/dist/cjs/location-panel.c95f5e96.js.map

@@ -1 +0,0 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,0BAAI,CAAA,GAAA,gDAAI,EAAE,MAAM,CAAC,CAAA,GAAA,mDAAK;AAErB,SAAS,0CAAoB,KAAK;IACvC,MAAM,YAAY,CAAA,GAAA,2CAAS,EAAE,cAAc,MAAM,SAAS;IAC1D,OAAO,wBAAE,CAAA,GAAA,mCAAQ,GAAG;QAAE,GAAG,KAAK;mBAAE;IAAU;AAC5C;AASO,SAAS,0CAAe,KAA0B;IACvD,MAAM,aACJ,SAAS,iBACT,gBAAgB,aAChB,KAAK,WACL,OAAO,YACP,QAAQ,EACR,GAAG,MACJ,GAAG;IACJ,MAAM,SACJ,iBACA,wBAAE,CAAA,GAAA,0CAAe,GAAG;iBAAE;QAAS,GAAG,IAAI;IAAC,GAAG;QACxC,SAAS,OAAO,OAAO,wBAAE,MAAM;YAAC;SAAM;KACvC;IACH,OAAO,wBAAE,2CAAqB;mBAAE;IAAU,GAAG;QAC3C;QACA,wBACE,uBACA,wBAAE,2BAA2B,wBAAE,CAAA,GAAA,2CAAY,GAAG,MAAM;KAEvD;AACH;AAEO,MAAM,4CAAe;AAErB,SAAS,0CAAc,KAAK;IACjC,MAAM,YAAE,QAAQ,aAAE,SAAS,WAAE,UAAU,OAAO,GAAG,MAAM,GAAG;IAC1D,MAAM,MAAM,CAAA,GAAA,2CAAS,EAAE,kBAAkB,WAAW;iBAAE;IAAQ;IAC9D,OAAO,wBAAE,2CAAgB;QAAE,WAAW;QAAK,GAAG,IAAI;IAAC,GAAG;AACxD","sources":["packages/map-interface/src/location-panel/index.ts"],"sourcesContent":["import hyper from \"@macrostrat/hyper\";\nimport { InfoDrawerHeader, InfoDrawerHeaderProps } from \"./header\";\nimport classNames from \"classnames\";\nimport styles from \"./main.module.sass\";\nimport { ErrorBoundary } from \"@macrostrat/ui-components\";\nimport { PanelCard } from \"../container\";\n\nconst h = hyper.styled(styles);\n\nexport function InfoDrawerContainer(props) {\n  const className = classNames(\"infodrawer\", props.className);\n  return h(PanelCard, { ...props, className });\n}\n\ninterface BaseInfoDrawerProps extends InfoDrawerHeaderProps {\n  className?: string;\n  title?: string;\n  headerElement?: JSX.Element;\n  children?: React.ReactNode;\n}\n\nexport function BaseInfoDrawer(props: BaseInfoDrawerProps) {\n  const {\n    className,\n    headerElement = null,\n    title,\n    onClose,\n    children,\n    ...rest\n  } = props;\n  const header =\n    headerElement ??\n    h(InfoDrawerHeader, { onClose, ...rest }, [\n      title == null ? null : h(\"h3\", [title]),\n    ]);\n  return h(InfoDrawerContainer, { className }, [\n    header,\n    h(\n      \"div.infodrawer-body\",\n      h(\"div.infodrawer-contents\", h(ErrorBoundary, null, children))\n    ),\n  ]);\n}\n\nexport const DetailsPanel = BaseInfoDrawer;\n\nexport function LocationPanel(props) {\n  const { children, className, loading = false, ...rest } = props;\n  const cls = classNames(\"location-panel\", className, { loading });\n  return h(BaseInfoDrawer, { className: cls, ...rest }, children);\n}\n"],"names":[],"version":3,"file":"location-panel.c95f5e96.js.map"}

package/dist/cjs/main.module.02c4de16.css.map

@@ -1 +0,0 @@
-{"mappings":"AAAA;;;;AAGE;;;;AAGF;;;;;;;;;;AASE;;;;AAGA;;;;AAGA;;;;AAIA;;;;AAEE;;;;AAGJ;;;;AAGE;;;;;AAIF;;;;;;;;;;;AAUE;;;;;AAME;;;;;AAKJ;;;;AAGA;;;;;;;;AAQA;EACE","sources":["packages/map-interface/src/location-panel/main.module.sass"],"sourcesContent":[".copy-link-button:global(.bp5-minimal.bp5-button)\n  color: var(--text-subtle-color)\n\n  svg\n    fill: var(--text-subtle-color)\n\n.location-panel-header\n  padding: 5px\n  display: flex\n  flex-direction: row\n  align-items: center\n  gap: 1em\n  min-height: 40px\n  border-bottom: 1px solid var(--panel-rule-color)\n\n  .spacer\n    flex-grow: 1\n\n  .left-icon\n    padding: 7px\n\n  .position-controls :global(.bp5-button)\n    font-size: 12px !important\n\n  // Text elements should\n  h1, h2, h3, h4, h5, h6, p\n    margin: 0\n    &:first-child\n      margin-left: 10px\n\n.infodrawer-header-item\n  font-size: 12px\n\n  :global(.secondary)\n    font-size: 0.9em\n    color: var(--text-subtle-color)\n\n.infodrawer\n  pointer-events: all\n  max-height: 100%\n  max-width: 100%\n  height: fit-content\n  display: flex\n  flex-direction: column\n  overflow: hidden\n  background-color: var(--panel-background-color)\n\n  &:global(.bp5-card)\n    padding: 0\n    background-color: var(--panel-background-color)\n\n\n  &.loading\n    .infodrawer-body\n      overflow-y: hidden\n      min-height: 70px\n\n\n.infodrawer-contents\n  padding: 0 1em 1em\n\n.infodrawer-body\n  flex-shrink: 1\n  min-height: 0\n  transition: min-height 0.5s ease\n  overflow-y: scroll\n  position: relative\n\n// TODO: remove this when we have a better way to handle card media queries\n@media screen and (max-width: 768px)\n  .infodrawer\n    border-radius: var(--panel-border-radius, 0px)\n"],"names":[],"version":3,"file":"main.module.02c4de16.css.map"}

package/dist/cjs/main.module.3f2b7c9f.js.map

@@ -1 +0,0 @@
-{"mappings":";;;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AATA,4CAAqC,CAAC,uBAAuB,CAAC;AAC9D,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAoC,CAAC,sBAAsB,CAAC;AAC5D,4CAAwC,CAAC,0BAA0B,CAAC;AACpE,4CAA2C,CAAC,6BAA6B,CAAC;AAC1E,4CAA8B,CAAC,gBAAgB,CAAC;AAChD,4CAA4B,CAAC,cAAc,CAAC;AAC5C,4CAA0C,CAAC,4BAA4B,CAAC;AACxE,2CAAsC,CAAC,wBAAwB,CAAC;AAChE,4CAA2B,CAAC,aAAa,CAAC","sources":["packages/map-interface/src/location-panel/main.module.sass"],"sourcesContent":[".copy-link-button:global(.bp5-minimal.bp5-button)\n  color: var(--text-subtle-color)\n\n  svg\n    fill: var(--text-subtle-color)\n\n.location-panel-header\n  padding: 5px\n  display: flex\n  flex-direction: row\n  align-items: center\n  gap: 1em\n  min-height: 40px\n  border-bottom: 1px solid var(--panel-rule-color)\n\n  .spacer\n    flex-grow: 1\n\n  .left-icon\n    padding: 7px\n\n  .position-controls :global(.bp5-button)\n    font-size: 12px !important\n\n  // Text elements should\n  h1, h2, h3, h4, h5, h6, p\n    margin: 0\n    &:first-child\n      margin-left: 10px\n\n.infodrawer-header-item\n  font-size: 12px\n\n  :global(.secondary)\n    font-size: 0.9em\n    color: var(--text-subtle-color)\n\n.infodrawer\n  pointer-events: all\n  max-height: 100%\n  max-width: 100%\n  height: fit-content\n  display: flex\n  flex-direction: column\n  overflow: hidden\n  background-color: var(--panel-background-color)\n\n  &:global(.bp5-card)\n    padding: 0\n    background-color: var(--panel-background-color)\n\n\n  &.loading\n    .infodrawer-body\n      overflow-y: hidden\n      min-height: 70px\n\n\n.infodrawer-contents\n  padding: 0 1em 1em\n\n.infodrawer-body\n  flex-shrink: 1\n  min-height: 0\n  transition: min-height 0.5s ease\n  overflow-y: scroll\n  position: relative\n\n// TODO: remove this when we have a better way to handle card media queries\n@media screen and (max-width: 768px)\n  .infodrawer\n    border-radius: var(--panel-border-radius, 0px)\n"],"names":[],"version":3,"file":"main.module.3f2b7c9f.js.map"}

package/dist/cjs/main.module.4ecbaaa5.js.map

@@ -1 +0,0 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AAjBA,4CAAkC;AAClC,4CAA0B;AAC1B,4CAAuC;AACvC,4CAAoC;AACpC,4CAAwC;AACxC,4CAA2C;AAC3C,4CAAiD;AACjD,4CAAuC;AACvC,4CAA4C;AAC5C,4CAA4C;AAC5C,4CAA8C;AAC9C,4CAAgD;AAChD,4CAA8C;AAC9C,4CAAuC;AACvC,4CAAoC;AACpC,4CAAmC;AACnC,4CAAkD;AAClD,4CAAgD","sources":["packages/map-interface/src/expansion-panel/main.module.sass"],"sourcesContent":["\n.panel-subhead\n  padding: 0.2em var(--box-horizontal-padding)\n  border-top: 1px solid var(--panel-rule-color)\n  border-bottom: 1px solid var(--panel-rule-color)\n  background-color: var(--accent-color)\n  display: flex\n  flex-direction: row\n  align-items: center\n  z-index: 1\n  gap: var(--box-horizontal-padding)\n  top: -1px\n  position: sticky\n  h1, h2, h3, h4\n    font-family: Montserrat,sans-serif\n    font-weight: 700\n    margin: 0.2em 0\n  h4\n    font-weight: 600\n  .title\n    flex-grow: 1\n\n// :global(.bp5-dark) .panel-subhead\n//   margin 0 1px\n\n.info-panel-section\n  &>.panel-subhead\n    margin: -1px calc(var(--panel-padding-h) * -1) 0\n\n.expansion-panel\n  padding: 0\n  flex-wrap: wrap\n  margin-top: -1px\n  // &.collapsed\n  //   .expansion-panel-header\n  //     border-bottom-width: 0;\n\n.sub-expansion-panel\n  margin: -1px calc(var(--panel-padding-h) * -0.5) 0\n  overflow: hidden\n  &:first-child\n    .expansion-panel-header\n      border-top-width: 0\n  .panel-subhead\n    border-top: none\n    border-bottom: none\n\n  .expansion-panel-header\n    background-color: var(--accent-secondary-color)\n    cursor: pointer\n    &:hover\n      background-color: var(--accent-secondary-hover-color)\n    h2, h3, h4\n      font-weight: 500\n      border-bottom: 1px solid var(--tertiary-border-color)\n      border-top: 1px solid var(--tertiary-border-color)\n      margin-top: -1px\n      padding: 5px 1em 5px\n      align-items: center\n\n.expansion-summary-title-help\n  margin-left: 5px\n  :global(.bp5-icon)\n    margin-left: 5px\n\n.expansion-panel-header\n  cursor: pointer\n  &:hover\n    background-color: var(--accent-hover-color)\n  :global(.bp5-icon)\n    transform: translate(0,3px)\n\n.expansion-children\n  padding: 5px 1em 10px\n  .expansion-panel\n    margin-left: -1em\n    margin-right: -1em\n    &:first-child\n      margin-top: -5px\n\n.expansion-panel-subtext\n  font-size: 85%\n  font-weight: 400\n\n:global\n  .expansion-panel-root\n    padding-left: 15px !important\n\n  .expansion-panel-detail\n    display: block !important\n    padding: 0 !important\n\n  .expansion-panel-detail-sub\n    display: block !important\n\n// New expandable panel for details\n.expandable-details-main\n  display: flex\n  flex-direction: row\n  align-items: center\n  justify-content: space-between\n  margin: 3px 0\n\n.expandable-details-header\n  display: inline-flex\n  flex-direction: row\n  align-items: baseline\n  flex-grow: 1\n\n.expandable-details-children\n  position: relative\n\n.expandable-details-toggle\n  :global(.bp5-button)\n    font-size: 10px\n\n.expandable-details\n  &.macrostrat-unit\n    .title:after\n      content: none\n  .title\n    margin-right: 1em\n    &:after\n      content: \":\"\n\n.expansion-body\n  display: inline-block\n  //flex-direction row\n  align-items: baseline\n  background-color: var(--tertiary-background)\n  padding: 2px 6px\n  border-radius: 4px\n  width: 100%\n  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.2)\n  margin-bottom: 6px\n\n.expansion-panel-detail-header\n  font-size: 90%\n  font-style: italic\n  margin-right: 1em\n  display: inline\n  color: var(--secondary-color)\n  &:after\n    content: \":\"\n\n.expansion-panel-detail-body\n  display: inline\n"],"names":[],"version":3,"file":"main.module.4ecbaaa5.js.map"}

package/dist/cjs/main.module.ff1b1aca.css.map

@@ -1 +0,0 @@
-{"mappings":"AACA;;;;;;;;;;;;;;AAYE;;;;;;AAIA;;;;AAEA;;;;;;;;;;;;;;AAaA;;;;;AAMA;;;;AAGE;;;;;AAGA;;;;;AAIA;;;;AAEA;;;;;;;;;AAOE;;;;;;;;;;;;AASJ;;;;AAEE;;;;AAEA;;;;;AAGF;;;;AAEE;;;;;AAGE;;;;AAEN;;;;;;;;;;;;;;;;;;;;;;;;AAoBE;;;;;;;;AAKA;;;;;;;;AAKA;;;;AAGA;;;;;;;;;;;AASE;;;;;;;;AAOF;;;;AAGA","sources":["packages/map-interface/src/expansion-panel/main.module.sass"],"sourcesContent":["\n.panel-subhead\n  padding: 0.2em var(--box-horizontal-padding)\n  border-top: 1px solid var(--panel-rule-color)\n  border-bottom: 1px solid var(--panel-rule-color)\n  background-color: var(--accent-color)\n  display: flex\n  flex-direction: row\n  align-items: center\n  z-index: 1\n  gap: var(--box-horizontal-padding)\n  top: -1px\n  position: sticky\n  h1, h2, h3, h4\n    font-family: Montserrat,sans-serif\n    font-weight: 700\n    margin: 0.2em 0\n  h4\n    font-weight: 600\n  .title\n    flex-grow: 1\n\n// :global(.bp5-dark) .panel-subhead\n//   margin 0 1px\n\n.info-panel-section\n  &>.panel-subhead\n    margin: -1px calc(var(--panel-padding-h) * -1) 0\n\n.expansion-panel\n  padding: 0\n  flex-wrap: wrap\n  margin-top: -1px\n  // &.collapsed\n  //   .expansion-panel-header\n  //     border-bottom-width: 0;\n\n.sub-expansion-panel\n  margin: -1px calc(var(--panel-padding-h) * -0.5) 0\n  overflow: hidden\n  &:first-child\n    .expansion-panel-header\n      border-top-width: 0\n  .panel-subhead\n    border-top: none\n    border-bottom: none\n\n  .expansion-panel-header\n    background-color: var(--accent-secondary-color)\n    cursor: pointer\n    &:hover\n      background-color: var(--accent-secondary-hover-color)\n    h2, h3, h4\n      font-weight: 500\n      border-bottom: 1px solid var(--tertiary-border-color)\n      border-top: 1px solid var(--tertiary-border-color)\n      margin-top: -1px\n      padding: 5px 1em 5px\n      align-items: center\n\n.expansion-summary-title-help\n  margin-left: 5px\n  :global(.bp5-icon)\n    margin-left: 5px\n\n.expansion-panel-header\n  cursor: pointer\n  &:hover\n    background-color: var(--accent-hover-color)\n  :global(.bp5-icon)\n    transform: translate(0,3px)\n\n.expansion-children\n  padding: 5px 1em 10px\n  .expansion-panel\n    margin-left: -1em\n    margin-right: -1em\n    &:first-child\n      margin-top: -5px\n\n.expansion-panel-subtext\n  font-size: 85%\n  font-weight: 400\n\n:global\n  .expansion-panel-root\n    padding-left: 15px !important\n\n  .expansion-panel-detail\n    display: block !important\n    padding: 0 !important\n\n  .expansion-panel-detail-sub\n    display: block !important\n\n// New expandable panel for details\n.expandable-details-main\n  display: flex\n  flex-direction: row\n  align-items: center\n  justify-content: space-between\n  margin: 3px 0\n\n.expandable-details-header\n  display: inline-flex\n  flex-direction: row\n  align-items: baseline\n  flex-grow: 1\n\n.expandable-details-children\n  position: relative\n\n.expandable-details-toggle\n  :global(.bp5-button)\n    font-size: 10px\n\n.expandable-details\n  &.macrostrat-unit\n    .title:after\n      content: none\n  .title\n    margin-right: 1em\n    &:after\n      content: \":\"\n\n.expansion-body\n  display: inline-block\n  //flex-direction row\n  align-items: baseline\n  background-color: var(--tertiary-background)\n  padding: 2px 6px\n  border-radius: 4px\n  width: 100%\n  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.2)\n  margin-bottom: 6px\n\n.expansion-panel-detail-header\n  font-size: 90%\n  font-style: italic\n  margin-right: 1em\n  display: inline\n  color: var(--secondary-color)\n  &:after\n    content: \":\"\n\n.expansion-panel-detail-body\n  display: inline\n"],"names":[],"version":3,"file":"main.module.ff1b1aca.css.map"}