Refactoring deploy process

.github/workflows/deploy.yml → .github/workflows/deploy-preview.yml

@@ -1,10 +1,8 @@
 # This workflow will do a clean install of node dependencies and deploy to AWS.
 
-name: Deploy
+name: Preview Deployment
 
 on:
-  push:
-    branches: [ main ]
   pull_request:
     branches: [ main ]
 
@@ -16,24 +14,30 @@ jobs:
   build:
     name: Build
     runs-on: ubuntu-latest
+    outputs:
+      ariabaseurl: ${{ steps.vars.outputs.ariabaseurl }}
+      distdir: ${{ steps.vars.outputs.distdir }}
+      identifier: ${{ steps.vars.outputs.identifier }}
 
     steps:
     - name: Checkout 📥
       uses: actions/checkout@v4
 
+    - name: Setup vars 📋
+      id: vars
+      run: |
+        echo "ariabaseurl=/aria/$(git rev-parse --short ${{ github.sha }})-20.x-dist" >> $GITHUB_OUTPUT
+        echo "distdir=$(git rev-parse --short ${{ github.sha }})-20.x-dist" >> $GITHUB_OUTPUT
+        echo "identifier=$(git rev-parse --short ${{ github.sha }})-20.x" >> $GITHUB_OUTPUT
+
     - name: Use Node.js 20.12.0 ⚙️
       uses: actions/setup-node@v4
       with:
         node-version: 20
 
-    - name: Setup vars 📋
-      id: vars
-      run: |
-        echo ::set-output name=distdir::$(git rev-parse --short ${{ github.sha }})-20.x-dist
-        echo ::set-output name=ariabaseurl::/aria/$(git rev-parse --short ${{ github.sha }})-20.x-dist
-
     - name: Install 🎯
       run: cd site; npm install
+
     - name: Build 🏃
       run: cd site; npm run build
       env:
@@ -46,12 +50,12 @@ jobs:
         if-no-files-found: error
 
   deploy:
-    name: Deploy
+    name: Deploy to Cloudfront
     runs-on: ubuntu-latest
     needs: build
     environment:
       name: preview
-      url:  https://d13285jxgcxetl.cloudfront.net/aria/${{ steps.vars.outputs.distdir }}/index.html
+      url:  https://d13285jxgcxetl.cloudfront.net/aria/${{ needs.build.outputs.identifier }}-aria.html
 
     steps:
     - name: Checkout 📥
@@ -70,30 +74,18 @@ jobs:
         role-duration-seconds: 900 # the ttl of the session, in seconds.
         aws-region: us-west-2
 
-    - name: Setup vars 📋
-      id: vars
-      run: |
-        echo ::set-output name=identifier::$(git rev-parse --short ${{ github.sha }})-20.x
-        echo ::set-output name=distdir::$(git rev-parse --short ${{ github.sha }})-20.x-dist
-
-    - name: Prep files 🔨
-      run: cd site ; npm run aws_deploy
-      env:
-        IDENTIFIER: ${{ steps.vars.outputs.identifier }}
-        DISTDIR: ${{ steps.vars.outputs.distdir }}
-
     - name: Copy new index file to S3 📤
-      run: aws s3 cp site/$DISTDIR/index.html s3://aria-site/aria/$IDENTIFIER-aria.html --no-progress
+      run: aws s3 cp site/dist/index.html s3://aria-site/aria/$IDENTIFIER-aria.html --no-progress
       env:
-        IDENTIFIER: ${{ steps.vars.outputs.identifier }}
-        DISTDIR: ${{ steps.vars.outputs.distdir }}
+        IDENTIFIER: ${{ needs.build.outputs.identifier }}
+        DISTDIR: ${{ needs.build.outputs.distdir }}
 
     - name: Copy new dist dir to S3 📤
-      run: aws s3 cp site/$DISTDIR s3://aria-site/aria/$DISTDIR --recursive --no-progress
+      run: aws s3 cp site/dist s3://aria-site/aria/$DISTDIR --recursive --no-progress
       env:
