root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(FN-3084): add active node visual states to dependency graph

Browse Source 
The merge adds active graph node visual states (highlight, pulsing indicator, selected border) to the dependency-graph plugin with corresponding test coverage, introduces a plugin AI security scan gate and GraphTaskNode wrapper per FN-3426, and includes a small test stabilization fix alongside docum

Fusion-Task-Id: FN-3084
This commit is contained in:
Fusion
2026-05-07 03:01:20 -07:00
committed by gsxdsm
parent 16d3f18d8d
commit 89719e892d
7 changed files with 313 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
plugins/fusion-plugin-dependency-graph/src/GraphTaskNode.css
View File

@@ -3,7 +3,13 @@
z-index: 1;
width: min(100%, var(--graph-task-node-width, calc(var(--space-2xl) * 9)));
max-width: var(--graph-task-node-max-width, calc(var(--space-2xl) * 9.5));
transition: box-shadow var(--transition-fast), z-index var(--transition-fast), opacity var(--transition-fast);
transition:
box-shadow var(--transition-fast),
z-index var(--transition-fast),
opacity var(--transition-fast),
border-color var(--transition-fast);
border: var(--btn-border-width) solid transparent;
border-radius: var(--radius-sm);
}
.graph-task-node:hover {
@@ -20,13 +26,126 @@
opacity: 0.4;
}
.graph-task-node--active {
border-color: rgba(var(--in-progress-rgb), 0.5);
box-shadow: 0 0 0 var(--btn-border-width) rgba(var(--in-progress-rgb), 0.45), 0 0 0.75rem rgba(var(--in-progress-rgb), 0.5), 0 0 1.5rem rgba(var(--in-progress-rgb), 0.2);
transform: scale(1.01);
}
.graph-task-active-indicator {
display: flex;
align-items: center;
min-height: 1.25rem;
width: 100%;
padding-inline: var(--space-sm);
background: rgba(var(--in-progress-rgb), 0.85);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
animation: graph-task-active-pulse calc(var(--transition-normal) * 8) ease-in-out infinite;
}
.graph-task-active-indicator-text {
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 600;
line-height: 1;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--card);
}
.graph-task-node .card {
width: 100%;
height: 100%;
}
.graph-task-node[data-current-step="0"] .card-steps-list .card-step-item:nth-child(1),
.graph-task-node[data-current-step="1"] .card-steps-list .card-step-item:nth-child(2),
.graph-task-node[data-current-step="2"] .card-steps-list .card-step-item:nth-child(3),
.graph-task-node[data-current-step="3"] .card-steps-list .card-step-item:nth-child(4),
.graph-task-node[data-current-step="4"] .card-steps-list .card-step-item:nth-child(5),
.graph-task-node[data-current-step="5"] .card-steps-list .card-step-item:nth-child(6),
.graph-task-node[data-current-step="6"] .card-steps-list .card-step-item:nth-child(7),
.graph-task-node[data-current-step="7"] .card-steps-list .card-step-item:nth-child(8),
.graph-task-node[data-current-step="8"] .card-steps-list .card-step-item:nth-child(9),
.graph-task-node[data-current-step="9"] .card-steps-list .card-step-item:nth-child(10),
.graph-task-node[data-current-step="10"] .card-steps-list .card-step-item:nth-child(11),
.graph-task-node[data-current-step="11"] .card-steps-list .card-step-item:nth-child(12),
.graph-task-node[data-current-step="12"] .card-steps-list .card-step-item:nth-child(13),
.graph-task-node[data-current-step="13"] .card-steps-list .card-step-item:nth-child(14),
.graph-task-node[data-current-step="14"] .card-steps-list .card-step-item:nth-child(15),
.graph-task-node[data-current-step="15"] .card-steps-list .card-step-item:nth-child(16),
.graph-task-node[data-current-step="16"] .card-steps-list .card-step-item:nth-child(17),
.graph-task-node[data-current-step="17"] .card-steps-list .card-step-item:nth-child(18),
.graph-task-node[data-current-step="18"] .card-steps-list .card-step-item:nth-child(19),
.graph-task-node[data-current-step="19"] .card-steps-list .card-step-item:nth-child(20) {
background: rgba(var(--in-progress-rgb), 0.15);
border-left: calc(var(--btn-border-width) * 2) solid var(--in-progress);
padding-left: var(--space-xs);
font-weight: 500;
}
.graph-task-node[data-current-step="0"] .card-steps-list .card-step-item:nth-child(1) .card-step-dot,
.graph-task-node[data-current-step="1"] .card-steps-list .card-step-item:nth-child(2) .card-step-dot,
.graph-task-node[data-current-step="2"] .card-steps-list .card-step-item:nth-child(3) .card-step-dot,
.graph-task-node[data-current-step="3"] .card-steps-list .card-step-item:nth-child(4) .card-step-dot,
.graph-task-node[data-current-step="4"] .card-steps-list .card-step-item:nth-child(5) .card-step-dot,
.graph-task-node[data-current-step="5"] .card-steps-list .card-step-item:nth-child(6) .card-step-dot,
.graph-task-node[data-current-step="6"] .card-steps-list .card-step-item:nth-child(7) .card-step-dot,
.graph-task-node[data-current-step="7"] .card-steps-list .card-step-item:nth-child(8) .card-step-dot,
.graph-task-node[data-current-step="8"] .card-steps-list .card-step-item:nth-child(9) .card-step-dot,
.graph-task-node[data-current-step="9"] .card-steps-list .card-step-item:nth-child(10) .card-step-dot,
.graph-task-node[data-current-step="10"] .card-steps-list .card-step-item:nth-child(11) .card-step-dot,
.graph-task-node[data-current-step="11"] .card-steps-list .card-step-item:nth-child(12) .card-step-dot,
.graph-task-node[data-current-step="12"] .card-steps-list .card-step-item:nth-child(13) .card-step-dot,
.graph-task-node[data-current-step="13"] .card-steps-list .card-step-item:nth-child(14) .card-step-dot,
.graph-task-node[data-current-step="14"] .card-steps-list .card-step-item:nth-child(15) .card-step-dot,
.graph-task-node[data-current-step="15"] .card-steps-list .card-step-item:nth-child(16) .card-step-dot,
.graph-task-node[data-current-step="16"] .card-steps-list .card-step-item:nth-child(17) .card-step-dot,
.graph-task-node[data-current-step="17"] .card-steps-list .card-step-item:nth-child(18) .card-step-dot,
.graph-task-node[data-current-step="18"] .card-steps-list .card-step-item:nth-child(19) .card-step-dot,
.graph-task-node[data-current-step="19"] .card-steps-list .card-step-item:nth-child(20) .card-step-dot {
width: 0.5rem;
height: 0.5rem;
animation: graph-task-step-pulse calc(var(--transition-normal) * 10) ease-in-out infinite;
}
@keyframes graph-task-active-pulse {
0%,
100% {
background: rgba(var(--in-progress-rgb), 0.85);
}
50% {
background: rgba(var(--in-progress-rgb), 0.65);
}
}
@keyframes graph-task-step-pulse {
0%,
100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.75;
}
}
@media (max-width: 768px) {
.graph-task-node {
width: min(100%, var(--graph-task-node-mobile-width, calc(var(--space-2xl) * 8)));
}
.graph-task-node--active {
transform: scale(1.005);
}
.graph-task-active-indicator {
min-height: 1.5rem;
padding-inline: var(--space-md);
}
.graph-task-active-indicator-text {
font-size: 0.6875rem;
}
}