Skip to main content

UI improvements - grid, dashboard, sequence diagram, BPF editor, and Whisperer playground

· 4 min read
Thibaut Raballand
Creator of Spider

A handful of independent improvements landed over the past few days, all aimed at the same thing: less friction between you and the data.

Color scale on numeric grid columns​

Any numeric column in a grid - duration, size, row count, error count - can now render a background color scale. The cell color is proportional to the column's value range: the highest value gets the darkest shade, zero gets none.

This turns a plain table into a heat map with no configuration. Outliers jump out without having to sort or filter first.

ColorScale.png

Filters persist when switching views​

Previously, switching from HTTP to PostgreSQL (or TCP, or All) reset the active filters.
Coming back meant reapplying them from scratch.

Filters are now saved per view and restored when you return. Set a duration filter in the HTTP, switch to the PostgreSQL to look at concurrency, come back - your filter is still there.

Drag and drop everywhere​

Three places gained drag-and-drop reordering in the same sprint.

Dashboard widgets​

Widgets in the Dashboard configuration panel can now be dragged to rearrange them. Drop a widget anywhere in the list to reorganise the dashboard layout, instead of using move-up / move-down buttons repeatedly.

DashboardDragDrop.png

Column order in the column selector​

The column selector (used to pick which columns appear in a grid and in what order) now supports drag and drop. Drag a column up or down in the list to set its position directly, instead of using move-up / move-down buttons.

ColumnsDragDrop.png

Sequence diagram actors​

Actors in the sequence diagram can also be dragged left and right to reorder them - covered in the section below.

Sequence diagram enhancements​

Two more additions to the sequence diagram:

Show Template​

A new Template display option overlays the matched template name on each request arrow, alongside the method and URI. Useful when you have many similar routes and want to read the logical operation name rather than the raw path.

SequenceDiagramTemplate.png

Horizontal scroll​

Diagrams with many actors are no longer clipped at the panel edge. The diagram now scrolls horizontally, so all actors remain accessible regardless of how wide the cast is.

Drag to reorder actors​

Actors can now be dragged left and right to reorder them.
When the default left-to-right order does not match the narrative you want to tell - client on the left, database on the right, gateway in the middle - you can rearrange without leaving the view.

SequenceDiagramReorder.png

BPF / pcap filter editor​

The capture filter field used when configuring a Whisperer or a network capture has been replaced with a proper editor:

PcapFilterEditor.png

Syntax highlighting​

BPF keywords (tcp, udp, host, port, and, or, not), operators, and address literals are colored. A dense filter like tcp and (host 10.0.0.1 or port 5432) and not port 80 is now readable at a glance.

Live parser​

The filter is parsed as you type directly on the UI.

Syntax errors are flagged inline before you submit - no more rejected captures because of a typo in the filter.

PcapFilterEditor - Error.png

The parser also detects common mistakes, like selecting many ports with 'and'.

PcapFilterEditor - Warning.png

Snippet picker​

A snippet picker sits on top of the input.

Pick a snippet - "port 443", "portrange 8000-9000", "host" - and it drops into the editor, with the port number or the hostname preselected, ready to edit or use as-is.

PcapFilterEditor - Edit.png

Whisperer config: Templates & Tags playground​

Whisperer configuration changes may take up to 5 minutes to apply on the back-end, due to the Whisperer's configuration caching. This is a pain when setting up Templates or Tags for the first time.

To overcome this, the Whisperer configuration panel has a new Playground section!

It takes the first items (up to 50) of the current filtered List, and run Templates and Tags extraction on them. It shows immediately which Templates and Tags match, and what values they extract, thus allowing you to validate - or adjust - your configuration.

This closes a feedback loop that used to require long minutes:
Before, testing a new template meant:

  • push the config,
  • wait for the Whisperer to reload,
  • capture some traffic,
  • wait for the configuration to apply on the backend
  • check if the template or tags matched.

Now you click Run over history data and see the result immediately.

WhispererPlayground.png The playground works for both HTTP and PostgreSQL parsing configurations.

note

This feature requires that the Whisperer is configured to save its complete data:

  • HTTP: Raw headers and body,
  • PostgreSQL: INSERT and SELECT data rows.