Skip to content

feat: combine diagram shows each network's share, and marks a join or drop - #256

Open
Arpit-Khandelwal wants to merge 2 commits into
anmolkapil:mainfrom
Arpit-Khandelwal:feat/live-combine-diagram
Open

Arpit-Khandelwal wants to merge 2 commits into
anmolkapil:mainfrom
Arpit-Khandelwal:feat/live-combine-diagram

Conversation

@Arpit-Khandelwal

Copy link
Copy Markdown
Collaborator

Closes #241 (part of #239).

What it does

The combine diagram on the download screen now shows what each network is actually doing:

  • Each path is drawn by its share of the current total speed. A bigger share means thicker, brighter and faster dashes. There are four steps, plus "still" for a network that's on but fetching nothing (or switched off). Before this, the dash speed came from the row's position (1.1 + index * 0.2 s), so the top network always moved fastest whatever it carried.
  • A network joining is marked once. When a network starts carrying bytes mid-download, its path draws in once, the combine node pulses once, and "+659.6 KB/s" (in the MB/s or Mbps unit picked in the footer) shows next to the total speed for 2 s. When a network drops out, "−670.2 KB/s" shows instead, with no draw-in.
  • Reduced motion: the dashes stay still, and width and opacity still show the share. The "+…" text still shows, just without the rise-in. The draw-in and pulse are skipped.

