Update index.html

index.html

@@ -604,10 +604,58 @@
             document.getElementById('totalThreads').textContent = totalThreads;
             document.getElementById('spatialDims').textContent = `${gridX}×${gridY}×${gridZ}`;
             
+            // Store the currently selected block position before rebuilding
+            let previousSelection = null;
+            if (selectedBlock) {
+                previousSelection = {
+                    x: selectedBlock.idx.x,
+                    y: selectedBlock.idx.y,
+                    z: selectedBlock.idx.z
+                };
+            }
+            
             create3DCube();
-            selectedBlock = null;
-            selectedThread = null;
-            updateBlockInfo();
+            
+            // If we had a block selected before, reselect it and update its dimensions
+            if (previousSelection && 
+                previousSelection.x < gridX && 
+                previousSelection.y < gridY && 
+                previousSelection.z < gridZ) {
+                
+                // Update the selected block with new dimensions
+                selectedBlock = {
+                    idx: { 
+                        x: previousSelection.x, 
+                        y: previousSelection.y, 
+                        z: previousSelection.z 
+                    },
+                    dim: { 
+                        x: blockX, 
+                        y: blockY, 
+                        z: blockZ 
+                    }
+                };
+                
+                // Find and reselect the corresponding visual block in the new cube
+                const blocks = document.querySelectorAll('.block-cube');
+                blocks.forEach(block => {
+                    const label = block.querySelector('.block-label');
+                    if (label && label.textContent === `[${previousSelection.x},${previousSelection.y},${previousSelection.z}]`) {
+                        block.classList.add('selected');
+                    }
+                });
+                
+                // Clear any previous thread selection since dimensions changed
+                selectedThread = null;
+                
+                // Update the info panel with new dimensions and thread grid
+                updateBlockInfo();
+            } else {
+                // Clear selection if the previously selected block no longer exists
+                selectedBlock = null;
+                selectedThread = null;
+                updateBlockInfo();
+            }
         }
         
         function create3DCube() {
@@ -704,8 +752,20 @@
                 return;
             }
             
+            // Always get current dimensions from input controls, not from cached selectedBlock.dim
+            const currentBlockX = parseInt(document.getElementById('blockX').value);
+            const currentBlockY = parseInt(document.getElementById('blockY').value);
+            const currentBlockZ = parseInt(document.getElementById('blockZ').value);
+            
+            // Update the selectedBlock dimensions to match current inputs
+            selectedBlock.dim = {
+                x: currentBlockX,
+                y: currentBlockY,
+                z: currentBlockZ
+            };
+            
             const b = selectedBlock;
-            const threadsPerBlock = b.dim.x * b.dim.y * b.dim.z;
+            const threadsPerBlock = currentBlockX * currentBlockY * currentBlockZ;
             const warpSize = 32; // Standard warp size for modern GPUs
             const numWarps = Math.ceil(threadsPerBlock / warpSize);
             
@@ -718,10 +778,10 @@
             const directions = [
                 { dx: -1, dy: 0, dz: 0, name: 'left' },
                 { dx: 1, dy: 0, dz: 0, name: 'right' },
-                { dx: 0, dy: -1, dz: 0, name: 'back' },
-                { dx: 0, dy: 1, dz: 0, name: 'front' },
-                { dx: 0, dy: 0, dz: -1, name: 'below' },
-                { dx: 0, dy: 0, dz: 1, name: 'above' }
+                { dx: 0, dy: -1, dz: 0, name: 'top' },
+                { dx: 0, dy: 1, dz: 0, name: 'bottom' },
+                { dx: 0, dy: 0, dz: -1, name: 'front' },
+                { dx: 0, dy: 0, dz: 1, name: 'back' }
             ];
             
             directions.forEach(dir => {
@@ -742,7 +802,7 @@
                 
                 <div class="info-item">
                     <div class="label">Block Dimensions</div>
-                    <div class="value">[${b.dim.x}, ${b.dim.y}, ${b.dim.z}] = ${threadsPerBlock} threads</div>
+                    <div class="value">[${currentBlockX}, ${currentBlockY}, ${currentBlockZ}] = ${threadsPerBlock} threads</div>
                 </div>
                 
                 <div class="info-item">
@@ -787,9 +847,20 @@
             
             threadGrid.innerHTML = '';
             
-            const b = selectedBlock;
+            // Get current dimensions directly from the input controls to ensure we use the latest values
+            const currentBlockX = parseInt(document.getElementById('blockX').value);
+            const currentBlockY = parseInt(document.getElementById('blockY').value);
+            const currentBlockZ = parseInt(document.getElementById('blockZ').value);
+            
+            // Update the selected block dimensions to match current inputs
+            selectedBlock.dim = {
+                x: currentBlockX,
+                y: currentBlockY,
+                z: currentBlockZ
+            };
+            
             const maxThreadsToShow = 64; // Limit for visual clarity
-            const totalThreads = b.dim.x * b.dim.y * b.dim.z;
+            const totalThreads = currentBlockX * currentBlockY * currentBlockZ;
             
             if (totalThreads > maxThreadsToShow) {
                 threadGrid.innerHTML = `
@@ -801,31 +872,31 @@
                 return;
             }
             
-            threadGrid.style.gridTemplateColumns = `repeat(${Math.min(b.dim.x, 8)}, 1fr)`;
+            threadGrid.style.gridTemplateColumns = `repeat(${Math.min(currentBlockX, 8)}, 1fr)`;
             
-            // Create threads for visualization
-            for (let z = 0; z < Math.min(b.dim.z, 4); z++) { // Show max 4 Z layers
-                for (let y = 0; y < b.dim.y; y++) {
-                    for (let x = 0; x < b.dim.x; x++) {
+            // Create threads using the current input dimensions
+            for (let z = 0; z < Math.min(currentBlockZ, 4); z++) { // Show max 4 Z layers
+                for (let y = 0; y < currentBlockY; y++) {
+                    for (let x = 0; x < currentBlockX; x++) {
                         const thread = document.createElement('div');
                         thread.className = 'thread-detail';
                         thread.textContent = `${x},${y},${z}`;
-                        thread.title = `Thread [${x}, ${y}, ${z}] in Block [${b.idx.x}, ${b.idx.y}, ${b.idx.z}]`;
+                        thread.title = `Thread [${x}, ${y}, ${z}] in Block [${selectedBlock.idx.x}, ${selectedBlock.idx.y}, ${selectedBlock.idx.z}]`;
                         
-                        // Calculate global position
-                        const globalX = b.dim.x * b.idx.x + x;
-                        const globalY = b.dim.y * b.idx.y + y;
-                        const globalZ = b.dim.z * b.idx.z + z;
+                        // Calculate global position using current dimensions
+                        const globalX = currentBlockX * selectedBlock.idx.x + x;
+                        const globalY = currentBlockY * selectedBlock.idx.y + y;
+                        const globalZ = currentBlockZ * selectedBlock.idx.z + z;
                         
                         thread.addEventListener('click', () => {
                             document.querySelectorAll('.thread-detail.selected').forEach(t => t.classList.remove('selected'));
                             thread.classList.add('selected');
                             
                             selectedThread = {
-                                blockIdx: b.idx,
+                                blockIdx: selectedBlock.idx,
                                 threadIdx: { x, y, z },
                                 globalIdx: { x: globalX, y: globalY, z: globalZ },
-                                blockDim: b.dim
+                                blockDim: { x: currentBlockX, y: currentBlockY, z: currentBlockZ }
                             };
                             
                             showThreadDetails();