Inspector: show errors for file loading in dialog [#49]

app/src/App.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
 import { styled, globalStyles } from "./stitches.config";
 import { PMTiles } from "../../js/index";
 import { GitHubLogoIcon } from "@radix-ui/react-icons";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
 
 import Start from "./Start";
 import Loader from "./Loader";
@@ -28,19 +29,53 @@ const GithubLink = styled("span", {
   marginLeft: "auto",
 });
 
+const StyledOverlay = styled(DialogPrimitive.Overlay, {
+  backgroundColor: "black",
+  position: "fixed",
+  inset: 0,
+  opacity: "40%",
+  zIndex: 3,
+});
+
+const StyledContent = styled(DialogPrimitive.Content, {
+  backgroundColor: "black",
+  color: "#ef4444",
+  padding: "$1",
+  borderRadius: 6,
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  width: "90vw",
+  zIndex: 4,
+  "&:focus": { outline: "none" },
+});
+
 const GIT_SHA = (import.meta.env.VITE_GIT_SHA || "").substr(0, 8);
 
 function App() {
   globalStyles();
 
-  let initialValue;
-  const loadUrl = new URLSearchParams(location.search).get("url");
-  if (loadUrl) {
-    initialValue = new PMTiles(loadUrl);
-  }
+  let [errorDisplay, setErrorDisplay] = useState<string | undefined>();
+  let [file, setFileRaw] = useState<PMTiles | undefined>();
 
-  let [file, setFile] = useState<PMTiles | undefined>(initialValue);
+  let setFile = (file: PMTiles) => {
+    setFileRaw(file);
+    file.getHeader().catch((e) => {
+      setErrorDisplay(e.message);
+    });
+  };
 
+  // initial load
+  useEffect(() => {
+    const loadUrl = new URLSearchParams(location.search).get("url");
+    if (loadUrl) {
+      let initialValue = new PMTiles(loadUrl);
+      setFile(initialValue);
+    }
+  }, []);
+
+  // maintaining URL state
   useEffect(() => {
     const url = new URL(window.location.href);
     if (file && file.source.getKey().startsWith("http")) {
@@ -56,6 +91,10 @@ function App() {
     setFile(undefined);
   };
 
+  const closeModal = () => {
+    setErrorDisplay(undefined);
+  };
+
   return (
     <div>
       <Header>
@@ -67,6 +106,19 @@ function App() {
         </GithubLink>
       </Header>
       {file ? <Loader file={file} /> : <Start setFile={setFile} />}
+      <DialogPrimitive.Root open={errorDisplay}>
+        <DialogPrimitive.Portal>
+          <StyledOverlay />
+          <StyledContent
+            onEscapeKeyDown={closeModal}
+            onPointerDownOutside={closeModal}
+          >
+            <div>{file ? file.source.getKey() : null}</div>
+            <div>{errorDisplay}</div>
+            <DialogPrimitive.Close />
+          </StyledContent>
+        </DialogPrimitive.Portal>
+      </DialogPrimitive.Root>
     </div>
   );
 }

app/src/Inspector.tsx

@@ -6,7 +6,6 @@ import Protobuf from "pbf";
 import { VectorTile, VectorTileFeature } from "@mapbox/vector-tile";
 import { path } from "d3-path";
 import { schemeSet3 } from "d3-scale-chromatic";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { useMeasure } from "react-use";
 import {
   UncontrolledReactSVGPanZoom,

app/src/Loader.tsx

@@ -8,7 +8,6 @@ import Metadata from "./Metadata";
 
 import { MagnifyingGlassIcon, ImageIcon } from "@radix-ui/react-icons";
 import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
 
 const StyledToolbar = styled(ToolbarPrimitive.Root, {
   display: "flex",
@@ -60,27 +59,6 @@ const StyledToggleItem = styled(ToolbarPrimitive.ToggleItem, {
   "&[data-state=on]": { backgroundColor: "$primary", color: "$primaryText" },
 });
 
-const StyledOverlay = styled(DialogPrimitive.Overlay, {
-  backgroundColor: "black",
-  position: "fixed",
-  inset: 0,
-  opacity: "40%",
-  zIndex: 3,
-});
-
-const StyledContent = styled(DialogPrimitive.Content, {
-  backgroundColor: "#222",
-  padding:"$1",
-  borderRadius: 6,
-  position: "fixed",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)",
-  width: "90vw",
-  zIndex: 4,
-  "&:focus": { outline: "none" },
-});
-
 const Toolbar = StyledToolbar;
 const ToolbarLink = StyledLink;
 const ToolbarToggleGroup = StyledToggleGroup;