Spaces:

fredmo
/

gcp-gpu-tpu-map

Running

App Files Files Community

fredmo commited on 20 days ago

Commit

ea86f50

verified ·

1 Parent(s): 6acf70c

Update index.html

Browse files

Files changed (1) hide show

index.html +196 -164

index.html CHANGED Viewed

@@ -7,51 +7,81 @@
     <script src="https://cesium.com/downloads/cesiumjs/releases/1.117/Build/Cesium/Cesium.js"></script>
     <link href="https://cesium.com/downloads/cesiumjs/releases/1.117/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
     <style>
-        html, body, #cesiumContainer {
             width: 100%;
             height: 100%;
             margin: 0;
             padding: 0;
-            overflow: hidden;
             font-family: sans-serif;
         }
         #controls {
             position: absolute;
             top: 10px;
             left: 10px;
-            background: rgba(40, 40, 40, 0.8);
-            padding: 10px;
-            border-radius: 5px;
             color: white;
-            z-index: 1;
         }
         #controls label {
-            margin-right: 5px;
         }
         #infoBox {
             position: absolute;
-            bottom: 10px;
             left: 10px;
-            background: rgba(40, 40, 40, 0.8);
-            padding: 10px;
-            border-radius: 5px;
             color: white;
-            z-index: 1;
-            max-width: 300px;
             display: none; /* Hidden by default */
         }
         #infoBox h3 {
             margin-top: 0;
         }
     </style>
 </head>
 <body>
     <div id="cesiumContainer"></div>
     <div id="controls">
-        <label for="acceleratorFilter">Filter by Accelerator:</label>
-        <select id="acceleratorFilter">
-            <option value="all">All Accelerators</option>
-        </select>
     </div>
     <div id="infoBox">
         <h3>Location Details</h3>
@@ -64,36 +94,35 @@
     <script>
         // --- Data Preparation ---
