initial commit

.dockerignore

@@ -0,0 +1,44 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Git
+.git/
+.gitignore
+
+# Documentation
+*.md
+!README.md
+
+# Tests
+tests/
+test_*.py
+*_test.py
+
+# Logs
+*.log
+logs/
+
+# Temporary files
+*.tmp
+*.temp
+.cache/

.gitattributes

@@ -0,0 +1,35 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

.github/workflows/main.yml

@@ -0,0 +1,20 @@
+name: Sync to Hugging Face hub
+on:
+  push:
+    branches: [main]
+
+  # to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+jobs:
+  sync-to-hub:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          lfs: true
+      - name: Push to hub
+        env:
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+        run: git push --force https://halbers:$HF_TOKEN@huggingface.co/spaces/DAG-UPB/TS-Arena main

.gitignore

@@ -0,0 +1,10 @@
+# Build local
+docker-compose.yml
+venv-ts-frontend/
+.streamlit/
+# Secrets
+.env
+
+# Other
+.DS_Store
+*/__pycache__/

Dockerfile

@@ -0,0 +1,18 @@
+FROM python:3.12-slim
+
+WORKDIR /app
+
+RUN apt-get update && apt-get install -y \
+    gcc \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+EXPOSE 8501
+
+HEALTHCHECK CMD curl --fail http://localhost:8501/_stcore/health
+
+ENTRYPOINT ["streamlit", "run", "app.py", "--server.port=8501", "--server.address=0.0.0.0"]

README.md

@@ -0,0 +1,74 @@
+---
+title: TS Arena
+emoji: 🚀
+colorFrom: red
+colorTo: red
+sdk: docker
+app_port: 8501
+tags:
+- streamlit
+models:
+- google/timesfm-2.0-500m-pytorch
+- Maple728/TimeMoE-50M
+- Salesforce/moirai-1.1-R-large
+- thuml/sundial-base-128m
+
+pinned: false
+short_description: Time Series Forecasting Arena
+---
+
+# TS-Arena Streamlit Dashboard
+
+This is a Streamlit version of the TS-Arena Challenge Dashboard.
+
+## Installation
+
+1. Install dependencies:
+```bash
+pip install -r requirements.txt
+```
+
+2. Set up environment variables:
+```bash
+export X_API_URL="your_api_url_here"
+export X_API_KEY="your_api_key_here"
+```
+
+Or create a `.env` file with:
+```
+X_API_URL=your_api_url_here
+X_API_KEY=your_api_key_here
+```
+
+## Running the App
+
+```bash
+streamlit run app.py
+```
+
+The app will be available at `http://localhost:8501`
+
+## Features
+
+- **Model Ranking**: View and filter model rankings based on performance metrics (Tab 1)
+- **Challenge Visualization**: Select and visualize active and completed challenges (Tab 2)
+- **Time Series Selection**: Choose specific time series to analyze within a challenge
+- **Interactive Plots**: Plotly charts with zoom, pan, and hover features
+- **Upcoming Challenges**: View upcoming challenges in the sidebar
+- **Add Model**: Information on how to participate and register your models (Tab 3)
+
+## Differences from Gradio Version
+
+Streamlit has some differences in behavior compared to Gradio:
+
+1. **State Management**: Streamlit uses session state and reruns the entire script on interaction
+2. **Layout**: Streamlit uses `st.sidebar` for the sidebar and columns for layout
+3. **Interactivity**: Dropdowns and multiselect widgets automatically trigger reruns
+4. **Tabs**: Uses `st.tabs()` instead of Gradio's `gr.Tab()`
+
+## File Structure
+
+- `app.py` - Main Streamlit application
+- `utils/api_client.py` - API client for fetching challenge data
+- `utils/utils.py` - Utility functions for parsing durations
+- `requirements.txt` - Python dependencies

app.py

@@ -0,0 +1,185 @@
+from components.challenges_tab_component import render_challenges_tab_component
+from components.filter_component import render_filter_component, set_rankings_session_state
+import streamlit as st
+import pandas as pd
+import sys
+import os
+
+from components.challenge_list_component import render_challenge_list_component
+
+# Add src to path for imports
+sys.path.insert(0, os.path.join(os.path.dirname(__file__), 'src'))
+from utils.api_client import ChallengeStatus, DashboardAPIClient
+
+# Get API URL from environment variable
+api_url = os.getenv('X_API_URL', '')
+if api_url:
+    os.environ['DASHBOARD_API_URL'] = api_url
+    print(f"Loaded API URL from X_API_URL: {api_url}", file=sys.stderr)
+else:
+    print("Warning: X_API_URL environment variable not set, using default", file=sys.stderr)
+
+# Get API key from environment variable
+api_key = os.getenv('X_API_KEY', '')
+if api_key:
+    os.environ['DASHBOARD_API_KEY'] = api_key
+    print(f"Loaded API key from X_API_KEY environment variable", file=sys.stderr)
+else:
+    print("Warning: X_API_KEY environment variable not set", file=sys.stderr)
+
+# Initialize API client
+api_client = DashboardAPIClient()
+
+# Page config
+st.set_page_config(
+    page_title="TS-Arena Challenge Dashboard",
+    page_icon="🏟️",
+    layout="wide",
+    initial_sidebar_state="expanded"
+)
+
+# Custom CSS to make sidebar wider
+st.markdown("""
+    <style>
+    [data-testid="stSidebar"] {
+        min-width: 400px;
+        max-width: 400px;
+    }
+    .challenge-list-container {
+        max-height: 45vh;
+        overflow-y: auto;
+        overflow-x: hidden;
+        padding-right: 5px;
+    }
+    .upcoming-list-container {
+        max-height: 45vh;
+        overflow-y: auto;
+        overflow-x: hidden;
+        padding-right: 5px;
+    }
+    /* Custom scrollbar styling */
+    .challenge-list-container::-webkit-scrollbar,
+    .upcoming-list-container::-webkit-scrollbar {
+        width: 8px;
+    }
+    .challenge-list-container::-webkit-scrollbar-track,
+    .upcoming-list-container::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        border-radius: 4px;
+    }
+    .challenge-list-container::-webkit-scrollbar-thumb,
+    .upcoming-list-container::-webkit-scrollbar-thumb {
+        background: #888;
+        border-radius: 4px;
+    }
+    .challenge-list-container::-webkit-scrollbar-thumb:hover,
+    .upcoming-list-container::-webkit-scrollbar-thumb:hover {
+        background: #555;
+    }
+    </style>
+""", unsafe_allow_html=True)
+
+
+# Main app
+st.title("🏟️ TS-Arena – The Live-Forecasting Benchmark (Prototype)")
+
+# Sidebar for challenge list
+with st.sidebar:
+    st.header("🗓️ Upcoming")
+    upcoming_challenges = api_client.list_upcoming_challenges()
+    # Show only newest 5 challenges to reduce loading time 
+    show_first = 5
+    challenges_display = upcoming_challenges[:show_first]
+    render_challenge_list_component(challenges=challenges_display, api_client=api_client, challange_list_type="upcoming", show_first=5)
+
+# Create tabs
+tab1, tab2, tab3 = st.tabs(["Model Ranking", "Challenges", "Add Model"])
+
+with tab1:
+    with st.spinner("Loading model ranking..."):
+        render_filter_component(api_client=api_client, filter_type="model_ranking")
+        st.markdown("---")
+        if st.session_state.get('filtered_rankings') is None:
+            set_rankings_session_state(api_client=api_client)
+            st.rerun()
+        # Main content area
+        st.header("🏆 Model Ranking")
+        
+        # Display rankings table from session state if available
+        filtered_rankings = st.session_state.get('filtered_rankings', None)
+        if filtered_rankings:
+            df_rankings = pd.concat([pd.DataFrame(df) for df in filtered_rankings], ignore_index=True)
+            tab_headers = list(df_rankings['time_ranges'].unique())
+            tabs = st.tabs(tab_headers)
+            for unique_timerange, tab in zip(tab_headers, tabs):
+                filtered_by_time = df_rankings[df_rankings['time_ranges'] == unique_timerange].reset_index(drop=True)
+                with tab:
+                    st.dataframe(filtered_by_time, use_container_width=True)
+        else:
+            st.info("No models match the selected filters")
+
+with tab2:
+    render_challenges_tab_component(api_client=api_client)
+
+with tab3:
+    st.header("🚀 Join the TS-Arena Benchmark!")
+    
+    st.markdown("""
+    Ready to test your forecasting models against the best? Participate actively in our benchmark challenges! 
+    Simply send us an email and we'll provide you with an API key to get started.
+    
+    ### How it works:
+    
+    Email us with your organization name and we'll send you an API key. 
+    With this key, you can register your own models and officially participate in active competitions 
+    once your model is registered.
+    """)
+    
+    col1, col2 = st.columns(2)
+    
+    with col1:
+        st.markdown("""
+        <a href="mailto:DataAnalytics@wiwi.uni-paderborn.de?subject=TS-Arena API Key Request&body=Hello,%0D%0A%0D%0AI would like to participate in the TS-Arena benchmark.%0D%0A%0D%0AOrganization: [Please specify your organization]%0D%0A%0D%0ABest regards" 
+           style="display: inline-block; padding: 10px 20px; background-color: #667eea; color: white; text-decoration: none; border-radius: 5px; font-weight: bold;">
+            📧 Request API Key
+        </a>
+        """, unsafe_allow_html=True)
+    
+    with col2:
+        st.markdown("""
+        <a href="mailto:DataAnalytics@wiwi.uni-paderborn.de?subject=TS-Arena Questions&body=Hello,%0D%0A%0D%0AI have questions about participating in the TS-Arena benchmark.%0D%0A%0D%0ABest regards" 
+           style="display: inline-block; padding: 10px 20px; background-color: #764ba2; color: white; text-decoration: none; border-radius: 5px; font-weight: bold;">
+            ❓ Ask Questions
+        </a>
+        """, unsafe_allow_html=True)
+    
+    st.markdown("---")
+    
+    st.markdown("""
+    ### What you get:
+    
+    - 🔑 **Personal API Key** for model registration and submission
+    - 📊 **Access to benchmark datasets** and challenge specifications
+    - 🏆 **Rankings and leaderboards** showing your model's performance
+    - 📈 **Detailed evaluation metrics** across multiple time series
+    - 🤝 **Community support** from fellow forecasting researchers
+    
+    ### Requirements:
+    
+    - Valid organization or affiliation
+    - Commitment to fair participation
+    - Adherence to benchmark guidelines
+    
+    For more information, please contact us via email!
+                
+    ### Help Us Validate Your Model Implementation:
+    Transparency is at the heart of our live benchmarking project. We have integrated a wide range of state-of-the-art time series forecasting models to provide the community with real-time performance insights.
+    To ensure that every model is evaluated under optimal conditions, **we invite the original authors and maintainers to review our implementations.** If you are a developer of one of the featured models, we would value your feedback on:
+    
+    - Model configuration and hyperparameters.
+    - Data preprocessing steps.
+    - Implementation-specific nuances.
+                
+    Our goal is to represent your work as accurately as possible. Please visit our [GitHub Repository](https://github.com/DAG-UPB) to review the code or open an issue for any suggested improvements.
+    """)
+    # TODO: Change link to GitHub Repository