How it works

  • utils/combineFlow.ts holds the logic as plain functions, so it can be tested on its own:
    • flowStep(share, active, previous) maps a share to step 0–4. The step edges are at 20%, 45% and 70%, so an even split between two networks lands in the middle of a step. A 5% hysteresis stops a share sitting near an edge from flipping steps every update.
    • trackFlow(tracker, samples, now) decides when a network has joined or dropped out. The change has to hold for 2.5 s, so a flapping link is never marked. A join only counts if another network was already carrying the download before this one started, so the download starting or resuming isn't marked. A drop only counts while another network is still carrying bytes, so the download finishing or a server stall isn't marked either. The amount shown for a drop is what the network carried before it started winding down. Per-network speeds are averaged over 3 s in the main process, so its last speed above the floor would undersell it.
  • hooks/useCombineFlow.ts subscribes to the store outside render and feeds each download update (about every 200 ms) through trackFlow. It only sets state when a path's step changes or a network joins or drops. The memoized screen gets no extra per-update renders and no per-frame state (Re-render only what changed on each progress update #151). It starts over on pause and when the screen switches to another download.
  • The dashes stay pure CSS. A step change only changes animation-duration (the name stays the same, so the animation doesn't restart), and with the hysteresis that's rare. The draw-in is a separate one-off path (pathLength=1) so it doesn't fight the flowing dash pattern. The pulse uses transform-box: fill-box so it scales around the node.
  • Small fix along the way: plexo-dash now moves -56 rather than -60. That's four whole periods of the 6 8 dash pattern, so the dashes no longer hitch once a loop.
  • Each path has data-network, data-share (percent of the current total) and data-flow-step for tests. The "+…" text sits in a role="status" region with the network's name for screen readers ("b joined: +659.6 KB/s").

Screenshots

All in features/shots/:

  • diagram-light-one-network.png, diagram-dark-one-network.png: one network alone. It sits on the top step, the thickest and fastest dashes.

    diagram-light-one-network.png diagram-dark-one-network.png

  • diagram-light-joined.png, diagram-dark-joined.png: the moment b joins. Its path is mid draw-in, the node ring is pulsing, and "+659.6 KB/s" sits next to the total.

    diagram-light-joined.png diagram-dark-joined.png

  • diagram-light-two-networks.png, diagram-dark-two-networks.png: a few seconds later. Both paths are on the same step (an even split), and the indicator is gone.

    diagram-light-two-networks.png diagram-dark-two-networks.png

  • diagram-light-closeup.png, diagram-dark-closeup.png: the diagram on its own.

    diagram-light-closeup.png diagram-dark-closeup.png

  • diagram-dark-dropped-min-window.png: b switched off, at the minimum window size. b's path is still and faint, and "−670.2 KB/s" shows beside the total.

    diagram-dark-dropped-min-window.png

Tests

  • e2e/combineFlow.spec.ts (new, 8 tests): the share→step mapping and its hysteresis, plus the join/drop logic. Covered: networks starting together aren't marked, a later network joins once, a flapping link is never marked, a drop reports what the network carried before winding down, everything going quiet together isn't a drop, and a network that comes back joins again.
  • e2e/combineDiagram.spec.ts (new, needs the LAN second network like the other two-network specs). Through the real UI:
    • a alone is at step 4 with a 100% share, and b (off) isn't drawn.
    • Switching b on shows "b joined: +…" and the draw-in.
    • Both paths then flow and their shares add up to 100.
    • A MutationObserver confirms the "+…" text appeared exactly once and went away.
    • Switching b off makes its path still (step 0, no animation) and shows "dropped out: −…".
  • This spec fails on main: no path has data-flow-step (checked by reverting src/ and rerunning).
  • bun run typecheck:node, typecheck:web, typecheck:e2e, lint, format:check and bunx electron-vite build all pass.
  • PLEXO_E2E_SKIP_BUILD=1 bunx playwright test e2e/combineDiagram.spec.ts e2e/combineFlow.spec.ts e2e/liveNetworks.spec.ts e2e/ui.spec.ts e2e/format.spec.ts --workers=2: 34 passed.
  • PLEXO_E2E_SKIP_BUILD=1 bunx playwright test e2e/combineDiagram.spec.ts e2e/selection.spec.ts e2e/downloadActions.spec.ts e2e/downloads.spec.ts e2e/scheduleQueue.spec.ts --workers=2: 70 passed. These are the other specs that open the download screen.
  • I also checked reduced motion with a throwaway spec (not committed). The dash offset stays at 0, the draw-in ends at opacity 0, and the "+…" text is at opacity 1.

For you to decide

  • Where the "+…" sits. It's in line after the speed's unit, like a ticker. If the stats column is narrower than "669.8 KB/s −670.2 KB/s", the throughput chart gives up a few dozen pixels for the 2 s it shows. You can see it in the min-window screenshot. The other spot would be the "TOTAL SPEED" label row, which usually has spare room, but it reads as less tied to the number. Happy to move it.
  • The numbers. The thresholds are judgment calls: 32 KB/s counts as "carrying nothing", 2.5 s before a change counts, and the step edges are at 20/45/70%.
  • Two kinds of "share" on one screen. The network table's SHARE column is each network's share of the bytes downloaded so far. The diagram uses the share of the current speed. So right after b joins, both paths are drawn alike while the table still reads 68% / 32%. That's correct, but someone could ask why. We could add a <title> on each path ("b: about 50% of the speed now"), or rename the column.
  • The join amount is the network's speed when the join is confirmed, 2.5 s in. Because of the 3 s averaging in main, that can be a little under where it settles.

Part of #239. Ready to look at, but still waiting for @anmolkapil's yes on #241. Happy to change course, or close it if the idea isn't wanted.

… drop

Each network's path into the combine node is drawn by its share of the
total speed, snapped to four steps: thicker, brighter and faster dashes
for a bigger share, still for a network carrying nothing. The dash speed
used to come from the row index. With reduced motion the dashes stay put
and width and opacity carry the share.

A network that starts carrying bytes mid-download (held for 2.5 s, so a
flapping link isn't marked) draws its path in once and pulses the combine
node, and "+12 MB/s" shows beside the total speed for 2 s; one that
drops out shows "-8 MB/s". The tracking runs from a store subscription
and re-renders the screen only when a step changes or a network joins or
drops.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Make the combine diagram move with real traffic, and show when a network joins

1 participant