@macrostrat/map-interface 1.6.0 → 2.0.1

package/dist/dev/vector-tile-features.cjs

@@ -0,0 +1,214 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const core = require("@blueprintjs/core");
+const mapboxReact = require("@macrostrat/mapbox-react");
+const h$1 = require("@macrostrat/hyper");
+const main_module = require("./main.module.sass.cjs");
+const React = require("react");
+const uiComponents = require("@macrostrat/ui-components");
+const d3Array = require("d3-array");
+const index = require("../expansion-panel/index.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const h__default = /* @__PURE__ */ _interopDefault(h$1);
+const h = h__default.default.styled(main_module.default);
+function FeatureProperties({ data, ...rest }) {
+  const [showControls, setShowControls] = React.useState(false);
+  const onMouseEnter = React.useCallback(() => setShowControls(true), []);
+  const onMouseLeave = React.useCallback(() => setShowControls(false), []);
+  return h("div.feature-properties", { onMouseEnter, onMouseLeave }, [
+    h.if(showControls)("div.controls", h(CopyJSONButton, { data })),
+    h(uiComponents.JSONView, {
+      data,
+      hideRoot: true,
+      ...rest
+    })
+  ]);
+}
+function FeatureRecord({ feature }) {
+  const props = feature.properties;
+  return h("div.feature-record", [
+    h.if(Object.keys(props).length > 0)(FeatureProperties, { data: props })
+  ]);
+}
+function CopyJSONButton({ data }) {
+  const [copied, setCopied] = React.useState(false);
+  return h(core.Button, {
+    icon: copied ? "tick" : "clipboard",
+    intent: copied ? core.Intent.SUCCESS : core.Intent.NONE,
+    minimal: true,
+    small: true,
+    onClick() {
+      navigator.clipboard.writeText(JSON.stringify(data, null, 2));
+      setCopied(true);
+    }
+  });
+}
+function FeatureSelectionHandler({
+  selectedLocation,
+  setFeatures,
+  radius = 2
+}) {
+  const mapRef = mapboxReact.useMapRef();
+  const isLoading = mapboxReact.useMapStatus((s) => s.isLoading);
+  const isInitialized = mapboxReact.useMapStatus((s) => s.isInitialized);
+  const prevLocation = React.useRef(null);
+  const prevFeatures = React.useRef([]);
+  React.useEffect(() => {
+    const map = mapRef?.current;
+    if (map == null) return;
+    if (selectedLocation == null) {
+      setFeatures(null);
+      return;
+    }
+    if (!isInitialized) return;
+    const hasPreviouslyLoadedFeatures = prevFeatures.current.length > 0;
+    const locationMemo = JSON.stringify(selectedLocation);
+    if (locationMemo == prevLocation.current && hasPreviouslyLoadedFeatures)
+      return;
+    prevLocation.current = locationMemo;
+    const r = radius;
+    const pt = map.project(selectedLocation);
+    const bbox = [
+      [pt.x - r, pt.y - r],
+      [pt.x + r, pt.y + r]
+    ];
+    const features = map.queryRenderedFeatures(bbox);
+    prevFeatures.current = features ?? [];
+    setFeatures(features);
+  }, [isInitialized, selectedLocation, isLoading]);
+  return null;
+}
+function FeatureHeader({ feature }) {
+  return h("div.feature-header", [
+    h("h3", [
+      h(KeyValue, { label: "Source", value: feature.source }),
+      h(KeyValue, { label: "Source layer", value: feature.sourceLayer })
+    ])
+  ]);
+}
+function KeyValue({ label, value }) {
+  return h("span.key-value", [h("span.key", label), h("code.value", value)]);
+}
+function LoadingAwareFeatureSet({ features, sourceID }) {
+  const map = mapboxReact.useMapRef();
+  if (map?.current == null) return null;
+  const [isLoaded, setIsLoaded] = React.useState(false);
+  const sourceFeatures = features.filter((d) => d.source == "burwell");
+  React.useEffect(() => {
+    if (sourceFeatures.length > 0) {
+      setIsLoaded(true);
+      return;
+    }
+    const isLoaded2 = map.current.isSourceLoaded(sourceID);
+    setIsLoaded(isLoaded2);
+    if (!isLoaded2) {
+      map.current.once("sourcedata", (e) => {
+        if (e.sourceId == sourceID) {
+          setIsLoaded(true);
+        }
+      });
+    }
+  }, [map.current, sourceID, sourceFeatures.length]);
+  if (!isLoaded) return h(core.Spinner);
+  return h(Features, { features: sourceFeatures });
+}
+function TileInfo({ feature, showExtent, setShowExtent }) {
+  if (feature == null) return null;
+  const size = feature._vectorTileFeature._pbf.length;
+  return h("div.tile-info", [
+    h("h3", "Tile"),
+    h("div.tile-index", [
+      h(KeyValue, { label: "x", value: feature._x }),
+      h(KeyValue, { label: "y", value: feature._y }),
+      h(KeyValue, { label: "z", value: feature._z })
+    ]),
+    h("div.spacer"),
+    h(KeyValue, { label: "Size", value: formatSize(size) }),
+    h(core.Switch, {
+      label: "Show extent",
+      alignIndicator: "right",
+      checked: showExtent,
+      onChange() {
+        setShowExtent(!showExtent);
+      }
+    })
+  ]);
+}
+function formatSize(size) {
+  if (size > 1e6)
+    return h(UnitNumber, { value: size / 1e6, unit: "Mb" });
+  if (size > 1e3) return h(UnitNumber, { value: size / 1e3, unit: "Kb" });
+  return `${size} bytes`;
+}
+function UnitNumber({ value, unit, precision = 1 }) {
+  return h("span.unit-number", [
+    h("span.number", value.toFixed(precision)),
+    h("span.unit", unit)
+  ]);
+}
+function FeaturePanel({
+  features,
+  focusedSource = null,
+  focusedSourceTitle = null
+}) {
+  if (features == null) return null;
+  let focusedSourcePanel = null;
+  let filteredFeatures = features;
+  let title = "Features";
+  if (focusedSource != null) {
+    title = "Basemap features";
+    focusedSourcePanel = h(
+      index.ExpansionPanel,
+      {
+        title: focusedSourceTitle ?? "Macrostrat features",
+        className: "macrostrat-features",
+        expanded: true
+      },
+      [
+        h(LoadingAwareFeatureSet, {
+          features,
+          sourceID: focusedSource
+        })
+      ]
+    );
+    filteredFeatures = features.filter((d) => d.source != focusedSource);
+  }
+  return h("div.feature-panel", [
+    focusedSourcePanel,
+    h(
+      index.ExpansionPanel,
+      { title, className: "basemap-features", expanded: focusedSource == null },
+      [
+        h(FeatureGroups, {
+          features: filteredFeatures
+        })
+      ]
+    )
+  ]);
+}
+function FeatureGroups({ features }) {
+  if (features == null) return null;
+  const groups = d3Array.group(features, (d) => `${d.source} - ${d.sourceLayer}`);
+  return h(
+    "div.feature-groups",
+    Array.from(groups).map(([key, features2]) => {
+      return h("div.feature-group", [
+        h(FeatureHeader, { feature: features2[0] }),
+        h(Features, { features: features2 })
+      ]);
+    })
+  );
+}
+function Features({ features }) {
+  return h(
+    "div.features",
+    features.map((feature, i) => h(FeatureRecord, { key: i, feature }))
+  );
+}
+exports.FeaturePanel = FeaturePanel;
+exports.FeatureProperties = FeatureProperties;
+exports.FeatureRecord = FeatureRecord;
+exports.FeatureSelectionHandler = FeatureSelectionHandler;
+exports.Features = Features;
+exports.TileInfo = TileInfo;
+//# sourceMappingURL=vector-tile-features.cjs.map

package/dist/dev/vector-tile-features.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vector-tile-features.cjs","sources":["../../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({\n  features,\n  focusedSource = null,\n  focusedSourceTitle = null,\n}) {\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: focusedSourceTitle ?? \"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: any) => `${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":["hyper","styles","useState","useCallback","JSONView","Button","Intent","useMapRef","useMapStatus","useRef","useEffect","isLoaded","Spinner","Switch","ExpansionPanel","group","features"],"mappings":"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"}

package/dist/dev/vector-tile-features.d.ts

@@ -0,0 +1,29 @@
+export declare function FeatureProperties({ data, ...rest }: {
+    [x: string]: any;
+    data: any;
+}): import('react').DOMElement<{
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+}, Element>;
+export declare function FeatureRecord({ feature }: {
+    feature: any;
+}): import('react').DOMElement<import('react').DOMAttributes<Element>, Element>;
+/** This component wraps queryRenderedFeatures to get features at a given location */
+export declare function FeatureSelectionHandler({ selectedLocation, setFeatures, radius, }: {
+    selectedLocation: mapboxgl.LngLat;
+    setFeatures: (features: mapboxgl.MapboxGeoJSONFeature[]) => void;
+    radius?: number;
+}): any;
+export declare function TileInfo({ feature, showExtent, setShowExtent }: {
+    feature: any;
+    showExtent: any;
+    setShowExtent: any;
+}): import('react').DOMElement<import('react').DOMAttributes<Element>, Element>;
+export declare function FeaturePanel({ features, focusedSource, focusedSourceTitle, }: {
+    features: any;
+    focusedSource?: any;
+    focusedSourceTitle?: any;
+}): import('react').DOMElement<import('react').DOMAttributes<Element>, Element>;
+export declare function Features({ features }: {
+    features: any;
+}): import('react').DOMElement<any, Element>;

package/dist/dev/vector-tile-features.js

@@ -0,0 +1,212 @@
+import { Switch, Spinner, Button, Intent } from "@blueprintjs/core";
+import { useMapRef, useMapStatus } from "@macrostrat/mapbox-react";
+import h$1 from "@macrostrat/hyper";
+import styles from "./main.module.sass.js";
+import { useState, useCallback, useRef, useEffect } from "react";
+import { JSONView } from "@macrostrat/ui-components";
+import { group } from "d3-array";
+import { ExpansionPanel } from "../expansion-panel/index.js";
+const h = h$1.styled(styles);
+function FeatureProperties({ data, ...rest }) {
+  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,
+      ...rest
+    })
+  ]);
+}
+function FeatureRecord({ feature }) {
+  const props = feature.properties;
+  return h("div.feature-record", [
+    h.if(Object.keys(props).length > 0)(FeatureProperties, { data: props })
+  ]);
+}
+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);
+    }
+  });
+}
+function FeatureSelectionHandler({
+  selectedLocation,
+  setFeatures,
+  radius = 2
+}) {
+  const mapRef = useMapRef();
+  const isLoading = useMapStatus((s) => s.isLoading);
+  const isInitialized = useMapStatus((s) => s.isInitialized);
+  const prevLocation = useRef(null);
+  const prevFeatures = useRef([]);
+  useEffect(() => {
+    const map = mapRef?.current;
+    if (map == null) return;
+    if (selectedLocation == null) {
+      setFeatures(null);
+      return;
+    }
+    if (!isInitialized) return;
+    const hasPreviouslyLoadedFeatures = prevFeatures.current.length > 0;
+    const locationMemo = JSON.stringify(selectedLocation);
+    if (locationMemo == prevLocation.current && hasPreviouslyLoadedFeatures)
+      return;
+    prevLocation.current = locationMemo;
+    const r = radius;
+    const pt = map.project(selectedLocation);
+    const bbox = [
+      [pt.x - r, pt.y - r],
+      [pt.x + r, pt.y + r]
+    ];
+    const features = map.queryRenderedFeatures(bbox);
+    prevFeatures.current = features ?? [];
+    setFeatures(features);
+  }, [isInitialized, selectedLocation, isLoading]);
+  return null;
+}
+function FeatureHeader({ feature }) {
+  return h("div.feature-header", [
+    h("h3", [
+      h(KeyValue, { label: "Source", value: feature.source }),
+      h(KeyValue, { label: "Source layer", value: feature.sourceLayer })
+    ])
+  ]);
+}
+function KeyValue({ label, value }) {
+  return h("span.key-value", [h("span.key", label), h("code.value", value)]);
+}
+function LoadingAwareFeatureSet({ features, sourceID }) {
+  const map = useMapRef();
+  if (map?.current == null) return null;
+  const [isLoaded, setIsLoaded] = useState(false);
+  const sourceFeatures = features.filter((d) => d.source == "burwell");
+  useEffect(() => {
+    if (sourceFeatures.length > 0) {
+      setIsLoaded(true);
+      return;
+    }
+    const isLoaded2 = map.current.isSourceLoaded(sourceID);
+    setIsLoaded(isLoaded2);
+    if (!isLoaded2) {
+      map.current.once("sourcedata", (e) => {
+        if (e.sourceId == sourceID) {
+          setIsLoaded(true);
+        }
+      });
+    }
+  }, [map.current, sourceID, sourceFeatures.length]);
+  if (!isLoaded) return h(Spinner);
+  return h(Features, { features: sourceFeatures });
+}
+function TileInfo({ feature, showExtent, setShowExtent }) {
+  if (feature == null) return null;
+  const size = feature._vectorTileFeature._pbf.length;
+  return h("div.tile-info", [
+    h("h3", "Tile"),
+    h("div.tile-index", [
+      h(KeyValue, { label: "x", value: feature._x }),
+      h(KeyValue, { label: "y", value: feature._y }),
+      h(KeyValue, { label: "z", value: feature._z })
+    ]),
+    h("div.spacer"),
+    h(KeyValue, { label: "Size", value: formatSize(size) }),
+    h(Switch, {
+      label: "Show extent",
+      alignIndicator: "right",
+      checked: showExtent,
+      onChange() {
+        setShowExtent(!showExtent);
+      }
+    })
+  ]);
+}
+function formatSize(size) {
+  if (size > 1e6)
+    return h(UnitNumber, { value: size / 1e6, unit: "Mb" });
+  if (size > 1e3) return h(UnitNumber, { value: size / 1e3, unit: "Kb" });
+  return `${size} bytes`;
+}
+function UnitNumber({ value, unit, precision = 1 }) {
+  return h("span.unit-number", [
+    h("span.number", value.toFixed(precision)),
+    h("span.unit", unit)
+  ]);
+}
+function FeaturePanel({
+  features,
+  focusedSource = null,
+  focusedSourceTitle = null
+}) {
+  if (features == null) return null;
+  let focusedSourcePanel = null;
+  let filteredFeatures = features;
+  let title = "Features";
+  if (focusedSource != null) {
+    title = "Basemap features";
+    focusedSourcePanel = h(
+      ExpansionPanel,
+      {
+        title: focusedSourceTitle ?? "Macrostrat features",
+        className: "macrostrat-features",
+        expanded: true
+      },
+      [
+        h(LoadingAwareFeatureSet, {
+          features,
+          sourceID: focusedSource
+        })
+      ]
+    );
+    filteredFeatures = features.filter((d) => d.source != focusedSource);
+  }
+  return h("div.feature-panel", [
+    focusedSourcePanel,
+    h(
+      ExpansionPanel,
+      { title, className: "basemap-features", expanded: focusedSource == null },
+      [
+        h(FeatureGroups, {
+          features: filteredFeatures
+        })
+      ]
+    )
+  ]);
+}
+function FeatureGroups({ features }) {
+  if (features == null) return null;
+  const groups = group(features, (d) => `${d.source} - ${d.sourceLayer}`);
+  return h(
+    "div.feature-groups",
+    Array.from(groups).map(([key, features2]) => {
+      return h("div.feature-group", [
+        h(FeatureHeader, { feature: features2[0] }),
+        h(Features, { features: features2 })
+      ]);
+    })
+  );
+}
+function Features({ features }) {
+  return h(
+    "div.features",
+    features.map((feature, i) => h(FeatureRecord, { key: i, feature }))
+  );
+}
+export {
+  FeaturePanel,
+  FeatureProperties,
+  FeatureRecord,
+  FeatureSelectionHandler,
+  Features,
+  TileInfo
+};
+//# sourceMappingURL=vector-tile-features.js.map

