inspector: improve type checks, map color scheme [#49]

app/package-lock.json

@@ -37,6 +37,7 @@
         "@types/pbf": "^3.0.2",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
+        "@types/react-svg-pan-zoom": "^3.3.5",
         "@vitejs/plugin-react": "^1.3.0",
         "typescript": "^4.6.3",
         "vite": "^2.9.13"
@@ -1433,6 +1434,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-svg-pan-zoom": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@types/react-svg-pan-zoom/-/react-svg-pan-zoom-3.3.5.tgz",
+      "integrity": "sha512-W8GRFCDy7raSDr5OXGjSyvX5KmdWlIQfv0NLa1jfAYVUO4ClVbgorWeAAom7nY3Pl+4h9blXE1Bnu2CW1iMEvQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",

app/package.json

@@ -37,6 +37,7 @@
     "@types/pbf": "^3.0.2",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "@types/react-svg-pan-zoom": "^3.3.5",
     "@vitejs/plugin-react": "^1.3.0",
     "typescript": "^4.6.3",
     "vite": "^2.9.13"

app/src/Inspector.tsx

@@ -9,12 +9,7 @@ import { schemeSet3 } from "d3-scale-chromatic";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { useMeasure } from "react-use";
 import {
-  INITIAL_VALUE,
-  ReactSVGPanZoom,
-  TOOL_NONE,
-  fitSelection,
-  zoomOnViewerCenter,
-  fitToViewer,
+  UncontrolledReactSVGPanZoom,
 } from "react-svg-pan-zoom";
 
 const TableContainer = styled("div", {
@@ -40,6 +35,7 @@ const TableRow = styled(
   "tr",
   {
     cursor: "pointer",
+    fontFamily: "monospace"
   },
   { "&:hover": { color: "red" } }
 );
@@ -185,10 +181,12 @@ const VectorPreview = (props: {
 }) => {
   let [layers, setLayers] = useState<Layer[]>([]);
   let [selectedFeature, setSelectedFeature] = useState<Feature | null>(null);
-  const Viewer = useRef(null);
-  const [tool, setTool] = useState(TOOL_NONE);
-  const [value, setValue] = useState(INITIAL_VALUE);
-  const [ref, { width, height }] = useMeasure();
+  const Viewer = useRef<UncontrolledReactSVGPanZoom>(null);
+  const [ref, { width, height }] = useMeasure<HTMLDivElement>();
+
+  useEffect(() => {
+    Viewer.current!.zoomOnViewerCenter(0.1);
+  },[]);
 
   useEffect(() => {
     let fn = async (entry: Entry) => {
@@ -251,21 +249,17 @@ const VectorPreview = (props: {
 
   return (
     <SVGContainer ref={ref}>
-      <ReactSVGPanZoom
+      <UncontrolledReactSVGPanZoom
         ref={Viewer}
         width={width}
         height={height}
-        tool={tool}
-        onChangeTool={setTool}
-        value={value}
-        onChangeValue={setValue}
         detectAutoPan={false}
         onClick={(event) =>
           console.log("click", event.x, event.y, event.originalEvent)
         }
       >
         <svg viewBox="0 0 4096 4096">{elems}</svg>
-      </ReactSVGPanZoom>
+      </UncontrolledReactSVGPanZoom>
       {selectedFeature ? <FeatureProperties feature={selectedFeature} /> : null}
     </SVGContainer>
   );

app/src/MaplibreMap.tsx

@@ -4,6 +4,7 @@ import { Protocol } from "../../js/adapters";
 import { styled } from "./stitches.config";
 import maplibregl from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
+import { schemeSet3 } from "d3-scale-chromatic";
 
 const MapContainer = styled("div", {
   height: "calc(100vh - $4 - $4)",
@@ -46,14 +47,14 @@ const vectorStyle = async (file: PMTiles): Promise<any> => {
   }
 
   if (vector_layers) {
-    for (let layer of vector_layers) {
+    for (let [i,layer] of vector_layers.entries()) {
       layers.push({
         id: layer.id + "_fill",
         type: "fill",
         source: "source",
         "source-layer": layer.id,
         paint: {
-          "fill-color": "white",
+          "fill-color": schemeSet3[i % 12],
           "fill-opacity": 0.2,
         },
         filter: ["==", ["geometry-type"], "Polygon"],
@@ -64,7 +65,7 @@ const vectorStyle = async (file: PMTiles): Promise<any> => {
         source: "source",
         "source-layer": layer.id,
         paint: {
-          "line-color": "steelblue",
+          "line-color": schemeSet3[i % 12],
           "line-width": 0.5,
         },
         filter: ["==", ["geometry-type"], "LineString"],
@@ -75,13 +76,13 @@ const vectorStyle = async (file: PMTiles): Promise<any> => {
         source: "source",
         "source-layer": layer.id,
         paint: {
-          "circle-color": "red",
+          "circle-color": schemeSet3[i % 12],
         },
         filter: ["==", ["geometry-type"], "Point"],
       });
     }
   } else if (tilestats) {
-    for (let layer of tilestats.layers) {
+    for (let [i,layer] of tilestats.layers.entries()) {
       if (layer.geometry === "Polygon") {
         layers.push({
           id: layer.layer + "_fill",
@@ -89,7 +90,7 @@ const vectorStyle = async (file: PMTiles): Promise<any> => {
           source: "source",
           "source-layer": layer.layer,
           paint: {
-            "fill-color": "white",
+            "fill-color": schemeSet3[i % 12],
             "fill-opacity": 0.2,
           },
         });
@@ -100,7 +101,7 @@ const vectorStyle = async (file: PMTiles): Promise<any> => {
           source: "source",
           "source-layer": layer.layer,
           paint: {
-            "line-color": "steelblue",
+            "line-color": schemeSet3[i % 12],
             "line-width": 0.5,
           },
         });
@@ -111,7 +112,7 @@ const vectorStyle = async (file: PMTiles): Promise<any> => {
           source: "source",
           "source-layer": layer.layer,
           paint: {
-            "circle-color": "red",
+            "circle-color": schemeSet3[i % 12],
           },
         });
       }

app/src/stitches.config.ts

@@ -55,8 +55,6 @@ export const globalStyles = globalCss({
 		margin: 0,
 		padding: 0,
 		border: 0,
-		fontFamily: "Inter, sans-serif",
 	},
-	body: { backgroundColor: "$black", color: "$white" },
-	"@import": ["url('https://rsms.me/inter/inter.css')"],
+	body: { backgroundColor: "$black", color: "$white", fontFamily: "sans-serif" }
 });