Frontend full redesign (#128)

* server: allow cross origin ws calls when STATSVIZ_DEBUG=1

This is needed during frontend development

* server: send plot config as first ws message.

Also, wrap metrics to simplify decoding in the frontend.

* server: allow printing websocket errors while developing

* go.mod: bump gorilla/websocket and rogpeppe/go-internal

* Align tests

* Improve TestUnusedRuntimeMetrics

* Add dependabot.yml

* Update CONTRIBUTING.md

* static: use vite to build assets

Assets directory is 1.5MB uncompressed
475kB compressed.

We compressed the go:embed'ed filesystem so that the final binary size
doesn't increase too much.

Add scripts to create the dist hash and to diff it

CI: bump actions, add assets check workflow

Package.json: remove jquery and bootstrap/js, use smaller plotly bundle.

Add maximize/minimize plot.

* static: regenerate assets

* static: collapsable side-bar

* static: force plots update when on ui actions

* static: move stuff in ui.js

* static: cleanup event handlers

* static: regenerate assets zip

* static: remove unused plot cards

* static: use ring buffer for stats and add handle ui in nav.js

* static: use Float64Buffer

* static: move stuff in plotConfig.js

* static: StatsManager

* static: use private Class fields when necessary

* static: lighten app.js by moving websocket stuff to socket.js

* static: forEach -> map

* static: use correct icons for minimize/maximize plot

* static: remove unused variables

* static: simplify app.js by carving PlotManager out of it

* static: responsive plot dimensions

* static: fix theme switch on plots and github logo

* static: regenerate assets zip

* Update examples_test.go

* Update examples_test.go

* static: cosmetics

* static: plots background padding and color

* static: give plots a default height

Without that default height, plots were being created first empty and
grew afterwards, which was not aesthetically pleasing

* internal/plot: cosmetics

* internal/plot: cosmetics

* internal/plots: use metricIndices helper

* static: merge useMetric with mapMetricsToIndices

* internal/plot: plot configuration supports tags

* internal/plot: rework plot registry

* static: use Plotly.relayout when switching theme

* static: regenerate assets

* Cosmetics

* internal/plot: remove unused parameter

* internal/plot: simplify plot registering

* Cosmetics

* internal/plot: rewrite in a more declarative way

* internal/plot: remove usedMetrics from global state

* internal/plot: cosmetics

* internal/plots: add plots tags

* internal/static: style plot tags

* internal/static: smaller buttons

* internal/static: remove sidebar and move everything on top navbar

* internal/static: improve navbar

* internal/static: minimal navbar

* internal/static: reduce gap

* internal/static: navbar cosmetics

* internal/static: polish css html

* internal/static: don't update hidden plots

* internal/plot: add GC (Scavenger) plot

* internal/static: show plots unless all its tags are disabled

* internal/static: add 'CPU' plot tag

* internal/plot: CPU plots (gc, scavenger and overall)

* internal/plot: make 'mutex wait' a bar plot

* internal/static: add /cpu/classes/gc/total to 'cpu overall' plot

* internal/plot: add a 'garbage collection' plot

* internal/plot: improve plot tooltips

* internal/plot: add alloc/free rates plot

* internal/static: regenerate assets

* Update README.md

* Polish and document usage of STATSVIZ_DEBUG

* Update README.md

* Update CHANGELOG

Author: arl

.github/scripts/modtidy-check.sh

@@ -0,0 +1,18 @@
+name: Assets
+on: [push, pull_request]
+jobs:
+  check-assets:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: internal/static/.nvmrc
+      - uses: actions/setup-go@v5
+      - run: npm install
+        working-directory: internal/static
+      - run: npm run build
+        working-directory: internal/static
+      - name: Check assets zip is up to date
+        run: ./internal/static/scripts/checkzip.sh

.github/workflows/assets.yml

@@ -1,13 +1,13 @@
 on: [push]
 name: Coverage
 jobs:
-  run:
+  coverage:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-go@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-go@v5
         with:
-          go-version: 1.21.x
+          go-version-file: go.mod
       - run: go test -coverprofile=coverage.txt
       - name: Upload coverage to Codecov
         uses: codecov/codecov-action@v3

.github/workflows/coverage.yml

@@ -1,17 +1,17 @@
 on: [push, pull_request]
 name: Tests-linux
 jobs:
-  test:
+  tests-linux:
     strategy:
       matrix:
-        go-version: [1.20.x, 1.21.x]
+        go-version: [1.22.x, 1.23.x]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-go@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-go@v5
         with:
-          go-version: ${{ matrix.go-version }}
+          go-version-file: go.mod
       - name: go mod tidy check
-        run: .github/scripts/modtidy-check.sh
+        run: go mod tidy -diff
       - name: Tests
         run: go test -race -shuffle=on ./...

.github/workflows/tests-linux.yml

@@ -1,15 +1,15 @@
 on: [pull_request]
 name: Tests-others
 jobs:
-  test:
+  tests-macos-windows:
     strategy:
       matrix:
         os: [macos-latest, windows-latest]
     runs-on: ${{ matrix.os }}
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-go@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-go@v5
         with:
-          go-version: 1.21.x
+          go-version-file: go.mod
       - name: Tests
         run: go test -race -shuffle=on ./...

.github/workflows/tests-others.yml

@@ -2,6 +2,15 @@ Unreleased
 ==============
   * Make all examples use statsviz@latest (#112)
 
+v0.7.0 / 2025-07-26
+==============
+  * New plots showing new go1.22 runtime/metrics:
+    + GC Memory Summary
+    + CPU (Garbage Collector)
+  * Frontend redesign/refactor:
+    + Maximize plot button
+    + plot category selector
+
 v0.6.0 / 2023-10-08
 ==============
   * New plots showing new go1.20/go1.21 runtime/metrics: (#111)

CHANGELOG.md

@@ -8,38 +8,56 @@ Pull-requests are welcome!
 
 ## Go library
 
-The Statsviz Go public API is relatively light so there's not much to do and at
-the moment it's unlikely that the API will change. However new options can be
-added to `statsviz.Register` and `statsviz.NewServer` without breaking
-compatibility.
-
-That being said, there may be things to improve in the implementation, any
-contribution is very welcome!
+Statsviz Go public API surface is relatively limited, by design, and it's highly
+unlikely that that will change. However new options can be added to
+`statsviz.Register` and `statsviz.NewServer` without breaking compatibility.
 
 Big changes should be discussed on the issue tracker prior to start working on
 the code.
 
-If you've decided to contribute, thank you so much, please comment on the existing 
-issue or create one stating what you want to tackle and why.
+If you've decided to contribute, thank you so much, please comment on the
+existing issue or create one stating what you want to tackle.
 
 
 ## User interface (html/css/javascript)
 
 The user interface aims to be simple, light and minimal.
 
+To bootstrap the UI for development:
+ - cd to `internal/static`
+ - run `npm install`
+ - run `npm dev` and leave it running
+ - in another terminal, cd to an example, for example `_example/default`
+ - run `go mod edit -replace=github.com/arl/statsviz=../../` to build the
+   example with your local version of the Go code. If you haven't touched to the
+   Go code you can skip this step.
+
+To build the production UI:
+ - cd to `internal/static`
+ - run `npm run build`
+ - run `./scripts.zip.sh`
+ - only commit `dist.zip`. `dist` directory is ignored.
+
+
 Assets are located in the `internal/static` directory and are embedded with
-[`go:embed`](https://pkg.go.dev/embed).
+[`go:embed`](https://pkg.go.dev/embed). To reduce the space taken by the assets
+in the final binary, the `dist` directory is zipped into `dist.zip`. Use
+`scripts/zip.sh` to do it. At runtime, when Statsviz serves the UI, the
+`dist.zip` is then decompressed into a `fs.FS`, served via
+`http.FileServerFS()`.
+
 
-Depending on what your modifications are, it's always a good idea to check that
-some of the examples in [./_example](./_example/) work with your modifications
-to Statsviz. To do so `cd` to the directory of the example and run:
+## `STATSVIZ_DEBUG`
 
-    go mod edit -replace=github.com/arl/statsviz=../../
+Declare `STATSVIZ_DEBUG=1` environment variable when you develop in order to:
+ - print websocket errors on standard output.
+ - bypasses CORS checks
 
+Obviously, this is not recommended for production use!
 
 ## Documentation
 
-No contribution is too small, improvements to code comments and/or README
+No contribution is too small. Improvements to code, comments or README
 are welcome!