fix: OPTIC-2148: Icons in the circles under pre-annotation regions are missing #7506

ricardoantoniocm · 2025-05-09T21:27:16Z

Reason for change

The checkmark and cross icons on the preannotation circles were not displaying correctly. Additionally, the colors of the Accept and Reject buttons were not aligned with the new branding guidelines. This PR addresses both of these issues to improve the visual consistency and user experience.

This PR also introduces a smoother transition animation to the hover state of the buttons as well as displaying the pointer cursor when hovering them.

Screenshots

Before:

After:

Rollout strategy

No specific rollout strategy is required for this visual fix. The changes will be deployed with the next release.

Testing

Log in to the LSO application in the specified environment.
Navigate to a project with a connected model and interactive preannotations enabled (as per the preconditions).
Open a task and ensure a preannotation is displayed for a selected label.
Hover over the circles under the preannotation region.
Verify that the left circle now displays a white cross on a red background (Reject).
Verify that the right circle now displays a white checkmark on a green background (Accept).
Confirm that the Accept and Reject buttons in the preannotation interface reflect the new branding colors.

Risks

Low. This PR primarily involves visual corrections and should not introduce any functional regressions.

Reviewer notes

Please pay close attention to the correct rendering of the icons and the updated button colors.
Ensure that the changes are consistent across different browsers if possible.

General notes

The color adjustments for the Accept and Reject buttons were made to align with the latest branding specifications.
The fix ensures that users can clearly distinguish between the accept and reject actions for preannotations through both color and iconography.

… missing

netlify · 2025-05-09T21:27:22Z

✅ Deploy Preview for label-studio-storybook ready!

Name	Link
🔨 Latest commit	`b3ec229`
🔍 Latest deploy log	https://app.netlify.com/sites/label-studio-storybook/deploys/6824a962267b4200084428c1
😎 Deploy Preview	https://deploy-preview-7506--label-studio-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2025-05-09T21:27:23Z

✅ Deploy Preview for heartex-docs canceled.

Name	Link
🔨 Latest commit	`b3ec229`
🔍 Latest deploy log	https://app.netlify.com/sites/heartex-docs/deploys/6824a96268a156000801fcaf

netlify · 2025-05-09T21:27:26Z

✅ Deploy Preview for label-studio-docs-new-theme canceled.

Name	Link
🔨 Latest commit	`b3ec229`
🔍 Latest deploy log	https://app.netlify.com/sites/label-studio-docs-new-theme/deploys/6824a9624002fa000816b7db

yyassi-heartex · 2025-05-12T13:14:34Z

web/libs/editor/src/components/ImageView/SuggestionControls.jsx

+          fill="#CC5E46"
+          iconColor="#FFFFFF"
          icon={IconCross}
        />
        <ControlButton
          x={32}
          onClick={() => item.annotation.acceptSuggestion(item.id)}
-          fill="#98C84E"
-          iconColor="#fff"
+          fill="#287A72"
+          iconColor="#FFFFFF"


these colors will be the same for light and darkmode, is that intended? if we need separate colors we can look at getCurrentTheme() from web/libs/ui/src/lib/ThemeToggle/ThemeToggle.tsx

and can we use css vars here?

dug into it a little, css var probably wont work because fill gets passed into a Konva Circle component

I tried CSS vars, it didn't work.

@yyassi-heartex the colors look ok on both Light and Dark Mode even though we aren't using the correct vars.

That said, this will need more work because the icons themselves aren't visible and it seems they had not been visible for some time (issue seems unrelated to recent work). The above fix by Brandon unfortunately didn't address the issue.

@hlomzik is this something you could help us look into?

@hlomzik The problem here is simple, though the solution may not be.

The icons never were able to be rendered previously, because it was always requiring an image to be used for canvas, but our icons have always been SVG components through SVGR. So that means this never worked, because the resulting icons for as long as I have been here have been handled through SVGR, and would produce an SVG React component, not a base64 url or url to an svg.

Now, the solution here I would say we can't entertain as is, because it involves using React Server Rendering utilities which I am still surprised it even works on the client like this to be honest. As to what else could we do here, maybe have a special import of the svg which produces a url to the asset instead of a component with the svg inside, that might be a simpler approach.

Thanks for the guidance @bmartel . I'll try that approach.

these icons were definitely working at some point...
I see 2 options:

to modify imports as you mentioned to get the path to svg and add it via Konva.Image. doesn't SVGR allow to get the path or stringified svg?

to recreate this panel in a real svg, this might be more complicated

I'll leave this as unresolved for the time being. It's a low priority fix in any case.

In short, I was not successful in applying the recommended approach (removing React Server Rendering and attempting to pull icons as URLs) after many prompt iterations. Happy to jump back to it with some help.

yeah, that's not a styling issue anymore, it requires some subtle but fundamential changes

…into fb-optic-2148/icons-in-the-circles-under-preannotation-regions-are-missing

…the hover effect and increased icon size so that they are easier to see.

Copilot

Pull Request Overview

This PR fixes the missing icons in the preannotation circles and updates the button colors to match the new branding guidelines, while also introducing a smoother hover state transition.

Update icon source location and colors for Accept/Reject buttons
Introduce hover animations and update cursor behavior
Add polyfills for TextEncoder/TextDecoder in Jest

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
web/libs/editor/src/components/ImageView/SuggestionControls.jsx	Updated icon imports, colors, and hover animations in the SuggestionControls component
web/libs/editor/jest.setup.js	Added polyfills for TextEncoder and TextDecoder for Jest

Copilot · 2025-05-13T17:28:52Z

web/libs/editor/src/components/ImageView/SuggestionControls.jsx

