refactor: Improve widget rendering in data explorer (#2423)

* refactor: Improve widget rendering in data explorer

* Improve layout and widget configuration

* Migrate density and scatter plot to echarts

* Remove obsolete plotly charts

* Remove empty css file

* Migrate indicator to echarts

* Cleanup obsolete code

* Properly restore config from time series chart

* Migrate time series chart to ECharts

* Support multiple axes in time series chart

* Support spike mode

* Remove plotly-based time series chart

* Remove plotly

* Fix several bugs after refactoring

* Fix bug in histogram renderer

* Modify e2e tests

* Add alias names for compatibility

* Fix axis rendering

ui/angular.json

@@ -29,7 +29,6 @@
             ],
             "styles": ["src/scss/main.scss"],
             "scripts": [
-              "node_modules/plotly.js/dist/plotly.min.js",
               "node_modules/jquery/dist/jquery.min.js",
               "node_modules/datatables.net/js/jquery.dataTables.js",
               "node_modules/jquery-ui-dist/jquery-ui.js",

ui/cypress/tests/datalake/widgets/heatmap.spec.ts

@@ -31,6 +31,6 @@ describe('Test Heatmap View in Data Explorer', () => {
         cy.get('mat-checkbox input').click({ force: true });
 
         // Check if heatmap chart is visible
-        cy.get('sp-data-explorer-heatmap-widget').should('be.visible');
+        cy.dataCy('heatmap').should('be.visible');
     });
 });

ui/cypress/tests/datalake/widgets/2d-correlation.smoke.spec.ts → ui/cypress/tests/datalake/widgets/histogram.spec.ts

@@ -18,26 +18,18 @@
 
 import { DataLakeUtils } from '../../../support/utils/datalake/DataLakeUtils';
 
-describe('Test 2d Correlation View in Data Explorer', () => {
+describe('Test Histogram View in Data Explorer', () => {
     beforeEach('Setup Test', () => {
         DataLakeUtils.initDataLakeTests();
     });
 
     it('Perform Test', () => {
-        DataLakeUtils.addDataViewAndWidget('view', 'Persist', '2D Correlation');
+        DataLakeUtils.addDataViewAndWidget('view', 'Persist', 'Histogram');
 
-        // Check if scatter plot is displayed
-        cy.get('g').should('have.class', 'scatterlayer mlayer');
-        cy.get('g.points', { timeout: 10000 })
-            .children()
-            .should('have.length', 10);
-
-        // Change from line plot to scatter plot
+        // Change field for histogram
         DataLakeUtils.selectVisualizationConfig();
-        cy.get('div').contains('Scatter').click();
-        cy.get('div').contains('Density').click();
 
-        // Check if scatter plot is displayed
-        cy.get('g').should('have.class', 'contourlayer mlayer');
+        // Check if histogram chart is displayed
+        cy.dataCy('histogram-chart').should('be.visible');
     });
 });

ui/cypress/tests/datalake/widgets/indicator.spec.ts

@@ -28,16 +28,8 @@ describe('Test Indicator View in Data Explorer', () => {
 
         // Check checkbox
         DataLakeUtils.selectVisualizationConfig();
-        cy.get('mat-checkbox input').click({ force: true });
-        cy.dataCy('data-explorer-select-delta-field')
-            .click()
-            .get('mat-option')
-            .contains('count')
-            .click();
+        cy.dataCy('data-explorer-select-delta-checkbox').click();
 
-        // Check if indicator is displayed
-        cy.get('g').should('have.class', 'indicatorlayer');
-        // Check if delta is displayed
-        cy.get('text').should('have.class', 'delta');
+        cy.dataCy('indicator-chart').should('be.visible');
     });
 });

ui/cypress/tests/datalake/widgets/scatter.smoke.spec.ts

@@ -0,0 +1,32 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { DataLakeUtils } from '../../../support/utils/datalake/DataLakeUtils';
+
+describe('Test Scatter View in Data Explorer', () => {
+    beforeEach('Setup Test', () => {
+        DataLakeUtils.initDataLakeTests();
+    });
+
+    it('Perform Test', () => {
+        DataLakeUtils.addDataViewAndWidget('view', 'Persist', 'Scatter');
+
+        // Check if scatter plot is displayed
+        cy.dataCy('scatter-chart').should('be.visible');
+    });
+});

ui/cypress/tests/datalake/widgets/timeSeriesSave.spec.ts

@@ -63,12 +63,12 @@ const runTestCase = (editOption: boolean) => {
     cy.get('div').contains('Scatter').click();
 
     // Check if scatter plot is displayed
-    cy.get('g', { timeout: 10000 }).should('have.class', 'scatterlayer mlayer');
+    cy.dataCy('time-series-chart').should('be.visible');
 
     // Change second field from line plot to bar plot
     cy.get('div').contains('Line').click();
     cy.get('div').contains('Bar').click();
 
     // Check if bar plot is displayed
-    cy.get('g', { timeout: 10000 }).should('have.class', 'barlayer mlayer');
+    cy.dataCy('time-series-chart').should('be.visible');
 };

ui/deployment/appng5.module.mst

@@ -57,14 +57,17 @@ import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import { ValueDistributionTransform } from './core-ui/echarts-transform/value-distribution.transform';
 import { HistogramTransform } from './core-ui/echarts-transform/histogram.transform';
 import { RoundValuesTransform} from './core-ui/echarts-transform/round-values.transform';
+import { MapTransform } from './core-ui/echarts-transform/map.transform';
 
 import * as echarts from 'echarts';
 import * as transform from 'echarts-simple-transform';
+import 'echarts-gl';
 
 echarts.registerTransform(transform.aggregate);
 echarts.registerTransform(ValueDistributionTransform);
 echarts.registerTransform(HistogramTransform);
 echarts.registerTransform(RoundValuesTransform);
+echarts.registerTransform(MapTransform);
 
 
 import * as $ from 'jquery';