Update app.py

app.py

@@ -11,35 +11,153 @@ 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 with up/down buttons."""
+        """Generate the HTML for simple ranking with numbered buttons."""
         if existing_ranks and len(existing_ranks) == len(candidates):
+            # Use existing ranks to determine the current order
             order = sorted(range(len(candidates)), key=lambda i: existing_ranks[i])
         else:
+            # Default to original order
             order = list(range(len(candidates)))
-        
-        html = '<div id="sortable-container" class="sortable-container">'
-        for rank_minus_1, idx in enumerate(order):
+            
+        # Create an array to hold the documents in their current order
+        ordered_docs = []
+        for idx in order:
             if idx < len(candidates):
-                doc = candidates[idx]
-                rank = rank_minus_1 + 1
-                import html as html_escaper
-                escaped_doc = html_escaper.escape(doc)
+                ordered_docs.append({"doc_id": idx, "text": candidates[idx]})
                 
-                # Add navigation buttons (up/down arrows)
-                up_disabled = "disabled" if rank == 1 else ""
-                down_disabled = "disabled" if rank == len(candidates) else ""
+        # Generate the HTML for the ranking interface
+        html = """
+        <div class="ranking-container">
+            <div class="docs-container">
+        """
+        
+        # Add each document with rank selection buttons
+        for i, doc in enumerate(ordered_docs):
+            import html as html_escaper
+            escaped_doc = html_escaper.escape(doc["text"])
+            current_rank = i + 1
+            
+            html += f"""
+            <div class="doc-item" data-doc-id="{doc['doc_id']}">
+                <div class="rank-selector">
+                    <div class="rank-number">{current_rank}</div>
+                    <div class="rank-buttons">
+            """
+            
+            # Add numbered rank buttons
+            for rank_btn in range(1, len(candidates) + 1):
+                selected = "selected" if rank_btn == current_rank else ""
+                html += f'<button class="rank-btn {selected}" data-rank="{rank_btn}" onclick="setRank({doc["doc_id"]}, {rank_btn})">{rank_btn}</button>'
                 
-                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>
-                        <div class="rank-badge">{rank}</div>
-                        <button class="rank-btn down-btn" {down_disabled} onclick="moveItemDown({rank})">▼</button>
+            html += """
                     </div>
-                    <div class="doc-content">{escaped_doc}</div>
                 </div>
