From 5b48a11e01ffda711c84fbf43a04a1f594401124 Mon Sep 17 00:00:00 2001
From: Deeman <hendriknote@gmail.com>
Date: Wed, 25 Feb 2026 12:54:21 +0100
Subject: [PATCH] feat(pipeline): catalog tab templates

- partials/pipeline_catalog.html: accordion list of serving tables with
  row count badges, column count, click-to-expand lazy-loaded detail
- partials/pipeline_table_detail.html: column schema grid + sticky-header
  sample data table (10 rows, truncated values with title attribute)
- JS: toggleCatalogTable() + htmx.trigger(content, 'revealed') for
  lazy-loading detail only on first open

Subtask 4 of 6

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../admin/partials/pipeline_catalog.html      | 74 +++++++++++++++++++
 .../admin/partials/pipeline_table_detail.html | 59 +++++++++++++++
 2 files changed, 133 insertions(+)
 create mode 100644 web/src/padelnomics/admin/templates/admin/partials/pipeline_catalog.html
 create mode 100644 web/src/padelnomics/admin/templates/admin/partials/pipeline_table_detail.html

diff --git a/web/src/padelnomics/admin/templates/admin/partials/pipeline_catalog.html b/web/src/padelnomics/admin/templates/admin/partials/pipeline_catalog.html
new file mode 100644
index 0000000..beb556f
--- /dev/null
+++ b/web/src/padelnomics/admin/templates/admin/partials/pipeline_catalog.html
@@ -0,0 +1,74 @@
+<!-- Pipeline Catalog Tab: serving tables with column + sample data expandable -->
+
+{% if serving_meta %}
+<p class="text-xs text-slate mb-3">
+  Serving DB last exported: <span class="mono font-semibold">{{ serving_meta.exported_at_utc[:19].replace('T', ' ') }}</span>
+</p>
+{% endif %}
+
+{% if tables %}
+<div style="display:grid;grid-template-columns:1fr;gap:0.75rem">
+  {% for table in tables %}
+  <div class="card" style="padding:0" id="catalog-table-{{ table.name }}">
+    <!-- Table header row -->
+    <div class="flex items-center justify-between"
+         style="padding:0.875rem 1.25rem;cursor:pointer"
+         onclick="toggleCatalogTable('{{ table.name }}')">
+      <div class="flex items-center gap-3">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+             stroke="currentColor" style="width:16px;height:16px;color:#94A3B8;flex-shrink:0">
+          <path stroke-linecap="round" stroke-linejoin="round"
+                d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 0 1-1.125-1.125M3.375 19.5h7.5c.621 0 1.125-.504 1.125-1.125m-9.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-7.5A1.125 1.125 0 0 1 12 18.375m9.75-12.75c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125m19.5 0v1.5c0 .621-.504 1.125-1.125 1.125M2.25 5.625v1.5c0 .621.504 1.125 1.125 1.125m0 0h17.25m-17.25 0h7.5c.621 0 1.125.504 1.125 1.125M3.375 8.25c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375Z"/>
+        </svg>
+        <span class="font-semibold text-sm text-navy">serving.<span class="mono">{{ table.name }}</span></span>
+        <span class="text-xs text-slate">{{ table.column_count }} col{{ 's' if table.column_count != 1 }}</span>
+        {% if table.row_count is not none %}
+        <span class="badge" style="background:#F0FDF4;color:#16A34A;font-size:10px">
+          {{ "{:,}".format(table.row_count) }} rows
+        </span>
+        {% endif %}
+      </div>
+      <svg id="chevron-{{ table.name }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+           stroke-width="2" stroke="currentColor"
+           style="width:14px;height:14px;color:#94A3B8;transition:transform 0.2s">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/>
+      </svg>
+    </div>
+
+    <!-- Expandable detail (HTMX lazy-loaded on first open) -->
+    <div id="catalog-detail-{{ table.name }}" style="display:none;border-top:1px solid #E2E8F0">
+      <div id="catalog-content-{{ table.name }}"
+           hx-get="{{ url_for('pipeline.pipeline_table_detail', table_name=table.name) }}"
+           hx-trigger="revealed"
+           hx-target="#catalog-content-{{ table.name }}"
+           hx-swap="outerHTML">
+        <div style="padding:1.5rem;text-align:center">
+          <p class="text-sm text-slate">Loading…</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  {% endfor %}
+</div>
+{% else %}
+<div class="card text-center" style="padding:2rem">
+  <p class="text-slate">No serving tables found. Run the pipeline to generate them.</p>
+</div>
+{% endif %}
+
+<script>
+function toggleCatalogTable(name) {
+  var detail = document.getElementById('catalog-detail-' + name);
+  var chevron = document.getElementById('chevron-' + name);
+  var isOpen = detail.style.display !== 'none';
+  detail.style.display = isOpen ? 'none' : 'block';
+  chevron.style.transform = isOpen ? '' : 'rotate(90deg)';
+  // Trigger HTMX revealed for lazy-loading when first opened
+  if (!isOpen) {
+    var content = document.getElementById('catalog-content-' + name);
+    if (content && content.getAttribute('hx-trigger') === 'revealed') {
+      htmx.trigger(content, 'revealed');
+    }
+  }
+}
+</script>
diff --git a/web/src/padelnomics/admin/templates/admin/partials/pipeline_table_detail.html b/web/src/padelnomics/admin/templates/admin/partials/pipeline_table_detail.html
new file mode 100644
index 0000000..7aade3c
--- /dev/null
+++ b/web/src/padelnomics/admin/templates/admin/partials/pipeline_table_detail.html
@@ -0,0 +1,59 @@
+<!-- Pipeline Table Detail: column schema + 10-row sample data -->
+<!-- This partial replaces #catalog-content-<table_name> via HTMX -->
+<div id="catalog-content-{{ table_name }}" style="padding:1.25rem">
+
+  <!-- Column schema -->
+  <div class="mb-4">
+    <p class="text-xs font-semibold text-slate uppercase mb-2" style="letter-spacing:0.05em">Schema</p>
+    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px">
+      {% for col in columns %}
+      <div style="background:#F8FAFC;border:1px solid #E2E8F0;border-radius:6px;padding:6px 10px">
+        <span class="text-xs font-semibold text-navy mono">{{ col.column_name }}</span>
+        <span class="text-xs text-slate ml-2">{{ col.data_type | upper }}</span>
+      </div>
+      {% endfor %}
+    </div>
+  </div>
+
+  <!-- Sample rows -->
+  {% if sample %}
+  <div>
+    <p class="text-xs font-semibold text-slate uppercase mb-2" style="letter-spacing:0.05em">
+      Sample (first {{ sample | length }} rows)
+    </p>
+    <div style="overflow-x:auto;max-height:320px;overflow-y:auto">
+      <table class="table" style="font-size:0.75rem">
+        <thead style="position:sticky;top:0;background:#fff;z-index:1">
+          <tr>
+            {% for col in columns %}
+            <th style="white-space:nowrap">{{ col.column_name }}</th>
+            {% endfor %}
+          </tr>
+        </thead>
+        <tbody>
+          {% for row in sample %}
+          <tr>
+            {% for col in columns %}
+            <td class="mono" style="max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"
+                title="{{ row[col.column_name] | string }}">
+              {% set val = row[col.column_name] %}
+              {% if val is none %}
+              <span class="text-slate">null</span>
+              {% elif val | string | length > 40 %}
+              {{ val | string | truncate(40, true) }}
+              {% else %}
+              {{ val }}
+              {% endif %}
+            </td>
+            {% endfor %}
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+  </div>
+  {% else %}
+  <p class="text-sm text-slate">Table is empty.</p>
+  {% endif %}
+
+</div>