feat: FIT-953: Improve the JSON Viewer

[ricardoantoniocm]

This pull request introduces a new, feature-flagged interactive JSON viewer for viewing task source data in the Data Manager, replacing the older inline implementation with a more modular and extensible approach. It adds a new TaskSourceViewer component with support for toggling between a code view and an interactive JSON viewer, improves styling and copy-to-clipboard functionality, and updates modal integration. Several supporting UI exports and feature flags are also added.

Recording

https://www.loom.com/share/d153d666f4ba407b881def51d990f3a1

Task Source Viewer Refactor and Interactive JSON Viewer Integration:

• Introduced a new TaskSourceViewer component that loads and displays task source data, allowing users to switch between a formatted code view and an interactive JSON viewer, controlled by the FF_INTERACTIVE_JSON_VIEWER feature flag. The component supports localStorage persistence of view mode and external rendering of the view toggle (e.g., in a modal header). (TaskSourceViewer.tsx, CodeView.tsx, ViewToggle.tsx, index.ts, feature-flags.js, [1] [2] [3] [4] [5]

• Replaced the old inline TaskSourceView implementation in the table modal with the new TaskSourceViewer, updating modal integration to allow rendering the view toggle in the modal header and adjusting modal width. (Table.jsx, web/libs/datamanager/src/components/Common/Table/Table.jsxL175-R190)

Styling and UI Improvements:

• Added new SCSS modules for TaskSourceViewer and CodeView to improve layout, code block appearance, and copy button styling. (TaskSourceViewer.module.scss, CodeView.module.scss, [1] [2]

• Updated global scrollbar color for consistency in dark mode. (global.scss, web/libs/editor/src/assets/styles/global.scssR207-R210)

UI Library and Icon Updates:

• Exported the new JsonViewer component and related types from the UI library, along with Tabs components needed for the view toggle. (ui/src/index.ts, ui/src/lib/json-viewer/index.ts, [1] [2]

• Added a new icon export IconBookOpenText to the UI icon set. (ui/src/assets/icons/index.ts, web/libs/ui/src/assets/icons/index.tsR38)

Code Cleanup:

• Removed the old TaskSourceView component and unused imports from the table component. (Table.jsx, [1] [2]

• Added the new TaskSourceViewer import to the table component. (Table.jsx, web/libs/datamanager/src/components/Common/Table/Table.jsxR19)

[netlify]

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

Name	Link
🔨 Latest commit	13d281b
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-docs-new-theme/deploys/697a8fd88fc4b10008b46694

[netlify]

✅ Deploy Preview for label-studio-storybook ready!

Name	Link
🔨 Latest commit	13d281b
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-storybook/deploys/697a8fd8eb6fb40008f99fe6
😎 Deploy Preview	https://deploy-preview-9245--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]

✅ Deploy Preview for heartex-docs canceled.

Name	Link
🔨 Latest commit	13d281b
🔍 Latest deploy log	https://app.netlify.com/projects/heartex-docs/deploys/697a8fd88fc4b10008b46692

[netlify]

✅ Deploy Preview for label-studio-playground ready!

Name	Link
🔨 Latest commit	13d281b
🔍 Latest deploy log	https://app.netlify.com/projects/label-studio-playground/deploys/697a8fd8636b440008320981
😎 Deploy Preview	https://deploy-preview-9245--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.

[ricardoantoniocm]

/git merge

Workflow run
Successfully merged: create mode 100644 web/libs/core/src/lib/preview/utils.ts

[ricardoantoniocm]

/git merge

Workflow run
Successfully merged: 13 files changed, 279 insertions(+), 137 deletions(-)

[ricardoantoniocm]

/git merge

Workflow run
Successfully merged: 2 files changed, 4 insertions(+), 4 deletions(-)

[codecov]

Codecov Report

❌ Patch coverage is 4.27350% with 112 lines in your changes missing coverage. Please review.
✅ Project coverage is 56.39%. Comparing base (834ce89) to head (13d281b).
⚠️ Report is 4 commits behind head on develop.

Files with missing lines	Patch %	Lines
web/libs/ui/src/lib/json-viewer/json-viewer.tsx	3.33%	87 Missing ⚠️
.../libs/ui/src/lib/json-viewer/reader-view-modal.tsx	5.88%	16 Missing ⚠️
...libs/ui/src/lib/json-viewer/reader-view-button.tsx	10.00%	9 Missing ⚠️

❗ There is a different number of reports uploaded between BASE (834ce89) and HEAD (13d281b). Click for more details.

HEAD has 1 upload less than BASE

Flag	BASE (834ce89)	HEAD (13d281b)
pytests	1	0

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #9245      +/-   ##
===========================================
- Coverage    65.86%   56.39%   -9.48%     
===========================================
  Files          842      573     -269     
  Lines        65625    41336   -24289     
  Branches     11391    11433      +42     
===========================================
- Hits         43225    23311   -19914     
+ Misses       22396    18021    -4375     
  Partials         4        4              

Flag	Coverage Δ
lsf-e2e	51.70% <4.27%> (-0.14%)	⬇️
lsf-integration	47.67% <4.27%> (-0.07%)	⬇️
lsf-unit	6.74% <ø> (+<0.01%)	⬆️
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]

/git merge

Workflow run
Successfully merged: create mode 100644 web/libs/ui/src/lib/tag-autocomplete/use-tag-autocomplete.ts

[nass600]

Love it ❤️