Output view changes (#3146)

* 1133: Notebook file registration changes

* File registration stuff

* Yarn files

* Outputview Changes

* Misc changes

* Changes to code component name space

* Output view changes

* notebook output view changes

* Latest changes

* Output view changes

* Code review changes on output view

* CSS file and misc changes

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

@@ -8,8 +8,6 @@ import { OnInit, Component, Input, Inject, forwardRef, ElementRef, ChangeDetecto
 
 import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
 import { AngularDisposable } from 'sql/base/common/lifecycle';
-import { ComponentBase } from 'sql/parts/modelComponents/componentBase';
-import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces';
 import { QueryTextEditor } from 'sql/parts/modelComponents/queryTextEditor';
 
 import { IColorTheme, IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';

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

@@ -8,7 +8,8 @@
 	<div class="notebook-code" style="flex: 0 0 auto;">
 		<code-component [cellModel]="cellModel"></code-component>
 	</div>
-	<div #output class="notebook-output" style="flex: 0 0 auto;">
-		Place Holder for output area
+	<div class="notebook-output" style="flex: 0 0 auto;">
+		<output-area-component *ngIf="cellModel.outputs && cellModel.outputs.length > 0" [cellModel]="cellModel">
+		</output-area-component>
 	</div>
-</div>
+</div>

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

@@ -21,10 +21,8 @@ export const CODE_SELECTOR: string = 'code-cell-component';
 	templateUrl: decodeURI(require.toUrl('./codeCell.component.html'))
 })
 export class CodeCellComponent extends CellView implements OnInit {
-	@ViewChild('output', { read: ElementRef }) private output: ElementRef;
 	@Input() cellModel: ICellModel;
 	constructor(
-		@Inject(forwardRef(() => CommonServiceInterface)) private _bootstrapService: CommonServiceInterface,
 		@Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef,
 		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService
 	) {
@@ -42,7 +40,5 @@ export class CodeCellComponent extends CellView implements OnInit {
 	}
 
 	private updateTheme(theme: IColorTheme): void {
-		let outputElement = <HTMLElement>this.output.nativeElement;
-		outputElement.style.borderTopColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true).toString();
 	}
 }

src/sql/parts/notebook/cellViews/interfaces.ts

@@ -13,3 +13,5 @@ export abstract class CellView extends AngularDisposable implements OnDestroy {
 
 	public abstract layout(): void;
 }
+
+

src/sql/parts/notebook/cellViews/output.component.html

@@ -0,0 +1,11 @@
+<!--
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+-->
+<div style="overflow: hidden; width: 100%; height: 100%; display: flex; flex-flow: column">
+	<div style="flex: 0 0 auto; user-select: initial;">
+		<div #output ></div>
+	</div>
+</div>

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

@@ -0,0 +1,77 @@
+/*---------------------------------------------------------------------------------------------
+*  Copyright (c) Microsoft Corporation. All rights reserved.
+*  Licensed under the Source EULA. See License.txt in the project root for license information.
+*--------------------------------------------------------------------------------------------*/
+import 'vs/css!./code';
+
+import { OnInit, Component, Input, Inject, forwardRef, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild, Output, EventEmitter } from '@angular/core';
+import { AngularDisposable } from 'sql/base/common/lifecycle';
+import { nb } from 'sqlops';
+import { INotebookService } from 'sql/services/notebook/notebookService';
+import { MimeModel } from 'sql/parts/notebook/outputs/common/mimemodel';
+import * as outputProcessor from '../outputs/common/outputProcessor';
+import { RenderMimeRegistry } from 'sql/parts/notebook/outputs/registry';
+import 'vs/css!sql/parts/notebook/outputs/style/index';
+
+export const OUTPUT_SELECTOR: string = 'output-component';
+
+@Component({
+	selector: OUTPUT_SELECTOR,
+    templateUrl: decodeURI(require.toUrl('./output.component.html'))
+})
+export class OutputComponent extends AngularDisposable implements OnInit {
+	@ViewChild('output', { read: ElementRef }) private outputElement: ElementRef;
+    @Input() cellOutput: nb.ICellOutput;
+	private readonly _minimumHeight = 30;
+	registry: RenderMimeRegistry;
+    trusted: boolean = false;
+
+
+	constructor(
+		@Inject(INotebookService) private _notebookService: INotebookService
+	) {
+		super();
+        this.registry = _notebookService.getMimeRegistry();
+	}
+
+	ngOnInit() {
+		let node = this.outputElement.nativeElement;
+        let output = this.cellOutput;
+        let options = outputProcessor.getBundleOptions({ value: output, trusted: this.trusted });
+        // TODO handle safe/unsafe mapping
+        this.createRenderedMimetype(options, node);
+    }
+
+	public layout(): void {
+	}
+
+	protected createRenderedMimetype(options: MimeModel.IOptions, node: HTMLElement): void {
+        let mimeType = this.registry.preferredMimeType(
+            options.data,
+            options.trusted ? 'any' : 'ensure'
+        );
+        if (mimeType) {
+			let output = this.registry.createRenderer(mimeType);
+            output.node = node;
+            let model = new MimeModel(options);
+            output.renderModel(model).catch(error => {
+                // Manually append error message to output
+                output.node.innerHTML = `<pre>Javascript Error: ${error.message}</pre>`;
+                // Remove mime-type-specific CSS classes
+                output.node.className = 'p-Widget jp-RenderedText';
+                output.node.setAttribute(
+                    'data-mime-type',
+                    'application/vnd.jupyter.stderr'
+                );
+            });
+			//this.setState({ node: node });
+        } else {
+            // TODO Localize
+            node.innerHTML =
+                `No ${options.trusted ? '' : '(safe) '}renderer could be ` +
+                'found for output. It has the following MIME types: ' +
+                Object.keys(options.data).join(', ');
+            //this.setState({ node: node });
+        }
+    }
+}

src/sql/parts/notebook/cellViews/outputArea.component.html

@@ -0,0 +1,12 @@
+<!--
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+-->
+<div style="overflow: hidden; width: 100%; height: 100%; display: flex; flex-flow: column">
+	<div class="notebook-output" style="flex: 0 0 auto;">
+		<output-component *ngFor="let output of cellModel.outputs" [cellOutput]="output">
+		</output-component>
+	</div>
+</div>

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

@@ -0,0 +1,30 @@
+/*---------------------------------------------------------------------------------------------
+*  Copyright (c) Microsoft Corporation. All rights reserved.
+*  Licensed under the Source EULA. See License.txt in the project root for license information.
+*--------------------------------------------------------------------------------------------*/
+import 'vs/css!./code';
+import { OnInit, Component, Input, Inject, forwardRef, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild, Output, EventEmitter } from '@angular/core';
+import { AngularDisposable } from 'sql/base/common/lifecycle';
+import { IModeService } from 'vs/editor/common/services/modeService';
+import { ICellModel } from 'sql/parts/notebook/models/modelInterfaces';
+
+export const OUTPUT_AREA_SELECTOR: string = 'output-area-component';
+
+@Component({
+	selector: OUTPUT_AREA_SELECTOR,
+	templateUrl: decodeURI(require.toUrl('./outputArea.component.html'))
+})
+export class OutputAreaComponent extends AngularDisposable implements OnInit {
+	@Input() cellModel: ICellModel;
+
+	private readonly _minimumHeight = 30;
+
+	constructor(
+		@Inject(IModeService) private _modeService: IModeService
+	) {
+		super();
+	}
+	ngOnInit(): void {
+
+	}
+}