Graph View
Visualize your task dependencies as an interactive directed graph. Drag, zoom, connect, and filter nodes in real time.
Overview
The Graph View renders all tasks as nodes and their dependencies as directed edges in an interactive canvas powered by React Flow. Tasks are automatically positioned using the Dagre layout algorithm, which arranges directed acyclic graphs for optimal readability.
Graph Nodes
Each node represents a task and displays:
- Title — The task name, truncated to two lines with ellipsis if too long.
- Status indicator — A colored dot (green for done, blue for active, red for blocked, gray for pending).
- Priority badge — Appears in the top-right corner.
- Assignee avatars — Shown at the bottom of the node. Multiple assignees display as overlapping circles.
All nodes are rendered at a uniform size to keep the graph visually consistent.
Edges
Edges represent "depends on" relationships. An arrow from Node A to Node B means A depends on B. Edge styles convey meaning:
| Style | Meaning |
|---|---|
| Solid gray line | Standard internal dependency. |
| Dashed orange/animated line | Cross-team dependency (visible in the cross-team view). |
Interacting with the Graph
Navigation
- Pan — Click and drag on the canvas background.
- Zoom — Scroll wheel or pinch gesture.
- Fit view — Click the fit-to-view button in the controls panel to center all nodes.
- Mini-map — A miniature overview of the full graph appears in the bottom-right corner for orientation.
Creating Dependencies
Hover over a node to reveal its connection handles (small circles on the edges). Click and drag from one handle to another node to create a new dependency. See Dependencies for details.
Inspecting a Task
Click on a node to navigate to the full Task Detail page where you can edit all properties and manage dependencies.
Filtering
The graph supports two filter types that work simultaneously:
- Status filter — Toggle visibility of Done, Active, Blocked, and Pending tasks.
- Priority filter — Toggle visibility of Critical, High, Medium, and Low priority tasks.
Filtered-out nodes and their associated edges are hidden from the canvas. The layout automatically re-adjusts.
Performance
Layout Algorithm
ScenIQ uses the Dagre library to compute node positions. Dagre is specifically designed for laying out directed graphs and produces clean, hierarchical arrangements where:
- Nodes with no dependencies appear at the top (or left, depending on orientation).
- Dependent nodes appear lower, following the natural flow of work.
- Edge crossings are minimized for clarity.
You can drag nodes to custom positions after the automatic layout runs. The layout is recomputed when you add or remove tasks or dependencies.
From the Task Detail Page
Each task detail page includes a "View in Graph" quick action that opens the graph view and centers on that specific node, making it easy to explore its dependency chain in context.