Notebook Views grid fixes (#17170)

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();
 	}
 

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>

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,15 +138,15 @@ 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();
 	}
-	}
 
 	/**
 	 * Updates the grid layout based on changes to the view model
@@ -161,12 +159,14 @@ 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);
+			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
 				}
+			}
 		});
 		this._grid.commit();
 	}

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;