use json-viewer for metadata [#49]

app/package.json

@@ -14,6 +14,7 @@
     "@radix-ui/react-label": "^0.1.5",
     "@radix-ui/react-toolbar": "^0.1.5",
     "@stitches/react": "^1.2.8",
+    "@textea/json-viewer": "^2.11.2",
     "d3-path": "^3.0.1",
     "d3-scale-chromatic": "^3.0.0",
     "fflate": "^0.7.3",

app/src/Metadata.tsx

@@ -1,62 +1,28 @@
-import { useState, useEffect, useRef } from "react";
-import { PMTiles, TileType } from "../../js";
-import { Protocol } from "../../js/adapters";
+import { useState, useEffect } from "react";
+import { PMTiles } from "../../js";
 import { styled } from "./stitches.config";
+import { JsonViewer } from "@textea/json-viewer";
 
-const MetadataTable = styled("table", {
-  tableLayout: "fixed",
-  width: "100%",
-});
-
-const MetadataKey = styled("td", {
-  padding: "0 $1",
-});
-
-const MetadataValue = styled("td", {
-  fontFamily: "monospace",
-});
-
-const JsonValue = styled(MetadataValue, {
-  overflowX: "scroll",
+const Padded = styled("div", {
+  padding: "2rem",
 });
 
 function Metadata(props: { file: PMTiles }) {
-  let [metadata, setMetadata] = useState<[string, string][]>([]);
+  let [metadata, setMetadata] = useState<any>();
 
   useEffect(() => {
     let pmtiles = props.file;
     const fetchData = async () => {
       let m = await pmtiles.getMetadata();
-      let tmp: [string, string][] = [];
-      for (var key in m) {
-        let val = m[key];
-        tmp.push([key, JSON.stringify(val)]);
-      }
-      setMetadata(tmp);
+      setMetadata(m);
     };
     fetchData();
   }, [props.file]);
 
-  const metadataRows = metadata.map((d, i) => {
-    let Cls = d[0] === "json" ? JsonValue : MetadataValue;
-    return (
-      <tr key={i}>
-        <MetadataKey>{d[0]}</MetadataKey>
-        <Cls>{d[1]}</Cls>
-      </tr>
-    );
-  });
-
   return (
-    <MetadataTable>
-      <thead>
-        <tr>
-          <th>key</th>
-          <th>value</th>
-        </tr>
-      </thead>
-      <tbody>{metadataRows}</tbody>
-    </MetadataTable>
+    <Padded>
+      <JsonViewer value={metadata} theme="dark" defaultInspectDepth={1} />
+    </Padded>
   );
 }