Upload 12 files

Webapp/app.py

@@ -1,41 +1,50 @@
 import os
 import sys
-import pickle
 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
 
-# Add project root to sys.path to import leaderboard
 sys.path.append(os.path.abspath(os.path.join(os.path.dirname(__file__), "..")))
 from leaderboard import rank_results
-# ===============================
-# 基本路径配置
-# ===============================
-PROJECT_ROOT = os.path.abspath(os.path.join(os.path.dirname(__file__), ".."))
+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")
-DATASET_DIR = os.path.join(PROJECT_ROOT, "datasets")
+DATA_DIR = os.path.join(PROJECT_ROOT, "data")
 PDF_DIR = os.path.join(PROJECT_ROOT, "pdf")
 
 os.makedirs(RESULT_DIR, exist_ok=True)
-os.makedirs(DATASET_DIR, exist_ok=True)
 
-# ===============================
-# Flask App
-# ===============================
-app = Flask(__name__)
+server = Flask(__name__)
 
-# ===============================
-# 内存缓存
-# ===============================
-RESULT_CACHE = {}  # {dataset_name: results}
+RESULT_CACHE = {}
 
 
-# ===============================
-# PKL IO 工具
-# ===============================
 def save_result_json(dataset, results):
     path = os.path.join(RESULT_DIR, f"{dataset}.json")
-    with open(path, "w", encoding='utf-8') as f:
+    with open(path, "w", encoding="utf-8") as f:
         json.dump(results, f, indent=4)
 
 
@@ -43,245 +52,1026 @@ 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:
+    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)
 
 
-# ===============================
-# ⚠️ 你自己的 Agent 入口
-# ===============================
 def run_agent_for_dataset(dataset):
-    """
-    ⚠️ 用你自己的 router / agent 替换这里
-    必须返回 List[Dict]
-    """
-    # ---------------------------
-    # 示例（占位）
-    # ---------------------------
-    return [
-        
-    ]
-# {
-#             "algorithm": "shibaile",
-#             "num_features": 15,
-#             "mean_f1": 0.9233716475,
-#             "mean_auc": 0.9816098520,
-#             "time": 5.75,
-#             "score": 0.9408431088,
-#         },
-#         {
-#             "algorithm": "JMchongxinzailai",
-#             "num_features": 15,
-#             "mean_f1": 0.918,
-#             "mean_auc": 0.979,
-#             "time": 7.32,
-#             "score": 0.932,
-#         },
-
-# ===============================
-# 页面
-# ===============================
-@app.route("/")
-def index():
-    return render_template(
-        "index.html",
-        datasets=list_available_datasets(),
-        default_dataset="Authorship",
-    )
+    return []
 
 
-@app.route("/global")
-def global_view():
-    return render_template("global.html")
+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()
 
 
-# ===============================
-# API：获取结果
-# ===============================
-@app.route("/api/results")
-def get_results():
-    dataset = request.args.get("dataset", "Authorship")
-
-    # ① 内存缓存 (Disabled for debugging)
-    # if dataset in RESULT_CACHE:
-    #     print("------------------------------------------------------------------zoude cache")
-    #     return jsonify(RESULT_CACHE[dataset])
-    
-    # ② 磁盘 pkl/json
-    results = load_result_json(dataset)
-    print(111,results)
-    if results is not None:
-        print("------------------------------------------------------------------zoude json\n",results)
-        RESULT_CACHE[dataset] = results
-        leaderboard = rank_results(results)
-        return jsonify(leaderboard)
-
-    # ③ Agent 实时运行
-    results = run_agent_for_dataset(dataset)
-    print(222,results)
-
-    # ④ 存储
-    if results and len(results) > 0:
-        save_result_json(dataset, results)
-        RESULT_CACHE[dataset] = results
-    
-    print("------------------------------------------------------------------zoude agent")
-    leaderboard = rank_results(results)
-    
-    # Ensure leaderboard is a list
+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):
-        print(f"[WARNING] rank_results returned {type(leaderboard)}, converting to list")
-        if hasattr(leaderboard, 'to_dict'): # Pandas DataFrame
-            leaderboard = leaderboard.to_dict(orient='records')
+        if hasattr(leaderboard, "to_dict"):
+            leaderboard = leaderboard.to_dict(orient="records")
         else:
             leaderboard = list(leaderboard)
+    return leaderboard
 
-    return jsonify(leaderboard)
-    # print(333,leaderboard)
-# @app.route("/api/results")
-# def get_results():
-    dataset = request.args.get("dataset", "Authorship")
 
-    print(f"[DEBUG] request dataset = {dataset}")
+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
 
-    if dataset in RESULT_CACHE:
-        print("[DEBUG] hit memory cache")
-        return jsonify(RESULT_CACHE[dataset])
 
-    results = load_result_pkl(dataset)
-    if results is not None:
-        print("[DEBUG] hit pkl cache")
-        RESULT_CACHE[dataset] = results
-        return jsonify(results)
+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
+]
 
-    print("[DEBUG] run agent")
-    results = run_agent_for_dataset(dataset)
-    print("[DEBUG] agent results =", results)
+dash_app = Dash(__name__, server=server, url_base_pathname="/")
+app = dash_app
 
-    save_result_pkl(dataset, results)
-    RESULT_CACHE[dataset] = results
-    return jsonify(results)
+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; }
 
