Merge pull request #5655 from ArtemDzhereleiko/imp/tables/hide-page-size-option

[3.3.3] UI: On tables hide page size option on mobile view

ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html

@@ -196,6 +196,7 @@
                    [pageIndex]="pageLink.page"
                    [pageSize]="pageLink.pageSize"
                    [pageSizeOptions]="[10, 20, 30]"
+                   [hidePageSize]="hidePageSize"
                    showFirstLastButtons></mat-paginator>
     <ngx-hm-carousel fxFlex *ngIf="mode === 'widget' && widgetsList.length > 0"
                      #carousel

ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.scss

@@ -18,6 +18,7 @@
 :host {
   width: 100%;
   height: 100%;
+  display: block;
   .tb-entity-table {
     .tb-entity-table-content {
       width: 100%;

ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts

@@ -84,6 +84,8 @@ import {
 } from '@home/components/attribute/add-widget-to-dashboard-dialog.component';
 import { deepClone } from '@core/utils';
 import { Filters } from '@shared/models/query/query.models';
+import { hidePageSizePixelValue } from '@shared/models/constants';
+import { ResizeObserver } from '@juggle/resize-observer';
 
 
 @Component({
@@ -109,6 +111,7 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
   pageLink: PageLink;
   textSearchMode = false;
   dataSource: AttributeDatasource;
+  hidePageSize = false;
 
   activeValue = false;
   dirtyValue = false;
@@ -127,10 +130,14 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
   aliasController: IAliasController;
   private widgetDatasource: Datasource;
 
+  private widgetResize$: ResizeObserver;
+
   private disableAttributeScopeSelectionValue: boolean;
+
   get disableAttributeScopeSelection(): boolean {
     return this.disableAttributeScopeSelectionValue;
   }
+
   @Input()
   set disableAttributeScopeSelection(value: boolean) {
     this.disableAttributeScopeSelectionValue = coerceBooleanProperty(value);
@@ -184,7 +191,8 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
               private dashboardUtils: DashboardUtilsService,
               private widgetService: WidgetService,
               private zone: NgZone,
-              private cd: ChangeDetectorRef) {
+              private cd: ChangeDetectorRef,
+              private elementRef: ElementRef) {
     super(store);
     this.dirtyValue = !this.activeValue;
     const sortOrder: SortOrder = { property: 'key', direction: Direction.ASC };
@@ -193,6 +201,20 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
   }
 
   ngOnInit() {
+    this.widgetResize$ = new ResizeObserver(() => {
+      const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
+      if (showHidePageSize !== this.hidePageSize) {
+        this.hidePageSize = showHidePageSize;
+        this.cd.markForCheck();
+      }
+    });
+    this.widgetResize$.observe(this.elementRef.nativeElement);
+  }
+
+  ngOnDestroy() {
+    if (this.widgetResize$) {
+      this.widgetResize$.disconnect();
+    }
   }
 
   attributeScopeChanged(attributeScope: TelemetryType) {

ui-ngx/src/app/modules/home/components/entity/entities-table.component.html

@@ -266,6 +266,7 @@
                        [pageIndex]="pageLink.page"
                        [pageSize]="pageLink.pageSize"
                        [pageSizeOptions]="pageSizeOptions"
+                       [hidePageSize]="hidePageSize"
                        showFirstLastButtons></mat-paginator>
       </div>
     </div>

ui-ngx/src/app/modules/home/components/entity/entities-table.component.scss

@@ -18,6 +18,7 @@
 :host {
   width: 100%;
   height: 100%;
+  display: block;
   .tb-entity-table {
     .tb-entity-table-content {
       width: 100%;

ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts

@@ -55,15 +55,13 @@ import { EntityTypeTranslation } from '@shared/models/entity-type.models';
 import { DialogService } from '@core/services/dialog.service';
 import { AddEntityDialogComponent } from './add-entity-dialog.component';
 import { AddEntityDialogData, EntityAction } from '@home/models/entity/entity-component.models';
-import {
+import { calculateIntervalStartEndTime, HistoryWindowType, Timewindow } from '@shared/models/time/time.models';
-  calculateIntervalStartEndTime,
-  HistoryWindowType,
-  Timewindow
-} from '@shared/models/time/time.models';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { TbAnchorComponent } from '@shared/components/tb-anchor.component';
 import { isDefined, isUndefined } from '@core/utils';
 import { HasUUID } from '@shared/models/id/has-uuid';
+import { ResizeObserver } from '@juggle/resize-observer';
+import { hidePageSizePixelValue } from '@shared/models/constants';
 import { IEntitiesTableComponent } from '@home/models/entity/entity-table-component.models';
 
 @Component({
@@ -99,6 +97,7 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
 
   defaultPageSize = 10;
   displayPagination = true;
+  hidePageSize = false;
   pageSizeOptions;
   pageLink: PageLink;
   textSearchMode = false;
@@ -121,6 +120,8 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
   private updateDataSubscription: Subscription;
   private viewInited = false;
 
+  private widgetResize$: ResizeObserver;
+
   constructor(protected store: Store<AppState>,
               public route: ActivatedRoute,
               public translate: TranslateService,
@@ -128,7 +129,8 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
               private dialogService: DialogService,
               private domSanitizer: DomSanitizer,
               private cd: ChangeDetectorRef,
-              private componentFactoryResolver: ComponentFactoryResolver) {
+              private componentFactoryResolver: ComponentFactoryResolver,
+              private elementRef: ElementRef) {
     super(store);
   }
 
@@ -138,6 +140,20 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
     } else {
       this.init(this.route.snapshot.data.entitiesTableConfig);
     }
+    this.widgetResize$ = new ResizeObserver(() => {
+      const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
+      if (showHidePageSize !== this.hidePageSize) {
+        this.hidePageSize = showHidePageSize;
+        this.cd.markForCheck();
+      }
+    });
+    this.widgetResize$.observe(this.elementRef.nativeElement);
+  }
+
+  ngOnDestroy() {
+    if (this.widgetResize$) {
+      this.widgetResize$.disconnect();
+    }
   }
 
   ngOnChanges(changes: SimpleChanges): void {

ui-ngx/src/app/modules/home/components/relation/relation-table.component.html

@@ -165,6 +165,7 @@
     <mat-paginator [length]="dataSource.total() | async"
                    [pageIndex]="pageLink.page"
                    [pageSize]="pageLink.pageSize"
-                   [pageSizeOptions]="[10, 20, 30]"></mat-paginator>
+                   [pageSizeOptions]="[10, 20, 30]"
+                   [hidePageSize]="hidePageSize"></mat-paginator>
   </div>
 </div>

ui-ngx/src/app/modules/home/components/relation/relation-table.component.scss

@@ -18,6 +18,7 @@
 :host {
   width: 100%;
   height: 100%;
+  display: block;
   .tb-entity-table {
     .tb-entity-table-content {
       width: 100%;

ui-ngx/src/app/modules/home/components/relation/relation-table.component.ts

@@ -14,7 +14,16 @@
 /// limitations under the License.
 ///
 
-import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  OnInit,
+  ViewChild
+} from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { PageLink } from '@shared/models/page/page-link';
 import { MatPaginator } from '@angular/material/paginator';
@@ -38,6 +47,8 @@ import {
 import { EntityId } from '@shared/models/id/entity-id';
 import { RelationsDatasource } from '../../models/datasource/relation-datasource';
 import { RelationDialogComponent, RelationDialogData } from '@home/components/relation/relation-dialog.component';
+import { hidePageSizePixelValue } from '@shared/models/constants';
+import { ResizeObserver } from '@juggle/resize-observer';
 
 @Component({
   selector: 'tb-relation-table',
@@ -56,6 +67,7 @@ export class RelationTableComponent extends PageComponent implements AfterViewIn
   displayedColumns: string[];
   direction: EntitySearchDirection;
   pageLink: PageLink;
+  hidePageSize = false;
   textSearchMode = false;
   dataSource: RelationsDatasource;
 
@@ -65,6 +77,8 @@ export class RelationTableComponent extends PageComponent implements AfterViewIn
 
   viewsInited = false;
 
+  private widgetResize$: ResizeObserver;
+
   @Input()
   set active(active: boolean) {
     if (this.activeValue !== active) {
@@ -100,7 +114,9 @@ export class RelationTableComponent extends PageComponent implements AfterViewIn
               private entityRelationService: EntityRelationService,
               public translate: TranslateService,
               public dialog: MatDialog,
-              private dialogService: DialogService) {
+              private dialogService: DialogService,
+              private cd: ChangeDetectorRef,
+              private elementRef: ElementRef) {
     super(store);
     this.dirtyValue = !this.activeValue;
     const sortOrder: SortOrder = { property: 'type', direction: Direction.ASC };
@@ -111,6 +127,20 @@ export class RelationTableComponent extends PageComponent implements AfterViewIn
   }
 
   ngOnInit() {
+    this.widgetResize$ = new ResizeObserver(() => {
+      const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
+      if (showHidePageSize !== this.hidePageSize) {
+        this.hidePageSize = showHidePageSize;
+        this.cd.markForCheck();
+      }
+    });
+    this.widgetResize$.observe(this.elementRef.nativeElement);
+  }
+
+  ngOnDestroy() {
+    if (this.widgetResize$) {
+      this.widgetResize$.disconnect();
+    }
   }
 
   updateColumns() {

ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.html

@@ -119,6 +119,7 @@
     <mat-paginator [length]="dataSource.total() | async"
                    [pageIndex]="pageLink.page"
                    [pageSize]="pageLink.pageSize"
-                   [pageSizeOptions]="[10, 20, 30]"></mat-paginator>
+                   [pageSizeOptions]="[10, 20, 30]"
+                   [hidePageSize]="hidePageSize"></mat-paginator>
   </div>
 </div>

ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.scss

@@ -16,6 +16,7 @@
 :host {
   width: 100%;
   height: 100%;
+  display: block;
   .tb-entity-table {
     .tb-entity-table-content {
       width: 100%;

ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts

@@ -14,7 +14,17 @@
 /// limitations under the License.
 ///
 
-import { AfterViewInit, Component, ElementRef, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  forwardRef,
+  Input,
+  OnDestroy,
+  OnInit,
+  ViewChild
+} from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 import { PageComponent } from '@shared/components/page.component';
@@ -36,13 +46,14 @@ import {
   WidgetActionsDatasource
 } from '@home/components/widget/action/manage-widget-actions.component.models';
 import { UtilsService } from '@core/services/utils.service';
-import { WidgetActionDescriptor, WidgetActionSource } from '@shared/models/widget.models';
+import { WidgetActionDescriptor, WidgetActionSource, widgetType } from '@shared/models/widget.models';
 import {
   WidgetActionDialogComponent,
   WidgetActionDialogData
 } from '@home/components/widget/action/widget-action-dialog.component';
 import { deepClone } from '@core/utils';
-import { widgetType } from '@shared/models/widget.models';
+import { ResizeObserver } from '@juggle/resize-observer';
+import { hidePageSizePixelValue } from '@shared/models/constants';
 
 @Component({
   selector: 'tb-manage-widget-actions',
@@ -69,11 +80,14 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
   displayedColumns: string[];
   pageLink: PageLink;
   textSearchMode = false;
+  hidePageSize = false;
   dataSource: WidgetActionsDatasource;
 
   viewsInited = false;
   dirtyValue = false;
 
+  private widgetResize$: ResizeObserver;
+
   @ViewChild('searchInput') searchInputField: ElementRef;
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
@@ -85,7 +99,9 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
               private translate: TranslateService,
               private utils: UtilsService,
               private dialog: MatDialog,
-              private dialogs: DialogService) {
+              private dialogs: DialogService,
+              private cd: ChangeDetectorRef,
+              private elementRef: ElementRef) {
     super(store);
     const sortOrder: SortOrder = { property: 'actionSourceName', direction: Direction.ASC };
     this.pageLink = new PageLink(10, 0, null, sortOrder);
@@ -94,9 +110,20 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
   }
 
   ngOnInit(): void {
+    this.widgetResize$ = new ResizeObserver(() => {
+      const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
+      if (showHidePageSize !== this.hidePageSize) {
+        this.hidePageSize = showHidePageSize;
+        this.cd.markForCheck();
+      }
+    });
+    this.widgetResize$.observe(this.elementRef.nativeElement);
   }
 
   ngOnDestroy(): void {
+    if (this.widgetResize$) {
+      this.widgetResize$.disconnect();
+    }
   }
 
   ngAfterViewInit() {

ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.html

@@ -147,6 +147,7 @@
                    [pageIndex]="pageLink.page"
                    [pageSize]="pageLink.pageSize"
                    [pageSizeOptions]="pageSizeOptions"
+                   [hidePageSize]="hidePageSize"
                    showFirstLastButtons></mat-paginator>
   </div>
 </div>

ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.scss

@@ -16,6 +16,7 @@
 :host {
   width: 100%;
   height: 100%;
+  display: block;
   .tb-table-widget {
     .table-container {
       position: relative;

ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts

@@ -16,6 +16,7 @@
 
 import {
   AfterViewInit,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   EventEmitter,
@@ -123,6 +124,8 @@ import {
 } from '@home/components/widget/lib/alarm-filter-panel.component';
 import { entityFields } from '@shared/models/entity.models';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { ResizeObserver } from '@juggle/resize-observer';
+import { hidePageSizePixelValue } from '@shared/models/constants';
 
 interface AlarmsTableWidgetSettings extends TableWidgetSettings {
   alarmsTitle: string;
@@ -164,6 +167,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
   public pageLink: AlarmDataPageLink;
   public sortOrderProperty: string;
   public textSearchMode = false;
+  public hidePageSize = false;
   public columns: Array<EntityColumn> = [];
   public displayedColumns: string[] = [];
   public alarmsDatasource: AlarmsDatasource;
@@ -177,6 +181,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
   private settings: AlarmsTableWidgetSettings;
   private widgetConfig: WidgetConfig;
   private subscription: IWidgetSubscription;
+  private widgetResize$: ResizeObserver;
 
   private alarmsTitlePattern: string;
 
@@ -235,7 +240,8 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
               private datePipe: DatePipe,
               private dialog: MatDialog,
               private dialogService: DialogService,
-              private alarmService: AlarmService) {
+              private alarmService: AlarmService,
+              private cd: ChangeDetectorRef) {
     super(store);
     this.pageLink = {
       page: 0,
@@ -257,6 +263,14 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
       this.widgetTimewindowChanged$ = this.ctx.defaultSubscription.widgetTimewindowChanged$.subscribe(
         () => this.pageLink.page = 0
       );
+      this.widgetResize$ = new ResizeObserver(() => {
+        const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
+        if (showHidePageSize !== this.hidePageSize) {
+          this.hidePageSize = showHidePageSize;
+          this.cd.markForCheck();
+        }
+      });
+      this.widgetResize$.observe(this.elementRef.nativeElement);
     }
   }
 
@@ -265,6 +279,9 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
       this.widgetTimewindowChanged$.unsubscribe();
       this.widgetTimewindowChanged$ = null;
     }
+    if (this.widgetResize$) {
+      this.widgetResize$.disconnect();
+    }
   }
 
   ngAfterViewInit(): void {

ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.html

@@ -106,6 +106,7 @@
                    [pageIndex]="pageLink.page"
                    [pageSize]="pageLink.pageSize"
                    [pageSizeOptions]="pageSizeOptions"
+                   [hidePageSize]="hidePageSize"
                    showFirstLastButtons></mat-paginator>
   </div>
 </div>

ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.scss

@@ -16,6 +16,7 @@
 :host {
   width: 100%;
   height: 100%;
+  display: block;
   .tb-table-widget {
     .table-container {
       position: relative;

ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts

@@ -16,6 +16,7 @@
 
 import {
   AfterViewInit,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   Injector,
@@ -107,6 +108,8 @@ import { sortItems } from '@shared/models/page/page-link';
 import { entityFields } from '@shared/models/entity.models';
 import { DatePipe } from '@angular/common';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { ResizeObserver } from '@juggle/resize-observer';
+import { hidePageSizePixelValue } from '@shared/models/constants';
 
 interface EntitiesTableWidgetSettings extends TableWidgetSettings {
   entitiesTitle: string;
@@ -140,6 +143,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
   public pageLink: EntityDataPageLink;
   public sortOrderProperty: string;
   public textSearchMode = false;
+  public hidePageSize = false;
   public columns: Array<EntityColumn> = [];
   public displayedColumns: string[] = [];
   public entityDatasource: EntityDatasource;
@@ -153,6 +157,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
   private settings: EntitiesTableWidgetSettings;
   private widgetConfig: WidgetConfig;
   private subscription: IWidgetSubscription;
+  private widgetResize$: ResizeObserver;
 
   private entitiesTitlePattern: string;
 
@@ -193,7 +198,8 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
               private utils: UtilsService,
               private datePipe: DatePipe,
               private translate: TranslateService,
-              private domSanitizer: DomSanitizer) {
+              private domSanitizer: DomSanitizer,
+              private cd: ChangeDetectorRef) {
     super(store);
     this.pageLink = {
       page: 0,
@@ -211,6 +217,22 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
     this.initializeConfig();
     this.updateDatasources();
     this.ctx.updateWidgetParams();
+    if (this.displayPagination) {
+      this.widgetResize$ = new ResizeObserver(() => {
+        const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
+        if (showHidePageSize !== this.hidePageSize) {
+          this.hidePageSize = showHidePageSize;
+          this.cd.markForCheck();
+        }
+      });
+      this.widgetResize$.observe(this.elementRef.nativeElement);
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.widgetResize$) {
+      this.widgetResize$.disconnect();
+    }
   }
 
   ngAfterViewInit(): void {

ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.html

@@ -112,6 +112,7 @@
                          [pageIndex]="source.pageLink.page"
                          [pageSize]="source.pageLink.pageSize"
                          [pageSizeOptions]="pageSizeOptions"
+                         [hidePageSize]="hidePageSize"
                          showFirstLastButtons></mat-paginator>
         </ng-template>
       </mat-tab>

ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.scss

@@ -16,6 +16,7 @@
 :host {
   width: 100%;
   height: 100%;
+  display: block;
   .tb-table-widget {
     mat-footer-row, mat-row {
       height: 38px;

ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts

@@ -16,6 +16,7 @@
 
 import {
   AfterViewInit,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   Input,
@@ -71,6 +72,8 @@ import { SubscriptionEntityInfo } from '@core/api/widget-api.models';
 import { DatePipe } from '@angular/common';
 import { parseData } from '@home/components/widget/lib/maps/common-maps-utils';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { ResizeObserver } from '@juggle/resize-observer';
+import { hidePageSizePixelValue } from '@shared/models/constants';
 
 export interface TimeseriesTableWidgetSettings extends TableWidgetSettings {
   showTimestamp: boolean;
@@ -124,6 +127,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
   public enableStickyAction = true;
   public pageSizeOptions;
   public textSearchMode = false;
+  public hidePageSize = false;
   public textSearch: string = null;
   public sources: TimeseriesTableSource[];
   public sourceIndex: number;
@@ -150,6 +154,7 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
 
   private subscriptions: Subscription[] = [];
   private widgetTimewindowChanged$: Subscription;
+  private widgetResize$: ResizeObserver;
 
   private searchAction: WidgetAction = {
     name: 'action.search',
@@ -167,7 +172,8 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
               private utils: UtilsService,
               private translate: TranslateService,
               private domSanitizer: DomSanitizer,
-              private datePipe: DatePipe) {
+              private datePipe: DatePipe,
+              private cd: ChangeDetectorRef) {
     super(store);
   }
 
@@ -190,6 +196,14 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
           });
         }
       );
+      this.widgetResize$ = new ResizeObserver(() => {
+        const showHidePageSize = this.elementRef.nativeElement.offsetWidth < hidePageSizePixelValue;
+        if (showHidePageSize !== this.hidePageSize) {
+          this.hidePageSize = showHidePageSize;
+          this.cd.markForCheck();
+        }
+      });
+      this.widgetResize$.observe(this.elementRef.nativeElement);
     }
   }
 
@@ -198,6 +212,9 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
       this.widgetTimewindowChanged$.unsubscribe();
       this.widgetTimewindowChanged$ = null;
     }
+    if (this.widgetResize$) {
+      this.widgetResize$.disconnect();
+    }
   }
 
   ngAfterViewInit(): void {