Spaces:

fredmo
/

gcp-gpu-tpu-map

Running

App Files Files Community

fredmo commited on 20 days ago

Commit

b5c2694

verified ·

1 Parent(s): 46933c1

Update index.html

Browse files

Files changed (1) hide show

index.html +174 -45

index.html CHANGED Viewed

@@ -6,17 +6,18 @@
     <title>GCP Accelerator Availability Map</title>
     <style>
         body { margin: 0; font-family: sans-serif; background-color: #111; color: #eee; }
-        #globeViz { width: 100vw; height: 100vh; }
         #controls {
             position: absolute;
             top: 10px;
             left: 10px;
-            background: rgba(0, 0, 0, 0.7);
             padding: 15px;
             border-radius: 5px;
-            max-height: 90vh;
             overflow-y: auto;
             z-index: 10;
         }
         #controls h3 { margin-top: 0; border-bottom: 1px solid #555; padding-bottom: 5px; }
         #controls label {
@@ -27,22 +28,67 @@
         }
         #controls input[type="checkbox"] {
             margin-right: 5px;
         }
          #info-panel {
             position: absolute;
             bottom: 10px;
             left: 10px;
-            background: rgba(0, 0, 0, 0.8);
-            padding: 10px;
             border-radius: 5px;
-            max-width: 300px;
             font-size: 0.85em;
             z-index: 10;
             display: none; /* Hidden by default */
          }
-         #info-panel h4 { margin: 0 0 5px 0; }
-         #info-panel ul { margin: 0; padding-left: 15px; }
-         #info-panel li { margin-bottom: 3px; }
     </style>
     <!-- Import globe.gl library -->
     <script src="//unpkg.com/three"></script>
@@ -51,32 +97,31 @@
 <body>
     <div id="globeViz"></div>
     <div id="controls">
         <h3>Filter by Accelerator:</h3>
         <div id="accelerator-filters">
             <!-- Filters will be populated by JavaScript -->
         </div>
-        <button id="show-all" style="margin-top: 10px; padding: 5px 10px;">Show All</button>
-        <button id="hide-all" style="margin-top: 10px; padding: 5px 10px;">Hide All</button>
     </div>
     <div id="info-panel">
-        <!-- Info about hovered location -->
     </div>
     <script>
         // --- 1. Data Processing ---
         // Raw data based on the provided table
-        // Note: Some locations might be slightly approximated. Need exact coordinates for higher precision.
-        // Note: Handling duplicates and summarizing zones/notes.
         const rawData = [
             { accel: "TPU v2", region: "us-central1", zones: "b, c, f", location: "Council Bluffs, Iowa, USA" },
             { accel: "TPU v2", region: "europe-west4", zones: "a", location: "Eemshaven, Netherlands" },
             { accel: "TPU v2", region: "asia-east1", zones: "c", location: "Changhua County, Taiwan" },
-            // Some TPU v2/v3 entries seem redundant in the input, consolidating them by location
             { accel: "TPU v3", region: "us-central1", zones: "a, b, f", location: "Council Bluffs, Iowa, USA" },
             { accel: "TPU v3", region: "europe-west4", zones: "a", location: "Eemshaven, Netherlands" },
-            { accel: "TPU v4", region: "us-central2", zones: "b", location: "Council Bluffs, Iowa, USA", notes: "Location assumed near us-central1" }, // Added note about assumption
             { accel: "TPU v5e", region: "us-central1", zones: "a", location: "Council Bluffs, Iowa, USA" },
             { accel: "TPU v5e", region: "us-east5", zones: "a, b, c", location: "Columbus, Ohio, USA" },
             { accel: "TPU v5e", region: "us-south1", zones: "a", location: "Dallas, Texas, USA" },
@@ -228,7 +273,7 @@
         rawData.forEach(item => {
             const locName = item.location;
             if (!locationsCoords[locName]) {
-                console.warn(`Coordinates not found for: ${locName}`);
                 return; // Skip if no coordinates
             }
@@ -241,16 +286,30 @@
                 };
             }
-            // Add accelerator details if not already present for this location
-            // (Simple check based on accel name only for this example)
-            if (!locationsData[locName].accelerators.some(a => a.name === item.accel)) {
                  locationsData[locName].accelerators.push({
                      name: item.accel,
-                     region: item.region,
-                     zones: item.zones,
-                     notes: item.notes || '' // Include notes if available
                  });
-            }
             uniqueAccelerators.add(item.accel);
         });