-                '''
-        html += '</div>'
+                <div class="doc-content">
+                    """ + escaped_doc + """
+                </div>
+            </div>
+            """
+            
+        html += """
+            </div>
+        </div>
+        
+        <script>
+        function setRank(docId, newRank) {
+            // Convert to numbers to ensure proper comparison
+            docId = parseInt(docId);
+            newRank = parseInt(newRank);
+            
+            // Get all doc items
+            const docItems = document.querySelectorAll('.doc-item');
+            
+            // First, find the document that currently has the requested rank
+            let targetDocItem = null;
+            let currentDocRank = 0;
+            
+            docItems.forEach((item, index) => {
+                const itemDocId = parseInt(item.getAttribute('data-doc-id'));
+                
+                // Find the current rank of the document we want to change
+                if (itemDocId === docId) {
+                    targetDocItem = item;
+                    currentDocRank = index + 1;
+                }
+                
+                // Update the selected button for this doc
+                const buttons = item.querySelectorAll('.rank-btn');
+                buttons.forEach(btn => {
+                    const btnRank = parseInt(btn.getAttribute('data-rank'));
+                    if (btnRank === newRank && itemDocId === docId) {
+                        btn.classList.add('selected');
+                    } else if (btnRank !== newRank && itemDocId === docId) {
+                        btn.classList.remove('selected');
+                    }
+                });
+            });
+            
+            // If we're not changing the rank, do nothing more
+            if (currentDocRank === newRank) {
+                updateOrderState();
+                return;
+            }
+            
+            // Get the container and convert nodelist to array so we can manipulate it
+            const container = document.querySelector('.docs-container');
+            const itemsArray = Array.from(docItems);
+            
+            // Remove the target doc from its current position
+            itemsArray.splice(currentDocRank - 1, 1);
+            
+            // Insert it at the new rank position
+            itemsArray.splice(newRank - 1, 0, targetDocItem);
+            
+            // Clear the container
+            while (container.firstChild) {
+                container.removeChild(container.firstChild);
+            }
+            
+            // Add items back in their new order
+            itemsArray.forEach((item, index) => {
+                // Update the displayed rank number
+                const rankNumber = item.querySelector('.rank-number');
+                rankNumber.textContent = index + 1;
+                
+                // Add back to container
+                container.appendChild(item);
+            });
+            
+            // Update the hidden state for submission
+            updateOrderState();
+        }
+        
+        function updateOrderState() {
+            // Get the current order of documents
+            const docItems = document.querySelectorAll('.doc-item');
+            const order = Array.from(docItems).map(item => 
+                parseInt(item.getAttribute('data-doc-id')));
+                
+            // Find the input field and update its value
+            const orderInput = document.querySelector('#current-order textarea');
+            if (orderInput) {
+                orderInput.value = JSON.stringify(order);
+                
+                // Trigger input event to notify Gradio
+                const event = new Event('input', { bubbles: true });
+                orderInput.dispatchEvent(event);
+            }
+        }
+        
+        // Initialize the order state when the page loads
+        window.addEventListener('DOMContentLoaded', function() {
+            updateOrderState();
+        });
+        
+        // Backup initialization for iframe environments
+        setTimeout(updateOrderState, 1000);
+        </script>
+        """
+        
         return html
     
     def save_ranking(order_json, sample_id):
@@ -150,293 +268,95 @@ def create_reranking_interface(task_data):
             save_btn = gr.Button("💾 Save All Results", variant="secondary")
         
         js_code = """
-        <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
-        <script>
-        // Ensure these functions are 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) {
-                console.error("Container not found");
-                return;
-            }
-            
-            const items = container.querySelectorAll('.sortable-item');
-            const itemsArray = Array.from(items);
-            
-            // Find the items to swap
-            const currentItem = itemsArray.find(item => parseInt(item.getAttribute('data-rank')) === currentRank);
-            const aboveItem = itemsArray.find(item => parseInt(item.getAttribute('data-rank')) === currentRank - 1);
-            
-            if (!currentItem || !aboveItem) {
-                console.error("Items not found", currentItem, aboveItem);
-                return;
-            }
-            
-            // Swap the items
-            aboveItem.parentNode.insertBefore(currentItem, aboveItem);
-            
-            // Update ranks
-            window.updateRanksAfterMove();
-        };
-        
-        // Function to move an item down in the ranking
-        window.moveItemDown = function(currentRank) {
-            console.log("Moving item down:", currentRank);
-            currentRank = parseInt(currentRank);
-            
-            const container = document.getElementById('sortable-container');
-            if (!container) {
-                console.error("Container not found");
-                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 => parseInt(item.getAttribute('data-rank')) === currentRank);
-            const belowItem = itemsArray.find(item => parseInt(item.getAttribute('data-rank')) === currentRank + 1);
-            
-            if (!currentItem || !belowItem) {
-                console.error("Items not found", currentItem, belowItem);
-                return;
-            }
-            
-            // Swap the items
-            belowItem.parentNode.insertBefore(belowItem, currentItem);
-            
-            // Update ranks
-            window.updateRanksAfterMove();
-        };
-        
-        // Update rank numbers and classes after moving
-        window.updateRanksAfterMove = function() {
-            console.log("Updating ranks");
-            const container = document.getElementById('sortable-container');
-            if (!container) return;
-            
-            const items = container.querySelectorAll('.sortable-item');
-            const orderInput = document.querySelector('#current-order textarea');
-            if (!orderInput) {
-                console.error("Order input not found");
-                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);
-            console.log("New order:", newOrderValue);
-            if (orderInput.value !== newOrderValue) {
-                orderInput.value = newOrderValue;
-                try {
-                    const event = new Event('input', { bubbles: true });
-                    orderInput.dispatchEvent(event);
-                    console.log("Event dispatched");
-                } catch (e) {
-                    console.error("Error dispatching event:", e);
-                }
-            }
-        };
-        
-        document.addEventListener('DOMContentLoaded', function() {
-            console.log("DOM loaded, setting up ranking interface");
-            
-            function initializeSortable() {
-                // Initialize event handlers for buttons
-                window.updateRanksAfterMove();
-                
-                // Keep drag-and-drop as a fallback
-                const container = document.getElementById('sortable-container');
-                if (!container) {
-                    console.log('Container not found, retrying...');
-                    setTimeout(initializeSortable, 200);
-                    return;
-                }
-                
-                if (typeof Sortable === 'undefined') {
-                    console.log('Sortable not loaded, retrying...');
-                    setTimeout(initializeSortable, 200);
-                    return;
-                }
-                
-                if (container.sortableInstance) {
-                    return;
-                }
-                
-                console.log("Initializing Sortable.js");
-                container.sortableInstance = new Sortable(container, {
-                    animation: 150,
-                    ghostClass: "sortable-ghost",
-                    onEnd: function() {
-                        window.updateRanksAfterMove();
-                    }
-                });
-            }
-            
-            // Initialize immediately and also set up a mutation observer
-            initializeSortable();
-            
-            const targetNode = document.getElementById('sortable-list-container');
-            if (targetNode) {
-                const config = { childList: true, subtree: true };
-                const observer = new MutationObserver(function(mutationsList) {
-                    for(const mutation of mutationsList) {
-                        if (mutation.type === 'childList') {
-                            if (document.getElementById('sortable-container')) {
-                                initializeSortable();
-                            }
-                        }
-                    }
-                });
-                observer.observe(targetNode, config);
-            }
-        });
-        
-        // Backup initialization - sometimes DOMContentLoaded doesn't fire reliably in iframes
-        setTimeout(function() {
-            if (document.getElementById('sortable-container')) {
-                console.log("Backup initialization");
-                if (window.updateRanksAfterMove) {
-                    window.updateRanksAfterMove();
-                }
-            }
-        }, 1000);
-        </script>
         <style>
-        .sortable-container { 
-            display: flex; 
-            flex-direction: column; 
-            gap: 8px; 
-            min-height: 200px;
-            padding: 10px;
-            background-color: #f8f9fa;
-            border-radius: 8px;
+        /* Simple and reliable ranking interface styles */
+        .ranking-container {
+            width: 100%;
+            max-width: 100%;
+            margin: 0 auto;
         }
-        .sortable-item {
-            padding: 12px 15px; 
-            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; 
+
+        .docs-container {
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
         }
-        .sortable-chosen { 
-            cursor: grabbing; 
-            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+
+        .doc-item {
+            display: flex;
+            padding: 15px;
+            background: white;
+            border: 1px solid #e0e0e0;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
         }
-        .rank-controls {
+
+        .rank-selector {
             display: flex;
             flex-direction: column;
             align-items: center;
             margin-right: 15px;
+            min-width: 40px;
         }
-        .rank-badge {
-            display: flex; 
-            align-items: center; 
+
+        .rank-number {
+            font-size: 18px;
+            font-weight: bold;
+            width: 30px;
+            height: 30px;
+            display: flex;
+            align-items: center;
             justify-content: center;
-            width: 28px; 
-            height: 28px; 
+            background: #3b82f6;
+            color: white;
             border-radius: 50%;
-            background-color: #6c757d; 
-            color: white; 
-            font-weight: bold; 
-            margin: 4px 0;
-            flex-shrink: 0;
+            margin-bottom: 8px;
+        }
+
+        .rank-buttons {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 3px;
+            max-width: 120px;
+            justify-content: center;
         }
+
         .rank-btn {
-            border: none;
-            background: #f0f0f0;
-            border-radius: 4px;
-            width: 24px;
-            height: 24px;
+            width: 26px;
+            height: 26px;
+            padding: 0;
             font-size: 12px;
-            line-height: 1;
+            border: 1px solid #d1d5db;
+            background: #f9fafb;
+            border-radius: 4px;
+            cursor: pointer;
             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;
+
+        .rank-btn:hover {
+            background: #e5e7eb;
         }
-        .doc-content { 
-            flex: 1; 
-            line-height: 1.4;
-            word-break: break-word;
+
+        .rank-btn.selected {
+            background: #3b82f6;
+            color: white;
+            border-color: #2563eb;
         }
-        .rank-bg-1 .rank-badge { background-color: #198754; }
-        .rank-bg-2 .rank-badge { background-color: #20c997; }
-        .rank-bg-3 .rank-badge { background-color: #ffc107; color: #333; }
-        .rank-bg-4 .rank-badge { background-color: #fd7e14; }
-        .rank-bg-5 .rank-badge { background-color: #dc3545; }
-        .rank-bg-6 .rank-badge, .rank-bg-7 .rank-badge { background-color: #6f42c1; }
-        .rank-bg-8 .rank-badge, .rank-bg-9 .rank-badge { background-color: #d63384; }
-        .rank-bg-10 .rank-badge, .rank-bg-11 .rank-badge, .rank-bg-12 .rank-badge, 
-        .rank-bg-13 .rank-badge, .rank-bg-14 .rank-badge, .rank-bg-15 .rank-badge, 
-        .rank-bg-16 .rank-badge, .rank-bg-17 .rank-badge, .rank-bg-18 .rank-badge, 
-        .rank-bg-19 .rank-badge, .rank-bg-20 .rank-badge { 
-            background-color: #6c757d;
+
+        .doc-content {
+            flex: 1;
+            padding: 5px;
+            line-height: 1.5;
         }
+
+        /* Color coding the rank numbers by position */
+        .doc-item:nth-child(1) .rank-number { background-color: #10b981; /* green */ }
+        .doc-item:nth-child(2) .rank-number { background-color: #3b82f6; /* blue */ }
+        .doc-item:nth-child(3) .rank-number { background-color: #f59e0b; /* yellow */ }
+        .doc-item:nth-child(4) .rank-number { background-color: #ef4444; /* red */ }
+        .doc-item:nth-child(5) .rank-number { background-color: #8b5cf6; /* purple */ }
         </style>
         """
         gr.HTML(js_code)