components/challange_card_component.py

@@ -0,0 +1,196 @@
+import sys
+import streamlit as st
+import time
+from datetime import datetime, timezone
+
+from utils.api_client import ChallengeStatus
+from utils.utils import duration_to_max_unit, parse_iso8601_duration, to_local
+
+@st.fragment(run_every="1s")
+def timer_fragment():
+    now = datetime.now(timezone.utc)
+
+    st.markdown(
+        f"""
+        <div style='font-size:1.1em; font-weight:bold; color:#1f2937;'>
+            ⏱️ {now.strftime("%Y-%m-%d %H:%M:%S %Z")}
+        </div>
+        """,
+        unsafe_allow_html=True,
+    )
+
+def render_challenge_card(challenge, api_client):
+    """Render a challenge card in the sidebar."""
+    status = challenge.get('status', 'unknown')
+    desc = challenge.get('description', 'TBA')
+    challenge_id = str(challenge.get('challenge_id', ''))[:8]
+    n_series = challenge.get('n_time_series', 0)
+    model_count = challenge.get('model_count', 0)
+    forecast_horizon_interval = challenge.get('horizon', 'TBA')
+    context_length_interval = challenge.get('context_length', 'TBA')
+    
+    # Try to get frequency from series data for accurate parsing
+    frequency_iso = 'PT1H'  # Default to 1 hour
+    forecast_horizon_from_series = None
+    context_length_from_series = None
+    
+    try:
+        challenge_id_full = challenge.get('challenge_id')
+        series_list = api_client.get_challenge_series(challenge_id_full)
+        if series_list and len(series_list) > 0:
+            frequency_iso = series_list[0].get('frequency', 'PT1H')
+            # Get forecast_horizon and context from series level (more accurate)
+            forecast_horizon_from_series = series_list[0].get('horizon')
+    except Exception as e:
+        print(f"DEBUG: Could not get series data for {challenge_id}: {e}", file=sys.stderr)
+    
+    # Use series-level horizon if available, otherwise fall back to challenge-level
+    horizon_to_parse = forecast_horizon_from_series or forecast_horizon_interval
+    context_to_parse = context_length_from_series or context_length_interval
+    
+    # Parse intervals with frequency - handle both string intervals and numeric values
+    if horizon_to_parse != 'TBA' and horizon_to_parse is not None:
+        if isinstance(horizon_to_parse, (int, float)):
+            forecast_horizon_num = int(horizon_to_parse)
+        elif isinstance(horizon_to_parse, str):
+            try:
+                _, horizon_seconds = parse_iso8601_duration(horizon_to_parse)
+                _, frequency_seconds = parse_iso8601_duration(frequency_iso)
+                if frequency_seconds > 0:
+                    forecast_horizon_num = int(horizon_seconds / frequency_seconds)
+                else:
+                    forecast_horizon_num = 'TBA'
+            except Exception as parse_e:
+                forecast_horizon_num = 'TBA'
+        else:
+            forecast_horizon_num = 'TBA'
+    else:
+        forecast_horizon_num = 'TBA'
+
+    if context_to_parse != 'TBA' and context_to_parse is not None:
+        if isinstance(context_to_parse, (int, float)):
+            context_length_num = int(context_to_parse)
+        elif isinstance(context_to_parse, str):
+            try:
+                _, context_seconds = parse_iso8601_duration(context_to_parse)
+                _, frequency_seconds = parse_iso8601_duration(frequency_iso)
+                if frequency_seconds > 0:
+                    context_length_num = int(context_seconds / frequency_seconds)
+                else:
+                    context_length_num = 'TBA'
+            except Exception as parse_e:
+                context_length_num = 'TBA'
+        else:
+            context_length_num = 'TBA'
+    else:
+        context_length_num = 'TBA'
+    
+    # Parse frequency for display using duration_to_max_unit
+    frequency_display = frequency_iso
+    try:
+        freq_parts, _ = parse_iso8601_duration(frequency_iso)
+        frequency_display = duration_to_max_unit(freq_parts)
+    except Exception as e:
+        print(f"DEBUG: Could not parse frequency for display: {e}", file=sys.stderr)
+    
+    status_color = '#16a34a' if status == ChallengeStatus.ACTIVE.value else '#2563eb'
+    
+    # Get dates
+    reg_start = challenge.get('registration_start', '')
+    final_eval = challenge.get('end_time', '')
+    
+    dates_html = ""
+    if reg_start:
+        reg_start_iso = to_local(reg_start, "UTC").isoformat()
+        dates_html += f"""<div><div id="reg-time-{challenge_id_full}" style="font-size: 0.85em; color: #4b5563;">
+      📅 Registration opens: <span></span>
+    </div>
+
+    <script>
+    if (!document.querySelector("#reg-time-{challenge_id_full} span").textContent) {{
+      const iso{challenge_id_full} = "{reg_start_iso}";
+      const date{challenge_id_full} = new Date(iso{challenge_id_full});
+
+      const formatted{challenge_id_full} = date{challenge_id_full}.toLocaleString(undefined, {{
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit"
+      }});
+
+      document.querySelector("#reg-time-{challenge_id_full} span").textContent = formatted{challenge_id_full};
+    }}
+    </script>"""
+    if final_eval:
+        final_iso = str(to_local(final_eval, "UTC").isoformat())
+        dates_html += f"""<div><div id="final-time-{challenge_id_full}" style="font-size: 0.85em; color: #4b5563;">
+      ⏰ Final Evaluation: <span></span>
+    </div>
+
+    <script>
+    if (!document.querySelector("#final-time-{challenge_id_full} span").textContent) {{
+      const iso{challenge_id_full} = "{final_iso}";
+      const date{challenge_id_full} = new Date(iso{challenge_id_full});
+
+      const formatted{challenge_id_full} = date{challenge_id_full}.toLocaleString(undefined, {{
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit"
+      }});
+
+      document.querySelector("#final-time-{challenge_id_full} span").textContent = formatted{challenge_id_full};
+    }}
+    </script></div></div>"""
+
+    # Countdown Closes in & Starts in
+    time = None
+    match status:
+        # Time has to be in CET for JS countdown.
+        case ChallengeStatus.REGISTRATION.value:
+            time = to_local(challenge.get('registration_end', ''), "CET")
+        case ChallengeStatus.ACTIVE.value:
+            time = to_local(challenge.get('end_time', ''), "CET")
+        case ChallengeStatus.ANNOUNCED.value:
+            time = to_local(challenge.get('registration_start', ''), "CET")
+        case _:
+            pass
+    
+    markdown = f"""
+    <div style='border: 2px solid {status_color}; padding: 15px; margin-bottom: 15px; border-radius: 8px; 
+                background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);'>
+        <div style='display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;'>
+            <div style='font-size: 1.2em; font-weight: bold; color: {status_color};'>{desc}</div>
+            <div style='background: {status_color}; color: white; padding: 4px 12px; border-radius: 12px; 
+                        font-size: 0.85em; font-weight: bold;'>{status.upper()}</div>
+        </div>
+        <div style='color: #6b7280; font-size: 0.9em; margin-bottom: 8px;'>ID: {challenge_id}</div>
+        <div style='display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px;'>
+            <div style='background: white; padding: 8px; border-radius: 5px; border: 1px solid #e5e7eb;'>
+                <div style='font-size: 0.75em; color: #9ca3af;'>TIME SERIES</div>
+                <div style='font-size: 1.1em; font-weight: bold; color: #1f2937;'>{n_series}</div>
+            </div>
+            <div style='background: white; padding: 8px; border-radius: 5px; border: 1px solid #e5e7eb;'>
+                <div style='font-size: 0.75em; color: #9ca3af;'>MODELS</div>
+                <div style='font-size: 1.1em; font-weight: bold; color: #1f2937;'>{model_count}</div>
+            </div>
+            <div style='background: white; padding: 8px; border-radius: 5px; border: 1px solid #e5e7eb;'>
+                <div style='font-size: 0.75em; color: #9ca3af;'>HORIZON (STEPS x FREQ)</div>
+                <div style='font-size: 1.1em; font-weight: bold; color: #1f2937;'>{forecast_horizon_num} x {frequency_display}</div>
+            </div>
+            <div style='background: white; padding: 8px; border-radius: 5px; border: 1px solid #e5e7eb;'>
+                <div style='font-size: 0.75em; color: #9ca3af;'>CONTEXT LENGTH</div>
+                <div style='font-size: 1.1em; font-weight: bold; color: #1f2937;'>{context_length_num}</div>
+            </div>
+        </div>
+        <div style='margin-top: 10px; padding: 8px; background: rgba(255,255,255,0.7); border-radius: 5px;'>
+            {dates_html}
+        </div>
+        <div class='ts-arena-countdown' data-challenge-time="{time}" data-reg-status="{status}" style='font-size: 0.9em; margin-top: 5px; padding: 5px; background: #f0f4ff; border-radius: 3px;'>{'Loading...'}</div>
+    </div>"""
+    return markdown
+    