@@ -265,23 +324,69 @@
         const globeVizElement = document.getElementById('globeViz');
         const infoPanel = document.getElementById('info-panel');
         myGlobe(globeVizElement)
             .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
             .backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png')
-            .pointsData(pointsData) // Initial data
-            .pointColor(() => '#67ff94') // Nice bright green color for markers
-            .pointAltitude(0.01) // Slightly raise points off the surface
-            .pointRadius(0.25) // Adjust size as needed
-            .pointLabel(d => d.name)
-            .onPointHover(d => { // Show info panel on hover
                 if (d) {
                     infoPanel.style.display = 'block';
                     let accelHtml = '<ul>';
-                    d.accelerators.forEach(accel => {
-                         accelHtml += `<li><b>${accel.name}</b> (${accel.region}: ${accel.zones})${accel.notes ? ` <i>(${accel.notes})</i>` : ''}</li>`;
                     });
                     accelHtml += '</ul>';
-                    infoPanel.innerHTML = `<h4>${d.name}</h4>${accelHtml}`;
                 } else {
                     infoPanel.style.display = 'none'; // Hide if not hovering over a point
                 }
@@ -292,8 +397,14 @@
         myGlobe.controls().autoRotateSpeed = 0.2;
         // Stop auto-rotate on user interaction
-        myGlobe.controls().addEventListener('start', () => {
-            myGlobe.controls().autoRotate = false;
         });
         // --- 3. Filter Implementation ---
@@ -315,16 +426,30 @@
         });
         function updateFilters() {
-            const selectedAccelerators = filterCheckboxes
-                .filter(cb => cb.checked)
-                .map(cb => cb.value);
-            const filteredPoints = pointsData.filter(location => {
-                // Keep location if it has at least one of the selected accelerators
-                return location.accelerators.some(accel => selectedAccelerators.includes(accel.name));
-            });
-            myGlobe.pointsData(filteredPoints); // Update the globe
         }
         // Show/Hide All buttons
@@ -338,9 +463,10 @@
             updateFilters();
         });
-        // --- 4. Initial Setup ---
         // Optional: Center the view on a specific point initially
-        // myGlobe.pointOfView({ lat: 30, lng: -20, altitude: 2.5 });
         // Handle window resize
         window.addEventListener('resize', () => {
@@ -348,6 +474,9 @@
             myGlobe.height(window.innerHeight);
         });
     </script>
 </body>

     <title>GCP Accelerator Availability Map</title>
     <style>
         body { margin: 0; font-family: sans-serif; background-color: #111; color: #eee; }
+        #globeViz { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; z-index: 1; }
         #controls {
             position: absolute;
             top: 10px;
             left: 10px;
+            background: rgba(0, 0, 0, 0.75);
             padding: 15px;
             border-radius: 5px;
+            max-height: calc(100vh - 150px); /* Adjust max-height to leave space for info panel */
             overflow-y: auto;
             z-index: 10;
+            border: 1px solid #444;
         }
         #controls h3 { margin-top: 0; border-bottom: 1px solid #555; padding-bottom: 5px; }
         #controls label {
         }
         #controls input[type="checkbox"] {
             margin-right: 5px;
+            vertical-align: middle;
+        }
+        #controls button {
+             margin-top: 10px;
+             padding: 6px 12px;
+             background-color: #444;
+             border: 1px solid #666;
+             color: #eee;
+             cursor: pointer;
+             border-radius: 3px;
+             font-size: 0.9em;
+             margin-right: 5px;
+        }
+        #controls button:hover {
+            background-color: #555;
         }
          #info-panel {
             position: absolute;
             bottom: 10px;
             left: 10px;
+            background: rgba(0, 0, 0, 0.85);
+            padding: 12px;
             border-radius: 5px;
+            max-width: 350px; /* Increased max-width */
             font-size: 0.85em;
             z-index: 10;
             display: none; /* Hidden by default */
