Skip to content

console: polish the home, visualize and not found pages - #2

Merged
rinjanianalytics merged 5 commits into
mainfrom
console-polish
Oct 11, 2026
Merged

console: polish the home, visualize and not found pages#2
rinjanianalytics merged 5 commits into
mainfrom
console-polish

Conversation

@rinjanianalytics

@rinjanianalytics rinjanianalytics commented Oct 11, 2026 •
edited
Loading

Copy link
Copy Markdown
Owner

Polish of three screens of the console, from a review of the running demo: the home page, the visualize page and the not found page. One commit for each, plus one for the menu they share.

Not found page

  • Says what happened and links to the home page and to the documentation.
  • The title of the tab says "Not found".

Menu and page shell

  • The user and the theme switch move to the foot of the menu. On a large screen, the bar above the pages is gone. On a small screen it stays, with the menu button and the logo.
  • The current page gets the tint of the brand.
  • "Collapse menu" in place of "Close".
  • One main landmark in place of two nested ones, and a nav landmark for the menu.

Home page

  • Four numbers in one row: flow rate, exporters, traffic now, peak.
  • Ranked bars with written shares in place of the pies. One split bar for the protocols and for the IP versions.
  • The last flow is in sections. The fields without a value are behind a button.
  • The axis of the graph shows the unit.

Visualize page

  • On a small screen the graph comes first. A bar at the bottom opens the options in a sheet.
  • The button to apply stays in view at the foot of the options.
  • The unit is a list with full names.
  • Icon buttons are 32 pixels wide.
  • Ten series get ten distinct colors.
  • The axis shows the unit, and times use a 24-hour clock.
  • Fields and sections are named for screen readers.

Checks

  • pnpm lint, pnpm test (88 tests, 15 of them new) and pnpm build pass.
  • Checked in a browser with the development server against the demo data: home and visualize at desktop width in both themes, the collapsed menu, and home, visualize and the not found page at 390 pixels wide. On the phone layout: opened the sheet, changed the unit, picked a completion of the filter with the mouse, applied.
  • Stacked, bidirectional, grid and heatmap graphs. The grid failed with the first version of the new palette: the last commit fixes it and adds a test.

Not checked

  • The Sankey graph and the lines graph with the new colors.
  • A screen reader.
  • The print layout.

@rinjanianalytics
console: say what happened on the not found page, and give ways out
462aea3 
The page for an unknown address only said "Not found!". It now says the
address may be mistyped or the page may have moved, and links to the
home page and to the documentation.

The page also sets its own title: the tab said "FlowScope" alone.
@rinjanianalytics
console: move the user and the theme switch to the menu
3122624 
On a large screen, the bar above the pages only held the theme switch
and the avatar. Both move to the foot of the menu, with the name of the
user, and the bar is gone. On a small screen the menu is closed, so the
bar stays: it opens the menu and shows the logo.

Also in the menu:

- the current page gets the tint of the brand, in place of a solid
  black or white block,
- the button to collapse the menu says "Collapse menu", not "Close",
- the links are in a nav landmark.

The page had two nested main landmarks, one from the sidebar block and
one from the layout. The sidebar block is now a plain block.
@rinjanianalytics
console: put the numbers first on the home page
8838d5b 
The home page had two numbers on half of its width, five small pies
whose shares were not written, and a list of about 60 fields for the
last flow, many of them empty, with a blank area next to it.

- Four numbers in one row: the flow rate, the exporters, the traffic
  now and its peak. The last two come from the data of the graph, with
  the period computed from it.
- The top lists are ranked bars with the share of each entry. The
  protocols and the IP versions, which have a few classes, get one
  split bar.
- The fields of the last flow are in sections (flow, exporter, source,
  destination, interfaces). The fields without a value are listed by
  name behind a button. A zero is a value and stays.
- The axis of the graph shows the unit ("150 Gbps", not "150.00G").
- The titles of the panels are headings.

The header of a page can also drop its description on a small screen.
The visualize page will use it.
@rinjanianalytics
console: show the graph first on a small screen, and use plain words
e5c8eee 
On a phone, the options filled the first screen and the graph was below
it. The graph now comes first. A bar at the bottom opens the options in
a sheet and runs the query. On a large screen, the options stay next to
the graph.

In the options:

- the button to apply is out of the scrolling part, so it stays in
  view,
- the unit is a list with full names, in place of six buttons like
  "L3b/s" and "->%" written with small letters,
- the buttons with only an icon are 32 pixels wide, up from 16,
- the fields which are not inputs are named for screen readers, and
  the section titles are headings.

In the graphs:

- ten series get ten colors which differ in hue and in lightness. The
  four hues of the brand were repeated in shades, and the fifth series
  was hard to tell from the first,
- the axis shows the unit,
- the summary and the title of the tab use a 24-hour clock, like the
  axis.

The smallest text size goes from 11 to 12 pixels.
@rinjanianalytics
console: accept a negative index for the color of a series
4fa3459 
The grid graph asks for the color of the "Other" row, which it does
not draw, with the index -1. The palette with ten colors returned
nothing for it and the graph failed to render. The previous palette
shifted odd indexes, which hid the case.
@rinjanianalytics
rinjanianalytics merged commit 8e58e60 into main Oct 11, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@rinjanianalytics