[ZEPPELIN-6371] Convert published paragraph rendering to Micro Frontend(Angular to React) in New UI

[dididy]

What is this PR for?

Micro Frontend Migration(Angular to React) Proposal

---

Summary

• Implement React-based micro-frontend architecture using Module Federation.
• Convert published paragraph component to support React rendering.
• Add environment-based configuration for development and production builds.

Changes

1. React Micro-Frontend Project Setup

• Created new React project at projects/zeppelin-react/.
• Configured Webpack Module Federation for micro-frontend architecture.
• Set up React 18 with TypeScript support.

2. Component Implementation

New React Components:

• PublishedParagraph: Main entry point for published paragraph rendering.
• SingleResultRenderer: Template for rendering single paragraph results.

Renderers:

• HTMLRenderer: Renders HTML content with sanitization.
• TextRenderer: Renders plain text with ANSI support.
• ImageRenderer: Renders image outputs.

Visualizations:

• TableVisualization: Table rendering with sorting, filtering, and export.
• VisualizationControls: Control panel for table operations.

Common Components:

• Loading: Loading state indicator.
• Empty: Empty state display.

3. Angular Integration

• paragraph.component.ts: Added React widget loading logic via Module Federation.

• paragraph.component.html: Added React container element.

• environment.ts / environment.prod.ts: Added reactRemoteEntryUrl configuration.

  • Development: http://localhost:3001/remoteEntry.js
  • Production: /assets/react/remoteEntry.js

4. Build Configuration

• angular.json: Copy React build output to /assets/react/.

• webpack.config.js: Configured Module Federation plugin:

  • Dev server: port 3001
  • CORS headers for cross-origin requests
  • Environment-specific publicPath

• proxy.conf.js: Updated proxy configuration.

5. Package

• Added React and React-DOM dependencies.
• Added Webpack and Module Federation plugins.
• Added Ant Design for React UI components.
• Added @antv/g2plot for data visualization (also used in Angular version with G2).

License

This PR uses several open-source libraries. The xlsx (v0.18.5) and typescript (v4.6.4) packages are licensed under Apache-2.0, while all other dependencies and devDependencies (such as react, react-dom, antd, @ant-design/icons, etc.) are licensed under MIT. The MIT license is more permissive than Apache-2.0, so including MIT-licensed packages does not violate Apache-2.0 terms. All packages may be used commercially, and license notices should be included when distributing the project.

Technical Details

Module Federation Configuration

// Development: http://localhost:3001/remoteEntry.js
// Production: /assets/react/remoteEntry.js

new ModuleFederationPlugin({
  name: 'reactApp',
  filename: 'remoteEntry.js',
  exposes: {
    './PublishedParagraph': './src/pages/PublishedParagraph'
  }
})

Usage

• Render published paragraph with React:
  /notebook/{noteId}/paragraph/{paragraphId}?react=true

What type of PR is it?

Improvement

Todos

What is the Jira issue?

ZEPPELIN-6371

How should this be tested?

// Start Zeppelin Server
./mvnw clean install -DskipTests
./mvnw clean package -DskipTests
./bin/zeppelin-daemon.sh start

// Start Zeppelin New UI Client
cd zeppelin-web-angular
nvm use
npm i
npm run start

TextRenderer

http://localhost:4200/#/notebook/2EYDJKFFY/paragraph/20180118-122136_1299905608?react=true

TableVisualization

http://localhost:4200/#/notebook/2EYDJKFFY/paragraph/20180118-122136_1299905608?react=true

ImageRenderer

http://localhost:4200/#/notebook/2F1S9ZY8Z/paragraph/20180117-220535_590781730?react=true

HTMLRenderer - Table

http://localhost:4200/#/notebook/2F1S9ZY8Z/paragraph/paragraph_1580885453474_1167659991?react=true

HTMLRenderer - Script(Bokeh JS)

http://localhost:4200/#/notebook/2F1S9ZY8Z/paragraph/paragraph_1580885707198_-1652524072?react=true

Screenshots (if appropriate)

Questions:

• Does the license files need to update? No
• Is there breaking changes for older versions? No
• Does this needs documentation? No