+            border: 1px solid #555;
+         }
+         #info-panel h4 {
+             margin: 0;
+             font-size: 1.1em;
+             color: #fff;
+         }
+         #info-panel ul {
+             margin: 8px 0 0 0;
+             padding-left: 18px;
+             list-style-type: disc; /* Use standard bullets */
+             max-height: 150px; /* Limit list height */
+             overflow-y: auto;
+         }
+         #info-panel li {
+             margin-bottom: 5px;
+             line-height: 1.3;
+         }
+         #info-panel li b {
+             color: #eee; /* Make accelerator name slightly brighter */
+         }
+         #info-panel li i { /* Style for notes */
+             color: #aaa;
+             font-size: 0.9em;
+         }
+         /* Style for the color indicator square */
+         .color-indicator {
+             display: inline-block;
+             width: 12px;
+             height: 12px;
+             margin-right: 8px;
+             border: 1px solid #777; /* Slightly darker border */
+             vertical-align: middle; /* Align better with text */
          }
     </style>
     <!-- Import globe.gl library -->
     <script src="//unpkg.com/three"></script>
 <body>
     <div id="globeViz"></div>
     <div id="controls">
         <h3>Filter by Accelerator:</h3>
         <div id="accelerator-filters">
             <!-- Filters will be populated by JavaScript -->
         </div>
+        <button id="show-all">Show All</button>
+        <button id="hide-all">Hide All</button>
     </div>
     <div id="info-panel">
+        <!-- Info about hovered location will be populated here -->
     </div>
     <script>
         // --- 1. Data Processing ---
         // Raw data based on the provided table
         const rawData = [
             { accel: "TPU v2", region: "us-central1", zones: "b, c, f", location: "Council Bluffs, Iowa, USA" },
             { accel: "TPU v2", region: "europe-west4", zones: "a", location: "Eemshaven, Netherlands" },
             { accel: "TPU v2", region: "asia-east1", zones: "c", location: "Changhua County, Taiwan" },
             { accel: "TPU v3", region: "us-central1", zones: "a, b, f", location: "Council Bluffs, Iowa, USA" },
             { accel: "TPU v3", region: "europe-west4", zones: "a", location: "Eemshaven, Netherlands" },
+            { accel: "TPU v4", region: "us-central2", zones: "b", location: "Council Bluffs, Iowa, USA", notes: "Location assumed near us-central1" },
             { accel: "TPU v5e", region: "us-central1", zones: "a", location: "Council Bluffs, Iowa, USA" },
             { accel: "TPU v5e", region: "us-east5", zones: "a, b, c", location: "Columbus, Ohio, USA" },
             { accel: "TPU v5e", region: "us-south1", zones: "a", location: "Dallas, Texas, USA" },
         rawData.forEach(item => {
             const locName = item.location;
             if (!locationsCoords[locName]) {
+                console.warn(`Coordinates not found for: ${locName}. Skipping this entry.`);
                 return; // Skip if no coordinates
             }
                 };
             }
+            // Add accelerator details only if it's not a duplicate entry *for this specific location*
+            // (We combine regions/zones if the same accelerator appears multiple times for the same location,
+            // although the provided data seems mostly unique per location-accelerator pair already)
+             const existingAccelIndex = locationsData[locName].accelerators.findIndex(a => a.name === item.accel);
+             if (existingAccelIndex === -1) {
                  locationsData[locName].accelerators.push({
                      name: item.accel,
+                     regions: [item.region], // Store regions as an array
+                     zones: [item.zones], // Store zones as an array
+                     notes: item.notes ? [item.notes] : [] // Store notes as an array
                  });
+             } else {
+                 // If accelerator already exists, add region/zone/notes if they differ (simple check)
+                 const existingAccel = locationsData[locName].accelerators[existingAccelIndex];
+                 if (!existingAccel.regions.includes(item.region)) {
+                     existingAccel.regions.push(item.region);
+                 }
+                 if (!existingAccel.zones.includes(item.zones)) {
+                     existingAccel.zones.push(item.zones);
+                 }
+                 if (item.notes && !existingAccel.notes.includes(item.notes)) {
+                      existingAccel.notes.push(item.notes);
+                 }
+             }
             uniqueAccelerators.add(item.accel);
         });
         const globeVizElement = document.getElementById('globeViz');
         const infoPanel = document.getElementById('info-panel');
