Michael
58d0009849
Move app.css and shell.js into layout-review/ alongside the .html files and reference them by bare filename; drop the assets/ subfolder. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
232 lines
12 KiB
HTML
232 lines
12 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Layout review — Automated Workflows</title>
|
||
<link rel="stylesheet" href="app.css">
|
||
</head>
|
||
<body data-page="09_pipeline_runner">
|
||
<div class="dt-app">
|
||
<aside class="dt-sidebar" id="dt-sidebar"></aside>
|
||
<main class="dt-main">
|
||
<div class="dt-review-banner">
|
||
<span class="dt-mi">visibility</span>
|
||
<span>Static layout preview of <strong>Automated Workflows</strong> (Pipeline Runner), shown with a file imported, a four-step pipeline configured, and a completed run (results + per-step summary). <a href="index.html">All pages →</a></span>
|
||
</div>
|
||
<div class="dt-main-inner">
|
||
|
||
<!-- Tool header -->
|
||
<div class="dt-tool-header">
|
||
<h1>Automated Workflows</h1>
|
||
<button class="dt-help-btn"><span class="dt-mi">help_outline</span> Help</button>
|
||
</div>
|
||
<p class="dt-tool-caption">Run several tools in a row — save the steps once, reuse them anytime.</p>
|
||
|
||
<div class="dt-spacer"></div>
|
||
|
||
<!-- Upload (file staged) -->
|
||
<label class="dt-label">Import CSV or Excel file</label>
|
||
<div class="dt-uploader">
|
||
<div class="dt-uploader-text">
|
||
<span class="hint"><span class="dt-mi" style="vertical-align:-4px">upload_file</span> Drag and drop file here</span>
|
||
<span class="sub">Up to 1.5 GB · CSV, TSV, XLSX, XLS · encoding & delimiter auto-detected</span>
|
||
</div>
|
||
<button class="dt-btn">Browse files</button>
|
||
</div>
|
||
<div class="dt-file-chip">
|
||
<span class="dt-file-icon-chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6"/></svg></span>
|
||
<span class="name">customers_export.csv</span>
|
||
<span class="size">2.1 MB</span>
|
||
<button class="dt-btn dt-btn-tertiary" title="Remove">✕</button>
|
||
</div>
|
||
|
||
<!-- Preview expander (collapsed once a result exists) -->
|
||
<details class="dt-expander">
|
||
<summary>Preview: customers_export.csv</summary>
|
||
<div class="dt-expander-body">
|
||
<p class="dt-caption">18,442 rows, 6 columns</p>
|
||
<div class="dt-table-wrap">
|
||
<table class="dt-table">
|
||
<thead><tr><th class="idx"></th><th>name</th><th>email</th><th>city</th><th>phone</th><th>signup_date</th></tr></thead>
|
||
<tbody>
|
||
<tr><td class="idx">0</td><td> Jane Doe </td><td>jane@acme.io</td><td>Austin</td><td>512-555-0190</td><td>2024-01-04</td></tr>
|
||
<tr><td class="idx">1</td><td>jane doe</td><td>JANE@ACME.IO</td><td>austin</td><td>(512) 555-0190</td><td>01/04/2024</td></tr>
|
||
<tr><td class="idx">2</td><td>Bob Smith</td><td>bob@globex.com</td><td>Denver</td><td>720.555.7781</td><td>2024-02-11</td></tr>
|
||
<tr><td class="idx">3</td><td>R. Smith</td><td>bob@globex.com</td><td>—</td><td>720-555-7781</td><td>Feb 11 2024</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
|
||
<hr class="dt-divider">
|
||
|
||
<!-- Options: pipeline builder (collapsed once a result exists; opened here to show structure) -->
|
||
<details class="dt-expander" open>
|
||
<summary>Options</summary>
|
||
<div class="dt-expander-body">
|
||
|
||
<!-- Mode radio -->
|
||
<div class="dt-field">
|
||
<label class="dt-label">How would you like to define the pipeline?</label>
|
||
<div class="dt-radio-row" style="flex-direction:column;gap:9px">
|
||
<span class="dt-radio on"><span class="dot"></span> Use the recommended default (text-clean → format → missing → dedup)</span>
|
||
<span class="dt-radio"><span class="dot"></span> Build interactively</span>
|
||
<span class="dt-radio"><span class="dot"></span> Import a saved pipeline JSON</span>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="dt-caption" style="margin:10px 0">
|
||
Edit the table to add, remove, reorder (drag the row index), enable, or configure each step.
|
||
Tool order is recommended, not enforced — violations surface as warnings below the table.
|
||
</p>
|
||
|
||
<!-- Pipeline editor (st.data_editor: Tool selectbox · Enabled checkbox · Options JSON) -->
|
||
<div class="dt-table-wrap">
|
||
<table class="dt-table">
|
||
<thead>
|
||
<tr>
|
||
<th class="idx"></th>
|
||
<th>Tool</th>
|
||
<th>Enabled</th>
|
||
<th>Options (JSON)</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="idx">≡ 0</td>
|
||
<td>text_clean <span class="dt-mi" style="font-size:14px;vertical-align:-2px;color:var(--ink-tertiary)">expand_more</span></td>
|
||
<td><span class="dt-check on" style="margin:0;justify-content:center"><span class="box"><span class="dt-mi">check</span></span></span></td>
|
||
<td>{"trim": true, "collapse_whitespace": true}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="idx">≡ 1</td>
|
||
<td>format_standardize <span class="dt-mi" style="font-size:14px;vertical-align:-2px;color:var(--ink-tertiary)">expand_more</span></td>
|
||
<td><span class="dt-check on" style="margin:0;justify-content:center"><span class="box"><span class="dt-mi">check</span></span></span></td>
|
||
<td>{"column_types": {"phone": "phone", "signup_date": "date"}}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="idx">≡ 2</td>
|
||
<td>missing <span class="dt-mi" style="font-size:14px;vertical-align:-2px;color:var(--ink-tertiary)">expand_more</span></td>
|
||
<td><span class="dt-check on" style="margin:0;justify-content:center"><span class="box"><span class="dt-mi">check</span></span></span></td>
|
||
<td>{"strategy": "flag", "sentinels": ["N/A", "—"]}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="idx">≡ 3</td>
|
||
<td>dedup <span class="dt-mi" style="font-size:14px;vertical-align:-2px;color:var(--ink-tertiary)">expand_more</span></td>
|
||
<td><span class="dt-check on" style="margin:0;justify-content:center"><span class="box"><span class="dt-mi">check</span></span></span></td>
|
||
<td>{"survivor_rule": "most_complete", "merge": true}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="idx" style="color:var(--ink-tertiary)">＋</td>
|
||
<td colspan="3" style="color:var(--ink-tertiary);font-family:var(--font-sans)">Add row</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- Validation: pipeline is in recommended order, so no warning shown (warning block omitted) -->
|
||
|
||
<!-- Nested explainer expander -->
|
||
<details class="dt-expander" open style="margin-top:14px">
|
||
<summary>Recommended tool order — why each step belongs where it does</summary>
|
||
<div class="dt-expander-body">
|
||
<p><strong>text_clean</strong> before <strong>format_standardize</strong> — format parsers (phone / currency / date) fail on smart-quote-contaminated or NBSP-padded input — clean text first</p>
|
||
<p><strong>text_clean</strong> before <strong>missing</strong> — sentinel detection misses cells padded with NBSP / zero-width characters — clean text first</p>
|
||
<p><strong>text_clean</strong> before <strong>dedup</strong> — fuzzy matching treats NBSP-padded values as different — clean text first</p>
|
||
<p><strong>format_standardize</strong> before <strong>missing</strong> — numeric imputation needs numeric dtypes; canonical phones / currencies improve sentinel detection</p>
|
||
<p><strong>format_standardize</strong> before <strong>dedup</strong> — canonical phones / lowercase emails enable cross-format duplicate matching</p>
|
||
<p style="margin-bottom:0"><strong>missing</strong> before <strong>dedup</strong> — deduping rows with mixed NaN sentinels produces brittle merges — resolve missing values first</p>
|
||
</div>
|
||
</details>
|
||
|
||
</div>
|
||
</details>
|
||
|
||
<hr class="dt-divider">
|
||
|
||
<!-- Run -->
|
||
<button class="dt-btn dt-btn-primary dt-btn-block">Run Pipeline</button>
|
||
|
||
<hr class="dt-divider">
|
||
|
||
<!-- Results -->
|
||
<h2>Results</h2>
|
||
<div class="dt-metrics">
|
||
<div class="dt-metric"><div class="label">Initial rows</div><div class="value">18,442</div></div>
|
||
<div class="dt-metric"><div class="label">Final rows</div><div class="value">18,130</div></div>
|
||
<div class="dt-metric"><div class="label">Steps run</div><div class="value">4</div></div>
|
||
<div class="dt-metric"><div class="label">Elapsed</div><div class="value">1.84 s</div></div>
|
||
</div>
|
||
|
||
<h4>Per-step summary</h4>
|
||
<div class="dt-table-wrap">
|
||
<table class="dt-table">
|
||
<thead>
|
||
<tr><th>step</th><th>status</th><th>elapsed_ms</th><th>summary</th><th>error</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>text_clean</td>
|
||
<td><span class="dt-count-pill success">ok</span></td>
|
||
<td>214</td>
|
||
<td>{"cells_changed": 1204, "columns": ["name", "city"]}</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>format_standardize</td>
|
||
<td><span class="dt-count-pill success">ok</span></td>
|
||
<td>388</td>
|
||
<td>{"phone": 18301, "signup_date": 17996}</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>missing</td>
|
||
<td><span class="dt-count-pill success">ok</span></td>
|
||
<td>121</td>
|
||
<td>{"flagged_cells": 642, "sentinels_found": ["—"]}</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>dedup</td>
|
||
<td><span class="dt-count-pill success">ok</span></td>
|
||
<td>911</td>
|
||
<td>{"input_rows": 18442, "output_rows": 18130, "duplicates_removed": 312, "groups": 147}</td>
|
||
<td></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<h4>Output preview (first 10 rows)</h4>
|
||
<div class="dt-table-wrap">
|
||
<table class="dt-table">
|
||
<thead><tr><th class="idx"></th><th>name</th><th>email</th><th>city</th><th>phone</th><th>signup_date</th></tr></thead>
|
||
<tbody>
|
||
<tr><td class="idx">0</td><td>Jane Doe</td><td>jane@acme.io</td><td>Austin</td><td class="dt-cell-add">+1 512-555-0190</td><td class="dt-cell-add">2024-01-04</td></tr>
|
||
<tr><td class="idx">1</td><td>Bob Smith</td><td>bob@globex.com</td><td>Denver</td><td class="dt-cell-add">+1 720-555-7781</td><td class="dt-cell-add">2024-02-11</td></tr>
|
||
<tr><td class="idx">2</td><td>Carla Reyes</td><td>carla@initech.co</td><td>Phoenix</td><td class="dt-cell-add">+1 480-555-3320</td><td class="dt-cell-add">2024-03-02</td></tr>
|
||
<tr><td class="idx">3</td><td>Dan Okafor</td><td>dan@umbrella.net</td><td><span class="dt-cell-flag">⚑ missing</span></td><td class="dt-cell-add">+1 206-555-7745</td><td class="dt-cell-add">2024-03-18</td></tr>
|
||
<tr><td class="idx">4</td><td>Emily Tran</td><td>emily@hooli.com</td><td>Seattle</td><td class="dt-cell-add">+1 206-555-1182</td><td class="dt-cell-add">2024-04-05</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<hr class="dt-divider">
|
||
|
||
<!-- Downloads (3 columns) -->
|
||
<div class="dt-cols-3">
|
||
<button class="dt-btn dt-btn-primary"><span class="dt-mi">download</span> Download cleaned CSV</button>
|
||
<button class="dt-btn"><span class="dt-mi">download</span> Download pipeline JSON</button>
|
||
<button class="dt-btn"><span class="dt-mi">download</span> Download run audit</button>
|
||
</div>
|
||
|
||
</div>
|
||
</main>
|
||
</div>
|
||
<footer class="dt-footer" id="dt-footer"></footer>
|
||
<script src="shell.js"></script>
|
||
</body>
|
||
</html>
|