Skip to content

Improve diff visualization with colored triangles and thicker lines#77

Open
mircealungu wants to merge 2 commits intomasterfrom
feature/diff-visual-improvements
Open

Improve diff visualization with colored triangles and thicker lines#77
mircealungu wants to merge 2 commits intomasterfrom
feature/diff-visual-improvements

Conversation

@mircealungu
Copy link
Contributor

Summary

  • Replace (+N) and (-N) dependency change indicators with colored triangle symbols: green ▲ for increases, red ▼ for decreases
  • Increase thickness of colored diff lines to 2px for better visibility in GitHub

Test plan

  • Run archlens render-diff on a project with dependency changes
  • Verify triangles appear with correct colors (green up, red down)
  • Verify diff lines are visibly thicker than before

🤖 Generated with Claude Code

Replace parenthetical (+N)/(-N) dependency change indicators with colored
triangle symbols: green ▲ for increases, red ▼ for decreases. Also increase
the thickness of colored diff lines to 2px for better visibility.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
@github-actions
Copy link

github-actions bot commented Dec 5, 2025

ArchLens - No architecturally relevant changes to the existing views

…theses

- Move triangle indicator to new line below dependency count
- Make indicator text smaller (size 10) and bold
- Wrap indicator in parentheses for clarity

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
@mircealungu
Copy link
Contributor Author

mircealungu commented Dec 5, 2025

Ehi @SebastianHylander and @casperh123 - would this changes interfere with the extension in any way?

The goal is to render the diff edges thicker and the deltas with triangles like the stock tickers :)

zeeguu-api-diff-inside-api

Copy link
Member

@casperh123 casperh123 left a comment

Choose a reason for hiding this comment

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

I think these changes are safe to implement. After looking around in the extension code i don't see that these changes should break anything, but they might change how the graph is rendered in the extension aswell

diff_indicator = f"<size:10><b><color:red>(▼{abs(diff)})</color></b></size>"
dependency_count = (
f"{local_value.dependency_count} ({sign}{diff})"
f"{local_value.dependency_count}\\n{diff_indicator}"
Copy link
Member

Choose a reason for hiding this comment

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

This will be probably change the indicator for the extension as well. That might actually be what we want do, since it aligns the interfaces?

"to_package": remote_value.to_package,
"color": color,
"label": f"0 ({dependency_count})",
"label": f"0\\n<size:10><b><color:red>(▼{abs(dependency_count)})</color></b></size>",
Copy link
Member

Choose a reason for hiding this comment

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

This will probably also just change how the extension renders the graph, but i don't think it is a breaking change.

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.

2 participants

Comments