From bb51c64b72a7be0cc5a6ead19dde68528592aa06 Mon Sep 17 00:00:00 2001
From: Brandon Liu <bdon@users.noreply.github.com>
Date: Fri, 25 Apr 2025 11:33:32 +0800
Subject: [PATCH] New viewer 4 (#559)

app: viewer improvements [#49]

* show missing id when feature id is undefined instead of 0
* improve point symbology for dense point tilesets
* show lon,lat in popup
* better wrapping for long popup value strings
---
 app/src/FeatureTable.tsx | 21 ++++++++++++++-------
 app/src/PageMap.tsx      | 12 +++++++++---
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/app/src/FeatureTable.tsx b/app/src/FeatureTable.tsx
index 3a28050..7f5f81e 100644
--- a/app/src/FeatureTable.tsx
+++ b/app/src/FeatureTable.tsx
@@ -1,9 +1,9 @@
-import { For } from "solid-js";
+import { For, Show } from "solid-js";
 
 export interface InspectableFeature {
   layerName: string;
   type: number;
-  id: number;
+  id: number | undefined;
   properties: { [key: string]: string | number | boolean };
 }
 
@@ -15,21 +15,28 @@ const intToGeomType = (n: number) => {
 
 export const FeatureTable = (props: { features: InspectableFeature[] }) => {
   return (
-    <div class="max-h-120 overflow-y-scroll divide-y app-divide">
+    <div class="max-h-120 overflow-y-scroll max-w-200 divide-y app-divide">
       <For each={props.features}>
         {(f) => (
           <div class="p-2">
             <div>
-              {f.layerName} {intToGeomType(f.type)}
+              {f.layerName}{" "}
+              <span class="app-text-light">{intToGeomType(f.type)}</span>
+            </div>
+            <div class="text-xs font-mono app-text-light">
+              <Show when={f.id !== undefined} fallback={"missing ID"}>
+                ID {f.id}
+              </Show>
             </div>
-            <div class="text-xs font-mono app-text-light">ID {f.id}</div>
             <table class="font-mono table-auto border-separate border-spacing-x-2">
               <tbody>
                 <For each={Object.entries(f.properties)}>
                   {([key, value]) => (
                     <tr>
-                      <td class="text-right app-text-light">{key}</td>
-                      <td>
+                      <td class="text-right app-text-light break-keep">
+                        {key}
+                      </td>
+                      <td class="break-all">
                         {typeof value === "boolean"
                           ? JSON.stringify(value)
                           : value.toString()}
diff --git a/app/src/PageMap.tsx b/app/src/PageMap.tsx
index 48bb10e..af4da7c 100644
--- a/app/src/PageMap.tsx
+++ b/app/src/PageMap.tsx
@@ -66,7 +66,7 @@ function MapView(props: {
     return hoveredFeatures().map((h) => {
       return {
         layerName: h.sourceLayer || "unknown",
-        id: (h.id as number) || 0,
+        id: h.id ? (h.id as number) : undefined,
         properties: h.properties,
         type: h._vectorTileFeature.type,
       };
@@ -169,7 +169,8 @@ function MapView(props: {
           "source-layer": vectorLayer,
           paint: {
             "circle-color": colorForIdx(i),
-            "circle-radius": 3,
+            "circle-radius": ["interpolate", ["linear"], ["zoom"], 4, 2, 12, 4],
+            "circle-opacity": 0.5,
             "circle-stroke-color": "white",
             "circle-stroke-width": [
               "case",
@@ -355,6 +356,7 @@ function MapView(props: {
       }
 
       for (const hoveredFeature of hoveredFeatures()) {
+        if (hoveredFeature.id === undefined) continue;
         map.setFeatureState(hoveredFeature, { hover: false });
       }
 
@@ -367,6 +369,7 @@ function MapView(props: {
       features = features.filter((feature) => feature.source === "tileset");
 
       for (const feature of features) {
+        if (feature.id === undefined) continue;
         map.setFeatureState(feature, { hover: true });
       }
 
@@ -387,7 +390,7 @@ function MapView(props: {
             <div>
               <FeatureTable features={inspectableFeatures()} />
               <a
-                class="block text-xs btn-primary mt-2 text-center"
+                class="block text-xs btn-primary mt-2 text-center px-2"
                 target="_blank"
                 rel="noreferrer"
                 href={tileInspectUrl(props.tileset().getStateUrl(), [
@@ -398,6 +401,9 @@ function MapView(props: {
               >
                 Tile {z}/{tileX}/{tileY}
               </a>
+              <div class="text-xs text-center mt-2 font-mono">
+                {e.lngLat.lng.toFixed(4)},{e.lngLat.lat.toFixed(4)}
+              </div>
             </div>
           ),
           hiddenRef,