[tbonelee]

Thank you for the proposal and the PR!

First of all, I agree with the idea of migrating the framework from Angular to React. This change could help lower the barrier for front-end contributions, considering that we currently have few FE committers.

However, since this is quite an epic change, I think it would be good to share this roadmap and gather feedback from Zeppelin developers first.

Below are some examples from previous discussions for reference:

• https://lists.apache.org/thread/h74gvrxg3nf8g12whylkfs9ozblct0bw
• https://lists.apache.org/thread/dng7794l3z74h6ycl4wq78pffrkdwj56

[tbonelee]

Additional requests: if you have some time, could you extract the commits which fix the E2E tests into an separate PR?
We could merge that first to fix brokent tests in master branch, and then rebase that change back into this PR.

[tbonelee]

Thanks for the hard work!

I've pushed a few fixes for type errors, incorrect type definitions that caused the graph.mode value to be read incorrectly, and an issue where table header names were omitted when exporting to an xlsx file.
To address the incorrect type definitions, I replaced the types defined in zeppelin-react with the ones already defined in zeppelin-sdk.

You can check the changes here:
https://github.com/tbonelee/zeppelin/commits/PR_5111-review/

Please take a look and let me know if these changes make sense.

Lastly, it would be great if you could run Prettier once as well. It would add new lines at the EOF automatically.

Details

tbonelee@5772731

• This fixes type incompatibilies which cause type errors. You could check fixes by running npx tsc --noEmit at the root of the zeppelin-react before and after this commit.

tbonelee@85c40f8

• This fixes wrong use of Zeppelin related types.
• It also fixes the bug which could not set current mode in TableVisualization

tbonelee@60ca558

• Fixed a minor type error.

tbonelee@e954a16

• Fixed an issue where table header names were omitted.
• Replace .json_to_sheet() with .aoa_to_sheet().

[tbonelee]

I’ve confirmed that you addressed the other review comments, thank you.

I also pushed an additional commit to add React-related ESLint configuration. Please take a look, and if it looks good, feel free to apply it. Even if we don’t use this exact setup, it would still be safer to have React-related ESLint plugins/rules configured.
(tbonelee@2c3d41f)

I’ve added a few more comments as well.

[dididy]

Review feedback applied - 6e57b12, 165fa85

• TableVisualization: removed index prop, accept ParagraphConfigResult (singular) directly. Replaced useState+useEffect with useMemo per You Might Not Need an Effect.
• main.ts: switched from default export to named export for PublishedParagraph.
• paragraph.component.ts: added JSDoc for loadReactWidget(), added README.md with architecture diagram and "Adding a new React module" guide.

Fix ESLint tsconfig parsing error - 8392663

"project": "./tsconfig.json" resolved from the IDE's working directory (repo root), not from where .eslintrc.json lives. "project": true finds the nearest tsconfig automatically.

Lazy-load heavy dependencies - 3609487

Metric	Before	After	Change
main.js (initial)	1.77 MiB	139 KiB	-92%
562.js (initial)	2.64 MiB	—	removed
Total initial load	4.41 MiB	~139 KiB	-97%

Moved @ant-design/icons, highlight.js, xlsx+file-saver, and @antv/g2plot from static to dynamic imports. Icons use direct path imports instead of the barrel re-export. The rest load via import() at the point they're actually used.

Added "sideEffects": ["*.css"] to package.json - marks JS modules as side-effect-free so webpack can drop unused exports, while keeping CSS imports intact.

Fix React widget lifecycle - 165fa85

loadReactWidget() was inserting a new <script> tag on every call, never called root.unmount() (just wiped innerHTML), and had no onerror handler. Fixed all three: deduplicate script loading, store and call the unmount function from mount(), show error state on failure.

Fix import.meta SyntaxError in styles.js - 3127a61

publicPath: 'auto' made webpack emit import.meta.url in styles.js. That file loads as a regular script, not a module, so the browser rejects it. Set publicPath: '/' and scriptType: 'text/javascript' instead.

[tbonelee]

LGTM

[tbonelee]

Merged into master