Update index.html

index.html

@@ -110,12 +110,12 @@
     <div id="info-panel">
         <!-- Info about hovered location will be populated here -->
     </div>
-
     <script>
         // --- 1. Data Processing ---
 
-        // Raw data based on the provided table
+        // Raw data (keep as is)
         const rawData = [
+            // ... (Your full rawData array remains here) ...
             { 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" },
@@ -234,8 +234,9 @@
             { accel: "N1+P4", region: "europe-west4", zones: "b, c", location: "Eemshaven, Netherlands" }
         ];
 
-        // Geocode locations (Approximate coordinates)
+        // Geocode locations (keep as is)
         const locationsCoords = {
+             // ... (Your full locationsCoords object remains here) ...
             "Council Bluffs, Iowa, USA": { lat: 41.2619, lng: -95.8513 },
             "Eemshaven, Netherlands": { lat: 53.4421, lng: 6.8349 },
             "Changhua County, Taiwan": { lat: 24.0729, lng: 120.5446 },
@@ -266,57 +267,92 @@
             "Los Angeles, California, USA": { lat: 34.0522, lng: -118.2437 }
         };
 
-        // Aggregate data by location
-        const locationsData = {};
+        // Define colors and identifiers (keep as is)
+        const tpuColor = '#00FFFF'; // Cyan
+        const gpuColor = '#67ff94'; // Green
+        const defaultColor = '#FFFFFF'; // White (fallback for errors)
+        const gpuIdentifiers = ['H100', 'A100', 'L4', 'T4', 'V100', 'P100', 'P4'];
+
+        // --- Data Aggregation (Intermediate Step) ---
+        const locationsAggregated = {};
         const uniqueAccelerators = new Set();
 
         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
+                return;
             }
 
-            if (!locationsData[locName]) {
-                locationsData[locName] = {
+            if (!locationsAggregated[locName]) {
+                locationsAggregated[locName] = {
                     name: locName,
                     lat: locationsCoords[locName].lat,
                     lng: locationsCoords[locName].lng,
-                    accelerators: []
+                    accelerators: [], // Store full details here
+                    hasTPU: false,
+                    hasGPU: false
                 };
             }
 
-            // 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);
-                 }
-             }
+            // Add accelerator details (simplified - assumes unique accel names per location from source)
+            locationsAggregated[locName].accelerators.push({
+                name: item.accel,
+                region: item.region,
+                zones: item.zones,
+                notes: item.notes || ''
+            });
             uniqueAccelerators.add(item.accel);
+
+            // Check type for the location
+            if (item.accel.startsWith('TPU')) {
+                locationsAggregated[locName].hasTPU = true;
+            }
+            if (gpuIdentifiers.some(gpuId => item.accel.includes(gpuId))) {
+                locationsAggregated[locName].hasGPU = true;
+            }
         });
 
-        // Convert aggregated data to array format for globe.gl
-        const pointsData = Object.values(locationsData);
+        // --- *** NEW: Create Final pointsData with Offset for Mixed Locations *** ---
+        const pointsData = [];
+        const locationOffset = 0.4; // Degrees latitude offset - adjust as needed
+
+        Object.values(locationsAggregated).forEach(loc => {
+            if (loc.hasTPU && loc.hasGPU) {
+                // Location has BOTH: Create two points with offset
+                pointsData.push({
+                    ...loc, // Spread operator copies name, original lat/lng, full accelerators list
+                    lat: loc.lat + locationOffset, // Offset TPU marker slightly North
+                    lng: loc.lng,
+                    markerType: 'TPU', // Tag for coloring and identification
+                    displayName: `${loc.name} (TPU)`, // Name for label/hover
+                });
+                pointsData.push({
+                    ...loc, // Spread operator copies name, original lat/lng, full accelerators list
+                    lat: loc.lat - locationOffset, // Offset GPU marker slightly South
+                    lng: loc.lng,
+                    markerType: 'GPU', // Tag for coloring and identification
+                    displayName: `${loc.name} (GPU)`, // Name for label/hover
+                });
+            } else if (loc.hasTPU) {
+                // Location has ONLY TPU
+                pointsData.push({
+                    ...loc,
+                    markerType: 'TPU',
+                    displayName: loc.name, // No suffix needed
+                });
+            } else if (loc.hasGPU) {
+                // Location has ONLY GPU
+                pointsData.push({
+                    ...loc,
+                    markerType: 'GPU',
+                    displayName: loc.name, // No suffix needed
+                });
+            }
+            // Note: Locations with neither (if data errors existed) would be skipped here
+        });
 
-        // Sort accelerator names for consistent filter order
+        // Sort accelerator names for filter list (keep as is)
         const sortedAccelerators = Array.from(uniqueAccelerators).sort();
 
         // --- 2. Globe Initialization & Configuration ---
@@ -324,89 +360,68 @@
         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
+            .pointsData(pointsData) // Use the NEW pointsData with potential duplicates/offsets
+            .pointColor(d => { // --- MODIFIED: Color based on markerType ---
+                switch (d.markerType) {
+                    case 'TPU': return tpuColor;
+                    case 'GPU': return gpuColor;
+                    default: return defaultColor; // Fallback
+                }
+            })
             .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
