add missing tasks and improve style

app.py

@@ -294,7 +294,11 @@ class TransformersTimelineParser:
             # Import the model mappings from transformers
             from transformers.models.auto.modeling_auto import (
                 MODEL_FOR_AUDIO_CLASSIFICATION_MAPPING_NAMES,
+                MODEL_FOR_AUDIO_FRAME_CLASSIFICATION_MAPPING_NAMES,
+                MODEL_FOR_AUDIO_XVECTOR_MAPPING_NAMES,
+                MODEL_FOR_CAUSAL_IMAGE_MODELING_MAPPING_NAMES,
                 MODEL_FOR_CAUSAL_LM_MAPPING_NAMES,
+                MODEL_FOR_CTC_MAPPING_NAMES,
                 MODEL_FOR_DEPTH_ESTIMATION_MAPPING_NAMES,
                 MODEL_FOR_DOCUMENT_QUESTION_ANSWERING_MAPPING_NAMES,
                 MODEL_FOR_IMAGE_CLASSIFICATION_MAPPING_NAMES,
@@ -302,15 +306,21 @@ class TransformersTimelineParser:
                 MODEL_FOR_IMAGE_TEXT_TO_TEXT_MAPPING_NAMES,
                 MODEL_FOR_IMAGE_TO_IMAGE_MAPPING_NAMES,
                 MODEL_FOR_INSTANCE_SEGMENTATION_MAPPING_NAMES,
+                MODEL_FOR_KEYPOINT_DETECTION_MAPPING_NAMES,
+                MODEL_FOR_KEYPOINT_MATCHING_MAPPING_NAMES,
                 MODEL_FOR_MASK_GENERATION_MAPPING_NAMES,
+                MODEL_FOR_MASKED_IMAGE_MODELING_MAPPING_NAMES,
                 MODEL_FOR_MASKED_LM_MAPPING_NAMES,
+                MODEL_FOR_MULTIPLE_CHOICE_MAPPING_NAMES,
                 MODEL_FOR_OBJECT_DETECTION_MAPPING_NAMES,
                 MODEL_FOR_QUESTION_ANSWERING_MAPPING_NAMES,
                 MODEL_FOR_SEMANTIC_SEGMENTATION_MAPPING_NAMES,
                 MODEL_FOR_SEQ_TO_SEQ_CAUSAL_LM_MAPPING_NAMES,
                 MODEL_FOR_SEQUENCE_CLASSIFICATION_MAPPING_NAMES,
+                MODEL_FOR_SPEECH_SEQ_2_SEQ_MAPPING_NAMES,
                 MODEL_FOR_TABLE_QUESTION_ANSWERING_MAPPING_NAMES,
                 MODEL_FOR_TEXT_TO_SPECTROGRAM_MAPPING_NAMES,
+                MODEL_FOR_TEXT_TO_WAVEFORM_MAPPING_NAMES,
                 MODEL_FOR_TIME_SERIES_CLASSIFICATION_MAPPING_NAMES,
                 MODEL_FOR_TIME_SERIES_PREDICTION_MAPPING_NAMES,
                 MODEL_FOR_TIME_SERIES_REGRESSION_MAPPING_NAMES,
@@ -331,6 +341,7 @@ class TransformersTimelineParser:
                 "question-answering": MODEL_FOR_QUESTION_ANSWERING_MAPPING_NAMES,
                 "fill-mask": MODEL_FOR_MASKED_LM_MAPPING_NAMES,
                 "text2text-generation": MODEL_FOR_SEQ_TO_SEQ_CAUSAL_LM_MAPPING_NAMES,
+                "multiple-choice": MODEL_FOR_MULTIPLE_CHOICE_MAPPING_NAMES,
                 "image-classification": MODEL_FOR_IMAGE_CLASSIFICATION_MAPPING_NAMES,
                 "object-detection": MODEL_FOR_OBJECT_DETECTION_MAPPING_NAMES,
                 "image-segmentation": MODEL_FOR_IMAGE_SEGMENTATION_MAPPING_NAMES,
@@ -338,8 +349,16 @@ class TransformersTimelineParser:
                 "instance-segmentation": MODEL_FOR_INSTANCE_SEGMENTATION_MAPPING_NAMES,
                 "universal-segmentation": MODEL_FOR_UNIVERSAL_SEGMENTATION_MAPPING_NAMES,
                 "depth-estimation": MODEL_FOR_DEPTH_ESTIMATION_MAPPING_NAMES,
+                "masked-image-modeling": MODEL_FOR_MASKED_IMAGE_MODELING_MAPPING_NAMES,
+                "causal-image-modeling": MODEL_FOR_CAUSAL_IMAGE_MODELING_MAPPING_NAMES,
+                "keypoint-detection": MODEL_FOR_KEYPOINT_DETECTION_MAPPING_NAMES,
+                "keypoint-matching": MODEL_FOR_KEYPOINT_MATCHING_MAPPING_NAMES,
                 "video-classification": MODEL_FOR_VIDEO_CLASSIFICATION_MAPPING_NAMES,
                 "audio-classification": MODEL_FOR_AUDIO_CLASSIFICATION_MAPPING_NAMES,
+                "audio-frame-classification": MODEL_FOR_AUDIO_FRAME_CLASSIFICATION_MAPPING_NAMES,
+                "audio-xvector": MODEL_FOR_AUDIO_XVECTOR_MAPPING_NAMES,
+                "automatic-speech-recognition": MODEL_FOR_SPEECH_SEQ_2_SEQ_MAPPING_NAMES,
+                "connectionist-temporal-classification": MODEL_FOR_CTC_MAPPING_NAMES,
                 "image-to-text": MODEL_FOR_VISION_2_SEQ_MAPPING_NAMES,
                 "image-text-to-text": MODEL_FOR_IMAGE_TEXT_TO_TEXT_MAPPING_NAMES,
                 "visual-question-answering": MODEL_FOR_VISUAL_QUESTION_ANSWERING_MAPPING_NAMES,
@@ -350,6 +369,7 @@ class TransformersTimelineParser:
                 "image-to-image": MODEL_FOR_IMAGE_TO_IMAGE_MAPPING_NAMES,
                 "mask-generation": MODEL_FOR_MASK_GENERATION_MAPPING_NAMES,
                 "text-to-audio": MODEL_FOR_TEXT_TO_SPECTROGRAM_MAPPING_NAMES,
+                "text-to-waveform": MODEL_FOR_TEXT_TO_WAVEFORM_MAPPING_NAMES,
                 "time-series-classification": MODEL_FOR_TIME_SERIES_CLASSIFICATION_MAPPING_NAMES,
                 "time-series-regression": MODEL_FOR_TIME_SERIES_REGRESSION_MAPPING_NAMES,
                 "time-series-prediction": MODEL_FOR_TIME_SERIES_PREDICTION_MAPPING_NAMES,
@@ -536,6 +556,7 @@ def get_tasks():
             "question-answering": {"name": "Question Answering", "color": "#c084fc"},
             "fill-mask": {"name": "Fill Mask", "color": "#d8b4fe"},
             "text2text-generation": {"name": "Text2Text Generation", "color": "#e879f9"},
+            "multiple-choice": {"name": "Multiple Choice", "color": "#c026d3"},
             "image-classification": {"name": "Image Classification", "color": "#06b6d4"},
             "object-detection": {"name": "Object Detection", "color": "#0891b2"},
             "image-segmentation": {"name": "Image Segmentation", "color": "#0e7490"},
@@ -543,6 +564,10 @@ def get_tasks():
             "instance-segmentation": {"name": "Instance Segmentation", "color": "#164e63"},
             "universal-segmentation": {"name": "Universal Segmentation", "color": "#1e40af"},
             "depth-estimation": {"name": "Depth Estimation", "color": "#1d4ed8"},
+            "masked-image-modeling": {"name": "Masked Image Modeling", "color": "#7c3aed"},
+            "causal-image-modeling": {"name": "Causal Image Modeling", "color": "#6d28d9"},
+            "keypoint-detection": {"name": "Keypoint Detection", "color": "#4338ca"},
+            "keypoint-matching": {"name": "Keypoint Matching", "color": "#3730a3"},
             "zero-shot-image-classification": {"name": "Zero-Shot Image Classification", "color": "#2563eb"},
             "zero-shot-object-detection": {"name": "Zero-Shot Object Detection", "color": "#3b82f6"},
             "image-to-image": {"name": "Image to Image", "color": "#60a5fa"},
@@ -554,7 +579,15 @@ def get_tasks():
             "table-question-answering": {"name": "Table Question Answering", "color": "#064e3b"},
             "video-classification": {"name": "Video Classification", "color": "#dc2626"},
             "audio-classification": {"name": "Audio Classification", "color": "#ea580c"},
+            "audio-frame-classification": {"name": "Audio Frame Classification", "color": "#fb923c"},
+            "audio-xvector": {"name": "Audio X-Vector", "color": "#fdba74"},
+            "automatic-speech-recognition": {"name": "Automatic Speech Recognition", "color": "#e11d48"},
+            "connectionist-temporal-classification": {
+                "name": "Connectionist Temporal Classification",
+                "color": "#be123c",
+            },
             "text-to-audio": {"name": "Text to Audio", "color": "#f97316"},
+            "text-to-waveform": {"name": "Text to Waveform", "color": "#fb923c"},
             "time-series-classification": {"name": "Time Series Classification", "color": "#84cc16"},
             "time-series-regression": {"name": "Time Series Regression", "color": "#65a30d"},
             "time-series-prediction": {"name": "Time Series Prediction", "color": "#4d7c0f"},
@@ -604,7 +637,8 @@ def create_timeline_template():
         body {
             font-family: 'Inter', system-ui, -apple-system, sans-serif;
             background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
-            min-height: 100vh;
+            height: 100vh;
+            overflow: hidden;
             color: #333;
             display: flex;
             flex-direction: column;
@@ -1198,7 +1232,7 @@ def create_timeline_template():
             flex: 1;
             display: flex;
             flex-direction: column;
-            height: calc(100vh - 110px);
+            min-height: 400px;
             transition: all 0.3s ease;
         }
 
@@ -1409,23 +1443,22 @@ def create_timeline_template():
             position: absolute;
             top: 0;
             bottom: 0;
-            width: 2px;
-            background: #9ca3af;
-            opacity: 0.8;
+            width: 1px;
+            border-left: 1px dashed #9ca3af;
+            opacity: 0.5;
             pointer-events: none;
-            z-index: 1; /* In background, below everything */
             transition: all 0.3s ease;
         }
 
         /* Dark mode date markers */
         [data-theme="dark"] .date-marker {
-            background: #6b7280;
-            opacity: 0.9;
+            border-left-color: #6b7280;
+            opacity: 0.6;
         }
 
         .date-label {
             position: absolute;
-            top: 20px; /* Near the top of timeline viewport */
+            top: 10px; /* Near the top of timeline viewport */
             left: 8px; /* Offset to the right of the line */
             font-size: 0.75rem;
             color: #6b7280;
@@ -1437,7 +1470,7 @@ def create_timeline_template():
             border: 1px solid rgba(156, 163, 175, 0.4);
             box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
             white-space: nowrap;
-            z-index: 2; /* Just above the dotted line but below everything else */
+            z-index: 9; /* Just above the dotted line but below cards */
             backdrop-filter: blur(4px);
             transition: all 0.3s ease;
         }
