Developing and deploying
The webapp is a SvelteKit 2 application written in TypeScript with Svelte 5,
styled with Tailwind CSS and daisyUI. It talks to NATS from the browser with
the @nats-io WebSocket client and decodes live messages with the
flatbuffers runtime. It has no backend of its own: every piece of data comes
from central NATS.
Working on it
You need Node.js 18 or newer and pnpm.
cd webapp
pnpm install
pnpm dev # http://localhost:5173, reloads on save
pnpm dev --host 0.0.0.0 makes the dev server reachable from other machines
on the network.
| Path | Contents |
|---|---|
src/routes/+page.svelte | Connect page: server address and credentials |
src/routes/labjacks/+page.svelte | List of LabJack configurations |
src/routes/labjacks/plots/[asset_number]/+page.svelte | Live plots and export for one configuration |
src/lib/components/ | RealTimePlot, LabJackConfigModal and the plot page’s ChannelCard, StatsPanel, ExportDialog and ConnectionBanner |
src/lib/nats.svelte.ts | Connecting to NATS and reading and writing the key-value bucket |
src/lib/subjects.ts | Subject names, matching rust-ljm/src/subjects.rs |
src/lib/flatbuffer-parser.ts | Decoding live Scan messages |
src/lib/calibration.ts | Volts to engineering units, matching rust-ljm/src/calibration.rs |
src/lib/labjack-config.ts | LabJack configuration types and filling in missing fields |
src/lib/filter-settings.ts, src/lib/filters.ts | Per-channel noise filter settings and the filter pipeline, matching rust-ljm/src/filters.rs |
src/lib/plot/ | The live plot’s data path, per-channel state, trigger logic, drawing helpers, and the export form, connection and file saving |
src/lib/exporter.ts | The client side of the export protocol |
src/lib/sampler/ | FlatBuffers code generated from rust-ljm/src/data.fbs; do not edit |
subjects.ts, calibration.ts and filters.ts duplicate logic that also
exists in Rust. A change to subject names, calibration formulas or the filters
has to be made in both places, or the webapp will subscribe to the wrong
subjects or show different numbers from the exports. For the filters,
testdata/filter-vectors.json holds the webapp’s output on synthetic signals and
cargo test checks the Rust pipeline against it; regenerate it with
UPDATE_FILTER_VECTORS=1 pnpm vitest run src/lib/filters.test.ts after a
deliberate change.
Building and running it for others
The app uses adapter-node, so a build is a small Node server:
cd webapp
pnpm install --frozen-lockfile
pnpm build # writes build/
node build # serves on 0.0.0.0:3000
pnpm test runs the unit tests (Vitest) for the modules in src/lib.
PORT and HOST change the listen address, for example
PORT=8088 node build. Copy build/, package.json and the lockfile to
another machine and run pnpm install --prod there before node build.
Because all data comes from central NATS over the browser’s own WebSocket connection, the server only delivers the app’s files. It can run anywhere people can reach, with no special network access.
API reference
The TypeScript modules under src/lib are documented in the webapp API
reference, generated by TypeDoc from the doc
comments. Svelte components and pages are not covered by TypeDoc; each has a
@component comment at the top of its file, which editors with the Svelte
extension show on hover, and they are described in How the webapp
works.
To build the reference alone:
cd webapp
pnpm exec typedoc --options typedoc.json --out /tmp/webapp-docs
Regenerating the FlatBuffers code
After a change to rust-ljm/src/data.fbs, from the repository root:
flatc --ts --gen-object-api -o webapp/src/lib rust-ljm/src/data.fbs
Regenerate the Rust side at the same time (see Data formats).