-        // Approximate coordinates (Latitude, Longitude)
         const locations = {
-            "Council Bluffs, Iowa, USA": { lat: 41.2619, lon: -95.8608, accelerators: {} },
-            "Eemshaven, Netherlands": { lat: 53.442, lon: 6.83, accelerators: {} },
-            "Changhua County, Taiwan": { lat: 24.0706, lon: 120.5417, accelerators: {} },
-            "Columbus, Ohio, USA": { lat: 39.9612, lon: -82.9988, accelerators: {} },
-            "Dallas, Texas, USA": { lat: 32.7767, lon: -96.7970, accelerators: {} },
-            "The Dalles, Oregon, USA": { lat: 45.5946, lon: -121.1787, accelerators: {} },
-            "Las Vegas, Nevada, USA": { lat: 36.1699, lon: -115.1398, accelerators: {} },
-            "St. Ghislain, Belgium": { lat: 50.446, lon: 3.82, accelerators: {} },
-            "Jurong West, Singapore": { lat: 1.3398, lon: 103.7053, accelerators: {} },
-            "Moncks Corner, South Carolina, USA": { lat: 33.1913, lon: -80.0195, accelerators: {} },
-            "Ashburn, Virginia, USA": { lat: 39.0438, lon: -77.4874, accelerators: {} },
-            "Tokyo, Japan": { lat: 35.6895, lon: 139.6917, accelerators: {} },
-            "Sydney, Australia": { lat: -33.8688, lon: 151.2093, accelerators: {} },
-            "Toronto, Ontario, Canada": { lat: 43.6532, lon: -79.3832, accelerators: {} },
-            "Seoul, South Korea": { lat: 37.5665, lon: 126.9780, accelerators: {} },
-            "Mumbai, India": { lat: 19.0760, lon: 72.8777, accelerators: {} },
-            "London, UK": { lat: 51.5074, lon: -0.1278, accelerators: {} },
-            "Frankfurt, Germany": { lat: 50.1109, lon: 8.6821, accelerators: {} },
-            "Salt Lake City, Utah, USA": { lat: 40.7608, lon: -111.8910, accelerators: {} },
-            "Hong Kong": { lat: 22.3193, lon: 114.1694, accelerators: {} },
-            "Jakarta, Indonesia": { lat: -6.2088, lon: 106.8456, accelerators: {} },
-            "Warsaw, Poland": { lat: 52.2297, lon: 21.0122, accelerators: {} },
-            "Tel Aviv, Israel": { lat: 32.0853, lon: 34.7818, accelerators: {} },
-            "Osasco, São Paulo, Brazil": { lat: -23.5325, lon: -46.7917, accelerators: {} },
-            "Montréal, Québec, Canada": { lat: 45.5017, lon: -73.5673, accelerators: {} },
-            "Los Angeles, California, USA": { lat: 34.0522, lon: -118.2437, accelerators: {} },
-            "Zurich, Switzerland": { lat: 47.3769, lon: 8.5417, accelerators: {} },
-            "Dammam, Saudi Arabia": { lat: 26.4207, lon: 50.0888, accelerators: {} }
         };
         const datacenterData = [
@@ -101,11 +130,11 @@
             { accelerator: "TPU v2", region: "us-central1", zones: "b, c, f", location: "Council Bluffs, Iowa, USA" },
             { accelerator: "TPU v2", region: "europe-west4", zones: "a", location: "Eemshaven, Netherlands" },
             { accelerator: "TPU v2", region: "asia-east1", zones: "c", location: "Changhua County, Taiwan" },
-            // TPU v3 (many are repeated in source, assuming unique locations for now)
             { accelerator: "TPU v3", region: "us-central1", zones: "a, b, f", location: "Council Bluffs, Iowa, USA" },
             { accelerator: "TPU v3", region: "europe-west4", zones: "a", location: "Eemshaven, Netherlands" },
             // TPU v4
-            { accelerator: "TPU v4", region: "us-central2", zones: "b", location: "Council Bluffs, Iowa, USA" }, // Note: Original data has "(?)"
             // TPU v5e
             { accelerator: "TPU v5e", region: "us-central1", zones: "a", location: "Council Bluffs, Iowa, USA" },
             { accelerator: "TPU v5e", region: "us-east5", zones: "a, b, c", location: "Columbus, Ohio, USA" },
@@ -117,7 +146,7 @@
             // TPU v5p
             { accelerator: "TPU v5p", region: "us-east5", zones: "a", location: "Columbus, Ohio, USA" },
             { accelerator: "TPU v5p", region: "europe-west4", zones: "b", location: "Eemshaven, Netherlands" },
-            // TPU v6e (Data seems to have a typo for H100 A3 Mega, correcting as TPU v6e based on position)
             { accelerator: "TPU v6e", region: "us-east1", zones: "d", location: "Moncks Corner, South Carolina, USA" },
             { accelerator: "TPU v6e", region: "us-east5", zones: "b", location: "Columbus, Ohio, USA" },
             { accelerator: "TPU v6e", region: "europe-west4", zones: "a", location: "Eemshaven, Netherlands" },
@@ -225,17 +254,17 @@
             { accelerator: "N1+P4", region: "us-central1", zones: "a, c", location: "Council Bluffs, Iowa, USA" },
             { accelerator: "N1+P4", region: "us-east4", zones: "a, b, c", location: "Ashburn, Virginia, USA" },
             { accelerator: "N1+P4", region: "northamerica-northeast1", zones: "a, b, c", location: "Montréal, Québec, Canada" },
-            { accelerator: "N1+P4", region: "us-west2", zones: "b, c", location: "Los Angeles, California, USA" }, // Assumed LA based on region
             { accelerator: "N1+P4", region: "asia-southeast1", zones: "b, c", location: "Jurong West, Singapore" },
             { accelerator: "N1+P4", region: "australia-southeast1", zones: "a, b", location: "Sydney, Australia" },
             { accelerator: "N1+P4", region: "europe-west4", zones: "b, c", location: "Eemshaven, Netherlands" },
         ];
