Upload 3 files

app.py

@@ -0,0 +1,1077 @@
+import os
+import sys
+import json
+import datetime
+import math
+try:
+    import scipy.io
+except ImportError:
+    scipy = None
+try:
+    import numpy as np
+except ImportError:
+    np = None
+try:
+    import pandas as pd
+except ImportError:
+    pd = None
+from flask import Flask, jsonify, request, render_template, send_from_directory
+from dash import Dash, html, dcc, dash_table, Input, Output, State, callback_context
+import dash_mantine_components as dmc
+import plotly.graph_objects as go
+
+sys.path.append(os.path.abspath(os.path.join(os.path.dirname(__file__), "..")))
+from leaderboard import rank_results
+try:
+    from complex_com import algorithms as ALGO_COMPLEXITY
+except ImportError:
+    ALGO_COMPLEXITY = {}
+
+base_dir = os.getcwd()
+if not os.path.isdir(os.path.join(base_dir, "results")):
+    base_dir = os.path.abspath(os.path.join(os.path.dirname(__file__), ".."))
+PROJECT_ROOT = base_dir
+RESULT_DIR = os.path.join(PROJECT_ROOT, "results")
+DATA_DIR = os.path.join(PROJECT_ROOT, "data")
+PDF_DIR = os.path.join(PROJECT_ROOT, "pdf")
+
+os.makedirs(RESULT_DIR, exist_ok=True)
+
+server = Flask(__name__)
+
+RESULT_CACHE = {}
+
+
+def save_result_json(dataset, results):
+    path = os.path.join(RESULT_DIR, f"{dataset}.json")
+    with open(path, "w", encoding="utf-8") as f:
+        json.dump(results, f, indent=4)
+
+
+def load_result_json(dataset):
+    path = os.path.join(RESULT_DIR, f"{dataset}.json")
+    if not os.path.exists(path):
+        return None
+    with open(path, "r", encoding="utf-8") as f:
+        return json.load(f)
+
+
+def list_available_datasets():
+    datasets = set()
+    for f in os.listdir(RESULT_DIR):
+        if f.endswith(".json"):
+            datasets.add(f.replace(".json", ""))
+    datasets.add("Authorship")
+    return sorted(datasets)
+
+
+def run_agent_for_dataset(dataset):
+    return []
+
+
+def build_dataset_metadata():
+    datasets = {}
+    for name in list_available_datasets():
+        last_updated = datetime.datetime.fromtimestamp(1707382400).strftime("%Y-%m-%d")
+        num_samples = None
+        total_features = None
+        if scipy:
+            mat_path = os.path.join(DATA_DIR, f"{name}.mat")
+            if os.path.exists(mat_path):
+                try:
+                    mat = scipy.io.loadmat(mat_path)
+                    if "X" in mat:
+                        X = mat["X"]
+                        num_samples, total_features = X.shape
+                except Exception:
+                    num_samples = None
+                    total_features = None
+        datasets[name] = {
+            "name": name,
+            "last_updated": last_updated,
+            "num_samples": num_samples,
+            "total_features": total_features,
+        }
+    return datasets
+
+
+DATASET_METADATA = build_dataset_metadata()
+
+
+def build_complexity_display():
+    display_complexity = {}
+    for algo, comp in ALGO_COMPLEXITY.items():
+        t = comp.get("time", "")
+        s = comp.get("space", "")
+        t_disp = t.replace("**", "^").replace(" * ", "")
+        if "O(" not in t_disp:
+            t_disp = f"O({t_disp})" if t_disp else ""
+        s_disp = s.replace("**", "^").replace(" * ", "")
+        if "O(" not in s_disp:
+            s_disp = f"O({s_disp})" if s_disp else ""
+        display_complexity[algo] = {"time": t_disp, "space": s_disp}
+    return display_complexity
+
+
+DISPLAY_COMPLEXITY = build_complexity_display()
+
+VIEW_CONFIG = {
+    "overall": [
+        {"key": "mean_f1", "label": "Mean F1"},
+        {"key": "mean_auc", "label": "Mean AUC"},
+    ],
+    "classifiers-f1": [
+        {"key": "metrics.nb.f1", "label": "NB F1"},
+        {"key": "metrics.svm.f1", "label": "SVM F1"},
+        {"key": "metrics.rf.f1", "label": "RF F1"},
+    ],
+    "classifiers-auc": [
+        {"key": "metrics.nb.auc", "label": "NB AUC"},
+        {"key": "metrics.svm.auc", "label": "SVM AUC"},
+        {"key": "metrics.rf.auc", "label": "RF AUC"},
+    ],
+}
+
+
+def get_results_for_dataset(dataset):
+    if dataset in RESULT_CACHE:
+        leaderboard = rank_results(RESULT_CACHE[dataset])
+    else:
+        results = load_result_json(dataset)
+        if results is None:
+            results = run_agent_for_dataset(dataset)
+            if results:
+                save_result_json(dataset, results)
+        RESULT_CACHE[dataset] = results or []
+        leaderboard = rank_results(results or [])
+    if not isinstance(leaderboard, list):
+        if hasattr(leaderboard, "to_dict"):
+            leaderboard = leaderboard.to_dict(orient="records")
+        else:
+            leaderboard = list(leaderboard)
+    return leaderboard
+
+
+def get_metric_value(row, key):
+    value = row
+    for part in key.split("."):
+        if isinstance(value, dict):
+            value = value.get(part)
+        else:
+            return None
+    return value
+
+
+def get_feature_count(row):
+    num_features = row.get("num_features")
+    if isinstance(num_features, (int, float)):
+        return int(num_features)
+    selected = row.get("selected_features")
+    if isinstance(selected, list):
+        return len(selected)
+    return 0
+
+
+def apply_filters(results, dataset_meta, min_f1, max_features, del_range, complexity, selected_algos):
+    total_features = dataset_meta.get("total_features") if dataset_meta else None
+    filtered = []
+    min_del = (del_range[0] if del_range else 0) / 100
+    max_del = (del_range[1] if del_range else 100) / 100
+    min_f1 = min_f1 if min_f1 is not None else 0
+    max_features = max_features if max_features is not None else float("inf")
+    selected_algos = selected_algos if selected_algos else None
+    for r in results:
+        algo = r.get("algorithm")
+        if selected_algos and algo not in selected_algos:
+            continue
+        raw_f1 = r.get("mean_f1")
+        try:
+            f1 = float(raw_f1) if raw_f1 is not None else 0
+        except (TypeError, ValueError):
+            f1 = 0
+        if f1 < min_f1:
+            continue
+        feats = get_feature_count(r)
+        if feats > max_features:
+            continue
+        if isinstance(total_features, (int, float)) and total_features > 0:
+            del_rate = 1 - (feats / total_features)
+            if del_rate < min_del or del_rate > max_del:
+                continue
+        if complexity and complexity != "all":
+            comp = DISPLAY_COMPLEXITY.get(algo, {}).get("time")
+            if comp != complexity:
+                continue
+        filtered.append(r)
+    return filtered
+
+
+def build_score_figure(results, view_mode):
+    if not results:
+        fig = go.Figure()
+        fig.add_annotation(
+            text="No Data Available",
+            x=0.5,
+            y=0.5,
+            xref="paper",
+            yref="paper",
+            showarrow=False,
+            font=dict(size=16, color="#999"),
+        )
+        fig.update_layout(
+            xaxis=dict(visible=False),
+            yaxis=dict(visible=False),
+            margin=dict(l=20, r=20, t=20, b=20),
+        )
+        return fig
+    top = results[:20]
+    labels = [r.get("algorithm") for r in top]
+    fig = go.Figure()
+    if view_mode == "overall":
+        fig.add_trace(go.Bar(
+            name="Mean F1",
+            y=labels,
+            x=[r.get("mean_f1") for r in top],
+            orientation="h",
+            marker_color="rgba(52, 152, 219, 0.7)",
+        ))
+        fig.add_trace(go.Bar(
+            name="Mean AUC",
+            y=labels,
+            x=[r.get("mean_auc") for r in top],
+            orientation="h",
+            marker_color="rgba(46, 204, 113, 0.7)",
+        ))
+    elif view_mode == "classifiers-f1":
+        for idx, clf in enumerate(["nb", "svm", "rf"]):
+            fig.add_trace(go.Bar(
+                name=clf.upper(),
+                y=labels,
+                x=[get_metric_value(r, f"metrics.{clf}.f1") for r in top],
+                orientation="h",
+                marker_color=f"hsla({200 + idx * 40}, 70%, 60%, 0.7)",
+            ))
+    else:
+        for idx, clf in enumerate(["nb", "svm", "rf"]):
+            fig.add_trace(go.Bar(
+                name=clf.upper(),
+                y=labels,
+                x=[get_metric_value(r, f"metrics.{clf}.auc") for r in top],
+                orientation="h",
+                marker_color=f"hsla({100 + idx * 40}, 70%, 60%, 0.7)",
+            ))
+    fig.update_layout(
+        barmode="group",
+        margin=dict(l=20, r=20, t=20, b=20),
+        legend=dict(orientation="h"),
+        yaxis=dict(autorange="reversed"),
+    )
+    return fig
+
+
+def build_pareto_figure(results):
+    x_vals = [get_feature_count(r) for r in results]
+    y_vals = [r.get("mean_f1") for r in results]
+    labels = [r.get("algorithm") for r in results]
+    fig = go.Figure()
+    fig.add_trace(go.Scatter(
+        x=x_vals,
+        y=y_vals,
+        mode="markers",
+        text=labels,
+        marker=dict(color="rgba(230, 126, 34, 0.7)", size=10),
+    ))
+    fig.update_layout(
+        margin=dict(l=20, r=20, t=20, b=20),
+        xaxis_title="Num Features",
+        yaxis_title="Mean F1",
+    )
+    return fig
+
+
+def build_table(results, view_mode):
+    config = VIEW_CONFIG[view_mode]
+    headers = ["Rank", "Algorithm"] + [c["label"] for c in config] + ["Selected Features"]
+    col_keys = [c["key"] for c in config]
+    max_map = {}
+    for key in col_keys:
+        vals = []
+        for r in results:
+            v = get_metric_value(r, key)
+            try:
+                v = float(v) if v is not None else None
+            except Exception:
+                v = None
+            if v is not None:
+                vals.append(v)
+        max_map[key] = max(vals) if vals else 0
+    thead = html.Thead(
+        html.Tr([html.Th(h, className="cth") for h in headers], className="chead")
+    )
+    rows = []
+    if not results:
+        empty_cells = [html.Td("", className="ctd")] * (len(headers) - 2)
+        rows.append(
+            html.Tr(
+                [html.Td("", className="ctd"), html.Td("No Data Available", className="ctd")]+empty_cells,
+                className="crow"
+            )
+        )
+    else:
+        for idx, r in enumerate(results):
+            rank = idx + 1
+            medal = {1: "🥇", 2: "🥈", 3: "🥉"}.get(rank, str(rank))
+            row_class = (
+                "crow crow-gold" if rank == 1 else
+                "crow crow-silver" if rank == 2 else
+                "crow crow-bronze" if rank == 3 else
+                "crow"
+            )
+            algo = r.get("algorithm") or "Unknown"
+            metric_tds = []
+            for c in config:
+                key = c["key"]
+                raw = get_metric_value(r, key)
+                try:
+                    val = float(raw) if raw is not None else 0.0
+                except Exception:
+                    val = 0.0
+                m = max_map.get(key) or 0.0
+                pct = (val / m * 100.0) if m > 0 else 0
+                is_max = (m > 0 and abs(val - m) < 1e-12)
+                bar = html.Div(
+                    [
+                        html.Div(className="bar-track", children=html.Div(className="bar-fill", style={"width": f"{pct:.2f}%"})),
+                        html.Span(f"{val:.4f}", className=("bar-text is-max" if is_max else "bar-text")),
+                    ],
+                    className="bar-cell",
+                    title=f"max={m:.4f}" if is_max else None,
+                )
+                cell = html.Td(bar, className="ctd cnum")
+                metric_tds.append(cell)
+            selected = r.get("selected_features")
+            feat_count = get_feature_count(r)
+            if isinstance(selected, list):
+                features_title = ", ".join(str(s) for s in selected)
+            else:
+                features_title = "N/A"
+            feature_td = html.Td(
+                f"{feat_count} features",
+                className="ctd cfeat",
+                title=features_title,
+                style={"whiteSpace": "nowrap"},
+            )
+            row = html.Tr(
+                [html.Td(medal, className="ctd crank"), html.Td(algo, className="ctd calgo")] + metric_tds + [feature_td],
+                className=row_class,
+            )
+            rows.append(row)
+    tbody = html.Tbody(rows)
+    table = html.Table([thead, tbody], className="custom-table")
+    return html.Div(className="table-container", children=table)
+
+
+dataset_options = [{"label": name, "value": name} for name in sorted(DATASET_METADATA.keys())]
+default_dataset = "Authorship" if "Authorship" in DATASET_METADATA else (dataset_options[0]["value"] if dataset_options else "Authorship")
+
+complexity_options = sorted({v.get("time") for v in DISPLAY_COMPLEXITY.values() if v.get("time")})
+complexity_data = [{"label": "All Complexities", "value": "all"}] + [
+    {"label": c, "value": c} for c in complexity_options
+]
+
+dash_app = Dash(__name__, server=server, url_base_pathname="/")
+app = dash_app
+
+css = """
+:root {
+    --primary-color: #3498db;
+    --secondary-color: #2c3e50;
+    --background-color: #f8f9fa;
+    --text-color: #333;
+    --border-color: #dee2e6;
+    --hover-color: #f1f1f1;
+    --accent-color: #e67e22;
+    --sidebar-width: 280px;
+}
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: var(--background-color);
+    color: var(--text-color);
+}
+.app-shell {
+    display: flex;
+    min-height: 100vh;
+}
+.sidebar {
+    width: var(--sidebar-width);
+    background-color: var(--secondary-color);
+    color: white;
+    position: fixed;
+    height: 100vh;
+    overflow-y: auto;
+    padding: 20px;
+    box-sizing: border-box;
+    left: 0;
+    top: 0;
+    z-index: 100;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+.sidebar h2 {
+    font-size: 1.1em;
+    margin-bottom: 10px;
+    color: #ecf0f1;
+    border-bottom: 1px solid #34495e;
+    padding-bottom: 5px;
+}
+.main-content {
+    margin-left: var(--sidebar-width);
+    padding: 24px;
+    width: calc(100% - var(--sidebar-width));
+    box-sizing: border-box;
+}
+.stats-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 10px;
+}
+.stat-card {
+    background: rgba(255,255,255,0.1);
+    padding: 10px;
+    border-radius: 6px;
+    text-align: center;
+}
+.stat-value {
+    font-size: 1.2em;
+    font-weight: 600;
+    color: var(--accent-color);
+}
+.stat-label {
+    font-size: 0.8em;
+    color: #bdc3c7;
+}
+.card {
+    background: white;
+    padding: 16px;
+    border-radius: 8px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+.chart-card {
+    background: white;
+    padding: 16px;
+    border-radius: 8px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    height: 420px;
+    display: flex;
+    flex-direction: column;
+}
+.chart-card .dash-graph {
+    flex: 1;
+}
+.table-container {
+    background: white;
+    padding: 12px;
+    border-radius: 8px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+.nav-links {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+.nav-links li a {
+    display: block;
+    padding: 8px;
+    color: #bdc3c7;
+    text-decoration: none;
+    border-radius: 4px;
+}
+.nav-links li a:hover {
+    background: rgba(255,255,255,0.1);
+    color: white;
+}
+
+/* Custom Table Styles */
+.custom-table-wrapper {
+    overflow-x: auto;
+    overflow-y: auto;
+    max-height: 520px;
+    background: #fff;
+    border: 1px solid #eee;
+    border-radius: 8px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
+}
+.custom-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    table-layout: fixed;
+}
+.custom-table thead th {
+    text-align: left;
+    border-bottom: 2px solid var(--border-color);
+    padding: 10px;
+}
+.custom-table tbody td {
+    padding: 8px 10px;
+    border-bottom: 1px solid #eee;
+    vertical-align: middle;
+}
+.custom-table tbody tr:hover {
+    background: #fafafa;
+    transition: background 0.2s ease;
+}
+.custom-table tbody tr:nth-child(even) { background: #fcfcfc; }
+.custom-table thead th {
+    position: sticky;
+    top: 0;
+    background: #fff;
+    z-index: 1;
+}
+.cnum { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; text-align: right; }
+.is-max { font-weight: 600; color: var(--accent-color); }
+.crow-gold { background: rgba(255,215,0,0.12); }
+.crow-silver { background: rgba(192,192,192,0.12); }
+.crow-bronze { background: rgba(205,127,50,0.12); }
+.crank { width: 56px; text-align: center; }
+.calgo { font-weight: 500; }
+.cth { background: var(--background-color); }
+.cfeat { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+/* In-cell Data Bars */
+.bar-cell {
+    position: relative;
+    height: 26px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+.bar-track {
+    position: absolute;
+    left: 6px;
+    right: 6px;
+    height: 60%;
+    background: #f4f7fb;
+    border: 1px solid #e6eef7;
+    border-radius: 6px;
+    overflow: hidden;
+}
+.bar-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #7db9e8 0%, #3498db 100%);
+    opacity: 0.35;
+    transition: width 200ms ease;
+}
+.bar-text {
+    position: relative;
+    z-index: 1;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+    padding: 0 6px;
+    line-height: 1;
+}
+"""
+
+dash_app.index_string = f"""
+<!DOCTYPE html>
+<html>
+    <head>
+        {{%metas%}}
+        <title>AutoFS Leaderboard</title>
+        {{%favicon%}}
+        {{%css%}}
+        <style>{css}</style>
+    </head>
+    <body>
+        {{%app_entry%}}
+        <footer>
+            {{%config%}}
+            {{%scripts%}}
+            {{%renderer%}}
+        </footer>
+    </body>
+</html>
+"""
+
+dash_app.layout = dmc.MantineProvider(
+    children=html.Div(
+        className="app-shell",
+        children=[
+            html.Aside(
+                className="sidebar",
+                children=[
+                    html.Div(
+                        [
+                            html.H1("AutoFS", style={"fontSize": "1.5em", "margin": 0, "color": "white"}),
+                            html.Div("Feature Selection Leaderboard", style={"fontSize": "0.8em", "color": "#bdc3c7"}),
+                        ],
+                        style={"textAlign": "center", "marginBottom": "10px"},
+                    ),
+                    html.Div(
+                        className="stats-grid",
+                        children=[
+                            html.Div([html.Div("-", id="stat-count", className="stat-value"), html.Div("Methods", className="stat-label")], className="stat-card"),
+                            html.Div([html.Div("-", id="stat-best", className="stat-value"), html.Div("Best F1", className="stat-label")], className="stat-card"),
+                            html.Div([html.Div("-", id="stat-updated", className="stat-value"), html.Div("Updated", className="stat-label")], className="stat-card"),
+                        ],
+                    ),
+                    html.Div(
+                        [
+                            html.H2("Navigation"),
+                            html.Ul(
+                                className="nav-links",
+                                children=[
+                                    html.Li(html.A("📊 Overview", href="#overview")),
+                                    html.Li(html.A("🏆 Leaderboard", href="#main-table")),
+                                    html.Li(html.A("📈 Charts", href="#charts")),
+                                    html.Li(html.A("ℹ️ Details", href="#details")),
+                                    html.Li(html.A("🌍 Global Rankings", href="/global")),
+                                    html.Li(html.A("📤 Submit Data/Method", href="/submit")),
+                                ],
+                            ),
+                        ]
+                    ),
+                    html.Div(
+                        [
+                            html.H2("Global Controls"),
+                            dmc.Select(
+                                id="view-mode",
+                                data=[
+                                    {"label": "Overall (Mean)", "value": "overall"},
+                                    {"label": "F1 by Classifier", "value": "classifiers-f1"},
+                                    {"label": "AUC by Classifier", "value": "classifiers-auc"},
+                                ],
+                                value="overall",
+                                clearable=False,
+                                style={"marginBottom": "10px"},
+                            ),
+                        ]
+                    ),
+                    html.Div(
+                        [
+                            html.H2("Filters"),
+                            dmc.Select(
+                                id="dataset-select",
+                                data=dataset_options,
+                                value="Authorship",
+                                clearable=False,
+                                style={"marginBottom": "10px"},
+                            ),
+                            html.Div(
+                                [
+                                    html.Div(
+                                        [
+                                            html.Span("Min F1 Score: "),
+                                            html.Span("0.0000", id="val-f1", style={"color": "var(--accent-color)"}),
+                                        ],
+                                        style={"marginBottom": "6px", "color": "#bdc3c7"},
+                                    ),
+                                    dmc.Slider(id="filter-f1", min=0, max=1, step=0.0001, value=0),
+                                ],
+                                style={"marginBottom": "12px"},
+                            ),
+                            html.Div(
+                                [
+                                    html.Div(
+                                        [
+                                            html.Span("Del. Rate: "),
+                                            html.Span("0% - 100%", id="val-del-rate", style={"color": "var(--accent-color)"}),
+                                        ],
+                                        style={"marginBottom": "6px", "color": "#bdc3c7"},
+                                    ),
+                                    dmc.RangeSlider(id="filter-del-rate", min=0, max=100, value=[0, 100], step=1),
+                                ],
+                                style={"marginBottom": "12px"},
+                            ),
+                            html.Div(
+                                [
+                                    html.Div(
+                                        [
+                                            html.Span("Max Features: "),
+                                            html.Span("All", id="val-feats", style={"color": "var(--accent-color)"}),
+                                        ],
+                                        style={"marginBottom": "6px", "color": "#bdc3c7"},
+                                    ),
+                                    dmc.Slider(id="filter-feats", min=1, max=100, step=1, value=100),
+                                ],
+                                style={"marginBottom": "12px"},
+                            ),
+                            dmc.Select(
+                                id="filter-complexity",
+                                data=complexity_data,
+                                value="all",
+                                clearable=False,
+                                style={"marginBottom": "12px"},
+                            ),
+                            dmc.CheckboxGroup(id="filter-algos", children=[], value=[], orientation="vertical"),
+                        ]
+                    ),
+                ],
+            ),
+            html.Main(
+                className="main-content",
+                children=[
+                    html.Header(
+                        [
+                            html.H1("🏆 Leaderboard Dashboard", style={"color": "var(--secondary-color)", "margin": 0}),
+                            html.Div("Comprehensive benchmark of feature selection algorithms across diverse datasets.", className="subtitle"),
+                        ]
+                    ),
+                    html.Div(
+                        className="card",
+                        children=[
+                            html.P([
+                                "Feature selection is a critical step in machine learning and data analysis, aimed at ",
+                                html.Strong("identifying the most relevant subset of features"),
+                                " from a high-dimensional dataset. By eliminating irrelevant or redundant features, feature selection not only ",
+                                html.Strong("improves model interpretability"),
+                                " but also ",
+                                html.Strong("enhances predictive performance"),
+                                " and ",
+                                html.Strong("reduces computational cost"),
+                                ".",
+                            ]),
+                            html.P([
+                                "This leaderboard presents a comprehensive comparison of various feature selection algorithms across multiple benchmark datasets. It includes several ",
+                                html.Strong("information-theoretic and mutual information-based methods"),
+                                ", which quantify the statistical dependency between features and the target variable to rank feature relevance. Mutual information approaches are particularly effective in ",
+                                html.Strong("capturing both linear and non-linear relationships"),
+                                ", making them suitable for complex datasets where classical correlation-based methods may fail.",
+                            ]),
+                            html.P([
+                                "The leaderboard is structured to reflect algorithm performance across different datasets, allowing for an objective assessment of each method’s ability to select informative features. For each method and dataset combination, metrics such as ",
+                                html.Strong("classification accuracy, F1-score, and area under the ROC curve (AUC)"),
+                                " are reported, providing insights into how the selected features contribute to predictive modeling.",
+                            ]),
+                            html.P([
+                                "By examining this feature selection leaderboard, researchers and practitioners can gain a better understanding of which methods perform consistently well across diverse domains, helping to guide the choice of feature selection strategies in real-world applications. This serves as a valuable resource for both benchmarking and method development in the field of feature selection.",
+                            ]),
+                        ],
+                        style={"marginTop": "16px"},
+                    ),
+                    dmc.Grid(
+                        id="overview",
+                        gutter="md",
+                        style={"marginTop": "16px"},
+                        children=[
+                            dmc.Col(
+                                span=12,
+                                md=6,
+                                children=html.Div(
+                                    className="card",
+                                    children=[
+                                        html.H3("About This Dataset"),
+                                        html.P(["Analyzing performance on ", html.Strong(html.Span("Selected", id="desc-dataset-name")), "."]),
+                                    ],
+                                ),
+                            ),
+                            dmc.Col(
+                                span=12,
+                                md=6,
+                                children=html.Div(
+                                    className="card",
+                                    children=[
+                                        html.H3("Dataset Metadata"),
+                                        html.Div(["Name: ", html.Span("-", id="meta-name")]),
+                                        html.Div(["Samples: ", html.Span("-", id="meta-samples"), " | Features: ", html.Span("-", id="meta-features")]),
+                                        html.Div(["Last Updated: ", html.Span("-", id="meta-updated")]),
+                                    ],
+                                ),
+                            ),
+                        ],
+                    ),
+                    html.Div(
+                        id="main-table",
+                        style={"marginTop": "24px"},
+                        children=[
+                            html.H3("📋 Detailed Rankings"),
+                            html.Div(id="custom-table-container", className="custom-table-wrapper"),
+                        ],
+                    ),
+                    html.Div(
+                        id="charts",
+                        style={"marginTop": "24px"},
+                        children=[
+                            dmc.Grid(
+                                gutter="md",
+                                children=[
+                                    dmc.Col(
+                                        span=12,
+                                        md=6,
+                                        children=html.Div(
+                                            className="chart-card",
+                                            children=[
+                                                html.H3("📊 Performance Comparison"),
+                                                dcc.Graph(id="score-graph", config={"responsive": True}, style={"height": "100%"}),
+                                            ],
+                                        ),
+                                    ),
+                                    dmc.Col(
+                                        span=12,
+                                        md=6,
+                                        children=html.Div(
+                                            className="chart-card",
+                                            children=[
+                                                html.H3("📉 Pareto Frontier (Trade-off)"),
+                                                html.Div("X: Selected Features vs Y: F1 Score (Top-Left is better)", style={"fontSize": "0.9em", "color": "#666"}),
+                                                dcc.Graph(id="pareto-graph", config={"responsive": True}, style={"height": "100%"}),
+                                            ],
+                                        ),
+                                    ),
+                                ],
+                            )
+                        ],
+                    ),
+                    html.Div(
+                        id="details",
+                        style={"marginTop": "50px", "color": "#999", "textAlign": "center", "borderTop": "1px solid #eee", "paddingTop": "20px"},
+                        children="AutoFS Benchmark Platform © 2026",
+                    ),
+                ],
+            ),
+        ],
+    )
+)
+
+
+@dash_app.callback(
+    Output("filter-feats", "max"),
+    Output("filter-feats", "value"),
+    Output("filter-f1", "min"),
+    Output("filter-f1", "max"),
+    Output("filter-f1", "value"),
+    Output("filter-algos", "children"),
+    Output("filter-algos", "value"),
+    Output("meta-name", "children"),
+    Output("meta-samples", "children"),
+    Output("meta-features", "children"),
+    Output("meta-updated", "children"),
+    Output("desc-dataset-name", "children"),
+    Output("stat-updated", "children"),
+    Output("stat-count", "children"),
+    Output("stat-best", "children"),
+    Output("score-graph", "figure"),
+    Output("pareto-graph", "figure"),
+    Output("custom-table-container", "children"),
+    Output("val-f1", "children"),
+    Output("val-feats", "children"),
+    Output("val-del-rate", "children"),
+    Input("dataset-select", "value"),
+    Input("view-mode", "value"),
+    Input("filter-f1", "value"),
+    Input("filter-feats", "value"),
+    Input("filter-del-rate", "value"),
+    Input("filter-complexity", "value"),
+    Input("filter-algos", "value"),
+    State("filter-f1", "min"),
+    State("filter-f1", "max"),
+    State("filter-feats", "max"),
+    State("filter-algos", "children"),
+    State("filter-algos", "value"),
+)
+def update_dashboard_all(
+    dataset,
+    view_mode,
+    min_f1_value,
+    max_features_value,
+    del_range,
+    complexity,
+    selected_algos,
+    f1_min_state,
+    f1_max_state,
+    feats_max_state,
+    algo_children_state,
+    algo_value_state,
+):
+    triggered_id = callback_context.triggered_id if callback_context.triggered else None
+    dataset_changed = triggered_id == "dataset-select" or triggered_id is None
+    selected = dataset or "Authorship"
+    meta = DATASET_METADATA.get(selected, {"name": selected, "last_updated": "-", "num_samples": None, "total_features": None})
+    results = get_results_for_dataset(selected)
+    algo_list = sorted({r.get("algorithm") for r in results if r.get("algorithm")})
+    if dataset_changed:
+        f1_scores = [r.get("mean_f1") for r in results if r.get("mean_f1") is not None]
+        if f1_scores:
+            min_f1 = min(f1_scores)
+            safe_min = max(0, math.floor((min_f1 - 0.1) * 10) / 10)
+        else:
+            safe_min = 0
+        max_feats = meta.get("total_features") or 100
+        f1_min = safe_min
+        f1_max = 1
+        f1_value = safe_min
+        feats_max = max_feats
+        feats_value = max_feats
+        algo_children = [dmc.Checkbox(label=a, value=a) for a in algo_list]
+        algo_value = algo_list
+    else:
+        f1_min = f1_min_state if f1_min_state is not None else 0
+        f1_max = f1_max_state if f1_max_state is not None else 1
+        f1_value = min_f1_value if min_f1_value is not None else f1_min
+        feats_max = feats_max_state if feats_max_state is not None else (meta.get("total_features") or 100)
+        feats_value = max_features_value if max_features_value is not None else feats_max
+        if algo_children_state:
+            algo_children = algo_children_state
+        else:
+            algo_children = [dmc.Checkbox(label=a, value=a) for a in algo_list]
+        if selected_algos is not None:
+            algo_value = selected_algos
+        else:
+            algo_value = algo_value_state if algo_value_state is not None else algo_list
+    filtered = apply_filters(results, meta, f1_value or 0, feats_value, del_range, complexity, algo_value or [])
+    count = len(filtered)
+    if filtered:
+        best = max(filtered, key=lambda r: r.get("mean_f1") or 0)
+        best_text = f"{best.get('algorithm')} ({(best.get('mean_f1') or 0):.3f})"
+    else:
+        best_text = "-"
+    score_fig = build_score_figure(filtered, view_mode or "overall")
+    pareto_fig = build_pareto_figure(filtered)
+    table_component = build_table(filtered, view_mode or "overall")
+    val_f1 = f"{(f1_value or 0):.4f}"
+    val_feats = str(int(feats_value)) if isinstance(feats_value, (int, float)) else "All"
+    del_min = del_range[0] if del_range else 0
+    del_max = del_range[1] if del_range else 100
+    val_del = f"{del_min:.0f}% - {del_max:.0f}%"
+    meta_samples = meta.get("num_samples") if meta.get("num_samples") is not None else "Unavailable"
+    meta_features = meta.get("total_features") if meta.get("total_features") is not None else "Unavailable"
+    return (
+        feats_max,
+        feats_value,
+        f1_min,
+        f1_max,
+        f1_value,
+        algo_children,
+        algo_value,
+        meta.get("name", "-"),
+        meta_samples,
+        meta_features,
+        meta.get("last_updated", "-"),
+        meta.get("name", "-"),
+        meta.get("last_updated", "-"),
+        count,
+        best_text,
+        score_fig,
+        pareto_fig,
+        table_component,
+        val_f1,
+        val_feats,
+        val_del,
+    )
+
+
+def sanitize_json(value):
+    if value is None or isinstance(value, (str, int, float, bool)):
+        return value
+    if np and isinstance(value, np.generic):
+        return value.item()
+    if np and isinstance(value, np.ndarray):
+        return value.tolist()
+    if pd and isinstance(value, (pd.DataFrame, pd.Series)):
+        if isinstance(value, pd.DataFrame):
+            return value.to_dict(orient="records")
+        return value.to_dict()
+    if isinstance(value, (datetime.datetime, datetime.date)):
+        return value.isoformat()
+    if isinstance(value, dict):
+        return {str(k): sanitize_json(v) for k, v in value.items()}
+    if isinstance(value, (list, tuple, set)):
+        return [sanitize_json(v) for v in value]
+    if hasattr(value, "to_dict"):
+        return sanitize_json(value.to_dict())
+    return str(value)
+
+
+@server.route("/global")
+def global_view():
+    return render_template("global.html")
+
+
+@server.route("/submit")
+def submit_view():
+    return render_template("submit.html")
+
+
+@server.route("/api/results")
+def get_results_api():
+    try:
+        dataset = request.args.get("dataset") or "Authorship"
+        leaderboard = get_results_for_dataset(dataset)
+        return jsonify(sanitize_json(leaderboard))
+    except Exception as e:
+        print(e)
+        return jsonify({"error": str(e)})
+
+
+@server.route("/api/datasets")
+def api_datasets():
+    try:
+        datasets = []
+        for name, meta in DATASET_METADATA.items():
+            datasets.append({
+                "name": name,
+                "last_updated": meta.get("last_updated"),
+                "num_samples": meta.get("num_samples") if meta.get("num_samples") is not None else "Unavailable",
+                "total_features": meta.get("total_features") if meta.get("total_features") is not None else "Unavailable",
+            })
+        return jsonify(sanitize_json(datasets))
+    except Exception as e:
+        print(e)
+        return jsonify({"error": str(e)})
+
+
+@server.route("/api/global_stats")
+def api_global_stats():
+    try:
+        algo_totals = {}
+        algo_counts = {}
+        for dataset in DATASET_METADATA.keys():
+            results = get_results_for_dataset(dataset) or []
+            for row in results:
+                algo = row.get("algorithm") or "Unknown"
+                mean_f1 = row.get("mean_f1")
+                mean_auc = row.get("mean_auc")
+                if mean_f1 is None and mean_auc is None:
+                    continue
+                totals = algo_totals.get(algo, {"f1": 0.0, "auc": 0.0})
+                counts = algo_counts.get(algo, {"f1": 0, "auc": 0})
+                if mean_f1 is not None:
+                    totals["f1"] += float(mean_f1)
+                    counts["f1"] += 1
+                if mean_auc is not None:
+                    totals["auc"] += float(mean_auc)
+                    counts["auc"] += 1
+                algo_totals[algo] = totals
+                algo_counts[algo] = counts
+        global_stats = []
+        for algo, totals in algo_totals.items():
+            counts = algo_counts.get(algo, {"f1": 0, "auc": 0})
+            mean_f1_global = totals["f1"] / counts["f1"] if counts["f1"] else None
+            mean_auc_global = totals["auc"] / counts["auc"] if counts["auc"] else None
+            global_stats.append({
+                "algorithm": algo,
+                "mean_f1_global": mean_f1_global,
+                "mean_auc_global": mean_auc_global,
+            })
+        return jsonify(sanitize_json(global_stats))
+    except Exception as e:
+        print(e)
+        return jsonify({"error": str(e)})
+
+
+@server.route("/api/algos")
+def api_algorithms():
+    return jsonify(DISPLAY_COMPLEXITY)
+
+
+@server.route("/pdfs/<path:filename>")
+def serve_pdf(filename):
+    return send_from_directory(PDF_DIR, filename)
+
+
+if __name__ == "__main__":
+    port = int(os.environ.get("PORT", 7865))
+    print(f"Loaded {len(DATASET_METADATA)} datasets from {RESULT_DIR}")
+    app.run(host="0.0.0.0", port=port, debug=False)

