Update app.py

app.py

@@ -32,9 +32,9 @@ def create_reranking_interface(task_data):
                 html += f'''\
                 <div class="sortable-item rank-bg-{rank}" data-doc-id="{idx}" data-rank="{rank}">
                     <div class="rank-controls">
-                        <button class="rank-btn up-btn" {up_disabled} onclick="moveItemUp({rank})">▲</button>
+                        <button type="button" class="rank-btn up-btn" {up_disabled} onclick="window.moveItemUp({rank})">▲</button>
                         <div class="rank-badge">{rank}</div>
-                        <button class="rank-btn down-btn" {down_disabled} onclick="moveItemDown({rank})">▼</button>
+                        <button type="button" class="rank-btn down-btn" {down_disabled} onclick="window.moveItemDown({rank})">▼</button>
                     </div>
                     <div class="doc-content">{escaped_doc}</div>
                 </div>
@@ -152,60 +152,88 @@ def create_reranking_interface(task_data):
         js_code = """
         <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
         <script>
-        // Function to move an item up in the ranking
-        function moveItemUp(currentRank) {
+        // Make the functions globally available
+        window.moveItemUp = function(currentRank) {
+            console.log('Moving item up:', currentRank);
             if (currentRank <= 1) return; // Already at the top
             
             const container = document.getElementById('sortable-container');
-            if (!container) return;
+            if (!container) {
+                console.error('Container not found');
+                return;
+            }
             
-            const items = container.querySelectorAll('.sortable-item');
-            const itemsArray = Array.from(items);
+            const items = Array.from(container.querySelectorAll('.sortable-item'));
+            console.log('Found items:', items.length);
             
-            // Find the items to swap
-            const currentItem = itemsArray.find(item => item.getAttribute('data-rank') == currentRank);
-            const aboveItem = itemsArray.find(item => item.getAttribute('data-rank') == currentRank - 1);
+            // Find the items to swap by their data-rank attribute
+            const currentItem = items.find(item => parseInt(item.getAttribute('data-rank')) === currentRank);
+            const aboveItem = items.find(item => parseInt(item.getAttribute('data-rank')) === currentRank - 1);
             
-            if (!currentItem || !aboveItem) return;
+            if (!currentItem || !aboveItem) {
+                console.error('Items not found:', currentItem, aboveItem);
+                return;
+            }
             
-            // Swap the items
-            aboveItem.parentNode.insertBefore(currentItem, aboveItem);
+            console.log('Swapping items:', currentItem, aboveItem);
+            
+            // Swap the items in the DOM
+            if (aboveItem.previousElementSibling) {
+                container.insertBefore(currentItem, aboveItem);
+            } else {
+                container.insertBefore(currentItem, container.firstChild);
+            }
             
             // Update ranks
-            updateRanksAfterMove();
-        }
+            window.updateRanksAfterMove();
+        };
         
-        // Function to move an item down in the ranking
-        function moveItemDown(currentRank) {
+        window.moveItemDown = function(currentRank) {
+            console.log('Moving item down:', currentRank);
+            
             const container = document.getElementById('sortable-container');
-            if (!container) return;
+            if (!container) {
+                console.error('Container not found');
+                return;
+            }
+            
+            const items = Array.from(container.querySelectorAll('.sortable-item'));
+            console.log('Found items:', items.length);
             
-            const items = container.querySelectorAll('.sortable-item');
             if (currentRank >= items.length) return; // Already at the bottom
             
-            const itemsArray = Array.from(items);
+            // Find the items to swap by their data-rank attribute
+            const currentItem = items.find(item => parseInt(item.getAttribute('data-rank')) === currentRank);
+            const belowItem = items.find(item => parseInt(item.getAttribute('data-rank')) === currentRank + 1);
             
-            // Find the items to swap
-            const currentItem = itemsArray.find(item => item.getAttribute('data-rank') == currentRank);
-            const belowItem = itemsArray.find(item => item.getAttribute('data-rank') == currentRank + 1);
+            if (!currentItem || !belowItem) {
+                console.error('Items not found for moving down');
+                return;
+            }
             
-            if (!currentItem || !belowItem) return;
+            console.log('Swapping items down:', currentItem, belowItem);
             
-            // Swap the items
-            belowItem.parentNode.insertBefore(belowItem, currentItem);
+            // Swap the items in the DOM - insert the current item after the below item
+            container.insertBefore(currentItem, belowItem.nextElementSibling);
             
             // Update ranks
-            updateRanksAfterMove();
-        }
+            window.updateRanksAfterMove();
+        };
         
-        // Update rank numbers and classes after moving
-        function updateRanksAfterMove() {
+        window.updateRanksAfterMove = function() {
+            console.log('Updating ranks');
             const container = document.getElementById('sortable-container');
-            if (!container) return;
+            if (!container) {
+                console.error('Container not found for rank update');
+                return;
+            }
             
-            const items = container.querySelectorAll('.sortable-item');
+            const items = Array.from(container.querySelectorAll('.sortable-item'));
             const orderInput = document.querySelector('#current-order textarea');
-            if (!orderInput) return;
+            if (!orderInput) {
+                console.error('Order input not found');
+                return;
+            }
             
             const order = [];
             items.forEach((item, index) => {
@@ -217,7 +245,7 @@ def create_reranking_interface(task_data):
                 if (rankBadge) rankBadge.textContent = rank;
                 
                 // Update item classes
-                item.className = item.className.replace(/rank-bg-\d+/g, '').trim();
+                item.className = item.className.replace(/rank-bg-\\d+/g, '').trim();
                 item.classList.add(`rank-bg-${rank}`);
                 
                 // Update data attribute
@@ -246,50 +274,73 @@ def create_reranking_interface(task_data):
                 order.push(docId);
             });
             
-            // Update hidden input
+            // Update hidden input with JSON
+            console.log('New order:', order);
             const newOrderValue = JSON.stringify(order);
-            if (orderInput.value !== newOrderValue) {
-                orderInput.value = newOrderValue;
-                const event = new Event('input', { bubbles: true });
-                orderInput.dispatchEvent(event);
-            }
-        }
+            orderInput.value = newOrderValue;
+            
+            // Trigger input event
+            const event = new Event('input', { bubbles: true });
+            orderInput.dispatchEvent(event);
+        };
         
         document.addEventListener('DOMContentLoaded', function() {
-            function initializeSortable() {
-                // Initialize event handlers for buttons
-                updateRanksAfterMove();
-                
-                // Keep drag-and-drop as a fallback
+            console.log('DOM loaded, initializing ranking interface');
+            
+            // Function to initialize the interface
+            function initializeRankingInterface() {
                 const container = document.getElementById('sortable-container');
                 if (!container) {
-                    console.log('Container not found, retrying...');
-                    setTimeout(initializeSortable, 200);
+                    console.log('Container not found, retrying in 200ms');
+                    setTimeout(initializeRankingInterface, 200);
                     return;
                 }
                 
-                if (typeof Sortable === 'undefined') {
-                    console.log('Sortable not loaded, retrying...');
-                    setTimeout(initializeSortable, 200);
-                    return;
-                }
+                console.log('Sortable container found, setting up');
                 
-                if (container.sortableInstance) {
-                    return;
-                }
+                // Add click events directly to buttons as a backup
+                const upButtons = container.querySelectorAll('.up-btn');
+                const downButtons = container.querySelectorAll('.down-btn');
                 
-                container.sortableInstance = new Sortable(container, {
-                    animation: 150,
-                    ghostClass: "sortable-ghost",
-                    onEnd: function() {
-                        updateRanksAfterMove();
-                    }
+                upButtons.forEach(btn => {
+                    btn.addEventListener('click', function() {
+                        const item = this.closest('.sortable-item');
+                        const rank = parseInt(item.getAttribute('data-rank'));
+                        window.moveItemUp(rank);
+                    });
                 });
+                
+                downButtons.forEach(btn => {
+                    btn.addEventListener('click', function() {
+                        const item = this.closest('.sortable-item');
+                        const rank = parseInt(item.getAttribute('data-rank'));
+                        window.moveItemDown(rank);
+                    });
+                });
+                
+                // Initialize drag-and-drop as fallback
+                if (typeof Sortable !== 'undefined') {
+                    if (!container.sortableInstance) {
+                        container.sortableInstance = new Sortable(container, {
+                            animation: 150,
+                            ghostClass: "sortable-ghost",
+                            onEnd: function() {
+                                window.updateRanksAfterMove();
+                            }
+                        });
+                    }
+                } else {
+                    console.log('Sortable library not available');
+                }
+                
+                // Initialize the ranking
+                window.updateRanksAfterMove();
             }
             
-            // Initialize immediately and also set up a mutation observer
-            initializeSortable();
+            // Initialize immediately
+            initializeRankingInterface();
             
+            // Also observe DOM changes to reinitialize when needed
             const targetNode = document.getElementById('sortable-list-container');
             if (targetNode) {
                 const config = { childList: true, subtree: true };
@@ -297,7 +348,8 @@ def create_reranking_interface(task_data):
                     for(const mutation of mutationsList) {
                         if (mutation.type === 'childList') {
                             if (document.getElementById('sortable-container')) {
-                                initializeSortable();
+                                console.log('DOM changed, reinitializing');
+                                initializeRankingInterface();
                             }
                         }
                     }
@@ -310,41 +362,30 @@ def create_reranking_interface(task_data):
         .sortable-container { 
             display: flex; 
             flex-direction: column; 
-            gap: 8px; 
+            gap: 12px; 
             min-height: 200px;
-            padding: 10px;
+            padding: 16px;
             background-color: #f8f9fa;
             border-radius: 8px;
         }
         .sortable-item {
-            padding: 12px 15px; 
+            padding: 14px; 
             background-color: #fff; 
             border: 1px solid #e0e0e0;
             border-radius: 6px; 
-            cursor: grab; 
             display: flex; 
             align-items: center;
             transition: all 0.2s ease;
-            user-select: none;
         }
         .sortable-item:hover { 
             background-color: #f8f9fa; 
             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         }
-        .sortable-ghost { 
-            background-color: #e3f2fd !important; 
-            border-style: dashed !important; 
-            opacity: 0.8; 
-        }
-        .sortable-chosen { 
-            cursor: grabbing; 
-            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-        }
         .rank-controls {
-            display: flex;
+            display: flex; 
             flex-direction: column;
             align-items: center;
-            margin-right: 15px;
+            margin-right: 16px;
         }
         .rank-badge {
             display: flex; 
@@ -356,25 +397,27 @@ def create_reranking_interface(task_data):
             background-color: #6c757d; 
             color: white; 
             font-weight: bold; 
-            margin: 4px 0;
+            margin: 6px 0;
             flex-shrink: 0;
         }
         .rank-btn {
+            width: 28px;
+            height: 28px;
             border: none;
-            background: #f0f0f0;
+            background-color: #f0f0f0;
             border-radius: 4px;
-            width: 24px;
-            height: 24px;
-            font-size: 12px;
-            line-height: 1;
+            margin: 2px 0;
+            cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: center;
-            cursor: pointer;
-            color: #333;
+            font-size: 14px;
         }
         .rank-btn:hover:not([disabled]) {
-            background: #e0e0e0;
+            background-color: #e0e0e0;
+        }
+        .rank-btn:active:not([disabled]) {
+            background-color: #d0d0d0;
         }
         .rank-btn:disabled {
             opacity: 0.5;
@@ -382,7 +425,7 @@ def create_reranking_interface(task_data):
         }
         .doc-content { 
             flex: 1; 
-            line-height: 1.4;
+            line-height: 1.5;
             word-break: break-word;
         }
         .rank-bg-1 .rank-badge { background-color: #198754; }