package/dist/dev/vector-tile-features.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vector-tile-features.js","sources":["../../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({\n  features,\n  focusedSource = null,\n  focusedSourceTitle = null,\n}) {\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: focusedSourceTitle ?? \"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: any) => `${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":["hyper","isLoaded","features"],"mappings":"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"}

package/dist/dev/xray.cjs

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const mapboxUtils = require("@macrostrat/mapbox-utils");
+const colorUtils = require("@macrostrat/color-utils");
+async function buildXRayStyle(baseStyle, params = null) {
+  const {
+    inDarkMode = false,
+    color = "rgb(74, 242, 161)",
+    mapboxToken,
+    xRaySources
+  } = params;
+  const style = await mapboxUtils.getMapboxStyle(baseStyle, { access_token: mapboxToken });
+  const sources = xRaySources ?? Object.keys(style.sources);
+  let layers = [];
+  for (let layer of style.layers) {
+    if ("source" in layer && typeof layer.source === "string" && !sources.includes(layer.source)) {
+      layers.push(layer);
+      continue;
+    }
+    let newLayer = transformMapboxLayer(layer, color, inDarkMode);
+    if (newLayer != null) {
+      layers.push(newLayer);
+    }
+  }
+  return {
+    ...style,
+    layers
+  };
+}
+function transformMapboxLayer(layer, color, inDarkMode) {
+  const c = colorUtils.asChromaColor(color);
+  const xRayColor = (opacity = 1, darken = 0) => {
+    if (!inDarkMode) {
+      return colorUtils.toRGBAString(c.darken(2 - darken).alpha(opacity));
+    }
+    return colorUtils.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 buildInspectorStyle(baseStyle, overlayStyle = null, params = {}) {
+  const {
+    mapboxToken,
+    xRay = false,
+    xRaySources: _xRaySources,
+    ...rest
+  } = params;
+  let xRaySources = _xRaySources;
+  let style = await mapboxUtils.getMapboxStyle(baseStyle, {
+    access_token: mapboxToken
+  });
+  if (overlayStyle != null) {
+    const overlay = await mapboxUtils.getMapboxStyle(overlayStyle, {
+      access_token: mapboxToken
+    });
+    style = mapboxUtils.mergeStyles(style, overlay);
+    xRaySources ??= Object.keys(overlay.sources);
+  }
+  if (xRay) {
+    xRaySources ??= Object.keys(style.sources);
+    style = await buildXRayStyle(style, { ...rest, mapboxToken, xRaySources });
+  }
+  return style;
+}
+exports.buildInspectorStyle = buildInspectorStyle;
+exports.buildXRayStyle = buildXRayStyle;
+//# sourceMappingURL=xray.cjs.map

package/dist/dev/xray.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"xray.cjs","sources":["../../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 (\n      \"source\" in layer &&\n      typeof layer.source === \"string\" &&\n      !sources.includes(layer.source)\n    ) {\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":["getMapboxStyle","asChromaColor","toRGBAString","mergeStyles"],"mappings":";;;;AAWA,eAAsB,eACpB,WACA,SAAsB,MACtB;AACA,QAAM;AAAA,IACJ,aAAa;AAAA,IACb,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,QAAQ,MAAMA,YAAAA,eAAe,WAAW,EAAE,cAAc,aAAa;AAC3E,QAAM,UAAU,eAAe,OAAO,KAAK,MAAM,OAAO;AAExD,MAAI,SAAS,CAAA;AACb,WAAS,SAAS,MAAM,QAAQ;AAC9B,QACE,YAAY,SACZ,OAAO,MAAM,WAAW,YACxB,CAAC,QAAQ,SAAS,MAAM,MAAM,GAC9B;AACA,aAAO,KAAK,KAAK;AACjB;AAAA,IACF;AACA,QAAI,WAAW,qBAAqB,OAAO,OAAO,UAAU;AAC5D,QAAI,YAAY,MAAM;AACpB,aAAO,KAAK,QAAQ;AAAA,IACtB;AAAA,EACF;AAEA,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,EAAA;AAEJ;AAEA,SAAS,qBAAqB,OAAO,OAAO,YAAY;AACtD,QAAM,IAAIC,WAAAA,cAAc,KAAK;AAC7B,QAAM,YAAY,CAAC,UAAU,GAAG,SAAS,MAAM;AAC7C,QAAI,CAAC,YAAY;AACf,aAAOC,WAAAA,aAAa,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,OAAO,CAAC;AAAA,IACzD;AACA,WAAOA,WAAAA,aAAa,EAAE,MAAM,OAAO,EAAE,OAAO,MAAM,CAAC;AAAA,EACrD;AAEA,MAAI,MAAM,QAAQ,cAAc;AAC9B,WAAO;AAAA,EACT;AAEA,MAAI,WAAW,EAAE,GAAG,MAAA;AAEpB,UAAQ,IAAI,UAAU,GAAG,CAAC;AAE1B,MAAI,MAAM,QAAQ,QAAQ;AACxB,aAAS,QAAQ;AAAA,MACf,cAAc,UAAU,GAAG;AAAA,MAC3B,sBAAsB,UAAU,GAAG;AAAA,IAAA;AAAA,EAEvC,WAAW,MAAM,QAAQ,QAAQ;AAC/B,aAAS,QAAQ;AAAA,MACf,cAAc,UAAU,KAAK,CAAC;AAAA,MAC9B,cAAc;AAAA,IAAA;AAAA,EAElB,WAAW,MAAM,QAAQ,UAAU;AACjC,aAAS,QAAQ;AAAA,MACf,cAAc,UAAU,GAAG,IAAI;AAAA,MAC/B,mBAAmB;AAAA,IAAA;AAAA,EAEvB,WAAW,MAAM,QAAQ,UAAU;AACjC,aAAS,QAAQ;AAAA,MACf,gBAAgB,UAAU,KAAK,CAAC;AAAA,MAChC,uBAAuB,UAAU,KAAK,CAAC;AAAA,MACvC,iBAAiB;AAAA,IAAA;AAAA,EAErB;AAEA,SAAO;AACT;AAMA,eAAsB,oBACpB,WACA,eAA+C,MAC/C,SAAgC,CAAA,GAChC;AACA,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,IACP,aAAa;AAAA,IACb,GAAG;AAAA,EAAA,IACD;AACJ,MAAI,cAAc;AAClB,MAAI,QAAQ,MAAMF,YAAAA,eAAe,WAAW;AAAA,IAC1C,cAAc;AAAA,EAAA,CACf;AAED,MAAI,gBAAgB,MAAM;AACxB,UAAM,UAAU,MAAMA,YAAAA,eAAe,cAAc;AAAA,MACjD,cAAc;AAAA,IAAA,CACf;AACD,YAAQG,YAAAA,YAAY,OAAO,OAAO;AAClC,oBAAgB,OAAO,KAAK,QAAQ,OAAO;AAAA,EAC7C;AAEA,MAAI,MAAM;AAER,oBAAgB,OAAO,KAAK,MAAM,OAAO;AAEzC,YAAQ,MAAM,eAAe,OAAO,EAAE,GAAG,MAAM,aAAa,aAAa;AAAA,EAC3E;AACA,SAAO;AACT;;;"}

package/dist/dev/xray.d.ts

@@ -0,0 +1,41 @@
+interface XRayOptions {
+    color?: string;
+    inDarkMode?: boolean;
+    mapboxToken?: string;
+    xRaySources?: string[];
+}
+export declare function buildXRayStyle(baseStyle: string | object, params?: XRayOptions): Promise<{
+    layers: any[];
+    version: 8;
+    fragment?: boolean;
+    name?: string;
+    metadata?: unknown;
+    center?: Array<number>;
+    zoom?: number;
+    bearing?: number;
+    pitch?: number;
+    light?: import('mapbox-gl').LightSpecification;
+    lights?: Array<import('mapbox-gl').LightsSpecification>;
+    terrain?: import('mapbox-gl').TerrainSpecification | null | undefined;
+    fog?: import('mapbox-gl').FogSpecification;
+    snow?: import('mapbox-gl').SnowSpecification;
+    rain?: import('mapbox-gl').RainSpecification;
+    camera?: import('mapbox-gl').CameraSpecification;
+    "color-theme"?: import('mapbox-gl').ColorThemeSpecification;
+    indoor?: import('mapbox-gl').IndoorSpecification;
+    imports?: Array<import('mapbox-gl').ImportSpecification>;
+    iconsets?: import('mapbox-gl').IconsetsSpecification;
+    schema?: import('mapbox-gl').SchemaSpecification;
+    sources: import('mapbox-gl').SourcesSpecification;
+    sprite?: string;
+    glyphs?: string;
+    transition?: import('mapbox-gl').TransitionSpecification;
+    projection?: import('mapbox-gl').ProjectionSpecification;
+    models?: import('mapbox-gl').ModelsSpecification;
+    featuresets?: import('mapbox-gl').FeaturesetsSpecification;
+}>;
+type InspectorStyleOptions = XRayOptions & {
+    xRay?: boolean;
+};
+export declare function buildInspectorStyle(baseStyle: mapboxgl.Style | string, overlayStyle?: mapboxgl.Style | string | null, params?: InspectorStyleOptions): Promise<import('mapbox-gl').StyleSpecification>;
+export {};