fix: truncate long Y-axis labels with ellipsis and tooltip in dimension rankings chart

[impoiler]

Summary

Y-axis labels in the dimension rankings bar chart were taking up too much horizontal space and could overflow without truncation. This PR truncates long dimension names in the chart's Y-axis labels and adds a tooltip <title> element so users can still see the full name on hover.

Changes

• Y-axis labels longer than 14 characters are now truncated with an ellipsis (…), with the full value exposed via an SVG <title> for accessibility and hover visibility
• Y-axis width reduced from 110 to 92 to match the shorter label space
• Left margin reduced from 4 to 0 to reclaim horizontal space

Type of change

• Bug fix
• Feature
• Refactor
• Documentation
• Chore/CI

Affected areas

• Core (Go)
• Transports (HTTP)
• Providers/Integrations
• Plugins
• UI (React)
• Docs

How to test

Navigate to the workspace dashboard and open the Dimension Rankings tab. Find a dimension with a long name (more than 14 characters) and verify:

1. The label is truncated with an ellipsis in the chart
2. Hovering over the label shows the full name via the browser's native tooltip

cd ui
pnpm i || npm i
pnpm build || npm run build

Screenshots/Recordings

Add before/after screenshots showing the truncated Y-axis labels vs. the previous full-length labels.

Breaking changes

• Yes
• No

Related issues

Security considerations

None.

Checklist

• I read docs/contributing/README.md and followed the guidelines
• I added/updated tests where appropriate
• I updated documentation where needed
• I verified builds succeed (Go and UI)
• I verified the CI pipeline passes locally if applicable

Summary by CodeRabbit

• Style
  • Improved dimension ranking chart layout with optimized spacing
  • Long category labels now display with ellipsis truncation for better readability, with full text visible on hover

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 4a3d3314-bbb1-40ae-ad18-4eef9e9b1240

📥 Commits

Reviewing files that changed from the base of the PR and between 4318c76 and 2eb2615.

📒 Files selected for processing (1)

• ui/app/workspace/dashboard/components/dimensionRankingsTab.tsx

---

📝 Walkthrough

Walkthrough

The PR refines the dimension rankings chart display by reducing left margin from 4 to 0 and replacing the YAxis tick renderer with a custom implementation that truncates category labels to 14 characters with ellipsis, includes full labels via SVG title tooltips, and reduces the YAxis width from 110 to 92.

Changes

Chart Display Improvements

Layer / File(s)	Summary
TopDimensionChart margin and label truncation ui/app/workspace/dashboard/components/dimensionRankingsTab.tsx	BarChart left margin is reduced to maximize space. YAxis uses a custom tick renderer that truncates long category names to 14 characters with ellipsis while preserving the full label in SVG title tooltips. YAxis width is reduced to 92 to fit the optimized layout.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

A rabbit trims the chart's margin tight,
Shortening names to a tidy sight,
Fourteen characters hold the view,
The full name waits in a tooltip true,
Hop! The dashboard looks just right. 🐰

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title directly describes the main change: truncating long Y-axis labels with ellipsis and tooltip in the dimension rankings chart, matching the file modifications.
Description check	✅ Passed	The description includes all required sections: Summary, Changes, Type of change (Feature), Affected areas (UI), How to test with steps and commands, Breaking changes, and Security considerations. Screenshots section is noted as needed but not critical.
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 docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 06-01-fix_chart_legend_label_width_in_dashboard_ranking_charts

---

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

[impoiler]

• fix: use fixed table layout and constrain column widths in HeadersTable #3952
• fix: truncate long Y-axis labels with ellipsis and tooltip in dimension rankings chart #3950 👈 (View in Graphite)
• dev

This stack of pull requests is managed by Graphite. Learn more about stacking.

[impoiler]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[greptile-apps]

Confidence Score: 5/5

Safe to merge — the change is a self-contained UI layout fix with no impact on data fetching, routing, or shared components.

The change is narrow: a custom SVG tick renderer replaces a static prop on a single chart axis, plus two numeric constant tweaks. The data path is unchanged, no data-testid attributes are touched, and the existing ChartErrorBoundary already provides a fallback if the renderer throws.

No files require special attention.

Important Files Changed

Filename	Overview
ui/app/workspace/dashboard/components/dimensionRankingsTab.tsx	Replaces the static YAxis tick config with a custom SVG renderer that truncates labels beyond 14 chars with an ellipsis and exposes the full value via an SVG <title>; also reduces YAxis width from 110→92 and left margin from 4→0.

_{Reviews (2): Last reviewed commit: "fix: Chart legend label width in dashboa..." | Re-trigger Greptile}

[akshaydeo]

Merge activity

• Jun 2, 6:11 AM UTC: A user started a stack merge that includes this pull request via Graphite.
• Jun 2, 6:12 AM UTC: @akshaydeo merged this pull request with Graphite.