Wrike Task Dependency Visualizer

WHAT IT DOES

This userscript transforms your Wrike task list into an interactive dependency visualizer. It reads task dependency data from the page—including predecessor/successor relationships—and displays a full-frame graph overlay showing tasks as nodes connected by directional arrows. Each task node is color-coded based on status (blue for active, green for complete, yellow for in progress, red for blocked). The graph summary panel shows total tasks, dependency count, number of blockers, blocked tasks, and the longest dependency chain. Clicking any task node opens that task in a new tab, making it easy to navigate complex dependency structures. The script also adds compact dependency badges to task rows in the list view, showing how many tasks each task blocks and how many tasks are blocking it. This is invaluable for project managers, team leads, and anyone managing complex project dependencies who needs to quickly understand task relationships, identify bottlenecks, and optimize workflow sequencing.

WHERE IT RUNS

The script runs on all Wrike web application pages at *.wrike.com/*, with automatic detection of task lists, task detail pages, and workspace views. It works across all Wrike interfaces by using multiple selector strategies to find task elements, IDs, titles, statuses, and dependency indicators. The script detects dynamic content loading and re-applies dependency badges whenever the task list changes. It runs across the entire Wrike domain, ensuring coverage whether you're viewing a project's task list, a specific task detail page, or a filtered view.

HOW TO USE

Install the script via the BotGentz extension and navigate to any Wrike task list or task detail page. Click the "Show Dependency Graph" button in the panel to open a full-frame overlay with an interactive graph of all dependencies. The graph displays each task as a node with its first three letters, with directional arrows showing dependency relationships. Hover over any node to see the full task title and status. Click any node to open that task. The graph summary shows key metrics: total tasks, dependencies, blockers, blocked tasks, and the longest dependency chain. Use the panel controls to enable or disable dependency badges on task rows, choose the graph layout direction (horizontal or vertical), or enable auto-open of the graph when viewing a task page. The "Refresh" button manually reapplies badges if the page updates. Press the Escape key to close the graph overlay.

THE MECHANISM - DEPENDENCY EXTRACTION, GRAPH LAYOUT, AND INTERACTIVE VISUALIZATION

This script identifies task data by scanning the page for task rows using a cascading selector strategy. It extracts task IDs from data attributes, links, or page structure, and captures titles, statuses, assignees, and due dates. Dependencies are extracted by scanning for dependency indicators including .predecessor, .successor, .depends-on, .blocked-by elements, dependency chips, badges, and list structures. The script builds a directed graph of dependencies, then calculates metrics including per-task blocker counts, blocked counts, and the longest dependency chain using depth-first search. The graph is rendered on an HTML5 Canvas with nodes positioned in a grid layout (horizontal or vertical). Each node is drawn with a color based on its status, and arrows are drawn between dependent tasks using bezier curves. Tooltips are implemented using a div overlay positioned via canvas mouse events. Click handling uses hit-testing on node positions to identify which task was clicked. The graph is overlaid on a full-frame modal with escape key support for closing.

THE PANEL

The control panel appears as a floating, draggable element that you can position anywhere on the Wrike page. Drag by the header to reposition it, and the position is saved per site using GM_setValue so it stays where you left it across sessions. Release the panel near any edge and it snaps into place, keeping your workspace organized. Click the panel header to collapse it into a small bubble showing only the link emoji (🔗), minimizing distraction while keeping controls accessible. Drag from the bubble to restore the full panel. The panel automatically resizes to fit its content and includes the graph button, badge toggle, auto-open toggle, and layout selector. Press the Escape key to quickly collapse the panel to its minimized state. The panel remains visible across page navigation within Wrike, with dependency badges updating automatically as you move between views. The full-frame graph overlay includes its own close button and is also dismissed with the Escape key.

PLEASE NOTE

This script requires the free BotGentz extension to function. It is designed for Wrike users who need to understand and manage complex task dependencies. The script reads only visible task and dependency data from the DOM—it does not access Wrike's API, your account credentials, or any sensitive information. All settings (badge visibility, auto-open, layout direction, and panel position) are stored locally using GM_setValue and never leave your browser. The script does not modify your Wrike data—it only reads and visualizes visible information. Dependency extraction relies on the structure of the current page; if dependencies are not visible, they cannot be extracted. If Wrike updates its website structure, the script may need to be updated to match new selectors. The graph overlay is full-frame and covers the page until dismissed; use the close button or Escape key to return to your work.