components/challenge_list_component.py

@@ -0,0 +1,86 @@
+import streamlit as st
+import streamlit.components.v1 as components
+import sys
+
+from components.challange_card_component import render_challenge_card
+
+
+def get_time_js_script()->str:
+    return """<script>
+        (function(){
+            function updateCountdowns(){
+                var els = document.querySelectorAll('.ts-arena-countdown');
+                if(!els) return "Problem";
+                els.forEach(function(el){
+                    var status = el.getAttribute('data-reg-status');
+                    if (!status) return;
+                    var ds = el.getAttribute('data-challenge-time');
+                    if (!ds) return;
+                    var targetDate = new Date(ds);
+                    if(isNaN(targetDate.getTime())) return;
+                    var now = new Date();
+                    const cetString = now.toLocaleString('en-US', { timeZone: 'Europe/Paris' });
+                    now = new Date(cetString);
+                    var diff = Math.floor((targetDate - now) / 1000);
+                    var display_time = '';
+                    console.log('MADE IT TO DIFF')
+                    if(diff > 0){
+                        var days = Math.floor(diff / (24*3600));
+                        diff = diff % (24*3600);
+                        var hours = Math.floor(diff / 3600);
+                        diff = diff % 3600;
+                        var minutes = Math.floor(diff / 60);
+                        if(days > 0) display_time = days + 'd ' + hours + 'h ' + minutes + 'm';
+                        else if(hours > 0) display_time = hours + 'h ' + minutes + 'm';
+                        else display_time = minutes + 'm';
+                    }
+                    var diplay_text = 'TBD';
+                    if (status == 'registration') {
+                        if (diff <= 0) {
+                            diplay_text = 'Registration closed';
+                        } else {
+                            diplay_text = 'Registration closes in: ' + display_time;
+                        }
+                    }
+                    if (status == 'announced') {
+                        if (diff <= 0) {
+                            diplay_text = 'Registration open now!';
+                        } else {
+                            diplay_text = 'Registration opens in: ' + display_time;
+                        }
+                    }
+                    if (status == 'active') {
+                        if (diff <= 0) {
+                            diplay_text = 'Challenge ended';
+                        } else {
+                            diplay_text = 'Results in: ' + display_time;
+                        }
+                    }
+                    el.innerHTML = '\u23F1 <strong style="color: #667eea;">' + diplay_text + '</strong>';
+                    
+                });
+            }
+            updateCountdowns();
+            setInterval(updateCountdowns, 3000);
+        })();
+        </script>
+    """  
+
+def render_challenge_list_component(challenges, api_client, challange_list_type: str = "ongoing", show_first: int = 5):
+    # Create scrollable container for active challenges
+    challenge_container = st.container(height="stretch")
+    with challenge_container:
+        try:
+            if challenges:
+                cards = []
+                for challenge in challenges:
+                    cards.append(render_challenge_card(challenge, api_client=api_client))
+                components.html("<div class='ts-arena-upcoming-container' style='font-family: Arial, sans-serif;'>"+"".join(cards)+get_time_js_script()+"</div>", height=700, scrolling=True)
+                return 
+        except Exception as e:
+            st.write(e)
+            print(f"Error loading {challange_list_type} challenges: {e}", file=sys.stderr)
+        if challange_list_type == "ongoing":
+            st.write("No active challenges")
+        else:
+            st.write("No upcoming challenges")

components/challenges_tab_component.py