global.html

@@ -0,0 +1,488 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Global Leaderboard</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        :root {
+            --primary-color: #8e44ad; /* Purple for global view */
+            --secondary-color: #2c3e50;
+            --background-color: #f8f9fa;
+            --text-color: #333;
+            --border-color: #dee2e6;
+            --hover-color: #f1f1f1;
+            --sidebar-width: 280px;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: var(--background-color);
+            color: var(--text-color);
+            display: flex;
+            min-height: 100vh;
+        }
+
+        /* Sidebar Styling */
+        .sidebar {
+            width: var(--sidebar-width);
+            background-color: var(--secondary-color);
+            color: white;
+            position: fixed;
+            height: 100vh;
+            overflow-y: auto;
+            padding: 20px;
+            box-sizing: border-box;
+            left: 0;
+            top: 0;
+            z-index: 100;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+
+        .sidebar h2 {
+            font-size: 1.2em;
+            margin-bottom: 10px;
+            color: #ecf0f1;
+            border-bottom: 1px solid #34495e;
+            padding-bottom: 5px;
+        }
+
+        .nav-links {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+
+        .nav-links li a {
+            display: block;
+            padding: 10px;
+            color: #bdc3c7;
+            text-decoration: none;
+            border-radius: 4px;
+            transition: background 0.2s;
+        }
+
+        .nav-links li a:hover, .nav-links li a.active {
+            background: rgba(255,255,255,0.1);
+            color: white;
+        }
+
+        /* Main Content Styling */
+        .main-content {
+            margin-left: var(--sidebar-width);
+            flex: 1;
+            padding: 40px;
+            max-width: calc(100% - var(--sidebar-width));
+            box-sizing: border-box;
+            min-width: 0;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+
+        header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            border-bottom: 2px solid var(--primary-color);
+            padding-bottom: 10px;
+        }
+
+        h1 {
+            margin: 0;
+            color: var(--secondary-color);
+        }
+
+        .description-box {
+            background-color: #e8f4fd;
+            border-left: 4px solid #3498db;
+            padding: 15px;
+            margin-bottom: 20px;
+            border-radius: 4px;
+        }
+
+        .description-box h3 {
+            margin-top: 0;
+            color: #2980b9;
+        }
+
+        .description-box p {
+            margin: 5px 0;
+            line-height: 1.5;
+        }
+
+        .weights-control {
+            background-color: #f1f1f1;
+            padding: 15px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            border: 1px solid #ddd;
+        }
+        
+        .weights-control h3 {
+            margin-top: 0;
+            margin-bottom: 15px;
+            font-size: 1.1em;
+        }
+
+        .sliders-container {
+            display: flex;
+            gap: 20px;
+            flex-wrap: wrap;
+            align-items: center;
+        }
+
+        .slider-group {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        
+        .slider-group label {
+            font-weight: bold;
+            min-width: 60px;
+        }
+
+        input[type="number"] {
+            width: 80px;
+            padding: 5px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+        }
+
+        input[readonly] {
+            background-color: #e9ecef;
+            color: #666;
+        }
+
+        button.recalc-btn {
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            padding: 8px 20px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 14px;
+            margin-left: auto;
+        }
+
+        button.recalc-btn:hover {
+            opacity: 0.9;
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 10px;
+        }
+
+        th, td {
+            padding: 12px 15px;
+            text-align: left;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        th {
+            background-color: var(--secondary-color);
+            color: white;
+            cursor: pointer;
+            user-select: none;
+            position: sticky;
+            top: 0;
+        }
+
+        th:hover {
+            background-color: #34495e;
+        }
+
+        th .arrow {
+            font-size: 10px;
+            margin-left: 5px;
+            opacity: 0.7;
+        }
+
+        tr:hover {
+            background-color: var(--hover-color);
+        }
+
+        .score-bar {
+            height: 6px;
+            background-color: #e9ecef;
+            border-radius: 3px;
+            overflow: hidden;
+            margin-top: 5px;
+        }
+
+        .score-fill {
+            height: 100%;
+            background-color: var(--primary-color);
+        }
+        
+        .version-tag {
+            font-size: 0.8em;
+            color: #7f8c8d;
+            margin-top: 5px;
+        }
+    </style>
+</head>
+<body>
+
+<div class="sidebar">
+    <div style="text-align: center; margin-bottom: 20px;">
+        <h1 style="font-size: 1.5em; margin: 0; color: white;">AutoFS</h1>
+        <div style="font-size: 0.8em; color: #bdc3c7;">Feature Selection Leaderboard</div>
+    </div>
+
+    <div>
+        <h2>Navigation</h2>
+        <ul class="nav-links">
+            <li><a href="/">📊 Overview</a></li>
+            <li><a href="/#main-table">🏆 Leaderboard</a></li>
+            <li><a href="/#charts">📈 Charts</a></li>
+            <li><a href="/#details">ℹ️ Details</a></li>
+            <li><a href="/global" class="active">🌍 Global Rankings</a></li>
+            <li><a href="/submit">📤 Submit Data/Method</a></li>
+        </ul>
+    </div>
+    
+    <div style="margin-top: auto; padding-top: 20px; border-top: 1px solid #34495e;">
+        <p style="font-size: 0.8em; color: #bdc3c7; text-align: center;">
+            Need help?<br>
+            <a href="mailto:support@autofs.com" style="color: var(--primary-color);">Contact Support</a>
+        </p>
+    </div>
+</div>
+
+<div class="main-content">
+    <div class="container">
+        <header>
+            <div>
+                <h1>🌍 Global Algorithm Rankings</h1>
+                <div id="last-updated" class="version-tag">Data Last Updated: Loading...</div>
+            </div>
+            <!-- Removed redundant back link as sidebar handles navigation -->
+        </header>
+
+        <div class="description-box">
+            <h3>About Global Rankings</h3>
+            <p>
+                This page provides a comprehensive evaluation of feature selection algorithms across all available datasets.
+                Algorithms are ranked based on a weighted score combining <strong>Accuracy (F1)</strong>, <strong>Robustness (AUC)</strong>, and <strong>Efficiency (Time)</strong>.
+                You can adjust the importance of each factor below to customize the ranking criteria.
+            </p>
+        </div>
+
+        <div class="weights-control">
+            <h3>🏆 Scoring Formula: S = α·F1 + β·AUC</h3>
+            <p style="font-size: 0.9em; color: #666; margin-bottom: 10px;">
+                Constraint: α + β = 1.
+            </p>
+            
+            <div class="sliders-container">
+                <div class="slider-group">
+                    <label for="weight-a">F1 (α):</label>
+                    <input type="number" id="weight-a" value="0.5" step="0.05" min="0" max="1">
+                </div>
+                
+                <div class="slider-group">
+                    <label for="weight-b">AUC (β):</label>
+                    <input type="number" id="weight-b" value="0.5" readonly title="Auto-calculated: 1 - α">
+                </div>
+
+                <button class="recalc-btn" onclick="calculateAndRender()">Recalculate Rankings</button>
+            </div>
+        </div>
+
+        <div id="loading-indicator" style="text-align: center; color: #666;">Loading global stats...</div>
+
+        <table id="global-table">
+            <thead>
+                <tr>
+                    <th data-key="rank">#</th>
+                    <th data-key="algorithm">Algorithm <span class="arrow">↕</span></th>
+                    <th data-key="mean_f1_global">Global F1 <span class="arrow">↕</span></th>
+                    <th data-key="mean_auc_global">Global AUC <span class="arrow">↕</span></th>
+                    <th data-key="final_score">Final Score <span class="arrow">↕</span></th>
+                </tr>
+            </thead>
+            <tbody>
+                <!-- Data rows -->
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<script>
+    let rawData = [];
+    let processedData = [];
+    let sortKey = 'final_score';
+    let sortDirection = -1; // Descending by default
+
+    const tableBody = document.querySelector("#global-table tbody");
+    const weightA = document.getElementById("weight-a");
+    const weightB = document.getElementById("weight-b");
+    const lastUpdatedDiv = document.getElementById("last-updated");
+
+    // Fetch datasets info to get latest date
+    function fetchLastUpdated() {
+        fetch("/api/datasets")
+            .then(res => res.json())
+            .then(data => {
+                if (data.length > 0) {
+                    // Sort by date to find latest? Or just take one? 
+                    // Usually we want the overall latest date.
+                    // Let's just pick the first one's date or find the max date if needed.
+                    // For simplicity, just showing "Latest"
+                    const dates = data.map(d => d.last_updated).filter(d => d !== 'Unknown').sort().reverse();
+                    if (dates.length > 0) {
+                        lastUpdatedDiv.textContent = `Data Last Updated: ${dates[0]}`;
+                    } else {
+                        lastUpdatedDiv.textContent = `Data Last Updated: Unknown`;
+                    }
+                }
+            });
+    }
+
+    function fetchGlobalStats() {
+        fetch("/api/global_stats")
+            .then(res => res.json())
+            .then(data => {
+                rawData = data;
+                document.getElementById("loading-indicator").style.display = 'none';
+                calculateAndRender();
+            })
+            .catch(err => {
+                console.error("Error:", err);
+                document.getElementById("loading-indicator").textContent = "Error loading data.";
+            });
+    }
+
+    // Weight auto-adjustment logic
+    function updateWeights(changedInput) {
+        let a = parseFloat(weightA.value) || 0;
+        
+        // Clamp inputs to 0-1
+        if (a < 0) a = 0; if (a > 1) a = 1;
+
+        if (changedInput === 'a') {
+            let b = 1 - a;
+            // Update UI
+            weightA.value = parseFloat(a.toFixed(2));
+            weightB.value = parseFloat(b.toFixed(2));
+        }
+    }
+
+    weightA.addEventListener('input', () => updateWeights('a'));
+
+    function calculateAndRender() {
+        const a = parseFloat(weightA.value) || 0;
+        const b = parseFloat(weightB.value) || 0;
+
+        // Process data
+        processedData = rawData.map(d => {
+            const score = (a * d.mean_f1_global) + (b * d.mean_auc_global);
+
+            return {
+                ...d,
+                final_score: score
+            };
+        });
+
+        sortData();
+        renderTable();
+    }
+
+    function sortData() {
+        processedData.sort((x, y) => {
+            const valX = x[sortKey];
+            const valY = y[sortKey];
+            
+            if (valX < valY) return -1 * sortDirection;
+            if (valX > valY) return 1 * sortDirection;
+            return 0;
+        });
+    }
+
+    function safeFixed(val, digits=4) {
+        if (val === undefined || val === null) return 'N/A';
+        return Number(val).toFixed(digits);
+    }
+
+    function renderTable() {
+        tableBody.innerHTML = "";
+        
+        if (processedData.length === 0) {
+            tableBody.innerHTML = '<tr><td colspan="5" style="text-align:center;">No data available</td></tr>';
+            return;
+        }
+
+        processedData.forEach((row, index) => {
+            const tr = document.createElement("tr");
+            
+            // Highlight rank 1-3
+            let rankHtml = index + 1;
+            if (index === 0) rankHtml = '🥇 1';
+            if (index === 1) rankHtml = '🥈 2';
+            if (index === 2) rankHtml = '🥉 3';
+
+            tr.innerHTML = `
+                <td>${rankHtml}</td>
+                <td><strong>${row.algorithm}</strong> <span style="font-size:0.8em; color:#999">(${row.datasets_count} datasets)</span></td>
+                <td>${safeFixed(row.mean_f1_global)}</td>
+                <td>${safeFixed(row.mean_auc_global)}</td>
+                <td>
+                    <strong>${safeFixed(row.final_score)}</strong>
+                    <div class="score-bar"><div class="score-fill" style="width: ${Math.min(row.final_score * 100, 100)}%"></div></div>
+                </td>
+            `;
+            tableBody.appendChild(tr);
+        });
+        
+        updateSortArrows();
+    }
+    
+    function updateSortArrows() {
+         document.querySelectorAll('th .arrow').forEach(span => span.textContent = '↕');
+         const activeHeader = document.querySelector(`th[data-key="${sortKey}"] .arrow`);
+         if (activeHeader) activeHeader.textContent = sortDirection === 1 ? '↑' : '↓';
+    }
+
+    document.querySelectorAll('th[data-key]').forEach(th => {
+        th.addEventListener('click', () => {
+            const key = th.dataset.key;
+            if (sortKey === key) {
+                sortDirection *= -1;
+            } else {
+                sortKey = key;
+                sortDirection = (key === 'rank') ? 1 : -1;
+            }
+            if (key === 'rank') {
+                sortKey = 'final_score';
+                sortDirection = -1;
+            }
+            sortData();
+            renderTable();
+        });
+    });
+
+    document.addEventListener("DOMContentLoaded", () => {
+        fetchLastUpdated();
+        fetchGlobalStats();
+    });
+
+</script>
+
+</body>
+</html>

index.html

@@ -0,0 +1,1007 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AutoFS Leaderboard</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        :root {
+            --primary-color: #3498db;
+            --secondary-color: #2c3e50;
+            --background-color: #f8f9fa;
+            --text-color: #333;
+            --border-color: #dee2e6;
+            --hover-color: #f1f1f1;
+            --accent-color: #e67e22;
+            --sidebar-width: 280px;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: var(--background-color);
+            color: var(--text-color);
+            display: flex;
+            min-height: 100vh;
+        }
+
+        /* Sidebar Styling */
+        .sidebar {
+            width: var(--sidebar-width);
+            background-color: var(--secondary-color);
+            color: white;
+            position: fixed;
+            height: 100vh;
+            overflow-y: auto;
+            padding: 20px;
+            box-sizing: border-box;
+            left: 0;
+            top: 0;
+            z-index: 100;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+
+        .sidebar h2 {
+            font-size: 1.2em;
+            margin-bottom: 10px;
+            color: #ecf0f1;
+            border-bottom: 1px solid #34495e;
+            padding-bottom: 5px;
+        }
+
+        /* Stats Cards */
+        .stats-grid {
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 10px;
+        }
+
+        .stat-card {
+            background: rgba(255,255,255,0.1);
+            padding: 10px;
+            border-radius: 6px;
+            text-align: center;
+        }
+
+        .stat-value {
+            font-size: 1.2em;
+            font-weight: bold;
+            color: var(--accent-color);
+        }
+
+        .stat-label {
+            font-size: 0.8em;
+            color: #bdc3c7;
+        }
+
+        /* Navigation */
+        .nav-links {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+
+        .nav-links li a {
+            display: block;
+            padding: 10px;
+            color: #bdc3c7;
+            text-decoration: none;
+            border-radius: 4px;
+            transition: background 0.2s;
+        }
+
+        .nav-links li a:hover {
+            background: rgba(255,255,255,0.1);
+            color: white;
+        }
+
+        /* Sidebar Filters */
+        .sidebar-filters label {
+            display: block;
+            margin-bottom: 5px;
+            font-size: 0.9em;
+            color: #bdc3c7;
+        }
+
+        .sidebar-input {
+            width: 100%;
+            margin-bottom: 15px;
+            padding: 5px;
+            box-sizing: border-box;
+            background: rgba(255,255,255,0.9);
+            border: none;
+            border-radius: 4px;
+        }
+        
+        input[type="range"] {
+            width: 100%;
+        }
+
+        .checkbox-group {
+            max-height: 150px;
+            overflow-y: auto;
+            background: rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 4px;
+        }
+
+        .checkbox-item {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+            margin-bottom: 3px;
+            font-size: 0.85em;
+        }
+
+        /* Main Content Styling */
+        .main-content {
+            margin-left: var(--sidebar-width);
+            flex: 1;
+            padding: 40px;
+            max-width: calc(100% - var(--sidebar-width));
+            box-sizing: border-box;
+            min-width: 0; /* Prevent flex item from overflowing */
+        }
+
+        header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            border-bottom: 2px solid var(--primary-color);
+            padding-bottom: 10px;
+        }
+
+        .subtitle {
+            font-size: 0.9em;
+            color: #7f8c8d;
+            margin-top: 5px;
+        }
+
+        /* Info Boxes */
+        .info-section {
+            display: flex;
+            gap: 20px;
+            margin-bottom: 20px;
+            flex-wrap: wrap;
+        }
+
+        .description-box, .metadata-box {
+            flex: 1;
+            background-color: white;
+            border-left: 4px solid #3498db;
+            padding: 15px;
+            border-radius: 4px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        }
+
+        .metadata-box {
+            border-left-color: #f1c40f;
+        }
+
+        /* Table */
+        .table-container {
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            overflow-x: auto;
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+
+        th, td {
+            padding: 12px 15px;
+            text-align: left;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        th {
+            background-color: #f8f9fa;
+            color: var(--secondary-color);
+            cursor: pointer;
+            user-select: none;
+        }
+
+        th:hover {
+            background-color: #e9ecef;
+        }
+        
+        tr:hover {
+            background-color: var(--hover-color);
+        }
+
+        .algo-link {
+            color: var(--primary-color);
+            cursor: pointer;
+            font-weight: bold;
+        }
+        .algo-link:hover { text-decoration: underline; }
+
+        .features-cell {
+            max-width: 200px;
+            cursor: pointer;
+        }
+        .truncate-text {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: block;
+        }
+        .features-cell:hover .truncate-text { text-decoration: underline; color: var(--primary-color); }
+
+        /* Charts */
+        .charts-section {
+            margin-top: 30px;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+
+        .chart-container {
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            position: relative;
+            height: 60vh;
+            min-height: 400px;
+            max-height: 700px;
+            width: 100%;
+            box-sizing: border-box; /* Fix overflow */
+        }
+        
+        canvas {
+            width: 100% !important;
+            height: 100% !important;
+        }
+
+        /* Modal */
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0,0,0,0.5);
+        }
+
+        .modal-content {
+            background-color: white;
+            margin: 10% auto;
+            padding: 20px;
+            border-radius: 8px;
+            width: 50%;
+            max-width: 600px;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        }
+
+        .close { float: right; font-size: 28px; cursor: pointer; }
+        .feature-tag {
+            display: inline-block;
+            background-color: #e1ecf4;
+            color: #2c3e50;
+            padding: 4px 8px;
+            border-radius: 4px;
+            margin: 2px;
+            font-size: 0.9em;
+        }
+
+        /* PDF Sidebar */
+        .pdf-sidebar {
+            position: fixed;
+            top: 0;
+            right: -50%;
+            width: 50%;
+            height: 100%;
+            background: white;
+            box-shadow: -2px 0 5px rgba(0,0,0,0.2);
+            z-index: 2000;
+            transition: right 0.3s ease-in-out;
+            display: flex;
+            flex-direction: column;
+        }
+        .pdf-sidebar.open { right: 0; }
+        .sidebar-header {
+            padding: 10px 20px;
+            background: var(--primary-color);
+            color: white;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .sidebar-content { flex: 1; }
+        .sidebar-content iframe { width: 100%; height: 100%; border: none; }
+        
+        .loading { text-align: center; padding: 20px; color: #666; }
+    </style>
+</head>
+<body>
+
+<!-- Sidebar Navigation & Filters -->
+<aside class="sidebar">
+    <div style="text-align: center; margin-bottom: 20px;">
+        <h1 style="font-size: 1.5em; margin: 0; color: white;">AutoFS</h1>
+        <div style="font-size: 0.8em; color: #bdc3c7;">Feature Selection Leaderboard</div>
+    </div>
+
+    <!-- Stats -->
+    <div class="stats-grid">
+        <div class="stat-card">
+            <div class="stat-value" id="stat-count">-</div>
+            <div class="stat-label">Methods</div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-value" id="stat-best">-</div>
+            <div class="stat-label">Best F1</div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-value" id="stat-updated">-</div>
+            <div class="stat-label">Updated</div>
+        </div>
+    </div>
+
+    <!-- Navigation -->
+    <div>
+        <h2>Navigation</h2>
+        <ul class="nav-links">
+            <li><a href="#overview">📊 Overview</a></li>
+            <li><a href="#main-table">🏆 Leaderboard</a></li>
+            <li><a href="/#charts">📈 Charts</a></li>
+            <li><a href="#details">ℹ️ Details</a></li>
+            <li><a href="/global">🌍 Global Rankings</a></li>
+            <li><a href="/submit">📤 Submit Data/Method</a></li>
+        </ul>
+    </div>
+
+    <!-- Filters -->
+    <div class="sidebar-filters">
+        <h2>Filters</h2>
+        
+        <label>Dataset:</label>
+        <select id="dataset-select" class="sidebar-input">
+            <option value="" disabled selected>Loading...</option>
+        </select>
+
+        <label>Min F1 Score: <span id="val-f1" style="color:var(--accent-color)">0.0000</span></label>
+        <input type="range" id="filter-f1" min="0" max="1" step="0.0001" value="0">
+
+        <label>Del. Rate: <span id="val-del-rate" style="color:var(--accent-color)">0% - 100%</span></label>
+        <div style="display: flex; gap: 5px;">
+            <input type="range" id="filter-del-min" min="0" max="100" value="0" style="width: 50%;">
+            <input type="range" id="filter-del-max" min="0" max="100" value="100" style="width: 50%;">
+        </div>
+
+        <label>Max Features: <span id="val-feats" style="color:var(--accent-color)">All</span></label>
+        <input type="range" id="filter-feats" min="1" max="100" step="1" value="100">
+
+        <label>Complexity:</label>
+        <select id="filter-complexity" class="sidebar-input" onchange="applyFilters()">
+            <option value="all">All Complexities</option>
+            <!-- Populated via JS -->
+        </select>
+
+        <label>Algorithms:</label>
+        <div id="algo-checkboxes" class="checkbox-group">
+            <!-- Populated via JS -->
+        </div>
+    </div>
+</aside>
+
+<!-- Main Content -->
+<main class="main-content">
+    <header>
+        <div>
+            <h1 style="color: var(--secondary-color); margin: 0;">🏆 Leaderboard Dashboard</h1>
+            <div class="subtitle">Comprehensive benchmark of feature selection algorithms across diverse datasets.</div>
+        </div>
+    </header>
+
+    <div class="intro-text" style="background: white; padding: 20px; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); color: #555; line-height: 1.6; font-size: 0.95em;">
+        <p style="margin-top:0">Feature selection is a critical step in machine learning and data analysis, aimed at <strong>identifying the most relevant subset of features</strong> from a high-dimensional dataset. By eliminating irrelevant or redundant features, feature selection not only <strong>improves model interpretability</strong> but also <strong>enhances predictive performance</strong> and <strong>reduces computational cost</strong>.</p>
+        <p>This leaderboard presents a comprehensive comparison of various feature selection algorithms across multiple benchmark datasets. It includes several <strong>information-theoretic and mutual information-based methods</strong>, which quantify the statistical dependency between features and the target variable to rank feature relevance. Mutual information approaches are particularly effective in <strong>capturing both linear and non-linear relationships</strong>, making them suitable for complex datasets where classical correlation-based methods may fail.</p>
+        <p>The leaderboard is structured to reflect algorithm performance across different datasets, allowing for an objective assessment of each method’s ability to select informative features. For each method and dataset combination, metrics such as <strong>classification accuracy, F1-score, and area under the ROC curve (AUC)</strong> are reported, providing insights into how the selected features contribute to predictive modeling.</p>
+        <p style="margin-bottom:0">By examining this feature selection leaderboard, researchers and practitioners can gain a better understanding of which methods perform consistently well across diverse domains, helping to guide the choice of feature selection strategies in real-world applications. This serves as a valuable resource for both benchmarking and method development in the field of feature selection.</p>
+    </div>
+
+    <div id="overview" class="info-section">
+        <div class="description-box">
+            <h3>About This Dataset</h3>
+            <p>
+                Analyzing performance on <strong><span id="desc-dataset-name">Selected</span></strong>.
+                Compare F1 scores, AUC stability, and computational efficiency to find the optimal method for your data.
+            </p>
+        </div>
+        <div class="metadata-box">
+            <h3>Dataset Metadata</h3>
+            <p><strong>Name:</strong> <span id="meta-name">-</span></p>
+            <p><strong>Samples:</strong> <span id="meta-samples">-</span> | <strong>Features:</strong> <span id="meta-features">-</span></p>
+            <p><strong>Last Updated:</strong> <span id="meta-updated">-</span></p>
+        </div>
+    </div>
+
+    <div id="main-table" style="margin-top: 30px;">
+        <h3>📋 Detailed Rankings</h3>
+        <div id="loading-indicator" class="loading" style="display: none;">Loading data...</div>
+        <div class="table-container">
+            <table id="result-table">
+                <thead><!-- Headers generated dynamically --></thead>
+                <tbody><!-- Data rows --></tbody>
+            </table>
+        </div>
+    </div>
+
+    <div id="charts" class="charts-section">
+        <div class="chart-container">
+            <h3>📊 Performance Comparison</h3>
+            <div style="position: absolute; top: 15px; right: 20px; z-index: 10;">
+                <select id="chart-view-mode" onchange="updateView()" style="padding: 5px;">
+                    <option value="overall">Overall (Mean)</option>
+                    <option value="classifiers-f1">F1 by Classifier</option>
+                    <option value="classifiers-auc">AUC by Classifier</option>
+                </select>
+            </div>
+            <canvas id="scoreChart"></canvas>
+            <div id="score-debug" style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); color:red; display:none; background:rgba(255,255,255,0.9); padding:10px; border:1px solid red;"></div>
+        </div>
+        
+        <div class="chart-container">
+            <h3>📉 Pareto Frontier (Trade-off)</h3>
+            <p style="font-size:0.9em; color:#666; margin-top:-10px;">X: Selected Features vs Y: F1 Score (Top-Left is better)</p>
+            <canvas id="paretoChart"></canvas>
+        </div>
+    </div>
+
+    
+    <div id="details" style="margin-top: 50px; color: #999; text-align: center; border-top: 1px solid #eee; padding-top: 20px;">
+        <p>AutoFS Benchmark Platform &copy; 2026</p>
+    </div>
+</main>
+
+<!-- Modal -->
+<div id="details-modal" class="modal">
+    <div class="modal-content">
+        <span class="close">&times;</span>
+        <h2 id="modal-title">Algorithm Details</h2>
+        <div id="modal-body"></div>
+    </div>
+</div>
+
+<!-- PDF Sidebar -->
+<div id="pdf-sidebar" class="pdf-sidebar">
+    <div class="sidebar-header">
+        <h3 id="sidebar-title" style="margin:0; color:white;">Paper Preview</h3>
+        <span class="close" onclick="closeSidebar()" style="color:white; opacity:0.8; font-size: 28px; cursor: pointer;">&times;</span>
+    </div>
+    <div class="sidebar-content">
+        <iframe id="pdf-frame" src=""></iframe>
+    </div>
+</div>
+
+<script>
+    let currentResults = [];
+    let filteredResults = [];
+    let allDatasets = [];
+    let algoComplexityMap = {};
+    let sortDirection = 1; 
+    let lastSortKey = '';
+
+    // Elements
+    const datasetSelect = document.getElementById("dataset-select");
+    const loadingIndicator = document.getElementById("loading-indicator");
+    const tableHead = document.querySelector("#result-table thead");
+    const tableBody = document.querySelector("#result-table tbody");
+    
+    // Filter Elements
+    const filterF1 = document.getElementById('filter-f1');
+    const filterFeats = document.getElementById('filter-feats');
+    const filterDelMin = document.getElementById('filter-del-min');
+    const filterDelMax = document.getElementById('filter-del-max');
+    const filterComplexity = document.getElementById('filter-complexity');
+    const algoCheckboxes = document.getElementById('algo-checkboxes');
+    
+    // Display Values
+    const valF1 = document.getElementById('val-f1');
+    const valFeats = document.getElementById('val-feats');
+    const valDelRate = document.getElementById('val-del-rate');
+
+    // Stats Elements
+    const statCount = document.getElementById('stat-count');
+    const statBest = document.getElementById('stat-best');
+    const statUpdated = document.getElementById('stat-updated');
+
+    // Metadata Elements
+    const metaName = document.getElementById('meta-name');
+    const metaSamples = document.getElementById('meta-samples');
+    const metaFeatures = document.getElementById('meta-features');
+    const metaUpdated = document.getElementById('meta-updated');
+    const descName = document.getElementById('desc-dataset-name');
+
+    // Charts
+    let scoreChartInstance = null;
+    let paretoChartInstance = null;
+
+    const VIEW_CONFIG = {
+        'overall': [
+            { key: 'mean_f1', label: 'Mean F1' },
+            { key: 'mean_auc', label: 'Mean AUC' }
+        ],
+        'classifiers-f1': [
+            { key: 'metrics.nb.f1', label: 'NB F1' },
+            { key: 'metrics.svm.f1', label: 'SVM F1' },
+            { key: 'metrics.rf.f1', label: 'RF F1' }
+        ],
+        'classifiers-auc': [
+            { key: 'metrics.nb.auc', label: 'NB AUC' },
+            { key: 'metrics.svm.auc', label: 'SVM AUC' },
+            { key: 'metrics.rf.auc', label: 'RF AUC' }
+        ]
+    };
+
+    // Modal Logic
+    const modal = document.getElementById("details-modal");
+    document.querySelector(".close").onclick = () => modal.style.display = "none";
+    window.onclick = (e) => { if (e.target == modal) modal.style.display = "none"; };
+
+    // Initialization
+    document.addEventListener("DOMContentLoaded", () => {
+        fetchAlgorithms();
+        fetchDatasets();
+    });
+
+    function fetchAlgorithms() {
+        fetch("/api/algos")
+            .then(res => res.json())
+            .then(data => {
+                algoComplexityMap = data;
+                // Populate Complexity Filter
+                const complexities = new Set();
+                Object.values(data).forEach(c => {
+                    if (c.time) complexities.add(c.time); // Use time formula as key
+                });
+                complexities.forEach(c => {
+                    const opt = document.createElement('option');
+                    opt.value = c;
+                    opt.textContent = c;
+                    filterComplexity.appendChild(opt);
+                });
+            })
+            .catch(console.error);
+    }
+
+    function fetchDatasets() {
+        fetch("/api/datasets")
+            .then(res => res.json())
+            .then(data => {
+                allDatasets = data;
+                datasetSelect.innerHTML = "";
+                data.forEach(ds => {
+                    const opt = document.createElement("option");
+                    opt.value = ds.name;
+                    opt.textContent = ds.name;
+                    datasetSelect.appendChild(opt);
+                });
+                if (data.length > 0) loadDataset(data[0].name);
+            });
+    }
+
+    datasetSelect.addEventListener("change", (e) => loadDataset(e.target.value));
+
+    function loadDataset(name) {
+        loadingIndicator.style.display = "block";
+        
+        // Update Metadata
+        const ds = allDatasets.find(d => d.name === name);
+        if (ds) {
+            metaName.textContent = ds.name;
+            metaSamples.textContent = ds.num_samples || 'N/A';
+            metaFeatures.textContent = ds.total_features || 'N/A';
+            metaUpdated.textContent = ds.last_updated;
+            descName.textContent = ds.name;
+            statUpdated.textContent = ds.last_updated;
+            
+            // Update Max Features Slider
+            if (ds.total_features && ds.total_features !== 'Unavailable') {
+                filterFeats.max = ds.total_features;
+                filterFeats.value = ds.total_features;
+                valFeats.textContent = ds.total_features;
+            } else {
+                filterFeats.max = 100; // Default
+                filterFeats.value = 100;
+                valFeats.textContent = "100+";
+            }
+        }
+
+        fetch(`/api/results?dataset=${name}`)
+            .then(res => res.json())
+            .then(data => {
+                loadingIndicator.style.display = "none";
+                currentResults = data;
+
+                // Adjust Filter Ranges based on Data
+                if (data.length > 0) {
+                    const f1Scores = data.map(d => d.mean_f1 || 0);
+                    
+                    const minF1 = Math.min(...f1Scores);
+                    const maxF1 = Math.max(...f1Scores);
+
+                    // Set F1 Range (sensible defaults)
+                    // Set min to a bit below the lowest score to maximize resolution
+                    const safeMin = Math.max(0, Math.floor((Math.min(...f1Scores) - 0.1) * 10) / 10);
+                    filterF1.min = safeMin;
+                    filterF1.max = 1;
+                    filterF1.value = safeMin;
+                    valF1.textContent = safeMin.toFixed(4);
+                }
+                
+                // Populate Algorithm Checkboxes
+                const algos = [...new Set(data.map(r => r.algorithm))].sort();
+                algoCheckboxes.innerHTML = `
+                    <div class="checkbox-item">
+                        <input type="checkbox" id="algo-all" checked onchange="toggleAllAlgos(this)">
+                        <label for="algo-all" style="font-weight:bold">Select All</label>
+                    </div>
+                `;
+                algos.forEach(algo => {
+                    algoCheckboxes.innerHTML += `
+                        <div class="checkbox-item">
+                            <input type="checkbox" value="${algo}" checked class="algo-cb" onchange="applyFilters()">
+                            <label>${algo}</label>
+                        </div>
+                    `;
+                });
+
+                applyFilters();
+                renderTableHeader();
+            })
+            .catch(err => {
+                console.error(err);
+                loadingIndicator.style.display = "none";
+            });
+    }
+
+    function toggleAllAlgos(source) {
+        document.querySelectorAll('.algo-cb').forEach(cb => {
+            cb.checked = source.checked;
+        });
+        applyFilters();
+    }
+
+    // Filter Logic
+    [filterF1, filterFeats, filterDelMin, filterDelMax].forEach(el => el.addEventListener('input', applyFilters));
+
+    function applyFilters() {
+        const minF1 = parseFloat(filterF1.value);
+        const maxFeats = parseFloat(filterFeats.value);
+        const minDel = parseInt(filterDelMin.value) / 100;
+        const maxDel = parseInt(filterDelMax.value) / 100;
+        const selectedComplexity = filterComplexity.value;
+        
+        // Get checked algorithms
+        const checkedAlgos = Array.from(document.querySelectorAll('.algo-cb:checked')).map(cb => cb.value);
+
+        // Update UI Values
+        valF1.textContent = minF1.toFixed(4);
+        valFeats.textContent = maxFeats;
+        valDelRate.textContent = `${(minDel*100).toFixed(0)}% - ${(maxDel*100).toFixed(0)}%`;
+
+        filteredResults = currentResults.filter(r => {
+            const f1 = r.mean_f1 || 0;
+            const feats = r.num_features || (r.selected_features ? r.selected_features.length : 0);
+            
+            // Algo Filter
+            if (!checkedAlgos.includes(r.algorithm)) return false;
+
+            // Metric Filters
+            if (f1 < minF1) return false;
+            if (feats > maxFeats) return false;
+
+            // Deletion Rate Check
+            const ds = allDatasets.find(d => d.name === datasetSelect.value);
+            let totalFeats = 0;
+            if (ds && ds.total_features && ds.total_features !== 'Unavailable') {
+                totalFeats = parseInt(ds.total_features);
+            }
+            
+            if (totalFeats > 0) {
+                const delRate = 1.0 - (feats / totalFeats);
+                if (delRate < minDel || delRate > maxDel) return false;
+            }
+
+            // Complexity Filter
+            if (selectedComplexity !== 'all') {
+                const algoInfo = algoComplexityMap[r.algorithm];
+                if (!algoInfo || algoInfo.time !== selectedComplexity) return false;
+            }
+
+            return true;
+        });
+
+        updateDashboard(filteredResults);
+        renderTable(filteredResults);
+        updateCharts(filteredResults);
+    }
+
+    function updateDashboard(results) {
+        // Update Stats
+        statCount.textContent = results.length;
+        if (results.length > 0) {
+            const best = results.reduce((prev, curr) => (prev.mean_f1 > curr.mean_f1) ? prev : curr, {mean_f1:0, algorithm:'-'});
+            statBest.textContent = `${best.algorithm} (${Number(best.mean_f1).toFixed(3)})`;
+        } else {
+            statBest.textContent = "-";
+        }
+    }
+
+    function renderTableHeader() {
+        const viewMode = document.getElementById('chart-view-mode').value;
+        const config = VIEW_CONFIG[viewMode];
+        let html = `<tr>
+            <th>Rank</th>
+            <th onclick="sortTable('algorithm')">Algorithm <span class="arrow"></span></th>`;
+        config.forEach(col => {
+            html += `<th onclick="sortTable('${col.key}')">${col.label} <span class="arrow"></span></th>`;
+        });
+        html += `<th onclick="sortTable('selected_features')">Selected Features <span class="arrow"></span></th>
+                 </tr>`;
+        tableHead.innerHTML = html;
+    }
+
+    function renderTable(results) {
+        tableBody.innerHTML = "";
+        if (results.length === 0) {
+            tableBody.innerHTML = '<tr><td colspan="10" style="text-align:center;">No results match filters</td></tr>';
+            return;
+        }
+
+        const viewMode = document.getElementById('chart-view-mode').value;
+        const config = VIEW_CONFIG[viewMode];
+        const getVal = (obj, path) => path.split('.').reduce((acc, part) => acc && acc[part], obj);
+
+        // Calculate Best Values (Max for Score, Min for Time/Feats)
+        const bestValues = {};
+        
+        // Metrics (Max is best)
+        config.forEach(col => {
+            const values = results.map(r => Number(getVal(r, col.key) || 0));
+            bestValues[col.key] = Math.max(...values);
+        });
+
+        // Features (Min is best)
+        const featCounts = results.map(r => Array.isArray(r.selected_features) ? r.selected_features.length : Infinity);
+        bestValues['features'] = Math.min(...featCounts);
+
+        results.forEach((row, index) => {
+            const tr = document.createElement("tr");
+            let metricsHTML = '';
+            
+            config.forEach(col => {
+                const rawVal = getVal(row, col.key);
+                const val = (rawVal !== undefined && rawVal !== null) ? Number(rawVal) : 0;
+                // Compare formatted values to avoid precision issues
+                const isBest = val.toFixed(4) === bestValues[col.key].toFixed(4) && val > 0;
+                const style = isBest ? 'font-weight:bold; color:var(--primary-color);' : '';
+                metricsHTML += `<td style="${style}">${val.toFixed(4)}</td>`;
+            });
+
+            // Features
+            const featText = Array.isArray(row.selected_features) ? row.selected_features.join(", ") : "N/A";
+            const featCount = Array.isArray(row.selected_features) ? row.selected_features.length : 0;
+            const isBestFeat = featCount === bestValues['features'];
+            const featStyle = isBestFeat ? 'font-weight:bold; color:var(--primary-color);' : '';
+
+            tr.innerHTML = `
+                <td>${index + 1}</td>
+                <td class="algo-link" onclick="openPdf('${row.algorithm}')">${row.algorithm || 'Unknown'}</td>
+                ${metricsHTML}
+                <td class="features-cell" onclick="showDetails(${index})" title="${featText}">
+                    <div class="truncate-text" style="${featStyle}">${featText}</div>
+                </td>
+            `;
+            tableBody.appendChild(tr);
+        });
+    }
+
+    function showDetails(index) {
+        const row = filteredResults[index];
+        if (!row) return;
+        
+        const algo = row.algorithm;
+        const features = Array.isArray(row.selected_features) ? row.selected_features.join(", ") : "";
+        const metrics = row.metrics || {};
+
+        document.getElementById("modal-title").innerText = `${algo} - Details`;
+        const list = features.split(", ").map(f => `<span class="feature-tag">${f}</span>`).join(" ");
+        
+        // Build Classifier Table
+        let classifierTable = `
+            <table style="width:100%; margin-top:10px; border-collapse:collapse;">
+                <thead>
+                    <tr style="background:#f8f9fa;">
+                        <th style="padding:8px; border:1px solid #dee2e6;">Classifier</th>
+                        <th style="padding:8px; border:1px solid #dee2e6;">F1 Score</th>
+                        <th style="padding:8px; border:1px solid #dee2e6;">AUC Score</th>
+                    </tr>
+                </thead>
+                <tbody>
+        `;
+        
+        ['nb', 'svm', 'rf'].forEach(clf => {
+            const m = metrics[clf] || {};
+            classifierTable += `
+                <tr>
+                    <td style="padding:8px; border:1px solid #dee2e6;">${clf.toUpperCase()}</td>
+                    <td style="padding:8px; border:1px solid #dee2e6;">${m.f1 ? Number(m.f1).toFixed(4) : '-'}</td>
+                    <td style="padding:8px; border:1px solid #dee2e6;">${m.auc ? Number(m.auc).toFixed(4) : '-'}</td>
+                </tr>
+            `;
+        });
+        classifierTable += `</tbody></table>`;
+
+        document.getElementById("modal-body").innerHTML = `
+            <p><strong>Selected Features (${features ? features.split(", ").length : 0}):</strong></p>
+            <div style="line-height:1.6; max-height:200px; overflow-y:auto;">${list}</div>
+            <hr>
+            <p><strong>Classifier Performance:</strong></p>
+            ${classifierTable}
+            <hr>
+            <p><strong>Complexity:</strong></p>
+            <pre style="background:#f4f4f4; padding:10px; border-radius:4px;">${JSON.stringify(algoComplexityMap[algo] || 'Unknown', null, 2)}</pre>
+        `;
+        modal.style.display = "block";
+    }
+
+    function updateView() {
+        renderTableHeader();
+        renderTable(filteredResults);
+        updateCharts(filteredResults);
+    }
+
+    function updateCharts(results) {
+        const topResults = results.slice(0, 20);
+        const labels = topResults.map(r => r.algorithm);
+        const viewMode = document.getElementById('chart-view-mode').value;
+        
+        // Prepare datasets based on viewMode (same as before)
+        let datasets = [];
+        const debugEl = document.getElementById('score-debug');
+        if (debugEl) debugEl.style.display = 'none';
+
+        if (viewMode === 'overall') {
+            const f1Data = topResults.map(r => r.mean_f1);
+            const aucData = topResults.map(r => r.mean_auc);
+            
+            datasets = [
+                {
+                    label: 'Mean F1', 
+                    data: f1Data,
+                    backgroundColor: 'rgba(52, 152, 219, 0.7)'
+                },
+                {
+                    label: 'Mean AUC', 
+                    data: aucData,
+                    backgroundColor: 'rgba(46, 204, 113, 0.7)'
+                }
+            ];
+
+            // Debug Check for AUC
+            // const validAuc = aucData.some(v => v > 0);
+            // if (!validAuc && debugEl) {
+            //     debugEl.innerHTML = "<strong>Warning:</strong> No AUC data found for these algorithms.<br>Check backend 'metrics.x.auc' or JSON source.";
+            //     debugEl.style.display = 'block';
+            // }
+
+        } else if (viewMode === 'classifiers-f1') {
+            datasets = ['nb', 'svm', 'rf'].map((clf, i) => ({
+                label: clf.toUpperCase(),
+                data: topResults.map(r => r.metrics?.[clf]?.f1),
+                backgroundColor: `hsla(${200 + i*40}, 70%, 60%, 0.7)`
+            }));
+        } else if (viewMode === 'classifiers-auc') {
+            datasets = ['nb', 'svm', 'rf'].map((clf, i) => {
+                const data = topResults.map(r => r.metrics?.[clf]?.auc);
+                // Check if data exists
+                // if (data.every(v => !v)) {
+                //      if (debugEl) {
+                //         debugEl.innerHTML += `<br>Missing AUC for ${clf.toUpperCase()}`;
+                //         debugEl.style.display = 'block';
+                //      }
+                // }
+                return {
+                    label: clf.toUpperCase(),
+                    data: data,
+                    backgroundColor: `hsla(${100 + i*40}, 70%, 60%, 0.7)`
+                };
+            });
+        }
+
+        // Score Chart
+        if (scoreChartInstance) scoreChartInstance.destroy();
+        scoreChartInstance = new Chart(document.getElementById('scoreChart'), {
+            type: 'bar',
+            data: { labels, datasets },
+            options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false }
+        });
+
+        // Pareto Chart
+        if (paretoChartInstance) paretoChartInstance.destroy();
+        const paretoData = results.map(r => ({
+            x: r.num_features || (r.selected_features ? r.selected_features.length : 0),
+            y: r.mean_f1,
+            algorithm: r.algorithm
+        }));
+        paretoChartInstance = new Chart(document.getElementById('paretoChart'), {
+            type: 'scatter',
+            data: {
+                datasets: [{
+                    label: 'Algo',
+                    data: paretoData,
+                    backgroundColor: 'rgba(230, 126, 34, 0.7)'
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                scales: {
+                    x: { title: {display:true, text:'Num Features'} },
+                    y: { title: {display:true, text:'Mean F1'} }
+                },
+                plugins: {
+                    tooltip: {
+                        callbacks: {
+                            label: ctx => `${ctx.raw.algorithm}: F1=${ctx.raw.y.toFixed(4)}, Feats=${ctx.raw.x}`
+                        }
+                    }
+                }
+            }
+        });
+    }
+
+    function sortTable(key) {
+        if (lastSortKey === key) sortDirection *= -1;
+        else { sortDirection = 1; lastSortKey = key; }
+        
+        const getVal = (obj, path) => path.split('.').reduce((acc, part) => acc && acc[part], obj);
+        
+        filteredResults.sort((a, b) => {
+            let valA = getVal(a, key);
+            let valB = getVal(b, key);
+            if (key === 'selected_features') {
+                valA = Array.isArray(valA) ? valA.length : 0;
+                valB = Array.isArray(valB) ? valB.length : 0;
+            }
+            if (valA === undefined) valA = -Infinity;
+            if (valB === undefined) valB = -Infinity;
+            return (valA < valB ? -1 : 1) * sortDirection;
+        });
+        
+        renderTable(filteredResults);
+        document.querySelectorAll('th .arrow').forEach(span => span.textContent = '↕');
+        const th = Array.from(document.querySelectorAll('th')).find(th => th.getAttribute('onclick').includes(`'${key}'`));
+        if (th) th.querySelector('.arrow').textContent = sortDirection === 1 ? '↑' : '↓';
+    }
+
+    // PDF Sidebar
+    function openPdf(algoName) {
+        if (!algoName) return;
+        const filename = algoName.toUpperCase() + ".pdf";
+        document.getElementById('pdf-frame').src = `/pdfs/${filename}`;
+        document.getElementById('pdf-sidebar').classList.add('open');
+    }
+    function closeSidebar() {
+        document.getElementById('pdf-sidebar').classList.remove('open');
+        setTimeout(() => document.getElementById('pdf-frame').src = "", 300);
+    }
+</script>
+
+</body>
+</html>