Task ID: task_e_682ea14ec2bc8323b437fd58d86ffd81
pluggy ------------------------------ 20.06 KiB/20.06 KiB
markupsafe ------------------------------ 22.58 KiB/22.58 KiB
execnet ------------------------------ 32.00 KiB/39.66 KiB
pytest-xdist ------------------------------ 30.90 KiB/45.03 KiB
requests ------------------------------ 32.00 KiB/63.41 KiB
packaging ------------------------------ 46.88 KiB/64.91 KiB
text-unidecode ------------------------------ 76.32 KiB/76.32 KiB
click ------------------------------ 78.88 KiB/99.76 KiB
flask ------------------------------ 64.00 KiB/100.88 KiB
urllib3 ------------------------------ 48.00 KiB/125.66 KiB
jinja2 ------------------------------ 92.79 KiB/131.74 KiB
charset-normalizer ------------------------------ 126.46 KiB/145.08 KiB
certifi ------------------------------ 155.88 KiB/155.88 KiB
werkzeug ------------------------------ 77.49 KiB/219.24 KiB
python-dateutil ------------------------------ 48.00 KiB/224.50 KiB
pytest ------------------------------ 62.88 KiB/335.58 KiB
greenlet ------------------------------ 32.00 KiB/589.71 KiB
pyright ------------------------------ 16.00 KiB/5.31 MiB
ruff ------------------------------ 141.18 KiB/11.02 MiB
Building scubaduck @ file:///workspace/scubaduck
⠹ Preparing packages... (4/33)
python-slugify ------------------------------ 9.82 KiB/9.82 KiB
pyee ------------------------------ 15.36 KiB/15.36 KiB
itsdangerous ------------------------------ 15.85 KiB/15.85 KiB
pluggy ------------------------------ 20.06 KiB/20.06 KiB
markupsafe ------------------------------ 22.58 KiB/22.58 KiB
execnet ------------------------------ 32.00 KiB/39.66 KiB
pytest-xdist ------------------------------ 45.03 KiB/45.03 KiB
requests ------------------------------ 48.00 KiB/63.41 KiB
packaging ------------------------------ 46.88 KiB/64.91 KiB
click ------------------------------ 78.88 KiB/99.76 KiB
flask ------------------------------ 64.00 KiB/100.88 KiB
urllib3 ------------------------------ 62.81 KiB/125.66 KiB
jinja2 ------------------------------ 92.79 KiB/131.74 KiB
charset-normalizer ------------------------------ 126.46 KiB/145.08 KiB
certifi ------------------------------ 155.88 KiB/155.88 KiB
werkzeug ------------------------------ 77.49 KiB/219.24 KiB
python-dateutil ------------------------------ 48.00 KiB/224.50 KiB
pytest ------------------------------ 78.86 KiB/335.58 KiB
greenlet ------------------------------ 32.00 KiB/589.71 KiB
pyright ------------------------------ 16.00 KiB/5.31 MiB
ruff ------------------------------ 157.18 KiB/11.02 MiB
duckdb ------------------------------ 222.91 KiB/19.27 MiB
Building scubaduck @ file:///workspace/scubaduck
⠹ Preparing packages... (4/33)
pyee ------------------------------ 15.36 KiB/15.36 KiB
itsdangerous ------------------------------ 15.85 KiB/15.85 KiB
pluggy ------------------------------ 20.06 KiB/20.06 KiB
markupsafe ------------------------------ 22.58 KiB/22.58 KiB
execnet ------------------------------ 32.00 KiB/39.66 KiB
pytest-xdist ------------------------------ 45.03 KiB/45.03 KiB
requests ------------------------------ 48.00 KiB/63.41 KiB
packaging ------------------------------ 46.88 KiB/64.91 KiB
click ------------------------------ 94.88 KiB/99.76 KiB
flask ------------------------------ 64.00 KiB/100.88 KiB
urllib3 ------------------------------ 62.81 KiB/125.66 KiB
jinja2 ------------------------------ 92.79 KiB/131.74 KiB
charset-normalizer ------------------------------ 126.46 KiB/145.08 KiB
certifi ------------------------------ 155.88 KiB/155.88 KiB
werkzeug ------------------------------ 93.49 KiB/219.24 KiB
python-dateutil ------------------------------ 48.00 KiB/224.50 KiB
pytest ------------------------------ 78.86 KiB/335.58 KiB
greenlet ------------------------------ 48.00 KiB/589.71 KiB
pyright ------------------------------ 16.00 KiB/5.31 MiB
ruff ------------------------------ 173.18 KiB/11.02 MiB
duckdb ------------------------------ 238.91 KiB/19.27 MiB
playwright ------------------------------ 32.00 KiB/43.05 MiB
Building scubaduck @ file:///workspace/scubaduck
⠹ Preparing packages... (4/33)
pyee ------------------------------ 15.36 KiB/15.36 KiB
itsdangerous ------------------------------ 15.85 KiB/15.85 KiB
pluggy ------------------------------ 20.06 KiB/20.06 KiB
execnet ------------------------------ 32.00 KiB/39.66 KiB
pytest-xdist ------------------------------ 45.03 KiB/45.03 KiB
requests ------------------------------ 48.00 KiB/63.41 KiB
packaging ------------------------------ 46.88 KiB/64.91 KiB
click ------------------------------ 94.88 KiB/99.76 KiB
flask ------------------------------ 64.00 KiB/100.88 KiB
urllib3 ------------------------------ 62.81 KiB/125.66 KiB
jinja2 ------------------------------ 92.79 KiB/131.74 KiB
charset-normalizer ------------------------------ 126.46 KiB/145.08 KiB
certifi ------------------------------ 155.88 KiB/155.88 KiB
werkzeug ------------------------------ 93.49 KiB/219.24 KiB
python-dateutil ------------------------------ 48.00 KiB/224.50 KiB
pytest ------------------------------ 78.86 KiB/335.58 KiB
greenlet ------------------------------ 48.00 KiB/589.71 KiB
pyright ------------------------------ 16.00 KiB/5.31 MiB
ruff ------------------------------ 173.18 KiB/11.02 MiB
duckdb ------------------------------ 238.91 KiB/19.27 MiB
playwright ------------------------------ 32.00 KiB/43.05 MiB
Building scubaduck @ file:///workspace/scubaduck
⠹ Preparing packages... (4/33)
pyee ------------------------------ 15.36 KiB/15.36 KiB
itsdangerous ------------------------------ 15.85 KiB/15.85 KiB
execnet ------------------------------ 32.00 KiB/39.66 KiB
pytest-xdist ------------------------------ 45.03 KiB/45.03 KiB
requests ------------------------------ 48.00 KiB/63.41 KiB
packaging ------------------------------ 46.88 KiB/64.91 KiB
click ------------------------------ 94.88 KiB/99.76 KiB
flask ------------------------------ 64.00 KiB/100.88 KiB
urllib3 ------------------------------ 62.81 KiB/125.66 KiB
jinja2 ------------------------------ 108.79 KiB/131.74 KiB
charset-normalizer ------------------------------ 126.46 KiB/145.08 KiB
certifi ------------------------------ 155.88 KiB/155.88 KiB
werkzeug ------------------------------ 93.49 KiB/219.24 KiB
python-dateutil ------------------------------ 48.00 KiB/224.50 KiB
pytest ------------------------------ 78.86 KiB/335.58 KiB
greenlet ------------------------------ 48.00 KiB/589.71 KiB
pyright ------------------------------ 16.00 KiB/5.31 MiB
ruff ------------------------------ 189.18 KiB/11.02 MiB
duckdb ------------------------------ 254.91 KiB/19.27 MiB
playwright ------------------------------ 32.00 KiB/43.05 MiB
Building scubaduck @ file:///workspace/scubaduck
⠹ Preparing packages... (4/33)
itsdangerous ------------------------------ 15.85 KiB/15.85 KiB
execnet ------------------------------ 32.00 KiB/39.66 KiB
pytest-xdist ------------------------------ 45.03 KiB/45.03 KiB
requests ------------------------------ 48.00 KiB/63.41 KiB
packaging ------------------------------ 46.88 KiB/64.91 KiB
click ------------------------------ 94.88 KiB/99.76 KiB
flask ------------------------------ 64.00 KiB/100.88 KiB
urllib3 ------------------------------ 62.81 KiB/125.66 KiB
jinja2 ------------------------------ 108.79 KiB/131.74 KiB
charset-normalizer ------------------------------ 126.46 KiB/145.08 KiB
certifi ------------------------------ 155.88 KiB/155.88 KiB
werkzeug ------------------------------ 93.49 KiB/219.24 KiB
python-dateutil ------------------------------ 48.00 KiB/224.50 KiB
pytest ------------------------------ 78.86 KiB/335.58 KiB
greenlet ------------------------------ 48.00 KiB/589.71 KiB
pyright ------------------------------ 32.00 KiB/5.31 MiB
ruff ------------------------------ 205.18 KiB/11.02 MiB
duckdb ------------------------------ 254.91 KiB/19.27 MiB
playwright ------------------------------ 32.00 KiB/43.05 MiB
Building scubaduck @ file:///workspace/scubaduck
⠹ Preparing packages... (4/33)
execnet ------------------------------ 32.00 KiB/39.66 KiB
pytest-xdist ------------------------------ 45.03 KiB/45.03 KiB
requests ------------------------------ 48.00 KiB/63.41 KiB
packaging ------------------------------ 46.88 KiB/64.91 KiB
click ------------------------------ 94.88 KiB/99.76 KiB
flask ------------------------------ 64.00 KiB/100.88 KiB
urllib3 ------------------------------ 78.81 KiB/125.66 KiB
jinja2 ------------------------------ 108.79 KiB/131.74 KiB
charset-normalizer ------------------------------ 126.46 KiB/145.08 KiB
certifi ------------------------------ 155.88 KiB/155.88 KiB
werkzeug ------------------------------ 93.49 KiB/219.24 KiB
python-dateutil ------------------------------ 48.00 KiB/224.50 KiB
pytest ------------------------------ 78.86 KiB/335.58 KiB
greenlet ------------------------------ 48.00 KiB/589.71 KiB
pyright ------------------------------ 32.00 KiB/5.31 MiB
ruff ------------------------------ 205.18 KiB/11.02 MiB
duckdb ------------------------------ 254.91 KiB/19.27 MiB
playwright ------------------------------ 32.00 KiB/43.05 MiB
Building scubaduck @ file:///workspace/scubaduck
⠹ Preparing packages... (4/33)
execnet ------------------------------ 32.00 KiB/39.66 KiB
pytest-xdist ------------------------------ 45.03 KiB/45.03 KiB
requests ------------------------------ 48.00 KiB/63.41 KiB
packaging ------------------------------ 46.88 KiB/64.91 KiB
click ------------------------------ 99.76 KiB/99.76 KiB
flask ------------------------------ 64.00 KiB/100.88 KiB
urllib3 ------------------------------ 78.81 KiB/125.66 KiB
jinja2 ------------------------------ 108.79 KiB/131.74 KiB
charset-normalizer ------------------------------ 126.46 KiB/145.08 KiB
werkzeug ------------------------------ 93.49 KiB/219.24 KiB
python-dateutil ------------------------------ 48.00 KiB/224.50 KiB
pytest ------------------------------ 94.86 KiB/335.58 KiB
greenlet ------------------------------ 48.00 KiB/589.71 KiB
pyright ------------------------------ 48.00 KiB/5.31 MiB
ruff ------------------------------ 221.18 KiB/11.02 MiB
duckdb ------------------------------ 286.91 KiB/19.27 MiB
playwright ------------------------------ 32.00 KiB/43.05 MiB
Building scubaduck @ file:///workspace/scubaduck
⠹ Preparing packages... (4/33)
execnet ------------------------------ 39.66 KiB/39.66 KiB
pytest-xdist ------------------------------ 45.03 KiB/45.03 KiB
requests ------------------------------ 63.41 KiB/63.41 KiB
packaging ------------------------------ 62.88 KiB/64.91 KiB
flask ------------------------------ 80.00 KiB/100.88 KiB
urllib3 ------------------------------ 78.81 KiB/125.66 KiB
jinja2 ------------------------------ 124.79 KiB/131.74 KiB
charset-normalizer ------------------------------ 142.46 KiB/145.08 KiB
werkzeug ------------------------------ 109.49 KiB/219.24 KiB
python-dateutil ------------------------------ 124.12 KiB/224.50 KiB
pytest ------------------------------ 126.86 KiB/335.58 KiB
greenlet ------------------------------ 94.30 KiB/589.71 KiB
pyright ------------------------------ 158.97 KiB/5.31 MiB
ruff ------------------------------ 349.18 KiB/11.02 MiB
duckdb ------------------------------ 414.91 KiB/19.27 MiB
playwright ------------------------------ 48.00 KiB/43.05 MiB
Building scubaduck @ file:///workspace/scubaduck
⠹ Preparing packages... (4/33)
execnet ------------------------------ 39.66 KiB/39.66 KiB
requests ------------------------------ 63.41 KiB/63.41 KiB
packaging ------------------------------ 62.88 KiB/64.91 KiB
flask ------------------------------ 80.00 KiB/100.88 KiB
urllib3 ------------------------------ 94.81 KiB/125.66 KiB
jinja2 ------------------------------ 131.74 KiB/131.74 KiB
charset-normalizer ------------------------------ 142.46 KiB/145.08 KiB
werkzeug ------------------------------ 109.49 KiB/219.24 KiB
python-dateutil ------------------------------ 156.12 KiB/224.50 KiB
pytest ------------------------------ 126.86 KiB/335.58 KiB
greenlet ------------------------------ 126.30 KiB/589.71 KiB
pyright ------------------------------ 206.97 KiB/5.31 MiB
ruff ------------------------------ 381.18 KiB/11.02 MiB
duckdb ------------------------------ 446.91 KiB/19.27 MiB
playwright ------------------------------ 48.00 KiB/43.05 MiB
Building scubaduck @ file:///workspace/scubaduck
⠹ Preparing packages... (4/33)
execnet ------------------------------ 39.66 KiB/39.66 KiB
packaging ------------------------------ 62.88 KiB/64.91 KiB
flask ------------------------------ 80.00 KiB/100.88 KiB
urllib3 ------------------------------ 94.81 KiB/125.66 KiB
jinja2 ------------------------------ 131.74 KiB/131.74 KiB
charset-normalizer ------------------------------ 142.46 KiB/145.08 KiB
werkzeug ------------------------------ 109.49 KiB/219.24 KiB
python-dateutil ------------------------------ 156.12 KiB/224.50 KiB
pytest ------------------------------ 126.86 KiB/335.58 KiB
greenlet ------------------------------ 126.30 KiB/589.71 KiB
pyright ------------------------------ 206.97 KiB/5.31 MiB
ruff ------------------------------ 381.18 KiB/11.02 MiB
duckdb ------------------------------ 446.91 KiB/19.27 MiB
playwright ------------------------------ 48.00 KiB/43.05 MiB
Building scubaduck @ file:///workspace/scubaduck
⠹ Preparing packages... (4/33)
packaging ------------------------------ 64.91 KiB/64.91 KiB
flask ------------------------------ 80.00 KiB/100.88 KiB
urllib3 ------------------------------ 94.81 KiB/125.66 KiB
jinja2 ------------------------------ 131.74 KiB/131.74 KiB
charset-normalizer ------------------------------ 145.08 KiB/145.08 KiB
werkzeug ------------------------------ 109.49 KiB/219.24 KiB
python-dateutil ------------------------------ 220.12 KiB/224.50 KiB
pytest ------------------------------ 158.86 KiB/335.58 KiB
greenlet ------------------------------ 174.30 KiB/589.71 KiB
pyright ------------------------------ 254.97 KiB/5.31 MiB
ruff ------------------------------ 429.18 KiB/11.02 MiB
duckdb ------------------------------ 494.91 KiB/19.27 MiB
playwright ------------------------------ 48.00 KiB/43.05 MiB
Building scubaduck @ file:///workspace/scubaduck
⠹ Preparing packages... (4/33)
flask ------------------------------ 80.00 KiB/100.88 KiB
urllib3 ------------------------------ 94.81 KiB/125.66 KiB
jinja2 ------------------------------ 131.74 KiB/131.74 KiB
charset-normalizer ------------------------------ 145.08 KiB/145.08 KiB
werkzeug ------------------------------ 125.49 KiB/219.24 KiB
python-dateutil ------------------------------ 220.12 KiB/224.50 KiB
pytest ------------------------------ 158.86 KiB/335.58 KiB
greenlet ------------------------------ 190.30 KiB/589.71 KiB
pyright ------------------------------ 270.97 KiB/5.31 MiB
ruff ------------------------------ 445.18 KiB/11.02 MiB
duckdb ------------------------------ 510.91 KiB/19.27 MiB
playwright ------------------------------ 48.00 KiB/43.05 MiB
Building scubaduck @ file:///workspace/scubaduck
⠹ Preparing packages... (4/33)
flask ------------------------------ 96.00 KiB/100.88 KiB
urllib3 ------------------------------ 94.81 KiB/125.66 KiB
jinja2 ------------------------------ 131.74 KiB/131.74 KiB
werkzeug ------------------------------ 125.49 KiB/219.24 KiB
python-dateutil ------------------------------ 220.12 KiB/224.50 KiB
pytest ------------------------------ 174.86 KiB/335.58 KiB
greenlet ------------------------------ 238.30 KiB/589.71 KiB
pyright ------------------------------ 318.97 KiB/5.31 MiB
ruff ------------------------------ 493.18 KiB/11.02 MiB
duckdb ------------------------------ 558.91 KiB/19.27 MiB
playwright ------------------------------ 62.80 KiB/43.05 MiB
Building scubaduck @ file:///workspace/scubaduck
⠹ Preparing packages... (4/33)
flask ------------------------------ 96.00 KiB/100.88 KiB
urllib3 ------------------------------ 94.81 KiB/125.66 KiB
werkzeug ------------------------------ 125.49 KiB/219.24 KiB
python-dateutil ------------------------------ 224.50 KiB/224.50 KiB
pytest ------------------------------ 190.86 KiB/335.58 KiB
greenlet ------------------------------ 270.30 KiB/589.71 KiB
pyright ------------------------------ 366.97 KiB/5.31 MiB
ruff ------------------------------ 541.18 KiB/11.02 MiB
duckdb ------------------------------ 606.91 KiB/19.27 MiB
playwright ------------------------------ 62.80 KiB/43.05 MiB
Building scubaduck @ file:///workspace/scubaduck
⠹ Preparing packages... (4/33)
flask ------------------------------ 96.00 KiB/100.88 KiB
urllib3 ------------------------------ 94.81 KiB/125.66 KiB
werkzeug ------------------------------ 141.49 KiB/219.24 KiB
python-dateutil ------------------------------ 224.50 KiB/224.50 KiB
pytest ------------------------------ 190.86 KiB/335.58 KiB
greenlet ------------------------------ 334.30 KiB/589.71 KiB
pyright ------------------------------ 414.97 KiB/5.31 MiB
ruff ------------------------------ 573.18 KiB/11.02 MiB
duckdb ------------------------------ 654.91 KiB/19.27 MiB
playwright ------------------------------ 62.80 KiB/43.05 MiB
Building scubaduck @ file:///workspace/scubaduck
⠹ Preparing packages... (4/33)
flask ------------------------------ 100.88 KiB/100.88 KiB
urllib3 ------------------------------ 110.81 KiB/125.66 KiB
werkzeug ------------------------------ 141.49 KiB/219.24 KiB
pytest ------------------------------ 190.86 KiB/335.58 KiB
greenlet ------------------------------ 382.30 KiB/589.71 KiB
pyright ------------------------------ 462.97 KiB/5.31 MiB
ruff ------------------------------ 637.18 KiB/11.02 MiB
duckdb ------------------------------ 702.91 KiB/19.27 MiB
playwright ------------------------------ 62.80 KiB/43.05 MiB
Building scubaduck @ file:///workspace/scubaduck
⠹ Preparing packages... (4/33)
urllib3 ------------------------------ 110.81 KiB/125.66 KiB
werkzeug ------------------------------ 141.49 KiB/219.24 KiB
pytest ------------------------------ 190.86 KiB/335.58 KiB
greenlet ------------------------------ 414.30 KiB/589.71 KiB
pyright ------------------------------ 494.97 KiB/5.31 MiB
ruff ------------------------------ 669.18 KiB/11.02 MiB
duckdb ------------------------------ 734.91 KiB/19.27 MiB
playwright ------------------------------ 78.80 KiB/43.05 MiB
Building scubaduck @ file:///workspace/scubaduck
⠹ Preparing packages... (4/33)
werkzeug ------------------------------ 157.49 KiB/219.24 KiB
pytest ------------------------------ 222.86 KiB/335.58 KiB
greenlet ------------------------------ 478.30 KiB/589.71 KiB
pyright ------------------------------ 782.97 KiB/5.31 MiB
ruff ------------------------------ 957.18 KiB/11.02 MiB
duckdb ------------------------------ 1.00 MiB/19.27 MiB
playwright ------------------------------ 94.80 KiB/43.05 MiB
Building scubaduck @ file:///workspace/scubaduck
⠹ Preparing packages... (4/33)
werkzeug ------------------------------ 205.49 KiB/219.24 KiB
pytest ------------------------------ 254.86 KiB/335.58 KiB
greenlet ------------------------------ 478.30 KiB/589.71 KiB
pyright ------------------------------ 1.03 MiB/5.31 MiB
ruff ------------------------------ 1.17 MiB/11.02 MiB
duckdb ------------------------------ 1.24 MiB/19.27 MiB
playwright ------------------------------ 110.80 KiB/43.05 MiB
Building scubaduck @ file:///workspace/scubaduck
⠹ Preparing packages... (4/33)
pytest ------------------------------ 302.86 KiB/335.58 KiB
greenlet ------------------------------ 494.30 KiB/589.71 KiB
pyright ------------------------------ 1.25 MiB/5.31 MiB
ruff ------------------------------ 1.40 MiB/11.02 MiB
duckdb ------------------------------ 1.48 MiB/19.27 MiB
playwright ------------------------------ 254.80 KiB/43.05 MiB
Building scubaduck @ file:///workspace/scubaduck
⠹ Preparing packages... (4/33)
greenlet ------------------------------ 510.30 KiB/589.71 KiB
pyright ------------------------------ 1.55 MiB/5.31 MiB
ruff ------------------------------ 1.89 MiB/11.02 MiB
duckdb ------------------------------ 1.95 MiB/19.27 MiB
playwright ------------------------------ 718.80 KiB/43.05 MiB
Building scubaduck @ file:///workspace/scubaduck
⠹ Preparing packages... (4/33)
greenlet ------------------------------ 542.30 KiB/589.71 KiB
pyright ------------------------------ 1.70 MiB/5.31 MiB
ruff ------------------------------ 2.02 MiB/11.02 MiB
duckdb ------------------------------ 2.08 MiB/19.27 MiB
playwright ------------------------------ 878.80 KiB/43.05 MiB
Building scubaduck @ file:///workspace/scubaduck
⠹ Preparing packages... (4/33)
pyright ------------------------------ 1.81 MiB/5.31 MiB
ruff ------------------------------ 2.95 MiB/11.02 MiB
duckdb ------------------------------ 3.05 MiB/19.27 MiB
playwright ------------------------------ 1.79 MiB/43.05 MiB
Building scubaduck @ file:///workspace/scubaduck
⠹ Preparing packages... (4/33)
pyright ------------------------------ 1.82 MiB/5.31 MiB
ruff ------------------------------ 3.23 MiB/11.02 MiB
duckdb ------------------------------ 3.34 MiB/19.27 MiB
playwright ------------------------------ 2.08 MiB/43.05 MiB
Building scubaduck @ file:///workspace/scubaduck
⠸ Preparing packages... (28/33)
pyright ------------------------------ 1.89 MiB/5.31 MiB
ruff ------------------------------ 4.47 MiB/11.02 MiB
duckdb ------------------------------ 4.61 MiB/19.27 MiB
playwright ------------------------------ 3.30 MiB/43.05 MiB
Building scubaduck @ file:///workspace/scubaduck
⠸ Preparing packages... (28/33)
pyright ------------------------------ 1.93 MiB/5.31 MiB
ruff ------------------------------ 5.72 MiB/11.02 MiB
duckdb ------------------------------ 5.84 MiB/19.27 MiB
playwright ------------------------------ 4.55 MiB/43.05 MiB
Building scubaduck @ file:///workspace/scubaduck
⠸ Preparing packages... (28/33)
pyright ------------------------------ 2.00 MiB/5.31 MiB
ruff ------------------------------ 6.95 MiB/11.02 MiB
duckdb ------------------------------ 7.06 MiB/19.27 MiB
playwright ------------------------------ 5.79 MiB/43.05 MiB
Building scubaduck @ file:///workspace/scubaduck
⠸ Preparing packages... (28/33)
pyright ------------------------------ 2.08 MiB/5.31 MiB
ruff ------------------------------ 8.39 MiB/11.02 MiB
duckdb ------------------------------ 8.51 MiB/19.27 MiB
playwright ------------------------------ 7.22 MiB/43.05 MiB
Building scubaduck @ file:///workspace/scubaduck
⠼ Preparing packages... (28/33)
pyright ------------------------------ 2.12 MiB/5.31 MiB
ruff ------------------------------ 9.64 MiB/11.02 MiB
duckdb ------------------------------ 9.74 MiB/19.27 MiB
playwright ------------------------------ 8.48 MiB/43.05 MiB
Building scubaduck @ file:///workspace/scubaduck
⠼ Preparing packages... (28/33)
pyright ------------------------------ 2.14 MiB/5.31 MiB
ruff ------------------------------ 11.00 MiB/11.02 MiB
duckdb ------------------------------ 11.09 MiB/19.27 MiB
playwright ------------------------------ 9.78 MiB/43.05 MiB
Building scubaduck @ file:///workspace/scubaduck
⠼ Preparing packages... (28/33)
pyright ------------------------------ 2.15 MiB/5.31 MiB
duckdb ------------------------------ 11.18 MiB/19.27 MiB
playwright ------------------------------ 9.89 MiB/43.05 MiB
Building scubaduck @ file:///workspace/scubaduck
⠼ Preparing packages... (28/33)
pyright ------------------------------ 2.17 MiB/5.31 MiB
duckdb ------------------------------ 12.76 MiB/19.27 MiB
playwright ------------------------------ 11.45 MiB/43.05 MiB
Building scubaduck @ file:///workspace/scubaduck
⠼ Preparing packages... (28/33)
pyright ------------------------------ 2.20 MiB/5.31 MiB
duckdb ------------------------------ 14.53 MiB/19.27 MiB
playwright ------------------------------ 13.28 MiB/43.05 MiB
Built scubaduck @ file:///workspace/scubaduck
⠴ Preparing packages... (29/33)
pyright ------------------------------ 2.22 MiB/5.31 MiB
duckdb ------------------------------ 15.44 MiB/19.27 MiB
playwright ------------------------------ 14.15 MiB/43.05 MiB
⠴ Preparing packages... (29/33)
pyright ------------------------------ 2.23 MiB/5.31 MiB
duckdb ------------------------------ 15.92 MiB/19.27 MiB
playwright ------------------------------ 14.61 MiB/43.05 MiB
⠴ Preparing packages... (29/33)
pyright ------------------------------ 2.25 MiB/5.31 MiB
duckdb ------------------------------ 17.90 MiB/19.27 MiB
playwright ------------------------------ 16.59 MiB/43.05 MiB
⠴ Preparing packages... (29/33)
pyright ------------------------------ 2.31 MiB/5.31 MiB
duckdb ------------------------------ 19.26 MiB/19.27 MiB
playwright ------------------------------ 18.92 MiB/43.05 MiB
⠴ Preparing packages... (29/33)
pyright ------------------------------ 2.34 MiB/5.31 MiB
playwright ------------------------------ 19.56 MiB/43.05 MiB
⠴ Preparing packages... (29/33)
pyright ------------------------------ 2.40 MiB/5.31 MiB
playwright ------------------------------ 22.95 MiB/43.05 MiB
⠦ Preparing packages... (31/33)
pyright ------------------------------ 2.47 MiB/5.31 MiB
playwright ------------------------------ 26.18 MiB/43.05 MiB
⠦ Preparing packages... (31/33)
pyright ------------------------------ 2.61 MiB/5.31 MiB
playwright ------------------------------ 28.07 MiB/43.05 MiB
⠦ Preparing packages... (31/33)
pyright ------------------------------ 2.70 MiB/5.31 MiB
playwright ------------------------------ 29.73 MiB/43.05 MiB
⠦ Preparing packages... (31/33)
pyright ------------------------------ 2.78 MiB/5.31 MiB
playwright ------------------------------ 31.59 MiB/43.05 MiB
⠧ Preparing packages... (31/33)
pyright ------------------------------ 2.92 MiB/5.31 MiB
playwright ------------------------------ 33.25 MiB/43.05 MiB
⠧ Preparing packages... (31/33)
pyright ------------------------------ 3.06 MiB/5.31 MiB
playwright ------------------------------ 34.84 MiB/43.05 MiB
⠧ Preparing packages... (31/33)
pyright ------------------------------ 3.19 MiB/5.31 MiB
playwright ------------------------------ 36.65 MiB/43.05 MiB
⠇ Preparing packages... (31/33)
pyright ------------------------------ 3.30 MiB/5.31 MiB
playwright ------------------------------ 38.31 MiB/43.05 MiB
⠇ Preparing packages... (31/33)
pyright ------------------------------ 3.44 MiB/5.31 MiB
playwright ------------------------------ 40.25 MiB/43.05 MiB
⠇ Preparing packages... (31/33)
pyright ------------------------------ 3.67 MiB/5.31 MiB
playwright ------------------------------ 41.34 MiB/43.05 MiB
⠇ Preparing packages... (31/33)
pyright ------------------------------ 3.80 MiB/5.31 MiB
⠇ Preparing packages... (31/33)
pyright ------------------------------ 3.86 MiB/5.31 MiB
⠇ Preparing packages... (31/33)
pyright ------------------------------ 4.28 MiB/5.31 MiB
⠋ Preparing packages... (32/33)
pyright ------------------------------ 4.50 MiB/5.31 MiB
⠋ Preparing packages... (32/33)
Prepared 33 packages in 1.68s
░░░░░░░░░░░░░░░░░░░░ [0/0] Installing wheels...
░░░░░░░░░░░░░░░░░░░░ [0/33] Installing wheels...
░░░░░░░░░░░░░░░░░░░░ [0/33] text-unidecode==1.3
░░░░░░░░░░░░░░░░░░░░ [1/33] text-unidecode==1.3
░░░░░░░░░░░░░░░░░░░░ [1/33] pytest-base-url==2.1.0
█░░░░░░░░░░░░░░░░░░░ [2/33] pytest-base-url==2.1.0
█░░░░░░░░░░░░░░░░░░░ [2/33] requests==2.32.3
█░░░░░░░░░░░░░░░░░░░ [3/33] requests==2.32.3
█░░░░░░░░░░░░░░░░░░░ [3/33] six==1.17.0
██░░░░░░░░░░░░░░░░░░ [4/33] six==1.17.0
██░░░░░░░░░░░░░░░░░░ [4/33] urllib3==2.4.0
███░░░░░░░░░░░░░░░░░ [5/33] urllib3==2.4.0
███░░░░░░░░░░░░░░░░░ [5/33] pytest-xdist==3.6.1
███░░░░░░░░░░░░░░░░░ [6/33] pytest-xdist==3.6.1
███░░░░░░░░░░░░░░░░░ [6/33] typing-extensions==4.13.2
████░░░░░░░░░░░░░░░░ [7/33] typing-extensions==4.13.2
████░░░░░░░░░░░░░░░░ [7/33] python-slugify==8.0.4
████░░░░░░░░░░░░░░░░ [8/33] python-slugify==8.0.4
████░░░░░░░░░░░░░░░░ [8/33] blinker==1.9.0
█████░░░░░░░░░░░░░░░ [9/33] blinker==1.9.0
███████████████████░ [32/33] pyright==1.1.400
Installed 33 packages in 80ms
+ 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/uW5LWQ-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.15.1/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.15.1/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
++ 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% 29.3s167.7 MiB [] 0% 32.6s167.7 MiB [] 0% 23.0s167.7 MiB [] 0% 14.5s167.7 MiB [] 0% 8.8s167.7 MiB [] 1% 5.7s167.7 MiB [] 2% 4.2s167.7 MiB [] 4% 2.7s167.7 MiB [] 5% 2.4s167.7 MiB [] 6% 2.3s167.7 MiB [] 7% 2.1s167.7 MiB [] 9% 1.8s167.7 MiB [] 10% 1.8s167.7 MiB [] 11% 1.8s167.7 MiB [] 13% 1.5s167.7 MiB [] 15% 1.4s167.7 MiB [] 16% 1.4s167.7 MiB [] 18% 1.2s167.7 MiB [] 21% 1.1s167.7 MiB [] 23% 1.1s167.7 MiB [] 25% 1.0s167.7 MiB [] 27% 1.0s167.7 MiB [] 28% 0.9s167.7 MiB [] 30% 0.9s167.7 MiB [] 32% 0.8s167.7 MiB [] 34% 0.8s167.7 MiB [] 36% 0.8s167.7 MiB [] 38% 0.7s167.7 MiB [] 39% 0.7s167.7 MiB [] 40% 0.7s167.7 MiB [] 41% 0.7s167.7 MiB [] 42% 0.7s167.7 MiB [] 44% 0.7s167.7 MiB [] 46% 0.6s167.7 MiB [] 48% 0.6s167.7 MiB [] 51% 0.6s167.7 MiB [] 54% 0.5s167.7 MiB [] 56% 0.5s167.7 MiB [] 57% 0.5s167.7 MiB [] 58% 0.5s167.7 MiB [] 59% 0.5s167.7 MiB [] 60% 0.5s167.7 MiB [] 62% 0.5s167.7 MiB [] 64% 0.4s167.7 MiB [] 65% 0.4s167.7 MiB [] 66% 0.4s167.7 MiB [] 67% 0.4s167.7 MiB [] 69% 0.4s167.7 MiB [] 71% 0.3s167.7 MiB [] 72% 0.3s167.7 MiB [] 74% 0.3s167.7 MiB [] 76% 0.3s167.7 MiB [] 78% 0.3s167.7 MiB [] 79% 0.2s167.7 MiB [] 80% 0.2s167.7 MiB [] 81% 0.2s167.7 MiB [] 82% 0.2s167.7 MiB [] 83% 0.2s167.7 MiB [] 84% 0.2s167.7 MiB [] 85% 0.2s167.7 MiB [] 87% 0.1s167.7 MiB [] 89% 0.1s167.7 MiB [] 90% 0.1s167.7 MiB [] 92% 0.1s167.7 MiB [] 94% 0.1s167.7 MiB [] 96% 0.0s167.7 MiB [] 97% 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 [] 3% 0.5s2.3 MiB [] 6% 0.5s2.3 MiB [] 15% 0.3s2.3 MiB [] 30% 0.2s2.3 MiB [] 92% 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% 18.9s101.4 MiB [] 0% 19.8s101.4 MiB [] 0% 13.9s101.4 MiB [] 0% 9.8s101.4 MiB [] 1% 5.2s101.4 MiB [] 3% 2.8s101.4 MiB [] 5% 1.8s101.4 MiB [] 8% 1.3s101.4 MiB [] 10% 1.3s101.4 MiB [] 11% 1.2s101.4 MiB [] 14% 1.1s101.4 MiB [] 16% 1.0s101.4 MiB [] 20% 0.8s101.4 MiB [] 24% 0.7s101.4 MiB [] 28% 0.6s101.4 MiB [] 34% 0.5s101.4 MiB [] 37% 0.5s101.4 MiB [] 40% 0.4s101.4 MiB [] 44% 0.4s101.4 MiB [] 47% 0.4s101.4 MiB [] 50% 0.3s101.4 MiB [] 53% 0.3s101.4 MiB [] 57% 0.3s101.4 MiB [] 60% 0.3s101.4 MiB [] 63% 0.2s101.4 MiB [] 67% 0.2s101.4 MiB [] 70% 0.2s101.4 MiB [] 71% 0.2s101.4 MiB [] 75% 0.2s101.4 MiB [] 79% 0.1s101.4 MiB [] 83% 0.1s101.4 MiB [] 86% 0.1s101.4 MiB [] 89% 0.1s101.4 MiB [] 93% 0.0s101.4 MiB [] 94% 0.0s101.4 MiB [] 95% 0.0s101.4 MiB [] 98% 0.0s101.4 MiB [] 99% 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'Time to check the AGENTS.md in the repo root, as the instructions suggest.
bash: .venv/bin/activate: No such file or directory
root@8031fa2cb19b:/workspace# ls
scubaduckroot@8031fa2cb19b:/workspace# cd scubaduck
root@8031fa2cb19b:/workspace/scubaduck# ls
AGENTS.md codex_setup.sh scubaduck tests
README.md pyproject.toml stubs uv.lockroot@8031fa2cb19b:/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.pyI'll run "source .venv/bin/activate" before executing any further commands.
root@8031fa2cb19b:/workspace/scubaduck# source .venv/bin/activate
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#Looks like there are no additional instructions in AGENTS. I'll now search for the chart implementation.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# ls
AGENTS.md codex_setup.sh scubaduck tests
README.md pyproject.toml stubs uv.lock(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# ls scubaduck
__init__.py sample.csv server.py static
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'll take a look at the contents of the static folder.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# ls scubaduck/static
index.html js(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# ls scubaduck/static/js
chip_input.js timeseries_chart.js(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# cat scubaduck/static/js/time
series_chart.js
let resizeObserver = null;
let currentChart = null;
function showTimeSeries(data) {
function parseTs(s) {
if (s.match(/GMT/) || s.endsWith('Z') || /\+\d{2}:?\d{2}$/.test(s)) {
return new Date(s).getTime();
}
return new Date(s + 'Z').getTime();
}
const view = document.getElementById('view');
if (data.rows.length === 0) {
view.innerHTML = '<p id="empty-message">Empty data provided to table</p>';
return;
}
const height = 400;
view.innerHTML =
'<div id="ts-container"><div id="legend"></div><div id="chart-wrapper"><svg
id="chart" height="' +
height +
'"></svg></div></div>';
const svg = document.getElementById('chart');
const legend = document.getElementById('legend');
const crosshairLine = document.createElementNS('http://www.w3.org/2000/svg', '
line');
crosshairLine.id = 'crosshair_line';
crosshairLine.setAttribute('stroke', '#555');
crosshairLine.style.display = 'none';
const crosshairDots = document.createElementNS('http://www.w3.org/2000/svg', '
g');
crosshairDots.id = 'crosshair_dots';
crosshairDots.style.display = 'none';
const groups = groupBy.chips || [];
const hasHits = document.getElementById('show_hits').checked ? 1 : 0;
const fill = document.getElementById('fill').value;
const bucketMs = (data.bucket_size || 3600) * 1000;
const start = data.start ? parseTs(data.start) : null;
const end = data.end ? parseTs(data.end) : null;
const startIdx = 1 + groups.length + hasHits;
const valueCols = selectedColumns.slice(groups.length + hasHits);
const series = {};
data.rows.forEach(r => {
const ts = parseTs(r[0]);
const groupKey = groups.map((_, i) => r[1 + i]).join(':') || 'all';
valueCols.forEach((name, i) => {
const val = Number(r[startIdx + i]);
const key = groupKey === 'all' ? name : groupKey + ':' + name;
if (!series[key]) series[key] = {};
series[key][ts] = val;
});
});
const buckets = [];
let minX = start !== null ? start : Infinity;
let maxX = end !== null ? end : -Infinity;
if (start !== null && end !== null) {
for (let t = start; t <= end; t += bucketMs) {
buckets.push(t);
}
} else {
Object.keys(series).forEach(k => {
const s = series[k];
Object.keys(s).forEach(t => {
const n = Number(t);
if (n < minX) minX = n;
if (n > maxX) maxX = n;
});
});
for (let t = minX; t <= maxX; t += bucketMs) {
buckets.push(t);
}
}
let minY = Infinity,
maxY = -Infinity;
Object.keys(series).forEach(key => {
const vals = series[key];
buckets.forEach(b => {
const v = vals[b];
const val = v === undefined && fill === '0' ? 0 : v;
if (val === undefined) return;
if (val < minY) minY = val;
if (val > maxY) maxY = val;
});
});
if (fill === '0') {
if (minY > 0) minY = 0;
if (maxY < 0) maxY = 0;
}
const colors = [
'#1f77b4',
'#ff7f0e',
'#2ca02c',
'#d62728',
'#9467bd',
'#8c564b',
'#e377c2'
];
currentChart = {
svg,
legend,
series,
buckets,
minX,
maxX,
minY,
maxY,
fill,
colors,
height,
crosshairLine,
crosshairDots,
seriesEls: {},
bucketPixels: [],
xScale: null,
yScale: null,
selected: null
};
...
currentChart.yScale = yScale;
currentChart.bucketPixels = buckets.map(xScale);
svg.appendChild(crosshairLine);
svg.appendChild(crosshairDots);
const intv = chooseInterval(minX, maxX);
const ticks = generateTicks(minX, maxX, intv);
const lu = labelUnit(intv);
const rotate = ticks.length > 0 && (width - 60) / ticks.length < 60;
const axis = document.createElementNS('http://www.w3.org/2000/svg', 'g');
const axisLine = document.createElementNS('http://www.w3.org/2000/svg', 'lin
e');
axisLine.setAttribute('x1', xScale(minX));
axisLine.setAttribute('x2', xScale(maxX));
axisLine.setAttribute('y1', height - 30);
axisLine.setAttribute('y2', height - 30);
axisLine.setAttribute('stroke', '#000');
axis.appendChild(axisLine);
ticks.forEach(t => {
const x = xScale(t);
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'
);
line.setAttribute('x1', x);
line.setAttribute('y1', height - 30);
line.setAttribute('x2', x);
line.setAttribute('y2', height - 25);
line.setAttribute('stroke', '#000');
axis.appendChild(line);
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'
);
text.setAttribute('x', x);
text.setAttribute('y', height - 10);
text.setAttribute('text-anchor', 'middle');
text.setAttribute('class', 'tick-label' + (rotate ? ' rotated' : ''));
if (rotate) text.setAttribute('transform', `rotate(-45 ${x} ${height - 10}
)`);
text.textContent = fmt(new Date(t), lu);
axis.appendChild(text);
});
svg.appendChild(axis);
}
render();
function hideCrosshair() {
crosshairLine.style.display = 'none';
crosshairDots.style.display = 'none';
crosshairDots.innerHTML = '';
Object.values(currentChart.seriesEls).forEach(el => {
el.valueEl.textContent = '';
});
if (currentChart.selected) {
currentChart.seriesEls[currentChart.selected].highlight(false);
currentChart.selected = null;
}
}
svg.addEventListener('mouseleave', hideCrosshair);
svg.addEventListener('mousemove', e => {
const rect = svg.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const pixels = currentChart.bucketPixels;
if (!pixels.length) return;
let idx = 0;
let dist = Math.abs(pixels[0] - x);
for (let i = 1; i < pixels.length; i++) {
const d = Math.abs(pixels[i] - x);
if (d < dist) {
dist = d;
idx = i;
}
}
const bucket = currentChart.buckets[idx];
const xPix = pixels[idx];
crosshairLine.setAttribute('x1', xPix);
crosshairLine.setAttribute('x2', xPix);
crosshairLine.setAttribute('y1', currentChart.yScale(currentChart.maxY));
crosshairLine.setAttribute('y2', currentChart.yScale(currentChart.minY));
crosshairLine.style.display = 'block';
crosshairDots.style.display = 'block';
crosshairDots.innerHTML = '';
const options = [];
Object.keys(currentChart.series).forEach(key => {
const vals = currentChart.series[key];
let v = vals[bucket];
if (v === undefined && currentChart.fill !== '0') {
currentChart.seriesEls[key].valueEl.textContent = '';
return;
}
if (v === undefined) v = 0;
currentChart.seriesEls[key].valueEl.textContent = formatNumber(v);
const yPix = currentChart.yScale(v);
const dot = document.createElementNS('http://www.w3.org/2000/svg', 'circle
');
dot.setAttribute('cx', xPix);
dot.setAttribute('cy', yPix);
dot.setAttribute('r', '3');
dot.setAttribute('fill', currentChart.seriesEls[key].color);
crosshairDots.appendChild(dot);
options.push({ key, y: yPix });
});
if (options.length) {
let best = options[0];
let bestDist = Math.abs(best.y - y);
for (let i = 1; i < options.length; i++) {
const d = Math.abs(options[i].y - y);
if (d < bestDist) {
best = options[i];
bestDist = d;
}
}
if (currentChart.selected && currentChart.selected !== best.key) {
currentChart.seriesEls[currentChart.selected].highlight(false);
}
currentChart.seriesEls[best.key].highlight(true);
currentChart.selected = best.key;
}
});
if (resizeObserver) resizeObserver.disconnect();
resizeObserver = new ResizeObserver(render);
resizeObserver.observe(svg.parentElement);
}
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#The JS file was cut off; I’ll check the rest to get the full content.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# sed -n '1,200p' scubaduck/st
atic/js/timeseries_chart.js
let resizeObserver = null;
let currentChart = null;
function showTimeSeries(data) {
function parseTs(s) {
if (s.match(/GMT/) || s.endsWith('Z') || /\+\d{2}:?\d{2}$/.test(s)) {
return new Date(s).getTime();
}
return new Date(s + 'Z').getTime();
}
const view = document.getElementById('view');
if (data.rows.length === 0) {
view.innerHTML = '<p id="empty-message">Empty data provided to table</p>';
return;
}
const height = 400;
view.innerHTML =
'<div id="ts-container"><div id="legend"></div><div id="chart-wrapper"><svg
id="chart" height="' +
height +
'"></svg></div></div>';
const svg = document.getElementById('chart');
const legend = document.getElementById('legend');
const crosshairLine = document.createElementNS('http://www.w3.org/2000/svg', '
line');
crosshairLine.id = 'crosshair_line';
crosshairLine.setAttribute('stroke', '#555');
crosshairLine.style.display = 'none';
const crosshairDots = document.createElementNS('http://www.w3.org/2000/svg', '
g');
crosshairDots.id = 'crosshair_dots';
crosshairDots.style.display = 'none';
const groups = groupBy.chips || [];
const hasHits = document.getElementById('show_hits').checked ? 1 : 0;
const fill = document.getElementById('fill').value;
const bucketMs = (data.bucket_size || 3600) * 1000;
const start = data.start ? parseTs(data.start) : null;
const end = data.end ? parseTs(data.end) : null;
const startIdx = 1 + groups.length + hasHits;
const valueCols = selectedColumns.slice(groups.length + hasHits);
const series = {};
data.rows.forEach(r => {
const ts = parseTs(r[0]);
const groupKey = groups.map((_, i) => r[1 + i]).join(':') || 'all';
valueCols.forEach((name, i) => {
const val = Number(r[startIdx + i]);
const key = groupKey === 'all' ? name : groupKey + ':' + name;
if (!series[key]) series[key] = {};
series[key][ts] = val;
});
});
const buckets = [];
let minX = start !== null ? start : Infinity;
let maxX = end !== null ? end : -Infinity;
if (start !== null && end !== null) {
for (let t = start; t <= end; t += bucketMs) {
buckets.push(t);
}
} else {
Object.keys(series).forEach(k => {
const s = series[k];
Object.keys(s).forEach(t => {
const n = Number(t);
if (n < minX) minX = n;
if (n > maxX) maxX = n;
});
});
for (let t = minX; t <= maxX; t += bucketMs) {
buckets.push(t);
}
}
let minY = Infinity,
maxY = -Infinity;
Object.keys(series).forEach(key => {
const vals = series[key];
buckets.forEach(b => {
const v = vals[b];
const val = v === undefined && fill === '0' ? 0 : v;
if (val === undefined) return;
if (val < minY) minY = val;
if (val > maxY) maxY = val;
});
});
if (fill === '0') {
if (minY > 0) minY = 0;
if (maxY < 0) maxY = 0;
}
const colors = [
'#1f77b4',
'#ff7f0e',
'#2ca02c',
'#d62728',
'#9467bd',
'#8c564b',
'#e377c2'
];
currentChart = {
svg,
legend,
series,
buckets,
minX,
maxX,
minY,
maxY,
fill,
colors,
height,
crosshairLine,
crosshairDots,
seriesEls: {},
bucketPixels: [],
xScale: null,
yScale: null,
selected: null
};
const intervals = [
{unit: 'second', step: 1, ms: 1000},
{unit: 'second', step: 2, ms: 2000},
{unit: 'second', step: 5, ms: 5000},
{unit: 'second', step: 10, ms: 10000},
{unit: 'second', step: 15, ms: 15000},
{unit: 'second', step: 30, ms: 30000},
{unit: 'minute', step: 1, ms: 60000},
{unit: 'minute', step: 2, ms: 120000},
{unit: 'minute', step: 5, ms: 300000},
{unit: 'minute', step: 10, ms: 600000},
{unit: 'minute', step: 15, ms: 900000},
{unit: 'minute', step: 30, ms: 1800000},
{unit: 'hour', step: 1, ms: 3600000},
{unit: 'hour', step: 2, ms: 7200000},
{unit: 'hour', step: 3, ms: 10800000},
{unit: 'hour', step: 4, ms: 14400000},
{unit: 'hour', step: 6, ms: 21600000},
{unit: 'hour', step: 12, ms: 43200000},
{unit: 'day', step: 1, ms: 86400000},
{unit: 'day', step: 2, ms: 172800000},
{unit: 'week', step: 1, ms: 604800000},
{unit: 'week', step: 2, ms: 1209600000},
{unit: 'month', step: 1},
{unit: 'month', step: 3},
{unit: 'month', step: 6},
{unit: 'year', step: 1},
{unit: 'year', step: 2},
{unit: 'year', step: 5},
{unit: 'year', step: 10}
];
function chooseInterval(start, end) {
const span = end - start;
function approxMs(i) {
if (i.ms) return i.ms;
if (i.unit === 'month') return i.step * 2629800000;
if (i.unit === 'year') return i.step * 31557600000;
return 1000;
}
let best = intervals[0];
let bestScore = Infinity;
intervals.forEach(i => {
const count = span / approxMs(i);
const score = Math.abs(count - 15);
if (score < bestScore) {
best = i;
bestScore = score;
}
});
return best;
}
function generateTicks(start, end, intv) {
const ticks = [];
if (intv.unit === 'month' || intv.unit === 'year') {
let d = new Date(start);
d.setUTCDate(1);
if (intv.unit === 'year') d.setUTCMonth(0);
let unitVal =
intv.unit === 'month'
? d.getUTCFullYear() * 12 + d.getUTCMonth()
: d.getUTCFullYear();
unitVal = Math.ceil(unitVal / intv.step) * intv.step;
while (true) {
const year =
intv.unit === 'month' ? Math.floor(unitVal / 12) : unitVal;
const month = intv.unit === 'month' ? unitVal % 12 : 0;
const t = Date.UTC(year, month, 1);
if (t > end) break;
if (t >= start) ticks.push(t);
unitVal += intv.step;
}
} else {
const step = intv.ms * intv.step;
let t = Math.ceil(start / step) * step;
if (intv.unit === 'week') {
const d = new Date(t);
const adj = (d.getUTCDay() + 6) % 7;
t = d.getTime() - adj * 86400000;
t = Math.ceil(t / step) * step;(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# sed -n '200,400p' scubaduck/
static/js/timeseries_chart.js
t = Math.ceil(t / step) * step;
}
if (t === start) t += step;
for (; t <= end; t += step) ticks.push(t);
}
return ticks;
}
function labelUnit(intv) {
if (intv.unit === 'year') return 'year';
if (intv.unit === 'month') return 'month';
if (intv.unit === 'day' || intv.unit === 'week') return 'day';
if (intv.unit === 'hour') return 'hour';
return 'minute';
}
function fmt(date, unit) {
const pad = n => String(n).padStart(2, '0');
const mon = date.toLocaleString('en-US', {month: 'short'});
switch (unit) {
case 'year':
return String(date.getFullYear());
case 'month':
if (date.getMonth() === 0) return String(date.getFullYear());
return `${mon} ${date.getFullYear()}`;
case 'day':
if (date.getDate() === 1) return `${mon} ${date.getFullYear()}`;
return `${date.getDate()} ${mon}`;
case 'hour':
if (date.getHours() === 0 && date.getMinutes() === 0)
return `${date.getDate()} ${mon}`;
return `${pad(date.getHours())}:${pad(date.getMinutes())}`;
default:
if (date.getMinutes() === 0 && date.getSeconds() === 0)
return `${pad(date.getHours())}:${pad(date.getMinutes())}`;
return `${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
}
}
function render() {
const style = getComputedStyle(svg.parentElement);
const width =
svg.parentElement.clientWidth -
parseFloat(style.paddingLeft) -
parseFloat(style.paddingRight);
svg.setAttribute('width', width);
svg.innerHTML = '';
legend.innerHTML = '';
let colorIndex = 0;
const xRange = maxX - minX || 1;
const yRange = maxY - minY || 1;
const xScale = x => ((x - minX) / xRange) * (width - 60) + 50;
const yScale = y => height - 30 - ((y - minY) / yRange) * (height - 60);
const seriesEls = {};
const agg = document.getElementById('aggregate').value.toLowerCase();
const groups = {};
Object.keys(series).forEach(key => {
const vals = series[key];
const color = colors[colorIndex++ % colors.length];
let path = '';
let drawing = false;
buckets.forEach(b => {
const v = vals[b];
if (v === undefined) {
if (fill === '0') {
const x = xScale(b);
const y = yScale(0);
path += (drawing ? 'L' : 'M') + x + ' ' + y + ' ';
drawing = true;
} else if (fill === 'blank') {
drawing = false;
}
// connect: do nothing
} else {
const x = xScale(b);
const y = yScale(v);
path += (drawing ? 'L' : 'M') + x + ' ' + y + ' ';
drawing = true;
}
});
const el = document.createElementNS('http://www.w3.org/2000/svg', 'path');
el.setAttribute('d', path.trim());
el.setAttribute('fill', 'none');
el.setAttribute('stroke', color);
el.setAttribute('stroke-width', '1');
svg.appendChild(el);
const idx = key.lastIndexOf(':');
const groupKey = idx === -1 ? 'all' : key.slice(0, idx);
const name = idx === -1 ? key : key.slice(idx + 1);
let group = groups[groupKey];
if (!group) {
const gEl = document.createElement('div');
gEl.className = 'legend-group';
const header = document.createElement('div');
header.className = 'legend-header';
header.textContent =
groupKey === 'all' ? agg : `${groupKey} ${agg}`;
gEl.appendChild(header);
const items = document.createElement('div');
items.className = 'legend-items';
gEl.appendChild(items);
legend.appendChild(gEl);
group = {items};
groups[groupKey] = group;
}
const item = document.createElement('div');
item.className = 'legend-item';
const label = document.createElement('span');
label.textContent = name;
label.style.color = color;
const valueSpan = document.createElement('span');
valueSpan.className = 'legend-value';
item.appendChild(label);
item.appendChild(valueSpan);
group.items.appendChild(item);
function highlight(on) {
el.setAttribute('stroke-width', on ? '3' : '1');
item.classList.toggle('highlight', on);
}
el.addEventListener('mouseenter', () => highlight(true));
el.addEventListener('mouseleave', () => highlight(false));
item.addEventListener('mouseenter', () => highlight(true));
item.addEventListener('mouseleave', () => highlight(false));
seriesEls[key] = { path: el, item, highlight, color, valueEl: valueSpan };
});
currentChart.seriesEls = seriesEls;
currentChart.xScale = xScale;
currentChart.yScale = yScale;
currentChart.bucketPixels = buckets.map(xScale);
svg.appendChild(crosshairLine);
svg.appendChild(crosshairDots);
const intv = chooseInterval(minX, maxX);
const ticks = generateTicks(minX, maxX, intv);
const lu = labelUnit(intv);
const rotate = ticks.length > 0 && (width - 60) / ticks.length < 60;
const axis = document.createElementNS('http://www.w3.org/2000/svg', 'g');
const axisLine = document.createElementNS('http://www.w3.org/2000/svg', 'lin
e');
axisLine.setAttribute('x1', xScale(minX));
axisLine.setAttribute('x2', xScale(maxX));
axisLine.setAttribute('y1', height - 30);
axisLine.setAttribute('y2', height - 30);
axisLine.setAttribute('stroke', '#000');
axis.appendChild(axisLine);
ticks.forEach(t => {
const x = xScale(t);
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'
);
line.setAttribute('x1', x);
line.setAttribute('y1', height - 30);
line.setAttribute('x2', x);
line.setAttribute('y2', height - 25);
line.setAttribute('stroke', '#000');
axis.appendChild(line);
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'
);
text.setAttribute('x', x);
text.setAttribute('y', height - 10);
text.setAttribute('text-anchor', 'middle');
text.setAttribute('class', 'tick-label' + (rotate ? ' rotated' : ''));
if (rotate) text.setAttribute('transform', `rotate(-45 ${x} ${height - 10}
)`);
text.textContent = fmt(new Date(t), lu);
axis.appendChild(text);
});
svg.appendChild(axis);
}
render();
function hideCrosshair() {
crosshairLine.style.display = 'none';
crosshairDots.style.display = 'none';
crosshairDots.innerHTML = '';
Object.values(currentChart.seriesEls).forEach(el => {
el.valueEl.textContent = '';
});
if (currentChart.selected) {
currentChart.seriesEls[currentChart.selected].highlight(false);
currentChart.selected = null;
}
}
svg.addEventListener('mouseleave', hideCrosshair);
svg.addEventListener('mousemove', e => {
const rect = svg.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const pixels = currentChart.bucketPixels;
if (!pixels.length) return;
let idx = 0;
let dist = Math.abs(pixels[0] - x);
for (let i = 1; i < pixels.length; i++) {
const d = Math.abs(pixels[i] - x);
if (d < dist) {
dist = d;
idx = i;
}
}
const bucket = currentChart.buckets[idx];
const xPix = pixels[idx];
crosshairLine.setAttribute('x1', xPix);(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# sed -n '400,800p' scubaduck/
static/js/timeseries_chart.js
crosshairLine.setAttribute('x1', xPix);
crosshairLine.setAttribute('x2', xPix);
crosshairLine.setAttribute('y1', currentChart.yScale(currentChart.maxY));
crosshairLine.setAttribute('y2', currentChart.yScale(currentChart.minY));
crosshairLine.style.display = 'block';
crosshairDots.style.display = 'block';
crosshairDots.innerHTML = '';
const options = [];
Object.keys(currentChart.series).forEach(key => {
const vals = currentChart.series[key];
let v = vals[bucket];
if (v === undefined && currentChart.fill !== '0') {
currentChart.seriesEls[key].valueEl.textContent = '';
return;
}
if (v === undefined) v = 0;
currentChart.seriesEls[key].valueEl.textContent = formatNumber(v);
const yPix = currentChart.yScale(v);
const dot = document.createElementNS('http://www.w3.org/2000/svg', 'circle
');
dot.setAttribute('cx', xPix);
dot.setAttribute('cy', yPix);
dot.setAttribute('r', '3');
dot.setAttribute('fill', currentChart.seriesEls[key].color);
crosshairDots.appendChild(dot);
options.push({ key, y: yPix });
});
if (options.length) {
let best = options[0];
let bestDist = Math.abs(best.y - y);
for (let i = 1; i < options.length; i++) {
const d = Math.abs(options[i].y - y);
if (d < bestDist) {
best = options[i];
bestDist = d;
}
}
if (currentChart.selected && currentChart.selected !== best.key) {
currentChart.seriesEls[currentChart.selected].highlight(false);
}
currentChart.seriesEls[best.key].highlight(true);
currentChart.selected = best.key;
}
});
if (resizeObserver) resizeObserver.disconnect();
resizeObserver = new ResizeObserver(render);
resizeObserver.observe(svg.parentElement);
}
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#The chart needs Y-axis labels with "nice" rounded ticks and grey horizontal lines. Searching for existing code.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# grep -n "nice" -r scubaduck/
static/js
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I’m wondering if a 'chooseInterval' function exists for the y-axis, not just time.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# ls tests
conftest.py test_server.py test_web.pydef select_value(page: Any, selector: str, value: str) -> None:
page.evaluate(
"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)
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="timestamp",
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="timestamp",
limit=2,
)
assert len(data["rows"]) == 2
def test_simple_filter(page: Any, server_url: str) -> None:
page.goto(server_url)
page.wait_for_selector("#order_by option", state="attached")
page.click("text=Add Filter")
filter_el = page.query_selector("#filters .filter:last-child")
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")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_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.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.evaluate("window.lastResults = undefined")
page.click("text=Dive")
page.wait_for_function("window.lastResults !== undefined")
path = page.get_attribute("#chart path", "d")
assert path is not None and "NaN" not in path
def test_timeseries_fill_options(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-02 03:00:00")
select_value(page, "#graph_type", "timeseries")
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.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 "3" 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.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_auto_timezone(browser: Any, server_url: str) -> None:
context = browser.new_context(timezone_id="America/New_York")
page = context.new_page()
page.goto(server_url)
page.wait_for_selector("#graph_type", state="attached")
select_value(page, "#graph_type", "timeseries")
page.evaluate("window.lastResults = undefined")
page.click("text=Dive")
page.wait_for_function("window.lastResults !== undefined")
path = page.get_attribute("#chart path", "d")
context.close()
assert path is not None
coords = [float(p.split(" ")[1]) for p in path.replace("M", "L").split("L")[
1:]]assert name_inp
name_inp.fill("value_2")
expr.fill("value * 2")
page.click("text=View Settings")
page.fill("#start", "2024-01-01 00:00:00")
page.fill("#end", "2024-01-03 00:00:00")
select_value(page, "#granularity", "1 hour")
page.evaluate("window.lastResults = undefined")
page.click("text=Dive")
page.wait_for_function("window.lastResults !== undefined")
count = page.eval_on_selector_all("#chart path", "els => els.length")
assert count == 2
def test_help_and_alignment(page: Any, server_url: str) -> None:
page.goto(server_url)
page.wait_for_selector("#order_by option", state="attached")
titles = page.evaluate(
"Array.from(document.querySelectorAll('#settings .help')).map(e => e.tit
le)"
)
assert any("start/end of the time range" in t for t in titles)
text_align = page.evaluate(
"getComputedStyle(document.querySelector('#settings label')).textAlign"
)
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="timestamp",
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="timestamp",
)
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
...
{"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);"
)
chips = page.evaluate(
"Array.from(document.querySelectorAll('#filters .filter:last-child .chip
')).map(c => c.firstChild.textContent)"
)
assert chips[-1] == "alice,bob"
def test_chip_dropdown_hides_on_outside_click(page: Any, server_url: str) -> Non
e:
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.click("#header")
page.wait_for_selector("#filters .filter:last-child .chip-dropdown", state="
hidden")
def test_chip_input_no_outline(page: Any, server_url: str) -> None:
page.goto(server_url)
page.wait_for_selector("#order_by option", state="attached")
page.click("text=Add Filter")
inp = page.query_selector("#filters .filter:last-child .f-val")
assert inp
inp.click()
outline = page.evaluate(
"getComputedStyle(document.querySelector('#filters .filter:last-child .f
-val')).outlineStyle"
)
assert outline == "none"
def test_chip_enter_keeps_focus(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("alice")
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'll modify JS to show y-axis labels and add tests to check their existence.
import duckdb
from scubaduck import server
import pytest
def test_basic_query() -> None:
app = server.app
client = app.test_client()
payload = {
"table": "events",
"start": "2024-01-01 00:00:00",
"end": "2024-01-02 00:00:00",
"order_by": "timestamp",
"order_dir": "ASC",
"limit": 10,
"columns": ["timestamp", "event", "value", "user"],
"filters": [],
}
rv = client.post(
"/api/query", data=json.dumps(payload), content_type="application/json"
)
data = rv.get_json()
assert data
rows = data["rows"]
# We expect first three rows (until 2024-01-02 00:00:00)
assert len(rows) == 3
assert rows[0][1] == "login"
assert rows[1][1] == "logout"
def test_js_served() -> None:
app = server.app
client = app.test_client()
rv = client.get("/js/chip_input.js")
assert rv.status_code == 200
assert b"initChipInput" in rv.data
def test_filter_multi_token() -> None:
app = server.app
client = app.test_client()
payload = {
"table": "events",
"start": "2024-01-01 00:00:00",
"end": "2024-01-02 03:00:00",
"order_by": "timestamp",
"limit": 10,
"columns": ["timestamp", "event", "value", "user"],
"filters": [{"column": "user", "op": "=", "value": ["alice", "charlie"]}
],
}
rv = client.post(
"/api/query", data=json.dumps(payload), content_type="application/json"
)
data = rv.get_json()
assert data
rows = data["rows"]
# Should only return rows for alice and charlie
assert len(rows) == 3
assert rows[0][3] == "alice"
assert rows[-1][3] == "charlie"
def test_empty_filter_is_noop() -> None:
app = server.app
client = app.test_client()
base_payload = {
"table": "events",
"start": "2024-01-01 00:00:00",
"end": "2024-01-03 00:00:00",
"limit": 100,
"columns": ["timestamp", "event", "value", "user"],
}
no_filter = {**base_payload, "filters": []}
empty_filter = {
**base_payload,
"filters": [{"column": "user", "op": "=", "value": None}],
}
rv1 = client.post(
"/api/query", data=json.dumps(no_filter), content_type="application/json
"
)
rv2 = client.post(
"/api/query", data=json.dumps(empty_filter), content_type="application/j
son"
)
rows1 = rv1.get_json()["rows"]
rows2 = rv2.get_json()["rows"]
assert rows1 == rows2
def test_select_columns() -> None:
app = server.app
client = app.test_client()
payload = {
"table": "events",
"start": "2024-01-01 00:00:00",
"end": "2024-01-03 00:00:00",
"order_by": "timestamp",
"limit": 10,
"columns": ["timestamp", "user"],
"filters": [],
}
rv = client.post(
"/api/query", data=json.dumps(payload), content_type="application/json"
)
data = rv.get_json()
assert data
rows = data["rows"]
assert len(rows[0]) == 2
assert rows[0][1] == "alice"
def test_string_filter_ops() -> None:
app = server.app
client = app.test_client()
base = {
"start": "2024-01-01 00:00:00",
"end": "2024-01-03 00:00:00",
"order_by": "timestamp",
"limit": 100,
"columns": ["timestamp", "event", "value", "user"],
}
contains = {
**base,
"filters": [{"column": "user", "op": "contains", "value": "ali"}],
}
rv = client.post(
"/api/query", data=json.dumps(contains), content_type="application/json"
)
rows = rv.get_json()["rows"]
assert all("ali" in r[3] for r in rows)
regex = {
**base,
"filters": [{"column": "user", "op": "~", "value": "^a.*"}],
}
rv = client.post(
"/api/query", data=json.dumps(regex), content_type="application/json"
)
rows = rv.get_json()["rows"]
assert all(r[3].startswith("a") for r in rows)
assert len(rows) == 2
not_empty = {**base, "filters": [{"column": "user", "op": "!empty"}]}
rv = client.post(
"/api/query", data=json.dumps(not_empty), content_type="application/json
"
)
assert len(rv.get_json()["rows"]) == 4
def _make_payload() -> dict[str, object]:
return {
"table": "events",
"start": "2024-01-01 00:00:00","order_by": "timestamp",
"order_dir": "ASC",
"limit": 10,
"columns": ["timestamp", "event", "value", "user"],
"filters": [],
}
def test_database_types(tmp_path: Path) -> None:
csv_file = tmp_path / "events.csv"
csv_file.write_text(Path("scubaduck/sample.csv").read_text())
sqlite_file = tmp_path / "events.sqlite"
import sqlite3
conn = sqlite3.connect(sqlite_file)
conn.execute(
"CREATE TABLE events (timestamp TEXT, event TEXT, value INTEGER, user TE
XT)"
)
with open(csv_file) as f:
next(f)
for line in f:
ts, ev, val, user = line.strip().split(",")
conn.execute(
"INSERT INTO events VALUES (?, ?, ?, ?)", (ts, ev, int(val), use
r)
)
conn.commit()
conn.close() # pyright: ignore[reportUnknownMemberType, reportAttributeAcce
ssIssue]
duckdb_file = tmp_path / "events.duckdb"
con = duckdb.connect(duckdb_file)
con.execute(
f"CREATE TABLE events AS SELECT * FROM read_csv_auto('{csv_file.as_posix
()}')"
)
con.close() # pyright: ignore[reportUnknownMemberType, reportAttributeAcces
sIssue]
for db in (csv_file, sqlite_file, duckdb_file):
app = server.create_app(db)
client = app.test_client()
payload = _make_payload()
rv = client.post(
"/api/query", data=json.dumps(payload), content_type="application/js
on"
)
rows = rv.get_json()["rows"]
assert len(rows) == 3
def test_sqlite_longvarchar(tmp_path: Path, monkeypatch: pytest.MonkeyPatch) ->
None:
sqlite_file = tmp_path / "events.sqlite"
import sqlite3
conn = sqlite3.connect(sqlite_file)
conn.execute(
"CREATE TABLE events (timestamp TEXT, url LONGVARCHAR, title VARCHAR(10)
)"
)
conn.execute(
"INSERT INTO events VALUES ('2024-01-01 00:00:00', 'https://a.com', 'Hom
e')"
)
conn.commit()
conn.close() # pyright: ignore[reportUnknownMemberType, reportAttributeAcce
ssIssue]
from typing import Any
real_connect = duckdb.connect
def failing_connect(*args: Any, **kwargs: Any) -> Any:
real = real_connect(*args, **kwargs)
class Wrapper:
def __init__(self, con: duckdb.DuckDBPyConnection) -> None:
self.con = con
self._failed = False
def execute(self, sql: str, *a: Any, **kw: Any):
if not self._failed and sql == "LOAD sqlite":
self._failed = True
raise RuntimeError("fail")
return self.con.execute(sql, *a, **kw)
def __getattr__(self, name: str) -> object:
return getattr(self.con, name)
return Wrapper(real)
monkeypatch.setattr(server.duckdb, "connect", failing_connect)
app = server.create_app(sqlite_file)
client = app.test_client()
payload = {
"table": "events",
"start": "2024-01-01 00:00:00",
"end": "2024-01-01 01:00:00",
"order_by": "timestamp",
"columns": ["timestamp", "url", "title"],
}
rv = client.post(
"/api/query", data=json.dumps(payload), content_type="application/json"
)
data = rv.get_json()
assert rv.status_code == 200
assert data["rows"][0][1] == "https://a.com"
def test_sqlite_bigint(tmp_path: Path, monkeypatch: pytest.MonkeyPatch) -> None:
sqlite_file = tmp_path / "big.sqlite"
import sqlite3
conn = sqlite3.connect(sqlite_file)
conn.execute("CREATE TABLE events (timestamp TEXT, value INTEGER)")
big_value = 13385262862605259
conn.execute(
"INSERT INTO events VALUES ('2024-01-01 00:00:00', ?)",
(big_value,),
)
conn.commit()
conn.close() # pyright: ignore[reportUnknownMemberType, reportAttributeAcce
ssIssue]
from typing import Any
real_connect = duckdb.connect
def failing_connect(*args: Any, **kwargs: Any) -> Any:
real = real_connect(*args, **kwargs)
class Wrapper:
def __init__(self, con: duckdb.DuckDBPyConnection) -> None:
self.con = con
self._failed = False
def execute(self, sql: str, *a: Any, **kw: Any):
if not self._failed and sql == "LOAD sqlite":
self._failed = True
raise RuntimeError("fail")
return self.con.execute(sql, *a, **kw)
def __getattr__(self, name: str) -> object:
return getattr(self.con, name)
return Wrapper(real)
monkeypatch.setattr(server.duckdb, "connect", failing_connect)
app = server.create_app(sqlite_file)
client = app.test_client()
payload = {
"table": "events",
"order_by": "timestamp",
"columns": ["timestamp", "value"],
}
rv = client.post(
"/api/query", data=json.dumps(payload), content_type="application/json"
)
data = rv.get_json()
assert rv.status_code == 200
assert data["rows"][0][1] == big_value
def test_envvar_db(monkeypatch: pytest.MonkeyPatch, tmp_path: Path) -> None:
csv_file = tmp_path / "custom.csv"
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I’ll glance at the README to get context for the y-axis label change.
I really like Scuba (Meta's internal real-time database system). The distributed
, real-time database part of Scuba is quite difficult (and expensive) to replica
te, but I also really like Scuba's UI for doing queries, and I have found myself
wishing that I have access to it even for "small" databases, e.g., I have a sql
ite dataset I want to explore.
Pivotal ideas:
* Time series by default. In the dedicated "time series" view, there are many fe
atures specifically oriented towards working towards tables that represent event
s that occurred over time: the start, end, compare, aggregate and granularity fi
elds all specially privilege the timestamp field. In fact, you can't log events
to Scuba's backing data store without a timestamp, they always come with one. (S
cuba also supports other views that don't presuppose a time series, but the time
series is the most beloved and well used view.) This is in contrast to typical
software which tries to generalize to arbitrary data first, with time series bei
ng added on later.
* It's all about exploration. Scuba is predicated on the idea that you don't kno
w what you're looking for, that you are going to spend time tweaking queries and
changing filters/grouping as part of an investigation to figure out why a syste
m behaves the way it is. So the filters/comparisons/groupings you want to edit a
re always visible on the left sidebar, with the expectation that you're going to
tweak the query to look at something else. Similarly, all the parameters of you
r query get saved into your URL, so your browser history can double up as a quer
y history / you can easily share a query with someone else. This is contrast to
typical software which is often oriented to making pretty dashboards and reports
. (This function is important too, but it's not what I want in exploration mode!
)
* You can fix data problems in the query editor. It's pretty common to have mess
ed up and ended up with a database that doesn't have exactly the columns you nee
d, or some columns that are corrupted in some way. Scuba has pretty robust suppo
rt for defining custom columns with arbitrary SQL functions, grouping over them
as if they were native functions, and doing so with minimal runtime cost (Scuba
aims to turn around your query in milliseconds!) Having to go and run a huge dat
a pipeline to fix your data is a big impediment to exploration; quick and easy c
ustom columns means you can patch over problems when you're investigating and fi
x them for real later.
We're going to build a exploratory data analysis tool like Scuba for time series
database (i.e., a database with a mandatory timestamp representing the time an
event occurred). We'll use DuckDB as the underlying SQL engine served from a Py
thon server, and render the GUI/results as a webpage with vanilla HTML and JS. W
e'll use choices.js to support token inputs. We define a token input to mean a
text input element where as you type a dropdown displays with valid values, and
if you select one or press enter, the selection turns into a token/chip that can
only be deleted as one unit.
To start, we are going to support one views: samples. The samples view only all
ows you to view individual samples from the database, subject to a filter. Our m
ain UI concept is that there is a left sidebar that is the query editor, and the
right side that shows the view. The sidebar is always visible and defaults to
the query parameters of the current view. After you make changes to the query,
clicking the "Dive" button updates the view. The URL of the page encodes all of
the values of the query (and gets updated when you Dive), so the browser's back
button lets you view previous queries.
The query editor's job is to generate a SQL query, which then is applied on the
database, and then the result visualized according to the view.
Here are the settings you can apply to the query. The help text should show up w
hen you mouse over the field name:
* Start/End - Help text: "Sets the start/end of the time range to query. Can be
any kind of datetime string. For example: 'April 23, 2014' or 'yesterday'." The
UI for this selector supports both relative selections (now, -1 hour, -3 hours,
-12 hours, -1 day, -3 days, -1 week, -1 fortnight, -30 days, -90 days) as well a
s specifying an absolute date. The way this field is rendered is there is a fre
e form text box, a drop down arrow (for the relative selectors), and then a cale
ndar button (for date selection).
* Order By - Help text: "Choose a column to sort results by." There is an ASC/D
ESC toggle next to it.
* Limit - Help text: "Choose the maximum number of results 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."
* Filters - You can create as many filters as you want. You can either write a f
ilter using a UI or manual SQL. In the UI, filter consists of a column name, a r
elation (e.g., =, !=, <, >) and then a text field. The text field is a token inp
ut. It accepts multiple tokens for = relation, in which case we match using an O
R for all options.
There is also a "Columns" tab which lets you view all fields in the table, organ
ized by their type. You can also define derived columns, by specifying a column
name and SQL expression. Derived columns can be used for all parts of the UI, in
cluding filters/group by/etc. Columns have checkboxes indicating if we should SE
LECT them or not. Each selected column shows up in the graph. There is an All/N
one link which can be used to select/deselect all checkboxes.
The query UI constructs a SQL query that intuitively has this form:
```
SELECT column, column, ...,
FROM table
WHERE time >= min-timestamp
AND time <= max-timestamp
[AND condition ...]
ORDER BY aggregate(column)
LIMIT number
```
You should write tests for the server backend, demonstrating that at specific qu
ery values we get back the correct rows of data.
## Running the server
Activate the virtual environment and run the Flask development server:
```bash
flask --app scubaduck.server run --debug
```
By default the server loads `sample.csv`. Set the `SCUBADUCK_DB` environment
variable to point at a different database file (CSV, SQLite or DuckDB) if you
want to use another dataset. If the file does not exist, the server will raise
a `FileNotFoundError` during startup.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'll check out timeseries_chart.js for functions like crosshair and see if the CSS has axis styles.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# ls scubaduck/static
index.html js
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'll check index.html to see if it includes the CSS or if there's a style file.
...
<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>Avg</option>
<option>Count</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>
<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>
const allColumns = [];
const baseColumns = [];
const columnTypes = {};
const stringColumns = [];
const baseStringColumns = [];
const integerColumns = [];
const baseIntegerColumns = [];
const timeColumns = [];
const baseTimeColumns = [];
const derivedColumns = [];
let selectedColumns = [];
let displayType = 'samples';
let groupBy = {chips: [], addChip: () => {}, renderChips: () => {}};
function initDropdown(select) {
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';
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();
}
});
...
});
row.forEach((v, i) => {
const col = selectedColumns[i];
const td = document.createElement('td');
if (isTimeColumn(col)) {
const d = new Date(v);
td.textContent = d.toLocaleString('en-US', {
weekday: 'short',
month: 'short',
day: 'numeric',
year: 'numeric',
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
hour12: true,
timeZoneName: 'short'
});
} else {
if (col === 'Hits') {
const pct = totalHits ? ((v / totalHits) * 100).toFixed(1) : '0';
td.textContent = `${formatNumber(v)} (${pct}%)`;
} else {
td.textContent = isStringColumn(col) ? v : formatNumber(v);
}
}
td.style.textAlign = isStringColumn(col) ? 'left' : 'right';
tr.appendChild(td);
});
table.appendChild(tr);
});
// ensure table does not overflow unless necessary
const view = document.getElementById('view');
if (table.scrollWidth <= view.clientWidth) {
table.style.width = '100%';
}
}
function handleSort(e) {
const idx = parseInt(e.target.dataset.index, 10);
if (sortState.index !== idx) {
sortState.index = idx;
sortState.dir = 'asc';
} else if (sortState.dir === 'asc') {
sortState.dir = 'desc';
} else if (sortState.dir === 'desc') {
sortState.index = null;
sortState.dir = null;
} else {
sortState.dir = 'asc';
}
let rows = originalRows.slice();
if (sortState.index !== null) {
rows.sort((a, b) => {
const va = a[sortState.index];
const vb = b[sortState.index];
if (va === vb) return 0;
if (sortState.dir === 'desc') return va < vb ? 1 : -1;
return va > vb ? 1 : -1;
});
}
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 ${lastQueryTime} 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 = '';
}
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>
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I’ll check for 'tick-label' to see the CSS for rotated ticks and style adjustments.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# grep -n "tick-label" -r scub
aduck | head
scubaduck/static/js/timeseries_chart.js:359: text.setAttribute('class', 'ti
ck-label' + (rotate ? ' rotated' : ''));
scubaduck/static/index.html:166: #chart text.tick-label {
scubaduck/static/index.html:170: #chart text.tick-label.rotated {(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# sed -n '150,180p' scubaduck/
static/index.html
font-weight: normal;
}
.legend-item {
display: flex;
justify-content: space-between;
padding-left: 8px;
}
.legend-value {
margin-left: 4px;
}
#chart-wrapper {
flex: 1;
}
.legend-item.highlight {
background: #ddd;
}
#chart text.tick-label {
font-size: 10px;
user-select: none;
}
#chart text.tick-label.rotated {
text-anchor: end;
}
/* 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">
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#The index.html includes the CSS; I’ll check for the crosshair styles next.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# grep -n "crosshair" -n scuba
duck/static/index.html
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#It seems the crosshair style isn't defined. I'll need to review style settings.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# grep -n "legend" -n scubaduc
k/static/index.html | head
140: #legend {
146: .legend-group {
149: .legend-header {
152: .legend-item {
157: .legend-value {
163: .legend-item.highlight {(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# sed -n '140,170p' scubaduck/
static/index.html
#legend {
width: 150px;
flex: 0 0 150px;
margin-right: 10px;
overflow-y: auto;
}
.legend-group {
margin-bottom: 4px;
}
.legend-header {
font-weight: normal;
}
.legend-item {
display: flex;
justify-content: space-between;
padding-left: 8px;
}
.legend-value {
margin-left: 4px;
}
#chart-wrapper {
flex: 1;
}
.legend-item.highlight {
background: #ddd;
}
#chart text.tick-label {
font-size: 10px;
user-select: none;
}
#chart text.tick-label.rotated {
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I need to explore timeseries_chart.js around line 324 to check how crosshair is appended.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# grep -n "crosshairLine" -n s
cubaduck/static/js/timeseries_chart.js
23: const crosshairLine = document.createElementNS('http://www.w3.org/2000/svg'
, 'line');
24: crosshairLine.id = 'crosshair_line';
25: crosshairLine.setAttribute('stroke', '#555');
26: crosshairLine.style.display = 'none';
111: crosshairLine,
331: svg.appendChild(crosshairLine);
370: crosshairLine.style.display = 'none';
400: crosshairLine.setAttribute('x1', xPix);
401: crosshairLine.setAttribute('x2', xPix);
402: crosshairLine.setAttribute('y1', currentChart.yScale(currentChart.maxY))
;
403: crosshairLine.setAttribute('y2', currentChart.yScale(currentChart.minY))
;
404: crosshairLine.style.display = 'block';
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I’m opening lines 314-335 to better understand when crosshairLine is appended after drawing series lines.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# sed -n '300,340p' scubaduck/
static/js/timeseries_chart.js
gEl.appendChild(items);
legend.appendChild(gEl);
group = {items};
groups[groupKey] = group;
}
const item = document.createElement('div');
item.className = 'legend-item';
const label = document.createElement('span');
label.textContent = name;
label.style.color = color;
const valueSpan = document.createElement('span');
valueSpan.className = 'legend-value';
item.appendChild(label);
item.appendChild(valueSpan);
group.items.appendChild(item);
function highlight(on) {
el.setAttribute('stroke-width', on ? '3' : '1');
item.classList.toggle('highlight', on);
}
el.addEventListener('mouseenter', () => highlight(true));
el.addEventListener('mouseleave', () => highlight(false));
item.addEventListener('mouseenter', () => highlight(true));
item.addEventListener('mouseleave', () => highlight(false));
seriesEls[key] = { path: el, item, highlight, color, valueEl: valueSpan };
});
currentChart.seriesEls = seriesEls;
currentChart.xScale = xScale;
currentChart.yScale = yScale;
currentChart.bucketPixels = buckets.map(xScale);
svg.appendChild(crosshairLine);
svg.appendChild(crosshairDots);
const intv = chooseInterval(minX, maxX);
const ticks = generateTicks(minX, maxX, intv);
const lu = labelUnit(intv);
const rotate = ticks.length > 0 && (width - 60) / ticks.length < 60;
const axis = document.createElementNS('http://www.w3.org/2000/svg', 'g');
const axisLine = document.createElementNS('http://www.w3.org/2000/svg', 'lin
e');
axisLine.setAttribute('x1', xScale(minX));(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# grep -n "formatNumber" -n sc
ubaduck/static/js/timeseries_chart.js
416: currentChart.seriesEls[key].valueEl.textContent = formatNumber(v);(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# grep -n "formatNumber" -r sc
ubaduck/static/js
scubaduck/static/js/timeseries_chart.js:416: currentChart.seriesEls[key].va
lueEl.textContent = formatNumber(v);
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'll search through all the JS files to find where formatNumber is defined.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# grep -n "function formatNumb
er" -r scubaduck/static/js
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'll search the repo for functions like isTimeColumn, which might be defined earlier.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# grep -n "formatNumber" -r sc
ubaduck | head
scubaduck/static/js/timeseries_chart.js:416: currentChart.seriesEls[key].va
lueEl.textContent = formatNumber(v);
scubaduck/static/index.html:716:function formatNumber(val) {
scubaduck/static/index.html:1143: td.textContent = `${formatNumber(v)}
(${pct}%)`;
scubaduck/static/index.html:1145: td.textContent = isStringColumn(col)
? v : formatNumber(v);(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# sed -n '700,730p' scubaduck/
static/index.html
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');
}
function isTimeColumn(name) {
const t = (columnTypes[name] || '').toUpperCase();
return t.includes('TIMESTAMP');
}
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;static/index.html
return (val / u.n).toFixed(2) + ' ' + u.s;
}
}
}
if (abs < 0.0005) return '0.000';
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() {
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I’ll focus on the render() function in the time series chart to add Y-axis ticks and labels. I'll find the spot in the code and check CSS for the crosshair, then update tests to verify the Y-axis ticks show up.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# grep -n "tick-label" -n test
s/test_web.py
1103: page.wait_for_selector("#chart text.tick-label", state="attached")
1104: count = page.eval_on_selector_all("#chart text.tick-label", "els => els
.length")
1118: page.wait_for_selector("#chart text.tick-label", state="attached")
1120: "#chart text.tick-label", "els => els.map(e => e.textContent)"def test_timeseries_no_overflow(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.evaluate("window.lastResults = undefined")
page.click("text=Dive")
page.wait_for_function("window.lastResults !== undefined")
overflow = page.evaluate(
"var v=document.getElementById('view'); v.scrollWidth > v.clientWidth"
)
assert not overflow
def test_timeseries_axis_ticks(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.evaluate("window.lastResults = undefined")
page.click("text=Dive")
page.wait_for_function("window.lastResults !== undefined")
page.wait_for_selector("#chart text.tick-label", state="attached")
count = page.eval_on_selector_all("#chart text.tick-label", "els => els.leng
th")
assert count > 2
def test_timeseries_interval_offset(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.fill("#start", "2024-01-01 00:00:00")
page.fill("#end", "2024-01-03 12:00:00")
select_value(page, "#granularity", "1 hour")
page.evaluate("window.lastResults = undefined")
page.click("text=Dive")
page.wait_for_function("window.lastResults !== undefined")
page.wait_for_selector("#chart text.tick-label", state="attached")
labels = page.eval_on_selector_all(
"#chart text.tick-label", "els => els.map(e => e.textContent)"
)
assert labels
assert all(lbl != "00:00" for lbl in labels)
times = [lbl for lbl in labels if ":" in lbl]
assert times
for t in times:
h = int(t.split(":")[0])
assert h % 4 == 0
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'll look into expanding tick tests for the Y-axis and check the crosshair as well.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# grep -n "timeseries_hover" -
n tests/test_web.py
256:def test_timeseries_hover_highlight(page: Any, server_url: str) -> None:
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'll add y-axis labels and grid lines, then write a test to verify vertical axis lines.
I'll add grid lines before series, create gridGroup, and adjust order in rendering.
I'll use the algorithm to compute ticks, then implement grid lines behind the chart.
I'll reuse the 'tick-label' class for the y-axis and check CSS for grid lines.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# grep -n "#chart line" -n scu
baduck/static/index.html | head
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'll check the HTML from lines 160 to 230 to examine any relevant styles.
static/index.html
tr:hover:not(.selected) td { background: #eee; }
#column_actions {
text-align: right;
margin-bottom: 5px;
}
#column_actions a {
margin-left: 5px;
}
.col-group-header {
overflow: hidden;
}
.col-group-header .links {
float: right;
}
.col-group-header .links a {
margin-left: 5px;
}
#ts-container {
display: flex;
}
#legend {
width: 150px;
flex: 0 0 150px;
margin-right: 10px;
overflow-y: auto;
}
.legend-group {
margin-bottom: 4px;
}
.legend-header {
font-weight: normal;
}
.legend-item {
display: flex;
justify-content: space-between;
padding-left: 8px;
}
.legend-value {
margin-left: 4px;
}
#chart-wrapper {
flex: 1;
}
.legend-item.highlight {
background: #ddd;
}
#chart text.tick-label {
font-size: 10px;
user-select: none;
}
#chart text.tick-label.rotated {
text-anchor: end;
}
/* 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 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>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>
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'll add styles for grid lines and crosshair in index.html. Next, I'll check test files.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# grep -n "timeseries_y" -n te
sts/test_web.py
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I need to explore more of test_web.py to check tests after line 1120.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# tail -n 20 tests/test_web.py
def test_timeseries_legend_values(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.evaluate("g => { groupBy.chips = g; groupBy.renderChips(); }", ["user"]
)
select_value(page, "#aggregate", "Avg")
page.evaluate("window.lastResults = undefined")
page.click("text=Dive")
page.wait_for_function("window.lastResults !== undefined")
headers = page.evaluate(
"() => Array.from(document.querySelectorAll('#legend .legend-header')).m
ap(e => e.textContent)"
)
assert any(h.startswith("alice") for h in headers)
page.wait_for_selector("#chart path", state="attached")
page.eval_on_selector(
"#chart",
"el => { const r=el.getBoundingClientRect(); el.dispatchEvent(new MouseE
vent('mousemove', {clientX:r.left+r.width/2, clientY:r.top+r.height/2, bubbles:t
rue})); }",
)
value = page.evaluate("document.querySelector('#legend .legend-value').textC
ontent")
assert value != ""
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I’ll add a test for y-axis labels, modify JS for grid lines, and adjust HTML styles.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# sed -n '150,420p' scubaduck/
static/js/timeseries_chart.js
];
function chooseInterval(start, end) {
const span = end - start;
function approxMs(i) {
if (i.ms) return i.ms;
if (i.unit === 'month') return i.step * 2629800000;
if (i.unit === 'year') return i.step * 31557600000;
return 1000;
}
let best = intervals[0];
let bestScore = Infinity;
intervals.forEach(i => {
const count = span / approxMs(i);
const score = Math.abs(count - 15);
if (score < bestScore) {
best = i;
bestScore = score;
}
});
return best;
}
function generateTicks(start, end, intv) {
const ticks = [];
if (intv.unit === 'month' || intv.unit === 'year') {
let d = new Date(start);
d.setUTCDate(1);
if (intv.unit === 'year') d.setUTCMonth(0);
let unitVal =
intv.unit === 'month'
? d.getUTCFullYear() * 12 + d.getUTCMonth()
: d.getUTCFullYear();
unitVal = Math.ceil(unitVal / intv.step) * intv.step;
while (true) {
const year =
intv.unit === 'month' ? Math.floor(unitVal / 12) : unitVal;
const month = intv.unit === 'month' ? unitVal % 12 : 0;
const t = Date.UTC(year, month, 1);
if (t > end) break;
if (t >= start) ticks.push(t);
unitVal += intv.step;
}
} else {
const step = intv.ms * intv.step;
let t = Math.ceil(start / step) * step;
if (intv.unit === 'week') {
const d = new Date(t);
const adj = (d.getUTCDay() + 6) % 7;
t = d.getTime() - adj * 86400000;
t = Math.ceil(t / step) * step;
}
if (t === start) t += step;
for (; t <= end; t += step) ticks.push(t);
}
return ticks;
}
function labelUnit(intv) {
if (intv.unit === 'year') return 'year';
if (intv.unit === 'month') return 'month';
if (intv.unit === 'day' || intv.unit === 'week') return 'day';
if (intv.unit === 'hour') return 'hour';
return 'minute';
}
function fmt(date, unit) {
const pad = n => String(n).padStart(2, '0');
const mon = date.toLocaleString('en-US', {month: 'short'});
switch (unit) {
case 'year':
return String(date.getFullYear());
case 'month':
if (date.getMonth() === 0) return String(date.getFullYear());
return `${mon} ${date.getFullYear()}`;
case 'day':
if (date.getDate() === 1) return `${mon} ${date.getFullYear()}`;
return `${date.getDate()} ${mon}`;
case 'hour':
if (date.getHours() === 0 && date.getMinutes() === 0)
return `${date.getDate()} ${mon}`;
return `${pad(date.getHours())}:${pad(date.getMinutes())}`;
default:
if (date.getMinutes() === 0 && date.getSeconds() === 0)
return `${pad(date.getHours())}:${pad(date.getMinutes())}`;
return `${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
}
}
function render() {
const style = getComputedStyle(svg.parentElement);
const width =
svg.parentElement.clientWidth -
parseFloat(style.paddingLeft) -
parseFloat(style.paddingRight);
svg.setAttribute('width', width);
svg.innerHTML = '';
legend.innerHTML = '';
let colorIndex = 0;
const xRange = maxX - minX || 1;
const yRange = maxY - minY || 1;
const xScale = x => ((x - minX) / xRange) * (width - 60) + 50;
const yScale = y => height - 30 - ((y - minY) / yRange) * (height - 60);
const seriesEls = {};
const agg = document.getElementById('aggregate').value.toLowerCase();
const groups = {};
Object.keys(series).forEach(key => {
const vals = series[key];
const color = colors[colorIndex++ % colors.length];
let path = '';
let drawing = false;
buckets.forEach(b => {
const v = vals[b];
if (v === undefined) {
if (fill === '0') {
const x = xScale(b);
const y = yScale(0);
path += (drawing ? 'L' : 'M') + x + ' ' + y + ' ';
drawing = true;
} else if (fill === 'blank') {
drawing = false;
}
...
group = {items};
groups[groupKey] = group;
}
const item = document.createElement('div');
item.className = 'legend-item';
const label = document.createElement('span');
label.textContent = name;
label.style.color = color;
const valueSpan = document.createElement('span');
valueSpan.className = 'legend-value';
item.appendChild(label);
item.appendChild(valueSpan);
group.items.appendChild(item);
function highlight(on) {
el.setAttribute('stroke-width', on ? '3' : '1');
item.classList.toggle('highlight', on);
}
el.addEventListener('mouseenter', () => highlight(true));
el.addEventListener('mouseleave', () => highlight(false));
item.addEventListener('mouseenter', () => highlight(true));
item.addEventListener('mouseleave', () => highlight(false));
seriesEls[key] = { path: el, item, highlight, color, valueEl: valueSpan };
});
currentChart.seriesEls = seriesEls;
currentChart.xScale = xScale;
currentChart.yScale = yScale;
currentChart.bucketPixels = buckets.map(xScale);
svg.appendChild(crosshairLine);
svg.appendChild(crosshairDots);
const intv = chooseInterval(minX, maxX);
const ticks = generateTicks(minX, maxX, intv);
const lu = labelUnit(intv);
const rotate = ticks.length > 0 && (width - 60) / ticks.length < 60;
const axis = document.createElementNS('http://www.w3.org/2000/svg', 'g');
const axisLine = document.createElementNS('http://www.w3.org/2000/svg', 'lin
e');
axisLine.setAttribute('x1', xScale(minX));
axisLine.setAttribute('x2', xScale(maxX));
axisLine.setAttribute('y1', height - 30);
axisLine.setAttribute('y2', height - 30);
axisLine.setAttribute('stroke', '#000');
axis.appendChild(axisLine);
ticks.forEach(t => {
const x = xScale(t);
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'
);
line.setAttribute('x1', x);
line.setAttribute('y1', height - 30);
line.setAttribute('x2', x);
line.setAttribute('y2', height - 25);
line.setAttribute('stroke', '#000');
axis.appendChild(line);
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'
);
text.setAttribute('x', x);
text.setAttribute('y', height - 10);
text.setAttribute('text-anchor', 'middle');
text.setAttribute('class', 'tick-label' + (rotate ? ' rotated' : ''));
if (rotate) text.setAttribute('transform', `rotate(-45 ${x} ${height - 10}
)`);
text.textContent = fmt(new Date(t), lu);
axis.appendChild(text);
});
svg.appendChild(axis);
}
render();
function hideCrosshair() {
crosshairLine.style.display = 'none';
crosshairDots.style.display = 'none';
crosshairDots.innerHTML = '';
Object.values(currentChart.seriesEls).forEach(el => {
el.valueEl.textContent = '';
});
if (currentChart.selected) {
currentChart.seriesEls[currentChart.selected].highlight(false);
currentChart.selected = null;
}
}
svg.addEventListener('mouseleave', hideCrosshair);
svg.addEventListener('mousemove', e => {
const rect = svg.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const pixels = currentChart.bucketPixels;
if (!pixels.length) return;
let idx = 0;
let dist = Math.abs(pixels[0] - x);
for (let i = 1; i < pixels.length; i++) {
const d = Math.abs(pixels[i] - x);
if (d < dist) {
dist = d;
idx = i;
}
}
const bucket = currentChart.buckets[idx];
const xPix = pixels[idx];
crosshairLine.setAttribute('x1', xPix);
crosshairLine.setAttribute('x2', xPix);
crosshairLine.setAttribute('y1', currentChart.yScale(currentChart.maxY));
crosshairLine.setAttribute('y2', currentChart.yScale(currentChart.minY));
crosshairLine.style.display = 'block';
crosshairDots.style.display = 'block';
crosshairDots.innerHTML = '';
const options = [];
Object.keys(currentChart.series).forEach(key => {
const vals = currentChart.series[key];
let v = vals[bucket];
if (v === undefined && currentChart.fill !== '0') {
currentChart.seriesEls[key].valueEl.textContent = '';
return;
}
if (v === undefined) v = 0;
currentChart.seriesEls[key].valueEl.textContent = formatNumber(v);
const yPix = currentChart.yScale(v);
const dot = document.createElementNS('http://www.w3.org/2000/svg', 'circle
');
dot.setAttribute('cx', xPix);
dot.setAttribute('cy', yPix);
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I’ll add the new niceNum and niceTicks functions near chooseInterval in showTimeSeries.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# head -n 30 scubaduck/static/
js/timeseries_chart.js
let resizeObserver = null;
let currentChart = null;
function showTimeSeries(data) {
function parseTs(s) {
if (s.match(/GMT/) || s.endsWith('Z') || /\+\d{2}:?\d{2}$/.test(s)) {
return new Date(s).getTime();
}
return new Date(s + 'Z').getTime();
}
const view = document.getElementById('view');
if (data.rows.length === 0) {
view.innerHTML = '<p id="empty-message">Empty data provided to table</p>';
return;
}
const height = 400;
view.innerHTML =
'<div id="ts-container"><div id="legend"></div><div id="chart-wrapper"><svg
id="chart" height="' +
height +
'"></svg></div></div>';
const svg = document.getElementById('chart');
const legend = document.getElementById('legend');
const crosshairLine = document.createElementNS('http://www.w3.org/2000/svg', '
line');
crosshairLine.id = 'crosshair_line';
crosshairLine.setAttribute('stroke', '#555');
crosshairLine.style.display = 'none';
const crosshairDots = document.createElementNS('http://www.w3.org/2000/svg', '
g');
crosshairDots.id = 'crosshair_dots';
crosshairDots.style.display = 'none';
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'll add new functions inside showTimeSeries, after the fmt function, then modify render().
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# grep -n "grid-line" -r scuba
duck
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'll insert grid-line styling in index.html, near the tick label settings.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# sed -n '160,190p' scubaduck/
static/index.html
#chart-wrapper {
flex: 1;
}
.legend-item.highlight {
background: #ddd;
}
#chart text.tick-label {
font-size: 10px;
user-select: none;
}
#chart text.tick-label.rotated {
text-anchor: end;
}
/* 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 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>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>
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'm going to add grid-line styling, then patch timeseries_chart.js for implementation.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# apply_patch<<'PATCH'
> *** Begin Patch
> *** Update File: scubaduck/static/js/timeseries_chart.js
> @@
> function fmt(date, unit) {
> @@
> }
> }
> +
> + function niceNum(range, round) {
> + const exponent = Math.floor(Math.log10(range));
> + const fraction = range / Math.pow(10, exponent);
> + let niceFraction;
> + if (round) {
> + if (fraction < 1.5) niceFraction = 1;
> + else if (fraction < 3) niceFraction = 2;
> + else if (fraction < 7) niceFraction = 5;
> + else niceFraction = 10;
> + } else {
> + if (fraction <= 1) niceFraction = 1;
> + else if (fraction <= 2) niceFraction = 2;
> + else if (fraction <= 5) niceFraction = 5;
> + else niceFraction = 10;
> + }
> + return niceFraction * Math.pow(10, exponent);
> + }
> +
> + function niceTicks(min, max, count) {
> + const range = niceNum(max - min || 1, false);
> + const step = niceNum(range / Math.max(count - 1, 1), true);
> + const start = Math.floor(min / step) * step;
> + const end = Math.ceil(max / step) * step;
> + const ticks = [];
> + for (let v = start; v <= end; v += step) ticks.push(v);
> + return ticks;
> + }
> *** End Patch
> PATCH
Success. Updated the following files:
M scubaduck/static/js/timeseries_chart.js
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'll modify the render function to calculate yTicks properly.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# grep -n "render()" -n scubad
uck/static/js/timeseries_chart.js
267: function render() {
395: render();(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# sed -n '267,372p' scubaduck/
static/js/timeseries_chart.js
function render() {
const style = getComputedStyle(svg.parentElement);
const width =
svg.parentElement.clientWidth -
parseFloat(style.paddingLeft) -
parseFloat(style.paddingRight);
svg.setAttribute('width', width);
svg.innerHTML = '';
legend.innerHTML = '';
let colorIndex = 0;
const xRange = maxX - minX || 1;
const yRange = maxY - minY || 1;
const xScale = x => ((x - minX) / xRange) * (width - 60) + 50;
const yScale = y => height - 30 - ((y - minY) / yRange) * (height - 60);
const seriesEls = {};
const agg = document.getElementById('aggregate').value.toLowerCase();
const groups = {};
Object.keys(series).forEach(key => {
const vals = series[key];
const color = colors[colorIndex++ % colors.length];
let path = '';
let drawing = false;
buckets.forEach(b => {
const v = vals[b];
if (v === undefined) {
if (fill === '0') {
const x = xScale(b);
const y = yScale(0);
path += (drawing ? 'L' : 'M') + x + ' ' + y + ' ';
drawing = true;
} else if (fill === 'blank') {
drawing = false;
}
// connect: do nothing
} else {
const x = xScale(b);
const y = yScale(v);
path += (drawing ? 'L' : 'M') + x + ' ' + y + ' ';
drawing = true;
}
});
const el = document.createElementNS('http://www.w3.org/2000/svg', 'path');
el.setAttribute('d', path.trim());
el.setAttribute('fill', 'none');
el.setAttribute('stroke', color);
el.setAttribute('stroke-width', '1');
svg.appendChild(el);
const idx = key.lastIndexOf(':');
const groupKey = idx === -1 ? 'all' : key.slice(0, idx);
const name = idx === -1 ? key : key.slice(idx + 1);
let group = groups[groupKey];
if (!group) {
const gEl = document.createElement('div');
gEl.className = 'legend-group';
const header = document.createElement('div');
header.className = 'legend-header';
header.textContent =
groupKey === 'all' ? agg : `${groupKey} ${agg}`;
gEl.appendChild(header);
const items = document.createElement('div');
items.className = 'legend-items';
gEl.appendChild(items);
legend.appendChild(gEl);
group = {items};
groups[groupKey] = group;
}
const item = document.createElement('div');
item.className = 'legend-item';
const label = document.createElement('span');
label.textContent = name;
label.style.color = color;
const valueSpan = document.createElement('span');
valueSpan.className = 'legend-value';
item.appendChild(label);
item.appendChild(valueSpan);
group.items.appendChild(item);
function highlight(on) {
el.setAttribute('stroke-width', on ? '3' : '1');
item.classList.toggle('highlight', on);
}
el.addEventListener('mouseenter', () => highlight(true));
el.addEventListener('mouseleave', () => highlight(false));
item.addEventListener('mouseenter', () => highlight(true));
item.addEventListener('mouseleave', () => highlight(false));
seriesEls[key] = { path: el, item, highlight, color, valueEl: valueSpan };
});
currentChart.seriesEls = seriesEls;
currentChart.xScale = xScale;
currentChart.yScale = yScale;
currentChart.bucketPixels = buckets.map(xScale);
svg.appendChild(crosshairLine);
svg.appendChild(crosshairDots);
const intv = chooseInterval(minX, maxX);
const ticks = generateTicks(minX, maxX, intv);
const lu = labelUnit(intv);
const rotate = ticks.length > 0 && (width - 60) / ticks.length < 60;
const axis = document.createElementNS('http://www.w3.org/2000/svg', 'g');
const axisLine = document.createElementNS('http://www.w3.org/2000/svg', 'lin
e');
axisLine.setAttribute('x1', xScale(minX));
axisLine.setAttribute('x2', xScale(maxX));
axisLine.setAttribute('y1', height - 30);
axisLine.setAttribute('y2', height - 30);
axisLine.setAttribute('stroke', '#000');
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'm continuing to scroll through the content to grab more information.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# sed -n '372,442p' scubaduck/
static/js/timeseries_chart.js
axisLine.setAttribute('stroke', '#000');
axis.appendChild(axisLine);
ticks.forEach(t => {
const x = xScale(t);
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'
);
line.setAttribute('x1', x);
line.setAttribute('y1', height - 30);
line.setAttribute('x2', x);
line.setAttribute('y2', height - 25);
line.setAttribute('stroke', '#000');
axis.appendChild(line);
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'
);
text.setAttribute('x', x);
text.setAttribute('y', height - 10);
text.setAttribute('text-anchor', 'middle');
text.setAttribute('class', 'tick-label' + (rotate ? ' rotated' : ''));
if (rotate) text.setAttribute('transform', `rotate(-45 ${x} ${height - 10}
)`);
text.textContent = fmt(new Date(t), lu);
axis.appendChild(text);
});
svg.appendChild(axis);
}
render();
function hideCrosshair() {
crosshairLine.style.display = 'none';
crosshairDots.style.display = 'none';
crosshairDots.innerHTML = '';
Object.values(currentChart.seriesEls).forEach(el => {
el.valueEl.textContent = '';
});
if (currentChart.selected) {
currentChart.seriesEls[currentChart.selected].highlight(false);
currentChart.selected = null;
}
}
svg.addEventListener('mouseleave', hideCrosshair);
svg.addEventListener('mousemove', e => {
const rect = svg.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const pixels = currentChart.bucketPixels;
if (!pixels.length) return;
let idx = 0;
let dist = Math.abs(pixels[0] - x);
for (let i = 1; i < pixels.length; i++) {
const d = Math.abs(pixels[i] - x);
if (d < dist) {
dist = d;
idx = i;
}
}
const bucket = currentChart.buckets[idx];
const xPix = pixels[idx];
crosshairLine.setAttribute('x1', xPix);
crosshairLine.setAttribute('x2', xPix);
crosshairLine.setAttribute('y1', currentChart.yScale(currentChart.maxY));
crosshairLine.setAttribute('y2', currentChart.yScale(currentChart.minY));
crosshairLine.style.display = 'block';
crosshairDots.style.display = 'block';
crosshairDots.innerHTML = '';
const options = [];
Object.keys(currentChart.series).forEach(key => {
const vals = currentChart.series[key];
let v = vals[bucket];
if (v === undefined && currentChart.fill !== '0') {
currentChart.seriesEls[key].valueEl.textContent = '';
return;
}
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'll adjust the render function, and calculate yTicks after xScale and yScale. Let's patch.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# apply_patch<<'PATCH'
> *** Begin Patch
> *** Update File: scubaduck/static/js/timeseries_chart.js
> @@
> function render() {
> @@
> - svg.setAttribute('width', width);
> - svg.innerHTML = '';
> - legend.innerHTML = '';
> + svg.setAttribute('width', width);
> + svg.innerHTML = '';
> + legend.innerHTML = '';
> *** End Patch
> PATCH
Success. Updated the following files:
M scubaduck/static/js/timeseries_chart.js
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I’ll add a grid group and other necessary updates soon.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# grep -n "svg.appendChild(axi
s);" -n scubaduck/static/js/timeseries_chart.js
392: svg.appendChild(axis);(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# sed -n '300,392p' scubaduck/
static/js/timeseries_chart.js
// connect: do nothing
} else {
const x = xScale(b);
const y = yScale(v);
path += (drawing ? 'L' : 'M') + x + ' ' + y + ' ';
drawing = true;
}
});
const el = document.createElementNS('http://www.w3.org/2000/svg', 'path');
el.setAttribute('d', path.trim());
el.setAttribute('fill', 'none');
el.setAttribute('stroke', color);
el.setAttribute('stroke-width', '1');
svg.appendChild(el);
const idx = key.lastIndexOf(':');
const groupKey = idx === -1 ? 'all' : key.slice(0, idx);
const name = idx === -1 ? key : key.slice(idx + 1);
let group = groups[groupKey];
if (!group) {
const gEl = document.createElement('div');
gEl.className = 'legend-group';
const header = document.createElement('div');
header.className = 'legend-header';
header.textContent =
groupKey === 'all' ? agg : `${groupKey} ${agg}`;
gEl.appendChild(header);
const items = document.createElement('div');
items.className = 'legend-items';
gEl.appendChild(items);
legend.appendChild(gEl);
group = {items};
groups[groupKey] = group;
}
const item = document.createElement('div');
item.className = 'legend-item';
const label = document.createElement('span');
label.textContent = name;
label.style.color = color;
const valueSpan = document.createElement('span');
valueSpan.className = 'legend-value';
item.appendChild(label);
item.appendChild(valueSpan);
group.items.appendChild(item);
function highlight(on) {
el.setAttribute('stroke-width', on ? '3' : '1');
item.classList.toggle('highlight', on);
}
el.addEventListener('mouseenter', () => highlight(true));
el.addEventListener('mouseleave', () => highlight(false));
item.addEventListener('mouseenter', () => highlight(true));
item.addEventListener('mouseleave', () => highlight(false));
seriesEls[key] = { path: el, item, highlight, color, valueEl: valueSpan };
});
currentChart.seriesEls = seriesEls;
currentChart.xScale = xScale;
currentChart.yScale = yScale;
currentChart.bucketPixels = buckets.map(xScale);
svg.appendChild(crosshairLine);
svg.appendChild(crosshairDots);
const intv = chooseInterval(minX, maxX);
const ticks = generateTicks(minX, maxX, intv);
const lu = labelUnit(intv);
const rotate = ticks.length > 0 && (width - 60) / ticks.length < 60;
const axis = document.createElementNS('http://www.w3.org/2000/svg', 'g');
const axisLine = document.createElementNS('http://www.w3.org/2000/svg', 'lin
e');
axisLine.setAttribute('x1', xScale(minX));
axisLine.setAttribute('x2', xScale(maxX));
axisLine.setAttribute('y1', height - 30);
axisLine.setAttribute('y2', height - 30);
axisLine.setAttribute('stroke', '#000');
axis.appendChild(axisLine);
ticks.forEach(t => {
const x = xScale(t);
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'
);
line.setAttribute('x1', x);
line.setAttribute('y1', height - 30);
line.setAttribute('x2', x);
line.setAttribute('y2', height - 25);
line.setAttribute('stroke', '#000');
axis.appendChild(line);
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'
);
text.setAttribute('x', x);
text.setAttribute('y', height - 10);
text.setAttribute('text-anchor', 'middle');
text.setAttribute('class', 'tick-label' + (rotate ? ' rotated' : ''));
if (rotate) text.setAttribute('transform', `rotate(-45 ${x} ${height - 10}
)`);
text.textContent = fmt(new Date(t), lu);
axis.appendChild(text);
});
svg.appendChild(axis);
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'm adjusting the sequence to ensure the grid and axes appear in the correct layers.
I'm adding grid lines and y-axis ticks, adjusting for global formatting and test consistency.
I'll add a separate 'y-tick-label' class to avoid breaking tests and update styles.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# apply_patch<<'PATCH'
> *** Begin Patch
> *** Update File: scubaduck/static/js/timeseries_chart.js
> @@
> function render() {
> @@
> - let colorIndex = 0;
> - const xRange = maxX - minX || 1;
> - const yRange = maxY - minY || 1;
> - const xScale = x => ((x - minX) / xRange) * (width - 60) + 50;
> - const yScale = y => height - 30 - ((y - minY) / yRange) * (height - 60);
> + let colorIndex = 0;
> + const xRange = maxX - minX || 1;
> + const yRange = maxY - minY || 1;
> + const xScale = x => ((x - minX) / xRange) * (width - 60) + 50;
> + const yScale = y => height - 30 - ((y - minY) / yRange) * (height - 60);
> + const grid = document.createElementNS('http://www.w3.org/2000/svg', 'g');
> + svg.appendChild(grid);
> *** End Patch
> PATCH
Success. Updated the following files:
M scubaduck/static/js/timeseries_chart.js
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I’ll compute yTicks after xScale and yScale, then draw grid lines and series.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# grep -n "seriesEls" -n scuba
duck/static/js/timeseries_chart.js
113: seriesEls: {},
283: const seriesEls = {};
355: seriesEls[key] = { path: el, item, highlight, color, valueEl: valueSpa
n };
357: currentChart.seriesEls = seriesEls;
403: Object.values(currentChart.seriesEls).forEach(el => {
407: currentChart.seriesEls[currentChart.selected].highlight(false);
442: currentChart.seriesEls[key].valueEl.textContent = '';
446: currentChart.seriesEls[key].valueEl.textContent = formatNumber(v);
452: dot.setAttribute('fill', currentChart.seriesEls[key].color);
467: currentChart.seriesEls[currentChart.selected].highlight(false);
469: currentChart.seriesEls[best.key].highlight(true);
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'll patch after the grid variable to compute ticks and add the y-axis group.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# sed -n '278,324p' scubaduck/
static/js/timeseries_chart.js
const yRange = maxY - minY || 1;
const xScale = x => ((x - minX) / xRange) * (width - 60) + 50;
const yScale = y => height - 30 - ((y - minY) / yRange) * (height - 60);
const grid = document.createElementNS('http://www.w3.org/2000/svg', 'g');
svg.appendChild(grid);
const seriesEls = {};
const agg = document.getElementById('aggregate').value.toLowerCase();
const groups = {};
Object.keys(series).forEach(key => {
const vals = series[key];
const color = colors[colorIndex++ % colors.length];
let path = '';
let drawing = false;
buckets.forEach(b => {
const v = vals[b];
if (v === undefined) {
if (fill === '0') {
const x = xScale(b);
const y = yScale(0);
path += (drawing ? 'L' : 'M') + x + ' ' + y + ' ';
drawing = true;
} else if (fill === 'blank') {
drawing = false;
}
// connect: do nothing
} else {
const x = xScale(b);
const y = yScale(v);
path += (drawing ? 'L' : 'M') + x + ' ' + y + ' ';
drawing = true;
}
});
const el = document.createElementNS('http://www.w3.org/2000/svg', 'path');
el.setAttribute('d', path.trim());
el.setAttribute('fill', 'none');
el.setAttribute('stroke', color);
el.setAttribute('stroke-width', '1');
svg.appendChild(el);
const idx = key.lastIndexOf(':');
const groupKey = idx === -1 ? 'all' : key.slice(0, idx);
const name = idx === -1 ? key : key.slice(idx + 1);
let group = groups[groupKey];
if (!group) {
const gEl = document.createElement('div');
gEl.className = 'legend-group';
const header = document.createElement('div');
header.className = 'legend-header';
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I noticed the grid group is added but not used. I'll patch it after defining grid.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# apply_patch<<'PATCH'
> *** Begin Patch
> *** Update File: scubaduck/static/js/timeseries_chart.js
> @@
> - const grid = document.createElementNS('http://www.w3.org/2000/svg', 'g');
> - svg.appendChild(grid);
> + const grid = document.createElementNS('http://www.w3.org/2000/svg', 'g');
> + svg.appendChild(grid);
> + const yAxis = document.createElementNS('http://www.w3.org/2000/svg', 'g')
;
> *** End Patch
> PATCH
Success. Updated the following files:
M scubaduck/static/js/timeseries_chart.js
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'll compute yTicks, then add grid lines. I'll adjust yAxis layering after series.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# apply_patch<<'PATCH'
> *** Begin Patch
> *** Update File: scubaduck/static/js/timeseries_chart.js
> @@
> const yScale = y => height - 30 - ((y - minY) / yRange) * (height - 60);
> const grid = document.createElementNS('http://www.w3.org/2000/svg', 'g');
> svg.appendChild(grid);
> const yAxis = document.createElementNS('http://www.w3.org/2000/svg', 'g')
;
> + const yTicks = niceTicks(minY, maxY, 10);
> + yTicks.forEach(v => {
> + const y = yScale(v);
> + const gLine = document.createElementNS('http://www.w3.org/2000/svg', 'l
ine');
> + gLine.setAttribute('x1', xScale(minX));
> + gLine.setAttribute('x2', xScale(maxX));
> + gLine.setAttribute('y1', y);
> + gLine.setAttribute('y2', y);
> + gLine.setAttribute('class', 'grid');
> + grid.appendChild(gLine);
> +
> + const tick = document.createElementNS('http://www.w3.org/2000/svg', 'li
ne');
> + tick.setAttribute('x1', xScale(minX));
> + tick.setAttribute('x2', xScale(minX) - 5);
> + tick.setAttribute('y1', y);
> + tick.setAttribute('y2', y);
> + tick.setAttribute('stroke', '#000');
> + yAxis.appendChild(tick);
> +
> + const text = document.createElementNS('http://www.w3.org/2000/svg', 'te
xt');
> + text.setAttribute('x', xScale(minX) - 8);
> + text.setAttribute('y', y + 3);
> + text.setAttribute('text-anchor', 'end');
> + text.setAttribute('class', 'y-tick-label');
> + text.textContent = formatNumber(v);
> + yAxis.appendChild(text);
> + });
> *** End Patch
> PATCH
Success. Updated the following files:
M scubaduck/static/js/timeseries_chart.js
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'll add yAxis to the svg after crosshair or axis, focusing around line 356.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# sed -n '332,404p' scubaduck/
static/js/timeseries_chart.js
const x = xScale(b);
const y = yScale(v);
path += (drawing ? 'L' : 'M') + x + ' ' + y + ' ';
drawing = true;
}
});
const el = document.createElementNS('http://www.w3.org/2000/svg', 'path');
el.setAttribute('d', path.trim());
el.setAttribute('fill', 'none');
el.setAttribute('stroke', color);
el.setAttribute('stroke-width', '1');
svg.appendChild(el);
const idx = key.lastIndexOf(':');
const groupKey = idx === -1 ? 'all' : key.slice(0, idx);
const name = idx === -1 ? key : key.slice(idx + 1);
let group = groups[groupKey];
if (!group) {
const gEl = document.createElement('div');
gEl.className = 'legend-group';
const header = document.createElement('div');
header.className = 'legend-header';
header.textContent =
groupKey === 'all' ? agg : `${groupKey} ${agg}`;
gEl.appendChild(header);
const items = document.createElement('div');
items.className = 'legend-items';
gEl.appendChild(items);
legend.appendChild(gEl);
group = {items};
groups[groupKey] = group;
}
const item = document.createElement('div');
item.className = 'legend-item';
const label = document.createElement('span');
label.textContent = name;
label.style.color = color;
const valueSpan = document.createElement('span');
valueSpan.className = 'legend-value';
item.appendChild(label);
item.appendChild(valueSpan);
group.items.appendChild(item);
function highlight(on) {
el.setAttribute('stroke-width', on ? '3' : '1');
item.classList.toggle('highlight', on);
}
el.addEventListener('mouseenter', () => highlight(true));
el.addEventListener('mouseleave', () => highlight(false));
item.addEventListener('mouseenter', () => highlight(true));
item.addEventListener('mouseleave', () => highlight(false));
seriesEls[key] = { path: el, item, highlight, color, valueEl: valueSpan };
});
currentChart.seriesEls = seriesEls;
currentChart.xScale = xScale;
currentChart.yScale = yScale;
currentChart.bucketPixels = buckets.map(xScale);
svg.appendChild(crosshairLine);
svg.appendChild(crosshairDots);
const intv = chooseInterval(minX, maxX);
const ticks = generateTicks(minX, maxX, intv);
const lu = labelUnit(intv);
const rotate = ticks.length > 0 && (width - 60) / ticks.length < 60;
const axis = document.createElementNS('http://www.w3.org/2000/svg', 'g');
const axisLine = document.createElementNS('http://www.w3.org/2000/svg', 'lin
e');
axisLine.setAttribute('x1', xScale(minX));
axisLine.setAttribute('x2', xScale(maxX));
axisLine.setAttribute('y1', height - 30);
axisLine.setAttribute('y2', height - 30);
axisLine.setAttribute('stroke', '#000');
axis.appendChild(axisLine);
ticks.forEach(t => {(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# sed -n '404,448p' scubaduck/
static/js/timeseries_chart.js
ticks.forEach(t => {
const x = xScale(t);
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'
);
line.setAttribute('x1', x);
line.setAttribute('y1', height - 30);
line.setAttribute('x2', x);
line.setAttribute('y2', height - 25);
line.setAttribute('stroke', '#000');
axis.appendChild(line);
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'
);
text.setAttribute('x', x);
text.setAttribute('y', height - 10);
text.setAttribute('text-anchor', 'middle');
text.setAttribute('class', 'tick-label' + (rotate ? ' rotated' : ''));
if (rotate) text.setAttribute('transform', `rotate(-45 ${x} ${height - 10}
)`);
text.textContent = fmt(new Date(t), lu);
axis.appendChild(text);
});
svg.appendChild(axis);
}
render();
function hideCrosshair() {
crosshairLine.style.display = 'none';
crosshairDots.style.display = 'none';
crosshairDots.innerHTML = '';
Object.values(currentChart.seriesEls).forEach(el => {
el.valueEl.textContent = '';
});
if (currentChart.selected) {
currentChart.seriesEls[currentChart.selected].highlight(false);
currentChart.selected = null;
}
}
svg.addEventListener('mouseleave', hideCrosshair);
svg.addEventListener('mousemove', e => {
const rect = svg.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const pixels = currentChart.bucketPixels;
if (!pixels.length) return;
let idx = 0;
let dist = Math.abs(pixels[0] - x);
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I’ll add yAxis before axis by placing it right before svg.appendChild(axis);.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# apply_patch<<'PATCH'
> *** Begin Patch
> *** Update File: scubaduck/static/js/timeseries_chart.js
> @@
> - svg.appendChild(axis);
> + svg.appendChild(axis);
> + svg.appendChild(yAxis);
> }
> *** End Patch
> PATCH
Success. Updated the following files:
M scubaduck/static/js/timeseries_chart.js
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#Crosshair is appended before axis in the code; I’ll keep that layering for now.
Crosshair elements remain underneath the axis and yAxis. Now onto styling grid and ticks.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# grep -n "y-tick-label" -r sc
ubaduck/static
scubaduck/static/js/timeseries_chart.js:307: text.setAttribute('class', 'y-
tick-label');
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'll update index.html to add CSS for .grid and .y-tick-label classes.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# sed -n '170,182p' scubaduck/
static/index.html
#chart text.tick-label.rotated {
text-anchor: end;
}
/* 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 class="tab" data-tab="columns">Columns</button>
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'll add the style right before the comment and patch the code.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# apply_patch<<'PATCH'
> *** Begin Patch
> *** Update File: scubaduck/static/index.html
> @@
> #chart text.tick-label.rotated {
> text-anchor: end;
> }
> + #chart text.y-tick-label {
> + font-size: 10px;
> + user-select: none;
> + }
> + #chart line.grid {
> + stroke: #ccc;
> + }
> /* Column resizer removed */
> </style>
> *** End Patch
> PATCH
Success. Updated the following files:
M scubaduck/static/index.html
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'll locate the axis tick test around line 1082 and add a new one after.
"width => document.getElementById('chart').getAttribute('width') != widt
h",
arg=before["width"],
)
after = chart_info()
legend_width_after = page.evaluate(
"parseFloat(getComputedStyle(document.getElementById('legend')).width)"
)
assert after["width"] > before["width"]
assert after["last"] > before["last"]
assert legend_width_after == legend_width
def test_timeseries_no_overflow(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.evaluate("window.lastResults = undefined")
page.click("text=Dive")
page.wait_for_function("window.lastResults !== undefined")
overflow = page.evaluate(
"var v=document.getElementById('view'); v.scrollWidth > v.clientWidth"
)
assert not overflow
def test_timeseries_axis_ticks(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.evaluate("window.lastResults = undefined")
page.click("text=Dive")
page.wait_for_function("window.lastResults !== undefined")
page.wait_for_selector("#chart text.tick-label", state="attached")
count = page.eval_on_selector_all("#chart text.tick-label", "els => els.leng
th")
assert count > 2
def test_timeseries_interval_offset(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.fill("#start", "2024-01-01 00:00:00")
page.fill("#end", "2024-01-03 12:00:00")
select_value(page, "#granularity", "1 hour")
page.evaluate("window.lastResults = undefined")
page.click("text=Dive")
page.wait_for_function("window.lastResults !== undefined")
page.wait_for_selector("#chart text.tick-label", state="attached")
labels = page.eval_on_selector_all(
"#chart text.tick-label", "els => els.map(e => e.textContent)"
)
assert labels
assert all(lbl != "00:00" for lbl in labels)
times = [lbl for lbl in labels if ":" in lbl]
assert times
for t in times:
h = int(t.split(":")[0])
assert h % 4 == 0
def test_timeseries_legend_values(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.evaluate("g => { groupBy.chips = g; groupBy.renderChips(); }", ["user"]
)
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#The test test_timeseries_axis_ticks looks good. I'll open more tests to confirm.
st_web.py
page.evaluate("g => { groupBy.chips = g; groupBy.renderChips(); }", ["user"]
)
select_value(page, "#aggregate", "Avg")
page.evaluate("window.lastResults = undefined")
page.click("text=Dive")
page.wait_for_function("window.lastResults !== undefined")
headers = page.evaluate(
"() => Array.from(document.querySelectorAll('#legend .legend-header')).m
ap(e => e.textContent)"
)
assert any(h.startswith("alice") for h in headers)
page.wait_for_selector("#chart path", state="attached")
page.eval_on_selector(
"#chart",
"el => { const r=el.getBoundingClientRect(); el.dispatchEvent(new MouseE
vent('mousemove', {clientX:r.left+r.width/2, clientY:r.top+r.height/2, bubbles:t
rue})); }",
)
value = page.evaluate("document.querySelector('#legend .legend-value').textC
ontent")
assert value != ""
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I’ll patch tests/test_web.py to verify existence of y-axis labels with the new class.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# grep -n "y_axis" -n tests/te
st_web.py
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'll add the new test right after test_timeseries_axis_ticks.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# apply_patch<<'PATCH'
> *** Begin Patch
> *** Update File: tests/test_web.py
> @@
> def test_timeseries_axis_ticks(page: Any, server_url: str) -> None:
> @@
> assert count > 2
> +
> +
> +def test_timeseries_y_axis_labels(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.evaluate("window.lastResults = undefined")
> + page.click("text=Dive")
> + page.wait_for_function("window.lastResults !== undefined")
> + page.wait_for_selector("#chart text.y-tick-label", state="attached")
> + count = page.eval_on_selector_all("#chart text.y-tick-label", "els => els
.length")
> + grid_count = page.eval_on_selector_all("#chart line.grid", "els => els.le
ngth")
> + assert count > 0 and count == grid_count
> *** End Patch
> PATCH
Success. Updated the following files:
M tests/test_web.py
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'll update the CSS in index.html and then run the format and check commands.
/js/timeseries_chart.js scubaduck/static/index.html tests/test_web.py >/tmp/ruff
_format.log && tail -n 20 /tmp/ruff_format.log
error: Failed to parse scubaduck/static/index.html:1:1: Expected a statement
error: Failed to parse scubaduck/static/js/timeseries_chart.js:1:5: Simple state
ments must be separated by newlines or semicolons
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'll run ruff format on the tests/test_web.py file since it's the only Python change.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# ruff format tests/test_web.p
y >/tmp/ruff_format.log && tail -n 20 /tmp/ruff_format.log
1 file left unchanged
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'll check the code with ruff to catch any issues.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# ruff check >/tmp/ruff_check.
log && tail -n 20 /tmp/ruff_check.log
All checks passed!(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# pyright >/tmp/pyright.log &&
tail -n 20 /tmp/pyright.log0 errors, 0 warnings, 0 informations(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# cat /tmp/pyright.log
0 errors, 0 warnings, 0 informations
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#All checks passed. It's time to run tests with pytest now.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# pytest -q >/tmp/pytest.log &
& tail -n 20 /tmp/pytest.logbringing up nodes...
bringing up nodes...
........................................................................ [ 84%]
............. [100%]
85 passed in 11.45s(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# cat /tmp/pytest.log
bringing up nodes...
bringing up nodes...
........................................................................ [ 84%]
............. [100%]
85 passed in 11.45s
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#All tests passed! Now I’m checking the git status before committing.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# git status --short
M scubaduck/static/index.html
M scubaduck/static/js/timeseries_chart.js
M tests/test_web.py
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#Let me review the diff to confirm the patch looks good.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# git diff --color --stat
scubaduck/static/index.html | 7 ++++
scubaduck/static/js/timeseries_chart.js | 59 +++++++++++++++++++++++++++++++++
tests/test_web.py | 13 ++++++++
3 files changed, 79 insertions(+)
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'll check the differences to see what changes were made.
diff --git a/scubaduck/static/index.html b/scubaduck/static/index.html
index 7382134..494e107 100644
--- a/scubaduck/static/index.html
+++ b/scubaduck/static/index.html
@@ -170,6 +170,13 @@
#chart text.tick-label.rotated {
text-anchor: end;
}
+ #chart text.y-tick-label {
+ font-size: 10px;
+ user-select: none;
+ }
+ #chart line.grid {
+ stroke: #ccc;
+ }
/* Column resizer removed */
</style>
</head>(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# git diff scubaduck/static/js
/timeseries_chart.js | sed -n '270,345p'
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I need to adjust the patch's line numbers, it's closer to 280. Showing full diff.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# git diff scubaduck/static/js
/timeseries_chart.js | head -n 40
diff --git a/scubaduck/static/js/timeseries_chart.js b/scubaduck/static/js/times
eries_chart.js
index 549c555..2136d13 100644
--- a/scubaduck/static/js/timeseries_chart.js
+++ b/scubaduck/static/js/timeseries_chart.js
@@ -236,6 +236,34 @@ function showTimeSeries(data) {
}
}
+ function niceNum(range, round) {
+ const exponent = Math.floor(Math.log10(range));
+ const fraction = range / Math.pow(10, exponent);
+ let niceFraction;
+ if (round) {
+ if (fraction < 1.5) niceFraction = 1;
+ else if (fraction < 3) niceFraction = 2;
+ else if (fraction < 7) niceFraction = 5;
+ else niceFraction = 10;
+ } else {
+ if (fraction <= 1) niceFraction = 1;
+ else if (fraction <= 2) niceFraction = 2;
+ else if (fraction <= 5) niceFraction = 5;
+ else niceFraction = 10;
+ }
+ return niceFraction * Math.pow(10, exponent);
+ }
+
+ function niceTicks(min, max, count) {
+ const range = niceNum(max - min || 1, false);
+ const step = niceNum(range / Math.max(count - 1, 1), true);
+ const start = Math.floor(min / step) * step;
+ const end = Math.ceil(max / step) * step;
+ const ticks = [];
+ for (let v = start; v <= end; v += step) ticks.push(v);
+ return ticks;
+ }
+
function render() {
const style = getComputedStyle(svg.parentElement);
const width =
@@ -250,6 +278,36 @@ function showTimeSeries(data) {(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# git diff scubaduck/static/js
/timeseries_chart.js | sed -n '250,340p'
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#Looks like the diff isn't complete—I'll display the full diff instead.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# git diff scubaduck/static/js
/timeseries_chart.js | sed -n '240,330p'
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'm considering patching the earlier offset and displaying the full diff.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# git diff scubaduck/static/js
/timeseries_chart.js | sed -n '236,380p'
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#Hmm, I suspect the diff isn't showing because of missing patch details. I'll try again.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# git diff scubaduck/static/js
/timeseries_chart.js | cat
diff --git a/scubaduck/static/js/timeseries_chart.js b/scubaduck/static/js/times
eries_chart.js
index 549c555..2136d13 100644
--- a/scubaduck/static/js/timeseries_chart.js
+++ b/scubaduck/static/js/timeseries_chart.js
@@ -236,6 +236,34 @@ function showTimeSeries(data) {
}
}
+ function niceNum(range, round) {
+ const exponent = Math.floor(Math.log10(range));
+ const fraction = range / Math.pow(10, exponent);
+ let niceFraction;
+ if (round) {
+ if (fraction < 1.5) niceFraction = 1;
+ else if (fraction < 3) niceFraction = 2;
+ else if (fraction < 7) niceFraction = 5;
+ else niceFraction = 10;
+ } else {
+ if (fraction <= 1) niceFraction = 1;
+ else if (fraction <= 2) niceFraction = 2;
+ else if (fraction <= 5) niceFraction = 5;
+ else niceFraction = 10;
+ }
+ return niceFraction * Math.pow(10, exponent);
+ }
+
+ function niceTicks(min, max, count) {
+ const range = niceNum(max - min || 1, false);
+ const step = niceNum(range / Math.max(count - 1, 1), true);
+ const start = Math.floor(min / step) * step;
+ const end = Math.ceil(max / step) * step;
+ const ticks = [];
+ for (let v = start; v <= end; v += step) ticks.push(v);
+ return ticks;
+ }
+
function render() {
const style = getComputedStyle(svg.parentElement);
const width =
@@ -250,6 +278,36 @@ function showTimeSeries(data) {
const yRange = maxY - minY || 1;
const xScale = x => ((x - minX) / xRange) * (width - 60) + 50;
const yScale = y => height - 30 - ((y - minY) / yRange) * (height - 60);
+ const grid = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+ svg.appendChild(grid);
+ const yAxis = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+ const yTicks = niceTicks(minY, maxY, 10);
+ yTicks.forEach(v => {
+ const y = yScale(v);
+ const gLine = document.createElementNS('http://www.w3.org/2000/svg', 'lin
e');
+ gLine.setAttribute('x1', xScale(minX));
+ gLine.setAttribute('x2', xScale(maxX));
+ gLine.setAttribute('y1', y);
+ gLine.setAttribute('y2', y);
+ gLine.setAttribute('class', 'grid');
+ grid.appendChild(gLine);
+
+ const tick = document.createElementNS('http://www.w3.org/2000/svg', 'line
');
+ tick.setAttribute('x1', xScale(minX));
+ tick.setAttribute('x2', xScale(minX) - 5);
+ tick.setAttribute('y1', y);
+ tick.setAttribute('y2', y);
+ tick.setAttribute('stroke', '#000');
+ yAxis.appendChild(tick);
+
+ const text = document.createElementNS('http://www.w3.org/2000/svg', 'text
');
+ text.setAttribute('x', xScale(minX) - 8);
+ text.setAttribute('y', y + 3);
+ text.setAttribute('text-anchor', 'end');
+ text.setAttribute('class', 'y-tick-label');
+ text.textContent = formatNumber(v);
+ yAxis.appendChild(text);
+ });
const seriesEls = {};
const agg = document.getElementById('aggregate').value.toLowerCase();
const groups = {};
@@ -362,6 +420,7 @@ function showTimeSeries(data) {
axis.appendChild(text);
});
svg.appendChild(axis);
+ svg.appendChild(yAxis);
}
render();
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'll take a look at the diff for the test files next.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# git diff tests/test_web.py |
sed -n '107,140p'
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'll show the patch around the axis tests for clarity.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# grep -n "y_axis_labels" -n t
ests/test_web.py
1108:def test_timeseries_y_axis_labels(page: Any, server_url: str) -> None:(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# sed -n '1100,1112p' tests/te
st_web.py
page.evaluate("window.lastResults = undefined")
page.click("text=Dive")
page.wait_for_function("window.lastResults !== undefined")
page.wait_for_selector("#chart text.tick-label", state="attached")
count = page.eval_on_selector_all("#chart text.tick-label", "els => els.leng
th")
assert count > 2
def test_timeseries_y_axis_labels(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.evaluate("window.lastResults = undefined")st_web.py
page.evaluate("window.lastResults = undefined")
page.click("text=Dive")
page.wait_for_function("window.lastResults !== undefined")
page.wait_for_selector("#chart text.y-tick-label", state="attached")
count = page.eval_on_selector_all("#chart text.y-tick-label", "els => els.le
ngth")
grid_count = page.eval_on_selector_all("#chart line.grid", "els => els.lengt
h")
assert count > 0 and count == grid_count
def test_timeseries_interval_offset(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.fill("#start", "2024-01-01 00:00:00")
page.fill("#end", "2024-01-03 12:00:00")
select_value(page, "#granularity", "1 hour")
page.evaluate("window.lastResults = undefined")
page.click("text=Dive")
page.wait_for_function("window.lastResults !== undefined")(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# git add scubaduck/static/js/
timeseries_chart.js scubaduck/static/index.html tests/test_web.py(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# git commit -m "feat(frontend
): add y-axis labels and grid lines" && git status --short
[work a8ad31d] feat(frontend): add y-axis labels and grid lines
3 files changed, 79 insertions(+)
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#Git status wasn't shown earlier, so I'll try running it now to verify.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# git status --short
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#Time to open lines in timeseries_chart.js and identify areas that need citations.
imeseries_chart.js | sed -n '236,308p'
236 }
237 }
238
239 function niceNum(range, round) {
240 const exponent = Math.floor(Math.log10(range));
241 const fraction = range / Math.pow(10, exponent);
242 let niceFraction;
243 if (round) {
244 if (fraction < 1.5) niceFraction = 1;
245 else if (fraction < 3) niceFraction = 2;
246 else if (fraction < 7) niceFraction = 5;
247 else niceFraction = 10;
248 } else {
249 if (fraction <= 1) niceFraction = 1;
250 else if (fraction <= 2) niceFraction = 2;
251 else if (fraction <= 5) niceFraction = 5;
252 else niceFraction = 10;
253 }
254 return niceFraction * Math.pow(10, exponent);
255 }
256
257 function niceTicks(min, max, count) {
258 const range = niceNum(max - min || 1, false);
259 const step = niceNum(range / Math.max(count - 1, 1), true);
260 const start = Math.floor(min / step) * step;
261 const end = Math.ceil(max / step) * step;
262 const ticks = [];
263 for (let v = start; v <= end; v += step) ticks.push(v);
264 return ticks;
265 }
266
267 function render() {
268 const style = getComputedStyle(svg.parentElement);
269 const width =
270 svg.parentElement.clientWidth -
271 parseFloat(style.paddingLeft) -
272 parseFloat(style.paddingRight);
273 svg.setAttribute('width', width);
274 svg.innerHTML = '';
275 legend.innerHTML = '';
276 let colorIndex = 0;
277 const xRange = maxX - minX || 1;
278 const yRange = maxY - minY || 1;
279 const xScale = x => ((x - minX) / xRange) * (width - 60) + 50;
280 const yScale = y => height - 30 - ((y - minY) / yRange) * (height -
60);
281 const grid = document.createElementNS('http://www.w3.org/2000/svg',
'g');
282 svg.appendChild(grid);
283 const yAxis = document.createElementNS('http://www.w3.org/2000/svg',
'g');
284 const yTicks = niceTicks(minY, maxY, 10);
285 yTicks.forEach(v => {
286 const y = yScale(v);
287 const gLine = document.createElementNS('http://www.w3.org/2000/svg
', 'line');
288 gLine.setAttribute('x1', xScale(minX));
289 gLine.setAttribute('x2', xScale(maxX));
290 gLine.setAttribute('y1', y);
291 gLine.setAttribute('y2', y);
292 gLine.setAttribute('class', 'grid');
293 grid.appendChild(gLine);
294
295 const tick = document.createElementNS('http://www.w3.org/2000/svg'
, 'line');
296 tick.setAttribute('x1', xScale(minX));
297 tick.setAttribute('x2', xScale(minX) - 5);
298 tick.setAttribute('y1', y);
299 tick.setAttribute('y2', y);
300 tick.setAttribute('stroke', '#000');
301 yAxis.appendChild(tick);
302
303 const text = document.createElementNS('http://www.w3.org/2000/svg'
, 'text');
304 text.setAttribute('x', xScale(minX) - 8);
305 text.setAttribute('y', y + 3);
306 text.setAttribute('text-anchor', 'end');
307 text.setAttribute('class', 'y-tick-label');
308 text.textContent = formatNumber(v);(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# nl -ba scubaduck/static/js/t
imeseries_chart.js | sed -n '304,330p'
304 text.setAttribute('x', xScale(minX) - 8);
305 text.setAttribute('y', y + 3);
306 text.setAttribute('text-anchor', 'end');
307 text.setAttribute('class', 'y-tick-label');
308 text.textContent = formatNumber(v);
309 yAxis.appendChild(text);
310 });
311 const seriesEls = {};
312 const agg = document.getElementById('aggregate').value.toLowerCase()
;
313 const groups = {};
314 Object.keys(series).forEach(key => {
315 const vals = series[key];
316 const color = colors[colorIndex++ % colors.length];
317 let path = '';
318 let drawing = false;
319 buckets.forEach(b => {
320 const v = vals[b];
321 if (v === undefined) {
322 if (fill === '0') {
323 const x = xScale(b);
324 const y = yScale(0);
325 path += (drawing ? 'L' : 'M') + x + ' ' + y + ' ';
326 drawing = true;
327 } else if (fill === 'blank') {
328 drawing = false;
329 }
330 // connect: do nothing
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'll display the part where the yAxis was appended.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# nl -ba scubaduck/static/js/t
imeseries_chart.js | sed -n '418,425p'
418 if (rotate) text.setAttribute('transform', `rotate(-45 ${x} ${heig
ht - 10})`);
419 text.textContent = fmt(new Date(t), lu);
420 axis.appendChild(text);
421 });
422 svg.appendChild(axis);
423 svg.appendChild(yAxis);
424 }
425
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#I'll grab the specific lines from index.html.
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# nl -ba scubaduck/static/inde
x.html | sed -n '168,181p'
168 user-select: none;
169 }
170 #chart text.tick-label.rotated {
171 text-anchor: end;
172 }
173 #chart text.y-tick-label {
174 font-size: 10px;
175 user-select: none;
176 }
177 #chart line.grid {
178 stroke: #ccc;
179 }
180 /* Column resizer removed */
181 </style>(scubaduck) root@8031fa2cb19b:/workspace/scubaduck# nl -ba tests/test_web.py | s
ed -n '1105,1124p'
1105 assert count > 2
1106
1107
1108 def test_timeseries_y_axis_labels(page: Any, server_url: str) -> None:
1109 page.goto(server_url)
1110 page.wait_for_selector("#graph_type", state="attached")
1111 select_value(page, "#graph_type", "timeseries")
1112 page.evaluate("window.lastResults = undefined")
1113 page.click("text=Dive")
1114 page.wait_for_function("window.lastResults !== undefined")
1115 page.wait_for_selector("#chart text.y-tick-label", state="attached")
1116 count = page.eval_on_selector_all("#chart text.y-tick-label", "els =
> els.length")
1117 grid_count = page.eval_on_selector_all("#chart line.grid", "els => e
ls.length")
1118 assert count > 0 and count == grid_count
1119
1120
1121 def test_timeseries_interval_offset(page: Any, server_url: str) -> None:
1122 page.goto(server_url)
1123 page.wait_for_selector("#graph_type", state="attached")
1124 select_value(page, "#graph_type", "timeseries")
(scubaduck) root@8031fa2cb19b:/workspace/scubaduck#Time to summarize everything for the PR description and finalize it.