+            .pointRadius(0.35) // Adjust radius if needed (maybe slightly smaller if points are close)
+            .pointLabel(d => d.displayName) // Use displayName for labels
+            .onPointHover(d => { // --- MODIFIED: Use displayName and correct color ---
+                globeVizElement.style.cursor = d ? 'pointer' : 'default';
                 if (d) {
-                    const pointColor = getPointColor(d); // Get color for the hovered point
+                    // Determine color based on the markerType of the hovered point
+                    const pointColor = d.markerType === 'TPU' ? tpuColor : (d.markerType === 'GPU' ? gpuColor : defaultColor);
+
                     infoPanel.style.display = 'block';
 
                     let accelHtml = '<ul>';
-                    // Sort accelerators within the panel for consistency
+                    // Sort the FULL accelerator list for the original location
                     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>`;
+                         // Display region/zone/notes as before
+                         const notesStr = accel.notes ? ` <i>(${accel.notes})</i>` : '';
+                         accelHtml += `<li><b>${accel.name}</b> (${accel.region}: ${accel.zones})${notesStr}</li>`;
                     });
                     accelHtml += '</ul>';
 
+                    // Use displayName in the panel title
                     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>
+                            <h4>${d.displayName}</h4>
                         </div>
+                        <div style="font-size: 0.9em; color: #ccc; margin-bottom: 5px;">(Showing all accelerators for ${d.name})</div>
                         ${accelHtml}`;
                 } else {
-                    infoPanel.style.display = 'none'; // Hide if not hovering over a point
+                    infoPanel.style.display = 'none';
                 }
             });
 
-        // Auto-rotate globe initially
+        // Auto-rotate globe (keep as is)
         myGlobe.controls().autoRotate = true;
         myGlobe.controls().autoRotateSpeed = 0.2;
 
-        // Stop auto-rotate on user interaction
+        // Stop auto-rotate on user interaction (keep as is)
         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
+                 userInteracted = true;
                  console.log('Globe auto-rotation stopped.');
             }
         });
 
+
         // --- 3. Filter Implementation ---
         const filtersContainer = document.getElementById('accelerator-filters');
         const filterCheckboxes = [];
@@ -416,7 +431,7 @@
             const checkbox = document.createElement('input');
             checkbox.type = 'checkbox';
             checkbox.value = accel;
-            checkbox.checked = true; // Start with all checked
+            checkbox.checked = true;
             checkbox.addEventListener('change', updateFilters);
 
             label.appendChild(checkbox);
@@ -426,33 +441,56 @@
         });
 
         function updateFilters() {
-            const selectedAccelerators = new Set( // Use a Set for faster lookups
+            const selectedAccelerators = new Set(
                 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));
+            let filteredPoints = [];
+            if (selectedAccelerators.size > 0) {
+                // Filter the pointsData array (which contains potentially duplicated/offset points)
+                filteredPoints = pointsData.filter(point => {
+                    // Check if *any* accelerator associated with this point's original location
+                    // is in the selected set.
+                    const hasSelectedAccelerator = point.accelerators.some(accel => selectedAccelerators.has(accel.name));
+
+                    if (!hasSelectedAccelerator) {
+                        return false; // If none of the location's accelerators are selected, hide this point.
+                    }
+
+                    // Further refine: only show the point if its *specific type* (TPU/GPU)
+                    // corresponds to a selected accelerator *of that type*.
+                    const isTPUMarker = point.markerType === 'TPU';
+                    const isGPUMarker = point.markerType === 'GPU';
+
+                    let typeIsSelected = false;
+                    if (isTPUMarker) {
+                        typeIsSelected = point.accelerators.some(accel => accel.name.startsWith('TPU') && selectedAccelerators.has(accel.name));
+                    } else if (isGPUMarker) {
+                        typeIsSelected = point.accelerators.some(accel => gpuIdentifiers.some(gid => accel.name.includes(gid)) && selectedAccelerators.has(accel.name));
+                    } else {
+                        typeIsSelected = true; // Should not happen with current data structure
+                    }
+
+                    return typeIsSelected; // Show the point only if its specific type is represented in the selection
                 });
-                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') {
+            myGlobe.pointsData(filteredPoints); // Update the globe
+
+            // Update info panel visibility (keep as is)
+             if (infoPanel.style.display === 'block') {
                 const currentHoverName = infoPanel.querySelector('h4')?.textContent;
-                if (currentHoverName && !myGlobe.pointsData().some(p => p.name === currentHoverName)) {
+                // Check against displayName now
+                if (currentHoverName && !myGlobe.pointsData().some(p => p.displayName === currentHoverName)) {
                     infoPanel.style.display = 'none';
                 }
             }
         }
 
-        // Show/Hide All buttons
+
+        // Show/Hide All buttons (keep as is)
         document.getElementById('show-all').addEventListener('click', () => {
             filterCheckboxes.forEach(cb => cb.checked = true);
             updateFilters();
@@ -463,19 +501,12 @@
             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
+        // --- 4. Initial Setup & Resize --- (keep as is)
         window.addEventListener('resize', () => {
             myGlobe.width(window.innerWidth);
             myGlobe.height(window.innerHeight);
         });
-
-        // Initial filter application in case some start unchecked (though they don't here)
-        updateFilters();
+        updateFilters(); // Initial application
 
     </script>