WBS Tree View

The Work Breakdown Structure (WBS) Tree View renders your entire project as an interactive hierarchy of node cards — parent phases branch into child tasks, all connected by clean SVG lines. Switch between five display modes (Structure, Cost, EVM, Schedule, Resources) and four live overlays (Health, Risk, Blocker, Tags) to see every dimension of your project in one screen. Export to standalone HTML or PDF for stakeholder sharing.

The WBS Tree View is one of the few free project planning tools to support EVM rollups, risk overlays, and a project root node in a zoomable, pannable tree — features normally found only in enterprise tools like MS Project or Primavera.

Opening the WBS View

Click the WBS tab in the view bar at the top — it sits immediately to the right of Gantt. The tree builds automatically from the active project's task structure. Switch projects via the sidebar and the WBS updates instantly.

Project Root Node

Every WBS tree starts with a project root node at the top — a full-width card that shows rolled-up values for the entire project:

Total task count — all tasks (excluding the root itself)
Overall progress — weighted average across all tasks
Total budget — sum of all task fixed costs
Planned Value (PV) — work scheduled to be done by today
Earned Value (EV) — value of work actually completed
Actual Cost (AC) — total actual costs entered
SPI / CPI — Schedule and Cost Performance Indexes

Clicking the root node opens the Project Editor modal — the same as clicking a project name in the sidebar.

Tree Structure

DPlan derives the WBS hierarchy directly from your Gantt task structure — no separate WBS entry is needed. The mapping is:

Gantt Element	WBS Representation
Summary / Phase task	Parent node (grey rounded card, darker header)
Regular task	Leaf node (standard card)
Milestone	Leaf node with diamond colour indicator
Child tasks (parentId)	Positioned below and connected to their parent
Top-level tasks (no parent)	Direct children of the project root node

Tasks indented under a summary phase in the Gantt appear as branches under that phase's node in the WBS tree. The hierarchy can be unlimited levels deep.

Display Modes

Five modes control what data appears on each node card. Switch modes using the toolbar buttons at the top of the WBS view. Switching is instant — no data reloads.

Structure Mode (default)

Shows the clean breakdown with no numeric data — ideal for planning reviews and stakeholder walkthroughs where cost or EVM data would be distracting.

Task name + type icon
Status badge (Not Started / In Progress / Complete / On Hold / Cancelled)
Priority indicator
Start → End date range
Progress bar
Assigned resources

Cost Mode

Adds budget and cost data to every node. Parent nodes show rolled-up totals from all their descendants.

Budget (fixed cost), actual cost, variance
Cost variance pill: green when under budget, red when over
Resource cost breakdown visible on hover in expanded state

EVM Mode (Earned Value)

Full Earned Value Management overlay — the most information-dense mode. Computed from task dates, progress %, and costs against today's date.

Metric	Formula	Meaning
PV	Budget × time elapsed	Planned Value — what should be done by today
EV	Budget × progress%	Earned Value — value of work completed
AC	Actual cost entered	Actual Cost spent so far
SPI	EV ÷ PV	Schedule Performance Index (1.0 = on schedule)
CPI	EV ÷ AC	Cost Performance Index (1.0 = on budget)
EAC	Budget ÷ CPI	Estimate at Completion — projected final cost
VAC	Budget − EAC	Variance at Completion — projected over/under

SPI and CPI badges are colour-coded: green ≥ 0.95, amber 0.8–0.94, red < 0.8. Parent nodes aggregate all descendant EVM values.

Schedule Mode

Focuses on timeline data per task:

Start and end dates
Duration in working days
Days remaining / overdue badge
Critical path indicator (red border) — tasks on the critical path are highlighted
Progress bar with percentage

Resources Mode

Shows the human and equipment layer of each task:

Assigned resource names with type icons (👤 person, 🔧 equipment, 📦 material)
Allocation percentage per assignment
Resource role if defined
Unassigned tasks are visually flagged

Overlays

Overlays add a visual layer on top of any mode — they do not change the mode's data, they add colour-coded signals. Enable/disable each overlay independently using the toggle buttons in the toolbar. Multiple overlays can be active simultaneously.

Health Overlay

Adds a coloured left-border strip to each node based on its health status. Health is derived automatically from task data:

