Update app.py

app.py

@@ -11,7 +11,7 @@ def create_reranking_interface(task_data):
     
     # Define helper functions before UI elements are created
     def generate_sortable_html(candidates, existing_ranks=None):
-        """Generate the HTML for the sortable list."""
+        """Generate the HTML for the sortable list with up/down buttons."""
         if existing_ranks and len(existing_ranks) == len(candidates):
             order = sorted(range(len(candidates)), key=lambda i: existing_ranks[i])
         else:
@@ -24,9 +24,18 @@ def create_reranking_interface(task_data):
                 rank = rank_minus_1 + 1
                 import html as html_escaper
                 escaped_doc = html_escaper.escape(doc)
+                
+                # Add navigation buttons (up/down arrows)
+                up_disabled = "disabled" if rank == 1 else ""
+                down_disabled = "disabled" if rank == len(candidates) else ""
+                
                 html += f'''\
-                <div class="sortable-item rank-bg-{rank}" data-doc-id="{idx}">
-                    <div class="rank-badge">{rank}</div>
+                <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>
+                        <div class="rank-badge">{rank}</div>
+                        <button class="rank-btn down-btn" {down_disabled} onclick="moveItemDown({rank})">▼</button>
+                    </div>
                     <div class="doc-content">{escaped_doc}</div>
                 </div>
                 '''
@@ -143,8 +152,115 @@ 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) {
+            if (currentRank <= 1) return; // Already at the top
+            
+            const container = document.getElementById('sortable-container');
+            if (!container) return;
+            
+            const items = container.querySelectorAll('.sortable-item');
+            const itemsArray = Array.from(items);
+            
+            // 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);
+            
+            if (!currentItem || !aboveItem) return;
+            
+            // Swap the items
+            aboveItem.parentNode.insertBefore(currentItem, aboveItem);
+            
+            // Update ranks
+            updateRanksAfterMove();
+        }
+        
+        // Function to move an item down in the ranking
+        function moveItemDown(currentRank) {
+            const container = document.getElementById('sortable-container');
+            if (!container) return;
+            
+            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
+            const currentItem = itemsArray.find(item => item.getAttribute('data-rank') == currentRank);
+            const belowItem = itemsArray.find(item => item.getAttribute('data-rank') == currentRank + 1);
+            
+            if (!currentItem || !belowItem) return;
+            
+            // Swap the items
+            belowItem.parentNode.insertBefore(belowItem, currentItem);
+            
+            // Update ranks
+            updateRanksAfterMove();
+        }
+        
+        // Update rank numbers and classes after moving
+        function updateRanksAfterMove() {
+            const container = document.getElementById('sortable-container');
+            if (!container) return;
+            
+            const items = container.querySelectorAll('.sortable-item');
+            const orderInput = document.querySelector('#current-order textarea');
+            if (!orderInput) return;
+            
+            const order = [];
+            items.forEach((item, index) => {
+                const rank = index + 1;
+                const docId = parseInt(item.getAttribute('data-doc-id'));
+                
+                // Update rank display
+                const rankBadge = item.querySelector('.rank-badge');
+                if (rankBadge) rankBadge.textContent = rank;
+                
+                // Update item classes
+                item.className = item.className.replace(/rank-bg-\d+/g, '').trim();
+                item.classList.add(`rank-bg-${rank}`);
+                
+                // Update data attribute
+                item.setAttribute('data-rank', rank);
+                
+                // Update button states
+                const upBtn = item.querySelector('.up-btn');
+                const downBtn = item.querySelector('.down-btn');
+                
+                if (upBtn) {
+                    if (rank == 1) {
+                        upBtn.setAttribute('disabled', 'disabled');
+                    } else {
+                        upBtn.removeAttribute('disabled');
+                    }
+                }
+                
+                if (downBtn) {
+                    if (rank == items.length) {
+                        downBtn.setAttribute('disabled', 'disabled');
+                    } else {
+                        downBtn.removeAttribute('disabled');
+                    }
+                }
+                
+                order.push(docId);
+            });
+            
+            // Update hidden input
+            const newOrderValue = JSON.stringify(order);
+            if (orderInput.value !== newOrderValue) {
+                orderInput.value = newOrderValue;
+                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
                 const container = document.getElementById('sortable-container');
                 if (!container) {
                     console.log('Container not found, retrying...');
@@ -166,37 +282,9 @@ def create_reranking_interface(task_data):
                     animation: 150,
                     ghostClass: "sortable-ghost",
                     onEnd: function() {
-                        updateRanksAndSyncState();
+                        updateRanksAfterMove();
                     }
                 });
-                
-                updateRanksAndSyncState();
-            }
-            
-            function updateRanksAndSyncState() {
-                const container = document.getElementById('sortable-container');
-                if (!container) return;
-                
-                const items = container.querySelectorAll('.sortable-item');
-                const orderInput = document.querySelector('#current-order textarea');
-                if (!orderInput) return;
-                
-                const order = [];
-                items.forEach((item, index) => {
-                    const rankBadge = item.querySelector('.rank-badge');
-                    if (rankBadge) rankBadge.textContent = (index + 1);
-                    item.className = item.className.replace(/rank-bg-\d+/g, '').trim();
-                    item.classList.add(`rank-bg-${index + 1}`);
-                    const docId = parseInt(item.getAttribute('data-doc-id'));
-                    order.push(docId);
-                });
-                
-                const newOrderValue = JSON.stringify(order);
-                if (orderInput.value !== newOrderValue) {
-                    orderInput.value = newOrderValue;
-                    const event = new Event('input', { bubbles: true });
-                    orderInput.dispatchEvent(event);
-                }
             }
             
             // Initialize immediately and also set up a mutation observer
@@ -252,6 +340,12 @@ def create_reranking_interface(task_data):
             cursor: grabbing; 
             box-shadow: 0 4px 8px rgba(0,0,0,0.1);
         }
+        .rank-controls {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin-right: 15px;
+        }
         .rank-badge {
             display: flex; 
             align-items: center; 
@@ -262,9 +356,30 @@ def create_reranking_interface(task_data):
             background-color: #6c757d; 
             color: white; 
             font-weight: bold; 
-            margin-right: 15px;
+            margin: 4px 0;
             flex-shrink: 0;
         }
+        .rank-btn {
+            border: none;
+            background: #f0f0f0;
+            border-radius: 4px;
+            width: 24px;
+            height: 24px;
+            font-size: 12px;
+            line-height: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            color: #333;
+        }
+        .rank-btn:hover:not([disabled]) {
+            background: #e0e0e0;
+        }
+        .rank-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
         .doc-content { 
             flex: 1; 
             line-height: 1.4;