-        // Group accelerators by physical location for easier display and entity creation
         const groupedLocations = {};
         datacenterData.forEach(item => {
             if (!locations[item.location]) {
-                console.warn(`Location data for "${item.location}" not found. Skipping.`);
                 return;
             }
             if (!groupedLocations[item.location]) {
@@ -243,146 +272,149 @@
                     lat: locations[item.location].lat,
                     lon: locations[item.location].lon,
                     name: item.location,
-                    accelerators: [],
-                    regions: new Set(), // To store unique region IDs for this location
-                    zones: new Set() // To store unique zones for this location
                 };
             }
-            // Add accelerator if not already listed for this location
-            if (!groupedLocations[item.location].accelerators.some(acc => acc.type === item.accelerator)) {
-                 groupedLocations[item.location].accelerators.push({
-                    type: item.accelerator,
-                    region: item.region,
-                    zones: item.zones
-                });
-            }
-            // Consolidate region and zone info at the location level
-            // This part is tricky because region/zones can be specific to an accelerator
-            // For simplicity, we'll list all associated, but for precise info, click is needed
             groupedLocations[item.location].regions.add(item.region);
             item.zones.split(',').map(z => z.trim()).forEach(z => groupedLocations[item.location].zones.add(z));
         });
-        // Cesium.Ion.defaultAccessToken = 'YOUR_CESIUM_ION_ACCESS_TOKEN'; // Only if using Cesium Ion assets
-        const viewer = new Cesium.Viewer('cesiumContainer', {
-            terrainProvider: Cesium.createWorldTerrain(), // Optional: adds terrain
-            // imageryProvider: new Cesium.OpenStreetMapImageryProvider({ // Optional: different base map
-            //     url : 'https://a.tile.openstreetmap.org/'
-            // }),
-            animation: false,
-            timeline: false,
-            geocoder: false,
-            homeButton: false,
-            sceneModePicker: false,
-            baseLayerPicker: false,
-            navigationHelpButton: false,
-            fullscreenButton: false,
-        });
-        viewer.camera.flyTo({
-            destination: Cesium.Cartesian3.fromDegrees(-95, 38, 15000000), // Fly to a general view of the US
-            duration: 3
-        });
-        const acceleratorFilter = document.getElementById('acceleratorFilter');
-        const infoBox = document.getElementById('infoBox');
         const locationNameEl = document.getElementById('locationName');
         const regionIdEl = document.getElementById('regionId');
         const zoneIdEl = document.getElementById('zoneId');
         const acceleratorListEl = document.getElementById('acceleratorList');
-        const uniqueAccelerators = new Set();
-        datacenterData.forEach(dc => uniqueAccelerators.add(dc.accelerator));
-        uniqueAccelerators.forEach(acc => {
-            const option = document.createElement('option');
-            option.value = acc;
-            option.textContent = acc;
-            acceleratorFilter.appendChild(option);
-        });
         const locationEntities = [];
