Beginning of fix for notebook perf (#3984)

Fixes #3843. Now includes full fix which limits length and ensures a scrollbar is available

- Set max size for editor. 4000px gets us 200-250 lines before needing a scrollbar. 
- Adds layout updating which should also ensure accurage line highlighting to the right of the editor. What's happening is initial size is slightly off, so need to layout a 2nd time (e.g. layout once, let flex figure things out, then layout a 2nd time). This isn't optimal as there's a minor perf hit but it isn't noticeable overall.

To consider in future PRs:
- Add user configurable setting for max length?
- Handle case where we scroll to bottom but scrollbar is at the top. 
- Consider how intellisense will work on this. We may need to split into a window around the current code when sending to the kernel as it's quite likely that doing a 12K line intellisense request will be too big.

src/sql/parts/modelComponents/queryTextEditor.ts

@@ -16,7 +16,6 @@ import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { IStorageService } from 'vs/platform/storage/common/storage';
 import { ITextResourceConfigurationService } from 'vs/editor/common/services/resourceConfiguration';
-import { IModeService } from 'vs/editor/common/services/modeService';
 import { ITextFileService } from 'vs/workbench/services/textfile/common/textfiles';
 import { IEditorGroupsService } from 'vs/workbench/services/group/common/editorGroupsService';
 import { EditorOptions } from 'vs/workbench/common/editor';
@@ -35,11 +34,13 @@ export class QueryTextEditor extends BaseTextEditor {
 	public static ID = 'modelview.editors.textEditor';
 	private _dimension: DOM.Dimension;
 	private _config: editorCommon.IConfiguration;
-	private _minHeight: number;
+	private _minHeight: number = 0;
+	private _maxHeight: number = 4000;
 	private _selected: boolean;
 	private _hideLineNumbers: boolean;
 	private _editorWorkspaceConfig;
 	private _scrollbarHeight: number;
+
 	constructor(
 		@ITelemetryService telemetryService: ITelemetryService,
 		@IInstantiationService instantiationService: IInstantiationService,
@@ -159,7 +160,7 @@ export class QueryTextEditor extends BaseTextEditor {
 			}
 		}
 		let editorHeightUsingLines = this._config.editor.lineHeight * (lineCount + numberWrappedLines);
-		let editorHeightUsingMinHeight = Math.max(editorHeightUsingLines, this._minHeight);
+		let editorHeightUsingMinHeight = Math.max(Math.min(editorHeightUsingLines, this._maxHeight), this._minHeight);
 		editorHeightUsingMinHeight = shouldAddHorizontalScrollbarHeight ? editorHeightUsingMinHeight + this._scrollbarHeight : editorHeightUsingMinHeight;
 		this.setHeight(editorHeightUsingMinHeight);
 	}
@@ -168,6 +169,10 @@ export class QueryTextEditor extends BaseTextEditor {
 		this._minHeight = height;
 	}
 
+	public setMaximumHeight(height: number) : void {
+		this._maxHeight = height;
+	}
+
 	public toggleEditorSelected(selected: boolean): void {
 		this._selected = selected;
 		this.refreshEditorConfguration();

src/sql/parts/notebook/cellViews/code.component.ts

@@ -31,6 +31,7 @@ import { IModelService } from 'vs/editor/common/services/modelService';
 import { IContextMenuService, IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { INotificationService } from 'vs/platform/notification/common/notification';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
+import { Emitter, debounceEvent } from 'vs/base/common/event';
 import { CellTypes } from 'sql/parts/notebook/models/contracts';
 import { OVERRIDE_EDITOR_THEMING_SETTING } from 'sql/workbench/services/notebook/common/notebookService';
 
@@ -78,6 +79,7 @@ export class CodeComponent extends AngularDisposable implements OnInit, OnChange
 
 	protected _actionBar: Taskbar;
 	private readonly _minimumHeight = 30;
+	private readonly _maximumHeight = 4000;
 	private _cellModel: ICellModel;
 	private _editor: QueryTextEditor;
 	private _editorInput: UntitledEditorInput;
@@ -85,6 +87,7 @@ export class CodeComponent extends AngularDisposable implements OnInit, OnChange
 	private _model: NotebookModel;
 	private _activeCellId: string;
 	private _cellToggleMoreActions: CellToggleMoreActions;
+	private _layoutEmitter = new Emitter<void>();
 
 	constructor(
 		@Inject(forwardRef(() => CommonServiceInterface)) private _bootstrapService: CommonServiceInterface,
@@ -100,6 +103,9 @@ export class CodeComponent extends AngularDisposable implements OnInit, OnChange
 	) {
 		super();
 		this._cellToggleMoreActions = this._instantiationService.createInstance(CellToggleMoreActions);
+		debounceEvent(this._layoutEmitter.event, (l, e) => e, 250, /*leading=*/false)
+		(() => this.layout());
+
 	}
 
 	ngOnInit() {
@@ -127,10 +133,14 @@ export class CodeComponent extends AngularDisposable implements OnInit, OnChange
 	ngAfterContentInit(): void {
 		this.createEditor();
 		this._register(DOM.addDisposableListener(window, DOM.EventType.RESIZE, e => {
-			this.layout();
+			this._layoutEmitter.fire();
 		}));
 	}
 
+	ngAfterViewInit(): void {
+		this._layoutEmitter.fire();
+	}
+
 	get model(): NotebookModel {
 		return this._model;
 	}
@@ -145,6 +155,7 @@ export class CodeComponent extends AngularDisposable implements OnInit, OnChange
 		this._editor.create(this.codeElement.nativeElement);
 		this._editor.setVisible(true);
 		this._editor.setMinimumHeight(this._minimumHeight);
+		this._editor.setMaximumHeight(this._maximumHeight);
 		let uri = this.createUri();
 		this._editorInput = instantiationService.createInstance(UntitledEditorInput, uri, false, this.cellModel.language, '', '');
 		this._editor.setInput(this._editorInput, undefined);
@@ -166,13 +177,15 @@ export class CodeComponent extends AngularDisposable implements OnInit, OnChange
 			this._editor.setHeightToScrollHeight();
 			this.cellModel.source = this._editorModel.getValue();
 			this.onContentChanged.emit();
+			// TODO see if there's a better way to handle reassessing size.
+			setTimeout(() => this._layoutEmitter.fire(), 250);
 		}));
 		this._register(this._configurationService.onDidChangeConfiguration(e => {
 			if (e.affectsConfiguration('editor.wordWrap')) {
 				this._editor.setHeightToScrollHeight(true);
 			}
 		}));
-		this._register(this.model.layoutChanged(this.layout, this));
+		this._register(this.model.layoutChanged(() => this._layoutEmitter.fire, this));
 		this.layout();
 	}
 

