Update icons for measurement tools

[philippotto]

See https://scm.slack.com/archives/C5AKLAV0B/p1777309359116229

URL of deployed dev instance (used for testing):

• https://updatemeasurementicons.webknossos.xyz/

Steps to test:

• look at the icons in the toolbar
• use dropdown
• check dark/light mode

Issues:

• follow-up to Handle narrow toolbar better #9263

---

(Please delete unneeded items, merge only when none are left open)

• Added changelog entry (create a $PR_NUMBER.md file in unreleased_changes or use ./tools/create-changelog-entry.py)
• Added migration guide entry if applicable (edit the same file as for the changelog)
• Updated documentation if applicable
• Adapted wk-libs python client if relevant API parts change
• Removed dev-only changes like prints and application.conf edits
• Considered common edge cases
• Needs datastore update after deployment

[coderabbitai]

📝 Walkthrough

Walkthrough

A new local helper merges disabled-state styling with a 1.5× scale transform for dropdown option icons; that helper is applied to brush, erase, and measurement tool dropdown icons. An unreleased_changes markdown entry documents the icon improvements.

Changes

Icon styling and menus

Layer / File(s)	Summary
Dropdown style helper frontend/javascripts/viewer/view/action_bar/tools/tool_buttons.tsx	Adds getDropdownIconStyle(isDisabled) merging disabled-state style with transform: "scale(1.5)".
Brush menu dropdown icons frontend/javascripts/viewer/view/action_bar/tools/tool_buttons.tsx	BrushToolMenu dropdown option icons for Brush and Trace now use getDropdownIconStyle(...).
Erase menu dropdown icons frontend/javascripts/viewer/view/action_bar/tools/tool_buttons.tsx	EraseToolMenu dropdown option icons for Erase Brush and Erase Trace now use getDropdownIconStyle(...).
Measurement menu dropdown icons frontend/javascripts/viewer/view/action_bar/tools/tool_buttons.tsx	MeasurementToolMenu dropdown option icons for Line and Area measurement now use getDropdownIconStyle(...).
Changelog unreleased_changes/9569.md	Adds a “Changed” entry noting improved measurement tool icons.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• scalableminds/webknossos#9486: Modifies the same toolbar dropdown menus and related dropdown component wiring.
• scalableminds/webknossos#9394: Earlier change to tool_buttons.tsx that adjusted dropdown icon rendering/styling.

Suggested labels

frontend

Suggested reviewers

• hotzenklotz

Poem

🐇 I scaled a tiny icon bright,
I nudged the menus into light,
From brush to measure, bold and neat,
The dropdowns now stand proud and sweet. 🎨✨

🚥 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 'Update icons for measurement tools' accurately describes the main change: enlarging dropdown icons for measurement and editing tools in the toolbar.
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.
Description check	✅ Passed	The PR description is directly related to the changeset, describing icon updates for measurement tools with test instructions and relevant context.

_{✏️ 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 update-measurement-icons

---

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]

🧹 Nitpick comments (1)

frontend/javascripts/viewer/view/action_bar/tools/tool_buttons.tsx (1)

461-461: ⚡ Quick win

Consider using fontSize for icon scaling in dropdown menu items for consistency

While transform: scale() works here, using fontSize is more idiomatic for Ant Design Icon sizing and avoids relying on CSS transforms for layout-aware sizing. The Icon component in each dropdown menu item (lines 461 and 482) could be sized via fontSize instead, which participates in the layout system:

🔧 Refactoring suggestion

-  style={{ ...getMaybeDisabledButtonStyle(isLineMeasurementDisabled), transform: "scale(1.5)" }}
+  style={{ ...getMaybeDisabledButtonStyle(isLineMeasurementDisabled), fontSize: "1.5em" }}

-  style={{ ...getMaybeDisabledButtonStyle(isAreaMeasurementDisabled), transform: "scale(1.5)" }}
+  style={{ ...getMaybeDisabledButtonStyle(isAreaMeasurementDisabled), fontSize: "1.5em" }}

Note: The current transform: scale() approach is already used elsewhere in the codebase (e.g., brush_presets.tsx, view_modes_view.tsx) and works without issues. This change improves stylistic consistency rather than fixing a bug.

Also applies to: 482-482

🤖 Prompt for 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.

In `@frontend/javascripts/viewer/view/action_bar/tools/tool_buttons.tsx` at line
461, Replace the inline CSS transform scaling on the Icon elements used in the
dropdown menu items in tool_buttons.tsx with an explicit fontSize style so the
Ant Design Icon participates in layout sizing; locate the Icon JSX inside the
dropdown menu items (the entries around the current transform: scale(...)
usages) and change the style from transform: scale(...) to style={{ fontSize:
<appropriateValue> }} (match the numeric scale to an equivalent fontSize) for
both occurrences so the icons size consistently with other Ant Design icons.

🤖 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.

Nitpick comments:
In `@frontend/javascripts/viewer/view/action_bar/tools/tool_buttons.tsx`:
- Line 461: Replace the inline CSS transform scaling on the Icon elements used
in the dropdown menu items in tool_buttons.tsx with an explicit fontSize style
so the Ant Design Icon participates in layout sizing; locate the Icon JSX inside
the dropdown menu items (the entries around the current transform: scale(...)
usages) and change the style from transform: scale(...) to style={{ fontSize:
<appropriateValue> }} (match the numeric scale to an equivalent fontSize) for
both occurrences so the icons size consistently with other Ant Design icons.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f047379b-89fb-4351-8730-7e8e128f3675

📥 Commits

Reviewing files that changed from the base of the PR and between 2760c7d and 9c680f5.

⛔ Files ignored due to path filters (2)

• frontend/assets/images/icons/icon-area-measurement.svg is excluded by !**/*.svg
• frontend/assets/images/icons/icon-line-measurement.svg is excluded by !**/*.svg

📒 Files selected for processing (1)

• frontend/javascripts/viewer/view/action_bar/tools/tool_buttons.tsx