25 uiux fix poor color contrast for chart layers against dark theme

[Asifdotexe]

Summary by CodeRabbit

• New Features

  • Added milestone visualization markers to charts with hover interactions
  • Redesigned insights metric to display foundation code percentage
  • Enhanced tooltips with foundation/refactored breakdown and milestone banners

• Documentation

  • Extended configuration format to support milestone definitions for repositories

• Style

  • Improved fossil section styling and card layouts
  • Refined gradient transparency effects in visualizations

[coderabbitai]

Warning

Rate limit exceeded

@Asifdotexe has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 23 minutes and 25 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 62a4c038-315e-4bf4-aece-73d21210b03b

📥 Commits

Reviewing files that changed from the base of the PR and between 7772194 and 9db29b4.

📒 Files selected for processing (2)

• app.js
• style.css

📝 Walkthrough

Walkthrough

This PR extends Theseus with milestone visualization and reframes code genealogy metrics around a "foundation year" concept. It adds milestone arrays to the repository configuration, updates the insights UI to show how much code remains from the foundation rather than how much has changed, implements interactive milestone markers on the chart, refactors tooltip logic to display foundation/refactored line counts, and enhances fossil card styling throughout.

Changes

Milestone Visualization and Foundation Framing

Layer / File(s)	Summary
Milestone Configuration Schema and Documentation theseus.config.json, docs/CONFIGURATION.md	Configuration now includes milestones arrays for each repository, with documented date (YYYY-MM), title, and description fields. Configuration schema guide is extended to describe the milestone structure.
Insights UI and Foundation-Based Metrics index.html, app.js, style.css	"Card-evolution" card title changes from "How much has changed?" to "How much foundation remains?", velocity and rebuild insight cards are removed, fossil descriptions use consistent .fossil-description styling, and updateInsights() computes percent-replaced from the latest snapshot's foundation-line share.
Milestone Markers, Tooltips, and Gradient Refinements app.js, style.css	Gradient stop opacities are adjusted, new renderMilestoneMarkers() helper renders star markers at milestone dates with hover text behavior, showTooltip() is rewritten to display foundation and refactored line counts plus optional milestone banners, fossil links use the fossil-link CSS class, and milestone banner UI styles are introduced.
Fossil Grid and Card Styling Refinements index.html, style.css	Fossil hint text is inserted before the grid, and fossil card styling is enhanced with improved padding, hover translations, interactive label arrows with fade-in effects, underlined links, and flex-wrapped metadata layouts.
General Styling Cleanup and Utility Classes style.css	A .visually-hidden utility class is added for screen-reader-only content, explicit opacity values are removed from button and UI element base styles to improve hover/active state clarity, and tooltip layout gaps are adjusted for better spacing.

Sequence Diagram

sequenceDiagram
  participant Config as Repository Config
  participant Chart as renderChart()
  participant Milestone as renderMilestoneMarkers()
  participant Insight as updateInsights()
  participant Tooltip as showTooltip()
  Config->>Chart: load milestones array
  Chart->>Milestone: call with xScale and milestones
  Milestone->>Milestone: compute x-positions from milestone dates
  Milestone->>Milestone: append SVG markers with hover behavior
  Insight->>Insight: compute foundation share from latest snapshot
  Tooltip->>Tooltip: scan milestones for near-snapshot events
  Tooltip->>Tooltip: build foundation/refactored line counts
  Tooltip->>Tooltip: render milestone banner if applicable

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• Asifdotexe/Theseus#18: Both PRs modify app.js's fossil rendering and link styling; main PR switches to fossil-link CSS class while retrieved PR updates renderFossils() to generate GitHub blob anchors.
• Asifdotexe/Theseus#9: Main PR significantly extends TheseusVisualizer functionality from PR #9, especially renderChart(), showTooltip(), and updateInsights() in app.js, building directly on the same code paths.
• Asifdotexe/Theseus#20: Both PRs touch app.js's fossil link rendering; one rewrites link building with safe DOM and view_commit-aware refs, the other adjusts the generated anchor to use the fossil-link class instead of inline styling.

Poem

🐰 A rabbit's ode to milestones past,
Foundation stones forever cast,
Stars now mark the turning tide,
With tooltips showing what survives inside,
Fossils gleam in grids refined—
Time made visible, code redesigned. 🌟

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The PR title focuses on color contrast for chart layers, but the changeset includes major feature additions (milestone markers, foundation/refactored metrics, tooltip redesign) that far exceed the title's scope.	Revise the title to reflect the primary changes: milestone visualization, tooltip redesign with foundation metrics, or a more comprehensive description of all major features added.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 25-uiux-fix-poor-color-contrast-for-chart-layers-against-dark-theme

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@app.js`:
- Around line 489-492: The code selects oldestSurvivingYear from all year keys
(existingYears) even if that year has no surviving line value in this snapshot;
change the key filtering to only include year keys that are not 'date'/'total'
AND that have a positive/truthy value in point (e.g.,
Object.keys(point).filter(k => k !== 'date' && k !== 'total' &&
point[k]).sort()), then derive oldestSurvivingYear and oldestSurvivingVal from
that filtered list; apply the same change to the duplicate logic around the
other block that uses existingYears/oldestSurvivingYear (the block at lines
~547-558) so the “Oldest surviving” tooltip only picks years that actually
survive in this snapshot.

In `@style.css`:
- Around line 13-23: Update the .visually-hidden utility to use the modern
clip-path property while keeping the existing clip line as a fallback: add
clip-path: inset(50%); (and optionally -webkit-clip-path for broader support)
alongside the existing clip declaration in the .visually-hidden rule so modern
browsers use clip-path but legacy browsers still fall back to clip.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 9cad9489-dc99-4548-9077-6bbff6d8b184

📥 Commits

Reviewing files that changed from the base of the PR and between 1985d2e and 7772194.

📒 Files selected for processing (5)

• app.js
• docs/CONFIGURATION.md
• index.html
• style.css
• theseus.config.json