Task ID: task_e_682fcece82f08323a84f31512d70c054
Configuring language runtimes...
+ rm -- /tmp/Mx9sQF-setup_script.sh
+ source ./codex_setup.sh
++ uv sync --frozen
Using CPython 3.12.3 interpreter at: /usr/bin/python3.12
Creating virtual environment at: .venv
Building scubaduck @ file:///workspace/scubaduck
Downloading pyright (5.3MiB)
Downloading ruff (11.0MiB)
Downloading duckdb (19.3MiB)
Downloading playwright (43.1MiB)
Downloading ruff
Built scubaduck @ file:///workspace/scubaduck
Downloading duckdb
Downloading playwright
Downloading pyright
Prepared 33 packages in 1.57s
Installed 33 packages in 78ms
+ blinker==1.9.0
+ certifi==2025.4.26
+ charset-normalizer==3.4.2
+ click==8.2.0
+ duckdb==1.2.2
+ execnet==2.1.1
+ flask==3.1.1
+ greenlet==3.2.2
+ idna==3.10
+ iniconfig==2.1.0
+ itsdangerous==2.2.0
+ jinja2==3.1.6
+ markupsafe==3.0.2
+ nodeenv==1.9.1
+ packaging==25.0
+ playwright==1.52.0
+ pluggy==1.6.0
+ pyee==13.0.0
+ pyright==1.1.400
+ pytest==8.3.5
+ pytest-base-url==2.1.0
+ pytest-playwright==0.7.0
+ pytest-xdist==3.6.1
+ python-dateutil==2.9.0.post0
+ python-slugify==8.0.4
+ requests==2.32.3
+ ruff==0.11.10
+ scubaduck==0.1.0 (from file:///workspace/scubaduck)
+ six==1.17.0
+ text-unidecode==1.3
+ typing-extensions==4.13.2
+ urllib3==2.4.0
+ werkzeug==3.1.3
++ source .venv/bin/activate
+++ '[' -z '' ']'
+++ '[' -n x ']'
+++ SCRIPT_PATH=.venv/bin/activate
+++ '[' .venv/bin/activate = /tmp/Mx9sQF-setup_script.sh ']'
+++ deactivate nondestructive
+++ unset -f pydoc
+++ '[' -z '' ']'
+++ '[' -z '' ']'
+++ hash -r
+++ '[' -z '' ']'
+++ unset VIRTUAL_ENV
+++ unset VIRTUAL_ENV_PROMPT
+++ '[' '!' nondestructive = nondestructive ']'
+++ VIRTUAL_ENV=/workspace/scubaduck/.venv
+++ '[' linux-gnu = cygwin ']'
+++ '[' linux-gnu = msys ']'
+++ export VIRTUAL_ENV
+++ '[' -z '' ']'
+++ unset SCRIPT_PATH
+++ _OLD_VIRTUAL_PATH=/root/.cargo/bin:/root/.rbenv/shims:/root/.rbenv/bin:/root/.rbenv/shims:/root/.local/share/swiftly/bin:/root/.bun/bin:/root/.nvm/versions/node/v22.16.0/bin:/root/.pyenv/shims:3441PYENV_ROOT/shims:/root/.pyenv/bin:/usr/local/go/bin:/root/go/bin:/root/.rbenv/bin:/root/.rbenv/shims:/root/.bun/bin:/root/.local/bin:/root/.pyenv/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
+++ PATH=/workspace/scubaduck/.venv/bin:/root/.cargo/bin:/root/.rbenv/shims:/root/.rbenv/bin:/root/.rbenv/shims:/root/.local/share/swiftly/bin:/root/.bun/bin:/root/.nvm/versions/node/v22.16.0/bin:/root/.pyenv/shims:3441PYENV_ROOT/shims:/root/.pyenv/bin:/usr/local/go/bin:/root/go/bin:/root/.rbenv/bin:/root/.rbenv/shims:/root/.bun/bin:/root/.local/bin:/root/.pyenv/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
+++ export PATH
+++ '[' xscubaduck '!=' x ']'
+++ VIRTUAL_ENV_PROMPT=scubaduck
+++ export VIRTUAL_ENV_PROMPT
+++ '[' -z '' ']'
+++ '[' -z '' ']'
+++ _OLD_VIRTUAL_PS1=
+++ PS1='(scubaduck) '
+++ export PS1
+++ alias pydoc
+++ true
+++ hash -r
++ python -c 'import os; import duckdb; con = duckdb.connect(); con.execute(f"SET http_proxy = '\''{os.getenv("HTTP_PROXY")}'\''"); con.execute("INSTALL '\''sqlite'\'';")'
++ playwright install chromium
Downloading Chromium 136.0.7103.25 (playwright build v1169) from https://cdn.playwright.dev/dbazure/download/playwright/builds/chromium/1169/chromium-linux.zip
167.7 MiB [] 0% 0.0s167.7 MiB [] 0% 59.2s167.7 MiB [] 0% 55.4s167.7 MiB [] 0% 41.4s167.7 MiB [] 0% 32.1s167.7 MiB [] 0% 24.4s167.7 MiB [] 0% 19.6s167.7 MiB [] 1% 11.8s167.7 MiB [] 1% 8.6s167.7 MiB [] 2% 6.6s167.7 MiB [] 3% 5.0s167.7 MiB [] 4% 3.8s167.7 MiB [] 5% 3.6s167.7 MiB [] 6% 3.4s167.7 MiB [] 7% 3.0s167.7 MiB [] 9% 2.5s167.7 MiB [] 10% 2.3s167.7 MiB [] 12% 2.1s167.7 MiB [] 13% 2.0s167.7 MiB [] 14% 1.8s167.7 MiB [] 15% 1.8s167.7 MiB [] 17% 1.7s167.7 MiB [] 18% 1.6s167.7 MiB [] 19% 1.6s167.7 MiB [] 20% 1.6s167.7 MiB [] 21% 1.5s167.7 MiB [] 23% 1.4s167.7 MiB [] 24% 1.4s167.7 MiB [] 26% 1.3s167.7 MiB [] 28% 1.3s167.7 MiB [] 29% 1.2s167.7 MiB [] 30% 1.2s167.7 MiB [] 31% 1.2s167.7 MiB [] 32% 1.2s167.7 MiB [] 34% 1.1s167.7 MiB [] 35% 1.1s167.7 MiB [] 37% 1.1s167.7 MiB [] 37% 1.0s167.7 MiB [] 39% 1.0s167.7 MiB [] 40% 1.0s167.7 MiB [] 41% 1.0s167.7 MiB [] 42% 0.9s167.7 MiB [] 43% 0.9s167.7 MiB [] 45% 0.9s167.7 MiB [] 46% 0.9s167.7 MiB [] 47% 0.8s167.7 MiB [] 48% 0.8s167.7 MiB [] 50% 0.8s167.7 MiB [] 51% 0.8s167.7 MiB [] 52% 0.8s167.7 MiB [] 53% 0.7s167.7 MiB [] 54% 0.7s167.7 MiB [] 56% 0.7s167.7 MiB [] 57% 0.7s167.7 MiB [] 58% 0.7s167.7 MiB [] 59% 0.6s167.7 MiB [] 60% 0.6s167.7 MiB [] 62% 0.6s167.7 MiB [] 63% 0.6s167.7 MiB [] 64% 0.5s167.7 MiB [] 65% 0.5s167.7 MiB [] 66% 0.5s167.7 MiB [] 68% 0.5s167.7 MiB [] 70% 0.5s167.7 MiB [] 70% 0.4s167.7 MiB [] 72% 0.4s167.7 MiB [] 73% 0.4s167.7 MiB [] 74% 0.4s167.7 MiB [] 75% 0.4s167.7 MiB [] 77% 0.3s167.7 MiB [] 78% 0.3s167.7 MiB [] 79% 0.3s167.7 MiB [] 80% 0.3s167.7 MiB [] 82% 0.3s167.7 MiB [] 83% 0.3s167.7 MiB [] 84% 0.2s167.7 MiB [] 85% 0.2s167.7 MiB [] 86% 0.2s167.7 MiB [] 88% 0.2s167.7 MiB [] 89% 0.2s167.7 MiB [] 90% 0.1s167.7 MiB [] 91% 0.1s167.7 MiB [] 92% 0.1s167.7 MiB [] 94% 0.1s167.7 MiB [] 95% 0.1s167.7 MiB [] 96% 0.1s167.7 MiB [] 97% 0.0s167.7 MiB [] 98% 0.0s167.7 MiB [] 100% 0.0s
Chromium 136.0.7103.25 (playwright build v1169) downloaded to /root/.cache/ms-playwright/chromium-1169
Downloading FFMPEG playwright build v1011 from https://cdn.playwright.dev/dbazure/download/playwright/builds/ffmpeg/1011/ffmpeg-linux.zip
2.3 MiB [] 0% 0.0s2.3 MiB [] 2% 0.6s2.3 MiB [] 5% 0.7s2.3 MiB [] 10% 0.5s2.3 MiB [] 15% 0.4s2.3 MiB [] 21% 0.3s2.3 MiB [] 36% 0.2s2.3 MiB [] 54% 0.1s2.3 MiB [] 82% 0.0s2.3 MiB [] 100% 0.0s
FFMPEG playwright build v1011 downloaded to /root/.cache/ms-playwright/ffmpeg-1011
Downloading Chromium Headless Shell 136.0.7103.25 (playwright build v1169) from https://cdn.playwright.dev/dbazure/download/playwright/builds/chromium/1169/chromium-headless-shell-linux.zip
101.4 MiB [] 0% 0.0s101.4 MiB [] 0% 32.7s101.4 MiB [] 0% 43.0s101.4 MiB [] 0% 26.2s101.4 MiB [] 0% 18.6s101.4 MiB [] 0% 17.0s101.4 MiB [] 1% 10.3s101.4 MiB [] 1% 10.4s101.4 MiB [] 2% 7.0s101.4 MiB [] 4% 3.8s101.4 MiB [] 6% 2.9s101.4 MiB [] 7% 2.5s101.4 MiB [] 9% 2.1s101.4 MiB [] 11% 1.8s101.4 MiB [] 12% 1.8s101.4 MiB [] 15% 1.5s101.4 MiB [] 17% 1.4s101.4 MiB [] 19% 1.3s101.4 MiB [] 21% 1.2s101.4 MiB [] 24% 1.1s101.4 MiB [] 25% 1.1s101.4 MiB [] 27% 1.0s101.4 MiB [] 30% 1.0s101.4 MiB [] 32% 0.9s101.4 MiB [] 34% 0.9s101.4 MiB [] 35% 0.8s101.4 MiB [] 38% 0.8s101.4 MiB [] 39% 0.8s101.4 MiB [] 41% 0.7s101.4 MiB [] 43% 0.7s101.4 MiB [] 45% 0.7s101.4 MiB [] 47% 0.6s101.4 MiB [] 49% 0.6s101.4 MiB [] 51% 0.6s101.4 MiB [] 53% 0.5s101.4 MiB [] 54% 0.5s101.4 MiB [] 56% 0.5s101.4 MiB [] 59% 0.5s101.4 MiB [] 60% 0.5s101.4 MiB [] 62% 0.4s101.4 MiB [] 64% 0.4s101.4 MiB [] 65% 0.4s101.4 MiB [] 68% 0.3s101.4 MiB [] 69% 0.3s101.4 MiB [] 71% 0.3s101.4 MiB [] 74% 0.3s101.4 MiB [] 75% 0.3s101.4 MiB [] 77% 0.2s101.4 MiB [] 80% 0.2s101.4 MiB [] 81% 0.2s101.4 MiB [] 83% 0.2s101.4 MiB [] 86% 0.1s101.4 MiB [] 89% 0.1s101.4 MiB [] 91% 0.1s101.4 MiB [] 92% 0.1s101.4 MiB [] 94% 0.1s101.4 MiB [] 96% 0.0s101.4 MiB [] 97% 0.0s101.4 MiB [] 100% 0.0s
Chromium Headless Shell 136.0.7103.25 (playwright build v1169) downloaded to /root/.cache/ms-playwright/chromium_headless_shell-1169
++ echo 'source .venv/bin/activate'
bash: .venv/bin/activate: No such file or directory
root@f22fdb476b20:/workspace# ls
scubaduck
root@f22fdb476b20:/workspace# cd scubaduck
root@f22fdb476b20:/workspace/scubaduck# ls
AGENTS.md codex_setup.sh scubaduck tests
README.md pyproject.toml stubs uv.lock
root@f22fdb476b20:/workspace/scubaduck# cat AGENTS.md
- Use "source .venv/bin/activate" to activate the virtual environment before
running any commands
- ONLY use non-interactive commands like cat, sed, apply_patch to do edits.
Do NOT use interactive editors.
- Do NOT attempt to install packages. Only the packages specified in
pyproject.toml are available. You cannot add new packages. If you
desperately want another package, make a note of it in the final PR
description.
- Use conventional commits to format PR title
- There are no nested AGENTS.md files, this is the only agents file
- When using Playwright, ONLY use chromium browser. This browser is already
installed.
- Use "ruff check" to check lint, "ruff format" to autoformat files and
"pyright" to typecheck.
- When writing the PR description, include the original prompt supplied by the
user.
- When you add functionality to the server, add server tests to
tests/test_server.py. When you add features to the frontend, add frontend
tests to tests/test_web.py
The instructions mention activating the virtual environment and using tools like ruff and pyright. I'll inspect the repo.
root@f22fdb476b20:/workspace/scubaduck# ls scubaduck
__init__.py sample.csv server.py static
root@f22fdb476b20:/workspace/scubaduck# ls scubaduck/static
index.html js
root@f22fdb476b20:/workspace/scubaduck# ls scubaduck/static/js
chip_input.js sidebar.js table_view.js time_column.js timeseries_chart.js
I'm opening index.html to check the current logic implementation.
root@f22fdb476b20:/workspace/scubaduck# cat -n scubaduck/static/index.html | hea
d
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>ScubaDuck</title>
6 <style>
7 body { margin: 0; font-family: sans-serif; height: 100vh; display: f
lex; flex-direction: column; }
8 #header { padding: 10px; font-weight: bold; border-bottom: 1px solid
#ccc; }
9 #content { flex: 1; display: flex; height: calc(100vh - 42px); overf
low: hidden; }
10 #sidebar { width: 450px; padding: 10px; border-right: 3px solid #ccc
; overflow-y: auto; display: flex; flex-direction: column; box-sizing: border-bo
x; }
root@f22fdb476b20:/workspace/scubaduck# grep -n "View Settings" -n scubaduck/sta
tic/index.html
197: <button class="tab active" data-tab="settings">View Settings</button
>
I'll review lines 180-260 to check how the view settings are configured.
root@f22fdb476b20:/workspace/scubaduck# sed -n '180,260p' scubaduck/static/index
.html
text-anchor: end;
}
#chart text.y-tick-label {
font-size: 10px;
user-select: none;
}
#chart line.grid {
stroke: #ccc;
}
/* Column resizer removed */
</style>
</head>
<body>
<div id="header">sample.csv - <select id="table"></select> <select id="graph_t
ype"><option value="samples">Samples</option><option value="table">Table</option
><option value="timeseries">Time Series</option></select></div>
<div id="content">
<div id="sidebar">
<div id="tabs">
<button class="tab active" data-tab="settings">View Settings</button>
<button id="columns_tab" class="tab" data-tab="columns">Columns</button>
<button id="dive" onclick="dive()">Dive</button>
</div>
<div id="settings" class="tab-content active">
<div class="field">
<label>Time Column</label>
<select id="time_column"></select>
<select id="time_unit" style="margin-left:4px">
<option value="s">s</option>
<option value="ms">ms</option>
<option value="us">us</option>
<option value="ns">ns</option>
</select>
</div>
<div class="field">
<label>Start<span class="help" title="Sets the start/end of the time r
ange to query. Can be any kind of datetime string. For example: 'April 23, 2014'
or 'yesterday'.">[?]</span></label>
<div class="rel-box">
<input id="start" type="text" />
<button type="button" class="rel-btn" data-target="start-select">	
660;</button>
<div id="start-select" class="rel-dropdown" data-input="start">
<div data-value="-1 hour">-1 hour</div>
<div data-value="-3 hours">-3 hours</div>
<div data-value="-12 hours">-12 hours</div>
<div data-value="-1 day">-1 day</div>
<div data-value="-3 days">-3 days</div>
<div data-value="-1 week">-1 week</div>
<div data-value="-1 fortnight">-1 fortnight</div>
<div data-value="-30 days">-30 days</div>
<div data-value="-90 days">-90 days</div>
</div>
</div>
</div>
<div class="field">
<label>End<span class="help" title="Sets the start/end of the time ran
ge to query. Can be any kind of datetime string. For example: 'April 23, 2014' o
r 'yesterday'.">[?]</span></label>
<div class="rel-box">
<input id="end" type="text" />
<button type="button" class="rel-btn" data-target="end-select">φ
0;</button>
<div id="end-select" class="rel-dropdown" data-input="end">
<div data-value="now">now</div>
<div data-value="-1 hour">-1 hour</div>
<div data-value="-3 hours">-3 hours</div>
<div data-value="-12 hours">-12 hours</div>
<div data-value="-1 day">-1 day</div>
<div data-value="-3 days">-3 days</div>
<div data-value="-1 week">-1 week</div>
<div data-value="-1 fortnight">-1 fortnight</div>
<div data-value="-30 days">-30 days</div>
<div data-value="-90 days">-90 days</div>
</div>
</div>
</div>
<div class="field">
<label>Order By<span class="help" title="Choose a column to sort resul
ts by.">[?]</span></label>
<select id="order_by"></select>
<button id="order_dir" type="button">ASC \u25B2</button>
</div>
<div class="field">
<label>Limit<span class="help" title="Choose the maximum number of res
ults to show in the chart after any aggregations have been applied. For example,
a limit of 10 will show no more than 10 rows for a table, etc.">[?]</span></lab
el>
<input id="limit" type="number" value="100" />
</div>
<div id="x_axis_field" class="field" style="display:none;">
<label>X-axis</label>
<select id="x_axis"></select>
Looking for more lines beyond line 260 in the file.
root@f22fdb476b20:/workspace/scubaduck# sed -n '260,340p' scubaduck/static/index
.html
<select id="x_axis"></select>
</div>
<div id="granularity_field" class="field" style="display:none;">
<label>Granularity</label>
<select id="granularity">
<option>Auto</option>
<option>Fine</option>
<option>1 second</option>
<option>5 seconds</option>
<option>10 seconds</option>
<option>30 seconds</option>
<option>1 minute</option>
<option>4 minutes</option>
<option>5 minutes</option>
<option>10 minutes</option>
<option>15 minutes</option>
<option>30 minutes</option>
<option>1 hour</option>
<option>3 hours</option>
<option>6 hours</option>
<option>1 day</option>
<option>1 week</option>
<option>30 days</option>
</select>
</div>
<div id="fill_field" class="field" style="display:none;">
<label>Fill Missing Buckets</label>
<select id="fill">
<option value="0">Fill with 0 (Per Series)</option>
<option value="connect">Connect (Per Series)</option>
<option value="blank">Leave blank</option>
</select>
</div>
<div id="group_by_field" class="field" style="display:none;">
<label>Group By</label>
<div class="chip-box">
<div class="chip-input">
<input id="group_by" class="f-val" type="text">
<button type="button" class="chip-copy">⎘</button>
</div>
<div class="chip-dropdown"></div>
</div>
</div>
<div id="aggregate_field" class="field" style="display:none;">
<label>Aggregate</label>
<select id="aggregate">
<option>Count</option>
<option>Avg</option>
<option>Sum</option>
<option>Min</option>
<option>Max</option>
<option>Count Distinct</option>
<option>p5</option>
<option>p25</option>
<option>p50</option>
<option>p70</option>
<option>p75</option>
<option>p90</option>
<option>p95</option>
<option>p99</option>
<option>p99.9</option>
<option>p99.99</option>
</select>
</div>
<div id="show_hits_field" class="field" style="display:none;">
<label>Show Hits</label>
<input id="show_hits" type="checkbox" checked>
</div>
<div id="filters">
<h4>Filters<span class="help" title="You can create as many filters as
you want. You can either write a filter using a UI or manual SQL. In the UI, fi
lter consists of a column name, a relation (e.g., =, !=, <, >) and then a text f
ield. The text field is a token input. It accepts multiple tokens for = relation
, in which case we match using an OR for all options.">[?]</span></h4>
<div id="filter_list"></div>
<button id="add_filter" type="button" onclick="addFilter()">Add Filter
</button>
</div>
<div id="query_info" style="margin-top:10px;"></div>
</div>
<div id="columns" class="tab-content">
<div id="column_actions">
<a id="columns_all" href="#">All</a>
<a id="columns_none" href="#">None</a>
</div>
<div id="column_groups"></div>
root@f22fdb476b20:/workspace/scubaduck# sed -n '340,420p' scubaduck/static/index
.html
<div id="column_groups"></div>
<div id="derived_columns">
<h4>Derived Columns</h4>
<div id="derived_list"></div>
<button id="add_derived" type="button" onclick="addDerived()">Add Deri
ved</button>
</div>
</div>
</div>
<div id="sidebar-resizer"></div>
<div id="view">
<table id="results"></table>
</div>
</div>
<script src="/js/chip_input.js"></script>
<script src="/js/timeseries_chart.js"></script>
<script src="/js/time_column.js"></script>
<script src="/js/sidebar.js"></script>
<script src="/js/table_view.js"></script>
<script>
const allColumns = [];
const baseColumns = [];
const columnTypes = {};
const stringColumns = [];
const baseStringColumns = [];
const integerColumns = [];
const baseIntegerColumns = [];
const timeColumns = [];
const baseTimeColumns = [];
const timeColumnOptions = [];
const baseTimeColumnOptions = [];
const derivedColumns = [];
let selectedColumns = [];
let displayType = 'samples';
let groupBy = {chips: [], addChip: () => {}, renderChips: () => {}};
let defaultTimeColumn = '';
const limitInput = document.getElementById('limit');
const limitValues = {
samples: parseInt(limitInput.value, 10),
table: parseInt(limitInput.value, 10),
timeseries: 7
};
const columnValues = {
samples: [],
table: [],
timeseries: []
};
limitInput.addEventListener('input', () => {
limitValues[displayType] = parseInt(limitInput.value, 10);
limitInput.dataset.setByUser = '1';
});
function initDropdown(select) {
// Avoid creating duplicate wrappers if this dropdown was already initialised.
if (select.dataset.dropdownInit) {
const disp = select.parentElement?.querySelector('.dropdown-display');
if (disp) {
const opt = select.options[select.selectedIndex];
disp.textContent = opt ? opt.textContent : '';
}
return;
}
select.dataset.dropdownInit = '1';
const wrapper = document.createElement('div');
wrapper.className = 'dropdown';
if (select.classList.contains('f-col')) {
wrapper.classList.add('f-col');
}
select.parentNode.insertBefore(wrapper, select);
wrapper.appendChild(select);
select.style.display = 'none';
const disp = document.createElement('div');
disp.className = 'dropdown-display';
function updateDisplay() {
const opt = select.options[select.selectedIndex];
disp.textContent = opt ? opt.textContent : '';
}
updateDisplay();
wrapper.appendChild(disp);
const menu = document.createElement('div');
menu.className = 'dropdown-menu';
root@f22fdb476b20:/workspace/scubaduck# sed -n '420,500p' scubaduck/static/index
.html
menu.className = 'dropdown-menu';
const search = document.createElement('input');
search.placeholder = 'Search';
menu.appendChild(search);
const list = document.createElement('div');
menu.appendChild(list);
wrapper.appendChild(menu);
function close() {
menu.style.display = 'none';
}
function open() {
renderOptions();
menu.style.display = 'block';
search.focus();
}
disp.addEventListener('click', () => {
if (menu.style.display === 'block') {
close();
} else {
open();
}
});
document.addEventListener('click', e => {
if (!wrapper.contains(e.target)) {
close();
}
});
function renderOptions() {
const q = search.value.toLowerCase();
list.innerHTML = '';
Array.from(select.options).forEach(o => {
if (!o.textContent.toLowerCase().includes(q)) return;
const div = document.createElement('div');
div.className = 'option';
if (q) {
const text = o.textContent;
const idx = text.toLowerCase().indexOf(q);
if (idx !== -1) {
div.innerHTML =
text.slice(0, idx) +
'<u>' +
text.slice(idx, idx + q.length) +
'</u>' +
text.slice(idx + q.length);
} else {
div.textContent = text;
}
} else {
div.textContent = o.textContent;
}
if (o.value === select.value) div.classList.add('selected');
div.addEventListener('mousedown', evt => {
evt.preventDefault();
select.value = o.value;
select.dispatchEvent(new Event('change'));
updateDisplay();
close();
});
list.appendChild(div);
});
}
search.addEventListener('input', renderOptions);
select.addEventListener('change', updateDisplay);
}
let orderDir = 'ASC';
const orderDirBtn = document.getElementById('order_dir');
const graphTypeSel = document.getElementById('graph_type');
function updateOrderDirButton() {
orderDirBtn.textContent = orderDir + (orderDir === 'ASC' ? ' \u25B2' : ' \u25B
C');
}
function updateDisplayTypeUI() {
const prevType = displayType;
updateSelectedColumns(prevType);
const newType = graphTypeSel.value;
root@f22fdb476b20:/workspace/scubaduck# sed -n '500,580p' scubaduck/static/index
.html
const newType = graphTypeSel.value;
const showTable = newType === 'table';
const showTS = newType === 'timeseries';
document.getElementById('group_by_field').style.display = showTable || showTS
? 'flex' : 'none';
document.getElementById('aggregate_field').style.display = showTable || showTS
? 'flex' : 'none';
document.getElementById('show_hits_field').style.display = showTable ? 'flex'
: 'none';
document.getElementById('x_axis_field').style.display = showTS ? 'flex' : 'non
e';
document.getElementById('granularity_field').style.display = showTS ? 'flex' :
'none';
document.getElementById('fill_field').style.display = showTS ? 'flex' : 'none'
;
document.querySelectorAll('#column_groups .col-group').forEach(g => {
if (g.querySelector('.col-group-header').textContent.startsWith('Strings'))
{
g.style.display = showTable || showTS ? 'none' : '';
}
});
limitValues[prevType] = parseInt(limitInput.value, 10);
if (showTS && limitValues.timeseries === undefined) {
limitValues.timeseries = 7;
}
limitInput.value = limitValues[newType];
document.querySelectorAll('#column_groups input').forEach(cb => {
cb.checked = columnValues[newType].includes(cb.value);
});
if (showTS) {
document.querySelectorAll('#column_groups input').forEach(cb => {
if (isTimeColumn(cb.value) || isStringColumn(cb.value)) {
cb.checked = false;
}
});
document.getElementById('order_by').value = '';
}
updateSelectedColumns(newType);
displayType = newType;
}
function updateTimeFieldVisibility() {
const show = document.getElementById('time_column').value !== '';
document.getElementById('start').closest('.field').style.display = show
? 'flex'
: 'none';
document.getElementById('end').closest('.field').style.display = show
? 'flex'
: 'none';
}
orderDirBtn.addEventListener('click', () => {
orderDir = orderDir === 'ASC' ? 'DESC' : 'ASC';
updateOrderDirButton();
});
updateOrderDirButton();
graphTypeSel.addEventListener('change', updateDisplayTypeUI);
document.getElementById('time_column').addEventListener('change', updateTimeFiel
dVisibility);
updateTimeFieldVisibility();
function loadColumns(table) {
return fetch('/api/columns?table=' + encodeURIComponent(table)).then(r => r.js
on()).then(cols => {
const orderSelect = document.getElementById('order_by');
const xAxisSelect = document.getElementById('x_axis');
const groupsEl = document.getElementById('column_groups');
const timeColumnSelect = document.getElementById('time_column');
orderSelect.innerHTML = '';
xAxisSelect.innerHTML = '';
const defOpt = document.createElement('option');
defOpt.value = '';
defOpt.textContent = '(default)';
xAxisSelect.appendChild(defOpt);
timeColumnSelect.innerHTML = '';
const noneOpt = document.createElement('option');
noneOpt.value = '';
noneOpt.textContent = '(none)';
timeColumnSelect.appendChild(noneOpt);
groupsEl.innerHTML = '';
allColumns.length = 0;
stringColumns.length = 0;
integerColumns.length = 0;
timeColumns.length = 0;
timeColumnOptions.length = 0;
baseColumns.length = 0;
baseStringColumns.length = 0;
baseIntegerColumns.length = 0;
baseTimeColumns.length = 0;
baseTimeColumnOptions.length = 0;
for (const k in columnTypes) delete columnTypes[k];
const groups = {
root@f22fdb476b20:/workspace/scubaduck# sed -n '580,660p' scubaduck/static/index
.html
const groups = {
time: {name: 'Time', cols: [], ul: null},
integer: {name: 'Integers', cols: [], ul: null},
string: {name: 'Strings', cols: [], ul: null},
};
cols.forEach(c => {
const t = c.type.toUpperCase();
columnTypes[c.name] = c.type;
allColumns.push(c.name);
baseColumns.push(c.name);
let g = 'string';
const isNumeric = t.includes('INT') || t.includes('DECIMAL') || t.includes
('NUMERIC') || t.includes('REAL') || t.includes('DOUBLE') || t.includes('FLOAT')
|| t.includes('HUGEINT');
const isTimeType = t.includes('TIMESTAMP') || t.includes('DATE') || t.incl
udes('TIME');
if (isNumeric || isTimeType) {
timeColumnOptions.push(c.name);
baseTimeColumnOptions.push(c.name);
}
if (isTimeType) {
g = 'time';
timeColumns.push(c.name);
baseTimeColumns.push(c.name);
} else if (isNumeric) {
g = 'integer';
}
if (g === 'string') {
stringColumns.push(c.name);
baseStringColumns.push(c.name);
} else if (g === 'integer') {
integerColumns.push(c.name);
baseIntegerColumns.push(c.name);
}
groups[g].cols.push(c.name);
if (g !== 'string') {
const o = document.createElement('option');
o.value = c.name;
o.textContent = c.name;
orderSelect.appendChild(o);
}
});
timeColumns.forEach(name => {
const o = document.createElement('option');
o.value = name;
o.textContent = name;
xAxisSelect.appendChild(o);
});
timeColumnOptions.forEach(name => {
const o = document.createElement('option');
o.value = name;
o.textContent = name;
timeColumnSelect.appendChild(o);
});
xAxisSelect.value = '';
defaultTimeColumn = guessTimeColumn(cols) || '';
updateTimeFieldVisibility();
Object.keys(groups).forEach(key => {
const g = groups[key];
const div = document.createElement('div');
div.className = 'col-group';
const header = document.createElement('div');
header.className = 'col-group-header';
header.appendChild(document.createTextNode(g.name + ': '));
const links = document.createElement('span');
links.className = 'links';
const allBtn = document.createElement('a');
allBtn.href = '#';
allBtn.textContent = 'All';
const noneBtn = document.createElement('a');
noneBtn.href = '#';
noneBtn.textContent = 'None';
links.appendChild(allBtn);
links.appendChild(noneBtn);
header.appendChild(links);
div.appendChild(header);
const ul = document.createElement('ul');
g.ul = ul;
g.cols.forEach(name => {
const li = document.createElement('li');
const label = document.createElement('label');
const cb = document.createElement('input');
cb.type = 'checkbox';
cb.value = name;
root@f22fdb476b20:/workspace/scubaduck# sed -n '660,740p' scubaduck/static/index
.html
cb.value = name;
cb.checked = true;
cb.addEventListener('change', updateSelectedColumns);
label.appendChild(cb);
label.appendChild(document.createTextNode(' ' + name));
li.appendChild(label);
ul.appendChild(li);
});
allBtn.addEventListener('click', e => {
e.preventDefault();
ul.querySelectorAll('input').forEach(cb => (cb.checked = true));
updateSelectedColumns();
});
noneBtn.addEventListener('click', e => {
e.preventDefault();
ul.querySelectorAll('input').forEach(cb => (cb.checked = false));
updateSelectedColumns();
});
div.appendChild(ul);
groupsEl.appendChild(div);
});
document.getElementById('columns_all').addEventListener('click', e => {
e.preventDefault();
groupsEl.querySelectorAll('input').forEach(cb => (cb.checked = true));
updateSelectedColumns();
});
document.getElementById('columns_none').addEventListener('click', e => {
e.preventDefault();
groupsEl.querySelectorAll('input').forEach(cb => (cb.checked = false));
updateSelectedColumns();
});
updateSelectedColumns();
columnValues.samples = allColumns.slice();
columnValues.table = [];
columnValues.timeseries = [];
groupBy = document.getElementById('group_by').closest('.field');
initChipInput(groupBy, typed =>
allColumns.filter(c => c.toLowerCase().includes(typed.toLowerCase()))
);
initDropdown(orderSelect);
initDropdown(document.getElementById('aggregate'));
});
}
let columnsInitialized = false;
fetch('/api/tables').then(r => r.json()).then(tables => {
const tableSel = document.getElementById('table');
tables.forEach(t => {
const o = document.createElement('option');
o.value = t;
o.textContent = t;
tableSel.appendChild(o);
});
initDropdown(tableSel);
const measure = document.createElement('span');
measure.style.visibility = 'hidden';
measure.style.position = 'absolute';
document.body.appendChild(measure);
let maxWidth = 0;
tables.forEach(t => {
measure.textContent = t;
const w = measure.getBoundingClientRect().width;
if (w > maxWidth) maxWidth = w;
});
measure.remove();
const disp = tableSel.parentElement.querySelector('.dropdown-display');
if (disp) disp.style.minWidth = maxWidth + 30 + 'px';
const table = parseSearch().table || tables[0];
tableSel.value = table;
tableSel.dispatchEvent(new Event('change'));
loadColumns(table).then(() => {
updateDisplayTypeUI();
addFilter();
initFromUrl();
columnsInitialized = true;
});
tableSel.addEventListener('change', () => {
loadColumns(tableSel.value).then(() => {
if (columnsInitialized) {
// keep the newly selected table when updating from the URL
const params = parseSearch();
root@f22fdb476b20:/workspace/scubaduck# sed -n '740,820p' scubaduck/static/index
.html
const params = parseSearch();
params.table = tableSel.value;
applyParams(params);
}
});
});
});
document.querySelectorAll('#tabs .tab').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('#tabs .tab').forEach(t => t.classList.remove('act
ive'));
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('a
ctive'));
btn.classList.add('active');
document.getElementById(btn.dataset.tab).classList.add('active');
});
});
document.querySelectorAll('.rel-btn').forEach(btn => {
btn.addEventListener('click', () => {
const dd = document.getElementById(btn.dataset.target);
const show = dd.style.display === 'none' || dd.style.display === '';
document.querySelectorAll('.rel-dropdown').forEach(d => (d.style.display = '
none'));
dd.style.display = show ? 'block' : 'none';
});
});
document.querySelectorAll('.rel-dropdown div').forEach(opt => {
opt.addEventListener('click', () => {
const box = opt.closest('.rel-box');
const input = box.querySelector('input');
input.value = opt.dataset.value || opt.textContent;
opt.parentElement.style.display = 'none';
});
});
document.addEventListener('click', e => {
document.querySelectorAll('.rel-dropdown').forEach(dd => {
if (!dd.parentElement.contains(e.target)) dd.style.display = 'none';
});
});
function updateColumnsTabCount() {
const baseCount = document.querySelectorAll('#column_groups input:checked').le
ngth;
const derivedCount = document.querySelectorAll('#derived_list .derived .d-use:
checked').length;
const btn = document.getElementById('columns_tab');
if (btn) btn.textContent = `Columns (${baseCount + derivedCount})`;
}
function updateSelectedColumns(type = graphTypeSel.value) {
const base = allColumns.filter(name => {
const cb = document.querySelector(`#column_groups input[value="${name}"]`);
if (!cb || !cb.checked) return false;
if (type === 'table' && isStringColumn(name)) return false;
return true;
});
if (type === 'table' || type === 'timeseries') {
selectedColumns = groupBy.chips.slice();
if (document.getElementById('show_hits').checked) selectedColumns.push('Hits
');
base.forEach(c => {
if (!selectedColumns.includes(c)) selectedColumns.push(c);
});
derivedColumns.forEach(dc => {
if (dc.include && !selectedColumns.includes(dc.name)) selectedColumns.push
(dc.name);
});
} else {
selectedColumns = base.slice();
derivedColumns.forEach(dc => {
if (dc.include) selectedColumns.push(dc.name);
});
}
columnValues[type] = selectedColumns.slice();
updateColumnsTabCount();
}
function isStringColumn(name) {
const t = (columnTypes[name] || '').toUpperCase();
return t.includes('CHAR') || t.includes('STRING') || t.includes('VARCHAR');
}
function isIntegerColumn(name) {
const t = (columnTypes[name] || '').toUpperCase();
return t.includes('INT');
root@f22fdb476b20:/workspace/scubaduck# sed -n '820,900p' scubaduck/static/index
.html
return t.includes('INT');
}
function isTimeColumn(name) {
const t = (columnTypes[name] || '').toUpperCase();
if (t.includes('TIMESTAMP') || t.includes('DATE') || t.includes('TIME')) retur
n true;
const sel = document.getElementById('time_column').value;
const xsel = document.getElementById('x_axis').value;
if (name === sel || name === xsel) return true;
return false;
}
function formatNumber(val) {
if (typeof val !== 'number') val = Number(val);
if (Number.isNaN(val)) return '';
if (val === 0) return '0';
const abs = Math.abs(val);
if (abs > 999.999) {
const units = [
{n: 1e12, s: 'T'},
{n: 1e9, s: 'B'},
{n: 1e6, s: 'M'},
{n: 1e3, s: 'K'},
];
for (const u of units) {
if (abs >= u.n) {
return (val / u.n).toFixed(2) + ' ' + u.s;
}
}
}
if (abs < 0.0005) return '0.000';
if (Number.isInteger(val)) return val.toString();
return val.toFixed(3);
}
function addFilter() {
const container = document.createElement('div');
container.className = 'filter';
container.innerHTML = `
<div class="filter-row">
<select class="f-col"></select>
<select class="f-op"></select>
<button type="button" class="remove" onclick="this.closest('.filter').remo
ve()">✖</button>
</div>
<div class="chip-box">
<div class="chip-input">
<input class="f-val" type="text">
<button type="button" class="chip-copy">⎘</button>
</div>
<div class="chip-dropdown"></div>
</div>
`;
const colSel = container.querySelector('.f-col');
colSel.innerHTML = allColumns.map(c => `<option value="${c}">${c}</option>`).j
oin('');
initDropdown(colSel);
function populateOps() {
const opSel = container.querySelector('.f-op');
const col = colSel.value;
const ops = isStringColumn(col)
? [
['=', '='],
['!=', '!='],
['~', 'matches regex'],
['!~', 'not matches regex'],
['contains', 'contains'],
['!contains', 'not contains'],
['empty', 'empty'],
['!empty', 'not empty'],
['LIKE', 'like'],
]
: [
['=', '='],
['!=', '!='],
['<', '<'],
['>', '>'],
];
opSel.innerHTML = ops.map(o => `<option value="${o[0]}">${o[1]}</option>`).j
oin('');
updateInputVis();
}
root@f22fdb476b20:/workspace/scubaduck# sed -n '900,980p' scubaduck/static/index
.html
}
function updateInputVis() {
const op = container.querySelector('.f-op').value;
const box = container.querySelector('.chip-box');
box.style.display = op === 'empty' || op === '!empty' ? 'none' : 'block';
}
colSel.addEventListener('change', populateOps);
container.querySelector('.f-op').addEventListener('change', updateInputVis);
populateOps();
document.getElementById('filter_list').appendChild(container);
initChipInput(container, (typed, el) => {
const colEl = el.querySelector('.f-col select') || el.querySelector('.f-col'
);
if (!colEl) return [];
const col = colEl.value;
if (!isStringColumn(col)) return [];
return fetch(`/api/samples?column=${encodeURIComponent(col)}&q=${encodeURICo
mponent(typed)}`)
.then(r => r.json());
});
}
function nextDerivedName() {
let n = 1;
while (true) {
const name = `derived_${n}`;
if (!derivedColumns.some(d => d.name === name) && !allColumns.includes(name)
) return name;
n++;
}
}
function addDerived(data = {}) {
const container = document.createElement('div');
container.className = 'derived';
container.innerHTML = `
<div class="derived-row">
<select class="d-type">
<option value="aggregated">Aggregated</option>
<option value="string">String</option>
<option value="numeric">Numeric</option>
</select>
<input class="d-name" type="text">
<button type="button" class="remove" onclick="removeDerived(this)">✖</butt
on>
</div>
<label><input type="checkbox" class="d-use" checked> Include in Query</label
>
<textarea class="d-expr" rows="2"></textarea>
`;
document.getElementById('derived_list').appendChild(container);
const obj = {
type: data.type || 'string',
name: data.name || nextDerivedName(),
expr: data.expr || '',
include: data.include !== undefined ? data.include : true,
el: container
};
container.querySelector('.d-type').value = obj.type;
container.querySelector('.d-name').value = obj.name;
container.querySelector('.d-expr').value = obj.expr;
container.querySelector('.d-use').checked = obj.include;
['change','input'].forEach(evt => {
container.addEventListener(evt, refreshDerivedColumns);
});
derivedColumns.push(obj);
refreshDerivedColumns();
}
function removeDerived(btn) {
const el = btn.closest('.derived');
const idx = derivedColumns.findIndex(d => d.el === el);
if (idx !== -1) {
derivedColumns.splice(idx, 1);
}
el.remove();
refreshDerivedColumns();
}
function refreshDerivedColumns() {
allColumns.splice(0, allColumns.length, ...baseColumns);
stringColumns.splice(0, stringColumns.length, ...baseStringColumns);
integerColumns.splice(0, integerColumns.length, ...baseIntegerColumns);
timeColumns.splice(0, timeColumns.length, ...baseTimeColumns);
root@f22fdb476b20:/workspace/scubaduck# sed -n '980,1060p' scubaduck/static/inde
x.html
timeColumns.splice(0, timeColumns.length, ...baseTimeColumns);
timeColumnOptions.splice(0, timeColumnOptions.length, ...baseTimeColumnOptions
);
derivedColumns.forEach(d => {
d.type = d.el.querySelector('.d-type').value;
d.name = d.el.querySelector('.d-name').value;
d.expr = d.el.querySelector('.d-expr').value;
d.include = d.el.querySelector('.d-use').checked;
allColumns.push(d.name);
columnTypes[d.name] = d.type;
if (d.type === 'string') {
stringColumns.push(d.name);
} else {
integerColumns.push(d.name);
timeColumnOptions.push(d.name);
}
});
updateSelectedColumns();
}
let lastQueryTime = 0;
let queryStart = 0;
function dive(push=true) {
const params = collectParams();
if (push) {
history.pushState(params, '', paramsToSearch(params));
}
const payload = Object.assign({}, params);
const dcMap = {};
(params.derived_columns || []).forEach(d => {
if (d.include) dcMap[d.name] = d.expr;
});
payload.derived_columns = dcMap;
const view = document.getElementById('view');
view.innerHTML = '<p>Loading...</p>';
window.lastResults = undefined;
queryStart = performance.now();
fetch('/api/query', {method:'POST', headers:{'Content-Type':'application/json'
}, body:JSON.stringify(payload)})
.then(async r => {
const data = await r.json();
if (!r.ok) throw data;
return data;
})
.then(data => {
lastQueryTime = Math.round(performance.now() - queryStart);
showResults(data);
})
.catch(err => {
showError(err);
});
}
function collectParams() {
updateSelectedColumns();
const payload = {
table: document.getElementById('table').value,
time_column: document.getElementById('time_column').value,
time_unit: document.getElementById('time_unit').value,
start: document.getElementById('start').value,
end: document.getElementById('end').value,
order_by: document.getElementById('order_by').value,
order_dir: orderDir,
limit: parseInt(document.getElementById('limit').value, 10),
columns: selectedColumns.filter(c =>
c !== 'Hits' && !derivedColumns.some(dc => dc.name === c)
),
samples_columns: columnValues.samples.slice(),
table_columns: columnValues.table.slice(),
timeseries_columns: columnValues.timeseries.slice(),
graph_type: graphTypeSel.value,
filters: Array.from(document.querySelectorAll('#filters .filter')).map(f =>
{
const chips = f.chips || [];
const op = f.querySelector('.f-op').value;
let value = null;
if (op !== 'empty' && op !== '!empty') {
value = chips.length === 0 ? null : (chips.length === 1 ? chips[0] : chi
ps);
}
const colSel = f.querySelector('.f-col select') || f.querySelector('.f-col
');
return {column: colSel.value, op, value};
}),
derived_columns: Array.from(document.querySelectorAll('#derived_list .derive
d')).map(d => ({
root@f22fdb476b20:/workspace/scubaduck# sed -n '1060,1140p' scubaduck/static/ind
ex.html
derived_columns: Array.from(document.querySelectorAll('#derived_list .derive
d')).map(d => ({
type: d.querySelector('.d-type').value,
name: d.querySelector('.d-name').value,
expr: d.querySelector('.d-expr').value,
include: d.querySelector('.d-use').checked,
}))
};
if (graphTypeSel.value === 'table' || graphTypeSel.value === 'timeseries') {
payload.group_by = groupBy.chips || [];
payload.aggregate = document.getElementById('aggregate').value;
payload.show_hits = document.getElementById('show_hits').checked;
}
if (graphTypeSel.value === 'timeseries') {
const xval = document.getElementById('x_axis').value;
if (xval) payload.x_axis = xval;
payload.granularity = document.getElementById('granularity').value;
payload.fill = document.getElementById('fill').value;
}
return payload;
}
function paramsToSearch(params) {
const sp = new URLSearchParams();
if (params.table) sp.set('table', params.table);
if (params.time_column) sp.set('time_column', params.time_column);
if (params.time_unit) sp.set('time_unit', params.time_unit);
if (params.start) sp.set('start', params.start);
if (params.end) sp.set('end', params.end);
if (params.order_by) sp.set('order_by', params.order_by);
if (params.order_dir) sp.set('order_dir', params.order_dir);
if (params.limit !== null && params.limit !== undefined) sp.set('limit', param
s.limit);
if (params.samples_columns && params.samples_columns.length) sp.set('samples_c
olumns', params.samples_columns.join(','));
if (params.table_columns && params.table_columns.length) sp.set('table_columns
', params.table_columns.join(','));
if (params.timeseries_columns && params.timeseries_columns.length) sp.set('tim
eseries_columns', params.timeseries_columns.join(','));
if (params.filters && params.filters.length) sp.set('filters', JSON.stringify(
params.filters));
if (params.derived_columns && params.derived_columns.length) sp.set('derived_c
olumns', JSON.stringify(params.derived_columns));
if (params.graph_type) sp.set('graph_type', params.graph_type);
if (params.graph_type === 'table' || params.graph_type === 'timeseries') {
if (params.group_by && params.group_by.length) sp.set('group_by', params.gro
up_by.join(','));
if (params.aggregate) sp.set('aggregate', params.aggregate);
if (params.show_hits) sp.set('show_hits', '1');
}
if (params.graph_type === 'timeseries') {
if (params.x_axis) sp.set('x_axis', params.x_axis);
if (params.granularity) sp.set('granularity', params.granularity);
if (params.fill) sp.set('fill', params.fill);
}
const qs = sp.toString();
return qs ? '?' + qs : '';
}
function applyParams(params) {
if (params.table) document.getElementById('table').value = params.table;
document.getElementById('time_column').value = params.time_column || defaultTi
meColumn;
updateTimeFieldVisibility();
if (params.time_unit) document.getElementById('time_unit').value = params.time
_unit;
document.getElementById('start').value = params.start || '';
document.getElementById('end').value = params.end || '';
if (params.order_by) {
document.getElementById('order_by').value = params.order_by;
}
orderDir = params.order_dir || 'ASC';
updateOrderDirButton();
if (params.limit !== undefined && params.limit !== null) {
document.getElementById('limit').value = params.limit;
limitValues[params.graph_type || 'samples'] = params.limit;
limitInput.dataset.setByUser = '1';
}
graphTypeSel.value = params.graph_type || 'samples';
updateDisplayTypeUI();
limitInput.value = limitValues[graphTypeSel.value];
if (params.x_axis) {
document.getElementById('x_axis').value = params.x_axis;
} else {
document.getElementById('x_axis').value = '';
}
if (params.granularity) document.getElementById('granularity').value = params.
granularity;
if (params.fill) document.getElementById('fill').value = params.fill;
if (params.group_by) {
groupBy.chips.splice(0, groupBy.chips.length, ...params.group_by);
groupBy.renderChips();
root@f22fdb476b20:/workspace/scubaduck# sed -n '1140,1220p' scubaduck/static/ind
ex.html
groupBy.renderChips();
}
if (params.aggregate) document.getElementById('aggregate').value = params.aggr
egate;
document.getElementById('show_hits').checked = params.show_hits ?? true;
if (params.samples_columns) columnValues.samples = params.samples_columns;
if (params.table_columns) columnValues.table = params.table_columns;
if (params.timeseries_columns) columnValues.timeseries = params.timeseries_col
umns;
document.querySelectorAll('#column_groups input').forEach(cb => {
cb.checked = columnValues[graphTypeSel.value].includes(cb.value);
});
updateSelectedColumns(graphTypeSel.value);
const dlist = document.getElementById('derived_list');
dlist.innerHTML = '';
derivedColumns.splice(0, derivedColumns.length);
if (params.derived_columns && params.derived_columns.length) {
params.derived_columns.forEach(dc => addDerived(dc));
}
refreshDerivedColumns();
const list = document.getElementById('filter_list');
list.innerHTML = '';
if (params.filters && params.filters.length) {
params.filters.forEach(f => {
addFilter();
const el = list.lastElementChild;
const colSel = el.querySelector('.f-col select') || el.querySelector('.f-c
ol');
colSel.value = f.column;
colSel.dispatchEvent(new Event('change'));
el.querySelector('.f-op').value = f.op;
el.querySelector('.f-op').dispatchEvent(new Event('change'));
if (f.value !== null && f.op !== 'empty' && f.op !== '!empty') {
const values = Array.isArray(f.value) ? f.value : [f.value];
values.forEach(v => el.addChip(v));
el.renderChips();
}
});
} else {
addFilter();
}
}
function parseSearch() {
const sp = new URLSearchParams(window.location.search);
const params = {};
if (sp.has('table')) params.table = sp.get('table');
if (sp.has('time_column')) params.time_column = sp.get('time_column');
if (sp.has('time_unit')) params.time_unit = sp.get('time_unit');
if (sp.has('start')) params.start = sp.get('start');
if (sp.has('end')) params.end = sp.get('end');
if (sp.has('order_by')) params.order_by = sp.get('order_by');
if (sp.has('order_dir')) params.order_dir = sp.get('order_dir');
if (sp.has('limit')) params.limit = parseInt(sp.get('limit'), 10);
if (sp.has('samples_columns')) params.samples_columns = sp.get('samples_column
s').split(',').filter(c => c);
if (sp.has('table_columns')) params.table_columns = sp.get('table_columns').sp
lit(',').filter(c => c);
if (sp.has('timeseries_columns')) params.timeseries_columns = sp.get('timeseri
es_columns').split(',').filter(c => c);
if (sp.has('filters')) {
try { params.filters = JSON.parse(sp.get('filters')); } catch(e) { params.fi
lters = []; }
}
if (sp.has('graph_type')) params.graph_type = sp.get('graph_type');
if (sp.has('group_by')) params.group_by = sp.get('group_by').split(',').filter
(c => c);
if (sp.has('aggregate')) params.aggregate = sp.get('aggregate');
if (sp.has('show_hits')) params.show_hits = sp.get('show_hits') === '1';
if (sp.has('x_axis')) params.x_axis = sp.get('x_axis');
if (sp.has('granularity')) params.granularity = sp.get('granularity');
if (sp.has('fill')) params.fill = sp.get('fill');
if (sp.has('derived_columns')) {
try { params.derived_columns = JSON.parse(sp.get('derived_columns')); } catc
h(e) { params.derived_columns = []; }
}
return params;
}
function initFromUrl() {
const params = parseSearch();
history.replaceState(params, '', paramsToSearch(params));
applyParams(params);
dive(false);
}
window.addEventListener('popstate', e => {
const params = e.state || parseSearch();
applyParams(params);
dive(false);
root@f22fdb476b20:/workspace/scubaduck# sed -n '1220,1300p' scubaduck/static/ind
ex.html
dive(false);
});
function setSelectValue(selector, value) {
const el = typeof selector === 'string' ? document.querySelector(selector) : s
elector;
if (el) {
const select = el.tagName === 'SELECT' ? el : el.querySelector('select');
if (select) {
select.value = value;
select.dispatchEvent(new Event('change'));
}
}
}
</script>
</body>
</html>
The logic in index.html needs to be moved to dedicated JS files for organization.
root@f22fdb476b20:/workspace/scubaduck# ls scubaduck/static/js
chip_input.js sidebar.js table_view.js time_column.js timeseries_chart.js
root@f22fdb476b20:/workspace/scubaduck# cat -n scubaduck/static/js/sidebar.js |
head -n 40
1 // Sidebar resizing logic extracted from index.html
2
3 const sidebar = document.getElementById('sidebar');
4 const sidebarResizer = document.getElementById('sidebar-resizer');
5 let sidebarWidth = parseInt(localStorage.getItem('sidebarWidth') || 450,
10);
6 sidebar.style.width = sidebarWidth + 'px';
7 let sidebarResize = false;
8
9 function startSidebarDrag(e) {
10 e.preventDefault();
11 sidebarResize = true;
12 document.addEventListener('mousemove', onSidebarDrag);
13 document.addEventListener('mouseup', stopSidebarDrag);
14 }
15
16 function onSidebarDrag(e) {
17 if (!sidebarResize) return;
18 sidebarWidth = Math.max(200, e.clientX - sidebar.getBoundingClientRect
().left);
19 sidebar.style.width = sidebarWidth + 'px';
20 }
21
22 function stopSidebarDrag() {
23 document.removeEventListener('mousemove', onSidebarDrag);
24 document.removeEventListener('mouseup', stopSidebarDrag);
25 sidebarResize = false;
26 localStorage.setItem('sidebarWidth', sidebarWidth);
27 }
28
29 sidebarResizer.addEventListener('mousedown', startSidebarDrag);
30
root@f22fdb476b20:/workspace/scubaduck# cat scubaduck/static/js/table_view.js |
head -n 40
// Logic for rendering the table based views. Extracted from index.html so that
// the inline script only handles wiring up the UI.
let originalRows = [];
let sortState = { index: null, dir: null };
function renderTable(rows) {
const table = document.getElementById("results");
table.innerHTML = "";
if (rows.length === 0) return;
let hitsIndex = selectedColumns.indexOf("Hits");
let totalHits = 0;
if (hitsIndex !== -1) {
totalHits = rows.reduce((s, r) => s + Number(r[hitsIndex]), 0);
}
const header = document.createElement("tr");
selectedColumns.forEach((col, i) => {
const th = document.createElement("th");
let label = col;
if (
displayType === "table" &&
col !== "Hits" &&
!(groupBy.chips || []).includes(col)
) {
const agg = document.getElementById("aggregate").value.toLowerCase();
label += ` (${agg})`;
}
th.textContent = label;
th.dataset.index = i;
th.addEventListener("click", handleSort);
if (sortState.index === i) {
th.classList.add("sorted");
th.textContent = label + (sortState.dir === "desc" ? " \u25BC" : " \u25B2"
);
}
if (!isStringColumn(col)) th.style.textAlign = "right";
header.appendChild(th);
});
table.appendChild(header);
rows.forEach((row) => {
const tr = document.createElement("tr");
root@f22fdb476b20:/workspace/scubaduck# grep -n "View Settings" -n scubaduck/sta
tic/js/*
There's no existing JS for view settings, so I'll move the logic into a new file.
root@f22fdb476b20:/workspace/scubaduck# ls tests
conftest.py test_multi_table_web.py test_server.py test_web.py
I’m opening tests/test_web.py to understand how the front-end tests are executed.
"arg => setSelectValue(arg.sel, arg.val)",
{"sel": selector, "val": value},
)
def run_query(
page: Any,
url: str,
*,
start: str | None = None,
end: str | None = None,
order_by: str | None = None,
order_dir: str | None = "ASC",
limit: int | None = None,
group_by: list[str] | None = None,
aggregate: str | None = None,
) -> dict[str, Any]:
page.goto(url)
page.wait_for_selector("#order_by option", state="attached")
page.wait_for_selector("#order_dir", state="attached")
page.wait_for_function("window.lastResults !== undefined")
if start is not None:
page.fill("#start", start)
if end is not None:
page.fill("#end", end)
if order_by is not None:
select_value(page, "#order_by", order_by)
if order_dir is not None and order_dir == "DESC":
page.click("#order_dir")
if limit is not None:
page.fill("#limit", str(limit))
if group_by is not None:
select_value(page, "#graph_type", "table")
page.evaluate(
"g => { groupBy.chips = g; groupBy.renderChips(); }",
group_by,
)
if aggregate is not None:
select_value(page, "#graph_type", "table")
select_value(page, "#aggregate", aggregate)
if page.input_value("#graph_type") != "samples":
page.click("text=Columns")
page.wait_for_selector("#column_groups input", state="attached")
if not page.is_checked("#column_groups input[value='value']"):
page.check("#column_groups input[value='value']")
order_col = order_by or page.input_value("#order_by")
if order_col and not page.is_checked(
f"#column_groups input[value='{order_col}']"
):
if page.query_selector(f"#column_groups input[value='{order_col}']")
:
page.check(f"#column_groups input[value='{order_col}']")
page.click("text=View Settings")
page.evaluate("window.lastResults = undefined")
page.click("text=Dive")
page.wait_for_function("window.lastResults !== undefined")
return page.evaluate("window.lastResults")
def test_range_filters(page: Any, server_url: str) -> None:
data = run_query(
page,
server_url,
start="2024-01-02 00:00:00",
end="2024-01-02 04:00:00",
order_by="user",
limit=100,
)
assert len(data["rows"]) == 2
from dateutil import parser
timestamps = [parser.parse(row[0]).replace(tzinfo=None) for row in data["row
s"]]
assert timestamps == [
parser.parse("2024-01-02 00:00:00"),
parser.parse("2024-01-02 03:00:00"),
]
def test_order_by(page: Any, server_url: str) -> None:
data = run_query(
page,
server_url,
start="2024-01-01 00:00:00",
end="2024-01-03 00:00:00",
order_by="value",
order_dir="DESC",
limit=100,
)
values = [row[2] for row in data["rows"]]
assert values == sorted(values, reverse=True)
def test_limit(page: Any, server_url: str) -> None:
data = run_query(
page,
server_url,
start="2024-01-01 00:00:00",
end="2024-01-03 00:00:00",
order_by="user",
limit=2,
)
assert len(data["rows"]) == 2
def test_time_column_dropdown(page: Any, server_url: str) -> None:
page.goto(server_url)
page.wait_for_selector("#time_column option", state="attached")
options = page.locator("#time_column option").all_inner_texts()
assert "(none)" in options
assert "timestamp" in options
assert "value" in options
assert page.input_value("#time_column") == "timestamp"
def test_time_column_none_hides_range(page: Any, server_url: str) -> None:
page.goto(server_url)
page.wait_for_selector("#time_column option", state="attached")
select_value(page, "#time_column", "")
assert page.is_hidden("#start")
assert page.is_hidden("#end")
page.evaluate("window.lastResults = undefined")
page.click("text=Dive")
page.wait_for_function("window.lastResults !== undefined")
data = page.evaluate("window.lastResults")
assert len(data["rows"]) == 4
assert "start" not in data and "end" not in data
def test_time_unit_dropdown(page: Any, server_url: str) -> None:
page.goto(server_url)
page.wait_for_selector("#time_unit", state="attached")
opts = page.locator("#time_unit option").all_inner_texts()
assert "ms" in opts
assert page.input_value("#time_unit") == "s"
def test_table_selector_dropdown(page: Any, server_url: str) -> None:
page.goto(server_url)
page.wait_for_selector("#table option", state="attached")
disp = page.query_selector("#table + .dropdown-display")
assert disp
assert (
page.evaluate("getComputedStyle(document.querySelector('#table')).displa
y")
== "none"
)
assert page.query_selector("#table + .dropdown-display + .dropdown-menu inpu
t")
def test_x_axis_default_entry(page: Any, server_url: str) -> None:
page.goto(server_url)
page.wait_for_selector("#graph_type", state="attached")
select_value(page, "#graph_type", "timeseries")
page.wait_for_selector("#x_axis option", state="attached")
options = page.locator("#x_axis option").all_inner_texts()
assert filter_el
page.evaluate(
"arg => setSelectValue(arg.el.querySelector('.f-col'), arg.val)",
{"el": filter_el, "val": "user"},
)
val_input = filter_el.query_selector(".f-val")
val_input.click()
page.keyboard.type("alice")
page.keyboard.press("Enter")
page.click("text=Dive")
page.wait_for_function("window.lastResults !== undefined")
data = page.evaluate("window.lastResults")
assert len(data["rows"]) == 2
assert all(row[3] == "alice" for row in data["rows"])
def test_default_filter_and_layout(page: Any, server_url: str) -> None:
page.goto(server_url)
page.wait_for_selector("#order_by option", state="attached")
count = page.evaluate("document.querySelectorAll('#filters .filter').length"
)
assert count == 1
last_is_button = page.evaluate(
"document.querySelector('#filters').lastElementChild.id === 'add_filter'
"
)
assert last_is_button
position = page.evaluate(
"getComputedStyle(document.querySelector('#filters .filter button.remove
')).position"
)
assert position == "static"
def test_filter_remove_alignment(page: Any, server_url: str) -> None:
page.goto(server_url)
page.wait_for_selector("#order_by option", state="attached")
diff = page.evaluate(
"() => { const r=document.querySelector('#filters .filter-row').getBound
ingClientRect(); const x=document.querySelector('#filters .filter-row button.rem
ove').getBoundingClientRect(); return Math.abs(r.right - x.right); }"
)
assert diff <= 1
def test_header_and_tabs(page: Any, server_url: str) -> None:
page.goto(server_url)
page.wait_for_selector("#order_by option", state="attached")
header = page.text_content("#header")
assert "sample.csv" in header
assert "events" in header
assert page.is_visible("#settings")
assert page.is_hidden("#columns")
page.click("text=Columns")
assert page.is_visible("#columns")
cols = [c.strip() for c in page.locator("#column_groups li").all_inner_texts
()]
assert "timestamp" in cols
assert "event" in cols
page.click("text=View Settings")
assert page.is_visible("#settings")
btn_color = page.evaluate(
"getComputedStyle(document.querySelector('#dive')).backgroundColor"
)
assert "rgb(0, 128, 0)" == btn_color
sidebar_overflow = page.evaluate(
"getComputedStyle(document.querySelector('#sidebar')).overflowY"
)
view_overflow = page.evaluate(
"getComputedStyle(document.querySelector('#view')).overflowY"
)
assert sidebar_overflow == "auto"
assert view_overflow == "auto"
def test_graph_type_table_fields(page: Any, server_url: str) -> None:
page.goto(server_url)
page.wait_for_selector("#graph_type", state="attached")
select_value(page, "#graph_type", "table")
assert page.is_visible("#group_by_field")
assert page.is_visible("#aggregate_field")
assert page.is_visible("#show_hits_field")
page.click("text=Columns")
assert not page.is_visible("text=Strings:")
def test_graph_type_timeseries_fields(page: Any, server_url: str) -> None:
page.goto(server_url)
page.wait_for_selector("#graph_type", state="attached")
select_value(page, "#graph_type", "timeseries")
assert page.is_visible("#group_by_field")
assert page.is_visible("#aggregate_field")
assert page.is_visible("#x_axis_field")
assert page.is_visible("#granularity_field")
assert page.is_visible("#fill_field")
def test_limit_persists_per_chart_type(page: Any, server_url: str) -> None:
page.goto(server_url)
page.wait_for_selector("#graph_type", state="attached")
assert page.input_value("#limit") == "100"
select_value(page, "#graph_type", "timeseries")
assert page.input_value("#limit") == "7"
select_value(page, "#graph_type", "samples")
assert page.input_value("#limit") == "100"
def test_columns_persist_per_chart_type(page: Any, server_url: str) -> None:
page.goto(server_url)
page.wait_for_selector("#graph_type", state="attached")
page.click("text=Columns")
page.wait_for_selector("#column_groups input", state="attached")
page.uncheck("#column_groups input[value='value']")
select_value(page, "#graph_type", "timeseries")
count = page.evaluate(
"document.querySelectorAll('#column_groups input:checked').length"
)
assert count == 0
select_value(page, "#graph_type", "samples")
count = page.evaluate(
"document.querySelectorAll('#column_groups input:checked').length"
)
assert count == 3
def test_timeseries_default_query(page: Any, server_url: str) -> None:
page.goto(server_url)
page.wait_for_selector("#graph_type", state="attached")
select_value(page, "#graph_type", "timeseries")
page.click("text=Columns")
page.check("#column_groups input[value='value']")
page.click("text=View Settings")
page.evaluate("window.lastResults = undefined")
page.click("text=Dive")
page.wait_for_function("window.lastResults !== undefined")
data = page.evaluate("window.lastResults")
assert "error" not in data
assert page.is_visible("#chart")
page.click("text=Columns")
assert not page.is_checked("#column_groups input[value='timestamp']")
def test_timeseries_single_bucket(page: Any, server_url: str) -> None:
page.goto(server_url)
page.wait_for_selector("#graph_type", state="attached")
page.fill("#start", "2024-01-01 00:00:00")
page.fill("#end", "2024-01-01 00:00:00")
select_value(page, "#graph_type", "timeseries")
page.click("text=Columns")
page.check("#column_groups input[value='value']")
page.click("text=View Settings")
page.evaluate("window.lastResults = undefined")
page.click("text=Dive")
page.check("#column_groups input[value='value']")
page.click("text=View Settings")
select_value(page, "#granularity", "1 hour")
select_value(page, "#fill", "0")
page.evaluate("window.lastResults = undefined")
page.click("text=Dive")
page.wait_for_function("window.lastResults !== undefined")
path_zero = page.get_attribute("#chart path", "d")
assert path_zero is not None and path_zero.count("L") > 20
select_value(page, "#fill", "connect")
page.evaluate("window.lastResults = undefined")
page.click("text=Dive")
page.wait_for_function("window.lastResults !== undefined")
path_conn = page.get_attribute("#chart path", "d")
assert path_conn is not None and path_conn.count("M") == 1
select_value(page, "#fill", "blank")
page.evaluate("window.lastResults = undefined")
page.click("text=Dive")
page.wait_for_function("window.lastResults !== undefined")
path_blank = page.get_attribute("#chart path", "d")
assert path_blank is not None and path_blank.count("M") > 1
def test_timeseries_hover_highlight(page: Any, server_url: str) -> None:
page.goto(server_url)
page.wait_for_selector("#graph_type", state="attached")
select_value(page, "#graph_type", "timeseries")
page.click("text=Columns")
page.check("#column_groups input[value='value']")
page.click("text=View Settings")
page.evaluate("window.lastResults = undefined")
page.click("text=Dive")
page.wait_for_function("window.lastResults !== undefined")
page.wait_for_selector("#chart path", state="attached")
path_el = page.query_selector("#chart path")
assert path_el
page.evaluate(
"el => el.dispatchEvent(new MouseEvent('mouseenter', {bubbles: true}))",
path_el,
)
width = page.evaluate(
"getComputedStyle(document.querySelector('#chart path')).strokeWidth"
)
assert "2.5" in width
color = page.evaluate(
"getComputedStyle(document.querySelector('#legend .legend-item')).backgr
oundColor"
)
assert "221, 221, 221" in color
def test_timeseries_crosshair(page: Any, server_url: str) -> None:
page.goto(server_url)
page.wait_for_selector("#graph_type", state="attached")
select_value(page, "#graph_type", "timeseries")
page.click("text=Columns")
page.check("#column_groups input[value='value']")
page.click("text=View Settings")
page.evaluate("window.lastResults = undefined")
page.click("text=Dive")
page.wait_for_function("window.lastResults !== undefined")
page.wait_for_selector("#chart path", state="attached")
page.eval_on_selector(
"#chart",
"el => { const r = el.getBoundingClientRect(); el.dispatchEvent(new Mous
eEvent('mousemove', {clientX: r.left + r.width/2, clientY: r.top + r.height/2, b
ubbles: true})); }",
)
line_display = page.evaluate(
"document.getElementById('crosshair_line').style.display"
)
assert line_display != "none"
count = page.eval_on_selector_all("#crosshair_dots circle", "els => els.leng
th")
assert count > 0
page.eval_on_selector(
"#chart",
"el => el.dispatchEvent(new MouseEvent('mouseleave', {bubbles: true}))",
)
line_display = page.evaluate(
"document.getElementById('crosshair_line').style.display"
)
assert line_display == "none"
def test_timeseries_crosshair_freeze(page: Any, server_url: str) -> None:
page.goto(server_url)
page.wait_for_selector("#graph_type", state="attached")
select_value(page, "#graph_type", "timeseries")
page.click("text=Columns")
page.check("#column_groups input[value='value']")
page.click("text=View Settings")
page.evaluate("window.lastResults = undefined")
page.click("text=Dive")
page.wait_for_function("window.lastResults !== undefined")
page.wait_for_selector("#chart path", state="attached")
page.eval_on_selector(
"#chart",
"el => { const r = el.getBoundingClientRect(); el.dispatchEvent(new Mous
eEvent('mousemove', {clientX: r.left + r.width/2, clientY: r.top + r.height/2, b
ubbles: true})); }",
)
page.eval_on_selector(
"#chart",
"el => { const r = el.getBoundingClientRect(); el.dispatchEvent(new Mous
eEvent('click', {clientX: r.left + r.width/2, clientY: r.top + r.height/2, bubbl
es: true})); }",
)
line_display = page.evaluate(
"document.getElementById('crosshair_line').style.display"
)
assert line_display != "none"
pos1 = page.evaluate("document.getElementById('crosshair_line').getAttribute
('x1')")
page.eval_on_selector(
"#chart",
"el => { const r = el.getBoundingClientRect(); el.dispatchEvent(new Mous
eEvent('mousemove', {clientX: r.left + r.width/4, clientY: r.top + r.height/2, b
ubbles: true})); }",
)
pos2 = page.evaluate("document.getElementById('crosshair_line').getAttribute
...
)
assert text_align == "right"
def test_table_sorting(page: Any, server_url: str) -> None:
run_query(
page,
server_url,
start="2024-01-01 00:00:00",
end="2024-01-03 00:00:00",
order_by="user",
order_dir="ASC",
limit=100,
)
# header alignment
align = page.evaluate(
"getComputedStyle(document.querySelector('#results th')).textAlign"
)
assert align == "right"
header = page.locator("#results th").nth(3)
def values() -> list[str]:
return page.locator("#results td:nth-child(4)").all_inner_texts()
orig_rows = values()
assert orig_rows == ["alice", "bob", "alice", "charlie"]
first_sql = page.evaluate("window.lastResults.sql")
header.click()
assert values() == sorted(orig_rows)
assert header.inner_text().endswith("▲")
color = page.evaluate(
"getComputedStyle(document.querySelector('#results th:nth-child(4)')).co
lor"
)
assert "0, 0, 255" in color
assert page.evaluate("window.lastResults.sql") == first_sql
header.click()
assert values() == sorted(orig_rows, reverse=True)
assert header.inner_text().endswith("▼")
header.click()
assert values() == orig_rows
assert header.inner_text() == "user"
color = page.evaluate(
"getComputedStyle(document.querySelector('#results th:nth-child(4)')).co
lor"
)
assert "0, 0, 255" not in color
def test_relative_dropdown(page: Any, server_url: str) -> None:
page.goto(server_url)
page.wait_for_selector("#order_by option", state="attached")
btn = page.query_selector('[data-target="start-select"]')
assert btn
btn.click()
page.click("#start-select div:text('-3 hours')")
assert page.input_value("#start") == "-3 hours"
def test_end_dropdown_now(page: Any, server_url: str) -> None:
page.goto(server_url)
page.wait_for_selector("#order_by option", state="attached")
page.click('[data-target="end-select"]')
page.click("#end-select div:text('now')")
assert page.input_value("#end") == "now"
def test_invalid_time_error_shown(page: Any, server_url: str) -> None:
data = run_query(
page,
server_url,
start="nonsense",
end="now",
order_by="user",
)
assert "error" in data
msg = page.text_content("#view")
assert "nonsense" in msg
def test_table_avg_group_by(page: Any, server_url: str) -> None:
data = run_query(
page,
server_url,
start="2024-01-01 00:00:00",
end="2024-01-03 00:00:00",
order_by="timestamp",
group_by=["user"],
aggregate="Avg",
)
assert "error" not in data
assert len(data["rows"]) == 3
def test_column_toggle_and_selection(page: Any, server_url: str) -> None:
page.goto(server_url)
page.wait_for_selector("#order_by option", state="attached")
page.click("text=Columns")
page.wait_for_selector("#column_groups input", state="attached")
count = page.evaluate(
"document.querySelectorAll('#column_groups input:checked').length"
)
assert count == 4
page.click("#columns_none")
count = page.evaluate(
"document.querySelectorAll('#column_groups input:checked').length"
)
assert count == 0
page.click("#columns_all")
count = page.evaluate(
"document.querySelectorAll('#column_groups input:checked').length"
)
assert count == 4
page.uncheck("#column_groups input[value='value']")
page.click("text=View Settings")
page.fill("#start", "2024-01-01 00:00:00")
I’m scrolling further to find the remaining tests at the bottom.
def test_columns_links_alignment(page: Any, server_url: str) -> None:
page.goto(server_url)
page.wait_for_selector("#order_by option", state="attached")
page.click("text=Columns")
page.wait_for_selector("#column_groups input", state="attached")
tag = page.evaluate("document.getElementById('columns_all').tagName")
assert tag == "A"
align = page.evaluate(
"getComputedStyle(document.querySelector('#column_actions')).textAlign"
)
assert align == "right"
def test_column_group_links(page: Any, server_url: str) -> None:
page.goto(server_url)
page.wait_for_selector("#order_by option", state="attached")
page.click("text=Columns")
page.wait_for_selector("#column_groups a", state="attached")
tag = page.evaluate("document.querySelector('#column_groups .col-group a').t
agName")
assert tag == "A"
def test_column_group_links_float_right(page: Any, server_url: str) -> None:
page.goto(server_url)
page.wait_for_selector("#order_by option", state="attached")
page.click("text=Columns")
page.wait_for_selector("#column_groups .col-group .links", state="attached")
float_val = page.evaluate(
"getComputedStyle(document.querySelector('#column_groups .col-group .lin
ks')).float"
)
assert float_val == "right"
def test_columns_tab_selected_count(page: Any, server_url: str) -> None:
page.goto(server_url)
page.wait_for_selector("#order_by option", state="attached")
count_text = page.text_content("#columns_tab")
assert count_text is not None and "(4)" in count_text
page.click("text=Columns")
page.wait_for_selector("#column_groups input", state="attached")
page.uncheck("#column_groups input[value='value']")
count_text = page.text_content("#columns_tab")
assert count_text is not None and "(3)" in count_text
def test_chip_dropdown_navigation(page: Any, server_url: str) -> None:
page.goto(server_url)
page.wait_for_selector("#order_by option", state="attached")
page.click("text=Add Filter")
f = page.query_selector("#filters .filter:last-child")
assert f
page.evaluate(
"arg => setSelectValue(arg.el.querySelector('.f-col'), arg.val)",
{"el": f, "val": "user"},
)
inp = f.query_selector(".f-val")
inp.click()
page.wait_for_selector("#filters .filter:last-child .chip-dropdown div")
page.keyboard.type("ali")
page.wait_for_selector("text=alice")
page.keyboard.press("ArrowDown")
page.keyboard.press("Enter")
chips = page.evaluate(
"Array.from(document.querySelectorAll('#filters .filter:last-child .chip
')).map(c => c.firstChild.textContent)"
)
assert chips == ["ali"]
page.click("#filters .filter:last-child .chip .x")
page.wait_for_selector(".chip", state="detached")
def test_chip_copy_and_paste(page: Any, server_url: str) -> None:
page.goto(server_url)
page.wait_for_selector("#order_by option", state="attached")
page.evaluate(
"Object.defineProperty(navigator, 'clipboard', {value:{ _data: '', write
Text(t){ this._data = t; }, readText(){ return Promise.resolve(this._data); } }}
)"
)
page.click("text=Add Filter")
f = page.query_selector("#filters .filter:last-child")
assert f
page.evaluate(
"arg => setSelectValue(arg.el.querySelector('.f-col'), arg.val)",
{"el": f, "val": "user"},
)
inp = f.query_selector(".f-val")
inp.click()
page.keyboard.type("alice")
page.keyboard.press("Enter")
inp.click()
page.keyboard.type("bob")
page.keyboard.press("Enter")
f.query_selector(".chip-copy").click()
assert page.evaluate("navigator.clipboard._data") == "alice,bob"
page.evaluate(
"var f=document.querySelector('#filters .filter:last-child'); f.chips=[]
; f.querySelectorAll('.chip').forEach(c=>c.remove())"
)
page.wait_for_selector("#filters .chip", state="detached")
inp.click()
page.evaluate(
"var dt=new DataTransfer(); dt.setData('text/plain','alice,bob'); var e=
new ClipboardEvent('paste',{clipboardData:dt}); document.querySelector('#filters
.filter:last-child .f-val').dispatchEvent(e);"
)
chips = page.evaluate(
"Array.from(document.querySelectorAll('#filters .filter:last-child .chip
')).map(c => c.firstChild.textContent)"
)
assert chips[:2] == ["alice", "bob"]
page.evaluate(
"var f=document.querySelector('#filters .filter:last-child'); f.chips=[]
; f.querySelectorAll('.chip').forEach(c=>c.remove())"
)
page.wait_for_selector("#filters .chip", state="detached")
inp.click()
page.evaluate(
"var dt=new DataTransfer(); dt.setData('text/plain','alice,bob'); var e=
new ClipboardEvent('paste',{clipboardData:dt}); Object.defineProperty(e,'shiftKe
y',{value:true}); document.querySelector('#filters .filter:last-child .f-val').d
ispatchEvent(e);"
...
)
assert focused
visible = page.evaluate(
"getComputedStyle(document.querySelector('#filters .filter:last-child .c
hip-dropdown')).display"
)
assert visible == "block"
def test_chip_click_blurs_input(page: Any, server_url: str) -> None:
page.goto(server_url)
page.wait_for_selector("#order_by option", state="attached")
page.click("text=Add Filter")
f = page.query_selector("#filters .filter:last-child")
assert f
page.evaluate(
"arg => setSelectValue(arg.el.querySelector('.f-col'), arg.val)",
{"el": f, "val": "user"},
)
inp = f.query_selector(".f-val")
inp.click()
page.wait_for_selector("#filters .filter:last-child .chip-dropdown")
page.keyboard.type("ali")
page.wait_for_selector(
"#filters .filter:last-child .chip-dropdown div:text('alice')"
)
page.click("#filters .filter:last-child .chip-dropdown div:text('alice')")
focused = page.evaluate(
"document.activeElement === document.querySelector('#filters .filter:las
t-child .f-val')"
)
assert not focused
visible = page.evaluate(
"getComputedStyle(document.querySelector('#filters .filter:last-child .c
hip-dropdown')).display"
)
assert visible == "none"
def test_chip_dropdown_hides_on_column_click(page: Any, server_url: str) -> None
:
page.goto(server_url)
page.wait_for_selector("#order_by option", state="attached")
page.click("text=Add Filter")
f = page.query_selector("#filters .filter:last-child")
assert f
page.evaluate(
"arg => setSelectValue(arg.el.querySelector('.f-col'), arg.val)",
{"el": f, "val": "user"},
)
inp = f.query_selector(".f-val")
inp.click()
page.wait_for_selector("#filters .filter:last-child .chip-dropdown div")
f.query_selector(".f-col + .dropdown-display").click()
page.wait_for_selector("#filters .filter:last-child .chip-dropdown", state="
hidden")
def test_chip_backspace_keeps_dropdown(page: Any, server_url: str) -> None:
page.goto(server_url)
page.wait_for_selector("#order_by option", state="attached")
page.click("text=Add Filter")
f = page.query_selector("#filters .filter:last-child")
assert f
page.evaluate(
"arg => setSelectValue(arg.el.querySelector('.f-col'), arg.val)",
{"el": f, "val": "user"},
)
inp = f.query_selector(".f-val")
inp.click()
page.keyboard.type("alice")
page.keyboard.press("Enter")
page.keyboard.type("b")
page.wait_for_selector("#filters .filter:last-child .chip-dropdown div")
page.keyboard.press("Backspace")
page.wait_for_function(
"document.querySelector('#filters .filter:last-child .f-val').value ===
''"
)
focused = page.evaluate(
"document.activeElement === document.querySelector('#filters .filter:las
t-child .f-val')"
)
assert focused
visible = page.evaluate(
"getComputedStyle(document.querySelector('#filters .filter:last-child .c
hip-dropdown')).display"
)
assert visible == "block"
def test_chip_duplicate_toggles(page: Any, server_url: str) -> None:
page.goto(server_url)
page.wait_for_selector("#order_by option", state="attached")
page.click("text=Add Filter")
f = page.query_selector("#filters .filter:last-child")
assert f
page.evaluate(
"arg => setSelectValue(arg.el.querySelector('.f-col'), arg.val)",
{"el": f, "val": "user"},
)
inp = f.query_selector(".f-val")
inp.click()
page.keyboard.type("alice")
page.keyboard.press("Enter")
chips = page.evaluate(
"Array.from(document.querySelectorAll('#filters .filter:last-child .chip
')).map(c => c.firstChild.textContent)"
)
assert chips == ["alice"]
inp.click()
page.keyboard.type("alice")
page.keyboard.press("Enter")
chips = page.evaluate(
"Array.from(document.querySelectorAll('#filters .filter:last-child .chip
')).map(c => c.firstChild.textContent)"
)
assert chips == []
def test_table_enhancements(page: Any, server_url: str) -> None:
run_query(
page,
server_url,
The tests are long, but I only need what's related to my changes.
root@f22fdb476b20:/workspace/scubaduck# sed -n '1,80p' scubaduck/scubaduck/serve
r.py
sed: can't read scubaduck/scubaduck/server.py: No such file or directory
Hmm, the path includes 'scubaduck'. I’ll go ahead and run now.
root@f22fdb476b20:/workspace/scubaduck# ls scubaduck
__init__.py sample.csv server.py static
I'll open scubaduck/server.py now to check its contents.
from datetime import datetime, timedelta, timezone
import time
from pathlib import Path
import os
import traceback
import math
import duckdb
from dateutil import parser as dtparser
from flask import Flask, jsonify, request, send_from_directory
def _quote(ident: str) -> str:
"""Return identifier quoted for SQL."""
return f'"{ident.replace('"', '""')}"'
@dataclass
class Filter:
column: str
op: str
value: str | int | float | list[str] | None
@dataclass
class QueryParams:
start: str | None = None
end: str | None = None
order_by: str | None = None
order_dir: str = "ASC"
limit: int | None = None
columns: list[str] = field(default_factory=lambda: [])
filters: list[Filter] = field(default_factory=lambda: [])
derived_columns: dict[str, str] = field(default_factory=lambda: {})
graph_type: str = "samples"
group_by: list[str] = field(default_factory=lambda: [])
aggregate: str | None = None
show_hits: bool = False
x_axis: str | None = None
granularity: str = "Auto"
fill: str = "0"
table: str = "events"
time_column: str | None = "timestamp"
time_unit: str = "s"
def _load_database(path: Path) -> duckdb.DuckDBPyConnection:
if not path.exists():
raise FileNotFoundError(path)
ext = path.suffix.lower()
if ext == ".csv":
con = duckdb.connect()
con.execute(
f"CREATE TABLE events AS SELECT * FROM read_csv_auto('{path.as_posix
()}')"
)
elif ext in {".db", ".sqlite"}:
con = duckdb.connect()
con.execute("LOAD sqlite")
con.execute(f"ATTACH '{path.as_posix()}' AS db (TYPE SQLITE)")
tables = [
r[0]
for r in con.execute(
"SELECT name FROM sqlite_master WHERE type='table'"
).fetchall()
]
for t in tables:
con.execute(f'CREATE VIEW "{t}" AS SELECT * FROM db."{t}"')
else:
con = duckdb.connect(path)
return con
def _create_test_database() -> duckdb.DuckDBPyConnection:
"""Return a DuckDB connection with a small multi-table dataset."""
con = duckdb.connect()
con.execute(
"CREATE TABLE events (id INTEGER PRIMARY KEY, ts INTEGER, val REAL, name
TEXT, flag BOOLEAN)"
)
con.execute("INSERT INTO events VALUES (1, 1704067200, 1.5, 'alice', 1)")
con.execute("INSERT INTO events VALUES (2, 1704070800, 2.0, 'bob', 0)")
con.execute('CREATE TABLE extra (ts INTEGER, "desc" TEXT, num INTEGER)')
con.execute("INSERT INTO extra VALUES (1704067200, 'x', 1)")
con.execute("INSERT INTO extra VALUES (1704070800, 'y', 2)")
return con
_REL_RE = re.compile(
r"([+-]?\d+(?:\.\d*)?)\s*(hour|hours|day|days|week|weeks|fortnight|fortnight
s)",
re.IGNORECASE,
)
def parse_time(val: str | None) -> str | None:
"""Parse an absolute or relative time string into ``YYYY-MM-DD HH:MM:SS``.""
"
if val is None or val == "":
return None
s = val.strip()
if s.lower() == "now":
dt = datetime.now(timezone.utc)
return dt.replace(microsecond=0).strftime("%Y-%m-%d %H:%M:%S")
m = _REL_RE.fullmatch(s)
if m:
qty = float(m.group(1))
unit = m.group(2).lower()
delta: timedelta
if unit.startswith("hour"):
delta = timedelta(hours=qty)
elif unit.startswith("day"):
delta = timedelta(days=qty)
elif unit.startswith("week"):
delta = timedelta(weeks=qty)
I'll remove the JS handling View Settings, create a new JS file, and update index.html.
uv sync --frozen
source .venv/bin/activate
python -c "import os; import duckdb; con = duckdb.connect(); con.execute(f\"SET
http_proxy = '{os.getenv(\"HTTP_PROXY\")}'\"); con.execute(\"INSTALL 'sqlite';\"
)"
playwright install chromium
echo "source .venv/bin/activate" >> ~/.bashrc
I’ll start by isolating the View Settings and Columns logic into a new file like view_settings.js. Then, I’ll check if other files depend on functions from the inline script.
root@f22fdb476b20:/workspace/scubaduck# cat scubaduck/static/js/time_column.js
// Helper for choosing a default time column based on column names/types
function guessTimeColumn(columns) {
const heur = ['timestamp','created','created_at','event_time','time','date','o
ccurred','happened','logged'];
let guess = null;
let first = null;
columns.forEach(c => {
const t = (c.type || '').toUpperCase();
const isNumeric = t.includes('INT') || t.includes('DECIMAL') || t.includes('
NUMERIC') ||
t.includes('REAL') || t.includes('DOUBLE') || t.includes('
FLOAT') || t.includes('HUGEINT');
const isTimeType = t.includes('TIMESTAMP') || t.includes('DATE') || t.includ
es('TIME');
if (isNumeric || isTimeType) {
if (!first) first = c.name;
if (!guess && heur.some(h => c.name.toLowerCase().includes(h))) {
guess = c.name;
}
}
});
return guess || first || null;
}
root@f22fdb476b20:/workspace/scubaduck# sed -n '1,100p' scubaduck/static/js/chip
_input.js
function initChipInput(filter, fetchOptions) {
const input = filter.querySelector('.f-val');
const chipsEl = filter.querySelector('.chip-input');
const dropdown = filter.querySelector('.chip-dropdown');
const copyBtn = filter.querySelector('.chip-copy');
filter.chips = [];
filter.renderChips = renderChips;
filter.addChip = addChip;
let highlight = 0;
let dropdownLocked = false;
chipsEl.addEventListener('click', () => {
input.focus();
});
function renderChips() {
chipsEl.querySelectorAll('.chip').forEach(c => c.remove());
filter.chips.forEach((v, i) => {
const span = document.createElement('span');
span.className = 'chip';
span.textContent = v;
const x = document.createElement('span');
x.className = 'x';
x.textContent = '✖';
x.addEventListener('click', e => {
e.stopPropagation();
filter.chips.splice(i, 1);
renderChips();
input.focus();
});
span.appendChild(x);
chipsEl.insertBefore(span, input);
});
}
function hideDropdown() {
dropdown.style.display = 'none';
dropdownLocked = true;
}
function showDropdown() {
if (!dropdownLocked && document.activeElement === input) {
dropdown.style.display = 'block';
}
}
function updateHighlight() {
Array.from(dropdown.children).forEach((c, i) => {
c.classList.toggle('highlight', i === highlight);
});
}
function addChip(val) {
if (!val) return;
const i = filter.chips.indexOf(val);
if (i !== -1) {
filter.chips.splice(i, 1);
} else {
filter.chips.push(val);
}
input.value = '';
renderChips();
}
copyBtn.addEventListener('click', () => {
navigator.clipboard && navigator.clipboard.writeText(filter.chips.join(','))
;
});
input.addEventListener('paste', e => {
e.preventDefault();
const text = e.clipboardData.getData('text');
if (e.shiftKey) {
addChip(text.trim());
} else {
text.split(',').forEach(t => addChip(t.trim()));
}
hideDropdown();
});
input.addEventListener('keydown', e => {
if (e.key === 'ArrowDown') {
if (dropdown.style.display !== 'none') {
highlight = Math.min(highlight + 1, dropdown.children.length - 1);
updateHighlight();
}
e.preventDefault();
} else if (e.key === 'ArrowUp') {
if (dropdown.style.display !== 'none') {
highlight = Math.max(highlight - 1, 0);
updateHighlight();
}
e.preventDefault();
} else if (e.key === 'Backspace' && input.value === '') {
if (filter.chips.length > 0) {
filter.chips.pop();
renderChips();
}
} else if (e.key === 'Enter') {
if (dropdown.style.display !== 'none' && dropdown.children.length > 0) {
root@f22fdb476b20:/workspace/scubaduck# sed -n '100,200p' scubaduck/static/js/ch
ip_input.js
if (dropdown.style.display !== 'none' && dropdown.children.length > 0) {
const val = dropdown.children[highlight].dataset.value;
if (val !== input.value.trim()) {
addChip(val);
} else {
addChip(input.value.trim());
}
} else {
addChip(input.value.trim());
}
hideDropdown();
e.preventDefault();
}
});
function renderDropdown(vals) {
dropdown.innerHTML = '';
const typed = input.value.trim();
if (typed) {
vals.splice(1, 0, typed);
}
vals.forEach((v, i) => {
const d = document.createElement('div');
d.textContent = v;
d.dataset.value = v;
d.addEventListener('mouseover', () => {
highlight = i;
updateHighlight();
});
d.addEventListener('mousedown', evt => {
evt.preventDefault();
addChip(v);
hideDropdown();
input.blur();
});
dropdown.appendChild(d);
});
if (vals.length) {
highlight = 0;
updateHighlight();
showDropdown();
} else {
hideDropdown();
}
}
function loadOptions() {
dropdownLocked = false;
if (!fetchOptions) {
dropdown.innerHTML = '';
return;
}
Promise.resolve(fetchOptions(input.value, filter)).then(values => {
renderDropdown(Array.isArray(values) ? values : []);
});
}
input.addEventListener('focus', loadOptions);
input.addEventListener('input', loadOptions);
document.addEventListener('click', evt => {
if (evt.target !== input) {
hideDropdown();
}
});
}
I'll check for references to "setSelectValue" and other functions to see if I need to keep them.
root@f22fdb476b20:/workspace/scubaduck# grep -n "setSelectValue" -r
tests/test_web.py:8: "arg => setSelectValue(arg.sel, arg.val)",
tests/test_web.py:172: "arg => setSelectValue(arg.el.querySelector('.f-co
l'), arg.val)",
tests/test_web.py:705: "arg => setSelectValue(arg.el.querySelector('.f-co
l'), arg.val)",
tests/test_web.py:733: "arg => setSelectValue(arg.el.querySelector('.f-co
l'), arg.val)",
tests/test_web.py:778: "arg => setSelectValue(arg.el.querySelector('.f-co
l'), arg.val)",
tests/test_web.py:808: "arg => setSelectValue(arg.el.querySelector('.f-co
l'), arg.val)",
tests/test_web.py:833: "arg => setSelectValue(arg.el.querySelector('.f-co
l'), arg.val)",
tests/test_web.py:862: "arg => setSelectValue(arg.el.querySelector('.f-co
l'), arg.val)",
tests/test_web.py:890: "arg => setSelectValue(arg.el.querySelector('.f-co
l'), arg.val)",
tests/test_web.py:907: "arg => setSelectValue(arg.el.querySelector('.f-co
l'), arg.val)",
tests/test_web.py:937: "arg => setSelectValue(arg.el.querySelector('.f-co
l'), arg.val)",
scubaduck/static/index.html:1223:function setSelectValue(selector, value) {
root@f22fdb476b20:/workspace/scubaduck# grep -n "initFromUrl" -r tests | head
It's unclear if filter and derived column functions belong in the new JS file. Let me check.
I should move the entire inline script to a new JS file, ensuring it functions correctly.
To keep functions accessible, I'll move the script to view_settings.js
after confirming references.
root@f22fdb476b20:/workspace/scubaduck# grep -n "allColumns" -n scubaduck/static
/index.html | head
359:const allColumns = [];
569: allColumns.length = 0;
588: allColumns.push(c.name);
692: columnValues.samples = allColumns.slice();
697: allColumns.filter(c => c.toLowerCase().includes(typed.toLowerCase()))
788: const base = allColumns.filter(name => {
874: colSel.innerHTML = allColumns.map(c => `<option value="${c}">${c}</option>
`).join('');
926: if (!derivedColumns.some(d => d.name === name) && !allColumns.includes(n
ame)) return name;
977: allColumns.splice(0, allColumns.length, ...baseColumns);
987: allColumns.push(d.name);
I'll start from line 354 to confirm what's happening there.
root@f22fdb476b20:/workspace/scubaduck# sed -n '340,380p' scubaduck/static/index
.html
<div id="column_groups"></div>
<div id="derived_columns">
<h4>Derived Columns</h4>
<div id="derived_list"></div>
<button id="add_derived" type="button" onclick="addDerived()">Add Deri
ved</button>
</div>
</div>
</div>
<div id="sidebar-resizer"></div>
<div id="view">
<table id="results"></table>
</div>
</div>
<script src="/js/chip_input.js"></script>
<script src="/js/timeseries_chart.js"></script>
<script src="/js/time_column.js"></script>
<script src="/js/sidebar.js"></script>
<script src="/js/table_view.js"></script>
<script>
const allColumns = [];
const baseColumns = [];
const columnTypes = {};
const stringColumns = [];
const baseStringColumns = [];
const integerColumns = [];
const baseIntegerColumns = [];
const timeColumns = [];
const baseTimeColumns = [];
const timeColumnOptions = [];
const baseTimeColumnOptions = [];
const derivedColumns = [];
let selectedColumns = [];
let displayType = 'samples';
let groupBy = {chips: [], addChip: () => {}, renderChips: () => {}};
let defaultTimeColumn = '';
const limitInput = document.getElementById('limit');
const limitValues = {
samples: parseInt(limitInput.value, 10),
table: parseInt(limitInput.value, 10),
timeseries: 7
};
I'm scrolling to the bottom to ensure there’s nothing after the script tag we missed.
root@f22fdb476b20:/workspace/scubaduck# tail -n 20 scubaduck/static/index.html
window.addEventListener('popstate', e => {
const params = e.state || parseSearch();
applyParams(params);
dive(false);
});
function setSelectValue(selector, value) {
const el = typeof selector === 'string' ? document.querySelector(selector) : s
elector;
if (el) {
const select = el.tagName === 'SELECT' ? el : el.querySelector('select');
if (select) {
select.value = value;
select.dispatchEvent(new Event('change'));
}
}
}
</script>
</body>
</html>
I'll move the script to view_settings.js
, checking for any inline events like onclick
.
root@f22fdb476b20:/workspace/scubaduck# grep -n "onclick" -n scubaduck/static/in
dex.html | head -n 20
199: <button id="dive" onclick="dive()">Dive</button>
331: <button id="add_filter" type="button" onclick="addFilter()">Add Fi
lter</button>
344: <button id="add_derived" type="button" onclick="addDerived()">Add
Derived</button>
863: <button type="button" class="remove" onclick="this.closest('.filter').
remove()">✖</button>
942: <button type="button" class="remove" onclick="removeDerived(this)">✖</
button>
I'll move the functions to a new view_settings.js
file and adjust index.html
.
root@f22fdb476b20:/workspace/scubaduck# grep -n "showResults" -n scubaduck/stati
c/index.html
1025: showResults(data);
I'll track down where the showResults function is defined in the code.
root@f22fdb476b20:/workspace/scubaduck# grep -n "function showResults" -n scubad
uck/static/index.html
I'll check if showResults is defined in table_view.js or timeseries_chart.js.
root@f22fdb476b20:/workspace/scubaduck# grep -n "showResults" -r scubaduck/stati
c/js
scubaduck/static/js/table_view.js:124:function showResults(data) {
root@f22fdb476b20:/workspace/scubaduck# sed -n '120,200p' scubaduck/static/js/ta
ble_view.js
}
renderTable(rows);
}
function showResults(data) {
window.lastResults = data;
const view = document.getElementById("view");
if (graphTypeSel.value === "timeseries") {
showTimeSeries(data);
} else {
if (data.rows.length === 0) {
view.innerHTML =
'<p id="empty-message">Empty data provided to table</p><table id="result
s"></table>';
} else {
view.innerHTML = '<table id="results"></table>';
}
originalRows = data.rows.slice();
sortState = { index: null, dir: null };
renderTable(originalRows);
}
const sqlEl = document.createElement("pre");
sqlEl.id = "sql_query";
sqlEl.style.whiteSpace = "pre-wrap";
sqlEl.style.marginTop = "10px";
sqlEl.textContent = data.sql;
view.appendChild(sqlEl);
document.getElementById("query_info").textContent = `Your query took about ${l
astQueryTime} ms`;
}
function showError(err) {
window.lastResults = err;
const view = document.getElementById("view");
let msg = "";
if (typeof err === "string") {
msg = err;
} else if (err) {
msg = err.error || "Error";
if (err.sql) {
msg += "\nSQL: " + err.sql;
}
if (err.traceback) {
msg += "\n" + err.traceback;
}
}
view.innerHTML = `<pre id="error-message">${msg}</pre>`;
document.getElementById("query_info").textContent = "";
}
I'll check the comments in sidebar.js to determine how to style the new file.
root@f22fdb476b20:/workspace/scubaduck# sed -n '1,40p' scubaduck/static/js/sideb
ar.js
// Sidebar resizing logic extracted from index.html
const sidebar = document.getElementById('sidebar');
const sidebarResizer = document.getElementById('sidebar-resizer');
let sidebarWidth = parseInt(localStorage.getItem('sidebarWidth') || 450, 10);
sidebar.style.width = sidebarWidth + 'px';
let sidebarResize = false;
function startSidebarDrag(e) {
e.preventDefault();
sidebarResize = true;
document.addEventListener('mousemove', onSidebarDrag);
document.addEventListener('mouseup', stopSidebarDrag);
}
function onSidebarDrag(e) {
if (!sidebarResize) return;
sidebarWidth = Math.max(200, e.clientX - sidebar.getBoundingClientRect().left)
;
sidebar.style.width = sidebarWidth + 'px';
}
function stopSidebarDrag() {
document.removeEventListener('mousemove', onSidebarDrag);
document.removeEventListener('mouseup', stopSidebarDrag);
sidebarResize = false;
localStorage.setItem('sidebarWidth', sidebarWidth);
}
sidebarResizer.addEventListener('mousedown', startSidebarDrag);
I'll review time_column.js to match the comment style for consistency.
root@f22fdb476b20:/workspace/scubaduck# head scubaduck/static/js/time_column.js
// Helper for choosing a default time column based on column names/types
function guessTimeColumn(columns) {
const heur = ['timestamp','created','created_at','event_time','time','date','o
ccurred','happened','logged'];
let guess = null;
let first = null;
columns.forEach(c => {
const t = (c.type || '').toUpperCase();
const isNumeric = t.includes('INT') || t.includes('DECIMAL') || t.includes('
NUMERIC') ||
t.includes('REAL') || t.includes('DOUBLE') || t.includes('
FLOAT') || t.includes('HUGEINT');
const isTimeType = t.includes('TIMESTAMP') || t.includes('DATE') || t.includ
es('TIME');
I’ll take a look at table_view.js first to understand what’s going on there.
root@f22fdb476b20:/workspace/scubaduck# head scubaduck/static/js/table_view.js
// Logic for rendering the table based views. Extracted from index.html so that
// the inline script only handles wiring up the UI.
let originalRows = [];
let sortState = { index: null, dir: null };
function renderTable(rows) {
const table = document.getElementById("results");
table.innerHTML = "";
if (rows.length === 0) return;
I'll remove the inline script and add a reference to view_settings.js—keeping sidebar.js intact.
root@f22fdb476b20:/workspace/scubaduck# sed -n '350,370p' scubaduck/static/index
.html
<table id="results"></table>
</div>
</div>
<script src="/js/chip_input.js"></script>
<script src="/js/timeseries_chart.js"></script>
<script src="/js/time_column.js"></script>
<script src="/js/sidebar.js"></script>
<script src="/js/table_view.js"></script>
<script>
const allColumns = [];
const baseColumns = [];
const columnTypes = {};
const stringColumns = [];
const baseStringColumns = [];
const integerColumns = [];
const baseIntegerColumns = [];
const timeColumns = [];
const baseTimeColumns = [];
const timeColumnOptions = [];
const baseTimeColumnOptions = [];
const derivedColumns = [];
I'll insert the script tag after others and remove the inline script. Checking bottom lines.
root@f22fdb476b20:/workspace/scubaduck# sed -n '1260,1300p' scubaduck/static/ind
ex.html
I’ll check the total number of lines to make sure we're on track.
root@f22fdb476b20:/workspace/scubaduck# wc -n scubaduck/static/index.html
wc: invalid option -- 'n'
Try 'wc --help' for more information.
root@f22fdb476b20:/workspace/scubaduck# wc -l scubaduck/static/index.html
1235 scubaduck/static/index.html
I'll check the last few lines to make sure they're correct.
root@f22fdb476b20:/workspace/scubaduck# tail -n 20 scubaduck/static/index.html
window.addEventListener('popstate', e => {
const params = e.state || parseSearch();
applyParams(params);
dive(false);
});
function setSelectValue(selector, value) {
const el = typeof selector === 'string' ? document.querySelector(selector) : s
elector;
if (el) {
const select = el.tagName === 'SELECT' ? el : el.querySelector('select');
if (select) {
select.value = value;
select.dispatchEvent(new Event('change'));
}
}
}
</script>
</body>
</html>
I'll remove the lines between "<script>" and "</script>" and replace them with new ones.
root@f22fdb476b20:/workspace/scubaduck# grep -n "table_view.js" -n scubaduck/sta
tic/index.html
357:<script src="/js/table_view.js"></script>
I'll open lines 350-362 to double-check the changes.
root@f22fdb476b20:/workspace/scubaduck# sed -n '352,360p' scubaduck/static/index
.html
</div>
<script src="/js/chip_input.js"></script>
<script src="/js/timeseries_chart.js"></script>
<script src="/js/time_column.js"></script>
<script src="/js/sidebar.js"></script>
<script src="/js/table_view.js"></script>
<script>
const allColumns = [];
const baseColumns = [];
The script starts after a specific line. I'll double-check line numbering and look again.
root@f22fdb476b20:/workspace/scubaduck# nl -ba scubaduck/static/index.html | sed
-n '352,366p'
352 </div>
353 <script src="/js/chip_input.js"></script>
354 <script src="/js/timeseries_chart.js"></script>
355 <script src="/js/time_column.js"></script>
356 <script src="/js/sidebar.js"></script>
357 <script src="/js/table_view.js"></script>
358 <script>
359 const allColumns = [];
360 const baseColumns = [];
361 const columnTypes = {};
362 const stringColumns = [];
363 const baseStringColumns = [];
364 const integerColumns = [];
365 const baseIntegerColumns = [];
366 const timeColumns = [];
I'll choose lines from 358 to 1233, excluding the closing script. Then, I'll number them.
root@f22fdb476b20:/workspace/scubaduck# nl -ba scubaduck/static/index.html | tai
l -n 30
1206 }
1207 return params;
1208 }
1209
1210 function initFromUrl() {
1211 const params = parseSearch();
1212 history.replaceState(params, '', paramsToSearch(params));
1213 applyParams(params);
1214 dive(false);
1215 }
1216
1217 window.addEventListener('popstate', e => {
1218 const params = e.state || parseSearch();
1219 applyParams(params);
1220 dive(false);
1221 });
1222
1223 function setSelectValue(selector, value) {
1224 const el = typeof selector === 'string' ? document.querySelector(selec
tor) : selector;
1225 if (el) {
1226 const select = el.tagName === 'SELECT' ? el : el.querySelector('sele
ct');
1227 if (select) {
1228 select.value = value;
1229 select.dispatchEvent(new Event('change'));
1230 }
1231 }
1232 }
1233 </script>
1234 </body>
1235 </html>
I'll move lines 358 to 1233 into a new JS file and check static/js for naming.
root@f22fdb476b20:/workspace/scubaduck# ls scubaduck/static/js
chip_input.js sidebar.js table_view.js time_column.js timeseries_chart.js
I'll create the view_settings.js file and ensure it's properly inserted without the closing script tag.
root@f22fdb476b20:/workspace/scubaduck# sed -n '358,1233p' scubaduck/static/inde
x.html > /tmp/inline_script.txt
root@f22fdb476b20:/workspace/scubaduck# head /tmp/inline_script.txt
<script>
const allColumns = [];
const baseColumns = [];
const columnTypes = {};
const stringColumns = [];
const baseStringColumns = [];
const integerColumns = [];
const baseIntegerColumns = [];
const timeColumns = [];
const baseTimeColumns = [];
I'll remove the first and last script tags and also check for any trailing spaces.
root@f22fdb476b20:/workspace/scubaduck# tail /tmp/inline_script.txt
const el = typeof selector === 'string' ? document.querySelector(selector) : s
elector;
if (el) {
const select = el.tagName === 'SELECT' ? el : el.querySelector('select');
if (select) {
select.value = value;
select.dispatchEvent(new Event('change'));
}
}
}
</script>
I'll remove the first and last lines as planned.
root@f22fdb476b20:/workspace/scubaduck# sed -n '2,876p' /tmp/inline_script.txt >
scubaduck/static/js/view_settings.js
Hm, I think I miscalculated. The total lines are 876, including the script tags.
root@f22fdb476b20:/workspace/scubaduck# wc -l /tmp/inline_script.txt
876 /tmp/inline_script.txt
There are 876 lines, so I should output 2-875. Let me confirm.
root@f22fdb476b20:/workspace/scubaduck# sed -n '1,5p' /tmp/inline_script.txt
<script>
const allColumns = [];
const baseColumns = [];
const columnTypes = {};
const stringColumns = [];
I need to verify the last lines and their corresponding line numbers.
root@f22fdb476b20:/workspace/scubaduck# nl -ba /tmp/inline_script.txt | tail -n
5
872 select.dispatchEvent(new Event('change'));
873 }
874 }
875 }
876 </script>
I'll output lines 2 through 875, excluding the first and last lines.
root@f22fdb476b20:/workspace/scubaduck# sed -n '2,875p' /tmp/inline_script.txt >
scubaduck/static/js/view_settings.js
root@f22fdb476b20:/workspace/scubaduck# head scubaduck/static/js/view_settings.j
s
const allColumns = [];
const baseColumns = [];
const columnTypes = {};
const stringColumns = [];
const baseStringColumns = [];
const integerColumns = [];
const baseIntegerColumns = [];
const timeColumns = [];
const baseTimeColumns = [];
const timeColumnOptions = [];
I'll check the final lines quickly to see if anything stands out.
root@f22fdb476b20:/workspace/scubaduck# tail -n 5 scubaduck/static/js/view_setti
ngs.js
select.value = value;
select.dispatchEvent(new Event('change'));
}
}
}
I'll remove lines 358-1233 and add a new script tag in index.html.
root@f22fdb476b20:/workspace/scubaduck# sed -n '352,370p' scubaduck/static/index
.html
</div>
<script src="/js/chip_input.js"></script>
<script src="/js/timeseries_chart.js"></script>
<script src="/js/time_column.js"></script>
<script src="/js/sidebar.js"></script>
<script src="/js/table_view.js"></script>
<script>
const allColumns = [];
const baseColumns = [];
const columnTypes = {};
const stringColumns = [];
const baseStringColumns = [];
const integerColumns = [];
const baseIntegerColumns = [];
const timeColumns = [];
const baseTimeColumns = [];
const timeColumnOptions = [];
const baseTimeColumnOptions = [];
const derivedColumns = [];
I'll compute the start line and use sed to delete lines 358-1233.
root@f22fdb476b20:/workspace/scubaduck# nl -ba scubaduck/static/index.html | sed
-n '352,368p'
352 </div>
353 <script src="/js/chip_input.js"></script>
354 <script src="/js/timeseries_chart.js"></script>
355 <script src="/js/time_column.js"></script>
356 <script src="/js/sidebar.js"></script>
357 <script src="/js/table_view.js"></script>
358 <script>
359 const allColumns = [];
360 const baseColumns = [];
361 const columnTypes = {};
362 const stringColumns = [];
363 const baseStringColumns = [];
364 const integerColumns = [];
365 const baseIntegerColumns = [];
366 const timeColumns = [];
367 const baseTimeColumns = [];
368 const timeColumnOptions = [];
I’ll delete lines 358 through 1233 but will double-check the last line numbers first.
root@f22fdb476b20:/workspace/scubaduck# nl -ba scubaduck/static/index.html | tai
l -n 5
1231 }
1232 }
1233 </script>
1234 </body>
1235 </html>
I'll delete lines 358 to 1233 and apply the patch.
root@f22fdb476b20:/workspace/scubaduck# apply_patch<<'PATCH'
> *** Begin Patch
> *** Update File: scubaduck/static/index.html
> @@
> -<script src="/js/time_column.js"></script>
> -<script src="/js/sidebar.js"></script>
> -<script src="/js/table_view.js"></script>
> -<script>
> -const allColumns = [];
> -const baseColumns = [];
> -const columnTypes = {};
> -const stringColumns = [];
> -const baseStringColumns = [];
> -const integerColumns = [];
> -const baseIntegerColumns = [];
> -const timeColumns = [];
> -const baseTimeColumns = [];
> -const timeColumnOptions = [];
> -const baseTimeColumnOptions = [];
> -const derivedColumns = [];
> *** End Patch
> PATCH
Success. Updated the following files:
M scubaduck/static/index.html
I need to finish patching the whole script, not just the first part.
root@f22fdb476b20:/workspace/scubaduck# sed -n '352,370p' scubaduck/static/index
.html
</div>
<script src="/js/chip_input.js"></script>
<script src="/js/timeseries_chart.js"></script>
let selectedColumns = [];
let displayType = 'samples';
let groupBy = {chips: [], addChip: () => {}, renderChips: () => {}};
let defaultTimeColumn = '';
const limitInput = document.getElementById('limit');
const limitValues = {
samples: parseInt(limitInput.value, 10),
table: parseInt(limitInput.value, 10),
timeseries: 7
};
const columnValues = {
samples: [],
table: [],
timeseries: []
};
limitInput.addEventListener('input', () => {
The patch missed some script lines, leaving an incomplete replacement. I'll revert the commit.
root@f22fdb476b20:/workspace/scubaduck# git status --short
M scubaduck/static/index.html
?? scubaduck/static/js/view_settings.js
I'll checkout the file to undo changes, then patch it once more.
root@f22fdb476b20:/workspace/scubaduck# git checkout -- scubaduck/static/index.h
tml
root@f22fdb476b20:/workspace/scubaduck# git status --short
?? scubaduck/static/js/view_settings.js
I’ll use sed to remove the inline script right after <script src="table_view.js">
. I’ll verify it's the right one.
root@f22fdb476b20:/workspace/scubaduck# grep -n "<script" -n scubaduck/static/in
dex.html | head -n 20
353:<script src="/js/chip_input.js"></script>
354:<script src="/js/timeseries_chart.js"></script>
355:<script src="/js/time_column.js"></script>
356:<script src="/js/sidebar.js"></script>
357:<script src="/js/table_view.js"></script>
358:<script>
I'll continue searching for any other script tags to explore.
root@f22fdb476b20:/workspace/scubaduck# grep -n "</script>" scubaduck/static/ind
ex.html | tail -n 5
354:<script src="/js/timeseries_chart.js"></script>
355:<script src="/js/time_column.js"></script>
356:<script src="/js/sidebar.js"></script>
357:<script src="/js/table_view.js"></script>
1233:</script>
I'll use sed
to remove lines 358 through 1233 for easier sedation.
root@f22fdb476b20:/workspace/scubaduck# sed -n '357,360p' scubaduck/static/index
.html
<script src="/js/table_view.js"></script>
<script>
const allColumns = [];
const baseColumns = [];
I’ll remove lines 358-1233 from index.html
and add <script src="/js/view_settings.js"></script>
.
root@f22fdb476b20:/workspace/scubaduck# cp scubaduck/static/index.html /tmp/inde
x.html
root@f22fdb476b20:/workspace/scubaduck# sed -e '358,1233d' /tmp/index.html > /tm
p/index_new.html
I’ll add the <script src="/js/view_settings.js"></script>
after existing script tags, near line 358.
root@f22fdb476b20:/workspace/scubaduck# sed -n '352,370p' /tmp/index_new.html
</div>
<script src="/js/chip_input.js"></script>
<script src="/js/timeseries_chart.js"></script>
<script src="/js/time_column.js"></script>
<script src="/js/sidebar.js"></script>
<script src="/js/table_view.js"></script>
</body>
</html>
I see we removed lines 358-1233 but the closing tags were kept after line 357.
root@f22fdb476b20:/workspace/scubaduck# tail -n 10 /tmp/index_new.html
<table id="results"></table>
</div>
</div>
<script src="/js/chip_input.js"></script>
<script src="/js/timeseries_chart.js"></script>
<script src="/js/time_column.js"></script>
<script src="/js/sidebar.js"></script>
<script src="/js/table_view.js"></script>
</body>
</html>
I plan to add the new script tag before the closing body using sed.
root@f22fdb476b20:/workspace/scubaduck# grep -n "</body>" -n /tmp/index_new.html
358:</body>
I'll figure out the correct line numbers first, then add the new script tag.
root@f22fdb476b20:/workspace/scubaduck# grep -n "table_view.js" -n /tmp/index_ne
w.html
357:<script src="/js/table_view.js"></script>
I'll make the change right after line 357.
root@f22fdb476b20:/workspace/scubaduck# sed -i '358i\<script src="/js/view_setti
ngs.js"></script>' /tmp/index_new.html
root@f22fdb476b20:/workspace/scubaduck# tail -n 10 /tmp/index_new.html
</div>
</div>
<script src="/js/chip_input.js"></script>
<script src="/js/timeseries_chart.js"></script>
<script src="/js/time_column.js"></script>
<script src="/js/sidebar.js"></script>
<script src="/js/table_view.js"></script>
<script src="/js/view_settings.js"></script>
</body>
</html>
Time to copy the new file into the repository. Let's get that done!
root@f22fdb476b20:/workspace/scubaduck# mv /tmp/index_new.html scubaduck/static/
index.html
I'll open the new file to make sure the comment is at the top.
root@f22fdb476b20:/workspace/scubaduck# head scubaduck/static/js/view_settings.j
s
const allColumns = [];
const baseColumns = [];
const columnTypes = {};
const stringColumns = [];
const baseStringColumns = [];
const integerColumns = [];
const baseIntegerColumns = [];
const timeColumns = [];
const baseTimeColumns = [];
const timeColumnOptions = [];
I’ll add a comment header to explain the purpose of this code.
root@f22fdb476b20:/workspace/scubaduck# sed -i '1i// Logic for View Settings, Co
lumns, and URL handling extracted from index.html' scubaduck/static/js/view_sett
ings.js
root@f22fdb476b20:/workspace/scubaduck# head scubaduck/static/js/view_settings.j
s
// Logic for View Settings, Columns, and URL handling extracted from index.html
const allColumns = [];
const baseColumns = [];
const columnTypes = {};
const stringColumns = [];
const baseStringColumns = [];
const integerColumns = [];
const baseIntegerColumns = [];
const timeColumns = [];
const baseTimeColumns = [];
I'll insert a newline after the comment for better formatting.
root@f22fdb476b20:/workspace/scubaduck# sed -i '1s/$/\n/' scubaduck/static/js/vi
ew_settings.js
root@f22fdb476b20:/workspace/scubaduck# head scubaduck/static/js/view_settings.j
s
// Logic for View Settings, Columns, and URL handling extracted from index.html
const allColumns = [];
const baseColumns = [];
const columnTypes = {};
const stringColumns = [];
const baseStringColumns = [];
const integerColumns = [];
const baseIntegerColumns = [];
const timeColumns = [];
I'll run ruff to format and check the code, then follow with pyright.
root@f22fdb476b20:/workspace/scubaduck# source .venv/bin/activate
(scubaduck) root@f22fdb476b20:/workspace/scubaduck# ruff format scubaduck/static
/js/view_settings.js scubaduck/static/index.html > /tmp/format.log && cat /tmp/f
ormat.log
error: Failed to parse scubaduck/static/index.html:1:1: Expected a statement
error: Failed to parse scubaduck/static/js/view_settings.js:1:1: Expected a stat
ement
(scubaduck) root@f22fdb476b20:/workspace/scubaduck#
Ruff format works for Python, so I’ll apply it only to those files.
(scubaduck) root@f22fdb476b20:/workspace/scubaduck# ruff format > /tmp/format.lo
g && cat /tmp/format.log
7 files left unchanged
(scubaduck) root@f22fdb476b20:/workspace/scubaduck# ruff check > /tmp/check.log
&& cat /tmp/check.log
All checks passed!
(scubaduck) root@f22fdb476b20:/workspace/scubaduck#
I'll run Pyright to check the types and ensure everything's aligned.
(scubaduck) root@f22fdb476b20:/workspace/scubaduck# pyright > /tmp/pyright.log &
& tail -n 20 /tmp/pyright.log
0 errors, 0 warnings, 0 informations
(scubaduck) root@f22fdb476b20:/workspace/scubaduck#
I'll run tests with pytest -q
to check if everything works.
(scubaduck) root@f22fdb476b20:/workspace/scubaduck# pytest -q > /tmp/pytest.log
&& tail -n 20 /tmp/pytest.log
bringing up nodes...
bringing up nodes...
........................................................................ [ 66%]
.................................... [100%]
108 passed in 14.64s
(scubaduck) root@f22fdb476b20:/workspace/scubaduck# tail -n 20 /tmp/pytest.log
bringing up nodes...
bringing up nodes...
........................................................................ [ 66%]
.................................... [100%]
108 passed in 14.64s
(scubaduck) root@f22fdb476b20:/workspace/scubaduck#
Everything passed, so it's time to go ahead and make the commit!
(scubaduck) root@f22fdb476b20:/workspace/scubaduck# git status --short
M scubaduck/static/index.html
?? scubaduck/static/js/view_settings.js
(scubaduck) root@f22fdb476b20:/workspace/scubaduck#
I’m adding and committing a new file now.
(scubaduck) root@f22fdb476b20:/workspace/scubaduck# git add scubaduck/static/ind
ex.html scubaduck/static/js/view_settings.js
(scubaduck) root@f22fdb476b20:/workspace/scubaduck# git commit -m "feat(web): se
parate view settings logic" && git status --short
[work a087750] feat(web): separate view settings logic
2 files changed, 877 insertions(+), 876 deletions(-)
create mode 100644 scubaduck/static/js/view_settings.js
(scubaduck) root@f22fdb476b20:/workspace/scubaduck#
I'll skim through the commit content quickly to get a feel for the updates.
(scubaduck) root@f22fdb476b20:/workspace/scubaduck# git status --short
(scubaduck) root@f22fdb476b20:/workspace/scubaduck#
I need to grab the surrounding lines to cite the new script src in index.html.
350 <table id="results"></table>
351 </div>
352 </div>
353 <script src="/js/chip_input.js"></script>
354 <script src="/js/timeseries_chart.js"></script>
355 <script src="/js/time_column.js"></script>
356 <script src="/js/sidebar.js"></script>
357 <script src="/js/table_view.js"></script>
358 <script src="/js/view_settings.js"></script>
359 </body>
360 </html>
(scubaduck) root@f22fdb476b20:/workspace/scubaduck#
I'll display the first few lines of the file for proper citation.
(scubaduck) root@f22fdb476b20:/workspace/scubaduck# nl -ba scubaduck/static/js/v
iew_settings.js | sed -n '1,10p'
1 // Logic for View Settings, Columns, and URL handling extracted from ind
ex.html
2
3 const allColumns = [];
4 const baseColumns = [];
5 const columnTypes = {};
6 const stringColumns = [];
7 const baseStringColumns = [];
8 const integerColumns = [];
9 const baseIntegerColumns = [];
10 const timeColumns = [];
(scubaduck) root@f22fdb476b20:/workspace/scubaduck#
I’ll show the tail lines that include setSelectValue for better clarity.
(scubaduck) root@f22fdb476b20:/workspace/scubaduck# nl -ba scubaduck/static/js/v
iew_settings.js | tail -n 6
871 if (select) {
872 select.value = value;
873 select.dispatchEvent(new Event('change'));
874 }
875 }
876 }
(scubaduck) root@f22fdb476b20:/workspace/scubaduck#
I'll summarize the changes and finalize the PR creation.