-        IDENTIFIER: ${{ steps.vars.outputs.identifier }}
-        DISTDIR: ${{ steps.vars.outputs.distdir }}
+        IDENTIFIER: ${{ needs.build.outputs.identifier }}
+        DISTDIR: ${{ needs.build.outputs.distdir }}
 
     - name: Deployment complete! 🚀
       run: |
-        echo "Your build is at: https://d13285jxgcxetl.cloudfront.net/aria/${{ steps.vars.outputs.distdir }}/index.html" >> $GITHUB_STEP_SUMMARY
+        echo "Your build is at: https://d13285jxgcxetl.cloudfront.net/aria/${{ needs.build.outputs.identifier }}-aria.html" >> $GITHUB_STEP_SUMMARY

.github/workflows/deploy-production.yml

@@ -0,0 +1,86 @@
+# This workflow will do a clean install of node dependencies and deploy to AWS.
+
+name: Production Deployment
+
+on:
+  push:
+    branches: [ main ]
+
+permissions:
+  id-token: write # required to use OIDC authentication
+  contents: read # required to checkout the code from the repo
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    outputs:
+      ariabaseurl: ${{ steps.vars.outputs.ariabaseurl }}
+      distdir: ${{ steps.vars.outputs.distdir }}
+
+    steps:
+    - name: Checkout 📥
+      uses: actions/checkout@v4
+
+    - name: Setup vars 📋
+      id: vars
+      run: |
+        echo "ariabaseurl=/aria/$(git rev-parse --short ${{ github.sha }})-20.x-dist" >> $GITHUB_OUTPUT
+        echo "distdir=$(git rev-parse --short ${{ github.sha }})-20.x-dist" >> $GITHUB_OUTPUT
+
+    - name: Use Node.js 20.12.0 ⚙️
+      uses: actions/setup-node@v4
+      with:
+        node-version: 20
+
+    - name: Install 🎯
+      run: cd site; npm install
+
+    - name: Build 🏃
+      run: cd site; npm run build
+      env:
+        BASE_ARIA_URL: ${{ steps.vars.outputs.ariabaseurl }}
+    - name: Upload artifacts 📤
+      uses: actions/upload-artifact@v4
+      with:
+        name: build-artifacts
+        path: site/dist
+        if-no-files-found: error
+
+  deploy:
+    name: Deploy to Cloudfront
+    runs-on: ubuntu-latest
+    needs: build
+    environment:
+      name: preview
+      url:  https://d13285jxgcxetl.cloudfront.net/aria/${{ needs.build.outputs.distdir }}/index.html
+
+    steps:
+    - name: Checkout 📥
+      uses: actions/checkout@v4
+
+    - name: Download artifacts 📥
+      uses: actions/download-artifact@v4
+      with:
+        name: build-artifacts
+        path: site/dist
+
+    - name: Configure AWS credentials 🔐
+      uses: aws-actions/configure-aws-credentials@v4
+      with:
+        role-to-assume: arn:aws:iam::851725248912:role/aria-cicd-role
+        role-duration-seconds: 900 # the ttl of the session, in seconds.
+        aws-region: us-west-2
+
+    - name: Copy new index file to S3 📤
+      run: aws s3 cp site/dist/index.html s3://aria-site/index.html --no-progress
+      env:
+        DISTDIR: ${{ needs.build.outputs.distdir }}
+
+    - name: Copy new dist dir to S3 📤
+      run: aws s3 cp site/dist s3://aria-site/aria/$DISTDIR --recursive --no-progress
+      env:
+        DISTDIR: ${{ needs.build.outputs.distdir }}
+
+    - name: Invalidate Cloudfront cache 📤
+      run: aws cloudfront create-invalidation --distribution-id E3GBPWSHZI8N0 --paths /index.html

site/src/inspector_panel/InspectorPanel.jsx

@@ -1,16 +1,10 @@
 import PropTypes from "prop-types";
-import TableRow from "./TableRow";
 import "./InspectorPanel.css";