@@ -100,10 +102,13 @@ export const SuggestionControls = observer(({ item, useLayer }) => {

 const ControlButton = ({ x = 0, fill, iconColor, onClick, icon }) => {
  const [img, setImg] = useState(new window.Image());
-  const imageSize = 16;
+  const imageSize = 20;


[nitpick] The intrinsic icon dimensions are set to 12 (in useEffect) while the displayed image size is 20. Consider aligning these dimensions to avoid potential scaling artifacts.

Copilot · 2025-05-13T17:28:52Z

web/libs/editor/src/components/ImageView/SuggestionControls.jsx

+
+    const iconElement = React.createElement(icon, { color: iconColor, width: 12, height: 12 });
+    const svgString = ReactDOMServer.renderToStaticMarkup(iconElement);
+    const base64 = btoa(unescape(encodeURIComponent(svgString)));


The use of 'unescape' is discouraged as it is deprecated. Consider using an alternative method for handling Unicode characters when encoding the SVG to base64.

Suggested change

const base64 = btoa(unescape(encodeURIComponent(svgString)));

const base64 = btoa(decodeURIComponent(encodeURIComponent(svgString)));

…0. Using decodeURIComponent instead of unescape.

hlomzik · 2025-05-13T17:58:34Z

web/libs/editor/src/components/ImageView/SuggestionControls.jsx

+          fill="#CC5E46"
+          iconColor="#FFFFFF"
          icon={IconCross}
        />
        <ControlButton
          x={32}
          onClick={() => item.annotation.acceptSuggestion(item.id)}
-          fill="#98C84E"
-          iconColor="#fff"
+          fill="#287A72"
+          iconColor="#FFFFFF"


oh holy moly... what is this...
that's not funky, that's scary a little. we should really improve our cursor rules to stick to tools we already have.

…into fb-optic-2148/icons-in-the-circles-under-preannotation-regions-are-missing

ricardoantoniocm added 2 commits May 9, 2025 17:07

fix: OPTIC-2148: Icons in the circles under preannotation regions are…

761f855

… missing

Adapts colors of interactive controls to brand.

70f8e61

ricardoantoniocm requested review from hlomzik, Gondragos and nick-skriabin as code owners May 9, 2025 21:27

github-actions bot added the fix label May 9, 2025

ricardoantoniocm removed request for nick-skriabin, hlomzik and Gondragos May 9, 2025 21:29

ensure icon svg is turned into a XML data URL

db72dc5

yyassi-heartex reviewed May 12, 2025

View reviewed changes

ricardoantoniocm added 5 commits May 13, 2025 10:57

Merge branch 'develop' of https://github.com/heartexlabs/label-studio …

964efeb

…into fb-optic-2148/icons-in-the-circles-under-preannotation-regions-are-missing

Fixes icons not being visible on the Accept/Reject buttons. Improved …

c761d2b

…the hover effect and increased icon size so that they are easier to see.

Biome fix.

e8bbe9a

Adds Polyfill for TextEncoder and TextDecoder on jest.setup.js.

18c5366

Biome lint fix.

5c7ebba

ricardoantoniocm self-assigned this May 13, 2025

ricardoantoniocm requested review from bmartel and Copilot May 13, 2025 16:44

Copilot AI reviewed May 13, 2025

View reviewed changes

Applying Copilot suggestions. Setting iconImage width and height to 2…

12d98ca

…0. Using decodeURIComponent instead of unescape.

hlomzik requested changes May 13, 2025

View reviewed changes

Merge branch 'develop' of https://github.com/heartexlabs/label-studio …

b3ec229

…into fb-optic-2148/icons-in-the-circles-under-preannotation-regions-are-missing

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: OPTIC-2148: Icons in the circles under pre-annotation regions are missing #7506

fix: OPTIC-2148: Icons in the circles under pre-annotation regions are missing #7506

ricardoantoniocm commented May 9, 2025 •

edited

Loading

netlify bot commented May 9, 2025 •

edited

Loading

netlify bot commented May 9, 2025 •

edited

Loading

netlify bot commented May 9, 2025 •

edited

Loading

yyassi-heartex May 12, 2025

hlomzik May 12, 2025

yyassi-heartex May 12, 2025

ricardoantoniocm May 12, 2025

ricardoantoniocm May 12, 2025

bmartel May 13, 2025

ricardoantoniocm May 13, 2025

hlomzik May 13, 2025

ricardoantoniocm May 13, 2025

hlomzik May 14, 2025

Copilot AI left a comment

Copilot AI May 13, 2025

Copilot AI May 13, 2025

hlomzik May 13, 2025

	const base64 = btoa(unescape(encodeURIComponent(svgString)));
	const base64 = btoa(decodeURIComponent(encodeURIComponent(svgString)));

fix: OPTIC-2148: Icons in the circles under pre-annotation regions are missing #7506

Are you sure you want to change the base?

fix: OPTIC-2148: Icons in the circles under pre-annotation regions are missing #7506

Conversation

ricardoantoniocm commented May 9, 2025 • edited Loading

Reason for change

Screenshots

Rollout strategy

Testing

Risks

Reviewer notes

General notes

netlify bot commented May 9, 2025 • edited Loading

✅ Deploy Preview for label-studio-storybook ready!

netlify bot commented May 9, 2025 • edited Loading

✅ Deploy Preview for heartex-docs canceled.

netlify bot commented May 9, 2025 • edited Loading

✅ Deploy Preview for label-studio-docs-new-theme canceled.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Copilot AI May 13, 2025

Choose a reason for hiding this comment

Copilot AI May 13, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ricardoantoniocm commented May 9, 2025 •

edited

Loading

netlify bot commented May 9, 2025 •

edited

Loading

netlify bot commented May 9, 2025 •

edited

Loading

netlify bot commented May 9, 2025 •

edited

Loading