feat: FIT-14: LabelStudio Playground 2.0 #7521

bmartel · 2025-05-13T14:44:53Z

This pull request introduces the foundational setup and implementation of the LabelStudio Playground, a standalone React application for editing and previewing LabelStudio XML labeling configurations. This implementation will serve as the replacement of the defunct playground used on labelstud.io.

Project Setup and Configuration

Added a .babelrc file to configure Babel with the @nx/react/babel preset for automatic runtime.
Introduced a jest.config.ts file for unit testing, with support for Babel transformations and module name mapping.
Added a project.json file to define build, serve, and test targets using Nx executors for Webpack and Jest.

Documentation and Overview

Created a comprehensive README.mdc file detailing the purpose of the Playground app, its features, architecture, state management, and extensibility.

State Management

Defined Jotai atoms in configAtoms.ts to manage application state, including configuration, loading, error, and annotation data.

UI Components

Added a BottomPanel component to display sample data input and annotation output, with collapsible and resizable functionality. [1] [2]
Implemented an EditorPanel component for XML editing with a resizable bottom panel for input/output display. [1] [2]

Styling

Added SCSS styles in PlaygroundApp.module.scss to lightly customize the appearance of CodeMirror and LabelStudio components.

netlify · 2025-05-13T14:44:59Z

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

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

netlify · 2025-05-13T14:45:01Z

✅ Deploy Preview for label-studio-storybook ready!

Name	Link
🔨 Latest commit	`a74361b`
🔍 Latest deploy log	https://app.netlify.com/sites/label-studio-storybook/deploys/6824dac117f5bf0008e2cb69
😎 Deploy Preview	https://deploy-preview-7521--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-13T14:45:01Z

✅ Deploy Preview for heartex-docs canceled.

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

web/libs/editor/src/components/App/App.jsx

yyassi-heartex · 2025-05-13T15:01:09Z

web/apps/playground/src/components/BottomPanel.tsx

+        className="relative h-[33px] flex flex-row items-center bg-neutral-surface select-none"
+        style={{ minHeight: HEADER_HEIGHT, maxHeight: HEADER_HEIGHT }}


this should do the same thing with out inline styles but if we have the height set - why do we need min and max set too?

Suggested change

className="relative h-[33px] flex flex-row items-center bg-neutral-surface select-none"

style={{ minHeight: HEADER_HEIGHT, maxHeight: HEADER_HEIGHT }}

className={`relative h-[${HEADER_HEIGHT}px] flex flex-row items-center bg-neutral-surface select-none min-h-[${HEADER_HEIGHT}px] max-h-[${HEADER_HEIGHT}px]`}

yeah, if we need to have this height fixed:

h-[${HEADER_HEIGHT}px]

no min/max

flex-shrink: 0

yyassi-heartex · 2025-05-13T15:04:55Z

web/apps/playground/src/components/BottomPanel.tsx

+          className="lsf-button lsf-button_look_ lsf-collapsible-bottom-panel-toggle absolute right-[5px] top-1/2 -translate-y-1/2 !h-6 !w-6 !p-0 flex items-center justify-center !bg-transparent !border-none"
+          style={{ zIndex: 10 }}


this should do the same - but maybe there is a cleaner z-index class that does this?

Suggested change

className="lsf-button lsf-button_look_ lsf-collapsible-bottom-panel-toggle absolute right-[5px] top-1/2 -translate-y-1/2 !h-6 !w-6 !p-0 flex items-center justify-center !bg-transparent !border-none"

style={{ zIndex: 10 }}

className="lsf-button lsf-button_look_ lsf-collapsible-bottom-panel-toggle absolute right-[5px] top-1/2 -translate-y-1/2 !h-6 !w-6 !p-0 flex items-center justify-center !bg-transparent !border-none z-[10]"

yyassi-heartex · 2025-05-13T15:06:48Z

web/apps/playground/src/components/PlaygroundApp.tsx

+  const setLoading = useSetAtom(loadingAtom);
+  const setError = useSetAtom(errorAtom);
+  const setInterfaces = useSetAtom(interfacesAtom);
+  const [editorWidth, setEditorWidth] = useState(50); // percent


lets use a constant as the default value instead of a magic 50

hlomzik · 2025-05-13T15:08:20Z