-import CloseIcon from "@mui/icons-material/Close";
-import ThemePanel from "./ThemePanel";
-import {
-  BASE_TIPS,
-  BUILDING_TIPS,
-  DIVISION_TIPS,
-  PLACES_TIPS,
-  TRANSPORTATION_TIPS,
-  ADDRESSES_TIPS,
-} from "./TipLibrary";
+import { getThemeConfig, isKnownTheme } from "./config/ThemeRegistry";
+import { processActiveFeature } from "./utils/EntityProcessor";
+import { extractPanelTitle } from "./utils/PanelTitleExtractor";
+import PanelHeader from "./components/PanelHeader";
+import FallbackTable from "./components/FallbackTable";
 
 function InspectorPanel({
   mode,
@@ -24,156 +18,49 @@ function InspectorPanel({
     return;
   }
 
-  const entity = {
-    theme: activeFeature.source,
-    type: activeFeature.sourceLayer,
-    ...activeFeature.properties,
-  };
-
+  // Process the active feature into an entity
+  const entity = processActiveFeature(activeFeature);
   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
-    }
-  }
+  // Extract panel title
+  const panelTitle = extractPanelTitle(entity);
 
-  let inspectorPanel = <div></div>;
+  // Handle close panel
+  const handleClose = () => {
+    setFeatures([]);
+    setActiveFeature(null);
+  };
 
-  if (theme === "base") {
-    inspectorPanel = (
-      <ThemePanel
-        mode={mode}
-        entity={entity}
-        tips={BASE_TIPS}
-        activeThemes={activeThemes}
-        setActiveThemes={setActiveThemes}
-      />
-    );
-  } else if (theme === "buildings") {
-    inspectorPanel = (
-      <ThemePanel
-        mode={mode}
-        entity={entity}
-        tips={BUILDING_TIPS}
-        activeThemes={activeThemes}
-        setActiveThemes={setActiveThemes}
-      />
-    );
-  } else if (theme === "divisions") {
-    inspectorPanel = (
-      <ThemePanel
-        mode={mode}
-        entity={entity}
-        tips={DIVISION_TIPS}
-        activeThemes={activeThemes}
-        setActiveThemes={setActiveThemes}
-      />
-    );
-  } else if (theme === "places") {
-    inspectorPanel = (
-      <ThemePanel
-        mode={mode}
-        entity={entity}
-        tips={PLACES_TIPS}
-        activeThemes={activeThemes}
-        setActiveThemes={setActiveThemes}
-      />
-    );
-  } else if (theme === "transportation") {
-    inspectorPanel = (
-      <ThemePanel
-        mode={mode}
-        entity={entity}
-        tips={TRANSPORTATION_TIPS}
-        activeThemes={activeThemes}
-        setActiveThemes={setActiveThemes}
-      />
-    );
-  } else if (theme === "addresses") {
+  // Get theme configuration
+  const themeConfig = getThemeConfig(theme);
+
+  let inspectorPanel;
+
+  if (themeConfig) {
+    // Use the configured theme component
+    const ThemeComponent = themeConfig.component;
     inspectorPanel = (
-      <ThemePanel
+      <ThemeComponent
         mode={mode}
         entity={entity}
-        tips={ADDRESSES_TIPS}
+        tips={themeConfig.tips}
         activeThemes={activeThemes}
         setActiveThemes={setActiveThemes}
       />
     );
-  } else if (theme === "addresses") {
-    inspectorPanel = (
-      <ThemePanel mode={mode} entity={entity} tips={ADDRESSES_TIPS} />
-    );
   } else {
+    // Fallback for unhandled themes
     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>
-          {orderedKeys.map(({ key, indented }) => (
-            <TableRow
-              key={key}
-              mode={mode}
-              table_key={key}
-              entity={entity}
-              indented={indented}
-            />
-          ))}
-        </tbody>
-      </table>
+      <FallbackTable mode={mode} entity={entity} />
     );
   }
 
   return (
     <div className="inspector-panel">
-      <div className="panel-header">
-        <h6 className="title">{panelTitle}</h6>
-        <button
-          className="close-panel-button"
-          onClick={() => {
-            setFeatures([]);
-            setActiveFeature(null);
-          }}
-        >
-          <CloseIcon className="close-panel-icon" />
-        </button>
-      </div>
+      <PanelHeader title={panelTitle} onClose={handleClose} />
       {inspectorPanel}
       <p>
         <a