Rewrite UI webdriver-ts-results to Radix UI | Shadcn UI, TanStack Table and D3

[nakrovati]

Why?

• To improve UI
• Simplify table logic
• Simplify further development
• Reduce bundle size

It's not some mandatory action, but it would be nice to have the site display normally on phones, have a dark theme and not load megabytes of plotly code.

[krausest]

If you want to do a complete rewrite I suggest adding it as a second implementation for the results and keep the old one at least for a while.
What I like(d) about the old implementation is that the maintenance over the years was pretty much ok.

[krausest]

I prefer option 2. I switched my workflow (just yesterday) such that the results could be loaded via the server again.
Are the chunks stable from build to build?

[nakrovati]

Yes, I manually chunked everything to remove the hashes in the file names. Although everything works with these hashes too.

[leeoniya]

why chunk anything, honestly?

when Plotly and React are removed, the single-file bundle will be probably ~70kb, with the json data comprising the remaining 666kb [1], either fetched async or just bundled into the single file. (that results file can probably be reduced by 30-50%, too). then, after gzip you're looking at probably 200kb for the entire thing. 🤷

people are too obsessed with the latest in frontend tooling hype, usually for no good reason.

[1] https://github.com/krausest/js-framework-benchmark/blob/bd4a0c9d5ef4065232b25cfd0092f4308ca72ed5/webdriver-ts/results.json

[nakrovati]

@leeoniya That's what I wanted to do, just when migrating to vite krausets said to split the code into chunks like now (index.js + BoxPlotTable.js + plotly.js).

You're suggesting to store the results in a folder and use react-router to load them when the route changes, right? I suggested to do the same with Astro, just adding processing of routes / and /current/ to webdriver-ts-results repo.

[leeoniya]

if the total app size with results < 200kb, then just inline the whole thing into a single html file. no router, no fetch, no server, no nothing.

[krausest]

Last year I played a bit with angular, lit, preact, solid and svelte and created a version with the result app. Then I found it funny to make a benchmark driver to test some operations on that table :)
(But I never made a nice looking results table from those results..)
I thought I keep that repo as a joke, but maybe I'll try to run it with the new zustand version or that new implementation.

[nakrovati]

Nice joke, as much as 6k stars.