From 08acd6aadcdb50cbd8cfcbb972f34599c29ceace Mon Sep 17 00:00:00 2001
From: Daniel Grajeda <dagrajed@microsoft.com>
Date: Tue, 28 Sep 2021 15:52:00 -0600
Subject: [PATCH] Notebook Views grid fixes (#17170)

---
 .../notebookViewsCard.component.ts            |  4 ----
 .../notebookViewsGrid.component.html          |  2 +-
 .../notebookViewsGrid.component.ts            | 24 +++++++++----------
 .../browser/notebookViews/autodash.ts         |  6 ++---
 4 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/src/sql/workbench/contrib/notebook/browser/notebookViews/notebookViewsCard.component.ts b/src/sql/workbench/contrib/notebook/browser/notebookViews/notebookViewsCard.component.ts
index fe2353ad43..377d443081 100644
--- a/src/sql/workbench/contrib/notebook/browser/notebookViews/notebookViewsCard.component.ts
+++ b/src/sql/workbench/contrib/notebook/browser/notebookViews/notebookViewsCard.component.ts
@@ -49,10 +49,6 @@ export class NotebookViewsCardComponent extends AngularDisposable implements OnI
 	}
 
 	ngOnInit() {
-		this.initActionBar();
-	}
-
-	ngAfterViewInit() {
 		this.initialize();
 	}
 
diff --git a/src/sql/workbench/contrib/notebook/browser/notebookViews/notebookViewsGrid.component.html b/src/sql/workbench/contrib/notebook/browser/notebookViews/notebookViewsGrid.component.html
index 428292555e..9bd11d8562 100644
--- a/src/sql/workbench/contrib/notebook/browser/notebookViews/notebookViewsGrid.component.html
+++ b/src/sql/workbench/contrib/notebook/browser/notebookViews/notebookViewsGrid.component.html
@@ -15,6 +15,6 @@
 	{{emptyText}}
 </div>
 
-<div *ngIf="!loaded" style="display: block; position: absolute; height: 100%; width: 100%; z-index: 9999; background: #fff;">
+<div *ngIf="!loaded" style="display: block; position: absolute; height: 100%; width: 100%; z-index: 1; background: #fff;">
 	<loading-spinner [loading]="!loaded" [loadingMessage]="loadingMessage"></loading-spinner>
 </div>
diff --git a/src/sql/workbench/contrib/notebook/browser/notebookViews/notebookViewsGrid.component.ts b/src/sql/workbench/contrib/notebook/browser/notebookViews/notebookViewsGrid.component.ts
index a4516dc91c..a5ef038feb 100644
--- a/src/sql/workbench/contrib/notebook/browser/notebookViews/notebookViewsGrid.component.ts
+++ b/src/sql/workbench/contrib/notebook/browser/notebookViews/notebookViewsGrid.component.ts
@@ -40,7 +40,7 @@ export class NotebookViewsGridComponent extends AngularDisposable implements OnI
 	protected _activeCell: ICellModel;
 
 	protected _options: INotebookViewsGridOptions = {
-		cellHeight: 60
+		cellHeight: 30
 	};;
 
 	constructor(
@@ -89,9 +89,6 @@ export class NotebookViewsGridComponent extends AngularDisposable implements OnI
 				this._grid = undefined;
 			}
 		}
-		if (this.activeView && this.activeView.guid !== this._gridView?.guid) {
-			this.activeView.initialize();
-		}
 
 		if (this.model?.activeCell?.id !== this._activeCell?.id) {
 			this._activeCell = this.model.activeCell;
@@ -102,7 +99,6 @@ export class NotebookViewsGridComponent extends AngularDisposable implements OnI
 	ngAfterViewChecked() {
 		// If activeView has changed, rebuild the grid
 		if (this.activeView && this.activeView.guid !== this._gridView?.guid) {
-			this._gridView = this.activeView;
 
 			if (!this._grid) {
 				this.createGrid();
@@ -119,6 +115,7 @@ export class NotebookViewsGridComponent extends AngularDisposable implements OnI
 
 	private destroyGrid() {
 		if (this._grid) {
+			this._loaded = false;
 			this._gridEnabled = false;
 			this._grid.destroy(false);
 		}
@@ -126,6 +123,7 @@ export class NotebookViewsGridComponent extends AngularDisposable implements OnI
 
 	private createGrid() {
 		const isNew = this.activeView.isNew;
+		this._gridView = this.activeView;
 
 		if (this._grid) {
 			this.destroyGrid();
@@ -140,14 +138,14 @@ export class NotebookViewsGridComponent extends AngularDisposable implements OnI
 			alwaysShowResizeHandle: false,
 			styleInHead: true,
 			margin: 2,
+			cellHeight: this._options.cellHeight,
 			staticGrid: false,
 		});
 
+
 		this._gridEnabled = true;
 
-		if (isNew) {
-			this.updateGrid();
-		}
+		this.updateGrid();
 	}
 
 	/**
@@ -161,11 +159,13 @@ export class NotebookViewsGridComponent extends AngularDisposable implements OnI
 		this._grid.batchUpdate();
 		this.activeView.cells.forEach(cell => {
 			const el = this._grid.getGridItems().find(x => x.getAttribute('data-cell-id') === cell.cellGuid);
-			const cellData = this.activeView.getCellMetadata(cell);
-			this._grid.update(el, { x: cellData.x, y: cellData.y, w: cellData.width, h: cellData.height });
+			if (el) {
+				const cellData = this.activeView.getCellMetadata(cell);
+				this._grid.update(el, { x: cellData.x, y: cellData.y, w: cellData.width, h: cellData.height });
 
-			if (cellData?.hidden) {
-				this._grid.removeWidget(el, false); // Do not trigger event for batch update
+				if (cellData?.hidden) {
+					this._grid.removeWidget(el, false); // Do not trigger event for batch update
+				}
 			}
 		});
 		this._grid.commit();
diff --git a/src/sql/workbench/services/notebook/browser/notebookViews/autodash.ts b/src/sql/workbench/services/notebook/browser/notebookViews/autodash.ts
index 6a10dc5b34..ca8d1d0a87 100644
--- a/src/sql/workbench/services/notebook/browser/notebookViews/autodash.ts
+++ b/src/sql/workbench/services/notebook/browser/notebookViews/autodash.ts
@@ -69,13 +69,13 @@ class CellDisplayGroup extends DisplayGroup<ICellModel> {
 		//For graphs
 		if (this.hasGraph(cell)) {
 			visInfo.width = 6;
-			visInfo.height = 4;
+			visInfo.height = 12;
 		}
 		//For tables
 		else if (this.hasTable(cell)) {
-			visInfo.height = Math.min(meta?.height, 3);
+			visInfo.height = Math.min(meta?.height, 6);
 		} else {
-			visInfo.height = Math.min(meta?.height, 3);
+			visInfo.height = Math.min(meta?.height, 6);
 		}
 
 		visInfo.display = true;