Show node state colors in workflow invocation graph minimap by ahmedhamidawan · Pull Request #22335 · galaxyproject/galaxy

ahmedhamidawan · 2026-03-31T22:49:29Z

In the invocation graph view, the minimap previously rendered all steps in a flat primary color regardless of their execution state.

Here, we've made the minimap reflect the same state-based colors used in the graph node headers.

The state-to-color mapping is driven by CSS custom properties on the minimap canvas element.
Also added borders to the minimap nodes since some of the state colors are very light and hence, hard to see.

sync_invocation_minimap_with_step_colors.mp4

Fixes #21086 (once the 3rd item there is also complete of course)

How to test the changes?

(Select all options that apply)

I've included appropriate automated tests.
This is a refactoring of components with existing test coverage.
Instructions for manual testing are as follows:
1. [add testing steps and prerequisites here if you didn't write automated tests covering all your changes]

License

I agree to license these and all my past contributions to the core galaxy codebase under the MIT license.

In the invocation graph view, the minimap previously rendered all steps in a flat primary color regardless of their execution state. Here, we've made the minimap reflect the same state-based colors used in the graph node headers. - The state-to-color mapping is driven by CSS custom properties on the minimap canvas element. - Also added borders to the minimap nodes since some of the state colors are very light and hence, hard to see.

Before this change, they would appear in the default node-header color.

mvdbeek · 2026-04-01T06:45:59Z

client/src/components/Workflow/Editor/modules/canvasDraw.ts

 import type { useWorkflowStateStore } from "@/stores/workflowEditorStateStore";
 import type { Step } from "@/stores/workflowStepStore";

+const stateNames = [


Can we re-use states ? We want something shared ideally derived from the API schema. Note these seem to be dataset states too, those don't seem right for coloring steps ?

I have reused the graphStepStates as set on the client for invocation graph steps in the useInvocationGraph composable.

"hidden" was in the GraphStep state union but is unreachable — it appears in neither JobState, DatasetState, nor InvocationStepState in the API schema, so no code path in updateStep or initializeGraphInput can ever set it. Removing it from graphStepStates also drops the now-dead --state-color-hidden CSS variable. Also adds vitest coverage for all reachable step state cases: no invocation step (queued), no matching job summary (waiting), single- and all-instance job states, and the populated_state fallback mappings (scheduled/ready→queued, resubmitted→new, failed→error, deleting→deleted). Co-Authored-By: Claude <noreply@anthropic.com>

mvdbeek · 2026-04-07T12:17:25Z

client/src/composables/useInvocationGraph.ts

 import { provideScopedWorkflowStores } from "./workflowStores";

+/** All possible states for an Invocation Graph step, derived from job states,
+ * input dataset states, and subworkflow scheduling states. */


How could you include dataset states in the graph ? Also my previous comment applies, don't redefine this here, use API-defined states please (components["schemas"]["JobState"], components["schemas"]["InvocationState"]), .

I would expect invocation states as well here ?

How could you include dataset states in the graph ?

The reason dataset states are included is because workflow inputs are also GraphSteps, and we set the state of an input dataset/collection graph step based on its state.

mvdbeek · 2026-04-07T12:17:59Z

client/src/components/Workflow/Editor/WorkflowMinimap.vue

        --view-color: #{fade-out($brand-dark, 0.8)};
        --view-outline-color: #{$brand-info};
+
+        // Invocation state colors


Is there no type-safe way to do this? If we add a new state the catch all undefined is going to be used without any compile-time warning.

Replace the hand-maintained `graphStepStates` string array and its derived type with a proper schema-derived union: `JobState | DatasetState | InvocationStepState`, covering the three code paths that set a step's state (tool/collection steps, data input steps, subworkflow steps respectively). Drop the `graphStepStates` export entirely — the type is the authority now. In `canvasDraw.ts`, eliminate the dependent `stateNames` array by switching to a lazy `lookupStateColor` helper that reads `--state-color-{state}` CSS variables on first use and caches them, so any state defined in CSS is automatically picked up without a manual list.

Type `iconClasses` as `Record<GraphStepState, ...>` so TypeScript enforces exhaustive coverage of all step states. Fill in icons for all states in the full `JobState | DatasetState | InvocationStepState` union, using `states.ts` conventions as reference. Tighten `getHeaderClass` to accept `GraphStepState | undefined` instead of `string`, removing the cast at the call site. Expand `statePlaceholders` with `upload`, `setting_metadata`, `failed_metadata`, and `stop`.

Replaces the implicit `undefined` on `GraphStep.state` with an explicit `"uninitialized"` sentinel, making `state` a required field. New steps are initialized to `"uninitialized"` with `headerClass` set immediately. `updateStep` now starts fresh each call (`newState = undefined`) and falls back to the previous state via `newState ?? graphStep.state` if nothing could be determined, rather than silently inheriting it as the starting value. Co-Authored-By: Claude <noreply@anthropic.com>

@each

- add paused, skipped, uninitialized to $galaxy-state-bg - generate --state-color-* CSS custom properties via :root @each (str-replace handles setting_metadata → setting-metadata) - remove the 12 hardcoded --state-color-* vars from WorkflowMinimap.vue - drop the lookupStateColor("undefined") catch-all; fall back to nodeColor directly - update canvasDraw tests to reflect the removed undefined fallback Co-Authored-By: Claude <noreply@anthropic.com>

ahmedhamidawan · 2026-04-10T21:26:47Z

@mvdbeek I have added commits now that use schema defined types for Graph Step states (of all sorts; input steps, tool steps, subworkflows etc.) which are computed in the client in useInvocationGraph.

The state scss colors defined in base.scss are the single source now as well.

mvdbeek · 2026-04-13T08:15:24Z

client/src/components/Workflow/Editor/modules/canvasDraw.test.ts

+    return { stepPosition: positions } as unknown as ReturnType<typeof useWorkflowStateStore>;
+}
+
+const STATE_COLORS = {


Seems like a code smell ? Why is that in the test file ?

The test is just making sure the correct (mocked in the test) color is set on the minimap node. I have replaced those raw color values with mock strings. And I have also annotated the test better.

ahmedhamidawan and others added 3 commits March 31, 2026 17:30

ensure "undefined" (parameter input) steps are highlighted accordingly

384591e

Before this change, they would appear in the default node-header color.

add tests for canvasDraw minimap color and drawing utilities

a6e3066

ahmedhamidawan added this to the 26.1 milestone Mar 31, 2026

ahmedhamidawan added the kind/enhancement label Mar 31, 2026

ahmedhamidawan added this to Galaxy Dev - weeklies Mar 31, 2026

ahmedhamidawan added the area/UI-UX label Mar 31, 2026

github-project-automation bot moved this to Needs Review in Galaxy Dev - weeklies Mar 31, 2026

mvdbeek reviewed Apr 1, 2026

View reviewed changes

ahmedhamidawan and others added 2 commits April 3, 2026 10:22

use actual GraphStep state type array to assign graph minimap styles

70d2d4c

mvdbeek reviewed Apr 7, 2026

View reviewed changes

mvdbeek marked this pull request as draft April 7, 2026 12:22

mvdbeek moved this from Needs Review to In Progress in Galaxy Dev - weeklies Apr 7, 2026

ahmedhamidawan and others added 4 commits April 10, 2026 14:09

ahmedhamidawan marked this pull request as ready for review April 10, 2026 21:24

mvdbeek reviewed Apr 13, 2026

View reviewed changes

replace STATE_COLORS with MOCK_COLORS; annotate test well

3cc6804

ahmedhamidawan moved this from In Progress to Needs Review in Galaxy Dev - weeklies Apr 14, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Show node state colors in workflow invocation graph minimap#22335

Show node state colors in workflow invocation graph minimap#22335
ahmedhamidawan wants to merge 10 commits intogalaxyproject:devfrom
ahmedhamidawan:sync_invocation_minimap_with_step_colors

ahmedhamidawan commented Mar 31, 2026

Uh oh!

mvdbeek Apr 1, 2026 •

edited

Loading

Uh oh!

ahmedhamidawan Apr 3, 2026

Uh oh!

mvdbeek Apr 7, 2026

Uh oh!

mvdbeek Apr 7, 2026

Uh oh!

ahmedhamidawan Apr 8, 2026 •

edited

Loading

Uh oh!

mvdbeek Apr 7, 2026

Uh oh!

ahmedhamidawan commented Apr 10, 2026

Uh oh!

mvdbeek Apr 13, 2026

Uh oh!

ahmedhamidawan Apr 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

ahmedhamidawan commented Mar 31, 2026

How to test the changes?

License

Uh oh!

mvdbeek Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ahmedhamidawan Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

mvdbeek Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

mvdbeek Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

ahmedhamidawan Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mvdbeek Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

ahmedhamidawan commented Apr 10, 2026

Uh oh!

mvdbeek Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

ahmedhamidawan Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mvdbeek Apr 1, 2026 •

edited

Loading

ahmedhamidawan Apr 8, 2026 •

edited

Loading