feat: BROS-596: Remove the top bar on the labeling stream #8822

ricardoantoniocm · 2025-11-13T20:35:54Z

This pull request refactors and improves the BottomBar component in the editor UI, focusing on layout, style consistency, and user interaction. It moves the CurrentTask component to the Bottom Bar, enhances button usability and accessibility, and standardizes spacing and visual separation between controls. The changes also update styles to use theme variables and improve feature flag handling for conditional UI elements.

Recordings

Before (LSO)

https://www.loom.com/share/3a6f0e71075143568147b8b1fb55ef92

After (LSO)

https://www.loom.com/share/9626f00290bc4ce58da6dcbdbddbf272

Component and Layout Refactoring:

Introduced the new CurrentTask component to the BottomBar, which displays the current task ID, history controls, and task counter, with improved feature flag support and conditional rendering. [1] [2] [3] [4]
Refactored the Actions component to use semantic div containers instead of Space, grouping action buttons and model actions with clearer separation and updated markup. [1] [2] [3]

UI and Style Improvements:

Updated styles for BottomBar and its children to use theme spacing variables, improved padding, and added visual separators between sections and actions. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]

Button and Interaction Enhancements:

Standardized button sizes, icon usage, and aspect ratios for all action and history buttons; replaced deprecated icons and added tooltips and accessibility labels for improved usability. [1] [2] [3] [4] [5]
Improved feature flag handling and conditional logic for enabling/disabling buttons and actions, including postponing tasks based on comments and session state.

Utility and Import Updates:

Updated imports to expose additional BEM utility (BemWithSpecificContext) for more flexible class name generation.

Icon and Color Consistency:

Updated icon color variables to use theme-based values for consistency across normal, disabled, and negative states. [1] [2] [3] [4]

… Labeling Stream. Adapts style of left-side buttons on BottomBar.

netlify · 2025-11-13T20:36:42Z

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

Name	Link
🔨 Latest commit	`05577e0`
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-docs-new-theme/deploys/69179ae2ba1a58000835fc07

netlify · 2025-11-13T20:36:42Z

✅ Deploy Preview for heartex-docs canceled.

Name	Link
🔨 Latest commit	`05577e0`
🔍 Latest deploy log	https://app.netlify.com/projects/heartex-docs/deploys/69179ae279ebc800088afdac

netlify · 2025-11-13T20:37:58Z

✅ Deploy Preview for label-studio-storybook ready!

Name	Link
🔨 Latest commit	`05577e0`
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-storybook/deploys/69179ae21f644a000858fccc
😎 Deploy Preview	https://deploy-preview-8822--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 project configuration.

netlify · 2025-11-13T20:38:09Z

✅ Deploy Preview for label-studio-playground ready!

Name	Link
🔨 Latest commit	`05577e0`
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-playground/deploys/69179ae20866a500089ad222
😎 Deploy Preview	https://deploy-preview-8822--label-studio-playground.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 project configuration.

codecov · 2025-11-13T20:39:31Z

Codecov Report

❌ Patch coverage is 85.29412% with 5 lines in your changes missing coverage. Please review.
✅ Project coverage is 58.04%. Comparing base (1ef1969) to head (05577e0).

Files with missing lines	Patch %	Lines
...bs/editor/src/components/BottomBar/CurrentTask.jsx	88.46%	3 Missing ⚠️
...b/libs/editor/src/components/BottomBar/Actions.jsx	60.00%	2 Missing ⚠️

❗ There is a different number of reports uploaded between BASE (1ef1969) and HEAD (05577e0). Click for more details.

HEAD has 1 upload less than BASE

Flag BASE (1ef1969) HEAD (05577e0)

pytests 1 0

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #8822      +/-   ##
===========================================
- Coverage    65.77%   58.04%   -7.74%     
===========================================
  Files          811      552     -259     
  Lines        63432    40017   -23415     
  Branches     10690    10675      -15     
===========================================
- Hits         41723    23228   -18495     
+ Misses       21706    16786    -4920     
  Partials         3        3

Flag	Coverage Δ
lsf-e2e	`51.86% <52.94%> (+1.72%)`	⬆️
lsf-integration	`49.31% <52.94%> (+<0.01%)`	⬆️
lsf-unit	`8.04% <71.87%> (-0.06%)`	⬇️
pytests	`?`

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