-        Object.values(groupedLocations).forEach(locData => {
-            if (locData.lat === undefined || locData.lon === undefined) {
-                console.warn(`Missing coordinates for ${locData.name}`);
-                return;
-            }
-            const entity = viewer.entities.add({
-                position: Cesium.Cartesian3.fromDegrees(locData.lon, locData.lat),
-                point: {
-                    pixelSize: 10,
-                    color: Cesium.Color.DODGERBLUE,
-                    outlineColor: Cesium.Color.WHITE,
-                    outlineWidth: 2
-                },
-                label: {
-                    text: locData.name,
-                    font: '12pt monospace',
-                    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-                    outlineWidth: 2,
-                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-                    pixelOffset: new Cesium.Cartesian2(0, -12)
-                },
-                properties: { // Custom properties
-                    name: locData.name,
-                    accelerators: locData.accelerators, // Array of {type, region, zones}
-                    all_regions_at_location: Array.from(locData.regions).join(', '),
-                    all_zones_at_location: Array.from(locData.zones).join(', ')
                 }
             });
-            locationEntities.push(entity);
-        });
-        acceleratorFilter.addEventListener('change', (event) => {
-            const selectedAccelerator = event.target.value;
-            infoBox.style.display = 'none'; // Hide info box on filter change
-            locationEntities.forEach(entity => {
-                if (selectedAccelerator === 'all') {
-                    entity.show = true;
-                } else {
-                    // Check if any of the accelerators at this location match the filter
-                    const hasAccelerator = entity.properties.accelerators.getValue().some(acc => acc.type === selectedAccelerator);
-                    entity.show = hasAccelerator;
-                }
             });
-        });
-        // Handle clicks on entities
-        viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
-            const pickedObject = viewer.scene.pick(movement.position);
-            infoBox.style.display = 'none'; // Hide by default
-            if (Cesium.defined(pickedObject) && Cesium.defined(pickedObject.id) && Cesium.defined(pickedObject.id.properties)) {
-                const properties = pickedObject.id.properties;
-                const locationName = properties.name.getValue();
-                const acceleratorsAtLocation = properties.accelerators.getValue(); // This is an array of {type, region, zones}
-                locationNameEl.textContent = locationName;
-                // Collect all regions and zones for *this specific picked location*
-                const regionsForDisplay = new Set();
-                const zonesForDisplay = new Set();
-                acceleratorListEl.innerHTML = ''; // Clear previous list
-                acceleratorsAtLocation.forEach(acc => {
-                    regionsForDisplay.add(acc.region);
-                    acc.zones.split(',').map(z => z.trim()).forEach(zone => zonesForDisplay.add(zone));
-                    const listItem = document.createElement('li');
-                    listItem.textContent = `${acc.type} (Region: ${acc.region}, Zones: ${acc.zones})`;
-                    acceleratorListEl.appendChild(listItem);
-                });
-                regionIdEl.textContent = Array.from(regionsForDisplay).join(', ') || 'N/A';
-                zoneIdEl.textContent = Array.from(zonesForDisplay).sort().join(', ') || 'N/A';
-                infoBox.style.display = 'block';
-            }
-        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
     </script>
 </body>

     <script src="https://cesium.com/downloads/cesiumjs/releases/1.117/Build/Cesium/Cesium.js"></script>
     <link href="https://cesium.com/downloads/cesiumjs/releases/1.117/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
     <style>
+        html, body {
             width: 100%;
             height: 100%;
             margin: 0;
             padding: 0;
+            overflow: hidden; /* Important to prevent scrollbars from interfering */
             font-family: sans-serif;
         }
+        #cesiumContainer {
+            width: 100%;
+            height: 100%;
+            /* visibility: visible !important; Ensure it's not hidden by other styles */
+            /* background-color: lightblue; Add a temporary background to see if the div itself is rendered */
+        }
         #controls {
             position: absolute;
             top: 10px;
             left: 10px;
+            background: rgba(40, 40, 40, 0.85);
+            padding: 12px;
+            border-radius: 8px;
             color: white;
+            z-index: 10; /* Ensure it's above the map */
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
         }
         #controls label {
+            margin-right: 8px;
+            font-weight: bold;
+        }
+        #acceleratorSearch {
+            padding: 8px;
+            border-radius: 4px;
+            border: 1px solid #555;
+            background-color: #333;
+            color: white;
+            width: 250px; /* Adjust as needed */
         }
         #infoBox {
             position: absolute;
+            bottom: 20px; /* Increased spacing */
             left: 10px;
+            background: rgba(40, 40, 40, 0.85);
+            padding: 15px;
+            border-radius: 8px;
             color: white;
+            z-index: 10;
+            max-width: 350px; /* Slightly wider */
             display: none; /* Hidden by default */
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
         }
         #infoBox h3 {
             margin-top: 0;
+            margin-bottom: 10px;
+            border-bottom: 1px solid #555;
+            padding-bottom: 5px;
+        }
+        #infoBox p {
+            margin: 5px 0;
+        }
+        #acceleratorList {
+            list-style-type: none;
+            padding-left: 0;
+            max-height: 150px; /* Prevent very long lists */
+            overflow-y: auto; /* Add scroll for long lists */
+        }
+        #acceleratorList li {
+            padding: 3px 0;
         }
     </style>
 </head>
 <body>
     <div id="cesiumContainer"></div>
     <div id="controls">
