ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-02 17:23:40 -05:00
Code Issues Packages Projects Releases Wiki Activity

Save charting state in SQL notebooks. (#9789)

Browse Source
This commit is contained in:
Cory Rivera
2020-03-30 16:48:28 -07:00
committed by GitHub
parent bb135d6c67
commit d363ea33b5
10 changed files with 123 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/sql/workbench/contrib/notebook/browser/cellViews/output.component.ts
View File

@@ -172,6 +172,7 @@ export class OutputComponent extends CellView implements OnInit, AfterViewInit {
this._componentInstance = componentRef.instance;
this._componentInstance.mimeType = mimeType;
this._componentInstance.cellModel = this.cellModel;
this._componentInstance.cellOutput = this.cellOutput;
this._componentInstance.bundleOptions = options;
this._changeref.detectChanges();
let el = <HTMLElement>componentRef.location.nativeElement;

70
src/sql/workbench/contrib/notebook/browser/outputs/gridOutput.component.ts
View File

@@ -37,6 +37,8 @@ import { IUntitledTextEditorService } from 'vs/workbench/services/untitled/commo
import { ChartView } from 'sql/workbench/contrib/charts/browser/chartView';
import { Orientation } from 'vs/base/browser/ui/splitview/splitview';
import { ToggleableAction } from 'sql/workbench/contrib/notebook/browser/notebookActions';
import { IInsightOptions } from 'sql/workbench/common/editor/query/chartState';
import { NotebookChangeType } from 'sql/workbench/services/notebook/common/contracts';
@Component({
selector: GridOutputComponent.SELECTOR,
@@ -49,6 +51,7 @@ export class GridOutputComponent extends AngularDisposable implements IMimeCompo
private _initialized: boolean = false;
private _cellModel: ICellModel;
private _cellOutput: azdata.nb.ICellOutput;
private _bundleOptions: MimeModel.IOptions;
private _table: DataResourceTable;
@@ -79,6 +82,14 @@ export class GridOutputComponent extends AngularDisposable implements IMimeCompo
}
}
get cellOutput(): azdata.nb.ICellOutput {
return this._cellOutput;
}
@Input() set cellOutput(value: azdata.nb.ICellOutput) {
this._cellOutput = value;
}
ngOnInit() {
this.renderGrid();
}
@@ -90,7 +101,7 @@ export class GridOutputComponent extends AngularDisposable implements IMimeCompo
if (!this._table) {
let source = <IDataResource><any>this._bundleOptions.data[this.mimeType];
let state = new GridTableState(0, 0);
this._table = this.instantiationService.createInstance(DataResourceTable, source, this.cellModel.notebookModel.notebookUri.toString(), state);
this._table = this.instantiationService.createInstance(DataResourceTable, source, this.cellModel, this.cellOutput, state);
let outputElement = <HTMLElement>this.output.nativeElement;
outputElement.appendChild(this._table.element);
this._register(attachTableStyler(this._table, this.themeService));
@@ -116,7 +127,8 @@ class DataResourceTable extends GridTableBase<any> {
private _chartContainer: HTMLElement;
constructor(source: IDataResource,
public readonly documentUri: string,
private cellModel: ICellModel,
private cellOutput: azdata.nb.ICellOutput,
state: GridTableState,
@IContextMenuService contextMenuService: IContextMenuService,
@IInstantiationService protected instantiationService: IInstantiationService,
@@ -125,14 +137,28 @@ class DataResourceTable extends GridTableBase<any> {
@IConfigurationService configurationService: IConfigurationService
) {
super(state, createResultSet(source), contextMenuService, instantiationService, editorService, untitledEditorService, configurationService);
this._gridDataProvider = this.instantiationService.createInstance(DataResourceDataProvider, source, this.resultSet, this.documentUri);
this._gridDataProvider = this.instantiationService.createInstance(DataResourceDataProvider, source, this.resultSet, this.cellModel.notebookModel.notebookUri.toString());
this._chart = this.instantiationService.createInstance(ChartView, false);
if (!this.cellOutput.metadata) {
this.cellOutput.metadata = {};
} else if (this.cellOutput.metadata.azdata_chartOptions) {
this._chart.options = this.cellOutput.metadata.azdata_chartOptions as IInsightOptions;
this.updateChartData(this.resultSet.rowCount, this.resultSet.columnInfo.length, this.gridDataProvider);
}
this._chart.onOptionsChange(options => {
this.setChartOptions(options);
});
}
get gridDataProvider(): IGridDataProvider {
public get gridDataProvider(): IGridDataProvider {
return this._gridDataProvider;
}
public get chartDisplayed(): boolean {
return this.cellOutput.metadata.azdata_chartOptions !== undefined;
}
protected getCurrentActions(): IAction[] {
return this.getContextActions();
}
@@ -158,9 +184,15 @@ class DataResourceTable extends GridTableBase<any> {
if (!this._chartContainer) {
this._chartContainer = document.createElement('div');
this._chartContainer.style.display = 'none';
this._chartContainer.style.width = '100%';
if (this.cellOutput.metadata.azdata_chartOptions) {
this.tableContainer.style.display = 'none';
this._chartContainer.style.display = 'inline-block';
} else {
this._chartContainer.style.display = 'none';
}
this.element.appendChild(this._chartContainer);
this._chart.render(this._chartContainer);
}
@@ -170,14 +202,26 @@ class DataResourceTable extends GridTableBase<any> {
if (this.tableContainer.style.display !== 'none') {
this.tableContainer.style.display = 'none';
this._chartContainer.style.display = 'inline-block';
this.setChartOptions(this._chart.options);
} else {
this.tableContainer.style.display = 'inline-block';
this._chartContainer.style.display = 'none';
this.tableContainer.style.display = 'inline-block';
this.setChartOptions(undefined);
}
this.layout();
}
public get chart(): ChartView {
return this._chart;
public updateChartData(rowCount: number, columnCount: number, gridDataProvider: IGridDataProvider): void {
gridDataProvider.getRowData(0, rowCount).then(result => {
let range = new Slick.Range(0, 0, rowCount - 1, columnCount - 1);
let columns = gridDataProvider.getColumnHeaders(range);
this._chart.setData(result.resultSubset.rows, columns);
});
}
private setChartOptions(options: IInsightOptions | undefined) {
this.cellOutput.metadata.azdata_chartOptions = options;
this.cellModel.sendChangeToNotebook(NotebookChangeType.CellMetadataUpdated);
}
}
@@ -398,7 +442,7 @@ export class NotebookChartAction extends ToggleableAction {
toggleOnClass: NotebookChartAction.SHOWTABLE_ICON,
toggleOffLabel: NotebookChartAction.SHOWCHART_LABEL,
toggleOffClass: NotebookChartAction.SHOWCHART_ICON,
isOn: false
isOn: resourceTable.chartDisplayed
});
}
@@ -407,12 +451,8 @@ export class NotebookChartAction extends ToggleableAction {
this.toggle(!this.state.isOn);
if (this.state.isOn) {
let rowCount = context.table.getData().getLength();
let range = new Slick.Range(0, 0, rowCount - 1, context.table.columns.length - 1);
let columns = context.gridDataProvider.getColumnHeaders(range);
context.gridDataProvider.getRowData(0, rowCount).then(result => {
this.resourceTable.chart.setData(result.resultSubset.rows, columns);
});
let columnCount = context.table.columns.length;
this.resourceTable.updateChartData(rowCount, columnCount, context.gridDataProvider);
}
return true;
}

2
src/sql/workbench/contrib/notebook/browser/outputs/mimeRegistry.ts
View File

@@ -10,6 +10,7 @@ import { MimeModel } from 'sql/workbench/services/notebook/browser/outputs/mimem
import * as types from 'vs/base/common/types';
import { ICellModel } from 'sql/workbench/services/notebook/browser/models/modelInterfaces';
import { values } from 'vs/base/common/collections';
import { nb } from 'azdata';
export type FactoryIdentifier = string;
@@ -21,6 +22,7 @@ export interface IMimeComponent {
bundleOptions: MimeModel.IOptions;
mimeType: string;
cellModel?: ICellModel;
cellOutput?: nb.ICellOutput;
layout(): void;
}