-# ===============================
-# API：数据集列表
-# ===============================
-@app.route("/api/datasets")
+/* 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 = []
-        ds_names = list_available_datasets()
-        for name in ds_names:
-            # Get modification time of the result file
-            result_path = os.path.join(RESULT_DIR, f"{name}.json")
-            last_updated = "Unknown"
-            if os.path.exists(result_path):
-                mtime = os.path.getmtime(result_path)
-                last_updated = datetime.datetime.fromtimestamp(mtime).strftime('%Y-%m-%d')
-            
+        for name, meta in DATASET_METADATA.items():
             datasets.append({
                 "name": name,
-                "last_updated": last_updated
+                "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(datasets)
+        return jsonify(sanitize_json(datasets))
     except Exception as e:
-        import traceback
-        traceback.print_exc()
-        return jsonify({"error": str(e)}), 500
-
-
-@app.route("/api/global_stats")
-def get_global_stats():
-    # 1. Load all datasets
-    all_datasets = list_available_datasets()
-    
-    # 2. Aggregate stats by algorithm
-    # Structure: { "AlgoName": { "f1_sum": 0, "auc_sum": 0, "time_sum": 0, "count": 0 } }
-    agg_stats = {}
-
-    for ds_name in all_datasets:
-        results = load_result_json(ds_name)
-        if not results:
-            continue
-            
-        # Ensure results is a list (reuse logic from get_results)
-        if not isinstance(results, list):
-             if hasattr(results, 'to_dict'): 
-                 results = results.to_dict(orient='records')
-             elif isinstance(results, dict) and 'data' in results:
-                 results = results['data']
-             elif isinstance(results, dict) and 'results' in results:
-                 results = results['results']
-             elif isinstance(results, dict) and 'algorithm' in results:
-                 results = [results]
-             else:
-                 continue # Skip invalid data
-
-        for res in results:
-            algo = res.get("algorithm", "Unknown")
-            
-            # Extract metrics
-            # Assuming rank_results logic: mean_f1, mean_auc might be pre-calculated in JSON 
-            # or we calculate them on the fly if missing
-            metrics = res.get("metrics", {})
-            
-            mean_f1 = res.get("mean_f1")
-            mean_auc = res.get("mean_auc")
-            
-            # If mean values missing, calculate from metrics
-            if mean_f1 is None and metrics:
-                 f1s = [m.get("f1", 0) for m in metrics.values() if isinstance(m, dict)]
-                 mean_f1 = sum(f1s) / len(f1s) if f1s else 0
-            
-            if mean_auc is None and metrics:
-                 aucs = [m.get("auc", 0) for m in metrics.values() if isinstance(m, dict)]
-                 mean_auc = sum(aucs) / len(aucs) if aucs else 0
-            
-            time_val = res.get("time", 0)
-            
-            if algo not in agg_stats:
-                agg_stats[algo] = {"f1_sum": 0.0, "auc_sum": 0.0, "time_sum": 0.0, "count": 0}
-            
-            agg_stats[algo]["f1_sum"] += float(mean_f1 or 0)
-            agg_stats[algo]["auc_sum"] += float(mean_auc or 0)
-            agg_stats[algo]["time_sum"] += float(time_val or 0)
-            agg_stats[algo]["count"] += 1
-
-    # 3. Calculate averages
-    final_list = []
-    for algo, stats in agg_stats.items():
-        count = stats["count"]
-        if count == 0: continue
-        
-        final_list.append({
-            "algorithm": algo,
-            "mean_f1_global": stats["f1_sum"] / count,
-            "mean_auc_global": stats["auc_sum"] / count,
-            "mean_time_global": stats["time_sum"] / count,
-            "datasets_count": count
-        })
-        
-    return jsonify(final_list)
-
-
-@app.route("/pdfs/<path:filename>")
+        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", 7860))
+    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)

Webapp/templates/global.html

@@ -13,14 +13,73 @@
             --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: 20px;
+            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 {
@@ -46,20 +105,6 @@
             color: var(--secondary-color);
         }
 
-        .nav-link {
-            text-decoration: none;
-            color: white;
-            background-color: var(--secondary-color);
-            padding: 8px 16px;
-            border-radius: 4px;
-            font-size: 14px;
-            transition: background-color 0.2s;
-        }
-
-        .nav-link:hover {
-            background-color: #34495e;
-        }
-
         .description-box {
             background-color: #e8f4fd;
             border-left: 4px solid #3498db;
@@ -185,12 +230,6 @@
             background-color: var(--primary-color);
         }
         
-        .time-detail {
-            font-size: 0.8em; 
-            color: #666;
-            margin-top: 2px;
-        }
-        
         .version-tag {
             font-size: 0.8em;
             color: #7f8c8d;
@@ -200,67 +239,89 @@
 </head>
 <body>
 
-<div class="container">
-    <header>
-        <div>
-            <h1>🌍 Global Algorithm Rankings</h1>
-            <div id="last-updated" class="version-tag">Data Last Updated: Loading...</div>
-        </div>
-        <a href="/" class="nav-link">← Back to Dataset View</a>
-    </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 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 class="weights-control">
-        <h3>🏆 Scoring Formula: S = α·F1 + β·AUC + γ·TimeScore</h3>
-        <p style="font-size: 0.9em; color: #666; margin-bottom: 10px;">
-            Constraint: α + β + γ = 1. TimeScore is normalized (1 = fastest).
+    <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 class="sliders-container">
-            <div class="slider-group">
-                <label for="weight-a">F1 (α):</label>
-                <input type="number" id="weight-a" value="0.4" 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.4" step="0.05" min="0" max="1">
+    </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="slider-group">
-                <label for="weight-c">Time (γ):</label>
-                <input type="number" id="weight-c" value="0.2" readonly title="Auto-calculated: 1 - α - β">
+            <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>
-
-            <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="mean_time_global">Efficiency (Time) <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 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>
@@ -272,7 +333,6 @@
     const tableBody = document.querySelector("#global-table tbody");
     const weightA = document.getElementById("weight-a");
     const weightB = document.getElementById("weight-b");
-    const weightC = document.getElementById("weight-c");
     const lastUpdatedDiv = document.getElementById("last-updated");
 
     // Fetch datasets info to get latest date
@@ -312,70 +372,30 @@
     // Weight auto-adjustment logic
     function updateWeights(changedInput) {
         let a = parseFloat(weightA.value) || 0;
-        let b = parseFloat(weightB.value) || 0;
         
         // Clamp inputs to 0-1
         if (a < 0) a = 0; if (a > 1) a = 1;
-        if (b < 0) b = 0; if (b > 1) b = 1;
 
         if (changedInput === 'a') {
-            // If a changes, we try to adjust c first (c = 1 - a - b)
-            // If 1 - a - b < 0, it means a + b > 1, so we must reduce b
-            let c = 1 - a - b;
-            if (c < 0) {
-                b = Math.max(0, 1 - a); // Reduce b
-                c = 0; // c becomes 0
-            }
+            let b = 1 - a;
             // Update UI
             weightA.value = parseFloat(a.toFixed(2));
             weightB.value = parseFloat(b.toFixed(2));
-            weightC.value = parseFloat(c.toFixed(2));
-        } else if (changedInput === 'b') {
-            // If b changes, we try to adjust c first
-            // If 1 - a - b < 0, we must reduce a
-            let c = 1 - a - b;
-            if (c < 0) {
-                a = Math.max(0, 1 - b); // Reduce a
-                c = 0;
-            }
-            // Update UI
-            weightA.value = parseFloat(a.toFixed(2));
-            weightB.value = parseFloat(b.toFixed(2));
-            weightC.value = parseFloat(c.toFixed(2));
         }
     }
 
     weightA.addEventListener('input', () => updateWeights('a'));
-    weightB.addEventListener('input', () => updateWeights('b'));
 
     function calculateAndRender() {
         const a = parseFloat(weightA.value) || 0;
         const b = parseFloat(weightB.value) || 0;
-        const c = parseFloat(weightC.value) || 0;
-
-        // Find min/max time for normalization
-        let minTime = Infinity;
-        let maxTime = -Infinity;
-        rawData.forEach(d => {
-            if (d.mean_time_global < minTime) minTime = d.mean_time_global;
-            if (d.mean_time_global > maxTime) maxTime = d.mean_time_global;
-        });
-        
-        const timeRange = maxTime - minTime;
 
         // Process data
         processedData = rawData.map(d => {
-            // Time Score: 1 if fast, 0 if slow
-            let timeScore = 1.0;
-            if (timeRange > 0.0001) {
-                timeScore = 1.0 - ((d.mean_time_global - minTime) / timeRange);
-            }
-
-            const score = (a * d.mean_f1_global) + (b * d.mean_auc_global) + (c * timeScore);
+            const score = (a * d.mean_f1_global) + (b * d.mean_auc_global);
 
             return {
                 ...d,
-                time_score_norm: timeScore,
                 final_score: score
             };
         });
@@ -404,7 +424,7 @@
         tableBody.innerHTML = "";
         
         if (processedData.length === 0) {
-            tableBody.innerHTML = '<tr><td colspan="6" style="text-align:center;">No data available</td></tr>';
+            tableBody.innerHTML = '<tr><td colspan="5" style="text-align:center;">No data available</td></tr>';
             return;
         }
 
@@ -422,10 +442,6 @@
                 <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.time_score_norm)}</strong>
-                    <div class="time-detail">${safeFixed(row.mean_time_global, 2)}s</div>
-                </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>
@@ -450,7 +466,7 @@
                 sortDirection *= -1;
             } else {
                 sortKey = key;
-                sortDirection = (key === 'rank' || key === 'mean_time_global') ? 1 : -1;
+                sortDirection = (key === 'rank') ? 1 : -1;
             }
             if (key === 'rank') {
                 sortKey = 'final_score';
@@ -469,4 +485,4 @@
 </script>
 
 </body>
-</html>
+</html>

Webapp/templates/index.html

@@ -14,126 +14,187 @@
             --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: 20px;
+            padding: 0;
             background-color: var(--background-color);
             color: var(--text-color);
+            display: flex;
+            min-height: 100vh;
         }
 
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            background: white;
+        /* Sidebar Styling */
+        .sidebar {
+            width: var(--sidebar-width);
+            background-color: var(--secondary-color);
+            color: white;
+            position: fixed;
+            height: 100vh;
+            overflow-y: auto;
             padding: 20px;
-            border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-        }
-
-        header {
+            box-sizing: border-box;
+            left: 0;
+            top: 0;
+            z-index: 100;
             display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 20px;
-            border-bottom: 2px solid var(--primary-color);
-            padding-bottom: 10px;
+            flex-direction: column;
+            gap: 20px;
         }
 