@@ -1451,15 +1484,15 @@ def create_timeline_template():
         }
 
         .date-marker.year {
-            opacity: 0.9;
-            background: #6b7280;
-            width: 3px;
+            opacity: 0.7;
+            border-left: 1px dashed #6b7280;
+            width: 1px;
         }
 
         /* Dark mode year markers */
         [data-theme="dark"] .date-marker.year {
-            background: #9ca3af;
-            opacity: 1.0;
+            border-left-color: #9ca3af;
+            opacity: 0.8;
         }
 
         .date-marker.year .date-label {
@@ -2203,6 +2236,76 @@ def create_timeline_template():
         const maxZoom = 3.0; // Maximum zoom (300%)
         let taskData = {}; // Store task data for easy lookup
 
+        // Function to calculate dynamic card spacing based on available height
+        function getCardSpacing() {
+            const timelineWrapper = document.querySelector('.timeline-wrapper');
+            if (!timelineWrapper) return { above: [60, 120, 180], below: [60, 120, 180] };
+
+            const availableHeight = timelineWrapper.clientHeight;
+            const centerLineOffset = availableHeight / 2;
+            const usableHeight = Math.max(centerLineOffset - 80, 80); // Leave margin for card height
+
+            // Calculate spacing between levels (3 levels each side)
+            // Use the minimum of: default spacing OR available space divided by 3
+            const levelSpacing = Math.max(40, Math.min(60, usableHeight / 3)); // At least 40px, max 60px
+
+            return {
+                above: [
+                    levelSpacing,
+                    levelSpacing * 2,
+                    levelSpacing * 3
+                ],
+                below: [
+                    levelSpacing,
+                    levelSpacing * 2,
+                    levelSpacing * 3
+                ]
+            };
+        }
+
+        // Efficiently update card positions without re-rendering
+        function updateCardPositions() {
+            const cardSpacing = getCardSpacing();
+            const timeline = document.getElementById('timeline');
+            if (!timeline) return;
+
+            // Update all timeline items
+            const items = timeline.querySelectorAll('.timeline-item');
+            items.forEach(item => {
+                const positionClass = item.className.match(/(above|below)-(\\d)/);
+                if (!positionClass) return;
+
+                const isAbove = positionClass[1] === 'above';
+                const level = parseInt(positionClass[2]) - 1; // 0, 1, or 2
+
+                // Update connector height
+                const connector = item.querySelector('.timeline-connector');
+                if (connector) {
+                    if (isAbove) {
+                        connector.style.height = cardSpacing.above[level] + 'px';
+                    } else {
+                        connector.style.height = cardSpacing.below[level] + 'px';
+                    }
+                }
+
+                // Update label position
+                const label = item.querySelector('.timeline-label');
+                if (label) {
+                    if (isAbove) {
+                        const dynamicBottom = cardSpacing.above[level] + 'px';
+                        label.style.bottom = dynamicBottom;
+                        label.style.top = '';
+                        label.dataset.dynamicBottom = dynamicBottom;
+                    } else {
+                        const dynamicTop = cardSpacing.below[level] + 'px';
+                        label.style.top = dynamicTop;
+                        label.style.bottom = '';
+                        label.dataset.dynamicTop = dynamicTop;
+                    }
+                }
+            });
+        }
+
         // Theme management
         let currentTheme = 'light';
 
@@ -2433,6 +2536,9 @@ def create_timeline_template():
             // Add date markers before adding models
             addDateMarkers(sortedModels, actualSpacing);
 
+            // Get dynamic card spacing based on available height
+            const cardSpacing = getCardSpacing();
+
             // Create wave patterns for stacking - simpler pattern
             const abovePattern = [1, 2, 3]; // 3 levels above
             const belowPattern = [1, 2, 3]; // 3 levels below
@@ -2461,6 +2567,19 @@ def create_timeline_template():
                 item.className = `timeline-item ${positionClass}`;
                 item.style.left = position + 'px';
 
+                // Apply dynamic positioning based on available height
+                const levelIndex = parseInt(positionClass.split('-')[1]) - 1; // Get 0, 1, or 2
+                const isAbove = positionClass.includes('above');
+
+                // Store the dynamic spacing as data attributes for later use
+                if (isAbove) {
+                    item.dataset.dynamicBottom = cardSpacing.above[levelIndex] + 'px';
+                    item.dataset.dynamicHeight = cardSpacing.above[levelIndex] + 'px';
+                } else {
+                    item.dataset.dynamicTop = cardSpacing.below[levelIndex] + 'px';
+                    item.dataset.dynamicHeight = cardSpacing.below[levelIndex] + 'px';
+                }
+
                 const dot = document.createElement('div');
                 dot.className = 'timeline-dot';
 
@@ -2480,12 +2599,31 @@ def create_timeline_template():
 
                 const connector = document.createElement('div');
                 connector.className = 'timeline-connector';
+                // Apply dynamic height to connector
+                if (isAbove) {
+                    connector.style.bottom = '9px';
+                    connector.style.height = cardSpacing.above[levelIndex] + 'px';
+                } else {
+                    connector.style.top = '9px';
+                    connector.style.height = cardSpacing.below[levelIndex] + 'px';
+                }
 
                 const label = document.createElement('div');
                 label.className = 'timeline-label';
                 label.style.borderLeftColor = model.modality_color || '#8B5CF6';
                 // Set the modality color as a CSS custom property for hover effects
                 label.style.setProperty('--modality-color', model.modality_color || '#8B5CF6');
+                // Apply dynamic positioning to label and store for later restoration
+                if (isAbove) {
+                    const dynamicBottom = cardSpacing.above[levelIndex] + 'px';
+                    label.style.bottom = dynamicBottom;
+                    label.dataset.dynamicBottom = dynamicBottom;
+                } else {
+                    const dynamicTop = cardSpacing.below[levelIndex] + 'px';
+                    label.style.top = dynamicTop;
+                    label.dataset.dynamicTop = dynamicTop;
+                }
+                label.dataset.positionClass = positionClass; // Store for collapse restoration
 
                 // Ensure the model name is always displayed
                 const modelName = model.display_name || model.model_name || 'Unknown Model';
@@ -2529,10 +2667,17 @@ def create_timeline_template():
                                     <div class="timeline-date">${otherLabel.dataset.modelDate}</div>
                                 `;
 
-                                // Reset positioning after content change
+                                // Restore dynamic positioning after content change
                                 setTimeout(() => {
-                                    otherLabel.style.top = '';
-                                    otherLabel.style.bottom = '';
+                                    // Restore the dynamically calculated position
+                                    const isAbove = otherLabel.dataset.positionClass && otherLabel.dataset.positionClass.includes('above');
+                                    if (isAbove && otherLabel.dataset.dynamicBottom) {
+                                        otherLabel.style.bottom = otherLabel.dataset.dynamicBottom;
+                                        otherLabel.style.top = '';
+                                    } else if (!isAbove && otherLabel.dataset.dynamicTop) {
+                                        otherLabel.style.top = otherLabel.dataset.dynamicTop;
+                                        otherLabel.style.bottom = '';
+                                    }
                                     otherLabel.style.left = '';
                                     otherLabel.style.right = '';
                                     otherLabel.style.transform = 'translateX(-50%)';
@@ -2659,10 +2804,17 @@ def create_timeline_template():
                                 <div class="timeline-date">${label.dataset.modelDate}</div>
                             `;
 
-                            // Reset positioning after content change
+                            // Restore dynamic positioning after content change
                             setTimeout(() => {
-                                label.style.top = '';
-                                label.style.bottom = '';
+                                // Restore the dynamically calculated position
+                                const isAbove = label.dataset.positionClass && label.dataset.positionClass.includes('above');
+                                if (isAbove && label.dataset.dynamicBottom) {
+                                    label.style.bottom = label.dataset.dynamicBottom;
+                                    label.style.top = '';
+                                } else if (!isAbove && label.dataset.dynamicTop) {
+                                    label.style.top = label.dataset.dynamicTop;
+                                    label.style.bottom = '';
+                                }
                                 label.style.left = '';
                                 label.style.right = '';
                                 // Reset transform: depends on current position
@@ -2816,11 +2968,8 @@ def create_timeline_template():
                     // Check if the marker date falls between these two models
                     // The marker should appear where the time period actually starts
                     if (currentModelDate < currentDate && currentDate <= nextModelDate) {
-                        // Position the marker between these two models, then move left by half segment
-                        const currentPos = i * spacing + 100;
-                        const nextPos = (i + 1) * spacing + 100;
-                        const midpoint = (currentPos + nextPos) / 2;
-                        boundaryPosition = midpoint - (spacing / 2); // Move left by half segment length
+                        // Position the marker between these two models
+                        boundaryPosition = (i + 1) * spacing + 68;
                         break;
                     }
                 }
@@ -2839,45 +2988,64 @@ def create_timeline_template():
                 const position = boundaryPosition;
 
                 // Create marker only if it's within visible range and not too close to adjacent markers
+                // Only check VS the last existing marker, since markers are added more recent each time.
                 const existingMarkers = timeline.querySelectorAll('.date-marker');
-                let tooClose = false;
-                existingMarkers.forEach(existing => {
-                    const existingPos = parseFloat(existing.style.left);
-                    if (Math.abs(existingPos - position) < 120) { // Minimum spacing between markers
-                        tooClose = true;
+                let shouldRemovePrevious = false;
+                let lastMarker = null;
+                let lastPos = null;
+
+                if (existingMarkers.length > 0) {
+                    lastMarker = existingMarkers[existingMarkers.length - 1];
+                    lastPos = parseFloat(lastMarker.style.left);
+                    if (Math.abs(position - lastPos) < 60) { // Minimum spacing between markers
+                        shouldRemovePrevious = true;
                     }
-                });
+                }
 
-                if (!tooClose) {
-                    const marker = document.createElement('div');
-                    marker.className = `date-marker ${markerType}`;
-                    marker.style.left = position + 'px';
-
-                    // Create label
-                    const label = document.createElement('div');
-                    label.className = 'date-label';
-                    label.textContent = format(currentDate);
-                    marker.appendChild(label);
-
-                    // Create vertical line
-                    const line = document.createElement('div');
-                    line.style.position = 'absolute';
-                    line.style.top = '0px';
-                    line.style.bottom = '0px';
-                    line.style.left = '0px';
-                    line.style.width = '2px';
-                    line.style.background = '#9ca3af';
-                    line.style.opacity = '0.6';
-                    line.style.zIndex = '1';
-                    if (markerType === 'year') {
-                        line.style.width = '3px';
-                        line.style.background = '#6b7280';
-                        line.style.opacity = '0.8';
+                if (shouldRemovePrevious && lastMarker) {
+                    lastMarker.remove();
+                    // Also remove the label associated with that marker (next sibling in .date-label)
+                    const timelineLabels = timeline.querySelectorAll('.date-label');
+                    // Find the label with the left matching the previous marker
+                    for (let i = 0; i < timelineLabels.length; i++) {
+                        const lbl = timelineLabels[i];
+                        // label.style.left is like "123px"
+                        if (Math.abs(parseFloat(lbl.style.left) - (lastPos + 8)) < 2) { // allow for rounding errors
+                            lbl.remove();
+                            break;
+                        }
                     }
-                    marker.appendChild(line);
+                }
 
-                    timeline.appendChild(marker);
+                // Create marker
+                const marker = document.createElement('div');
+                marker.className = `date-marker ${markerType}`;
+                marker.style.left = position + 'px';
+
+                // Create vertical line (dashed)
+                const line = document.createElement('div');
+                line.style.position = 'absolute';
+                line.style.top = '0px';
+                line.style.bottom = '0px';
+                line.style.left = '0px';
+                line.style.width = '1px';
+                line.style.borderLeft = '1px dashed #9ca3af';
+                line.style.opacity = '0.5';
+                line.style.zIndex = '0';
+                if (markerType === 'year') {
+                    line.style.borderLeft = '1px dashed #6b7280';
+                    line.style.opacity = '0.7';
                 }
+                marker.appendChild(line);
+
+                // Create label (as a separate sibling, not a child)
+                const label = document.createElement('div');
+                label.className = 'date-label';
+                label.textContent = format(currentDate);
+                label.style.left = position + 8 + 'px'; // offset similar to CSS left: 8px for label
+
+                timeline.appendChild(marker);
+                timeline.appendChild(label);
 
                 // Move to next marker
                 currentDate.setMonth(currentDate.getMonth() + increment);
@@ -3161,6 +3329,7 @@ def create_timeline_template():
                 "question-answering": "#c084fc",
                 "fill-mask": "#d8b4fe",
                 "text2text-generation": "#e879f9",
+                "multiple-choice": "#c026d3",
 
                 "image-classification": "#06b6d4",
                 "object-detection": "#0891b2",
@@ -3169,6 +3338,10 @@ def create_timeline_template():
                 "instance-segmentation": "#164e63",
                 "universal-segmentation": "#1e40af",
                 "depth-estimation": "#1d4ed8",
+                "masked-image-modeling": "#7c3aed",
+                "causal-image-modeling": "#6d28d9",
+                "keypoint-detection": "#4338ca",
+                "keypoint-matching": "#3730a3",
                 "zero-shot-image-classification": "#2563eb",
                 "zero-shot-object-detection": "#3b82f6",
                 "image-to-image": "#60a5fa",
@@ -3182,7 +3355,12 @@ def create_timeline_template():
 
                 "video-classification": "#dc2626",
                 "audio-classification": "#ea580c",
+                "audio-frame-classification": "#fb923c",
+                "audio-xvector": "#fdba74",
+                "automatic-speech-recognition": "#e11d48",
+                "connectionist-temporal-classification": "#be123c",
                 "text-to-audio": "#f97316",
+                "text-to-waveform": "#fb923c",
 
                 "time-series-classification": "#84cc16",
                 "time-series-regression": "#65a30d",
@@ -3225,7 +3403,7 @@ def create_timeline_template():
                     checkbox.type = 'checkbox';
                     checkbox.value = modality.key;
                     checkbox.id = `modality-${modality.key}`;
-                    checkbox.checked = true; // All modalities selected by default
+                    checkbox.checked = false; // All modalities unchecked by default
 
                     const label = document.createElement('label');
                     label.htmlFor = `modality-${modality.key}`;
@@ -3244,8 +3422,7 @@ def create_timeline_template():
                         loadTimeline();
                     });
 
-                    // Set initial state
-                    checkboxContainer.classList.add('checked');
+                    // Set initial state (unchecked, so no 'checked' class)
 
                     modalityFilters.appendChild(checkboxContainer);
                 });
@@ -3255,11 +3432,19 @@ def create_timeline_template():
             }
         }
 