+        <label for="acceleratorSearch">Search Accelerators:</label>
+        <input type="text" id="acceleratorSearch" placeholder="E.g., TPU v5e, H100, A100...">
     </div>
     <div id="infoBox">
         <h3>Location Details</h3>
     <script>
         // --- Data Preparation ---
         const locations = {
+            "Council Bluffs, Iowa, USA": { lat: 41.2619, lon: -95.8608 },
+            "Eemshaven, Netherlands": { lat: 53.442, lon: 6.83 },
+            "Changhua County, Taiwan": { lat: 24.0706, lon: 120.5417 },
+            "Columbus, Ohio, USA": { lat: 39.9612, lon: -82.9988 },
+            "Dallas, Texas, USA": { lat: 32.7767, lon: -96.7970 },
+            "The Dalles, Oregon, USA": { lat: 45.5946, lon: -121.1787 },
+            "Las Vegas, Nevada, USA": { lat: 36.1699, lon: -115.1398 },
+            "St. Ghislain, Belgium": { lat: 50.446, lon: 3.82 },
+            "Jurong West, Singapore": { lat: 1.3398, lon: 103.7053 },
+            "Moncks Corner, South Carolina, USA": { lat: 33.1913, lon: -80.0195 },
+            "Ashburn, Virginia, USA": { lat: 39.0438, lon: -77.4874 },
+            "Tokyo, Japan": { lat: 35.6895, lon: 139.6917 },
+            "Sydney, Australia": { lat: -33.8688, lon: 151.2093 },
+            "Toronto, Ontario, Canada": { lat: 43.6532, lon: -79.3832 },
+            "Seoul, South Korea": { lat: 37.5665, lon: 126.9780 },
+            "Mumbai, India": { lat: 19.0760, lon: 72.8777 },
+            "London, UK": { lat: 51.5074, lon: -0.1278 },
+            "Frankfurt, Germany": { lat: 50.1109, lon: 8.6821 },
+            "Salt Lake City, Utah, USA": { lat: 40.7608, lon: -111.8910 },
+            "Hong Kong": { lat: 22.3193, lon: 114.1694 },
+            "Jakarta, Indonesia": { lat: -6.2088, lon: 106.8456 },
+            "Warsaw, Poland": { lat: 52.2297, lon: 21.0122 },
+            "Tel Aviv, Israel": { lat: 32.0853, lon: 34.7818 },
+            "Osasco, São Paulo, Brazil": { lat: -23.5325, lon: -46.7917 },
+            "Montréal, Québec, Canada": { lat: 45.5017, lon: -73.5673 },
+            "Los Angeles, California, USA": { lat: 34.0522, lon: -118.2437 },
+            "Zurich, Switzerland": { lat: 47.3769, lon: 8.5417 },
+            "Dammam, Saudi Arabia": { lat: 26.4207, lon: 50.0888 }
         };
         const datacenterData = [
             { accelerator: "TPU v2", region: "us-central1", zones: "b, c, f", location: "Council Bluffs, Iowa, USA" },
             { accelerator: "TPU v2", region: "europe-west4", zones: "a", location: "Eemshaven, Netherlands" },
             { accelerator: "TPU v2", region: "asia-east1", zones: "c", location: "Changhua County, Taiwan" },
+            // TPU v3
             { accelerator: "TPU v3", region: "us-central1", zones: "a, b, f", location: "Council Bluffs, Iowa, USA" },
             { accelerator: "TPU v3", region: "europe-west4", zones: "a", location: "Eemshaven, Netherlands" },
             // TPU v4
+            { accelerator: "TPU v4", region: "us-central2", zones: "b", location: "Council Bluffs, Iowa, USA" },
             // TPU v5e
             { accelerator: "TPU v5e", region: "us-central1", zones: "a", location: "Council Bluffs, Iowa, USA" },
             { accelerator: "TPU v5e", region: "us-east5", zones: "a, b, c", location: "Columbus, Ohio, USA" },
             // TPU v5p
             { accelerator: "TPU v5p", region: "us-east5", zones: "a", location: "Columbus, Ohio, USA" },
             { accelerator: "TPU v5p", region: "europe-west4", zones: "b", location: "Eemshaven, Netherlands" },
+            // TPU v6e
             { accelerator: "TPU v6e", region: "us-east1", zones: "d", location: "Moncks Corner, South Carolina, USA" },
             { accelerator: "TPU v6e", region: "us-east5", zones: "b", location: "Columbus, Ohio, USA" },
             { accelerator: "TPU v6e", region: "europe-west4", zones: "a", location: "Eemshaven, Netherlands" },
             { accelerator: "N1+P4", region: "us-central1", zones: "a, c", location: "Council Bluffs, Iowa, USA" },
             { accelerator: "N1+P4", region: "us-east4", zones: "a, b, c", location: "Ashburn, Virginia, USA" },
             { accelerator: "N1+P4", region: "northamerica-northeast1", zones: "a, b, c", location: "Montréal, Québec, Canada" },
+            { accelerator: "N1+P4", region: "us-west2", zones: "b, c", location: "Los Angeles, California, USA" },
             { accelerator: "N1+P4", region: "asia-southeast1", zones: "b, c", location: "Jurong West, Singapore" },
             { accelerator: "N1+P4", region: "australia-southeast1", zones: "a, b", location: "Sydney, Australia" },
             { accelerator: "N1+P4", region: "europe-west4", zones: "b, c", location: "Eemshaven, Netherlands" },
         ];