web/libs/editor/src/LabelStudio.tsx


    const renderApp = () => {
      if (isRendered) {
        clearRenderedApp();
      }
-      render(<App store={this.store} />, rootElement);
+      renderTimeout = setTimeout(() => {


Why do we need to render it like this?

There were errors when unmounting/remounting in quick succession. I am still adjusting for what I have been seeing in different usages, so this could be made redundant.

ah, good! in any case the final version better to have the reasoning described in a comment

yyassi-heartex · 2025-05-13T15:09:00Z

web/apps/playground/src/components/PlaygroundApp.tsx

+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+      const percent = (e.clientX / window.innerWidth) * 100;
+      setEditorWidth(Math.max(20, Math.min(80, percent)));


can we set the default min and max (20 and 80) as constants so we're not using magic numbers

yyassi-heartex · 2025-05-13T15:09:19Z

web/apps/playground/src/components/PlaygroundApp.tsx

+      e.preventDefault();
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+      setEditorWidth(50); // Reset to 50/50 split


this should use the constant from earlier for 50

web/libs/editor/src/components/SidePanels/TabPanels/Tabs.tsx

yyassi-heartex

i have a number of relatively minor suggestions but overall looks good - would love to see this get to production

…es with an empty string name

…panel

web/libs/editor/src/components/SidePanels/TabPanels/PanelTabsBase.tsx

…fb-fit-14

bmartel added 30 commits May 5, 2025 12:56

feat: OPTIC-1799: LabelStudio Playground 2.0

b422440

updating docs and code structure

75b82f3

refactor to use Jotai atoms

400b990

add playground to top level commands for web

7749a51

use the right styles

a3ee374

more styling

5dd75d9

fix editor

4a54d68

fix mounting/updating

6609d7c

fixing code editor

9b408a6

force bottom panel

2536c8d

fix

7cecd22

force bottom panel

05caf32

collapsible bottom panel

7ad7bfa

collapse button

9414a2a

collapse

4003b8a

fix collapse height

41e895e

default collapsed

9eba7e3

Merge remote-tracking branch 'origin/develop' into optic-1799

998707e

fix border

b8cae89

panel resize

d1e78cf

fix tw config

98af1cd

fix bottom panel resizing

2494677

adding ThemeToggle

4b249df

improving LSF handling to use React 18 createRoot and improved tear down

722aca2

fix imports

6a74ccd

Merge remote-tracking branch 'origin/develop' into optic-1799

696ab22

Merge remote-tracking branch 'origin/develop' into fb-fit-14

8e2dc5c

Merge remote-tracking branch 'origin/develop' into fb-fit-14

92ce012

fix bottom panel styles

353cba9

make all resizer separators handled the same

ae52e4d

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

bmartel commented May 13, 2025

View reviewed changes

web/libs/editor/src/components/App/App.jsx Show resolved Hide resolved

bmartel added 2 commits May 13, 2025 09:47

Update web/libs/editor/src/components/App/App.jsx

67fc40a

need this to force bottom panel through settings

0f354c4

yyassi-heartex reviewed May 13, 2025

View reviewed changes

hlomzik reviewed May 13, 2025

View reviewed changes

yyassi-heartex reviewed May 13, 2025

View reviewed changes

web/libs/editor/src/components/SidePanels/TabPanels/Tabs.tsx Show resolved Hide resolved

yyassi-heartex approved these changes May 13, 2025

View reviewed changes

bmartel added 10 commits May 13, 2025 10:20

refactor main component files

9d9a8e7

removing old file

e9e5550

adding a fix to annotation createResult which errors when using Choic…

760823d

…es with an empty string name

embed feature flags from oss in the playground

3a670a3

refactor components more

c40cb19

fix imports

71a5a6c

refactor code editor config to utils, improve the resizing of bottom …

2f4bb18

…panel

move tags schema json to core lib

67187bf

fix default tailwind content paths

1355cfe

Merge remote-tracking branch 'origin/develop' into fb-fit-14

c51ab25

bmartel commented May 14, 2025

View reviewed changes

web/libs/editor/src/components/SidePanels/TabPanels/PanelTabsBase.tsx Outdated Show resolved Hide resolved

bmartel added 4 commits May 14, 2025 12:54

Apply suggestions from code review

3c2ffc0

update readme

ea1de06

Merge branch 'fb-fit-14' of github.com:HumanSignal/label-studio into …

c75ace1

…fb-fit-14

removing setTimeout

a74361b

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: FIT-14: LabelStudio Playground 2.0 #7521

feat: FIT-14: LabelStudio Playground 2.0 #7521

bmartel commented May 13, 2025 •

edited

Loading

netlify bot commented May 13, 2025 •

edited

Loading

netlify bot commented May 13, 2025 •

edited

Loading

netlify bot commented May 13, 2025 •

edited

Loading

yyassi-heartex May 13, 2025

hlomzik May 13, 2025

yyassi-heartex May 13, 2025

yyassi-heartex May 13, 2025

hlomzik May 13, 2025

bmartel May 13, 2025

hlomzik May 13, 2025

yyassi-heartex May 13, 2025

yyassi-heartex May 13, 2025

yyassi-heartex left a comment

		className="relative h-[33px] flex flex-row items-center bg-neutral-surface select-none"
		style={{ minHeight: HEADER_HEIGHT, maxHeight: HEADER_HEIGHT }}

	className="relative h-[33px] flex flex-row items-center bg-neutral-surface select-none"
	style={{ minHeight: HEADER_HEIGHT, maxHeight: HEADER_HEIGHT }}
	className={`relative h-[${HEADER_HEIGHT}px] flex flex-row items-center bg-neutral-surface select-none min-h-[${HEADER_HEIGHT}px] max-h-[${HEADER_HEIGHT}px]`}

		className="lsf-button lsf-button_look_ lsf-collapsible-bottom-panel-toggle absolute right-[5px] top-1/2 -translate-y-1/2 !h-6 !w-6 !p-0 flex items-center justify-center !bg-transparent !border-none"
		style={{ zIndex: 10 }}

feat: FIT-14: LabelStudio Playground 2.0 #7521

Are you sure you want to change the base?

feat: FIT-14: LabelStudio Playground 2.0 #7521

Conversation

bmartel commented May 13, 2025 • edited Loading

Project Setup and Configuration

Documentation and Overview

State Management

UI Components

Styling

netlify bot commented May 13, 2025 • edited Loading

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

netlify bot commented May 13, 2025 • edited Loading

✅ Deploy Preview for label-studio-storybook ready!

netlify bot commented May 13, 2025 • edited Loading

✅ Deploy Preview for heartex-docs 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

yyassi-heartex left a comment

Choose a reason for hiding this comment

bmartel commented May 13, 2025 •

edited

Loading

netlify bot commented May 13, 2025 •

edited

Loading

netlify bot commented May 13, 2025 •

edited

Loading

netlify bot commented May 13, 2025 •

edited

Loading