Update app.py

app.py

@@ -141,95 +141,135 @@ 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 src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
         <script>
-        function initializeSortableForApp() {
-            const container = document.getElementById('sortable-container');
-            if (!container) {
-                setTimeout(initializeSortableForApp, 200);
-                return;
-            }
-            if (typeof Sortable === 'undefined') {
-                setTimeout(initializeSortableForApp, 200);
-                return;
-            }
-            if (container.sortableInstance) {
-                return;
-            }
-            container.sortableInstance = new Sortable(container, {
-                animation: 150,
-                ghostClass: "sortable-ghost",
-                onEnd: function() {
-                    updateRanksAndSyncState();
+        document.addEventListener('DOMContentLoaded', function() {
+            function initializeSortable() {
+                const container = document.getElementById('sortable-container');
+                if (!container) {
+                    console.log('Container not found, retrying...');
+                    setTimeout(initializeSortable, 200);
+                    return;
                 }
-            });
-            updateRanksAndSyncState();
-        }
-        
-        function updateRanksAndSyncState() {
-            const container = document.getElementById('sortable-container');
-            if (!container) return;
+                
+                if (typeof Sortable === 'undefined') {
+                    console.log('Sortable not loaded, retrying...');
+                    setTimeout(initializeSortable, 200);
+                    return;
+                }
+                
+                if (container.sortableInstance) {
+                    return;
+                }
+                
+                container.sortableInstance = new Sortable(container, {
+                    animation: 150,
+                    ghostClass: "sortable-ghost",
+                    onEnd: function() {
+                        updateRanksAndSyncState();
+                    }
+                });
+                
+                updateRanksAndSyncState();
+            }
             
-            const items = container.querySelectorAll('.sortable-item');
-            const orderInput = document.querySelector('#current-order textarea');
-            if (!orderInput) {
-                return;
+            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);
+                }
             }
             
-            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);
-            });
+            // Initialize immediately and also set up a mutation observer
+            initializeSortable();
             
-            const newOrderValue = JSON.stringify(order);
-            if (orderInput.value !== newOrderValue) {
-                orderInput.value = newOrderValue;
-                const event = new Event('input', { bubbles: true });
-                orderInput.dispatchEvent(event);
-            }
-        }
-        
-        const targetNode = document.getElementById('sortable-list-container');
-        if (targetNode) {
-            const config = { childList: true, subtree: true };
-            const callback = function(mutationsList, observer) {
-                for(const mutation of mutationsList) {
-                    if (mutation.type === 'childList') {
-                        if (document.getElementById('sortable-container')){
-                            initializeSortableForApp();
+            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();
+                            }
                         }
                     }
-                }
-            };
-            const observer = new MutationObserver(callback);
-            observer.observe(targetNode, config);
-        }
-        
-        setTimeout(initializeSortableForApp, 500);
-        
+                });
+                observer.observe(targetNode, config);
+            }
+        });
         </script>
         <style>
-        .sortable-container { display: flex; flex-direction: column; gap: 8px; }
+        .sortable-container { 
+            display: flex; 
+            flex-direction: column; 
+            gap: 8px; 
+            min-height: 200px;
+            padding: 10px;
+            background-color: #f8f9fa;
+            border-radius: 8px;
+        }
         .sortable-item {
-            padding: 10px 15px; background-color: #fff; border: 1px solid #e0e0e0;
-            border-radius: 6px; cursor: grab; display: flex; align-items: center;
-            transition: background-color 0.2s ease;
+            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; 
+        }
+        .sortable-chosen { 
+            cursor: grabbing; 
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
         }
-        .sortable-item:hover { background-color: #f8f9fa; }
-        .sortable-ghost { background-color: #d3e3fd !important; border-style: dashed !important; opacity: 0.6; }
-        .sortable-chosen { cursor: grabbing; }
         .rank-badge {
-            display: flex; align-items: center; justify-content: center;
-            width: 28px; height: 28px; border-radius: 50%;
-            background-color: #6c757d; color: white; font-weight: bold; margin-right: 15px;
+            display: flex; 
+            align-items: center; 
+            justify-content: center;
+            width: 28px; 
+            height: 28px; 
+            border-radius: 50%;
+            background-color: #6c757d; 
+            color: white; 
+            font-weight: bold; 
+            margin-right: 15px;
             flex-shrink: 0;
         }
-        .doc-content { flex: 1; line-height: 1.4; }
+        .doc-content { 
+            flex: 1; 
+            line-height: 1.4;
+            word-break: break-word;
+        }
         .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; }