@@ -0,0 +1,538 @@
+from datetime import datetime, timezone
+import sys
+import traceback
+from typing import Any, Dict, List, Optional
+import pandas as pd
+from components.filter_models_component import render_filter_models_component
+import plotly.graph_objects as go
+import plotly.express as px
+import numpy as np
+import streamlit as st
+
+from components.filter_component import render_filter_component, set_challenges_session_state
+from utils.api_client import ChallengeStatus, DashboardAPIClient, hash_func_dashboard_api_client
+from utils.utils import duration_to_max_unit, parse_iso8601_duration
+
+    
+def get_challenge_horizon_steps_from_series(series_list):
+    """
+    Uses the series list to determine the forecast horizon in steps.
+    """
+    frequency_iso = series_list[0].get('frequency', 'PT1H')
+    horizon_iso = series_list[0].get('horizon')
+    return get_challenge_horizon(frequency_iso, horizon_iso)
+    
+
+def get_challenge_horizon_steps_from_challenge(challenge):
+    frequency_iso = challenge.get('frequency', 'PT1H')
+    horizon_iso = challenge.get('horizon')
+    return get_challenge_horizon(frequency_iso, horizon_iso)
+
+
+def get_challenge_horizon(frequency_iso: str, horizon_iso: str) -> int:
+    if horizon_iso and frequency_iso:
+        try:
+            _, horizon_seconds = parse_iso8601_duration(horizon_iso)
+            _, frequency_seconds = parse_iso8601_duration(frequency_iso)
+            if frequency_seconds > 0:
+                steps = int(horizon_seconds / frequency_seconds)
+                return steps
+        except Exception as parse_e:
+            print(f"Error parsing horizon: {parse_e}", file=sys.stderr)
+    return -1
+    
+
+@st.cache_data(hash_funcs={DashboardAPIClient: hash_func_dashboard_api_client}, show_spinner="Loading forecasts...")
+def get_forecasts(api_client: DashboardAPIClient, challenge_id: str, series_id: int) -> Dict[str, Any]:
+    forecasts = api_client.get_series_forecasts(challenge_id, series_id)
+    forecasts = dict(
+        sorted(forecasts.items(), key=lambda item: item[1]["current_mase"])
+    )
+    return forecasts
+
+
+def get_series_choices_for_challenge(challenge_id, api_client: DashboardAPIClient) -> List[Dict[str, Any]]:
+    """Get list of time series for a given challenge."""
+    if not challenge_id:
+        return []
+    
+    try:
+        # Don't try to get series for mock challenges
+        if str(challenge_id).startswith('mock'):
+            return []
+        
+        # Get series list from API
+        series_list = api_client.get_challenge_series(challenge_id)
+        if not series_list:
+            return []
+        
+        # Format series choices with ID and name
+        choices = []
+        for series_info in series_list:
+            series_id = series_info.get('series_id')
+            series_name = series_info.get('name', f'Series {series_id}')
+            series_description = series_info.get('description', series_id)
+            choices.append({
+                'id': series_id,
+                'name': series_name,
+                'description': series_description,
+                'display': f"{series_description} (ID: {series_id})"
+            })
+        
+        return choices
+    except Exception as e:
+        print(f"Error getting series choices: {e}", file=sys.stderr)
+        return []
+    
+
+@st.cache_data(show_spinner="Drawing plots...")
+def make_demo_forecast_plot(forecast_horizon, challenge_desc="Demo Challenge"):
+    """Generate demo forecast plot with synthetic data."""
+    np.random.seed(42)
+    
+    historical_len = 50
+    forecast_len = int(forecast_horizon)
+    time = np.arange(historical_len + forecast_len)
+    
+    historical_data = 100 + 10 * np.sin(np.linspace(0, 4 * np.pi, historical_len)) + np.random.normal(0, 2, historical_len)
+    
+    fig = go.Figure()
+    
+    # Add historical data
+    fig.add_trace(go.Scatter(
+        x=time[:historical_len],
+        y=historical_data,
+        mode='lines',
+        name='Historical Data',
+        line=dict(color='black', width=3),
+        legendgroup='historical',
+    ))
+    
+    model_names = [
+        "ARIMA", "Prophet", "LSTM", "XGBoost", 
+        "Random Forest", "ETS", "Theta", "TBATS",
+        "Neural Prophet", "Ensemble"
+    ]
+    
+    colors = px.colors.qualitative.Plotly + px.colors.qualitative.Set2
+    
+    for i, model_name in enumerate(model_names):
+        base_forecast = 100 + 10 * np.sin(np.linspace(4 * np.pi, 4 * np.pi + 2 * np.pi, forecast_len))
+        noise = np.random.normal(0, 1 + i * 0.3, forecast_len)
+        trend = np.linspace(0, i * 0.5, forecast_len)
+        forecast = base_forecast + noise + trend
+        
+        forecast_x = np.concatenate([[time[historical_len - 1]], time[historical_len:]])
+        forecast_y = np.concatenate([[historical_data[-1]], forecast])
+        
+        fig.add_trace(go.Scatter(
+            x=forecast_x,
+            y=forecast_y,
+            mode='lines',
+            name=model_name,
+            line=dict(color=colors[i % len(colors)], width=2, dash='solid'),
+            legendgroup=f'model_{i}',
+            hovertemplate=f'<b>{model_name}</b><br>Time: %{{x}}<br>Value: %{{y:.2f}}<extra></extra>'
+        ))
+        
+        upper_bound = forecast + (3 + i * 0.5)
+        lower_bound = forecast - (3 + i * 0.5)
+        
+        fig.add_trace(go.Scatter(
+            x=np.concatenate([time[historical_len:], time[historical_len:][::-1]]),
+            y=np.concatenate([upper_bound, lower_bound[::-1]]),
+            fill='toself',
+            fillcolor=colors[i % len(colors)],
+            opacity=0.15,
+            line=dict(width=0),
+            name=f'{model_name} CI',
+            legendgroup=f'model_{i}',
+            showlegend=False,
+            hoverinfo='skip'
+        ))
+    
+    fig.add_vline(
+        x=historical_len - 0.5,
+        line_dash="dash",
+        line_color="gray",
+        opacity=0.7,
+        annotation_text="Forecast Start",
+        annotation_position="top"
+    )
+    
+    fig.update_layout(
+        title={
+            'text': f'📈 {challenge_desc} - Forecast Comparison ({forecast_len} steps ahead)',
+            'x': 0.5,
+            'xanchor': 'center',
+            'font': {'size': 20, 'color': '#2c3e50'}
+        },
+        xaxis_title='Time',
+        yaxis_title='Value',
+        hovermode='x unified',
+        template='plotly_white',
+        height=600,
+        font=dict(family="Arial, sans-serif", size=12),
+        plot_bgcolor='rgba(245, 245, 245, 0.5)',
+    )
+    
+    fig.update_xaxes(
+        showgrid=True,
+        gridwidth=1,
+        gridcolor='lightgray',
+        showline=True,
+        linewidth=2,
+        linecolor='gray'
+    )
+    
+    fig.update_yaxes(
+        showgrid=True,
+        gridwidth=1,
+        gridcolor='lightgray',
+        showline=True,
+        linewidth=2,
+        linecolor='gray'
+    )
+    
+    return fig
+
+
+@st.cache_data(hash_funcs={DashboardAPIClient: hash_func_dashboard_api_client}, show_spinner="Drawing plots...")
+def plot_real_challenge_data(challenge: Dict[str, Any], forecast_horizon: int, api_client: DashboardAPIClient, selected_series_ids: List[int] = None, selected_readable_model_ids: List[str] = None) -> Optional[go.Figure]:
+    """Plot real challenge data from API with selected series and forecasts."""
+    try:
+        challenge_id = challenge.get('challenge_id')
+        challenge_desc = challenge.get('description', 'Challenge')
+        
+        # Get all series for this challenge
+        series_list = api_client.get_challenge_series(challenge_id)
+        if not series_list:
+            return None
+        
+        # Filter series based on selection
+        if selected_series_ids:
+            series_list = [s for s in series_list if s.get('series_id') in selected_series_ids]
+        
+        if not series_list:
+            fig = go.Figure()
+            fig.add_annotation(
+                text="No series selected or found",
+                xref="paper", yref="paper",
+                x=0.5, y=0.5, showarrow=False,
+                font=dict(size=16, color="gray")
+            )
+            return fig
+        
+        # Create figure
+        fig = go.Figure()
+        
+        # Color palette for models
+        colors = px.colors.qualitative.Plotly + px.colors.qualitative.Set2 + px.colors.qualitative.Set3
+        model_color_map = {}
+        color_idx = 0
+        
+        inferred_frequency = None
+        steps_to_show = forecast_horizon
+        
+        # Process each series
+        for series_idx, series_info in enumerate(series_list):
+            series_id = series_info.get('series_id')
+            series_name = series_info.get('name', f'Series {series_id}')
+            
+            # Get context data (historical)
+            context_df = api_client.get_challenge_data_for_series(
+                challenge_id, series_id,
+                series_info.get('context_start_time'),
+                series_info.get('context_end_time')
+            )
+            
+            # Get actual data (test/live data)
+            actual_df = api_client.get_challenge_data_for_series(
+                challenge_id, series_id,
+                series_info.get('context_end_time'),
+                series_info.get('end_time')
+            )
+            
+            # Infer frequency
+            if inferred_frequency is None and not context_df.empty and len(context_df) >= 2:
+                try:
+                    frequency_iso = series_info.get('frequency', 'PT1H')
+                    horizon_iso = series_info.get('horizon') or challenge.get('horizon')
+                    
+                    if horizon_iso and frequency_iso:
+                        _, horizon_seconds = parse_iso8601_duration(horizon_iso)
+                        _, frequency_seconds = parse_iso8601_duration(frequency_iso)
+                        
+                        if frequency_seconds > 0:
+                            steps_to_show = int(horizon_seconds / frequency_seconds)
+                            freq_parts, _ = parse_iso8601_duration(frequency_iso)
+                            inferred_frequency = duration_to_max_unit(freq_parts)
+                except Exception as e:
+                    print(f"Error calculating steps: {e}", file=sys.stderr)
+            
+            # Add context data (historical)
+            if not context_df.empty:
+                hist_name = "Historical Data" if len(series_list) == 1 else f"Historical - {series_name}"
+                fig.add_trace(go.Scatter(
+                    x=context_df["ts"],
+                    y=context_df["value"],
+                    name=hist_name,
+                    mode="lines",
+                    line=dict(color="black", width=3),
+                    legendgroup=f"series_{series_id}",
+                    hovertemplate=f"<b>{hist_name}</b><br>Time: %{{x}}<br>Value: %{{y}}<extra></extra>",
+                ))
+            
+            # Get forecasts for this series
+            forecasts = get_forecasts(api_client, challenge_id, series_id) 
+            
+            # Add forecasts
+            for model_readable_id, data in forecasts.items():
+                df = data["data"]
+                model_label = data.get("label", model_readable_id)
+                if df.empty:
+                    continue
+
+                if not model_readable_id in selected_readable_model_ids:
+                    continue
+                
+                if model_label not in model_color_map:
+                    model_color_map[model_label] = colors[color_idx % len(colors)]
+                    color_idx += 1
+                
+                color = model_color_map[model_label]
+                prelim_mase = data.get('current_mase')
+                if prelim_mase is None:
+                    prelim_mase = "N/A"
+                else:
+                    prelim_mase = f"{prelim_mase:.2f}"
+                display_name = f"{model_label} - Prelim MASE: {prelim_mase}"
+                if len(series_list) > 1:
+                    display_name += f" ({series_name})"
+                
+                # Connect forecast to last historical point
+                if not context_df.empty and not df.empty:
+                    last_hist_ts = context_df["ts"].iloc[-1]
+                    last_hist_val = context_df["value"].iloc[-1]
+                    forecast_x = pd.concat([pd.Series([last_hist_ts]), df["ts"]]).reset_index(drop=True)
+                    forecast_y = pd.concat([pd.Series([last_hist_val]), df["y"]]).reset_index(drop=True)
+                else:
+                    forecast_x = df["ts"]
+                    forecast_y = df["y"]
+                
+                fig.add_trace(go.Scatter(
+                    x=forecast_x,
+                    y=forecast_y,
+                    name=display_name,
+                    mode="lines+markers",
+                    line=dict(color=color, width=2),
+                    marker=dict(size=4),
+                    legendgroup=model_label,
+                    hovertemplate=f"<b>{display_name}</b><br>Time: %{{x}}<br>Value: %{{y:.2f}}<extra></extra>",
+                ))
+            
+            # Add actual data for first series only
+            if series_idx == 0 and not actual_df.empty:
+                actual_df_limited = actual_df.head(steps_to_show)
+                if not actual_df_limited.empty:
+                    fig.add_trace(go.Scatter(
+                        x=actual_df_limited["ts"],
+                        y=actual_df_limited["value"],
+                        name=f"Actual - {series_name}",
+                        mode="lines",
+                        line=dict(color="grey", width=3, dash="dot"),
+                        marker=dict(size=6, symbol="diamond"),
+                        legendgroup=f"series_{series_id}",
+                        hovertemplate=f"<b>Actual - {series_name}</b><br>Time: %{{x}}<br>Value: %{{y}}<extra></extra>",
+                    ))
+        
+        # Update layout
+        fig.update_layout(
+            xaxis_title='Time',
+            yaxis_title='Value',
+            hovermode='x unified',
+            template='plotly_white',
+            height=600,
+            font=dict(family="Arial, sans-serif", size=12),
+            plot_bgcolor='rgba(245, 245, 245, 0.5)',
+        )
+        
+        fig.update_xaxes(
+            showgrid=True,
+            gridwidth=1,
+            gridcolor='lightgray',
+            showline=True,
+            linewidth=2,
+            linecolor='gray'
+        )
+        
+        fig.update_yaxes(
+            showgrid=True,
+            gridwidth=1,
+            gridcolor='lightgray',
+            showline=True,
+            linewidth=2,
+            linecolor='gray'
+        )
+        
+        return fig
+        
+    except Exception as e:
+        print(f"Error plotting real challenge data: {e}", file=sys.stderr)
+        traceback.print_exc()
+        return None    
+    
+
+def render_challenges_tab_component(api_client: DashboardAPIClient):
+    render_filter_component(api_client=api_client, filter_type="active_challenges")
+    st.markdown("---")
+        
+    # Main content area
+    st.header("🎯 Visualize a Challenge")
+    
+    # Challenge selection
+    if st.session_state.get('filtered_challenges') is None:
+        with st.spinner("Loading active challenges..."):
+            now = datetime.now(timezone.utc).strftime("%Y-%m-%dT") 
+            set_challenges_session_state(
+                api_client=api_client,
+                selected_from_date=now+ "00:00:00.000Z",
+                selected_to_date=now + "23:59:59.999Z",
+                selected_statuses=[ChallengeStatus.ACTIVE.value],
+            )
+            st.rerun()
+    active_completed_challenges = st.session_state['filtered_challenges']
+    challenge_options = {f"{c.get('status')} • {c.get('description')}, Start Date: {datetime.strptime(c.get('start_time'), '%Y-%m-%dT%H:%M:%S.%fZ').strftime('%Y-%m-%d %H:%M:%S') if c.get('start_time') else 'N/A'} ({str(c.get('challenge_id', ''))[:8]})": c 
+                        for c in active_completed_challenges}
+    
+    if challenge_options:
+        selected_challenge_key = st.selectbox(
+            "Challenge Selection",
+            options=list(challenge_options.keys()),
+            key="challenge_select"
+        )
+        
+        selected_challenge = challenge_options[selected_challenge_key]
+        challenge_id = str(selected_challenge.get('challenge_id', ''))
+        challenge_id_short = challenge_id[:8] if challenge_id != '' else ''
+        challenge_name = selected_challenge.get('description', 'Challenge')
+        
+        # Series selection
+        series_options = get_series_choices_for_challenge(challenge_id, api_client)
+        
+        # Display challenge heading
+        st.subheader(f"📊 {challenge_name}")
+        
+        # Get detailed challenge info
+        status = selected_challenge.get('status', 'unknown')
+        n_series = selected_challenge.get('n_time_series', 0)
+        model_count = selected_challenge.get('model_count', 0)
+        challenge_id = str(selected_challenge.get('challenge_id', ''))[:8]
+        
+        # Get frequency and calculate horizon/context in steps
+        frequency_iso = 'PT1H'  # Default
+        context_length_num = 'N/A'
+        frequency_display = 'N/A'
+        
+        try:
+            challenge_id_full = selected_challenge.get('challenge_id')
+            series_list = api_client.get_challenge_series(challenge_id_full)
+            forecast_horizon_steps_num = get_challenge_horizon_steps_from_series(series_list)
+            if forecast_horizon_steps_num == -1:
+                forecast_horizon_steps_num = get_challenge_horizon_steps_from_challenge(selected_challenge)
+            if series_list and len(series_list) > 0:
+                frequency_iso = series_list[0].get('frequency', 'PT1H')
+                context_iso = series_list[0].get('context_length') or selected_challenge.get('context_length')
+                
+                # Parse frequency for display
+                try:
+                    freq_parts, _ = parse_iso8601_duration(frequency_iso)
+                    frequency_display = duration_to_max_unit(freq_parts)
+                except:
+                    frequency_display = frequency_iso
+                
+                context_length_num = context_iso
+        except Exception as e:
+            print(f"Error getting series data for challenge info: {e}", file=sys.stderr)
+        
+        # Status color
+        status_color = '#16a34a' if status == ChallengeStatus.ACTIVE.value else '#2563eb'
+        
+        # Compact single-line info display matching Gradio version
+        st.markdown(f"""
+        <div style='display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 20px;'>
+            <div style='background: {status_color}; color: white; padding: 3px 10px; border-radius: 4px; font-size: 0.8em; font-weight: 600;'>{status.upper()}</div>
+            <div style='color: #6b7280; font-size: 0.9em;'>ID: <strong>{challenge_id}</strong></div>
+            <div style='height: 20px; width: 1px; background: #d1d5db;'></div>
+            <div style='color: #6b7280; font-size: 0.9em;'>Series: <strong style='color: #1f2937;'>{n_series}</strong></div>
+            <div style='color: #6b7280; font-size: 0.9em;'>Models: <strong style='color: #1f2937;'>{model_count}</strong></div>
+            <div style='color: #6b7280; font-size: 0.9em;'>Horizon: <strong style='color: #1f2937;'>{forecast_horizon_steps_num if forecast_horizon_steps_num != -1 else 'N/A'  } Steps</strong></div>
+            <div style='color: #6b7280; font-size: 0.9em;'>Context: <strong style='color: #1f2937;'>{context_length_num}</strong></div>
+            <div style='color: #6b7280; font-size: 0.9em;'>Frequency: <strong style='color: #1f2937;'>{frequency_display}</strong></div>
+        </div>
+        """, unsafe_allow_html=True)
+  
+        models = api_client.list_models_for_challenge(challenge_id)
+        selected_series_ids, selected_readable_model_ids = render_filter_models_component(series_options, models)
+        
+        # Individual plots for each series (default)
+        with st.spinner("Loading individual series plots..."):
+            try:
+                challenge_id_full = selected_challenge.get('challenge_id')
+                
+                if not str(challenge_id_full).startswith('mock'):
+                    # Get series list
+                    series_list = api_client.get_challenge_series(challenge_id_full)
+                    
+                    if series_list and selected_series_ids:
+                        # Filter to selected series
+                        filtered_series = [s for s in series_list if s.get('series_id') in selected_series_ids]
+                        
+                        if filtered_series:
+                            # Create scrollable container for individual plots
+                            individual_plots_container = st.container(height=800)
+                            with individual_plots_container:
+                                for series_info in filtered_series:
+                                    series_id = series_info.get('series_id')
+                                    series_name = series_info.get('name', f'Series {series_id}')
+                                    series_desc = series_info.get('description', '')
+                                    if series_desc:
+                                        expander_title = f"📈 {series_desc} (ID: {series_id})"
+                                    else:
+                                        expander_title = f"📈 {series_name} (ID: {series_id})"
+                                    with st.expander(expander_title, expanded=True):
+                                        # Plot this individual series
+                                        fig = plot_real_challenge_data(
+                                            challenge=selected_challenge,
+                                            forecast_horizon=forecast_horizon_steps_num,
+                                            api_client=api_client,
+                                            selected_series_ids=[series_id],
+                                            selected_readable_model_ids=selected_readable_model_ids,
+                                        )
+                                        if fig:
+                                            st.plotly_chart(fig, width="stretch")
+                                        else:
+                                            st.warning(f"Could not load data for {series_name}")
+                        else:
+                            st.info("No series selected")
+                    else:
+                        st.info("No series available or none selected")
+                else:
+                    st.info("Individual series plots not available for demo data")
+                    fig = make_demo_forecast_plot(forecast_horizon_steps_num, challenge_name)
+                    st.plotly_chart(fig, width="stretch")
+                    
+            except Exception as e:
+                st.error(f"Error loading individual plots: {str(e)}")
+                traceback.print_exc()
+        # Interactive features info
+        st.markdown("""
+        **Interactive Features:**
+        - 🖱️ **Click legend items** to show/hide individual models
+        - 🔍 **Zoom** by dragging a box on the chart
+        - 👆 **Pan** by clicking and dragging
+        - 🔄 **Reset** by double-clicking the chart
+        - 📊 **Hover** to see exact values
+        """)
+    else:
+        st.info("No challenges available")

