update app

app.py

@@ -7,7 +7,6 @@ import glob
 import os
 import re
 import sys
-import threading
 import time
 import webbrowser
 from datetime import datetime
@@ -906,13 +905,15 @@ def create_timeline_template():
         }
 
         .header {
-            background: rgba(255, 255, 255, 0.95);
+            background: rgba(255, 255, 255, 0.9);
             backdrop-filter: blur(10px);
-            padding: 0.5rem 1.5rem;
+            padding: 0.8rem 1.5rem;
             box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.5);
             position: sticky;
             top: 0;
             z-index: 100;
+            margin: 0 0 0.3rem 0;
         }
 
         .header h1 {
@@ -928,17 +929,67 @@ def create_timeline_template():
             margin: 0;
         }
 
+        .controls-wrapper {
+            margin: 0.3rem 2rem;
+        }
+
+        .controls-toggle {
+            position: absolute;
+            left: 8px;
+            right: 8px;
+            top: 8px;
+            z-index: 2;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 28px;
+            height: 28px;
+            font-size: 0.9rem;
+            border-radius: 999px;
+            border: 1px solid #e5e7eb;
+            background: #ffffff;
+            color: #374151;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+        }
+
+        .controls-toggle:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 14px rgba(0,0,0,0.1);
+        }
+
         .controls {
             background: rgba(255, 255, 255, 0.9);
             backdrop-filter: blur(10px);
             padding: 0.4rem 1rem;
-            margin: 0.3rem 2rem;
             border-radius: 8px;
             box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
             display: flex;
-            gap: 0.5rem;
+            gap: 0.8rem;
             align-items: start;
-            flex-wrap: wrap;
+            flex-wrap: nowrap;
+            overflow: hidden;
+            transition: max-height 0.25s ease, opacity 0.2s ease;
+            position: relative;
+            padding-left: 2.4rem; /* space for the left toggle button */
+            max-height: none; /* will be set dynamically */
+        }
+
+        .controls.collapsed {
+            opacity: 1;
+        }
+
+        /* Blur fade to hint there is more content when collapsed */
+        .controls.collapsed::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            height: 26px;
+            background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.94) 60%, rgba(255,255,255,1));
+            pointer-events: none;
         }
 
         .input-group {
@@ -970,8 +1021,9 @@ def create_timeline_template():
         }
 
         .modality-group {
-            flex: 1.5;
-            min-width: 200px;
+            flex: 22%;
+            min-width: 220px;
+            padding-left: 8px; /* add small spacing from collapse arrow */
         }
 
         .modality-filters {
@@ -988,8 +1040,8 @@ def create_timeline_template():
         }
 
         .task-group {
-            flex: 4;
-            min-width: 400px;
+            flex: 78%;
+            min-width: 520px;
         }
 
         .task-filters {
@@ -1499,10 +1551,10 @@ def create_timeline_template():
 
         /* Expanded card styles */
         .timeline-label.expanded {
-            max-width: 450px !important;
-            min-width: 350px !important;
-            width: 450px !important;
-            min-height: 300px !important;
+            max-width: 500px !important;
+            min-width: 400px !important;
+            width: 500px !important;
+            min-height: 250px !important;
             text-align: left;
             z-index: 9999 !important; /* Much higher than all other elements */
             transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
@@ -1533,6 +1585,9 @@ def create_timeline_template():
             color: #1f2937;
             border-bottom: 1px solid rgba(0, 0, 0, 0.1);
             padding-bottom: 0.3rem;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
 
         .timeline-label .model-description {
@@ -1786,8 +1841,8 @@ def create_timeline_template():
 
         .date-input-group {
             display: flex;
-            flex-direction: column;
-            gap: 0.3rem;
+            flex-direction: row;
+            gap: 0.5rem;
             align-items: center;
         }
 
@@ -1795,7 +1850,7 @@ def create_timeline_template():
             font-size: 0.7rem;
             color: #4a5568;
             font-weight: 600;
-            text-align: center;
+            white-space: nowrap;
         }
 
         .date-input-group input {
@@ -1895,10 +1950,12 @@ def create_timeline_template():
 <body>
     <div class="header">
         <h1>🤗 Transformers Models Timeline</h1>
-        <p>Interactive timeline showing when models were added to the Hugging Face Transformers library</p>
+        <p>Interactive timeline to explore models supported by the Hugging Face Transformers library!</p>
     </div>
 
-    <div class="controls">
+    <div class="controls-wrapper">
+        <div class="controls" id="filtersPanel">
+            <button id="toggleFilters" class="controls-toggle" type="button" aria-label="Toggle filters" onclick="toggleFilters()">▾</button>
         <div class="input-group modality-group">
             <label>Modalities</label>
             <div class="modality-filters" id="modalityFilters">
@@ -1927,6 +1984,7 @@ def create_timeline_template():
                 </button>
             </div>
         </div>
+        </div>
     </div>
 
     <div class="timeline-container">
@@ -1977,6 +2035,7 @@ def create_timeline_template():
         let timelineOffset = 0;
         let timelineWidth = 0;
         let containerWidth = 0;
+        let dateInitialized = false; // initialize date inputs once from data
         let isDragging = false;
         let startX = 0;
         let startOffset = 0;
@@ -2018,6 +2077,31 @@ def create_timeline_template():
                 allModels = data.models;
                 currentModels = data.models;
 
+                // Initialize date inputs to min/max once (based on current data)
+                if (!dateInitialized && currentModels && currentModels.length > 0) {
+                    const validDates = currentModels
+                        .map(m => m.transformers_date)
+                        .filter(d => !!d)
+                        .sort();
+                    if (validDates.length > 0) {
+                        const minDate = validDates[0];
+                        const maxDate = validDates[validDates.length - 1];
+                        const startEl = document.getElementById('startDate');
+                        const endEl = document.getElementById('endDate');
+                        if (startEl) {
+                            startEl.min = minDate;
+                            startEl.max = maxDate;
+                            if (!startEl.value) startEl.value = minDate;
+                        }
+                        if (endEl) {
+                            endEl.min = minDate;
+                            endEl.max = maxDate;
+                            if (!endEl.value) endEl.value = maxDate;
+                        }
+                        dateInitialized = true;
+                    }
+                }
+
                 updateStats(data.total_count, data.filtered_count);
                 renderTimeline(currentModels);
 
@@ -2877,10 +2961,72 @@ def create_timeline_template():
                 if (!e.target.closest('.timeline-label')) {
                     document.querySelectorAll('.timeline-label.expanded').forEach(label => {
                         label.classList.remove('expanded');
+
+                        // Restore compact content
+                        setTimeout(() => {
+                            label.innerHTML = `
+                                <div class="model-title">${label.dataset.modelName}</div>
+                                <div class="timeline-date">${label.dataset.modelDate}</div>
+                            `;
+
+                            // Reset positioning after content change
+                            setTimeout(() => {
+                                label.style.top = '';
+                                label.style.bottom = '';
+                                label.parentElement.style.zIndex = '';
+                            }, 50);
+                        }, 50);
                     });
                 }
             });
+
+            // Initialize filters collapsible panel
+            initFiltersCollapsible();
         });