+        // Group accelerators by physical location
         const groupedLocations = {};
         datacenterData.forEach(item => {
             if (!locations[item.location]) {
+                console.warn(`Location data for "${item.location}" not found. Skipping item:`, item);
                 return;
             }
             if (!groupedLocations[item.location]) {
                     lat: locations[item.location].lat,
                     lon: locations[item.location].lon,
                     name: item.location,
+                    accelerators: [], // Will store {type, region, zones}
+                    regions: new Set(),
+                    zones: new Set()
                 };
             }
+            groupedLocations[item.location].accelerators.push({
+                type: item.accelerator,
+                region: item.region,
+                zones: item.zones
+            });
             groupedLocations[item.location].regions.add(item.region);
             item.zones.split(',').map(z => z.trim()).forEach(z => groupedLocations[item.location].zones.add(z));
         });
+        let viewer;
+        try {
+            viewer = new Cesium.Viewer('cesiumContainer', {
+                // Simplified for basic rendering. Add back features like terrainProvider later.
+                animation: false,
+                timeline: false,
+                geocoder: false,
+                homeButton: true, // Keep home button for now
+                sceneModePicker: true, // Useful for switching between 3D, 2.5D, 2D
+                baseLayerPicker: true, // Allows changing base map
+                navigationHelpButton: false,
+                fullscreenButton: true,
+                infoBox: false // We are using a custom info box
+            });
+            console.log("Cesium Viewer initialized successfully.");
+            viewer.camera.flyTo({
+                destination: Cesium.Cartesian3.fromDegrees(-95, 38, 15000000),
+                duration: 0 // Fly immediately
+            });
+        } catch (error) {
+            console.error("Error initializing Cesium Viewer:", error);
+            alert("Could not initialize the 3D map. Please check the console for errors (F12). It might be a WebGL issue or a problem loading CesiumJS.");
+            // Hide controls if map fails to load
+            document.getElementById('controls').style.display = 'none';
+            document.getElementById('infoBox').style.display = 'none';
+        }
+        const acceleratorSearchInput = document.getElementById('acceleratorSearch');
+        const infoBoxEl = document.getElementById('infoBox');
         const locationNameEl = document.getElementById('locationName');
         const regionIdEl = document.getElementById('regionId');
         const zoneIdEl = document.getElementById('zoneId');
         const acceleratorListEl = document.getElementById('acceleratorList');
         const locationEntities = [];