+        // Define colors
+        const tpuColor = '#00FFFF'; // Cyan
+        const gpuColor = '#67ff94'; // Green
+        const mixedColor = '#FFA500'; // Orange
+        const defaultColor = '#FFFFFF'; // White (fallback)
+        // List of substrings identifying GPU types in your data
+        const gpuIdentifiers = ['H100', 'A100', 'L4', 'T4', 'V100', 'P100', 'P4'];
+        // Function to determine point color based on accelerator types
+        function getPointColor(data) {
+            let hasTPU = false;
+            let hasGPU = false;
+            data.accelerators.forEach(accel => {
+                if (accel.name.startsWith('TPU')) {
+                    hasTPU = true;
+                }
+                if (gpuIdentifiers.some(gpuId => accel.name.includes(gpuId))) {
+                    hasGPU = true;
+                }
+            });
+            if (hasTPU && hasGPU) return mixedColor;
+            if (hasTPU) return tpuColor;
+            if (hasGPU) return gpuColor;
+            return defaultColor;
+        }
         myGlobe(globeVizElement)
             .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
             .backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png')
+            .pointsData(pointsData)
+            .pointColor(d => getPointColor(d)) // Use the function for color
+            .pointAltitude(0.01)
+            .pointRadius(0.4) // Adjusted radius (make bigger or smaller as needed)
+            .pointLabel(d => d.name) // Basic label on hover (can be improved)
+            .onPointHover(d => { // Show enhanced info panel on hover
+                globeVizElement.style.cursor = d ? 'pointer' : 'default'; // Change cursor on hover
                 if (d) {
+                    const pointColor = getPointColor(d); // Get color for the hovered point
                     infoPanel.style.display = 'block';
                     let accelHtml = '<ul>';
+                    // Sort accelerators within the panel for consistency
+                    const sortedAccels = [...d.accelerators].sort((a, b) => a.name.localeCompare(b.name));
+                    sortedAccels.forEach(accel => {
+                         // Join arrays for display if multiple entries were merged
+                         const regionStr = accel.regions.join(', ');
+                         const zoneStr = accel.zones.join('; ');
+                         const notesStr = accel.notes.length > 0 ? ` <i>(${accel.notes.join(', ')})</i>` : '';
+                         accelHtml += `<li><b>${accel.name}</b> (${regionStr}: ${zoneStr})${notesStr}</li>`;
                     });
                     accelHtml += '</ul>';
+                    infoPanel.innerHTML = `
+                        <div style="display: flex; align-items: center; margin-bottom: 5px;">
+                            <span class="color-indicator" style="background-color: ${pointColor};"></span>
+                            <h4>${d.name}</h4>
+                        </div>
+                        ${accelHtml}`;
                 } else {
                     infoPanel.style.display = 'none'; // Hide if not hovering over a point
                 }
         myGlobe.controls().autoRotateSpeed = 0.2;
         // Stop auto-rotate on user interaction
+        let userInteracted = false;
+        const controls = myGlobe.controls();
+        controls.addEventListener('start', () => {
+            if (!userInteracted) {
+                 controls.autoRotate = false;
+                 userInteracted = true; // Ensure auto-rotate stops permanently after first interaction
+                 console.log('Globe auto-rotation stopped.');
+            }
         });
         // --- 3. Filter Implementation ---
         });
         function updateFilters() {
+            const selectedAccelerators = new Set( // Use a Set for faster lookups
+                filterCheckboxes
+                    .filter(cb => cb.checked)
+                    .map(cb => cb.value)
+            );
+            if (selectedAccelerators.size === 0) {
+                // If nothing is selected, show nothing
+                myGlobe.pointsData([]);
+            } else {
+                 const filteredPoints = pointsData.filter(location => {
+                    // Keep location if it has at least one of the selected accelerators
+                    return location.accelerators.some(accel => selectedAccelerators.has(accel.name));
+                });
+                myGlobe.pointsData(filteredPoints); // Update the globe
+            }
+            // Update info panel if it was visible for a point that is now filtered out
+            if (infoPanel.style.display === 'block') {
+                const currentHoverName = infoPanel.querySelector('h4')?.textContent;
+                if (currentHoverName && !myGlobe.pointsData().some(p => p.name === currentHoverName)) {
+                    infoPanel.style.display = 'none';
+                }
+            }
         }
         // Show/Hide All buttons
             updateFilters();
         });
+        // --- 4. Initial Setup & Resize ---
         // Optional: Center the view on a specific point initially
+        // myGlobe.pointOfView({ lat: 20, lng: 0, altitude: 2.5 }, 1000); // Example: Atlantic view
         // Handle window resize
         window.addEventListener('resize', () => {
             myGlobe.height(window.innerHeight);
         });
+        // Initial filter application in case some start unchecked (though they don't here)
+        updateFilters();
     </script>
 </body>