viewer: surface more header data [#49]

app/src/Inspector.tsx

@@ -326,7 +326,7 @@ function Inspector(props: { file: PMTiles }) {
   let tilePreview = <div></div>;
   if (selectedEntry && header?.tileType) {
     if (selectedEntry.runLength === 0) {
-      console.log("Display leaf dir view");
+      // do nothing
     } else if (header.tileType === TileType.Mvt) {
       tilePreview = (
         <VectorPreview

app/src/Metadata.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { PMTiles } from "../../js";
+import { PMTiles, Header } from "../../js";
 import { styled } from "./stitches.config";
 import { JsonViewer } from "@textea/json-viewer";
 
@@ -7,20 +7,45 @@ const Padded = styled("div", {
   padding: "2rem",
 });
 
+const Heading = styled("div", {
+  paddingBottom: "2rem",
+  fontFamily: "monospace"
+});
+
 function Metadata(props: { file: PMTiles }) {
   let [metadata, setMetadata] = useState<any>();
+  let [header, setHeader] = useState<Header | null>(null);
 
   useEffect(() => {
     let pmtiles = props.file;
     const fetchData = async () => {
-      let m = await pmtiles.getMetadata();
-      setMetadata(m);
+      setMetadata(await pmtiles.getMetadata());
+      setHeader(await pmtiles.getHeader());
     };
     fetchData();
   }, [props.file]);
 
   return (
     <Padded>
+      { header ? <Heading>
+      <div>root directory: offset={header.rootDirectoryOffset} len={header.rootDirectoryLength}</div>
+      <div>metadata: offset={header.jsonMetadataOffset} len={header.jsonMetadataLength}</div>
+      <div>leaf directories: offset={header.leafDirectoryOffset} len={header.leafDirectoryLength}</div>
+      <div>tile data: offset={header.tileDataOffset} len={header.tileDataLength}</div>
+      <div>num addressed tiles: {header.numAddressedTiles}</div>
+      <div>num tile entries: {header.numTileEntries}</div>
+      <div>num tile contents: {header.numTileContents}</div>
+      <div>clustered: {header.clustered ? "true" : "false"}</div>
+      <div>internal compression: {header.internalCompression}</div>
+      <div>tile compression: {header.tileCompression}</div>
+      <div>tile type: {header.tileType}</div>
+      <div>min zoom: {header.minZoom}</div>
+      <div>max zoom: {header.maxZoom}</div>
+      <div>min lon, min lat, max lon, max lat: {header.minLon}, {header.minLat}, {header.maxLon}, {header.maxLat}</div>
+      <div>center zoom: {header.centerZoom}</div>
+      <div>center lon, center lat: {header.centerLon}, {header.centerLat}</div>
+      </Heading> : null }
+
       <JsonViewer value={metadata} theme="dark" defaultInspectDepth={1} />
     </Padded>
   );