From 215409534f23256cbe57734e6db35ff08e3792e8 Mon Sep 17 00:00:00 2001
From: Niels Provos <provos@gmail.com>
Date: Fri, 25 Oct 2024 10:57:56 -0700
Subject: [PATCH] refactor: Update user request tiles dynamically

This commit updates the `updateUserRequests` function in the `index.html` file. It introduces dynamic updating of user request tiles based on the provided `userRequests` data. The existing tiles are now mapped by `data-task-id` and new request tiles are added if they don't already exist. Additionally, tiles that are no longer present in `userRequests` are removed.
---
 src/planai/templates/index.html | 68 ++++++++++++++++++++++-----------
 1 file changed, 46 insertions(+), 22 deletions(-)

diff --git a/src/planai/templates/index.html b/src/planai/templates/index.html
index 84786ad..50e6d92 100644
--- a/src/planai/templates/index.html
+++ b/src/planai/templates/index.html
@@ -380,35 +380,59 @@ <h4>Input Provenance:</h4>
         // User input requests
         function updateUserRequests(userRequests) {
             const requestsContainer = document.getElementById('user-input-requests');
-            requestsContainer.innerHTML = ''; // Clear any existing content
+            const existingTiles = requestsContainer.getElementsByClassName('user-request-tile');
 
+            // Map existing tiles by data-task-id
+            const existingTilesMap = {};
+            Array.from(existingTiles).forEach(tile => {
+                const taskId = tile.getAttribute('data-task-id');
+                existingTilesMap[taskId] = tile;
+            });
+
+            // Set of current user request IDs
+            const userRequestIds = new Set(userRequests.map(request => request.task_id.toString()));
+
+            // Add new request tiles
             userRequests.forEach(request => {
-                const requestTile = document.createElement('div');
-                requestTile.className = 'user-request-tile';
-                requestTile.setAttribute('data-task-id', request.task_id);
-                requestTile.setAttribute('data-accepted-mime-types', request.accepted_mime_types.join(','));
-
-                requestTile.innerHTML = `
-            <p><strong>Instruction:</strong> ${request.instruction}</p>
-            <p>Drag a file here to upload or</p>
-            <button class="abort-button">Abort</button>
-        `;
+                const taskId = request.task_id.toString();
+                if (!existingTilesMap[taskId]) {
+                    // Create new tile
+                    const requestTile = document.createElement('div');
+                    requestTile.className = 'user-request-tile';
+                    requestTile.setAttribute('data-task-id', taskId);
+                    requestTile.setAttribute('data-accepted-mime-types', request.accepted_mime_types.join(','));
+
+                    requestTile.innerHTML = `
+                <p><strong>Instruction:</strong> ${request.instruction}</p>
+                <p>Drag a file here to upload or</p>
+                <button class="abort-button">Abort</button>
+            `;
+
+                    requestTile.addEventListener('dragover', function (event) {
+                        event.preventDefault();
+                        requestTile.classList.add('drag-over');
+                    });
 
-                requestTile.addEventListener('dragover', function (event) {
-                    event.preventDefault();
-                    requestTile.classList.add('drag-over');
-                });
+                    requestTile.addEventListener('dragleave', function () {
+                        requestTile.classList.remove('drag-over');
+                    });
 
-                requestTile.addEventListener('dragleave', function () {
-                    requestTile.classList.remove('drag-over');
-                });
+                    requestTile.addEventListener('drop', handleFileDrop);
 
-                requestTile.addEventListener('drop', handleFileDrop);
+                    const abortButton = requestTile.querySelector('.abort-button');
+                    abortButton.addEventListener('click', () => abortRequest(request.task_id));
 
-                const abortButton = requestTile.querySelector('.abort-button');
-                abortButton.addEventListener('click', () => abortRequest(request.task_id));
+                    requestsContainer.appendChild(requestTile);
+                }
+                // Existing requests are immutable; no updates needed
+            });
 
-                requestsContainer.appendChild(requestTile);
+            // Remove tiles that are no longer in userRequests
+            Array.from(existingTiles).forEach(tile => {
+                const taskId = tile.getAttribute('data-task-id');
+                if (!userRequestIds.has(taskId)) {
+                    requestsContainer.removeChild(tile);
+                }
             });
         }