src/sql/parts/notebook/cellViews/codeCell.component.ts

@@ -3,8 +3,7 @@
 *  Licensed under the Source EULA. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
 
-import { OnInit, Component, Input, Inject, forwardRef, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild, SimpleChange, OnChanges } from '@angular/core';
-import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
+import { OnInit, Component, Input, Inject, forwardRef, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild, SimpleChange, OnChanges, AfterViewInit } from '@angular/core';
 import { CellView } from 'sql/parts/notebook/cellViews/interfaces';
 import { ICellModel } from 'sql/parts/notebook/models/modelInterfaces';
 import { NotebookModel } from 'sql/parts/notebook/models/notebookModel';
@@ -18,7 +17,6 @@ export const CODE_SELECTOR: string = 'code-cell-component';
 })
 
 export class CodeCellComponent extends CellView implements OnInit, OnChanges {
-	@ViewChild('codeCellOutput', { read: ElementRef }) private outputPreview: ElementRef;
 	@Input() cellModel: ICellModel;
 	@Input() set model(value: NotebookModel) {
 		this._model = value;
@@ -61,8 +59,6 @@ export class CodeCellComponent extends CellView implements OnInit, OnChanges {
 	get activeCellId(): string {
 		return this._activeCellId;
 	}
-
-	// Todo: implement layout
 	public layout() {
 
 	}