+
+        function initFiltersCollapsible() {
+            const panel = document.getElementById('filtersPanel');
+            const btn = document.getElementById('toggleFilters');
+            if (!panel || !btn) return;
+
+            // Restore persisted state, default to collapsed
+            const saved = localStorage.getItem('filtersCollapsed');
+            if (saved === 'false') {
+                // Set natural max-height to allow animation on first collapse
+                panel.style.maxHeight = panel.scrollHeight + 'px';
+                btn.textContent = '▾';
+            } else {
+                // set partial height (~2 rows) when collapsed (default state)
+                const partial = 74; // pixels to show when collapsed
+                panel.style.maxHeight = partial + 'px';
+                panel.classList.add('collapsed');
+                btn.textContent = '▸';
+            }
+        }
+
+        function toggleFilters() {
+            const panel = document.getElementById('filtersPanel');
+            const btn = document.getElementById('toggleFilters');
+            if (!panel || !btn) return;
+
+            const isCollapsed = panel.classList.contains('collapsed');
+            if (isCollapsed) {
+                // expand to full content height
+                panel.classList.remove('collapsed');
+                panel.style.maxHeight = panel.scrollHeight + 'px';
+                btn.textContent = '▾';
+                localStorage.setItem('filtersCollapsed', 'false');
+            } else {
+                // collapse to partial height (show a hint of content)
+                panel.style.maxHeight = panel.scrollHeight + 'px'; // set current height
+                void panel.offsetHeight; // reflow
+                panel.classList.add('collapsed');
+                const partial = 74; // pixels to show when collapsed
+                panel.style.maxHeight = partial + 'px';
+                btn.textContent = '▸';
+                localStorage.setItem('filtersCollapsed', 'true');
+            }
+        }
     </script>
 </body>
 </html>"""
@@ -2892,7 +3038,7 @@ def create_timeline_template():
 def open_browser():
     """Open the browser after a short delay."""
     time.sleep(1.5)
-    webbrowser.open("http://localhost:7860")
+    webbrowser.open("http://localhost:5000")
 
 
 def main():
@@ -2916,14 +3062,6 @@ def main():
     else:
         print(f"✅ Found {len(models)} models with release dates")
 
-    print("\n🚀 Starting timeline server...")
-    print("📱 Opening in browser...")
-    print("🌐 Access at: http://localhost:7860")
-    print("🛑 Press Ctrl+C to stop")
-
-    # Start browser opening in background
-    threading.Thread(target=open_browser, daemon=True).start()
-
     # Run Flask app
     try:
         app.run(host="0.0.0.0", port=7860, debug=False)