[ZEPPELIN-6265] Support classic Helium viz packages in new UI by tbonelee · Pull Request #5006 · apache/zeppelin

tbonelee · 2025-08-02T06:55:38Z

What is this PR for?

This PR enables the use of external Helium visualization packages, which are previously available only in the classic UI, in the new UI.

The process of loading and importing Helium packages, as well as rendering them, closely follows the logic from the classic UI.

Since the new-style visualization classes in the new UI are not compatible with the existing ones, the implementation branches accordingly to handle both.

Classic Helium visualization packages depend on legacy technologies such as AngularJS, jQuery, and several visualization libraries, which had to be included as a result.
For Bootstrap styles, conflicts arose with existing styles, so I copied and modified the original HTML templates to prevent clashes.
If a Helium package attempts to use the original HTML template, it will be replaced with the modified version.

Additionally, I identified that the Helium visualization support classes from the discontinued development of the new UI are no longer in use, so I removed them.

What type of PR is it?

Improvement

Todos

[v] - Added support for loading Helium packages
[v] - Fixed style mismatches in Helium packages
[v] - Other functional issues resolved

What is the Jira issue?

https://issues.apache.org/jira/browse/ZEPPELIN-6265

How should this be tested?

Enables a classic Helium visualization package in the classic UI, and verify that it works in the new UI.
- Note: The /helium package management page has not yet been added.

Questions:

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

ParkGyeongTae · 2025-08-03T10:48:12Z

@@ -0,0 +1,28 @@
+import { HeliumPackageType } from '@zeppelin/helium';


Could you please add the Apache License header at the top of this file? This ensures compliance with ASF requirements. Thanks!

Thank you for checking! I've fixed it with other Rat-check violations.

seung-00 · 2025-08-16T21:25:25Z

+  icon: string;
+  type: HeliumType;
+  // tslint:disable-next-line:no-any
+  class: any;


How about use unknown (with type narrowing)?

seung-00 · 2025-08-16T21:34:48Z

