Outcome
By the end of this lesson, you will be able to drill into a Sankey node, navigate via the breadcrumb, and share a drilled-in view via URL.
| Prerequisites | M4.8.L1 (Trend vs Flow) · M4.8.L2 (layouts) |
| Time | 9 minutes |
1. Concept
The diagram responds to clicks. Click any band and the whole view narrows to that band, showing what it breaks down into.
A trail at the top shows how you got there, and you can step back from any point. Where you are is held in the address bar, so you can send somebody the exact view you are looking at.
INITIAL STATE: Default layout, full cascade: Provider → Account → Type → Team AWS: $1.5M GCP: $800K Azure: $300K (sum: $2.6M)
CLICK on "AWS": Breadcrumb: AWS Filtered view: only AWS flows remain Columns: all four stay (Provider still shows AWS alone) prod-aws-us-east-1: $640K prod-aws-eu-west: $400K (other AWS accounts): $460K
CLICK on "prod-aws-us-east-1": Breadcrumb: AWS > prod-aws-us-east-1 Filtered view: only flows through this account remain Columns: all four stay EKS: $280K RDS: $180K EC2: $120K ...Each click adds a filter; the breadcrumb is the trail of applied filters.
How drill works
USER CLICKS A NODE: 1. Frontend records the click on a specific node value 2. URL updates with the drill appended to flowFilter: /cost/flow?flowFilter=<the drill chain> 3. The Sankey narrows the data it already loaded: the clicked node is kept and links that do not pass through it are dropped 4. All four columns stay; they just carry less 5. Breadcrumb appears with back-out buttons
NO RE-FETCH: Drill works on the topology already in the browser, one filter per column, so each click is instantOne filter per column
Every layout has four columns, and drill keeps one filter per column. That sets the limit: you can narrow on all four columns, one value each.
NO DRILL: all four columns, full cost surface Provider → Account → Type → Team
1 FILTER: Provider = AWS All four columns stay; only AWS flows remain
2 FILTERS: + Account = prod-aws-us-east-1 Only flows through that account remain
3 FILTERS: + Type = EKS Only that account's EKS spend remains
4 FILTERS: + Team = team-ml-infra One path left through the diagram
CLICK A SECOND VALUE IN THE SAME COLUMN: It replaces the earlier pick in that column; filters never stack within one columnThe Sankey ends at its last column (Team, in every layout). It has no link to individual resources. For “which cluster” or “which pod”, leave the Sankey and open the Resources list with the same provider, account and type, sorted by cost; the resource detail panel gets the rest of the way.
Back-out
The breadcrumb is the back-out mechanism:
BREADCRUMB: AWS > prod-aws-us-east-1 > EKS
OPTIONS: Click "AWS" segment → back to the AWS-only view Click "prod-aws-us-east-1" → back to that account's view Click "Reset all" → back to the full diagram (also clears overlays and other filters)
BROWSER BACK BUTTON: also works Each drill push to the URL is a navigation step Back button rewinds the drillThe breadcrumb-as-trail pattern matches OS-level navigation conventions. Users learn it in seconds.
URL persistence: the key feature
The drill state lives in the URL. This produces three useful properties:
1. SHAREABILITY Copy the URL; paste in Slack or ticket Teammate clicks; sees the exact same view No "look at this thing" without a way to share it
2. BOOKMARK-ABILITY Bookmark "EKS spend in prod-aws-us-east-1" Re-run weekly for ongoing analysis The URL captures layout + time range + drill path
3. STATEFULNESS Reload the page; drill survives Browser back button rewinds the drill No "lost work" if you accidentally close the tabWhy drill matters more than filters
A traditional filter UI (dropdowns at the top of the page) requires constructing the filter chain. Drill is more natural:
FILTER UI (traditional): Provider dropdown: pick "AWS" Account dropdown: pick "prod-aws-us-east-1" Resource type dropdown: pick "EKS"
3 dropdowns; 6+ clicks; pre-knowledge of the names
DRILL UI (Sankey): Click "AWS" node (you see it visually) Click "prod-aws-us-east-1" node (it's biggest, so easy to find) Click "EKS" node (visible by size)
3 clicks; visual; no pre-knowledge requiredThe visual + click pattern is what makes the Sankey efficient for diagnosis. Cost Flow has no filter dropdowns: the layout picker and your clicks are the controls.
Drill with layout
DRILL is layout-aware: - Layout determines which columns appear in the cascade - Drilling clicks a value within one of those columns - The drill filter is on that column's dimension
EXAMPLE in BY SERVICE layout: Cascade: Provider → Account → Service → Team Click "EKS" in the Service column Drill: filter to Service=EKS Subsequent view: all four columns stay; only EKS flows remainHow ZopNight uses drill
The drill state is encoded in the URL (flowFilter) as a set of filter values, at most one per column. The drill itself is applied in the browser to the data already loaded, so a click narrows the view instantly without another query.
For shareability, the URL is canonical: there is no “internal state not in the URL” that would prevent reproducibility. This was a deliberate design decision.
2. Demo
A real cost-spike investigation via drill:
INVESTIGATION: "Yesterday's cost spiked $4K above baseline. Why?"
T+0 Open Costs → Flow Time range: Yesterday
T+5 s Default layout shows: total $32K Cascade: Provider → Account → Type → Team AWS dominates ($24K vs $8K baseline)
T+10 s Click "AWS" in the Provider column Breadcrumb: AWS Sees: prod-aws-us-east-1 is the biggest account ($18K)
T+15 s Click "prod-aws-us-east-1" Breadcrumb: AWS > prod-aws-us-east-1 Sees: EKS dominates ($12K)
T+20 s Click "EKS" Breadcrumb: AWS > prod-aws-us-east-1 > EKS Sees: team-ml-infra owns $11K of the EKS spend team-platform owns $1K
T+25 s Open the Resources list filtered to EKS clusters in prod-aws-us-east-1, sorted by cost Sees: prod-ml-eks-cluster ($10K), prod-platform-eks-1 ($1K)
T+30 s Click the cluster → opens its resource detail panel See the cluster's node groups, pod counts, etc.
T+45 s Identify: ml-eks-cluster grew from 4 nodes to 16 nodes yesterday at 14:00 UTC. Sustained.
T+1 min Investigate further: - Audit log: ml-team member changed HPA max at 13:55 - Asked the engineer: "load test for inference performance" - Decision: load test running; will end Friday
T+1.5 min Action: notify ml-team; confirm cleanup planned Bookmark the URL for tomorrow's follow-up check
T+2 min Copy URL; paste in #ml-team Slack: "Yesterday's cost spike traced to this view: load test ml-eks-cluster scaling from 4 to 16 nodes. Confirm cleanup by Friday."
TEAMMATE clicks the URL; sees the exact same drilled view.90 seconds from question to specific cluster. Sharing the URL preserves context.
3. Hands-on (5 min)
Drill through your estate:
START at Costs → Flow (Default layout)
DRILL PATH: No filter: __________ (total, all providers) Filter 1 click: __________ (which provider? top spender) Filter 2 click: __________ (which account/region?) Filter 3 click: __________ (which type/service?) Filter 4 click: __________ (which team?)
TIME ELAPSED to identify a specific cost component: _____ sec
COPY URL of your drilled-in view: __________________________________________________________
SHARE the URL with a teammate; ask them to confirm what they seeIf the drill took more than 60 seconds, you may have been investigating the wrong cascade: try a different layout for a clearer path.
4. Knowledge check
Q1
Drill-down state is preserved in:
A. Session cookies
B. Browser local storage
C. The URL
D. Server-side session
Show answer
Correct: C. The drill path and layout are URL-encoded, so bookmarking, sharing, reloading and the browser back button all work. The URL is the canonical state, which is what makes Sankey views shareable.
Q2
How far can you drill in the Sankey?
A. Three filters, then the diagram stops responding
B. Unlimited, since each click adds a new column
C. Two filters, one on each side of the diagram
D. One filter per column, so four in every layout
Show answer
Correct: D. Every layout has four columns and drill keeps one filter per column; clicking another value in the same column replaces the earlier pick. Past the team or type level, leave the Sankey and open the Resources list with the same filters.
Q3
A drilled-in URL shared with a teammate:
A. It fails to load for them entirely
B. It requires them to set their own filters
C. Reproduces the exact view they see
D. It drops back to the default view
Show answer
Correct: C. The URL encodes the layout and drill path, so the teammate sees the same view. This is the canonical way to share a cost analysis.
5. Apply
Practice drilling at Costs → Flow. For complex analyses, copy the URL into a ticket or Slack thread: it captures the full context without needing screenshots or written descriptions.
For recurring weekly investigations (e.g., “Monday Cost Flow review”), bookmark a specific drilled-in view as your starting point: the URL captures your team’s preferred cascade and scope.
Related lessons
- L1: Trend vs Flow
- L2: The five Cost Flow layouts
- L4: Savings overlay (next)
- T4.M4.6.L4: Green/yellow/red signals