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

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" }
 });