-        // Window resize handler
+        // Window resize handler - use efficient position update
+        let resizeTimeout;
         window.addEventListener('resize', () => {
-            if (currentModels.length > 0) {
-                renderTimeline(currentModels);
-            }
+            // Update immediately for responsiveness
+            updateCardPositions();
+
+            // Debounce full re-render for final adjustment
+            clearTimeout(resizeTimeout);
+            resizeTimeout = setTimeout(() => {
+                if (currentModels.length > 0) {
+                    renderTimeline(currentModels, true);
+                }
+            }, 250);
         });
 
         document.addEventListener('DOMContentLoaded', async () => {
@@ -3304,10 +3489,17 @@ def create_timeline_template():
                             <div class="timeline-date">${label.dataset.modelDate}</div>
                         `;
 
-                        // Reset positioning after content change
+                        // Restore dynamic positioning after content change
                         setTimeout(() => {
-                            label.style.top = '';
-                            label.style.bottom = '';
+                            // Restore the dynamically calculated position
+                            const isAbove = label.dataset.positionClass && label.dataset.positionClass.includes('above');
+                            if (isAbove && label.dataset.dynamicBottom) {
+                                label.style.bottom = label.dataset.dynamicBottom;
+                                label.style.top = '';
+                            } else if (!isAbove && label.dataset.dynamicTop) {
+                                label.style.top = label.dataset.dynamicTop;
+                                label.style.bottom = '';
+                            }
                             label.style.transform = 'translateX(-50%)';
                             label.parentElement.style.zIndex = '';
                         }, 50);
@@ -3364,6 +3556,27 @@ def create_timeline_template():
                 btn.textContent = '▸';
                 localStorage.setItem('filtersCollapsed', 'true');
             }
+
+            // Update card positions immediately
+            updateCardPositions();
+
+            // Continue updating during animation for smooth transition
+            const startTime = performance.now();
+            const animationDuration = 250; // Match CSS transition time
+
+            const animatePositions = (currentTime) => {
+                const elapsed = currentTime - startTime;
+
+                if (elapsed < animationDuration) {
+                    updateCardPositions();
+                    requestAnimationFrame(animatePositions);
+                } else {
+                    // Final update after animation completes
+                    updateCardPositions();
+                }
+            };
+
+            requestAnimationFrame(animatePositions);
         }
     </script>
 </body>