feat: extend visualization creation flow to support SQL mode with validation and improved UI elements

Author: elmilan06

frontend/src/app/graphic-builder/visualization/visualization-save/visualization-save.component.ts

@@ -37,7 +37,11 @@ export class VisualizationSaveComponent implements OnInit {
 
   ngOnInit() {
     this.initFormSaveVis();
-    cleanVisualizationData(this.visualization).then(visualization => {
+    const visualizationPromise = this.visualization.chartType === ChartTypeEnum.TAG_CLOUD_CHART
+      ? Promise.resolve(this.visualization)
+      : cleanVisualizationData(this.visualization);
+
+    visualizationPromise.then(visualization => {
       this.visualizationToSave = visualization;
       if (this.mode === 'edit') {
         this.visSaveForm.get('name').setValue(this.visualizationToSave.name);
@@ -46,6 +50,7 @@ export class VisualizationSaveComponent implements OnInit {
     });
   }
 
+
   initFormSaveVis() {
     this.visSaveForm = this.fb.group(
       {

frontend/src/app/shared/chart/factories/echart-factory/charts/tag-cloud.ts

@@ -17,9 +17,12 @@ export class TagCloud implements ChartBuildInterface {
   buildChart(data?: any[], visualization?: VisualizationType): ChartOption {
     const tagOptions: UtmTagCloudOptionType = visualization.chartConfig;
     tagOptions.series[0].data = this.extractTagValues(data, visualization);
-    tagOptions.series[0].name = visualization.queryLanguage === ChartBuilderQueryLanguageEnum.SQL ?
-      tagOptions.series[0].name = data.length > 0 && data[0].bucketId ? data[0].bucketId : 'Count'
-      : getBucketLabel(0, visualization);
+
+    tagOptions.series[0].name =
+      visualization.queryLanguage === ChartBuilderQueryLanguageEnum.SQL
+        ? (data && data.length > 0 && data[0].bucketId ? data[0].bucketId : 'Count')
+        : getBucketLabel(0, visualization);
+
     return tagOptions;
   }