Merge pull request #222 from OvertureMaps/externalized-versions

Add STAC dependency and improve Inspector Panel UI

Author: danabauer

.github/workflows/build.yml

@@ -1,11 +1,10 @@
-# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+# This workflow will do a clean install of node dependencies and deploy to AWS.
 
 name: Deploy
 
 on:
   push:
-    branches: [ main , manifest_driven_downloads]
+    branches: [ main ]
   pull_request:
     branches: [ main ]
 
@@ -37,7 +36,7 @@ jobs:
       run: cd site; npm install
     - name: Build 🏃
       run: cd site; npm run build
-      env: 
+      env:
         BASE_ARIA_URL: ${{ steps.vars.outputs.ariabaseurl }}
     - name: Upload artifacts 📤
       uses: actions/upload-artifact@v4
@@ -50,6 +49,9 @@ jobs:
     name: Deploy
     runs-on: ubuntu-latest
     needs: build
+    environment:
+      name: preview
+      url:  https://d13285jxgcxetl.cloudfront.net/aria/${{ steps.vars.outputs.distdir }}/index.html
 
     steps:
     - name: Checkout 📥
@@ -94,4 +96,4 @@ jobs:
 
     - name: Deployment complete! 🚀
       run: |
-        echo "Your build is at: https://d13285jxgcxetl.cloudfront.net/aria/${{ steps.vars.outputs.distdir }}/index.html"
+        echo "Your build is at: https://d13285jxgcxetl.cloudfront.net/aria/${{ steps.vars.outputs.distdir }}/index.html" >> $GITHUB_STEP_SUMMARY

.github/workflows/deploy.yml

@@ -1,5 +1,5 @@
 // URL for the remote manifest file
-const STAC_URL = 'https://labs.overturemaps.org/stac/catalog.json'
+const STAC_URL = 'https://stac.overturemaps.org/catalog.json'
 
 // Cache the manifest to avoid repeated fetches
 let cachedManifest = null;
@@ -24,7 +24,7 @@ async function fetchManifest() {
       })
       .then(stacData => {
         const latest = stacData.latest;
-        return fetch(`https://labs.overturemaps.org/stac/${latest}/manifest.geojson`);
+        return fetch(`https://stac.overturemaps.org/${latest}/manifest.geojson`);
       })
       .then(response => {
         if (!response.ok) {

site/src/DownloadCatalog.js

@@ -20,8 +20,11 @@ import { layers } from "./Layers";
 import ThemeTypeLayer from "./ThemeTypeLayer";
 import FeaturePopup from "./FeatureSelector";
 
+// Fetch the latest Overture release from Overture STAC
+const LATEST_RELEASE = await fetch('https://stac.overturemaps.org/catalog.json').then(r => r.json()).then(r => r.latest.split('.')[0])
+
 const PMTILES_URL =
-  "pmtiles://https://d3c1b7bog2u1nn.cloudfront.net/2025-07-23/";
+  "pmtiles://https://d3c1b7bog2u1nn.cloudfront.net/" + LATEST_RELEASE + "/";
 
 const INITIAL_VIEW_STATE = {
   latitude: 38.90678,

site/src/Map.jsx

@@ -32,7 +32,7 @@
     overflow-y: scroll;
     overflow-x: auto;
     max-height: 250px;
-    table-layout: fixed;
+    table-layout: auto;
   }
 
   table th {

site/src/inspector_panel/InspectorPanel.css

@@ -32,6 +32,19 @@ function InspectorPanel({
 
   const theme = entity["theme"];
 
+  // Determine the panel title - use name if available, otherwise default
+  let panelTitle = "Inspector Panel";
+  if (entity["names"]) {
+    try {
+      const names = JSON.parse(entity["names"]);
+      if (names["primary"]) {
+        panelTitle = names["primary"];
+      }
+    } catch (e) {
+      // If parsing fails, keep default title
+    }
+  }
+
   let inspectorPanel = <div></div>;
 
   if (theme === "base") {
@@ -101,14 +114,47 @@ function InspectorPanel({
   } else {
     console.log("unhandled theme type");
     console.log(entity);
+
+    // Get all keys except those starting with @
+    const allKeys = Object.keys(entity).filter((key) => !key.startsWith("@"));
+
+    // Create custom ordering for class/subclass hierarchy
+    const orderedKeys = [];
+    const processedKeys = new Set();
+
+    // First pass: add all keys except subclass
+    allKeys.forEach(key => {
+      if (key !== "subclass") {
+        orderedKeys.push({ key, indented: false });
+        processedKeys.add(key);
+
+        // If this is "class" and "subclass" exists, add subclass right after
+        if (key === "class" && entity.hasOwnProperty("subclass")) {
+          orderedKeys.push({ key: "subclass", indented: true });
+          processedKeys.add("subclass");
+        }
+      }
+    });
+
+    // Second pass: add any remaining keys that weren't processed
+    allKeys.forEach(key => {
+      if (!processedKeys.has(key)) {
+        orderedKeys.push({ key, indented: false });
+      }
+    });
+
     inspectorPanel = (
       <table>
         <tbody>
-          {Object.keys(entity)
-            .filter((key) => !key.startsWith("@"))
-            .map((key) => (
-              <TableRow key={key} mode={mode} table_key={key} entity={entity} />
-            ))}
+          {orderedKeys.map(({ key, indented }) => (
+            <TableRow
+              key={key}
+              mode={mode}
+              table_key={key}
+              entity={entity}
+              indented={indented}
+            />
+          ))}
         </tbody>
       </table>
     );
@@ -117,7 +163,7 @@ function InspectorPanel({
   return (
     <div className="inspector-panel">
       <div className="panel-header">
-        <h4 className="title">Inspector Panel</h4>
+        <h6 className="title">{panelTitle}</h6>
         <button
           className="close-panel-button"
           onClick={() => {

site/src/inspector_panel/InspectorPanel.jsx

@@ -0,0 +1,34 @@
+.property-content {
+  margin-left: 8px;
+}
+
+.property-content p {
+  margin: 2px 0 !important;
+  line-height: 1.3;
+  padding: 0;
+}
+
+.property-content strong {
+  font-size: 11px;
+  font-weight: 500;
+  color: #64748b;
+}
+
+.panel-row.names,
+.panel-row.categories {
+  overflow: auto;
+  max-height: 200px;
+}
+
+.panel-row.names .property-content > p,
+.panel-row.categories .property-content > p {
+  border-bottom: 1px solid #f1f5f9;
+  padding-bottom: 4px;
+  margin-bottom: 4px;
+}
+
+.panel-row.names .property-content > p:last-child,
+.panel-row.categories .property-content > p:last-child {
+  border-bottom: none;
+  margin-bottom: 2px;
+}