components/filter_component.py

@@ -0,0 +1,170 @@
+from typing import List, Optional
+import streamlit as st
+import pandas as pd
+import sys
+
+from utils.api_client import ChallengeStatus, DashboardAPIClient
+
+# Cached function to set rankings in session state
+def set_rankings_session_state(
+    api_client: DashboardAPIClient,
+    selected_domains: Optional[List[str]] = None,
+    selected_categories: Optional[List[str]] = None,
+    selected_frequencies: Optional[List[str]] = None,
+    selected_horizons: Optional[List[str]] = None
+):
+    if 'filtered_rankings' not in st.session_state:
+        st.session_state['filtered_rankings'] = None
+
+    filter_options = api_client.get_filter_options()
+    filtered_rankings = []
+    for time_range in filter_options.get("time_ranges", ['All']):
+        loop_dict = api_client.get_filtered_rankings(
+            domains=selected_domains if selected_domains else None,
+            categories=selected_categories if selected_categories else None,
+            frequencies=selected_frequencies if selected_frequencies else None,
+            horizons=selected_horizons if selected_horizons else None,
+            time_range=time_range
+        )
+        loop_dict = [{**item, "time_ranges": time_range} for item in loop_dict]
+        filtered_rankings.append(loop_dict)
+    st.session_state['filtered_rankings'] = filtered_rankings
+
+
+def set_challenges_session_state(
+    api_client: DashboardAPIClient,
+    selected_domains: Optional[List[str]] = None,
+    selected_categories: Optional[List[str]] = None,
+    selected_frequencies: Optional[List[str]] = None,
+    selected_horizons: Optional[List[str]] = None,
+    selected_from_date: Optional[str] = None,
+    selected_to_date: Optional[str] = None,
+    selected_statuses: Optional[List[str]] = None
+):
+    filtered_rankings = api_client.get_filtered_challenges(
+        domain=selected_domains if selected_domains else None,
+        category=selected_categories if selected_categories else None,
+        frequency=selected_frequencies if selected_frequencies else None,
+        horizon=selected_horizons if selected_horizons else None,
+        from_date=selected_from_date if selected_from_date else None,
+        to_date=selected_to_date if selected_to_date else None,
+        status=selected_statuses if selected_statuses else None
+    )
+    if filtered_rankings:
+        st.session_state["filtered_challenges"] = filtered_rankings
+    else:
+        st.session_state["filtered_challenges"] = []
+        st.info("No challenges match the selected filters")
+
+def render_filter_component(api_client: DashboardAPIClient, filter_type: str = "model_ranking"):
+    """
+    Render the filter component in the Streamlit app.
+
+    Args:
+        api_client: Instance of DashboardAPIClient to fetch filter options and rankings.
+    """
+
+    # Add filter section right after the header
+    if filter_type == "model_ranking":
+        st.markdown("### 🔍 Filter Model Rankings")
+    elif filter_type == "active_challenges":
+        st.markdown("### 🔍 Filter Active Challenges")
+
+    # Get filter options from API
+    filter_options = api_client.get_filter_options()
+
+    # Create columns for filters
+    col1, col2, col3 = st.columns(3)
+    col5, col6, col7, col8 = st.columns(4)
+
+    with col1:
+        selected_domains = st.multiselect(
+            "Domain",
+            options=filter_options.get("domains", []),
+            help="Filter by domain",
+            key=f"domain_filter_{filter_type}"
+        )
+
+    with col2:
+        selected_categories = st.multiselect(
+            "Category",
+            options=filter_options.get("categories", []),
+            help="Filter by category",
+            key=f"category_filter_{filter_type}"
+        )
+
+    with col3:
+        selected_frequencies = st.multiselect(
+            "Frequency",
+            options=filter_options.get("frequencies", []),
+            help="Filter by time series frequency",
+            key=f"frequency_filter_{filter_type}"
+        )
+
+    with col5:
+        selected_horizons = st.multiselect(
+            "Horizon",
+            options=filter_options.get("horizons", []),
+            help="Filter by forecast horizon",
+            key=f"horizon_filter_{filter_type}"
+        )
+
+    # Active Challenges specific filters
+    selected_statuses = None
+    selected_from_date = None
+    selected_to_date = None
+    if filter_type == "active_challenges":
+        with col6:
+            selected_from_date = st.date_input(
+                "End Date From",
+                value="today",
+                help="Filter by Date",
+                key=f"from_date_filter_{filter_type}"
+            )
+            selected_from_date = selected_from_date.strftime(
+                "%Y-%m-%dT00:00:00.000Z")
+        with col7:
+            selected_to_date = st.date_input(
+                "End Date To",
+                value='today',
+                help="Filter by Date",
+                key=f"to_date_filter_{filter_type}"
+            )
+            selected_to_date = selected_to_date.strftime(
+                "%Y-%m-%dT23:59:59.999Z")
+        with col8:
+            selected_statuses = st.multiselect(
+                "Status",
+                options=[ChallengeStatus.ACTIVE.value,
+                         ChallengeStatus.COMPLETED.value],
+                default=[ChallengeStatus.ACTIVE.value],
+                help="Filter by challenge status",
+                key=f"status_filter_{filter_type}"
+            )
+        # TODO: Filter for registration start and end date
+
+    # Apply filters button
+    if st.button("🔍 Apply Filters", type="primary", key=f"apply_filters_button_{filter_type}"):
+        try:
+            if filter_type == "model_ranking":
+                set_rankings_session_state(
+                    api_client,
+                    selected_domains=selected_domains,
+                    selected_categories=selected_categories,
+                    selected_frequencies=selected_frequencies,
+                    selected_horizons=selected_horizons
+                )
+
+            elif filter_type == "active_challenges":
+                set_challenges_session_state(
+                    api_client,
+                    selected_domains=selected_domains,
+                    selected_categories=selected_categories,
+                    selected_frequencies=selected_frequencies,
+                    selected_horizons=selected_horizons,
+                    selected_from_date=selected_from_date,
+                    selected_to_date=selected_to_date,
+                    selected_statuses=selected_statuses
+                )
+        except Exception as e:
+            st.error(f"Error applying filters: {str(e)}")

