viewer: break tile inspect into separate entrypoint [#49] (#379)

* viewer: break tile inspect into separate entrypoint [#49]

* fix tsc

app/src/Loader.tsx

@@ -2,7 +2,6 @@ import { useState } from "react";
 import { PMTiles } from "../../js/index";
 import { styled } from "./stitches.config";
 
-import Inspector from "./Inspector";
 import MaplibreMap from "./MaplibreMap";
 import Metadata from "./Metadata";
 
@@ -78,8 +77,6 @@ function Loader(props: { file: PMTiles; mapHashPassed: boolean }) {
     view = (
       <MaplibreMap file={props.file} mapHashPassed={props.mapHashPassed} />
     );
-  } else if (tab === "inspector") {
-    view = <Inspector file={props.file} />;
   } else {
     view = <Metadata file={props.file} />;
   }
@@ -97,13 +94,13 @@ function Loader(props: { file: PMTiles; mapHashPassed: boolean }) {
           <ToolbarToggleItem value="maplibre" aria-label="Right aligned">
             Map View
           </ToolbarToggleItem>
-          <ToolbarToggleItem value="inspector" aria-label="Left aligned">
-            <MagnifyingGlassIcon /> Tile Inspector
-          </ToolbarToggleItem>
           <ToolbarToggleItem value="metadata" aria-label="Left aligned">
             Metadata
           </ToolbarToggleItem>
         </ToolbarToggleGroup>
+        <ToolbarLink href={`tileinspect/?url=${props.file.source.getKey()}`}>
+          🔎 Tile Inspector
+        </ToolbarLink>
         <ToolbarLink css={{ marginRight: 10 }}>
           {props.file.source.getKey()}
         </ToolbarLink>

app/src/MapView.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import reactDom from "react-dom/client";
-import App from "./App";
+import MapViewComponent from "./MapViewComponent";
 
 const root = document.getElementById("root");
 if (root) {
   reactDom.createRoot(root).render(
     <React.StrictMode>
-      <App />
+      <MapViewComponent />
     </React.StrictMode>
   );
 }

app/src/MapViewComponent.tsx

@@ -54,7 +54,7 @@ const StyledContent = styled(DialogPrimitive.Content, {
 
 const GIT_SHA = (import.meta.env.VITE_GIT_SHA || "").substr(0, 8);
 
-function App() {
+function MapViewComponent() {
   globalStyles();
 
   const [errorDisplay, setErrorDisplay] = useState<string | undefined>();
@@ -136,4 +136,4 @@ function App() {
   );
 }
 
-export default App;
+export default MapViewComponent;

app/src/TileInspect.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import reactDom from "react-dom/client";
+import TileInspectComponent from "./TileInspectComponent";
+
+const root = document.getElementById("root");
+if (root) {
+  reactDom.createRoot(root).render(
+    <React.StrictMode>
+      <TileInspectComponent />
+    </React.StrictMode>
+  );
+}

app/src/TileInspectComponent.tsx

@@ -0,0 +1,38 @@
+import React, { useState, useEffect } from "react";
+import { PMTiles } from "../../js/index";
+import { globalStyles, styled } from "./stitches.config";
+import Inspector from "./Inspector";
+import Start from "./Start";
+
+function TileInspectComponent() {
+  globalStyles();
+
+  const [file, setFile] = useState<PMTiles | undefined>();
+
+  // initial load
+  useEffect(() => {
+    const loadUrl = new URLSearchParams(location.search).get("url");
+    if (loadUrl) {
+      const initialValue = new PMTiles(loadUrl);
+      setFile(initialValue);
+    }
+  }, []);
+
+  // maintaining URL state
+  useEffect(() => {
+    const url = new URL(window.location.href);
+    if (file?.source.getKey().startsWith("http")) {
+      url.searchParams.set("url", file.source.getKey());
+      history.pushState(null, "", url.toString());
+    } else {
+      url.searchParams.delete("url");
+      history.pushState(null, "", url.toString());
+    }
+  }, [file]);
+
+  return (
+    <div>{file ? <Inspector file={file} /> : <Start setFile={setFile} />}</div>
+  );
+}
+
+export default TileInspectComponent;