mirrors/PMTiles
1
0
Fork 0
mirror of https://github.com/protomaps/PMTiles.git synced 2026-02-04 19:01:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

use json-viewer for metadata [#49]

Browse Source
This commit is contained in:
Brandon Liu
2022-12-02 02:27:29 +08:00
parent 24ddc77c56
commit b6a1f0ca56
3 changed files with 759 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

837
app/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
app/package.json
View File

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

54
app/src/Metadata.tsx
View File

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