+        if (viewer) { // Only proceed if viewer was initialized
+            Object.values(groupedLocations).forEach(locData => {
+                if (locData.lat === undefined || locData.lon === undefined) {
+                    console.warn(`Missing coordinates for ${locData.name}, cannot plot.`);
+                    return;
                 }
+                const entity = viewer.entities.add({
+                    position: Cesium.Cartesian3.fromDegrees(locData.lon, locData.lat),
+                    point: {
+                        pixelSize: 10,
+                        color: Cesium.Color.ORANGERED, // Changed color for better visibility
+                        outlineColor: Cesium.Color.WHITE,
+                        outlineWidth: 2,
+                        disableDepthTestDistance: Number.POSITIVE_INFINITY // Ensures point is visible even if behind terrain
+                    },
+                    label: {
+                        text: locData.name,
+                        font: '12pt Segoe UI, sans-serif', // More readable font
+                        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+                        outlineWidth: 3,
+                        outlineColor: Cesium.Color.BLACK,
+                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                        pixelOffset: new Cesium.Cartesian2(0, -15), // Adjusted offset
+                        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 10000000.0) // Hide label when far away
+                    },
+                    properties: {
+                        name: locData.name,
+                        accelerators: locData.accelerators, // Array of {type, region, zones}
+                        // The following are consolidated for the location, specific assignments are in accelerators array
+                        all_regions_at_location: Array.from(locData.regions).join(', '),
+                        all_zones_at_location: Array.from(locData.zones).sort().join(', ')
+                    }
+                });
+                locationEntities.push(entity);
             });
+            acceleratorSearchInput.addEventListener('input', (event) => {
+                const searchTerm = event.target.value.toLowerCase().trim();
+                infoBoxEl.style.display = 'none';
+                locationEntities.forEach(entity => {
+                    if (!searchTerm) { // If search bar is empty, show all
+                        entity.show = true;
+                    } else {
+                        const hasAccelerator = entity.properties.accelerators.getValue().some(acc =>
+                            acc.type.toLowerCase().includes(searchTerm)
+                        );
+                        entity.show = hasAccelerator;
+                    }
+                });
             });
+            viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
+                const pickedObject = viewer.scene.pick(movement.position);
+                infoBoxEl.style.display = 'none';
+                if (Cesium.defined(pickedObject) && Cesium.defined(pickedObject.id) && Cesium.defined(pickedObject.id.properties)) {
+                    const properties = pickedObject.id.properties;
+                    const locationName = properties.name.getValue();
+                    const acceleratorsAtLocation = properties.accelerators.getValue(); // Array of {type, region, zones}
+                    locationNameEl.textContent = locationName;
+                    acceleratorListEl.innerHTML = ''; // Clear previous list
+                    const uniqueRegionsForDisplay = new Set();
+                    const uniqueZonesForDisplay = new Set();
+                    if (acceleratorsAtLocation && acceleratorsAtLocation.length > 0) {
+                        acceleratorsAtLocation.forEach(acc => {
+                            const listItem = document.createElement('li');
+                            listItem.textContent = `${acc.type} (Region: ${acc.region}, Zones: ${acc.zones})`;
+                            acceleratorListEl.appendChild(listItem);
+                            uniqueRegionsForDisplay.add(acc.region);
+                            acc.zones.split(',').map(z => z.trim()).forEach(zone => uniqueZonesForDisplay.add(zone));
+                        });
+                    } else {
+                         acceleratorListEl.innerHTML = '<li>No specific accelerator data.</li>';
+                    }
+                    regionIdEl.textContent = Array.from(uniqueRegionsForDisplay).join(', ') || 'N/A';
+                    zoneIdEl.textContent = Array.from(uniqueZonesForDisplay).sort().join(', ') || 'N/A';
+                    infoBoxEl.style.display = 'block';
+                    // Optionally fly to the picked entity
+                    viewer.flyTo(pickedObject.id, {duration: 0.5});
+                }
+            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+        } // end if(viewer)
     </script>
 </body>