Skip to content

Colour the map by how the code moves and mark components that grew too big - #123

Open
MrLesk wants to merge 7 commits into
mainfrom
task-565-colour-by-metric
Open

MrLesk wants to merge 7 commits into
mainfrom
task-565-colour-by-metric

Conversation

@MrLesk

@MrLesk MrLesk commented Oct 9, 2026 •

Copy link
Copy Markdown
Owner

Implements TASK-565. The live web map gets a Colour by control: None, Commits, Committers, Co-change and Instability, with a legend for the scale. Commit and committer counts come from git log over the last 500 commits, a window you can change, computed after the first paint and never written to Markdown. A component's details list its top co-changing components and mark pairs with no relationship between them. A component far above its container's median in files, lines or connections, at least four times the median and ten files, gets an outlier mark on the map and a line in both details panes. The static export has none of this.

A Codex agent (GPT-6.1 Sol) built this live during the Devoxx Belgium keynote on 9 October, working TASK-565 in one checkout it shared with five other agents. This branch holds only this task's changes: I matched every changed line to the agent session that wrote it and rebuilt the task on a fresh branch from main.

It includes one change by the icon agent (TASK-561) to the metrics control: the metric fills are marked !important, so Colour by wins over accent colours while it is on. That is harmless on its own, and it keeps both merge orders working.

Acceptance criteria, as the agent left them

  • When a live map loads, Groma.md counts for every component the commits and the distinct committers that touched its files in the last 500 commits (a setting), from git log, in the background after the first paint. A repository without history shows no metrics.
  • A Colour by control offers None, Commits, Committers, Co-change and Instability. Buildings take a tint from the chosen metric that reads the same in light, dark and blueprint, with a legend that explains the scale. None restores today's map.
  • Co-change counts for each pair of components the commits that touched both. A component's details list its top co-changing components and mark the pairs that have no relationship between them.
  • A component far above its container's median in files, lines of code or connections (at least four times the median and at least ten files) gets an outlier mark on the building and a line in the details pane naming the measure. The terminal details pane shows the same line.
  • The metrics and the control stay out of the static export and are never written to the architecture Markdown.
  • docs/viewers/web/index.md describes the Colour by control, its metrics, the history window and the outlier rule.

Validation

On stage the agents were told not to install, build or run tests, so these are the first runs of this code.

  • bun run typecheck passes.
  • biome lint: no errors. Five new cognitive-complexity warnings: the metrics module, the Git counts, the metrics control twice, and render.ts.
  • Node tests: 16 pass. Bun suite: 776 pass, 51 skip, 0 fail, the same as main.
  • Not checked by hand: the colours and outlier marks on a live map.

Overlap with the other PRs from this run

map-session.ts and render.ts are shared with other PRs from the same run, and the terminal details pane with the icon (#118) and criticality (#122) PRs. Each adds separate lines.

@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Oct 9, 2026 •

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-10-11T16:49:43.122229Z 6a8c3c0 New commits
🔒 Security Review ✅ Completed 2026-10-09T09:20:53.243920Z 2aac05b PR opened
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@github-actions

github-actions Bot commented Oct 9, 2026 •

Copy link
Copy Markdown

Groma architecture comparison

Changes Added Modified Removed
Components 1 7 0
Relationships 1 0 0

Open before / after comparison

Compared 4b19ce0 (merge base) → 6a8c3c0.

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 2aac05be21

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread src/viewers/web/metrics/control.ts Outdated
#metric-options select, #metric-options input { width: 100%; min-width: 0; color: var(--ink); background: var(--paper); border: 1px solid var(--hairline); border-radius: 3px; padding: 4px; font: inherit; }
#metric-legend { margin-top: 12px; font-size: 11px; line-height: 1.5; }
#metric-legend[hidden] { display: none; }
#metric-legend .metric-scale { height: 8px; margin: 5px 0; background: linear-gradient(to right, rgb(66,135,180), rgb(233,153,66)); border-radius: 2px; }

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Give the metric gradient a nonzero width

When a Colour by metric is selected, this empty scale element is inserted beneath #legend, whose existing #legend div rule in src/viewers/web/page.ts makes the metric legend a flex row. Because this scale has no content and defines only its height, its automatic width collapses to zero, so the promised blue-to-orange gradient is invisible. Give the metric legend a vertical layout and/or the scale an explicit width or flex basis.

Useful? React with 👍 / 👎.

title: Colour the map by how the code moves and mark components that grew too big
status: To Do
assignee: []
status: Done

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Badge Keep the task open until its Definition of Done is verified

The commit changes this task to Done, but Definition of Done items #1 and #2 remain unchecked and the implementation notes explicitly state that executable and runtime validation were not performed. This prematurely closes the task without the required evidence; leave it nonterminal or run the required checks and record objective evidence before setting it to Done.

AGENTS.md reference: AGENTS.md:L281-L282

Useful? React with 👍 / 👎.

Comment thread src/viewers/web/metrics/control.ts Outdated
#metric-legend { margin-top: 12px; font-size: 11px; line-height: 1.5; }
#metric-legend[hidden] { display: none; }
#metric-legend .metric-scale { height: 8px; margin: 5px 0; background: linear-gradient(to right, rgb(66,135,180), rgb(233,153,66)); border-radius: 2px; }
#map .building[data-metric] .face { fill: var(--metric-fill) !important; }

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Preserve ghost styling when applying metric tints

When a live architecture contains a draft component and any Colour by metric is selected, that component receives data-metric just like a stable component. This !important fill then overrides the existing #map .ghost .face { fill: none } rule in src/viewers/web/iso/painting/style.ts, making the draft appear as a solid building and obscuring its ghost status. Exclude ghost buildings from this override or retain the hollow ghost treatment while tinting them.

Useful? React with 👍 / 👎.

This branch was successfully deployed

1 active deployment
github-pages — 6a8c3c0d Deployed Oct 11, 2026 by MrLesk via deploy #206
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant