feat(dashboard): [#304] implement per-metric detail pages and endpoint

fenn/dashboard/app.py

@@ -428,6 +428,25 @@ def session_view(project_name: str, session_id: str) -> str:
     return render_template("session.html", **data)
 
 
+@app.route(
+    "/session/<project_name>/<session_id>/metric/<metric_name>",
+    endpoint="session_metric_detail",
+)
+def session_metric_detail(project_name: str, session_id: str, metric_name: str) -> str:
+    data = scanner.get_session(project_name, session_id)
+    if data is None:
+        abort(404)
+    points = [m for m in data["metrics"] if m["name"] == metric_name]
+    if not points:
+        abort(404)
+    return render_template(
+        "session_metric_detail.html",
+        **data,
+        metric_name=metric_name,
+        metric_points=points,
+    )
+
+
 @app.route("/templates")
 def templates_page() -> str:
     """Return the local templates registry page, listing all templates that have been pulled into a local directory."""

fenn/dashboard/templates/session.html

@@ -172,6 +172,8 @@ <h1 class="page-title" style="font-family:var(--font-mono); font-size:18px; lett
     <div class="card chart-card" data-metric="train_loss" data-color="--accent">
       <div class="card-header">
         <span class="card-title">Train Loss</span>
+        <a href="{{ url_for('session_metric_detail', project_name=project, session_id=session_id, metric_name='train_loss') }}"
+           class="btn btn-sm">View details</a>
       </div>
       <div class="card-body chart-card-body">
         <svg class="chart-svg" viewBox="0 0 600 220" preserveAspectRatio="none" style="display:none;"></svg>
@@ -190,6 +192,8 @@ <h1 class="page-title" style="font-family:var(--font-mono); font-size:18px; lett
     <div class="card chart-card" data-metric="val_loss" data-color="--warning">
       <div class="card-header">
         <span class="card-title">Val Loss</span>
+        <a href="{{ url_for('session_metric_detail', project_name=project, session_id=session_id, metric_name='val_loss') }}"
+           class="btn btn-sm">View details</a>
       </div>
       <div class="card-body chart-card-body">
         <svg class="chart-svg" viewBox="0 0 600 220" preserveAspectRatio="none" style="display:none;"></svg>
@@ -208,6 +212,8 @@ <h1 class="page-title" style="font-family:var(--font-mono); font-size:18px; lett
     <div class="card chart-card" data-metric="acc" data-color="--success">
       <div class="card-header">
         <span class="card-title">Accuracy</span>
+        <a href="{{ url_for('session_metric_detail', project_name=project, session_id=session_id, metric_name='acc') }}"
+           class="btn btn-sm">View details</a>
       </div>
       <div class="card-body chart-card-body">
         <svg class="chart-svg" viewBox="0 0 600 220" preserveAspectRatio="none" style="display:none;"></svg>

fenn/dashboard/templates/session_metric_detail.html

@@ -0,0 +1,37 @@
+{% extends "base.html" %}
+
+{% block title %}{{ metric_name }} — {{ session_id | short_id }}… — {{ project }} — Fenn Dashboard{% endblock %}
+
+{% block breadcrumb %}
+<a href="/">Overview</a>
+<span class="breadcrumb-sep">›</span>
+<a href="/project/{{ project | urlencode }}">{{ project }}</a>
+<span class="breadcrumb-sep">›</span>
+<a href="/session/{{ project | urlencode }}/{{ session_id | urlencode }}">{{ session_id | short_id }}…</a>
+<span class="breadcrumb-sep">›</span>
+<span class="breadcrumb-current">{{ metric_name }}</span>
+{% endblock %}
+
+{% block content %}
+
+<script type="application/json" id="session-metrics-data">{{ metric_points | tojson }}</script>
+
+<div class="page-header">
+  <h1 class="page-title">{{ metric_name }}</h1>
+  <p class="page-subtitle">Session <span class="session-display-name">{{ session_id }}</span></p>
+</div>
+
+<div class="card chart-card" data-metric="{{ metric_name }}" data-color="--accent">
+  <div class="card-header">
+    <span class="card-title">{{ metric_name }}</span>
+  </div>
+  <div class="card-body chart-card-body">
+    <svg class="chart-svg" viewBox="0 0 900 400" preserveAspectRatio="none" style="display:none;"></svg>
+    <div class="empty chart-empty">
+      <div class="empty-title">No data</div>
+      <div class="empty-desc">No {{ metric_name }} metrics were recorded for this session.</div>
+    </div>
+  </div>
+</div>
+
+{% endblock %}