components/filter_models_component.py

@@ -0,0 +1,76 @@
+import streamlit as st
+
+def render_filter_models_component(series_options: list[dict], models: list[dict]):
+    # Select series:
+    if series_options:
+        # Default to first two series only
+        default_selection = [s['description'] for s in series_options[:2]]
+        
+        selected_series = st.multiselect(
+            "Time Series Selection",
+            options=[s['description'] for s in series_options],
+            default=default_selection,
+            help="Select which time series to display in the plot",
+            key="series_select"
+        )
+        
+        # Extract series IDs from selection
+        selected_series_ids = [
+            s['id'] for s in series_options 
+            if s['description'] in selected_series
+        ]
+    else:
+        selected_series_ids = None
+    
+    # Select models:
+    if models:
+        selected_readable_model_ids = [model["readable_id"] for model in models]
+        max_value = [model["model_size"] for model in models if model["model_size"] is not None]
+        max_value = max(max_value) if max_value else 0
+        # Filter size
+        selected_size = st.number_input(
+            "Model Max Size",
+            min_value=0,
+            value=max_value,
+            step=1,
+            help="Filter models by size (in million)",
+            key="model_size_filter"
+        )
+        # Nones are always displayed 
+        deselected_sizes_ids = [model["readable_id"] for model in models if model["model_size"] is not None and model["model_size"] > selected_size]
+
+        # Filter name
+        selected_names = st.text_input(
+            "Model Name Contains",
+            value="",
+            help="Filter models by name containing this text. Multiple names can be separated by commas.",
+            key="model_name_filter"
+        )
+        if selected_names.strip(",").strip() == "":
+            deselected_name_ids = []
+        else:
+            deselected_name_ids = selected_readable_model_ids.copy()
+        for multiple in selected_names.split(","):
+            multiple = multiple.strip()
+            if multiple:
+                deselected_name_ids = list(set([model["readable_id"] for model in models if multiple.lower() not in model["name"].lower() and multiple.lower() != model["readable_id"].lower()]) & set(deselected_name_ids))
+
+        # Filter by architecture
+        available_architectures = list(set(model["architecture"] for model in models if model["architecture"] is not None))
+        select_architecture = st.multiselect(
+            "Model Architecture",
+            options=available_architectures,
+            default=available_architectures,
+            help="Filter by model architecture",
+            key="model_architecture_filter"
+        )
+        deselected_architecture_ids = [
+            model["readable_id"] for model in models 
+            if model["architecture"] not in select_architecture
+        ]
+
+        # Combine filters
+        selected_readable_model_ids = list(set(selected_readable_model_ids) - set(deselected_sizes_ids) - set(deselected_name_ids) - set(deselected_architecture_ids))
+    else:
+        selected_readable_model_ids = None
+    return selected_series_ids, selected_readable_model_ids

requirements.txt

@@ -0,0 +1,7 @@
+streamlit>=1.28.0
+plotly>=5.17.0
+numpy>=1.24.0
+pandas>=2.0.0
+requests>=2.31.0
+isodate>=0.6.1
+python-dotenv>=1.0.0

utils/api_client.py

