fix: cancel http request when level route

- increase gridster item z-index when hover
- fix echarts tooltip when hover

webapp/app/routes/dashboards/dashboards.component.ts

@@ -1,15 +1,16 @@
-import { tap } from 'rxjs';
+import { Subject, takeUntil, tap } from 'rxjs';
 import { VisualizationDragStartEvent } from './visualizations-pool/visualizations-pool.component';
 import { Dashboard, DashboardsService } from './shared/index';
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { CustomizableDashboardComponent } from './shared/layoutable/customizable-dashboard/customizable-dashboard.component';
 
 @Component({
   selector: 'app-dashboards',
   styleUrls: ['./dashboards.component.scss'],
   templateUrl: './dashboards.component.html',
 })
-export class DashboardsComponent implements OnInit {
+export class DashboardsComponent implements OnInit, OnDestroy {
+  private readonly destroy = new Subject<void>();
   public dashboards: Array<Dashboard> = [];
   public currentDashboard: Dashboard | null = null;
 
@@ -29,11 +30,17 @@ export class DashboardsComponent implements OnInit {
 
   public ngOnInit(): void {
     this.dashboardsService.getDashboards()
+      .pipe(takeUntil(this.destroy))
       .pipe(tap(data => this.dashboards = data))
       .pipe(tap(data => this.setCurrentDashboard(data[0])))
       .subscribe();
   }
 
+  public ngOnDestroy() {
+    this.destroy.next();
+    this.destroy.complete();
+  }
+
   public onVisualizationDragStart({ event, visualization }: VisualizationDragStartEvent) {
     if (event.dataTransfer) {
       event.dataTransfer.setData('text/plain', JSON.stringify({

webapp/app/routes/dashboards/shared/layoutable/customizable-dashboard/customizable-dashboard.component.scss

@@ -13,6 +13,9 @@ gridster {
     @include mat.elevation(2);
     overflow: visible;
     border-radius: 8px;
+    &:hover {
+      z-index: 2 !important;
+    }
     &.gridster-item-moving {
       z-index: 2 !important;
     }
@@ -40,4 +43,11 @@ gridster {
       }
     }
   }
+  &.mobile {
+    > gridster-item {
+      &:last-of-type {
+        margin-bottom: 0px !important;
+      }
+    }
+  }
 }

webapp/app/routes/dashboards/shared/layoutable/customizable-dashboard/customizable-dashboard.component.ts

@@ -1,4 +1,4 @@
-import { debounceTime, finalize, Subject, takeUntil, tap } from 'rxjs';
+import { debounceTime, filter, finalize, Subject, takeUntil, tap } from 'rxjs';
 import { Component, ElementRef, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
 import { GridsterConfig, GridType, DisplayGrid, CompactType, GridsterItem, GridsterComponent } from 'angular-gridster2';
 
@@ -67,7 +67,7 @@ export class CustomizableDashboardComponent implements OnInit, OnDestroy {
         // dragHandleClass: 'applet-wrapper-drag-handle',
       },
       resizable: {
-        enabled: true,
+        enabled: false,
       },
 
       keepFixedHeightInMobile: true,
@@ -102,6 +102,7 @@ export class CustomizableDashboardComponent implements OnInit, OnDestroy {
       .subscribe();
     this.itemChangedSubject
       .pipe(takeUntil(this.destroy))
+      .pipe(filter(() => this.editing))
       .pipe(debounceTime(128))
       .pipe(tap(() => {
         // expansion and reduction gridster min rows

webapp/app/routes/dashboards/shared/layoutable/visualization-wrapper/visualization-wrapper.component.scss

@@ -10,5 +10,6 @@
   }
   > main {
     flex: 1 1 auto;
+    height: 0px;
   }
 }

webapp/app/routes/dashboards/visualizations-pool/visualizations-pool.component.ts

@@ -1,5 +1,5 @@
-import { tap } from 'rxjs';
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Subject, takeUntil, tap } from 'rxjs';
+import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
 import { Visualization, VisualizationsService } from '@webapp/routes/visualizations/shared/index';
 
 export interface VisualizationDragStartEvent {
@@ -12,7 +12,9 @@ export interface VisualizationDragStartEvent {
   templateUrl: './visualizations-pool.component.html',
   styleUrls: ['./visualizations-pool.component.scss']
 })
-export class VisualizationsPoolComponent implements OnInit {
+export class VisualizationsPoolComponent implements OnInit, OnDestroy {
+  private readonly destroy = new Subject<void>();
+
   public visualizations: Array<Visualization> = [];
 
   @Output()
@@ -25,10 +27,16 @@ export class VisualizationsPoolComponent implements OnInit {
 
   public ngOnInit(): void {
     this.visualizationsService.getVisualizations()
+      .pipe(takeUntil(this.destroy))
       .pipe(tap(data => this.visualizations = data))
       .subscribe();
   }
 
+  public ngOnDestroy() {
+    this.destroy.next();
+    this.destroy.complete();
+  }
+
   public onDragStart(event: DragEvent, visualization: Visualization) {
     this.visualizationDragStart.emit({ event, visualization });
   }

webapp/app/routes/visualizations/shared/visualization-render/visualization-render.component.ts

@@ -55,7 +55,8 @@ export class VisualizationRenderComponent implements OnInit {
             };
           }),
           tooltip: {
-            trigger: 'axis'
+            confine: true,
+            trigger: 'axis',
           },
         });
       }))