vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

jobq-graph: animate new-node mount and state-change flash

Browse source 
Two of the three motion gaps mara flagged on the swarm-ui jobs graph
(the third, node status changes as a tree of nesting divs rather than
a node-link diagram, has no edges to animate today — see the issue
thread for that scoping correction).

- New node mount: .jg-node gets a fade+slide-in keyframe. No JS change
  needed — Preact only creates a new .jg-node DOM node when its key
  (the node id) is genuinely new, so this only plays on first
  appearance, not every fetch re-render.
- State change flash: NodeView tracks each node's previous state via
  a ref; on a real change it adds .jg-state-flash to the glyph span
  (removed on animationend), driving a scale pulse.

Both follow the same three-rule motion-guard shape as Shell.css's
shell-page-enter / LinksMenu.css's links-menu-popover-enter.
This commit is contained in:
iris 2026-09-02 01:21:41 +02:00 • committed by mara
commit 03d1552746
2 changed files with 75 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

57
frontend/packages/shared/src/jobq-graph/jobq-graph.css
View file

@ -40,8 +40,36 @@
gap: 0.15em;
}
/* Mount-triggered fade+slide, not a state transition — Preact only
creates a new `.jg-node` DOM node when its `key` (the node id) is
genuinely new, so this only plays once per node, the first time it
appears in a fetched snapshot. Same shape as Shell.css's
`shell-page-enter` / LinksMenu.css's `links-menu-popover-enter` —
see either for the three-rule motion-guard this mirrors. */
.jg-node {
margin: 0;
animation: jg-node-enter 160ms ease;
}
@keyframes jg-node-enter {
from {
opacity: 0;
transform: translateY(-0.2em);
}
to {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.jg-node {
animation: none;
}
}
:root[data-motion='reduce'] .jg-node {
animation: none;
}
:root[data-motion='allow'] .jg-node {
animation: jg-node-enter 160ms ease;
}
/* Nested groups indent + get a guide line, rather than a hand-rolled
@ -73,6 +101,35 @@
.jg-state-cancelled { color: var(--muted); text-decoration: line-through; }
.jg-state-skipped { color: var(--muted); opacity: 0.5; }
/* Short-lived pulse applied by `NodeView` (JobqGraph.tsx) exactly when
a node's own `state` value changes on an existing DOM node — a mount
keyframe (`.jg-node`'s `jg-node-enter`, above) doesn't retrigger for
this case since the node isn't remounting, just updating. Class is
removed on `animationend` (see NodeView), so the scale never gets
stuck applied. */
.jg-state-flash {
animation: jg-state-flash 350ms ease;
}
@keyframes jg-state-flash {
from {
transform: scale(1.6);
}
to {
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.jg-state-flash {
animation: none;
}
}
:root[data-motion='reduce'] .jg-state-flash {
animation: none;
}
:root[data-motion='allow'] .jg-state-flash {
animation: jg-state-flash 350ms ease;
}
.jg-label {
color: var(--fg);
}