@@ -0,0 +1,341 @@
+import os
+import sys
+from enum import Enum
+from typing import List, Dict, Any, Optional, Tuple
+from datetime import datetime, timedelta
+import pandas as pd
+import requests
+
+class ChallengeStatus(Enum):
+    ACTIVE = "active"
+    COMPLETED = "completed"
+    REGISTRATION = "registration"
+    ANNOUNCED = "announced"
+
+
+class DashboardAPIClient:
+    """API Client für dashboard-api."""
+
+    def __init__(self):
+        self._api_url = os.getenv("DASHBOARD_API_URL")
+        self.api_key = os.getenv("DASHBOARD_API_KEY")
+        
+        # Remove trailing slash
+        if self._api_url.endswith("/"):
+            self._api_url = self._api_url[:-1]
+        
+        print(f"DEBUG: API URL: {self._api_url}", file=sys.stderr)
+        print(f"DEBUG: API Key configured: {'Yes' if self.api_key else 'No'}", file=sys.stderr)
+        
+        self.headers = {
+            "X-API-Key": self.api_key,
+            "Content-Type": "application/json"
+        }
+        self.timeout = 30  # seconds
+    
+    @property
+    def api_url(self) -> str:
+        """Property for compatibility with caching functions."""
+        return self._api_url
+    
+    @property
+    def database_url(self) -> str:
+        """Backward compatibility property for cache keys."""
+        return self._api_url
+
+    def _get(self, endpoint: str, params: Optional[Dict[str, Any]] = None) -> Any:
+        """Make GET request to API."""
+        url = f"{self._api_url}{endpoint}"
+        try:
+            print(f"DEBUG: GET {url} with params: {params}", file=sys.stderr)
+            response = requests.get(url, headers=self.headers, params=params, timeout=self.timeout)
+            response.raise_for_status()
+            return response.json()
+        except requests.exceptions.RequestException as e:
+            print(f"ERROR: API request failed: {e}", file=sys.stderr)
+            raise
+
+    # Challenges
+    def list_challenges(self) -> List[Dict[str, Any]]:
+        """List all challenges including aggregates (models/forecasts)."""
+        print("DEBUG: Calling list_challenges", file=sys.stderr)
+        try:
+            data = self._get("/api/v1/challenges")
+            print(f"DEBUG: list_challenges found {len(data)} challenges.", file=sys.stderr)
+            if data:
+                print("DEBUG: Challenges retrieved:", file=sys.stderr)
+                for r in data:
+                    print(f"  - ID: {r.get('challenge_id', 'N/A')}, Status: {r.get('status', 'N/A')}, Desc: {r.get('description', 'N/A')}", file=sys.stderr)
+            return data
+        except Exception as e:
+            print(f"ERROR: in list_challenges: {e}", file=sys.stderr)
+            return []
+
+    def list_completed_challenges_in_range(self, since: datetime) -> List[Dict[str, Any]]:
+        """List completed challenges whose end_time >= since."""
+        params = {
+            "status": ChallengeStatus.COMPLETED.value,
+            "from": since.isoformat()
+        }
+        try:
+            return self._get("/api/v1/challenges", params=params)
+        except Exception as e:
+            print(f"ERROR: in list_completed_challenges_in_range: {e}", file=sys.stderr)
+            return []
+        
+    def list_active_challenges(self) -> List[Dict[str, Any]]:
+        """Active challenges with status 'registration' and 'announced'."""
+        print("DEBUG: Calling list_active_challenges", file=sys.stderr)
+        try:
+            params = {"status": f"{ChallengeStatus.ACTIVE.value}"}
+            data = self._get("/api/v1/challenges", params=params)
+            print(f"DEBUG: list_active_challenges found {len(data)} challenges.", file=sys.stderr)
+            if data:
+                print("DEBUG: Active challenges retrieved:", file=sys.stderr)
+                for r in data:
+                    print(f"  - ID: {r.get('challenge_id', 'N/A')}, Status: {r.get('status', 'N/A')}, Desc: {r.get('description', 'N/A')}", file=sys.stderr)
+            return data
+        except Exception as e:
+            print(f"ERROR: in list_active_challenges: {e}", file=sys.stderr)
+            return []
+
+    def list_upcoming_challenges(self) -> List[Dict[str, Any]]:
+        """Upcoming challenges with status 'registration' and 'announced'."""
+        print("DEBUG: Calling list_upcoming_challenges", file=sys.stderr)
+        try:
+            params = {"status": f"{ChallengeStatus.REGISTRATION.value},{ChallengeStatus.ANNOUNCED.value}"}
+            data = self._get("/api/v1/challenges", params=params)
+            print(f"DEBUG: list_upcoming_challenges found {len(data)} challenges.", file=sys.stderr)
+            if data:
+                print("DEBUG: Upcoming challenges retrieved:", file=sys.stderr)
+                for r in data:
+                    print(f"  - ID: {r.get('challenge_id', 'N/A')}, Status: {r.get('status', 'N/A')}, Desc: {r.get('description', 'N/A')}", file=sys.stderr)
+            return data
+        except Exception as e:
+            print(f"ERROR: in list_upcoming_challenges: {e}", file=sys.stderr)
+            return []
+
+    def get_challenge_meta(self, challenge_id: str) -> Optional[Dict[str, Any]]:
+        """Get metadata for a challenge."""
+        try:
+            return self._get(f"/api/v1/challenges/{challenge_id}")
+        except requests.exceptions.HTTPError as e:
+            if e.response.status_code == 404:
+                return None
+            raise
+        except Exception as e:
+            print(f"ERROR: in get_challenge_meta: {e}", file=sys.stderr)
+            return None
+
+    def get_challenge_series(self, challenge_id: str) -> List[Dict[str, Any]]:
+        """Time series for a challenge."""
+        try:
+            return self._get(f"/api/v1/challenges/{challenge_id}/series")
+        except Exception as e:
+            print(f"ERROR: in get_challenge_series: {e}", file=sys.stderr)
+            return []
+        
+    def get_filtered_challenges(
+            self, 
+            status: Optional[str|List[str]]=None, 
+            from_date: Optional[str]=None,
+            to_date: Optional[str]=None, 
+            frequency: Optional[str|List[str]]=None, 
+            domain:  Optional[str|List[str]]=None,
+            category: Optional[str|List[str]]=None,
+            horizon: Optional[str|List[str]]=None,
+        ) -> List[Dict[str, Any]]:
+        """Get challenges filtered by various criteria."""
+        try:
+            str_status = ",".join(status) if isinstance(status, list) else status
+            str_frequency = ",".join(frequency) if isinstance(frequency, list) else frequency
+            str_domain = ",".join(domain) if isinstance(domain, list) else domain
+            str_category = ",".join(category) if isinstance(category, list) else category
+            str_horizon = ",".join(horizon) if isinstance(horizon, list) else horizon
+            params = {
+                "status": str_status,
+                "from": from_date,
+                "to": to_date,
+                "frequency": str_frequency,
+                "domain": str_domain,
+                "category": str_category,
+                "horizon": str_horizon
+            }
+            return self._get("/api/v1/challenges", params=params)
+        except Exception as e:
+            print(f"ERROR: in get_filtered_challenges: {e}", file=sys.stderr)
+            return []
+
+    def get_challenge_data_for_series(
+        self, challenge_id: int, series_id: int, start_time, end_time
+    ) -> pd.DataFrame:
+        """Get all relevant data for a series in a challenge for plotting."""
+        try:
+            # Handle both datetime objects and string timestamps
+            if isinstance(start_time, str):
+                start_time_str = start_time
+            elif hasattr(start_time, 'isoformat'):
+                start_time_str = start_time.isoformat()
+            else:
+                start_time_str = str(start_time)
+            
+            if isinstance(end_time, str):
+                end_time_str = end_time
+            elif hasattr(end_time, 'isoformat'):
+                end_time_str = end_time.isoformat()
+            else:
+                end_time_str = str(end_time)
+            
+            params = {
+                "start_time": start_time_str,
+                "end_time": end_time_str
+            }
+            data = self._get(f"/api/v1/challenges/{challenge_id}/series/{series_id}/data", params=params)
+            
+            # Convert to DataFrame
+            if "data" in data and data["data"]:
+                df = pd.DataFrame(data["data"])
+                df["ts"] = pd.to_datetime(df["ts"], utc=False)
+                return df
+            else:
+                return pd.DataFrame(columns=["ts", "value"])
+        except Exception as e:
+            print(f"ERROR: in get_challenge_data_for_series: {e}", file=sys.stderr)
+            return pd.DataFrame(columns=["ts", "value"])
+
+    def get_series_forecasts(self, challenge_id: str, series_id: int) -> Dict[str, Dict[str, pd.DataFrame|str]]:
+        """Return, per forecast (model/version), the data points as a DataFrame."""
+        try:
+            data = self._get(f"/api/v1/challenges/{challenge_id}/series/{series_id}/forecasts")
+            
+            # Convert to Dict[str, DataFrame]
+            result = {}
+            if "forecasts" in data:
+                for model_readable_id, forecast_data in data["forecasts"].items():
+                    if forecast_data:
+                        df = pd.DataFrame(forecast_data["data"])
+                        df["ts"] = pd.to_datetime(df["ts"], utc=False)
+                        result[model_readable_id] = {"data": df, "label": forecast_data.get("label", ""), "current_mase": forecast_data.get("current_mase", "")}
+            return result
+        except Exception as e:
+            print(f"ERROR: in get_series_forecasts: {e}", file=sys.stderr)
+            return {}
+
+    def list_models_for_challenge(self, challenge_id: str) -> List[str]:
+        """List all unique models for a given challenge."""
+        try:
+            return self._get(f"/api/v1/challenges/{challenge_id}/models")
+        except Exception as e:
+            print(f"ERROR: in list_models_for_challenge: {e}", file=sys.stderr)
+            return []
+
+    @staticmethod
+    def granularity_to_timedelta(granularity: Optional[str]) -> timedelta:
+        """Convert granularity string to timedelta."""
+        g = (granularity or "hour").lower()
+        if "15" in g:
+            return timedelta(minutes=15)
+        if g.startswith("h"):
+            return timedelta(hours=1)
+        if g.startswith("d"):
+            return timedelta(days=1)
+        return timedelta(hours=1)
+
+    def get_global_rankings(self) -> Tuple[Dict[str, List[Dict[str, Any]]], Dict[str, Optional[datetime]]]:
+        """Compute global model rankings.
+
+        Returns a tuple (results, ranges) where `results` maps a range label to a list of
+        dict rows (model_name, n_completed, avg_mase) and `ranges` maps the
+        same labels to the lower-bound datetime.
+        """
+        try:
+            data = self._get("/api/v1/models/rankings")
+            
+            # Reconstruct ranges from response
+            now = datetime.utcnow()
+            ranges: Dict[str, Optional[datetime]] = {
+                "Last 7 days": now - timedelta(days=7),
+                "Last 30 days": now - timedelta(days=30),
+                "Last 90 days": now - timedelta(days=90),
+                "Last 365 days": now - timedelta(days=365),
+            }
+            
+            results = data.get("ranges", {})
+            return results, ranges
+        except Exception as e:
+            print(f"ERROR: in get_global_rankings: {e}", file=sys.stderr)
+            return {}, {}
+
+    def get_filter_options(self) -> Dict[str, List[str]]:
+        """Get available filter options for rankings.
+
+        GET /api/v1/models/rankings-filters (without parameters)
+        Returns dict with keys: domains, categories, subcategories, frequencies, horizons, time_ranges
+        """
+        try:
+            # Call the endpoint without any parameters to get filter options
+            data = self._get("/api/v1/models/ranking-filters")
+            print(f"DEBUG: get_filter_options raw response: {data}", file=sys.stderr)
+            print(f"DEBUG: Response type: {type(data)}", file=sys.stderr)
+            
+            # Validate that we got the expected structure
+            if isinstance(data, dict):
+                expected_keys = ["domains", "categories", "frequencies", "horizons", "time_ranges"]
+                for key in expected_keys:
+                    if key in data:
+                        print(f"DEBUG: {key} = {data[key]}", file=sys.stderr)
+                    else:
+                        print(f"WARNING: Missing key '{key}' in API response", file=sys.stderr)
+                
+                return data
+            else:
+                print(f"ERROR: Unexpected data format from filter-rankings: {type(data)}", file=sys.stderr)
+                return {
+                    "domains": [],
+                    "categories": [],
+                    "frequencies": [],
+                    "horizons": [],
+                    "time_ranges": []
+                }
+        except Exception as e:
+            print(f"ERROR: in get_filter_options: {e}", file=sys.stderr)
+            import traceback
+            traceback.print_exc()
+            return {
+                "domains": [],
+                "categories": [],
+                "frequencies": [],
+                "horizons": [],
+                "time_ranges": []
+            }
+
+    def get_filtered_rankings(
+        self,
+        domains: Optional[List[str]] = None,
+        categories: Optional[List[str]] = None,
+        frequencies: Optional[List[str]] = None,
+        horizons: Optional[List[str]] = None,
+        time_range: Optional[str] = None
+    ) -> List[Dict[str, Any]]:
+        """Get filtered model rankings."""
+        try:
+            params = {}
+            if domains:
+                params["domain"] = ",".join(domains)
+            if categories:
+                params["category"] = ",".join(categories)
+            if frequencies:
+                params["frequency"] = ",".join(frequencies)
+            if horizons:
+                params["horizon"] = ",".join(horizons)
+            if time_range:
+                params["time_range"] = time_range
+            
+            data = self._get("/api/v1/models/rankings", params=params)
+            return data.get("rankings", [])
+        except Exception as e:
+            print(f"ERROR: in get_filtered_rankings: {e}", file=sys.stderr)
+            return []
+
+def hash_func_dashboard_api_client(obj: DashboardAPIClient) -> int:
+    return 1