Health	Border Colour	Condition
🟢 On Track	Green (#22c55e)	Progress ≥ expected, not overdue, no blockers
🟡 At Risk	Amber (#eab308)	Progress slightly behind, or approaching deadline
🔴 Behind	Red (#ef4444)	Overdue, or significantly behind expected progress
⚫ On Hold	Dark grey	Status = on-hold or cancelled
✅ Complete	Teal (#14b8a6)	Progress = 100%

Parent nodes inherit the worst health of all their descendants — if any child is Behind, the parent shows Behind.

Risk Overlay

Shows a ⚠ badge on any node that has a linked risk with score ≥ 4 (Moderate or Critical) in the Risk Register. The badge is red-pulsing when a smart trigger is firing. Requires Risk Register to be enabled in Settings.

Clicking a risk badge on a WBS node navigates directly to the Risk Register with that task's risks visible.

Blocker Overlay

Shows a 🔴 pulsing dot on any node that has at least one unresolved blocker comment. A blocker is a task comment flagged with the 🔴 checkbox in the Task Editor. The dot pulses to draw attention during project reviews. Clicking a blocker dot opens the Task Editor for that task.

Blocker count also feeds the Issue Log — any blocker comment automatically appears in the Issue Log view as a read-only "Blocker Comment" issue card.

Tags Overlay

Renders all tags assigned to each task as small coloured chips on the node card. Uses the same colours as in the Gantt task list. Useful for confirming tag coverage across the entire WBS at a glance — gaps (untagged tasks) are immediately visible.

Pan & Zoom

The WBS canvas supports free-form navigation for large project trees:

Action	How
Pan	Click and drag on empty canvas space
Zoom in	Scroll up / pinch-out (trackpad)
Zoom out	Scroll down / pinch-in (trackpad)
Reset zoom	Click Reset button in toolbar
Fit to screen	Click Fit button in toolbar (centres tree at readable zoom)

The tree re-centres automatically when you switch projects or modes. Zoom state is not persisted — it resets on project switch.

Connector Lines

SVG connector lines link parent nodes to their children using smooth orthogonal paths:

Lines run from the bottom-centre of a parent to the top-centre of each child
A horizontal branch bar distributes children when there are multiple siblings
Lines scale and move with pan/zoom — they are rendered inside the same SVG coordinate space as the tree
Line colour adapts to light/dark theme via CSS variables

Clicking Nodes

Every WBS node is interactive:

Regular task / phase — clicking the node opens the Task Editor modal for that task, pre-populated with all current values
Project root node — clicking opens the Project Editor modal
Risk badge — navigates to Risk Register
Blocker dot — opens Task Editor

Export: Standalone HTML

Click WBS HTML in the Export ribbon (or the WBS toolbar). A self-contained HTML file downloads immediately — no server, no dependency on DPlan being open.

The exported file:

Always uses a light theme (white background) regardless of DPlan's current theme — suitable for print and sharing
Embeds all CSS and JavaScript inline — one file, zero external dependencies
Renders connector lines using the same embedded SVG logic — correct node positions recalculate inside the standalone page
Preserves all node data from the current mode at export time
Includes a Print / PDF button inside the exported HTML that auto-scales the tree before calling the browser print dialog
The exported filename is: [ProjectName]_WBS_[Date].html

The export captures the tree at the moment of export. It does not update if you change the project later — re-export to get a fresh snapshot.

Export: PDF

Click WBS PDF in the Export ribbon. DPlan switches to the WBS view (if not already there) and after a brief render delay triggers the browser print dialog. Select Save as PDF in the print dialog. For best results, choose Landscape orientation and set margins to Minimum or None.

Alternatively, use the Print / PDF button inside the exported standalone HTML file, which auto-scales the tree to fit the page before printing — often producing better results than printing directly from DPlan.

Toolbar Reference

Button	Function
Structure / Cost / EVM / Schedule / Resources	Switch display mode
Health / Risk / Blocker / Tags	Toggle overlays on/off (multiple can be active)
Fit	Scale and centre the tree to fill the canvas
Reset	Return to 100% zoom, centred
WBS HTML (Export ribbon)	Download standalone HTML snapshot
WBS PDF (Export ribbon)	Print/save as PDF

Performance Notes

The WBS tree re-renders fully on every mode or overlay switch. For projects with 200+ tasks this takes under 100ms on modern hardware.
Connector lines are computed after a two-frame requestAnimationFrame delay to ensure DOM layout is complete before measuring positions.
Pan and zoom use CSS transform: scale() translate() — no re-render on each frame, only on mode changes.

Data Source

The WBS Tree View reads directly from project.tasks[] in localStorage — the same data as the Gantt. No separate WBS data structure exists. Any task you add, edit, or delete in the Gantt is immediately reflected when you switch to the WBS view. The two views are always in sync.