Change angular panel display behavior (#1344)

* got it working

* remove unneeded code

* formatting

* added scrollable, dashboard tabs don't scroll correctly though

* fix all bugs I could find

* address comments

src/sql/parts/dashboard/common/dashboardPage.component.html

@@ -6,23 +6,25 @@
 -->
 <panel class="dashboard-panel" (onTabChange)="handleTabChange($event)" (onTabClose)="handleTabClose($event)" [actions]="panelActions">
 	<tab [visibilityType]="'visibility'" *ngFor="let tab of tabs" [title]="tab.title" class="fullsize" [identifier]="tab.id" [canClose]="tab.canClose" [actions]="tab.actions">
-		<dashboard-home-container *ngIf="tab.id === 'homeTab'; else not_home" [properties]="propertiesWidget" [tab]="tab">
-		</dashboard-home-container>
-		<ng-template #not_home>
-			<dashboard-webview-container *ngIf="getContentType(tab) === 'webview-container'" [tab]="tab">
-			</dashboard-webview-container>
-			<dashboard-widget-container *ngIf="getContentType(tab) === 'widgets-container'" [tab]="tab">
-			</dashboard-widget-container>
-			<dashboard-modelview-container *ngIf="getContentType(tab) === 'modelview-container'" [tab]="tab">
-			</dashboard-modelview-container>
-			<dashboard-controlhost-container *ngIf="getContentType(tab) === 'controlhost-container'" [tab]="tab">
-			</dashboard-controlhost-container>
-			<dashboard-nav-section *ngIf="getContentType(tab) === 'nav-section'" [tab]="tab">
-			</dashboard-nav-section>
-			<dashboard-grid-container *ngIf="getContentType(tab) === 'grid-container'" [tab]="tab">
-			</dashboard-grid-container>
-			<dashboard-error-container *ngIf="getContentType(tab) === 'error-container'" [tab]="tab">
-			</dashboard-error-container>
+		<ng-template>
+			<dashboard-home-container *ngIf="tab.id === 'homeTab'; else not_home" [properties]="propertiesWidget" [tab]="tab">
+			</dashboard-home-container>
+			<ng-template #not_home>
+				<dashboard-webview-container *ngIf="getContentType(tab) === 'webview-container'" [tab]="tab">
+				</dashboard-webview-container>
+				<dashboard-widget-container *ngIf="getContentType(tab) === 'widgets-container'" [tab]="tab">
+				</dashboard-widget-container>
+				<dashboard-modelview-container *ngIf="getContentType(tab) === 'modelview-container'" [tab]="tab">
+				</dashboard-modelview-container>
+				<dashboard-controlhost-container *ngIf="getContentType(tab) === 'controlhost-container'" [tab]="tab">
+				</dashboard-controlhost-container>
+				<dashboard-nav-section *ngIf="getContentType(tab) === 'nav-section'" [tab]="tab">
+				</dashboard-nav-section>
+				<dashboard-grid-container *ngIf="getContentType(tab) === 'grid-container'" [tab]="tab">
+				</dashboard-grid-container>
+				<dashboard-error-container *ngIf="getContentType(tab) === 'error-container'" [tab]="tab">
+				</dashboard-error-container>
+			</ng-template>
 		</ng-template>
 	</tab>
 </panel>

src/sql/parts/dashboard/common/dashboardPage.component.ts

@@ -17,7 +17,7 @@ import { IPropertiesConfig } from 'sql/parts/dashboard/pages/serverDashboardPage
 import { PanelComponent } from 'sql/base/browser/ui/panel/panel.component';
 import { IDashboardRegistry, Extensions as DashboardExtensions, IDashboardTab } from 'sql/platform/dashboard/common/dashboardRegistry';
 import { PinUnpinTabAction, AddFeatureTabAction } from './actions';
-import { TabComponent } from 'sql/base/browser/ui/panel/tab.component';
+import { TabComponent, TabChild } from 'sql/base/browser/ui/panel/tab.component';
 import { IBootstrapService, BOOTSTRAP_SERVICE_ID } from 'sql/services/bootstrap/bootstrapService';
 import { AngularEventType } from 'sql/services/angularEventing/angularEventingService';
 import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
@@ -61,7 +61,7 @@ export abstract class DashboardPage extends AngularDisposable {
 	private _tabsDispose: Array<IDisposable> = [];
 	private _tabSettingConfigs: Array<TabSettingConfig> = [];
 
-	@ViewChildren(DashboardTab) private _tabs: QueryList<DashboardTab>;
+	@ViewChildren(TabChild) private _tabs: QueryList<DashboardTab>;
 	@ViewChild(PanelComponent) private _panel: PanelComponent;
 
 	private _editEnabled = new Emitter<boolean>();
@@ -142,7 +142,6 @@ export abstract class DashboardPage extends AngularDisposable {
 			actions: []
 		};
 		this.addNewTab(homeTab);
-		this._panel.selectTab(homeTab.id);
 
 		let allTabs = dashboardHelper.filterConfigs(dashboardRegistry.tabs, this.dashboardService);
 
@@ -254,7 +253,6 @@ export abstract class DashboardPage extends AngularDisposable {
 		}
 	}
 
-
 	private getContentType(tab: TabConfig): string {
 		return tab.container ? Object.keys(tab.container)[0] : '';
 	}
@@ -310,10 +308,10 @@ export abstract class DashboardPage extends AngularDisposable {
 	}
 
 	public handleTabChange(tab: TabComponent): void {
+		this._cd.detectChanges();
 		let localtab = this._tabs.find(i => i.id === tab.identifier);
 		this._editEnabled.fire(localtab.editable);
 		this._cd.detectChanges();
-		localtab.layout();
 	}
 
 	public handleTabClose(tab: TabComponent): void {

src/sql/parts/dashboard/common/dashboardPanelStyles.ts

@@ -15,22 +15,22 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	const tabActiveForeground = theme.getColor(TAB_ACTIVE_FOREGROUND);
 	if (tabActiveBackground || tabActiveForeground) {
 		collector.addRule(`
-			panel.dashboard-panel > .tabbedPanel > .title > .monaco-scrollable-element > .tabList .tab:hover .tabLabel,
-			panel.dashboard-panel > .tabbedPanel > .title > .monaco-scrollable-element > .tabList .tab .tabLabel.active {
+			panel.dashboard-panel > .tabbedPanel > .title .tabList .tab:hover .tabLabel,
+			panel.dashboard-panel > .tabbedPanel > .title .tabList .tab .tabLabel.active {
 				color: ${tabActiveForeground};
 				border-bottom: 0px solid;
 			}
 
-			panel.dashboard-panel > .tabbedPanel > .title > .monaco-scrollable-element > .tabList .tab-header.active {
+			panel.dashboard-panel > .tabbedPanel > .title .tabList .tab-header.active {
 				background-color: ${tabActiveBackground};
 				outline-color: ${tabActiveBackground};
 			}
 
-			panel.dashboard-panel > .tabbedPanel.horizontal > .title > .monaco-scrollable-element > .tabList .tab-header.active {
+			panel.dashboard-panel > .tabbedPanel.horizontal > .title .tabList .tab-header.active {
 				border-bottom-color: transparent;
 			}
 
-			panel.dashboard-panel > .tabbedPanel.vertical > .title > .monaco-scrollable-element > .tabList .tab-header.active {
+			panel.dashboard-panel > .tabbedPanel.vertical > .title .tabList .tab-header.active {
 				border-right-color: transparent;
 			}
 		`);
@@ -39,7 +39,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	const activeTabBorderColor = theme.getColor(TAB_ACTIVE_BORDER);
 	if (activeTabBorderColor) {
 		collector.addRule(`
-			panel.dashboard-panel > .tabbedPanel > .title > .monaco-scrollable-element > .tabList .tab-header.active {
+			panel.dashboard-panel > .tabbedPanel > .title .tabList .tab-header.active {
 				box-shadow: ${activeTabBorderColor} 0 -1px inset;
 			}
 		`);
@@ -50,11 +50,11 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	const tabInactiveForeground = theme.getColor(TAB_INACTIVE_FOREGROUND);
 	if (tabInactiveBackground || tabInactiveForeground) {
 		collector.addRule(`
-			panel.dashboard-panel > .tabbedPanel > .title > .monaco-scrollable-element > .tabList .tab .tabLabel {
+			panel.dashboard-panel > .tabbedPanel > .title .tabList .tab .tabLabel {
 				color: ${tabInactiveForeground};
 			}
 
-			panel.dashboard-panel > .tabbedPanel > .title > .monaco-scrollable-element > .tabList .tab-header {
+			panel.dashboard-panel > .tabbedPanel > .title .tabList .tab-header {
 				background-color: ${tabInactiveBackground};
 			}
 		`);
@@ -74,7 +74,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	const tabBoarder = theme.getColor(TAB_BORDER);
 	if (tabBoarder) {
 		collector.addRule(`
-			panel.dashboard-panel > .tabbedPanel > .title > .monaco-scrollable-element > .tabList .tab-header {
+			panel.dashboard-panel > .tabbedPanel > .title .tabList .tab-header {
 				border-right-color: ${tabBoarder};
 				border-bottom-color: ${tabBoarder};
 			}

src/sql/parts/dashboard/common/interfaces.ts

@@ -3,9 +3,13 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+import { OnDestroy } from '@angular/core';
+
 import Event from 'vs/base/common/event';
+import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 
 import { AngularDisposable } from 'sql/base/common/lifecycle';
+import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
 
 export enum Conditional {
 	'equals',
@@ -17,7 +21,7 @@ export enum Conditional {
 	'always'
 }
 
-export abstract class DashboardTab extends AngularDisposable {
+export abstract class DashboardTab extends TabChild implements OnDestroy {
 	public abstract layout(): void;
 	public abstract readonly id: string;
 	public abstract readonly editable: boolean;
@@ -26,4 +30,23 @@ export abstract class DashboardTab extends AngularDisposable {
 	public enableEdit(): void {
 		// no op
 	}
+
+	private _toDispose: IDisposable[] = [];
+
+	constructor() {
+		super();
+	}
+
+	public dispose(): void {
+		this._toDispose = dispose(this._toDispose);
+	}
+
+	protected _register<T extends IDisposable>(t: T): T {
+		this._toDispose.push(t);
+		return t;
+	}
+
+	ngOnDestroy() {
+		this.dispose();
+	}
 }

src/sql/parts/dashboard/containers/dashboardControlHostContainer.component.ts

@@ -5,14 +5,17 @@
 import 'vs/css!./dashboardControlHostContainer';
 
 import { Component, forwardRef, Input, AfterContentInit, ViewChild, OnChanges } from '@angular/core';
+
 import Event, { Emitter } from 'vs/base/common/event';
+
 import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
 import { TabConfig } from 'sql/parts/dashboard/common/dashboardWidget';
 import { ControlHostContent } from 'sql/parts/dashboard/contents/controlHostContent.component';
+import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
 
 @Component({
 	selector: 'dashboard-controlhost-container',
-	providers: [{ provide: DashboardTab, useExisting: forwardRef(() => DashboardControlHostContainer) }],
+	providers: [{ provide: TabChild, useExisting: forwardRef(() => DashboardControlHostContainer) }],
 	template: `
 		<controlhost-content [webviewId]="tab.id">
 		</controlhost-content>

src/sql/parts/dashboard/containers/dashboardErrorContainer.component.ts

@@ -9,13 +9,14 @@ import { Component, Inject, Input, forwardRef, ViewChild, ElementRef, ChangeDete
 
 import { TabConfig } from 'sql/parts/dashboard/common/dashboardWidget';
 import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
+import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
 
 import Event, { Emitter } from 'vs/base/common/event';
 import * as nls from 'vs/nls';
 
 @Component({
 	selector: 'dashboard-error-container',
-	providers: [{ provide: DashboardTab, useExisting: forwardRef(() => DashboardErrorContainer) }],
+	providers: [{ provide: TabChild, useExisting: forwardRef(() => DashboardErrorContainer) }],
 	template: `
 		<div class="error-container">
 			<div class="icon globalError">

src/sql/parts/dashboard/containers/dashboardGridContainer.component.ts

@@ -7,6 +7,7 @@ import 'vs/css!./dashboardGridContainer';
 
 import { Component, Inject, Input, forwardRef, ViewChild, ElementRef, ViewChildren, QueryList, OnDestroy, ChangeDetectorRef, EventEmitter } from '@angular/core';
 import { NgGridConfig, NgGrid, NgGridItem } from 'angular2-grid';
+import { concat } from 'rxjs/operator/concat';
 
 import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service';
 import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
@@ -14,13 +15,13 @@ import { TabConfig, WidgetConfig } from 'sql/parts/dashboard/common/dashboardWid
 import { DashboardWidgetWrapper } from 'sql/parts/dashboard/contents/dashboardWidgetWrapper.component';
 import { subscriptionToDisposable } from 'sql/base/common/lifecycle';
 import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
+import { WebviewContent } from 'sql/parts/dashboard/contents/webviewContent.component';
+import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
 
 import { Disposable, IDisposable } from 'vs/base/common/lifecycle';
 import { ConfigurationTarget } from 'vs/platform/configuration/common/configuration';
 import * as objects from 'vs/base/common/objects';
 import Event, { Emitter } from 'vs/base/common/event';
-import { concat } from 'rxjs/operator/concat';
-import { WebviewContent } from 'sql/parts/dashboard/contents/webviewContent.component';
 
 export interface GridCellConfig {
 	id?: string;
@@ -42,7 +43,7 @@ export interface GridWebviewConfig extends GridCellConfig {
 @Component({
 	selector: 'dashboard-grid-container',
 	templateUrl: decodeURI(require.toUrl('sql/parts/dashboard/containers/dashboardGridContainer.component.html')),
-	providers: [{ provide: DashboardTab, useExisting: forwardRef(() => DashboardGridContainer) }]
+	providers: [{ provide: TabChild, useExisting: forwardRef(() => DashboardGridContainer) }]
 })
 export class DashboardGridContainer extends DashboardTab implements OnDestroy {
 	@Input() private tab: TabConfig;

src/sql/parts/dashboard/containers/dashboardHomeContainer.component.ts

@@ -14,15 +14,18 @@ import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboar
 import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
 import { AngularEventType } from 'sql/services/angularEventing/angularEventingService';
 import { DashboardWidgetWrapper } from 'sql/parts/dashboard/contents/dashboardWidgetWrapper.component';
-import { ConfigurationTarget } from 'vs/platform/configuration/common/configuration';
 import { ScrollableDirective } from 'sql/base/browser/ui/scrollable/scrollable.directive';
+import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
+
+import { ConfigurationTarget } from 'vs/platform/configuration/common/configuration';
+import { ScrollbarVisibility } from 'vs/base/common/scrollable';
 
 @Component({
 	selector: 'dashboard-home-container',
-	providers: [{ provide: DashboardTab, useExisting: forwardRef(() => DashboardHomeContainer) }],
+	providers: [{ provide: TabChild, useExisting: forwardRef(() => DashboardHomeContainer) }],
 	template: `
 		<div class="fullsize" style="display: flex; flex-direction: column">
-			<div scrollable>
+			<div scrollable [horizontalScroll]="ScrollbarVisibility.Hidden" [verticalScroll]="ScrollbarVisibility.Auto">
 				<dashboard-widget-wrapper #propertiesClass *ngIf="properties" [collapsable]="true" [_config]="properties"
 					style="padding-left: 10px; padding-right: 10px; display: block; flex: 0" [style.height.px]="_propertiesClass?.collapsed ? '30' : '90'">
 				</dashboard-widget-wrapper>
@@ -37,6 +40,8 @@ export class DashboardHomeContainer extends DashboardWidgetContainer {
 	@ViewChild('propertiesClass') private _propertiesClass: DashboardWidgetWrapper;
 	@ContentChild(ScrollableDirective) private _scrollable;
 
+	private ScrollbarVisibility = ScrollbarVisibility;
+
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) _cd: ChangeDetectorRef,
 		@Inject(forwardRef(() => CommonServiceInterface)) protected dashboardService: DashboardServiceInterface

src/sql/parts/dashboard/containers/dashboardModelViewContainer.component.ts

@@ -11,10 +11,11 @@ import Event, { Emitter } from 'vs/base/common/event';
 import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
 import { TabConfig } from 'sql/parts/dashboard/common/dashboardWidget';
 import { ModelViewContent } from 'sql/parts/modelComponents/modelViewContent.component';
+import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
 
 @Component({
 	selector: 'dashboard-modelview-container',
-	providers: [{ provide: DashboardTab, useExisting: forwardRef(() => DashboardModelViewContainer) }],
+	providers: [{ provide: TabChild, useExisting: forwardRef(() => DashboardModelViewContainer) }],
 	template: `
 		<modelview-content [modelViewId]="tab.id">
 		</modelview-content>

src/sql/parts/dashboard/containers/dashboardNavSection.component.html

@@ -4,18 +4,20 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 -->
-<panel [options]="panelOpt" style="flex: 1 1 auto;" class="dashboard-panel" (onTabChange)="handleTabChange($event)">
+<panel [options]="panelOpt" style="flex: 1 1 auto;" class="dashboard-panel">
 	<tab [visibilityType]="'visibility'" *ngFor="let tab of tabs" [title]="tab.title" class="fullsize"
 	[identifier]="tab.id" [canClose]="tab.canClose" [actions]="tab.actions" [iconClass]="tab.iconClass">
-		<dashboard-webview-container *ngIf="getContentType(tab) === 'webview-container'" [tab]="tab">
-		</dashboard-webview-container>
-		<dashboard-widget-container *ngIf="getContentType(tab) === 'widgets-container'" [tab]="tab">
-		</dashboard-widget-container>
-		<dashboard-modelview-container *ngIf="getContentType(tab) === 'modelview-container'" [tab]="tab">
-		</dashboard-modelview-container>
-		<dashboard-grid-container *ngIf="getContentType(tab) === 'grid-container'" [tab]="tab">
-		</dashboard-grid-container>
-		<dashboard-error-container *ngIf="getContentType(tab) === 'error-container'" [tab]="tab">
-		</dashboard-error-container>
+		<ng-template>
+			<dashboard-webview-container *ngIf="getContentType(tab) === 'webview-container'" [tab]="tab">
+			</dashboard-webview-container>
+			<dashboard-widget-container *ngIf="getContentType(tab) === 'widgets-container'" [tab]="tab">
+			</dashboard-widget-container>
+			<dashboard-modelview-container *ngIf="getContentType(tab) === 'modelview-container'" [tab]="tab">
+			</dashboard-modelview-container>
+			<dashboard-grid-container *ngIf="getContentType(tab) === 'grid-container'" [tab]="tab">
+			</dashboard-grid-container>
+			<dashboard-error-container *ngIf="getContentType(tab) === 'error-container'" [tab]="tab">
+			</dashboard-error-container>
+		</ng-template>
 	</tab>
 </panel>

src/sql/parts/dashboard/containers/dashboardNavSection.component.ts

@@ -11,7 +11,7 @@ import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboar
 import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
 import { WidgetConfig, TabConfig, NavSectionConfig } from 'sql/parts/dashboard/common/dashboardWidget';
 import { PanelComponent, IPanelOptions, NavigationBarLayout } from 'sql/base/browser/ui/panel/panel.component';
-import { TabComponent } from 'sql/base/browser/ui/panel/tab.component';
+import { TabComponent, TabChild } from 'sql/base/browser/ui/panel/tab.component';
 import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
 import { WIDGETS_CONTAINER } from 'sql/parts/dashboard/containers/dashboardWidgetContainer.contribution';
 import { GRID_CONTAINER } from 'sql/parts/dashboard/containers/dashboardGridContainer.contribution';
@@ -23,7 +23,7 @@ import * as nls from 'vs/nls';
 
 @Component({
 	selector: 'dashboard-nav-section',
-	providers: [{ provide: DashboardTab, useExisting: forwardRef(() => DashboardNavSection) }],
+	providers: [{ provide: TabChild, useExisting: forwardRef(() => DashboardNavSection) }],
 	templateUrl: decodeURI(require.toUrl('sql/parts/dashboard/containers/dashboardNavSection.component.html'))
 })
 export class DashboardNavSection extends DashboardTab implements OnDestroy, OnChanges, AfterContentInit {
@@ -51,7 +51,7 @@ export class DashboardNavSection extends DashboardTab implements OnDestroy, OnCh
 		dashboardHelper.validateGridConfig
 	];
 
-	@ViewChildren(DashboardTab) private _tabs: QueryList<DashboardTab>;
+	@ViewChildren(TabChild) private _tabs: QueryList<DashboardTab>;
 	@ViewChild(PanelComponent) private _panel: PanelComponent;
 	constructor(
 		@Inject(forwardRef(() => CommonServiceInterface)) protected dashboardService: CommonServiceInterface,
@@ -124,11 +124,6 @@ export class DashboardNavSection extends DashboardTab implements OnDestroy, OnCh
 				this.addNewTab(config);
 				return config;
 			});
-
-			// put this immediately on the stack so that is ran *after* the tab is rendered
-			setTimeout(() => {
-				this._panel.selectTab(selectedTabs[0].id);
-			});
 		}
 	}
 
@@ -174,10 +169,4 @@ export class DashboardNavSection extends DashboardTab implements OnDestroy, OnCh
 			});
 		}
 	}
-
-	public handleTabChange(tab: TabComponent): void {
-		let localtab = this._tabs.find(i => i.id === tab.identifier);
-		this._cd.detectChanges();
-		localtab.layout();
-	}
 }

src/sql/parts/dashboard/containers/dashboardWebviewContainer.component.ts

@@ -11,10 +11,11 @@ import Event, { Emitter } from 'vs/base/common/event';
 import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
 import { TabConfig } from 'sql/parts/dashboard/common/dashboardWidget';
 import { WebviewContent } from 'sql/parts/dashboard/contents/webviewContent.component';
+import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
 
 @Component({
 	selector: 'dashboard-webview-container',
-	providers: [{ provide: DashboardTab, useExisting: forwardRef(() => DashboardWebviewContainer) }],
+	providers: [{ provide: TabChild, useExisting: forwardRef(() => DashboardWebviewContainer) }],
 	template: `
 		<webview-content [webviewId]="tab.id">
 		</webview-content>

src/sql/parts/dashboard/containers/dashboardWidgetContainer.component.ts

@@ -14,6 +14,7 @@ import { DashboardWidgetWrapper } from 'sql/parts/dashboard/contents/dashboardWi
 import { subscriptionToDisposable } from 'sql/base/common/lifecycle';
 import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
 import { WidgetContent } from 'sql/parts/dashboard/contents/widgetContent.component';
+import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
 
 import { Disposable, IDisposable } from 'vs/base/common/lifecycle';
 import { ConfigurationTarget } from 'vs/platform/configuration/common/configuration';
@@ -22,7 +23,7 @@ import Event, { Emitter } from 'vs/base/common/event';
 
 @Component({
 	selector: 'dashboard-widget-container',
-	providers: [{ provide: DashboardTab, useExisting: forwardRef(() => DashboardWidgetContainer) }],
+	providers: [{ provide: TabChild, useExisting: forwardRef(() => DashboardWidgetContainer) }],
 	template: `
 		<widget-content [widgets]="widgets" [originalConfig]="tab.originalConfig" [context]="tab.context">
 		</widget-content>

src/sql/parts/dashboard/contents/controlHostContent.component.ts

@@ -10,7 +10,6 @@ import Event, { Emitter } from 'vs/base/common/event';
 import { Parts } from 'vs/workbench/services/part/common/partService';
 import { IDisposable } from 'vs/base/common/lifecycle';
 
-import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
 import { TabConfig } from 'sql/parts/dashboard/common/dashboardWidget';
 import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service';
 import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';

src/sql/parts/dashboard/contents/webviewContent.component.ts

@@ -13,7 +13,6 @@ import { IDisposable, Disposable } from 'vs/base/common/lifecycle';
 import { addDisposableListener, EventType } from 'vs/base/browser/dom';
 import { memoize } from 'vs/base/common/decorators';
 
-import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
 import { TabConfig } from 'sql/parts/dashboard/common/dashboardWidget';
 import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service';
 import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
@@ -37,15 +36,13 @@ export class WebviewContent extends AngularDisposable implements OnInit, IDashbo
 	private _onMessageDisposable: IDisposable;
 	private _webview: Webview;
 	private _html: string;
-	private _dashboardService: DashboardServiceInterface;
 
 	constructor(
-		@Inject(forwardRef(() => CommonServiceInterface)) private commonService: CommonServiceInterface,
+		@Inject(forwardRef(() => CommonServiceInterface)) private _dashboardService: DashboardServiceInterface,
 		@Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef,
 		@Inject(forwardRef(() => ElementRef)) private _el: ElementRef
 	) {
 		super();
-		this._dashboardService = commonService as DashboardServiceInterface;
 	}
 
 	ngOnInit() {

src/sql/parts/dashboard/dashboard.module.ts

@@ -56,12 +56,13 @@ import { JobHistoryComponent } from 'sql/parts/jobManagement/views/jobHistory.co
 let baseComponents = [DashboardHomeContainer, DashboardComponent, DashboardWidgetWrapper, DashboardWebviewContainer,
 	DashboardWidgetContainer, DashboardGridContainer, DashboardErrorContainer, DashboardNavSection, ModelViewContent, WebviewContent, WidgetContent,
 	ComponentHostDirective, BreadcrumbComponent, ControlHostContent, DashboardControlHostContainer,
-	JobsViewComponent, AgentViewComponent, JobHistoryComponent, JobStepsViewComponent, DashboardModelViewContainer, ModelComponentWrapper,
-	ScrollableDirective];
+	JobsViewComponent, AgentViewComponent, JobHistoryComponent, JobStepsViewComponent, DashboardModelViewContainer, ModelComponentWrapper];
 
 /* Panel */
 import { PanelModule } from 'sql/base/browser/ui/panel/panel.module';
 
+import { ScrollableModule } from 'sql/base/browser/ui/scrollable/scrollable.module';
+
 /* Pages */
 import { ServerDashboardPage } from 'sql/parts/dashboard/pages/serverDashboardPage.component';
 import { DatabaseDashboardPage } from 'sql/parts/dashboard/pages/databaseDashboardPage.component';
@@ -75,7 +76,6 @@ import { TasksWidget } from 'sql/parts/dashboard/widgets/tasks/tasksWidget.compo
 import { InsightsWidget } from 'sql/parts/dashboard/widgets/insights/insightsWidget.component';
 import { WebviewWidget } from 'sql/parts/dashboard/widgets/webview/webviewWidget.component';
 import { JobStepsViewComponent } from '../jobManagement/views/jobStepsView.component';
-import { ScrollableDirective } from 'sql/base/browser/ui/scrollable/scrollable.directive';
 
 let widgetComponents = [
 	PropertiesWidgetComponent,
@@ -126,7 +126,8 @@ const appRoutes: Routes = [
 		NgGridModule,
 		ChartsModule,
 		RouterModule.forRoot(appRoutes),
-		PanelModule
+		PanelModule,
+		ScrollableModule
 	],
 	providers: [
 		{ provide: APP_BASE_HREF, useValue: '/' },

src/sql/parts/dashboard/widgets/insights/views/tableInsight.component.ts

@@ -10,7 +10,7 @@ import { Dimension } from 'vs/base/browser/builder';
 import { IInsightsView, IInsightData } from 'sql/parts/dashboard/widgets/insights/interfaces';
 import { Table } from 'sql/base/browser/ui/table/table';
 import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
-import { DragCellSelectionModel } from '../../../../../base/browser/ui/table/plugins/dragCellSelectionModel.plugin';
+import { DragCellSelectionModel } from 'sql/base/browser/ui/table/plugins/dragCellSelectionModel.plugin';
 
 @Component({
 	template: '<span></span>'
@@ -62,9 +62,9 @@ export default class TableInsight implements IInsightsView, OnInit {
 	}
 }
 
-function transformData(rows: string[][], columns: string[]): {[key: string]: string}[] {
+function transformData(rows: string[][], columns: string[]): { [key: string]: string }[] {
 	return rows.map(row => {
-		let object: {[key: string]: string} = {};
+		let object: { [key: string]: string } = {};
 		row.forEach((val, index) => {
 			object[columns[index]] = val;
 		});

src/sql/parts/grid/views/query/chartViewer.component.ts

@@ -97,12 +97,12 @@ export class ChartViewerComponent implements OnInit, OnDestroy, IChartViewAction
 		@Inject(BOOTSTRAP_SERVICE_ID) private _bootstrapService: IBootstrapService,
 		@Inject(forwardRef(() => ChangeDetectorRef)) private _cd: ChangeDetectorRef
 	) {
+		this.setDefaultChartConfig();
 	}
 
 	ngOnInit() {
-		this.setDefaultChartConfig();
 		this.legendOptions = Object.values(LegendPosition);
-		this.initializeUI();
+		this._initActionBar();
 	}
 
 	private setDefaultChartConfig() {
@@ -114,11 +114,6 @@ export class ChartViewerComponent implements OnInit, OnDestroy, IChartViewAction
 		};
 	}
 
-	private initializeUI() {
-		// Initialize the taskbar
-		this._initActionBar();
-	}
-
 	private getDefaultChartType(): string {
 		let defaultChartType = Constants.chartTypeHorizontalBar;
 		if (this._bootstrapService.configurationService) {
@@ -155,6 +150,10 @@ export class ChartViewerComponent implements OnInit, OnDestroy, IChartViewAction
 		this.initChart();
 	}
 
+	ngAfterViewInit() {
+		this.initChart();
+	}
+
 	setConfigValue(key: string, value: any, refresh = true): void {
 		this._chartConfig[key] = value;
 		if (refresh) {
@@ -316,7 +315,6 @@ export class ChartViewerComponent implements OnInit, OnDestroy, IChartViewAction
 		this._executeResult.rows = dataSet.dataRows.getRange(0, dataSet.dataRows.getLength()).map(gridRow => {
 			return gridRow.values.map(cell => cell.displayValue);
 		});
-		this.initChart();
 	}
 
 	public initChart() {

src/sql/parts/jobManagement/agent/agentView.component.html

@@ -7,12 +7,14 @@
 
 <panel class="dashboard-panel" [options]="panelOpt">
 	<tab [title]="jobsComponentTitle" class="fullsize" [identifier]="jobsTabIdentifier"
-	     [iconClass]="jobsIconClass">
-		<div id="jobsDiv" class="fullsize" *ngIf="showHistory === false">
-			<jobsview-component></jobsview-component>
-		</div>
-		<div id="historyDiv" class="fullsize" *ngIf="showHistory === true">
-			<jobhistory-component></jobhistory-component>
-		</div>
+		 [iconClass]="jobsIconClass">
+		 <ng-template>
+			<div id="jobsDiv" class="fullsize" *ngIf="showHistory === false">
+				<jobsview-component></jobsview-component>
+			</div>
+			<div id="historyDiv" class="fullsize" *ngIf="showHistory === true">
+				<jobhistory-component></jobhistory-component>
+			</div>
+		</ng-template>
 	</tab>
 </panel>

src/sql/parts/modelComponents/modelViewContent.component.ts

@@ -11,9 +11,8 @@ import { Parts } from 'vs/workbench/services/part/common/partService';
 import { IDisposable, Disposable } from 'vs/base/common/lifecycle';
 import { addDisposableListener, EventType } from 'vs/base/browser/dom';
 import { memoize } from 'vs/base/common/decorators';
-import nls = require('vs/nls');
+import * as nls from 'vs/nls';
 
-import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
 import { TabConfig } from 'sql/parts/dashboard/common/dashboardWidget';
 import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
 import { IModelView } from 'sql/services/model/modelViewService';

src/sql/parts/query/views/queryOutput.component.html

@@ -6,28 +6,36 @@
 -->
 
 <panel class="fullsize" [options]="panelOpt">
-	<tab [title]="queryComponentTitle" class="fullsize" [identifier]="resultsTabIdentifier">
-		<div id="queryDiv" class="fullsize">
-			<query-component id="queryComp" #queryComponent class="fullsize" [queryParameters]="queryParameters"></query-component>
-		</div>
+	<tab [visibilityType]="'visibility'" [title]="queryComponentTitle" class="fullsize" [identifier]="resultsTabIdentifier">
+		<ng-template>
+			<div id="queryDiv" class="fullsize">
+				<query-component id="queryComp" class="fullsize" [queryParameters]="queryParameters"></query-component>
+			</div>
+		</ng-template>
 	</tab>
 
-	<tab *ngIf="hasQueryPlan" [title]="queryPlanTitle" [identifier]="queryPlanTabIdentifier">
-		<div id="queryPlanDiv" class="headersVisible fullsize" style=" overflow: auto; margin-left: 2px">
-			<queryplan-component #queryPlanComponent class="fullsize" style="display: block"></queryplan-component>
-		</div>
+	<tab *ngIf="hasQueryPlan" [visibilityType]="'visibility'" [title]="queryPlanTitle" [identifier]="queryPlanTabIdentifier">
+		<ng-template>
+			<div id="queryPlanDiv" class="headersVisible fullsize" style=" overflow: auto; margin-left: 2px">
+				<queryplan-component class="fullsize" style="display: block"></queryplan-component>
+			</div>
+		</ng-template>
 	</tab>
 
-	<tab *ngIf="hasQueryPlan" class="fullsize" [title]="topOperationsTitle">
-		<div id="topOperationsDiv" class="fullsize">
-			<top-operations-component #topOperationsComponent class="fullsize" style="display: block" [queryParameters]="queryParameters"></top-operations-component>
-		</div>
+	<tab *ngIf="hasQueryPlan" [visibilityType]="'visibility'" class="fullsize" [title]="topOperationsTitle">
+		<ng-template>
+			<div id="topOperationsDiv" class="fullsize">
+				<top-operations-component class="fullsize" style="display: block" [queryParameters]="queryParameters"></top-operations-component>
+			</div>
+		</ng-template>
 	</tab>
 
-	<tab *ngIf="showChartView" [title]="chartViewerTitle" [identifier]="chartViewerTabIdentifier">
-		<div id="chartViewerDiv" class="headersVisible fullsize" >
-			<chart-viewer  #chartViewerComponent class="fullsize" style="display: block">
-			</chart-viewer>
-		</div>
+	<tab *ngIf="showChartView" [visibilityType]="'visibility'" [title]="chartViewerTitle" [identifier]="chartViewerTabIdentifier">
+		<ng-template>
+			<div id="chartViewerDiv" class="headersVisible fullsize" >
+				<chart-viewer [dataSet]="activeDataSet" class="fullsize" style="display: block">
+				</chart-viewer>
+			</div>
+		</ng-template>
 	</tab>
 </panel>

src/sql/parts/query/views/queryOutput.component.ts

@@ -32,18 +32,16 @@ declare type PaneType = 'messages' | 'results';
 	selector: QUERY_OUTPUT_SELECTOR,
 	templateUrl: decodeURI(require.toUrl('sql/parts/query/views/queryOutput.component.html'))
 })
-export class QueryOutputComponent implements OnInit, OnDestroy {
+export class QueryOutputComponent implements OnDestroy {
 
-	@ViewChild('queryComponent') queryComponent: QueryComponent;
-
-	@ViewChild('queryPlanComponent') queryPlanComponent: QueryPlanComponent;
-
-	@ViewChild('topOperationsComponent') topOperationsComponent: TopOperationsComponent;
-
-	@ViewChild('chartViewerComponent') chartViewerComponent: ChartViewerComponent;
+	@ViewChild(QueryComponent) queryComponent: QueryComponent;
+	@ViewChild(QueryPlanComponent) queryPlanComponent: QueryPlanComponent;
+	@ViewChild(TopOperationsComponent) topOperationsComponent: TopOperationsComponent;
 
 	@ViewChild(PanelComponent) private _panel: PanelComponent;
 
+	private activeDataSet: any;
+
 	// tslint:disable:no-unused-variable
 	private readonly queryComponentTitle: string = nls.localize('results', 'Results');
 	private readonly queryPlanTitle: string = nls.localize('queryPlan', 'Query Plan');
@@ -78,7 +76,7 @@ export class QueryOutputComponent implements OnInit, OnDestroy {
 	/**
 	 * Called by Angular when the object is initialized
 	 */
-	public ngOnInit(): void {
+	public ngAfterViewInit(): void {
 		this._disposables.push(toDisposableSubscription(this.queryComponent.queryPlanAvailable.subscribe((xml) => {
 			this.hasQueryPlan = true;
 			this._cd.detectChanges();
@@ -90,7 +88,7 @@ export class QueryOutputComponent implements OnInit, OnDestroy {
 		this._disposables.push(toDisposableSubscription(this.queryComponent.showChartRequested.subscribe((dataSet) => {
 			this.showChartView = true;
 			this._cd.detectChanges();
-			this.chartViewerComponent.dataSet = dataSet;
+			this.activeDataSet = dataSet;
 			this._panel.selectTab(this.chartViewerTabIdentifier);
 		})));