utils/utils.py

@@ -0,0 +1,217 @@
+import pandas as pd
+import re
+import sys
+from datetime import datetime, timezone
+from typing import Any, Dict, List, Optional
+from zoneinfo import ZoneInfo
+
+from utils.api_client import ChallengeStatus, DashboardAPIClient
+
+
+def parse_iso8601_duration(duration):
+    """
+    Parse an ISO 8601 duration string (e.g., 'P3Y6M4DT12H30M5S')
+    into a dictionary and total seconds.
+    """
+    # Regex pattern for ISO 8601 durations
+    pattern = re.compile(
+        r'^P'                                 # starts with 'P'
+        r'(?:(?P<years>\d+)Y)?'               # years
+        r'(?:(?P<months>\d+)M)?'              # months (in date part)
+        r'(?:(?P<weeks>\d+)W)?'               # weeks
+        r'(?:(?P<days>\d+)D)?'                # days
+        r'(?:T'                               # start of time part
+        r'(?:(?P<hours>\d+)H)?'               # hours
+        r'(?:(?P<minutes>\d+)M)?'             # minutes
+        r'(?:(?P<seconds>\d+)S)?'             # seconds
+        r')?$'                                # end of string
+    )
+
+    match = pattern.match(duration)
+    if not match:
+        raise ValueError(f"Invalid ISO 8601 duration: {duration}")
+
+    parts = {k: int(v) if v else 0 for k, v in match.groupdict().items()}
+
+    # Approximate conversions
+    SECONDS_IN = {
+        'years':   365 * 24 * 3600,   # 1 year ≈ 365 days
+        'months':  30 * 24 * 3600,    # 1 month ≈ 30 days
+        'weeks':   7 * 24 * 3600,
+        'days':    24 * 3600,
+        'hours':   3600,
+        'minutes': 60,
+        'seconds': 1,
+    }
+
+    total_seconds = sum(parts[k] * SECONDS_IN[k] for k in parts)
+
+    return parts, total_seconds
+
+def seconds_to_hours(seconds):
+    """
+    Convert seconds to hours.
+    
+    Args:
+        seconds: Number of seconds (int or float)
+    
+    Returns:
+        float: Number of hours
+    """
+    return seconds / 3600
+
+def duration_to_max_unit(parts_dict):
+    """
+    Convert a duration dictionary (from parse_iso8601_duration) to a single unit value.
+    Returns the duration in the smallest unit specified in the original duration.
+    
+    For example:
+    - 23 hours --> "23 Hours"
+    - 1 day 2 hours --> "26 Hours" (hours is smaller unit)
+    - 2 days --> "2 Days"
+    - 1 week 3 days --> "10 Days" (days is smaller unit)
+    - 7 days --> "1 Week" (only days specified, can be converted to weeks)
+    - 168 hours --> "168 Hours" (keep as hours since that was the original unit)
+    
+    Args:
+        parts_dict: Dictionary from parse_iso8601_duration with keys: years, months, weeks, days, hours, minutes, seconds
+    
+    Returns:
+        str: Formatted string like "23 Hours" or "2 Days"
+    """
+    # Conversion factors to seconds
+    SECONDS_IN = {
+        'years':   365 * 24 * 3600,
+        'months':  30 * 24 * 3600,
+        'weeks':   7 * 24 * 3600,
+        'days':    24 * 3600,
+        'hours':   3600,
+        'minutes': 60,
+        'seconds': 1,
+    }
+    
+    # Calculate total seconds
+    total_seconds = sum(parts_dict.get(k, 0) * SECONDS_IN[k] for k in SECONDS_IN)
+    
+    if total_seconds == 0:
+        return "0 Seconds"
+    
+    # Unit mappings (key, singular, plural, divisor)
+    UNIT_MAP = [
+        ('years', 'Year', 'Years', 365 * 24 * 3600),
+        ('months', 'Month', 'Months', 30 * 24 * 3600),
+        ('weeks', 'Week', 'Weeks', 7 * 24 * 3600),
+        ('days', 'Day', 'Days', 24 * 3600),
+        ('hours', 'Hour', 'Hours', 3600),
+        ('minutes', 'Minute', 'Minutes', 60),
+        ('seconds', 'Second', 'Seconds', 1),
+    ]
+    
+    # Find the smallest unit that was actually used in the original duration
+    target_unit = None
+    for key, singular, plural, divisor in reversed(UNIT_MAP):  # Start from smallest
+        if parts_dict.get(key, 0) > 0:
+            target_unit = (key, singular, plural, divisor)
+            break
+    
+    # If we found a target unit, convert to that unit
+    if target_unit:
+        key, singular, plural, divisor = target_unit
+        value = total_seconds // divisor
+        unit_name = singular if value == 1 else plural
+        return f"{value} {unit_name}"
+    
+    # Fallback: use seconds
+    return f"{total_seconds} Seconds"
+
+def to_local(dt_val: Any, tz_name: str) -> Optional[datetime]:
+    if dt_val is None:
+        return None
+    try:
+        tz = ZoneInfo(tz_name)
+    except Exception:
+        tz = ZoneInfo("UTC")
+    # Normalize input to aware datetime
+    if isinstance(dt_val, pd.Timestamp):
+        dt = dt_val.to_pydatetime()
+    elif isinstance(dt_val, datetime):
+        dt = dt_val
+    else:
+        try:
+            ts = pd.to_datetime(dt_val, utc=True)
+            dt = ts.to_pydatetime()
+        except Exception:
+            return None
+    if dt.tzinfo is None:
+        dt = dt.replace(tzinfo=timezone.utc)
+    try:
+        return dt.astimezone(tz)
+    except Exception:
+        return None
+
+def get_active_challenges_list(api_client:DashboardAPIClient) -> List[Dict[str, Any]]:
+    """Get list of active and completed challenges."""
+    try:
+        challenges = api_client.list_active_challenges()
+        
+        
+        # If no challenges from API, return mock data
+        if not challenges:
+            print("No challenges from API, using mock data", file=sys.stderr)
+            challenges = [
+                {
+                    'challenge_id': 'mock-001',
+                    'status': ChallengeStatus.ACTIVE.value,
+                    'description': 'Electricity Load Forecasting',
+                    'n_time_series': 370,
+                    'model_count': 5,
+                    'horizon': 24,
+                    'context_length': 168,
+                    'granularity': 'hourly',
+                    'registration_start': '2025-10-01T00:00:00Z',
+                    'final_evaluation_at': '2025-12-31T23:59:59Z'
+                },
+                {
+                    'challenge_id': 'mock-002',
+                    'status': ChallengeStatus.ACTIVE.value,
+                    'description': 'Weather Prediction Challenge',
+                    'n_time_series': 50,
+                    'model_count': 8,
+                    'horizon': 48,
+                    'context_length': 336,
+                    'granularity': 'hourly',
+                    'registration_start': '2025-09-15T00:00:00Z',
+                    'final_evaluation_at': '2025-11-30T23:59:59Z'
+                },
+                {
+                    'challenge_id': 'mock-003',
+                    'status': ChallengeStatus.COMPLETED.value,
+                    'description': 'Retail Sales Forecasting',
+                    'n_time_series': 100,
+                    'model_count': 12,
+                    'horizon': 7,
+                    'context_length': 56,
+                    'granularity': 'daily',
+                    'registration_start': '2025-08-01T00:00:00Z',
+                    'final_evaluation_at': '2025-09-30T23:59:59Z'
+                }
+            ]
+        
+        return challenges
+    except Exception as e:
+        print(f"Error fetching challenges: {e}", file=sys.stderr)
+        # Return mock data on error
+        return [
+            {
+                'challenge_id': 'mock-001',
+                'status': ChallengeStatus.ACTIVE.value,
+                'description': 'Electricity Load Forecasting',
+                'n_time_series': 370,
+                'model_count': 5,
+                'horizon': 24,
+                'context_length': 168,
+                'granularity': 'hourly',
+                'registration_start': '2025-10-01T00:00:00Z',
+                'final_evaluation_at': '2025-12-31T23:59:59Z'
+            }
+        ]