+  constructor() {}
+
+  // tslint:disable-next-line:no-any
+  addDragDropDirectives(module: any): void {


How about use IModule type from @types/angular?

seung-00 · 2025-08-16T21:49:47Z

+      function(dragDropService: any) {
+        return {
+          restrict: 'A',
+          // tslint:disable-next-line:no-any
+          link: function(scope: any, element: any, attrs: any) {


How about removing the explicit any? Type inference would work correctly here.

tbonelee · 2025-08-17T16:09:00Z

@seung-00
Replaced any types with proper interfaces for classic visualizations.

Added new interfaces instead of reusing the Visualization class from zeppelin-vis, since Helium packages are eval’d at runtime and their prototype chains don’t match. Interfaces were preferred over classes because only the shape is shared across eval’d definitions.

seung-00 · 2025-08-19T15:43:38Z

+    module.service('customDragDropService', [
+      '$parse',
+      // tslint:disable-next-line:no-any
+      function($parse: any) {


Would it be hard to use the types provided by @types/angular here as well?

And I'm not fully sure, but if the TS compiler can infer the type in some places without explicitly declaring it, it might be nice to rely on inference.

Thanks for checking! I'll update it to utilize TS type inference.

seung-00 · 2025-08-19T16:03:17Z

+        this.columns = updatedClassicData.columns;
+        this.rows = updatedClassicData.rows;
+        this.comment = updatedClassicData.comment;
+      }.bind(this)


How about using an arrow function instead of bind? I think it's more readable and more modern way.

seung-00 · 2025-08-19T16:03:59Z

+        const updatedClassicData = this.convertToClassicFormat(modernTableData);
+        this.columns = updatedClassicData.columns;
+        this.rows = updatedClassicData.rows;
+        this.comment = updatedClassicData.comment;


I'm not sure, but it looks like the proxy was supposed to be updated. However, it seems that the TableDataAdapterService instance, which is bound, is being updated instead.

You're right, the this binding was incorrect here. So I changed it to use arrow functions and access through variable names instead.

tbonelee · 2025-08-20T16:32:56Z

@seung-00 I've checked for places where type inference can be used as suggested in the review, and fixed the incorrect this bindings. I've also added proper type definitions to replace any usage in several places.

Reamer

A minor comment on the backend code. I am unable to review the frontend part.

tbonelee · 2025-08-22T01:54:51Z

Rebased onto the master branch and add some Prttier exclusion rules for *.min.css and *.min.js files

ParkGyeongTae · 2025-09-18T00:39:57Z

@tbonelee Please rebase onto the latest master to resolve the conflicts.

# Conflicts: # zeppelin-web-angular/src/app/helium-manager/public-api.ts # zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.ts # zeppelin-web-angular/src/app/pages/workspace/workspace.component.ts

…ions

…arity

…ment and padding

…ormation settings

…ion settings and import font stylesheet

…tibility service

…instead of `any`

…terface and remove unnecessary `any` types

…service` with `factory`

# Conflicts: # zeppelin-web-angular/.prettierignore

tbonelee · 2025-09-18T02:38:00Z

Rebased it onto the master branch

ParkGyeongTae

LGTM 👍

### What is this PR for? This PR enables the use of external Helium visualization packages, which are previously available only in the classic UI, in the new UI. The process of loading and importing Helium packages, as well as rendering them, closely follows the logic from the classic UI. Since the new-style visualization classes in the new UI are not compatible with the existing ones, the implementation branches accordingly to handle both. Classic Helium visualization packages depend on legacy technologies such as AngularJS, jQuery, and several visualization libraries, which had to be included as a result. For Bootstrap styles, conflicts arose with existing styles, so I copied and modified the original HTML templates to prevent clashes. If a Helium package attempts to use the original HTML template, it will be replaced with the modified version. Additionally, I identified that the Helium visualization support classes from the discontinued development of the new UI are no longer in use, so I removed them. ### What type of PR is it? Improvement ### Todos * [v] - Added support for loading Helium packages * [v] - Fixed style mismatches in Helium packages * [v] - Other functional issues resolved ### What is the Jira issue? https://issues.apache.org/jira/browse/ZEPPELIN-6265 ### How should this be tested? * Enables a classic Helium visualization package in the classic UI, and verify that it works in the new UI. - Note: The `/helium` package management page has not yet been added. ### Questions: * Does the license files need to update? No * Is there breaking changes for older versions? No * Does this needs documentation? No Closes #5006 from tbonelee/helium-vis. Signed-off-by: ChanHo Lee <chanholee@apache.org> (cherry picked from commit 948f165) Signed-off-by: ChanHo Lee <chanholee@apache.org>

tbonelee · 2025-09-19T12:17:29Z

Thanks for the reviews, I've merged this into master and branch-0.12

ParkGyeongTae reviewed Aug 3, 2025

View reviewed changes

seung-00 reviewed Aug 16, 2025

View reviewed changes

seung-00 reviewed Aug 19, 2025

View reviewed changes

tbonelee force-pushed the helium-vis branch 2 times, most recently from 8410ad5 to 840c9c3 Compare August 20, 2025 15:36

Reamer reviewed Aug 21, 2025

View reviewed changes

Comment thread zeppelin-zengine/src/main/java/org/apache/zeppelin/helium/HeliumBundleFactory.java Outdated

tbonelee force-pushed the helium-vis branch from 7beaf9f to cc84b19 Compare August 22, 2025 01:53

seung-00 approved these changes Aug 23, 2025

View reviewed changes

tbonelee force-pushed the helium-vis branch 2 times, most recently from b1bdabf to 5b4529a Compare September 7, 2025 13:30

tbonelee mentioned this pull request Sep 16, 2025

[ZEPPELIN-6327] Fix wrong order of the arguments for Visualization components #5074

Merged

tbonelee added 15 commits September 18, 2025 11:03

Change HELIUM_BUNDLE_VARS to use window object

a2cf3d5

Remove unnecessary deprecated field

4d6590d

Handle classic helium vis packages

7607b5c

# Conflicts: # zeppelin-web-angular/src/app/helium-manager/public-api.ts # zeppelin-web-angular/src/app/pages/workspace/share/result/result.component.ts # zeppelin-web-angular/src/app/pages/workspace/workspace.component.ts

Handle classic helium vis packages

cf6911d

Rerender after helium vis loaded

bdd0959

Enhance setting support for classic visualizations

1dd09a2

Support dynamic display of configuration panel for classic visualizat…

02b26c5

…ions

Fix not showing helium viz icons

57be375

Fix transformation setting rendering to be called after templates loaded

3865d17

Remove unnecessary method checks

bd96d66

Refactor new Promise() to async method

b95c505

Remove redundant methods for creating setting elements

d575eb5

Fix wrong value setup for viz config

3460fe7

temp

f6b7885

Extract AngularDragDropService to a separate class for better modul…

3dbbbba

…arity

tbonelee and others added 18 commits September 18, 2025 11:23

Export ClassicVisualizationService in public API

2a0ffd0

Fix axis rendering styles in transformation settings for better align…

ac77164

…ment and padding

Fix incorrect rendering of paramSpec.description in advanced transf…

dc3af5a

…ormation settings

Add jquery, d3 dependency for classic helium packages

dfd68c6

Replace Unicode icons with Font Awesome icons in advanced transformat…

9cbe44c

…ion settings and import font stylesheet

Add ColumnSelectorTransformation setting template and bootstrap compa…

19dbc48

…tibility service

Add other classic viz transformation templates

d32e36f

Fix rat check violations

afb84ca

Update addDragDropDirectives method to use typed angular.IModule …

45da50f

…instead of `any`

Remove unnecessary any keywords

b2b1970

Remove any keywords if possible

335135d

Add type property to HeliumVisualizationBundle interface

8c33864

Refactor TableDataAdapterService to use HeliumClassicTableData in…

4d9c65c

…terface and remove unnecessary `any` types

Refactor angular-drag-drop.service to improve typings and replace `…

5b32db4

…service` with `factory`

Avoid string concatenation by using StringBuilder.appen()

dbdd563

Update .prettierignore to exclude .min.js and .min.css files

4a9032f

# Conflicts: # zeppelin-web-angular/.prettierignore

Fix lint errors

bd423cf

Fix import error

99673d7

tbonelee force-pushed the helium-vis branch from 5b4529a to 99673d7 Compare September 18, 2025 02:37

ParkGyeongTae approved these changes Sep 18, 2025

View reviewed changes

tbonelee merged commit 948f165 into apache:master Sep 19, 2025
15 of 18 checks passed

tbonelee deleted the helium-vis branch September 19, 2025 12:17

		@@ -0,0 +1,28 @@
		import { HeliumPackageType } from '@zeppelin/helium';

Conversation

tbonelee commented Aug 2, 2025

What is this PR for?

What type of PR is it?

Todos

What is the Jira issue?

How should this be tested?

Questions:

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!

tbonelee commented Aug 17, 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!

seung-00 Aug 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tbonelee commented Aug 20, 2025

Uh oh!

Reamer left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

tbonelee commented Aug 22, 2025

Uh oh!

ParkGyeongTae commented Sep 18, 2025

Uh oh!

tbonelee commented Sep 18, 2025

Uh oh!

ParkGyeongTae left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

tbonelee commented Sep 19, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

seung-00 Aug 19, 2025 •

edited

Loading