ricardoantoniocm · 2025-11-13T20:53:56Z

/git merge

Workflow run
Successfully merged: create mode 100644 docs/themes/v2/source/images/admin/command-palette2.png

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/19345548463

bmartel · 2025-11-13T20:59:36Z

This looks fantastic 🔥 @ricardoantoniocm. One question, with the changes here, what happens with the annotation tabs? Do they remain the same as before but take up the whole row of spacing now?

ricardoantoniocm · 2025-11-13T21:08:04Z

Thanks @bmartel ! The annotation tabs take up the whole row of spacing now on Quick View and the Review Stream. Minus the View All / Add Annotation buttons.

bmartel · 2025-11-13T21:10:05Z

web/libs/editor/src/components/BottomBar/Actions.jsx


      {!isViewAll && (
-        <div className={cn("bottombar").elem("section").toClassName()}>
+        <div className={cn("model-actions").toClassName()}>


Is this classname going to fail on testing selectors?

It's probable. But I think the best approach would be to add data-testids to the buttons. I'll add those.

bmartel · 2025-11-13T21:14:36Z

web/libs/editor/src/components/BottomBar/CurrentTask.jsx

+                look="string"
+                disabled={!historyEnabled || !store.canGoPrevTask}
+                onClick={store.prevTask}
+                style={{ background: !isFF(FF_DEV_3873) && "none", backgroundColor: isFF(FF_DEV_3873) && "none" }}


What is this FF_DEV_3873 gating, also why the inline style?

bmartel · 2025-11-13T21:15:47Z

web/libs/editor/src/components/BottomBar/CurrentTask.jsx

+          <div
+            className={cn("current-task")
+              .elem("history-controls")
+              .mod({ newui: isFF(FF_DEV_3873) })


@yyassi-heartex Do you recall what this FF_DEV_3873 is for? I feel there are a lot of changes in this PR that are hinging on its lingering existence, which makes it hard to understand what is necessary.

@bmartel we are basically on UI v3 right now. We had v1 which was finally removed some time ago (FF_1170). And we still have v2 hidden behind feature flag. It's enabled for everyone and is ready to be removed, but it's everywhere, including some tests, so we have to fix them first. One day, one day...

bmartel · 2025-11-13T21:17:35Z

web/libs/editor/src/components/BottomBar/CurrentTask.jsx

+  const [initialCommentLength, setInitialCommentLength] = useState(0);
+  const [visibleComments, setVisibleComments] = useState(0);
+
+  useEffect(() => {
+    store.commentStore.setAddedCommentThisSession(false);
+
+    const reactionDisposer = reaction(
+      () => store.commentStore.comments.map((item) => item.isDeleted),
+      (result) => {
+        setVisibleComments(result.filter((item) => !item).length);
+      },
+    );
+
+    return () => {
+      reactionDisposer?.();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (store.commentStore.addedCommentThisSession) {
+      setInitialCommentLength(visibleComments);
+    }
+  }, [store.commentStore.addedCommentThisSession]);


What does this do?

Basically that's just a TopBar/CurrentTask.jsx moved to BottomBar. This file was not used at all, so it can be fully rewritten with no doubts. And apparently these files overlapped enough to have this specific diffs instead of full rewrite.

This part of the code serves two purposes:

Tracks visible (non-deleted) comments: The first useEffect sets up a MobX reaction that monitors the comment store. Whenever a comment's isDeleted status changes, it recalculates how many comments are still visible and updates the visibleComments state.

Captures baseline comment count: The second useEffect watches for when a user adds their first comment in the current session (addedCommentThisSession flag). When this happens, it saves the current visible comment count as the initialCommentLength. This baseline is likely used to determine how many new comments were added during this session (by comparing current count to initial count).

This component needs to distinguish between comments that existed when the task was opened versus comments added during the current annotation session. This is used to help determine whether a task can be postponed. See lines 52-54.

When FF_DEV_4174 is enabled, the postpone functionality requires at least one "visible" comment.

bmartel · 2025-11-13T21:19:05Z

web/libs/editor/src/components/BottomBar/CurrentTask.jsx

+  if (store.hasInterface("annotations:comments") && isFF(FF_DEV_4174)) {
+    canPostpone = canPostpone && store.commentStore.addedCommentThisSession && visibleComments >= initialCommentLength;
+  }


I'm not 100% sure of this change, or why its necessary to move the topbar CurrentTask down to the bottombar.

Here's the context @bmartel https://humansignal.slack.com/archives/C016L55AYJX/p1762284677894759

But we changed the logic of canPostpone here. Maybe I am not seeing the ask in the messages.

Sorry, just about the moving the CurrentTask to the bottom. The canPostpone shouldn't have changed. I'll check that out.

same here — it's just how it was in original TopBar file

FF_DEV_4174 is specifically turned ON for just one of our customers:

https://app.launchdarkly.com/projects/default/flags/fflag_fix_back_dev_4174_overlap_issue_experiments_10012023_short/targeting?env=test&env=production&selected-env=production

bmartel · 2025-11-13T21:19:33Z

web/libs/editor/src/components/BottomBar/CurrentTask.jsx

-        <div className={cn("current-task").elem("task-id").toClassName()}>
+        <div
+          className={cn("current-task").elem("task-id").toClassName()}
+          style={{ fontSize: isFF(FF_DEV_3873) ? 12 : 14 }}


Similar question here about the need for a FF based inline style

web/libs/editor/src/components/BottomBar/Actions.jsx

ricardoantoniocm · 2025-11-14T21:10:24Z

/git merge

Workflow run
Successfully merged: create mode 100644 web/libs/datamanager/src/components/Filters/types/TaskStateFilter.jsx

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/19377699717

ricardoantoniocm added 4 commits November 12, 2025 16:33

feat: BROS-596: Remove the top bar on the labeling stream

7b6f709

Fix bem temporarily.

0682dcd

Moves CurrentTask component from TopBar to BottomBar. Hides TopBar on…

76696f7

… Labeling Stream. Adapts style of left-side buttons on BottomBar.

Linter fixes.

ec5c559

github-actions bot added the feat label Nov 13, 2025

ricardoantoniocm self-assigned this Nov 13, 2025

ricardoantoniocm marked this pull request as ready for review November 13, 2025 20:46

ricardoantoniocm requested review from hlomzik and nick-skriabin as code owners November 13, 2025 20:46

ricardoantoniocm requested review from a team and yyassi-heartex November 13, 2025 20:46

Merge branch 'develop' into 'fb-bros-596/remove-top-bar-labeling-stream'

5448309

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/19345548463

bmartel reviewed Nov 13, 2025

View reviewed changes

Adds data-testids. Reverts order of logic in canPostpone.

da4732d

ricardoantoniocm commented Nov 14, 2025

View reviewed changes

web/libs/editor/src/components/BottomBar/Actions.jsx Outdated Show resolved Hide resolved

ricardoantoniocm added 2 commits November 14, 2025 14:50

Removes unnecessary !p-0 from buttons.

5242898

Hide the CurrentTask component on Bulk Labeling mode.

67f9246

Merge branch 'develop' into 'fb-bros-596/remove-top-bar-labeling-stream'

05577e0

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/19377699717

feat: BROS-596: Remove the top bar on the labeling stream #8822

Are you sure you want to change the base?

feat: BROS-596: Remove the top bar on the labeling stream #8822

Uh oh!

Conversation

ricardoantoniocm commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Recordings

Before (LSO)

After (LSO)

Uh oh!

netlify bot commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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

Uh oh!

netlify bot commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for heartex-docs canceled.

Uh oh!

netlify bot commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for label-studio-storybook ready!

Uh oh!

netlify bot commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for label-studio-playground ready!

Uh oh!

codecov bot commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

ricardoantoniocm commented Nov 13, 2025 • edited by robot-ci-heartex Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bmartel commented Nov 13, 2025

Uh oh!

ricardoantoniocm commented Nov 13, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ricardoantoniocm commented Nov 14, 2025 • edited by robot-ci-heartex Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ricardoantoniocm commented Nov 13, 2025 •

edited

Loading

netlify bot commented Nov 13, 2025 •

edited

Loading

netlify bot commented Nov 13, 2025 •

edited

Loading

netlify bot commented Nov 13, 2025 •

edited

Loading

netlify bot commented Nov 13, 2025 •

edited

Loading

codecov bot commented Nov 13, 2025 •

edited

Loading

ricardoantoniocm commented Nov 13, 2025 •

edited by robot-ci-heartex

Loading

ricardoantoniocm commented Nov 14, 2025 •

edited by robot-ci-heartex

Loading