-        h1 {
-            margin: 0;
-            color: var(--secondary-color);
+        .sidebar h2 {
+            font-size: 1.2em;
+            margin-bottom: 10px;
+            color: #ecf0f1;
+            border-bottom: 1px solid #34495e;
+            padding-bottom: 5px;
         }
 
-        .controls {
-            display: flex;
+        /* Stats Cards */
+        .stats-grid {
+            display: grid;
+            grid-template-columns: 1fr;
             gap: 10px;
-            align-items: center;
         }
 
-        select {
-            padding: 8px 12px;
-            border: 1px solid var(--border-color);
+        .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;
-            font-size: 14px;
+            transition: background 0.2s;
         }
 
-        /* Info Boxes */
-        .info-section {
-            display: flex;
-            gap: 20px;
-            margin-bottom: 20px;
-            flex-wrap: wrap;
+        .nav-links li a:hover {
+            background: rgba(255,255,255,0.1);
+            color: white;
         }
 
-        .description-box, .metadata-box {
-            flex: 1;
-            background-color: #e8f4fd;
-            border-left: 4px solid #3498db;
-            padding: 15px;
+        /* 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;
-            min-width: 300px;
+        }
+        
+        input[type="range"] {
+            width: 100%;
         }
 
-        .metadata-box {
-            background-color: #fef9e7;
-            border-left-color: #f1c40f;
+        .checkbox-group {
+            max-height: 150px;
+            overflow-y: auto;
+            background: rgba(0,0,0,0.2);
+            padding: 5px;
+            border-radius: 4px;
         }
 
-        h3 {
-            margin-top: 0;
-            margin-bottom: 10px;
-            font-size: 1.1em;
-            color: var(--secondary-color);
+        .checkbox-item {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+            margin-bottom: 3px;
+            font-size: 0.85em;
         }
 
-        p {
-            margin: 5px 0;
-            line-height: 1.5;
-            font-size: 0.95em;
+        /* 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 */
         }
 
-        .version-tag {
-            font-size: 0.8em;
+        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;
         }
 
-        /* Filters */
-        .filters-box {
-            background-color: #f1f1f1;
-            padding: 15px;
-            border-radius: 8px;
-            margin-bottom: 20px;
-            border: 1px solid #ddd;
+        /* Info Boxes */
+        .info-section {
             display: flex;
             gap: 20px;
-            align-items: center;
+            margin-bottom: 20px;
             flex-wrap: wrap;
         }
 
-        .filter-group {
-            display: flex;
-            align-items: center;
-            gap: 10px;
+        .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);
         }
 
-        input[type="range"] {
-            width: 120px;
+        .metadata-box {
+            border-left-color: #f1c40f;
         }
 
-        .filter-val {
-            font-weight: bold;
-            min-width: 40px;
+        /* 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 */
         table {
             width: 100%;
             border-collapse: collapse;
-            margin-top: 10px;
         }
 
         th, td {
@@ -143,55 +204,38 @@
         }
 
         th {
-            background-color: var(--secondary-color);
-            color: white;
+            background-color: #f8f9fa;
+            color: var(--secondary-color);
             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;
+            background-color: #e9ecef;
         }
-
+        
         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);
+        .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;
-            color: #666;
-            font-size: 0.9em;
-            cursor: pointer;
-        }
-        
-        .features-cell:hover {
-            text-decoration: underline;
-            color: var(--primary-color);
+            display: block;
         }
+        .features-cell:hover .truncate-text { text-decoration: underline; color: var(--primary-color); }
 
         /* Charts */
         .charts-section {
@@ -203,16 +247,23 @@
 
         .chart-container {
             background: white;
-            padding: 15px;
+            padding: 20px;
             border-radius: 8px;
             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            border: 1px solid #eee;
             position: relative;
-            height: 400px;
+            height: 60vh;
+            min-height: 400px;
+            max-height: 700px;
             width: 100%;
+            box-sizing: border-box; /* Fix overflow */
+        }
+        
+        canvas {
+            width: 100% !important;
+            height: 100% !important;
         }
 
-        /* Modal styles */
+        /* Modal */
         .modal {
             display: none;
             position: fixed;
@@ -234,18 +285,7 @@
             box-shadow: 0 4px 6px rgba(0,0,0,0.1);
         }
 
-        .close {
-            color: #aaa;
-            float: right;
-            font-size: 28px;
-            font-weight: bold;
-            cursor: pointer;
-        }
-
-        .close:hover {
-            color: black;
-        }
-
+        .close { float: right; font-size: 28px; cursor: pointer; }
         .feature-tag {
             display: inline-block;
             background-color: #e1ecf4;
@@ -255,18 +295,12 @@
             margin: 2px;
             font-size: 0.9em;
         }
-        
-        .loading {
-            text-align: center;
-            padding: 20px;
-            color: #666;
-        }
 
-        /* Sidebar for PDF */
+        /* PDF Sidebar */
         .pdf-sidebar {
             position: fixed;
             top: 0;
-            right: -50%; /* Hidden by default */
+            right: -50%;
             width: 50%;
             height: 100%;
             background: white;
@@ -276,11 +310,7 @@
             display: flex;
             flex-direction: column;
         }
-
-        .pdf-sidebar.open {
-            right: 0;
-        }
-
+        .pdf-sidebar.open { right: 0; }
         .sidebar-header {
             padding: 10px 20px;
             background: var(--primary-color);
@@ -289,116 +319,155 @@
             justify-content: space-between;
             align-items: center;
         }
-
-        .sidebar-content {
-            flex: 1;
-            padding: 0;
-        }
-
-        .sidebar-content iframe {
-            width: 100%;
-            height: 100%;
-            border: none;
-        }
-
-        .algo-link {
-            color: var(--primary-color);
-            cursor: pointer;
-            font-weight: bold;
-        }
-        .algo-link:hover {
-            text-decoration: underline;
-        }
+        .sidebar-content { flex: 1; }
+        .sidebar-content iframe { width: 100%; height: 100%; border: none; }
+        
+        .loading { text-align: center; padding: 20px; color: #666; }
     </style>
 </head>
 <body>
 
-<div class="container">
+<!-- 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>🏆 AutoFS Leaderboard</h1>
-            <div id="last-updated" class="version-tag">Data Last Updated: Loading...</div>
-        </div>
-        <div style="display:flex; gap:15px; align-items:center;">
-            <a href="/global" style="text-decoration:none; color:white; background-color:#8e44ad; padding:8px 15px; border-radius:4px; font-size:0.9em;">🌍 Global Rankings</a>
-            <div class="controls">
-                <label for="dataset-select">Dataset:</label>
-                <select id="dataset-select">
-                    <option value="" disabled selected>Loading...</option>
-                </select>
-            </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="info-section">
+    <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>
-                This dashboard displays the performance of various feature selection algorithms on the 
-                <strong><span id="desc-dataset-name">Selected</span></strong> dataset. 
-                Compare algorithms based on accuracy (F1), stability (AUC), and computational efficiency.
+                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>
-            <!-- Placeholder for future metadata -->
-            <p style="color:#888; font-size:0.8em;">(Additional metadata like samples/features not available)</p>
         </div>
     </div>
 
-    <div class="filters-box">
-        <h3>🔍 Filters</h3>
-        
-        <div class="filter-group">
-            <label>Min F1 Score:</label>
-            <input type="range" id="filter-f1" min="0" max="1" step="0.05" value="0">
-            <span id="val-f1" class="filter-val">0.00</span>
-        </div>
-
-        <div class="filter-group">
-            <label>Max Time (s):</label>
-            <input type="range" id="filter-time" min="1" max="500" step="10" value="500">
-            <span id="val-time" class="filter-val">500+</span>
-        </div>
-
-        <div style="margin-left: auto;">
-            <label style="margin-right:10px; font-weight:bold;">Chart View:</label>
-            <select id="chart-view-mode" onchange="updateView()">
-                <option value="overall">Overall (Mean)</option>
-                <option value="classifiers-f1">F1 by Classifier</option>
-                <option value="classifiers-auc">AUC by Classifier</option>
-            </select>
+    <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="loading-indicator" class="loading" style="display: none;">Loading data...</div>
-
-    <table id="result-table">
-        <thead>
-            <!-- Headers generated dynamically -->
-        </thead>
-        <tbody>
-            <!-- Data rows will be populated here -->
-        </tbody>
-    </table>
-
-    <div class="charts-section">
+    <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: Number of Selected Features (Lower is better) vs Y: F1 Score (Higher is better). Optimal: Top-Left.</p>
+            <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>
 
-<!-- Modal for details -->
+    
+    <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>
@@ -422,14 +491,44 @@
     let currentResults = [];
     let filteredResults = [];
     let allDatasets = [];
-    let sortDirection = 1; // 1 for asc, -1 for desc
+    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 filterTime = document.getElementById('filter-time');
+    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 valTime = document.getElementById('val-time');
+    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': [
@@ -448,158 +547,418 @@
         ]
     };
 
-    const tableHead = document.querySelector("#result-table thead");
-    const tableBody = document.querySelector("#result-table tbody");
-    const datasetSelect = document.getElementById("dataset-select");
-    const loadingIndicator = document.getElementById("loading-indicator");
+    // Modal Logic
     const modal = document.getElementById("details-modal");
-    const closeModal = document.querySelector(".close");
-    
-    // Metadata elements
-    const metaName = document.getElementById('meta-name');
-    const metaUpdated = document.getElementById('meta-updated');
-    const descName = document.getElementById('desc-dataset-name');
-    const globalUpdated = document.getElementById('last-updated');
+    document.querySelector(".close").onclick = () => modal.style.display = "none";
+    window.onclick = (e) => { if (e.target == modal) modal.style.display = "none"; };
 
-    // Close modal
-    closeModal.onclick = () => modal.style.display = "none";
-    window.onclick = (event) => {
-        if (event.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);
     }
 
-    // Chart instances
-    let scoreChartInstance = null;
-    let paretoChartInstance = null;
+    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 maxTime = parseFloat(filterTime.value);
+        const maxFeats = parseFloat(filterFeats.value);
+        const minDel = parseInt(filterDelMin.value) / 100;
+        const maxDel = parseInt(filterDelMax.value) / 100;
+        const selectedComplexity = filterComplexity.value;
         
-        valF1.textContent = minF1.toFixed(2);
-        valTime.textContent = maxTime >= 500 ? "500+" : maxTime + "s";
+        // 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 time = r.time || 0;
-            return f1 >= minF1 && (maxTime >= 500 || time <= maxTime);
+            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);
     }
 
-    filterF1.addEventListener('input', applyFilters);
-    filterTime.addEventListener('input', applyFilters);
+    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 updateCharts(results) {
-        if (!Array.isArray(results)) return;
+    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;
         
-        // Use filtered results for charts too
-        // Limit to top 20 for bar chart readability
-        const topResults = results.slice(0, 20); 
-        const labels = topResults.map(r => r.algorithm || 'Unknown');
+        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: topResults.map(r => r.mean_f1 || 0),
-                    backgroundColor: 'rgba(52, 152, 219, 0.7)',
-                    borderColor: 'rgba(52, 152, 219, 1)',
-                    borderWidth: 1
+                    label: 'Mean F1', 
+                    data: f1Data,
+                    backgroundColor: 'rgba(52, 152, 219, 0.7)'
                 },
                 {
-                    label: 'Mean AUC',
-                    data: topResults.map(r => r.mean_auc || 0),
-                    backgroundColor: 'rgba(46, 204, 113, 0.7)',
-                    borderColor: 'rgba(46, 204, 113, 1)',
-                    borderWidth: 1
+                    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() + ' F1',
-                data: topResults.map(r => r.metrics?.[clf]?.f1 || 0),
-                backgroundColor: `hsla(${200 + i*40}, 70%, 60%, 0.7)`,
-                borderColor: `hsla(${200 + i*40}, 70%, 60%, 1)`,
-                borderWidth: 1
-            }));
-        } else {
-            datasets = ['nb', 'svm', 'rf'].map((clf, i) => ({
-                label: clf.toUpperCase() + ' AUC',
-                data: topResults.map(r => r.metrics?.[clf]?.auc || 0),
-                backgroundColor: `hsla(${30 + i*40}, 70%, 60%, 0.7)`,
-                borderColor: `hsla(${30 + i*40}, 70%, 60%, 1)`,
-                borderWidth: 1
+                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)`
+                };
+            });
         }
 
-        // 1. Performance Chart (Horizontal Bar)
-        const ctxScore = document.getElementById('scoreChart').getContext('2d');
+        // Score Chart
         if (scoreChartInstance) scoreChartInstance.destroy();
-        
-        scoreChartInstance = new Chart(ctxScore, {
+        scoreChartInstance = new Chart(document.getElementById('scoreChart'), {
             type: 'bar',
-            data: { labels: labels, datasets: datasets },
-            options: {
-                indexAxis: 'y', // Horizontal
-                responsive: true,
-                maintainAspectRatio: false,
-                scales: {
-                    x: { beginAtZero: true, max: 1.0 },
-                    y: { ticks: { autoSkip: false } }
-                }
-            }
+            data: { labels, datasets },
+            options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false }
         });
 
-        // 2. Pareto Frontier Chart (Scatter)
-        // X: Num Selected Features, Y: Mean F1
+        // 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 || 0,
+            y: r.mean_f1,
             algorithm: r.algorithm
         }));
-
-        const ctxPareto = document.getElementById('paretoChart').getContext('2d');
-        if (paretoChartInstance) paretoChartInstance.destroy();
-
-        paretoChartInstance = new Chart(ctxPareto, {
+        paretoChartInstance = new Chart(document.getElementById('paretoChart'), {
             type: 'scatter',
             data: {
                 datasets: [{
-                    label: 'Algorithm Performance',
+                    label: 'Algo',
                     data: paretoData,
-                    backgroundColor: 'rgba(230, 126, 34, 0.7)', // Orange accent
-                    borderColor: 'rgba(230, 126, 34, 1)',
-                    pointRadius: 6,
-                    pointHoverRadius: 8
+                    backgroundColor: 'rgba(230, 126, 34, 0.7)'
                 }]
             },
             options: {
                 responsive: true,
                 maintainAspectRatio: false,
                 scales: {
-                    x: { 
-                        type: 'linear', 
-                        position: 'bottom',
-                        title: { display: true, text: 'Number of Selected Features' }
-                    },
-                    y: { 
-                        title: { display: true, text: 'Mean F1 Score' },
-                        min: 0, max: 1
-                    }
+                    x: { title: {display:true, text:'Num Features'} },
+                    y: { title: {display:true, text:'Mean F1'} }
                 },
                 plugins: {
                     tooltip: {
                         callbacks: {
-                            label: function(context) {
-                                const pt = context.raw;
-                                return `${pt.algorithm}: F1=${pt.y.toFixed(4)}, Feats=${pt.x}`;
-                            }
+                            label: ctx => `${ctx.raw.algorithm}: F1=${ctx.raw.y.toFixed(4)}, Feats=${ctx.raw.x}`
                         }
                     }
                 }
@@ -607,244 +966,41 @@
         });
     }
 
-    function updateView() {
-        renderTableHeader();
-        renderTable(filteredResults);
-        updateCharts(filteredResults);
-    }
-
-    function renderTableHeader() {
-        const viewMode = document.getElementById('chart-view-mode').value;
-        const config = VIEW_CONFIG[viewMode];
-        
-        let headerHTML = `
-            <tr>
-                <th>Rank</th>
-                <th onclick="sortTable('algorithm')">Algorithm <span class="arrow"></span></th>
-        `;
-        
-        config.forEach(col => {
-            headerHTML += `<th onclick="sortTable('${col.key}')">${col.label} <span class="arrow"></span></th>`;
-        });
-        
-        headerHTML += `
-                <th onclick="sortTable('time')">Time (s) <span class="arrow"></span></th>
-                <th onclick="sortTable('selected_features')">Selected Features <span class="arrow"></span></th>
-            </tr>
-        `;
-        
-        tableHead.innerHTML = headerHTML;
-    }
-
-    function renderTable(results) {
-        tableBody.innerHTML = "";
-        
-        // Robust data handling
-        if (!results) { results = []; }
-        else if (!Array.isArray(results)) {
-            if (results.data && Array.isArray(results.data)) results = results.data;
-            else if (results.results && Array.isArray(results.results)) results = results.results;
-            else if (results.algorithm) results = [results];
-            else results = [];
-        }
-
-        if (results.length === 0) {
-            tableBody.innerHTML = '<tr><td colspan="10" style="text-align:center;">No results found</td></tr>';
-            return;
-        }
-
-        const viewMode = document.getElementById('chart-view-mode').value;
-        const config = VIEW_CONFIG[viewMode];
-
-        results.forEach((row, index) => {
-            const tr = document.createElement("tr");
-            
-            // Helper to get nested property safely
-            const getVal = (obj, path) => {
-                return path.split('.').reduce((acc, part) => acc && acc[part], obj);
-            };
-
-            let metricsHTML = '';
-            config.forEach(col => {
-                const val = getVal(row, col.key);
-                const numVal = (val !== undefined && val !== null) ? Number(val).toFixed(4) : 'N/A';
-                metricsHTML += `<td>${numVal}</td>`;
-            });
-            
-            // Features
-            let featCount = row.num_features;
-            if (featCount === undefined && row.selected_features) featCount = row.selected_features.length;
-            
-            let featText = "";
-            if (Array.isArray(row.selected_features)) {
-                featText = row.selected_features.join(", ");
-            } else {
-                featText = "N/A";
-            }
-
-            const rank = index + 1;
-
-            tr.innerHTML = `
-                <td>${rank}</td>
-                <td class="algo-link" onclick="openPdf('${row.algorithm}')" title="Click to view paper">${row.algorithm || 'Unknown'}</td>
-                ${metricsHTML}
-                <td>${row.time ? Number(row.time).toFixed(4) : 'N/A'}</td>
-                <td class="features-cell" onclick="showDetails('${row.algorithm}', '${featText}')" title="${featText}">
-                    ${featText}
-                </td>
-            `;
-            tableBody.appendChild(tr);
-        });
-    }
-
     function sortTable(key) {
-        if (lastSortKey === key) {
-            sortDirection *= -1;
-        } else {
-            sortDirection = 1;
-            lastSortKey = key;
-        }
-
-        // Helper to get nested value
+        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);
-            
-            // Handle array length for selected_features sort
             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;
-
-            if (valA < valB) return -1 * sortDirection;
-            if (valA > valB) return 1 * sortDirection;
-            return 0;
+            return (valA < valB ? -1 : 1) * sortDirection;
         });
-
+        
         renderTable(filteredResults);
-        updateSortArrows(key);
-    }
-    
-    function updateSortArrows(activeKey) {
         document.querySelectorAll('th .arrow').forEach(span => span.textContent = '↕');
-        // Find the th with onclick containing this key
-        const ths = document.querySelectorAll('th');
-        ths.forEach(th => {
-            if (th.getAttribute('onclick').includes(`'${activeKey}'`)) {
-                th.querySelector('.arrow').textContent = sortDirection === 1 ? '↑' : '↓';
-            }
-        });
+        const th = Array.from(document.querySelectorAll('th')).find(th => th.getAttribute('onclick').includes(`'${key}'`));
+        if (th) th.querySelector('.arrow').textContent = sortDirection === 1 ? '↑' : '↓';
     }
 
-    function showDetails(algo, features) {
-        document.getElementById("modal-title").innerText = `${algo} - Selected Features`;
-        const featArray = features.split(", ");
-        const html = featArray.map(f => `<span class="feature-tag">${f}</span>`).join(" ");
-        document.getElementById("modal-body").innerHTML = `
-            <p><strong>Total Selected:</strong> ${featArray.length}</p>
-            <div style="margin-top:10px; line-height:1.6;">${html}</div>
-        `;
-        modal.style.display = "block";
-    }
-
-    function fetchDatasets() {
-        fetch("/api/datasets")
-            .then(res => res.json())
-            .then(data => {
-                allDatasets = data;
-                datasetSelect.innerHTML = "";
-                
-                // Sort dates for global updated
-                const dates = data.map(d => d.last_updated).filter(d => d !== 'Unknown').sort().reverse();
-                if (dates.length > 0) {
-                    globalUpdated.textContent = `Data Last Updated: ${dates[0]}`;
-                } else {
-                    globalUpdated.textContent = `Data Last Updated: Unknown`;
-                }
-
-                data.forEach(ds => {
-                    const option = document.createElement("option");
-                    option.value = ds.name;
-                    option.textContent = ds.name;
-                    datasetSelect.appendChild(option);
-                });
-
-                // Default selection
-                if (data.length > 0) {
-                    loadDataset(data[0].name);
-                }
-            })
-            .catch(err => {
-                console.error("Error loading datasets:", err);
-                datasetSelect.innerHTML = '<option disabled>Error loading</option>';
-            });
-    }
-
-    function loadDataset(name) {
-        datasetSelect.value = name;
-        loadingIndicator.style.display = "block";
-        tableBody.innerHTML = "";
-        
-        // Update metadata box
-        const dsInfo = allDatasets.find(d => d.name === name);
-        if (dsInfo) {
-            metaName.textContent = dsInfo.name;
-            metaUpdated.textContent = dsInfo.last_updated;
-            descName.textContent = dsInfo.name;
-        }
-
-        fetch(`/api/results?dataset=${name}`)
-            .then(res => res.json())
-            .then(data => {
-                loadingIndicator.style.display = "none";
-                currentResults = data;
-                
-                // Reset filters on new dataset? Or keep them? 
-                // Let's reset to show all data first, or apply current?
-                // Applying current is better UX
-                applyFilters();
-                renderTableHeader(); // Ensure headers match view mode
-            })
-            .catch(err => {
-                loadingIndicator.style.display = "none";
-                console.error("Error:", err);
-                tableBody.innerHTML = '<tr><td colspan="10" style="color:red; text-align:center;">Error loading results</td></tr>';
-            });
-    }
-
-    datasetSelect.addEventListener("change", (e) => {
-        loadDataset(e.target.value);
-    });
-
-    // PDF Sidebar Logic
+    // PDF Sidebar
     function openPdf(algoName) {
         if (!algoName) return;
-        const sidebar = document.getElementById('pdf-sidebar');
-        const frame = document.getElementById('pdf-frame');
-        
-        // Use upper case as observed in file system
         const filename = algoName.toUpperCase() + ".pdf";
-        
-        frame.src = `/pdfs/${filename}`;
-        sidebar.classList.add('open');
+        document.getElementById('pdf-frame').src = `/pdfs/${filename}`;
+        document.getElementById('pdf-sidebar').classList.add('open');
     }
-
     function closeSidebar() {
-        const sidebar = document.getElementById('pdf-sidebar');
-        sidebar.classList.remove('open');
-        // Clear src after transition to avoid flicker or keep memory usage low
-        setTimeout(() => {
-             document.getElementById('pdf-frame').src = "";
-        }, 300);
+        document.getElementById('pdf-sidebar').classList.remove('open');
+        setTimeout(() => document.getElementById('pdf-frame').src = "", 300);
     }
-
-    document.addEventListener("DOMContentLoaded", fetchDatasets);
-
 </script>
 
 </body>

Webapp/templates/submit.html

@@ -0,0 +1,441 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AutoFS - Submit Data/Method</title>
+    <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 (Copied from index.html for consistency) */
+        .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 */
+        .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;
+        }
+
+        header {
+            margin-bottom: 30px;
+            border-bottom: 2px solid var(--primary-color);
+            padding-bottom: 10px;
+        }
+
+        .subtitle {
+            font-size: 0.9em;
+            color: #7f8c8d;
+            margin-top: 5px;
+        }
+
+        /* Submission Form Styles */
+        .submission-container {
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            overflow: hidden;
+            max-width: 800px;
+            margin: 0 auto;
+        }
+
+        .tabs {
+            display: flex;
+            background: #f1f1f1;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .tab-btn {
+            flex: 1;
+            padding: 15px;
+            border: none;
+            background: none;
+            cursor: pointer;
+            font-size: 1.1em;
+            font-weight: 600;
+            color: #7f8c8d;
+            transition: all 0.3s;
+        }
+
+        .tab-btn:hover {
+            background: #e9ecef;
+            color: var(--secondary-color);
+        }
+
+        .tab-btn.active {
+            background: white;
+            color: var(--primary-color);
+            border-bottom: 3px solid var(--primary-color);
+        }
+
+        .form-content {
+            padding: 30px;
+            display: none;
+        }
+
+        .form-content.active {
+            display: block;
+            animation: fadeIn 0.5s;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+
+        .form-group {
+            margin-bottom: 20px;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 600;
+            color: var(--secondary-color);
+        }
+
+        .form-group input[type="text"],
+        .form-group input[type="email"],
+        .form-group input[type="url"],
+        .form-group textarea,
+        .form-group select {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid var(--border-color);
+            border-radius: 4px;
+            font-size: 1em;
+            box-sizing: border-box;
+            transition: border-color 0.2s;
+        }
+
+        .form-group input:focus,
+        .form-group textarea:focus,
+        .form-group select:focus {
+            outline: none;
+            border-color: var(--primary-color);
+        }
+
+        .form-group textarea {
+            resize: vertical;
+            min-height: 100px;
+        }
+
+        .file-upload {
+            border: 2px dashed var(--border-color);
+            padding: 20px;
+            text-align: center;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: border-color 0.2s;
+            position: relative;
+        }
+
+        .file-upload:hover {
+            border-color: var(--primary-color);
+            background: #f8f9fa;
+        }
+        
+        .file-upload input[type="file"] {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            cursor: pointer;
+        }
+
+        .submit-btn {
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            font-size: 1.1em;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: background 0.3s;
+            display: block;
+            width: 100%;
+            margin-top: 30px;
+        }
+
+        .submit-btn:hover {
+            background-color: #2980b9;
+        }
+        
+        .helper-text {
+            font-size: 0.85em;
+            color: #7f8c8d;
+            margin-top: 5px;
+        }
+
+        .success-message {
+            display: none;
+            background: #d4edda;
+            color: #155724;
+            padding: 15px;
+            border-radius: 4px;
+            margin-top: 20px;
+            text-align: center;
+            border: 1px solid #c3e6cb;
+        }
+    </style>
+</head>
+<body>
+
+<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>
+
+    <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">🌍 Global Rankings</a></li>
+            <li><a href="/submit" class="active">📤 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>
+</aside>
+
+<main class="main-content">
+    <header>
+        <h1 style="color: var(--secondary-color); margin: 0;">📤 Submission Center</h1>
+        <div class="subtitle">Contribute to the leaderboard by submitting new datasets or feature selection methods.</div>
+    </header>
+
+    <div class="submission-container">
+        <div class="tabs">
+            <button class="tab-btn active" onclick="switchTab('dataset')">Dataset Submission</button>
+            <button class="tab-btn" onclick="switchTab('method')">Method Submission</button>
+        </div>
+
+        <!-- Dataset Submission Form -->
+        <div id="dataset-form" class="form-content active">
+            <form onsubmit="handleSubmit(event, 'Dataset')">
+                <div class="form-group">
+                    <label>Dataset Name *</label>
+                    <input type="text" placeholder="e.g., GeneExpression_v2" required>
+                </div>
+
+                <div class="form-group">
+                    <label>Domain/Category</label>
+                    <select>
+                        <option>Biology/Medical</option>
+                        <option>Image Processing</option>
+                        <option>Text/NLP</option>
+                        <option>Finance</option>
+                        <option>Other</option>
+                    </select>
+                </div>
+
+                <div class="form-group">
+                    <label>Description</label>
+                    <textarea placeholder="Briefly describe the dataset, its origin, and the target variable..." required></textarea>
+                </div>
+
+                <div class="form-group">
+                    <label>Dataset File (.mat, .csv) *</label>
+                    <div class="file-upload">
+                        <input type="file" accept=".mat,.csv,.zip" required onchange="updateFileName(this)">
+                        <span id="file-name-dataset">Drag & drop or click to upload file</span>
+                    </div>
+                    <div class="helper-text">Max file size: 50MB. For larger files, please provide a link below.</div>
+                </div>
+                
+                <div class="form-group">
+                    <label>External Download Link (Optional)</label>
+                    <input type="url" placeholder="https://...">
+                </div>
+
+                <div class="form-group">
+                    <label>Contact Email *</label>
+                    <input type="email" placeholder="researcher@university.edu" required>
+                </div>
+
+                <button type="submit" class="submit-btn">Submit Dataset</button>
+            </form>
+        </div>
+
+        <!-- Method Submission Form -->
+        <div id="method-form" class="form-content">
+            <form onsubmit="handleSubmit(event, 'Method')">
+                <div class="form-group">
+                    <label>Algorithm Name *</label>
+                    <input type="text" placeholder="e.g., FastCorr-FS" required>
+                </div>
+
+                <div class="form-group">
+                    <label>Complexity Class (Big O)</label>
+                    <input type="text" placeholder="e.g., O(n*d^2)">
+                </div>
+
+                <div class="form-group">
+                    <label>Description & Key Innovation</label>
+                    <textarea placeholder="Describe the core idea, advantages, and theoretical basis..." required></textarea>
+                </div>
+
+                <div class="form-group">
+                    <label>Code Implementation (.py, .zip) *</label>
+                    <div class="file-upload">
+                        <input type="file" accept=".py,.zip,.rar" required onchange="updateFileName(this)">
+                        <span id="file-name-method">Drag & drop or click to upload code</span>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label>Paper/Preprint Link (Optional)</label>
+                    <input type="url" placeholder="https://arxiv.org/abs/...">
+                </div>
+
+                <div class="form-group">
+                    <label>Contact Email *</label>
+                    <input type="email" placeholder="developer@lab.com" required>
+                </div>
+
+                <button type="submit" class="submit-btn">Submit Method</button>
+            </form>
+        </div>
+        
+        <div id="success-msg" class="success-message">
+            <h3>✅ Submission Received!</h3>
+            <p>Thank you for your contribution. Our team will review your submission and update the leaderboard shortly.</p>
+            <button onclick="resetForm()" style="background:none; border:none; color:#155724; text-decoration:underline; cursor:pointer;">Submit another</button>
+        </div>
+    </div>
+</main>
+
+<script>
+    function switchTab(tab) {
+        // Update buttons
+        document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
+        event.target.classList.add('active');
+
+        // Update content
+        document.querySelectorAll('.form-content').forEach(content => content.classList.remove('active'));
+        document.getElementById(tab + '-form').classList.add('active');
+        
+        // Hide success message if visible
+        document.getElementById('success-msg').style.display = 'none';
+    }
+
+    function updateFileName(input) {
+        const spanId = input.parentElement.querySelector('span').id;
+        if (input.files && input.files.length > 0) {
+            document.getElementById(spanId).textContent = input.files[0].name;
+            document.getElementById(spanId).style.color = 'var(--primary-color)';
+            document.getElementById(spanId).style.fontWeight = 'bold';
+        }
+    }
+
+    function handleSubmit(e, type) {
+        e.preventDefault();
+        // Here you would typically send data to backend via fetch()
+        // For now, we simulate a successful submission
+        
+        const btn = e.target.querySelector('.submit-btn');
+        const originalText = btn.innerText;
+        
+        btn.innerText = 'Submitting...';
+        btn.disabled = true;
+        
+        setTimeout(() => {
+            document.querySelectorAll('.form-content').forEach(c => c.style.display = 'none');
+            document.getElementById('success-msg').style.display = 'block';
+            
+            // Reset button
+            btn.innerText = originalText;
+            btn.disabled = false;
+            e.target.reset();
+            const spans = document.querySelectorAll('.file-upload span');
+            spans[0].textContent = "Drag & drop or click to upload file";
+            spans[1].textContent = "Drag & drop or click to upload code";
+            spans.forEach(s => { s.style.color = ''; s.style.fontWeight = ''; });
+
+        }, 1500);
+    }
+    
+    function resetForm() {
+        document.getElementById('success-msg').style.display = 'none';
+        document.querySelector('.tab-btn.active').click(); // Re-activate current tab to show form
+    }
+</script>
+
+</body>
+</html>