ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-29 09:35:38 -05:00
Code Issues Packages Projects Releases Wiki Activity

Adding plan properties comparison, fixed dark icons, fixed dropdown text. (#19601)

Browse Source 
* Adding prop compare logic

* Fixed using semaphore

* Adding dark icons
Adding dropdown prefix
Adding all visible plans from plan comparison

* Reverting mssql vbump

* Fixing icon name

* executionPlanComparisonPropertiesView

* Fixing icon paths and adding preselect model

* Fixed icon spacing

* Removing styling in formatter

* Adding tooltip to plugs
switching to plugins

* Removing unecessary calls to getSkeletonNodes()

* Renaming variable

* Fixed column value formatting

* Undoing formatter change
This commit is contained in:
Aasim Khan
2022-06-03 16:31:03 -07:00
committed by GitHub
parent f0f4a0a3cf
commit b63fd59372
39 changed files with 540 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/sql/workbench/api/common/sqlExtHost.api.impl.ts
View File

@@ -597,7 +597,9 @@ export function createAdsApiFactory(accessor: ServicesAccessor): IAdsExtensionAp
};
const executionPlan: typeof azdata.executionPlan = {
BadgeType: sqlExtHostTypes.executionPlan.BadgeType
BadgeType: sqlExtHostTypes.executionPlan.BadgeType,
ExecutionPlanGraphElementPropertyDataType: sqlExtHostTypes.executionPlan.ExecutionPlanGraphElementPropertyDataType,
ExecutionPlanGraphElementPropertyBetterValue: sqlExtHostTypes.executionPlan.ExecutionPlanGraphElementPropertyBetterValue
};
return {

15
src/sql/workbench/api/common/sqlExtHostTypes.ts
View File

@@ -1041,4 +1041,19 @@ export namespace executionPlan {
CriticalWarning = 1,
Parallelism = 2
}
export enum ExecutionPlanGraphElementPropertyDataType {
Number = 0,
String = 1,
Boolean = 2,
Nested = 3
}
export enum ExecutionPlanGraphElementPropertyBetterValue {
LowerNumber = 0,
HigherNumber = 1,
True = 2,
False = 3,
None = 4
}
}

2
src/sql/workbench/contrib/executionPlan/browser/compareExecutionPlanInput.ts
View File

@@ -53,5 +53,7 @@ export class ExecutionPlanComparisonInput extends EditorInput {
export interface ExecutionPlanComparisonEditorModel {
topExecutionPlan?: azdata.executionPlan.ExecutionPlanGraph[];
topPlanIndex?: number;
bottomExecutionPlan?: azdata.executionPlan.ExecutionPlanGraph[];
bottomPlanIndex?: number;
}

5
src/sql/workbench/contrib/executionPlan/browser/constants.ts
View File

@@ -279,6 +279,11 @@ export const splitScreenHorizontallyIconClassName = 'ep-split-screen-horizontall
export const splitScreenVerticallyIconClassName = 'ep-split-screen-vertically-icon';
export const resetZoomIconClassName = 'ep-reset-zoom-icon';
export const executionPlanCompareIconClassName = 'ep-plan-compare-icon';
export const executionPlanComparisonPropertiesDifferent = 'ep-properties-different';
export const executionPlanComparisonPropertiesRedDownArrow = 'ep-properties-red-down-arrow';
export const executionPlanComparisonPropertiesGreenDownArrow = 'ep-properties-green-down-arrow';
export const executionPlanComparisonPropertiesRedUpArrow = 'ep-properties-red-up-arrow';
export const executionPlanComparisonPropertiesGreenUpArrow = 'ep-properties-green-up-arrow';
/**
* Plan comparison polygon border colors

4
src/sql/workbench/contrib/executionPlan/browser/executionPlanComparisonEditor.ts
View File

@@ -69,10 +69,10 @@ export class ExecutionPlanComparisonEditor extends EditorPane {
input._executionPlanComparisonView = this._instantiationService.createInstance(ExecutionPlanComparisonEditorView, this._editorContainer);
if (this.input.preloadModel) {
if (this.input.preloadModel.topExecutionPlan) {
input._executionPlanComparisonView.addExecutionPlanGraph(this.input.preloadModel.topExecutionPlan);
input._executionPlanComparisonView.addExecutionPlanGraph(this.input.preloadModel.topExecutionPlan, this.input.preloadModel.topPlanIndex);
}
if (this.input.preloadModel.bottomExecutionPlan) {
input._executionPlanComparisonView.addExecutionPlanGraph(this.input.preloadModel.bottomExecutionPlan);
input._executionPlanComparisonView.addExecutionPlanGraph(this.input.preloadModel.bottomExecutionPlan, this.input.preloadModel.bottomPlanIndex);
}
}
} else { // Getting the cached comparison view from the input and adding it to the base editor node.

51
src/sql/workbench/contrib/executionPlan/browser/executionPlanComparisonEditorView.ts
View File

@@ -29,6 +29,7 @@ import { errorForeground, listHoverBackground, textLinkForeground } from 'vs/pla
import { ExecutionPlanViewHeader } from 'sql/workbench/contrib/executionPlan/browser/executionPlanViewHeader';
import { attachSelectBoxStyler } from 'sql/platform/theme/common/styler';
import { IProgressService, ProgressLocation } from 'vs/platform/progress/common/progress';
import { generateUuid } from 'vs/base/common/uuid';
import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
export class ExecutionPlanComparisonEditorView {
@@ -92,7 +93,7 @@ export class ExecutionPlanComparisonEditorView {
private _activeBottomPlanIndex: number = 0;
private _bottomPlanRecommendations: ExecutionPlanViewHeader;
private _bottomSimilarNode: Map<string, azdata.executionPlan.ExecutionGraphComparisonResult> = new Map();
private _latestRequestUuid: string;
private get _activeBottomPlanDiagram(): AzdataGraphView {
if (this.bottomPlanDiagrams.length > 0) {
@@ -101,6 +102,10 @@ export class ExecutionPlanComparisonEditorView {
return undefined;
}
private createQueryDropdownPrefixString(query: string, index: number, totalQueries: number): string {
return localize('queryDropdownPrefix', "Query {0} of {1}: {2}", index, totalQueries, query);
}
constructor(
parentContainer: HTMLElement,
@IInstantiationService private _instantiationService: IInstantiationService,
@@ -180,7 +185,9 @@ export class ExecutionPlanComparisonEditorView {
this._topPlanDropdown = new SelectBox(['option 1', 'option2'], 'option1', this.contextViewService, this._topPlanDropdownContainer);
this._topPlanDropdown.render(this._topPlanDropdownContainer);
this._topPlanDropdown.onDidSelect(async (e) => {
this._activeBottomPlanDiagram.clearSubtreePolygon();
if (this._activeBottomPlanDiagram) {
this._activeBottomPlanDiagram.clearSubtreePolygon();
}
this._activeTopPlanDiagram.clearSubtreePolygon();
this._topPlanDiagramContainers.forEach(c => {
c.style.display = 'none';
@@ -205,7 +212,9 @@ export class ExecutionPlanComparisonEditorView {
this._bottomPlanDropdown.render(this._bottomPlanDropdownContainer);
this._bottomPlanDropdown.onDidSelect(async (e) => {
this._activeBottomPlanDiagram.clearSubtreePolygon();
this._activeTopPlanDiagram.clearSubtreePolygon();
if (this._activeTopPlanDiagram) {
this._activeTopPlanDiagram.clearSubtreePolygon();
}
this._bottomPlanDiagramContainers.forEach(c => {
c.style.display = 'none';
});
@@ -285,7 +294,7 @@ export class ExecutionPlanComparisonEditorView {
graphFileContent: fileContent,
graphFileType: extname(fileURI.fsPath).replace('.', '')
});
await this.addExecutionPlanGraph(executionPlanGraphs.graphs);
await this.addExecutionPlanGraph(executionPlanGraphs.graphs, 0);
}
this._placeholderInfoboxContainer.style.display = '';
this._placeholderLoading.loading = false;
@@ -297,14 +306,14 @@ export class ExecutionPlanComparisonEditorView {
}
public async addExecutionPlanGraph(executionPlanGraphs: azdata.executionPlan.ExecutionPlanGraph[]): Promise<void> {
public async addExecutionPlanGraph(executionPlanGraphs: azdata.executionPlan.ExecutionPlanGraph[], preSelectIndex: number): Promise<void> {
if (!this._topPlanDiagramModels) {
this._topPlanDiagramModels = executionPlanGraphs;
this._topPlanDropdown.setOptions(executionPlanGraphs.map(e => {
this._topPlanDropdown.setOptions(executionPlanGraphs.map((e, index) => {
return {
text: e.query
text: this.createQueryDropdownPrefixString(e.query, index + 1, executionPlanGraphs.length)
};
}), 0);
}));
executionPlanGraphs.forEach((e, i) => {
const graphContainer = DOM.$('.plan-diagram');
@@ -326,10 +335,7 @@ export class ExecutionPlanComparisonEditorView {
this.topPlanDiagrams.push(diagram);
graphContainer.style.display = 'none';
});
this._topPlanDiagramContainers[0].style.display = '';
this._topPlanRecommendations.recommendations = executionPlanGraphs[0].recommendations;
this.topPlanDiagrams[0].selectElement(undefined);
this._topPlanDropdown.select(preSelectIndex);
this._propertiesView.setTopElement(executionPlanGraphs[0].root);
this._propertiesAction.enabled = true;
this._zoomInAction.enabled = true;
@@ -339,11 +345,11 @@ export class ExecutionPlanComparisonEditorView {
this._toggleOrientationAction.enabled = true;
} else {
this._bottomPlanDiagramModels = executionPlanGraphs;
this._bottomPlanDropdown.setOptions(executionPlanGraphs.map(e => {
this._bottomPlanDropdown.setOptions(executionPlanGraphs.map((e, index) => {
return {
text: e.query
text: this.createQueryDropdownPrefixString(e.query, index + 1, executionPlanGraphs.length)
};
}), 0);
}));
executionPlanGraphs.forEach((e, i) => {
const graphContainer = DOM.$('.plan-diagram');
this._bottomPlanDiagramContainers.push(graphContainer);
@@ -364,18 +370,17 @@ export class ExecutionPlanComparisonEditorView {
this.bottomPlanDiagrams.push(diagram);
graphContainer.style.display = 'none';
});
this._bottomPlanDiagramContainers[0].style.display = '';
this._bottomPlanRecommendations.recommendations = executionPlanGraphs[0].recommendations;
this.bottomPlanDiagrams[0].selectElement(undefined);
this._bottomPlanDropdown.select(preSelectIndex);
this._propertiesView.setBottomElement(executionPlanGraphs[0].root);
this._addExecutionPlanAction.enabled = false;
await this.getSkeletonNodes();
}
this.refreshSplitView();
}
private async getSkeletonNodes(): Promise<void> {
if (!this._activeBottomPlanDiagram) {
return;
}
this._progressService.withProgress(
{
location: ProgressLocation.Notification,
@@ -389,8 +394,14 @@ export class ExecutionPlanComparisonEditorView {
if (this._topPlanDiagramModels && this._bottomPlanDiagramModels) {
this._topPlanDiagramModels[this._activeTopPlanIndex].graphFile.graphFileType = 'sqlplan';
this._bottomPlanDiagramModels[this._activeBottomPlanIndex].graphFile.graphFileType = 'sqlplan';
const currentRequestId = generateUuid();
this._latestRequestUuid = currentRequestId;
const result = await this._executionPlanService.compareExecutionPlanGraph(this._topPlanDiagramModels[this._activeTopPlanIndex].graphFile,
this._bottomPlanDiagramModels[this._activeBottomPlanIndex].graphFile);
if (currentRequestId !== this._latestRequestUuid) {
return;
}
this.getSimilarSubtrees(result.firstComparisonResult);
this.getSimilarSubtrees(result.secondComparisonResult, true);
let colorIndex = 0;

60
src/sql/workbench/contrib/executionPlan/browser/executionPlanComparisonPropertiesView.ts
View File

@@ -5,13 +5,16 @@
import { ExecutionPlanPropertiesViewBase, PropertiesSortType } from 'sql/workbench/contrib/executionPlan/browser/executionPlanPropertiesViewBase';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import type * as azdata from 'azdata';
import * as azdata from 'azdata';
import { localize } from 'vs/nls';
import { textFormatter } from 'sql/base/browser/ui/table/formatters';
import { isString } from 'vs/base/common/types';
import { removeLineBreaks } from 'sql/base/common/strings';
import * as DOM from 'vs/base/browser/dom';
import { InternalExecutionPlanElement } from 'sql/workbench/contrib/executionPlan/browser/azdataGraphView';
import { executionPlanComparisonPropertiesDifferent, executionPlanComparisonPropertiesGreenDownArrow, executionPlanComparisonPropertiesRedDownArrow, executionPlanComparisonPropertiesGreenUpArrow, executionPlanComparisonPropertiesRedUpArrow } from 'sql/workbench/contrib/executionPlan/browser/constants';
import * as sqlExtHostType from 'sql/workbench/api/common/sqlExtHostTypes';
import { TextWithIconColumn } from 'sql/base/browser/ui/table/plugins/textWithIconColumn';
export class ExecutionPlanComparisonPropertiesView extends ExecutionPlanPropertiesViewBase {
private _model: ExecutionPlanComparisonPropertiesViewModel;
@@ -44,7 +47,7 @@ export class ExecutionPlanComparisonPropertiesView extends ExecutionPlanProperti
}
const titleText = localize('executionPlanComparisonPropertiesTopOperation', "Top operation: {0}", target);
this._topOperationNameContainer.innerText = titleText;
this._bottomOperationNameContainer.title = titleText;
this._topOperationNameContainer.title = titleText;
this.addDataToTable();
}
@@ -88,15 +91,13 @@ export class ExecutionPlanComparisonPropertiesView extends ExecutionPlanProperti
});
}
if (this._model.bottomElement) {
columns.push({
columns.push(new TextWithIconColumn({
id: 'value',
name: localize('nodePropertyViewNameValueColumnBottomHeader', "Value (Bottom Plan)"),
field: 'value2',
width: 150,
editor: Slick.Editors.Text,
headerCssClass: 'prop-table-header',
formatter: textFormatter
});
}).definition);
}
let topProps = [];
@@ -204,19 +205,55 @@ export class ExecutionPlanComparisonPropertiesView extends ExecutionPlanProperti
const topProp = v.topProp;
const bottomProp = v.bottomProp;
const parentRowCellStyling = 'font-weight: bold';
let diffIconClass = 'default-bottom-column-cell-styling';
if (topProp && bottomProp) {
row['displayOrder'] = v.topProp.displayOrder;
if (v.topProp.displayValue !== v.bottomProp.displayValue) {
switch (v.topProp.betterValue) {
case sqlExtHostType.executionPlan.ExecutionPlanGraphElementPropertyBetterValue.None:
diffIconClass = executionPlanComparisonPropertiesDifferent;
break;
case sqlExtHostType.executionPlan.ExecutionPlanGraphElementPropertyBetterValue.LowerNumber:
if (parseFloat(v.bottomProp.displayValue) < parseFloat(v.topProp.displayValue)) {
diffIconClass = executionPlanComparisonPropertiesGreenDownArrow;
} else {
diffIconClass = executionPlanComparisonPropertiesRedUpArrow;
}
break;
case sqlExtHostType.executionPlan.ExecutionPlanGraphElementPropertyBetterValue.HigherNumber:
if (parseFloat(v.bottomProp.displayValue) > parseFloat(v.topProp.displayValue)) {
diffIconClass = executionPlanComparisonPropertiesGreenUpArrow;
} else {
diffIconClass = executionPlanComparisonPropertiesRedDownArrow;
}
break;
case sqlExtHostType.executionPlan.ExecutionPlanGraphElementPropertyBetterValue.True:
if (v.bottomProp.displayValue === 'True') {
diffIconClass = executionPlanComparisonPropertiesGreenUpArrow;
} else {
diffIconClass = executionPlanComparisonPropertiesRedDownArrow;
}
break;
case sqlExtHostType.executionPlan.ExecutionPlanGraphElementPropertyBetterValue.False:
if (v.bottomProp.displayValue === 'False') {
diffIconClass = executionPlanComparisonPropertiesGreenDownArrow;
} else {
diffIconClass = executionPlanComparisonPropertiesRedUpArrow;
}
break;
}
}
row['value1'] = {
text: removeLineBreaks(v.topProp.displayValue, ' ')
};
row['value2'] = {
text: removeLineBreaks(v.bottomProp.displayValue, ' ')
iconCssClass: diffIconClass,
title: removeLineBreaks(v.bottomProp.displayValue, ' ')
};
if ((topProp && !isString(topProp.value)) || (bottomProp && !isString(bottomProp.value))) {
row['name'].style = parentRowCellStyling;
row['value1'].style = parentRowCellStyling;
row['value2'].style = parentRowCellStyling;
row['value2'].iconCssClass += ` parent-row-styling`;
}
rows.push(row);
if (!isString(topProp.value) && !isString(bottomProp.value)) {
@@ -240,12 +277,13 @@ export class ExecutionPlanComparisonPropertiesView extends ExecutionPlanProperti
} else if (!topProp && bottomProp) {
row['displayOrder'] = v.bottomProp.displayOrder;
row['value2'] = {
text: v.bottomProp.displayValue
title: v.bottomProp.displayValue,
iconCssClass: diffIconClass
};
rows.push(row);
if (!isString(bottomProp.value)) {
row['name'].style = parentRowCellStyling;
row['value2'].style = parentRowCellStyling;
row['value2'].iconCssClass += ` parent-row-styling`;
this.convertPropertiesToTableRows(undefined, bottomProp.value, rows.length - 1, indent + 2, rows);
}
}

8
src/sql/workbench/contrib/executionPlan/browser/executionPlanFileView.ts
View File

@@ -19,7 +19,7 @@ export class ExecutionPlanFileView {
private _loadingSpinner: LoadingSpinner;
private _loadingErrorInfoBox: InfoBox;
private _executionPlanViews: ExecutionPlanView[] = [];
private _graphs?: azdata.executionPlan.ExecutionPlanGraph[] = [];
public graphs?: azdata.executionPlan.ExecutionPlanGraph[] = [];
private _container = DOM.$('.eps-container');
private _planCache: Map<string, azdata.executionPlan.ExecutionPlanGraph[]> = new Map();
@@ -56,10 +56,10 @@ export class ExecutionPlanFileView {
public addGraphs(newGraphs: azdata.executionPlan.ExecutionPlanGraph[] | undefined) {
if (newGraphs) {
newGraphs.forEach(g => {
const ep = this.instantiationService.createInstance(ExecutionPlanView, this._container, this._executionPlanViews.length + 1);
const ep = this.instantiationService.createInstance(ExecutionPlanView, this._container, this._executionPlanViews.length + 1, this);
ep.model = g;
this._executionPlanViews.push(ep);
this._graphs.push(g);
this.graphs.push(g);
this.updateRelativeCosts();
});
}
@@ -104,7 +104,7 @@ export class ExecutionPlanFileView {
}
private updateRelativeCosts() {
const sum = this._graphs.reduce((prevCost: number, cg) => {
const sum = this.graphs.reduce((prevCost: number, cg) => {
return prevCost += cg.root.subTreeCost + cg.root.cost;
}, 0);

2
src/sql/workbench/contrib/executionPlan/browser/executionPlanPropertiesViewBase.ts
View File

@@ -227,7 +227,7 @@ export class SortPropertiesReverseAlphabeticallyAction extends Action {
export class SortPropertiesByDisplayOrderAction extends Action {
public static ID = 'ep.propertiesView.sortByDisplayOrder';
public static LABEL = localize('executionPlanPropertyViewSortByDisplayOrder', "Categorized");
public static LABEL = localize('executionPlanPropertyViewSortByDisplayOrder', "Importance");
constructor() {
super(SortPropertiesByDisplayOrderAction.ID, SortPropertiesByDisplayOrderAction.LABEL, sortByDisplayOrderIconClassNames);

5
src/sql/workbench/contrib/executionPlan/browser/executionPlanView.ts
View File

@@ -36,6 +36,7 @@ import { AzdataGraphView } from 'sql/workbench/contrib/executionPlan/browser/azd
import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys';
import { ExecutionPlanComparisonInput } from 'sql/workbench/contrib/executionPlan/browser/compareExecutionPlanInput';
import { ExecutionPlanFileView } from 'sql/workbench/contrib/executionPlan/browser/executionPlanFileView';
export class ExecutionPlanView implements ISashLayoutProvider {
@@ -70,6 +71,7 @@ export class ExecutionPlanView implements ISashLayoutProvider {
constructor(
private _parent: HTMLElement,
private _graphIndex: number,
private _executionPlanFileView: ExecutionPlanFileView,
@IInstantiationService public readonly _instantiationService: IInstantiationService,
@IThemeService private readonly _themeService: IThemeService,
@IContextViewService public readonly contextViewService: IContextViewService,
@@ -285,7 +287,8 @@ export class ExecutionPlanView implements ISashLayoutProvider {
public compareCurrentExecutionPlan() {
this._editorService.openEditor(this._instantiationService.createInstance(ExecutionPlanComparisonInput, {
topExecutionPlan: [this._model]
topExecutionPlan: this._executionPlanFileView.graphs,
topPlanIndex: this._graphIndex - 1
}), {
pinned: true
});

1
src/sql/workbench/contrib/executionPlan/browser/images/actionIcons/addDark.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#0000;}.icon-canvas-transparent{opacity:0;}.icon-vs-action-green{fill:#fff;}</style></defs><title>Add_16x</title><path class="icon-canvas-transparent" d="M16,16H0V0H16Z"/><path class="icon-vs-out" d="M6,16V10H0V6H6V0h4V6h6v4H10v6Z"/><path class="icon-vs-action-green" d="M15,9H9v6H7V9H1V7H7V1H9V7h6Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 425 B

23
src/sql/workbench/contrib/executionPlan/browser/images/actionIcons/customZoomDark.svg Normal file
View File

@@ -0,0 +1,23 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
<style type="text/css">
.st0{fill:#F6F6F6;fill-opacity:0;}
.st1{fill:#0000;}
.st2{fill:#fff;}
.st3{fill:#0000;}
</style>
<g id="canvas">
<path class="st0" d="M16,16H0V0h16V16z"/>
</g>
<path id="outline" class="st1" d="M16,5.8c0-3.2-2.6-5.7-5.8-5.8C7,0,4.4,2.6,4.3,5.8c0,1,0.3,2,0.8,2.9l-4.7,4.7
c-0.6,0.6-0.6,1.5,0,2.1c0.6,0.6,1.5,0.6,2.1,0l4.7-4.7c0.4,0.3,0.9,0.4,1.3,0.6l-0.8,0.8L7,16h1.4l2.4-0.8l5.2-5.1l-1-1
C15.6,8.1,16,7,16,5.8z"/>
<path id="iconBg" class="st2" d="M10.4,9.6c-0.1,0-0.2,0-0.2,0C8,9.7,6.3,8,6.3,5.8C6.3,3.7,8,2,10.2,2C12.3,2,14,3.7,14,5.8v0
c0,0.6-0.2,1.2-0.5,1.8l0.7,0.7c0.4-0.7,0.7-1.6,0.7-2.5c0-2.6-2.1-4.7-4.8-4.8v0C7.5,1,5.3,3.2,5.3,5.8c0,1.1,0.4,2.2,1.1,3
l-5.3,5.3c-0.2,0.2-0.2,0.5,0,0.7c0.2,0.2,0.5,0.2,0.7,0l5.3-5.3c0.7,0.6,1.5,0.9,2.3,1L10.4,9.6z M8.2,15l2.1-0.7l-1.6-1.6L8.2,15z
M12.3,9.2l1.6,1.6l0.7-0.7L13,8.5L12.3,9.2z M9.5,12l1.6,1.6l2.1-2.1l-1.6-1.6L9.5,12z"/>
<path id="iconFg" class="st3" d="M10.2,9.7c0.1,0,0.2,0,0.2,0L13,7.1l0.6,0.6C13.8,7.1,14,6.5,14,5.8C14,3.7,12.3,2,10.2,2
c0,0,0,0,0,0C8,2,6.3,3.7,6.3,5.8C6.3,8,8,9.7,10.2,9.7z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
src/sql/workbench/contrib/executionPlan/browser/images/actionIcons/differentValues.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><style type="text/css">.icon-canvas-transparent{opacity:0;fill:#F6F6F6;} .icon-vs-out{fill:#00000000;} .icon-vs-red{fill: #ffa700;}</style><path class="icon-canvas-transparent" d="M16 16h-16v-16h16v16z" id="canvas"/><path class="icon-vs-out" d="M15 8c0 3.866-3.135 7-7 7-3.866 0-7-3.134-7-7s3.134-7 7-7c3.865 0 7 3.134 7 7z" id="outline"/><path class="icon-vs-red" d="M8 2c-3.314 0-6 2.686-6 6s2.686 6 6 6 6-2.686 6-6-2.686-6-6-6z" id="iconBg"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 512 B

42
src/sql/workbench/contrib/executionPlan/browser/images/actionIcons/disableTooltipDark.svg Normal file
View File

@@ -0,0 +1,42 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<style>
.st0 {
opacity: 0
}
.st0,
.st1 {
fill: #0000
}
.st2 {
fill: #fff
}
.st3 {
fill: #0000
}
.icon-vs-action-red {
fill: #a1260d
}
</style>
<g id="outline">
<path class="st0" d="M0 0h16v16H0z" />
<path class="st1" d="M6.771 5L1.382 0H0v10.825l2.337-2.566L3 9.755V16h13V5z" />
</g>
<g id="icon_x5F_bg">
<path class="st2"
d="M8.4 12h2.2l.4 1h1l-2-5H9l-2 5h1l.4-1zm1.1-2.75l.7 1.75H8.8l.7-1.75zM4.955 8.463L3.869 5.998h2.518L1 1v7.231l1.629-1.789 1.137 2.562z" />
<path class="st2" d="M7.849 6l1.077 1H14v7H5V9.551l-1 .454V15h11V6z" />
</g>
<g id="icon_x5F_fg">
<path class="st3" d="M9.5 9.25L8.8 11h1.4z" />
<path class="st3"
d="M8.926 7l.008.008H5.402l.866 1.966L5 9.551V14h9V7H8.926zM11 13l-.4-1H8.4L8 13H7l2-5h1l2 5h-1z" />
</g>
<path class="icon-vs-action-red"
d="M13.03 12.03L15 14l-1.061 1.061-1.97-1.97L10 15.061 8.939 14l1.97-1.97-1.97-1.97L10 9l1.97 1.97L13.939 9 15 10.061l-1.97 1.969z"
id="colorAction" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

1
src/sql/workbench/contrib/executionPlan/browser/images/actionIcons/downArrowBetter.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><style type="text/css">.icon-canvas-transparent{opacity:0;fill:#F6F6F6;} .icon-vs-out{fill:#00000000;} .icon-vs-bg{fill:#73C991;}</style><path class="icon-canvas-transparent" d="M16 16h-16v-16h16v16z" id="canvas"/><path class="icon-vs-out" d="M15.414 7l-7.414 7.414-7.414-7.414 2-2-2-2 2.414-2.414 5 5 5-5 2.414 2.414-2 2 2 2z" id="outline"/><path class="icon-vs-bg" d="M3 6l-1 1 6 6 6-6-1-1-5 5-5-5zm0-4l-1 1 6 6 6-6-1-1-5 5-5-5z" id="iconBg"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 512 B

1
src/sql/workbench/contrib/executionPlan/browser/images/actionIcons/downArrowWorse.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><style type="text/css">.icon-canvas-transparent{opacity:0;fill:#F6F6F6;} .icon-vs-out{fill:#00000000;} .icon-vs-bg{fill:#d9534f;}</style><path class="icon-canvas-transparent" d="M16 16h-16v-16h16v16z" id="canvas"/><path class="icon-vs-out" d="M15.414 7l-7.414 7.414-7.414-7.414 2-2-2-2 2.414-2.414 5 5 5-5 2.414 2.414-2 2 2 2z" id="outline"/><path class="icon-vs-bg" d="M3 6l-1 1 6 6 6-6-1-1-5 5-5-5zm0-4l-1 1 6 6 6-6-1-1-5 5-5-5z" id="iconBg"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 512 B

41
src/sql/workbench/contrib/executionPlan/browser/images/actionIcons/enableTooltipDark.svg Normal file
View File

@@ -0,0 +1,41 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<style>
.st0 {
opacity: 0
}
.st0,
.st1 {
fill: #0000
}
.st2 {
fill: #fff
}
.st3 {
fill: #0000
}
.icon-vs-green {
fill: #393
}
</style>
<g id="outline">
<path class="st0" d="M0 0h16v16H0z" />
<path class="st1" d="M6.771 5L1.382 0H0v10.825l2.337-2.566L3 9.755V16h13V5z" />
</g>
<g id="icon_x5F_bg">
<path class="st2"
d="M8.4 12h2.2l.4 1h1l-2-5H9l-2 5h1l.4-1zm1.1-2.75l.7 1.75H8.8l.7-1.75zM4.955 8.463L3.869 5.998h2.518L1 1v7.231l1.629-1.789 1.137 2.562z" />
<path class="st2" d="M7.849 6l1.077 1H14v7H5V9.551l-1 .454V15h11V6z" />
</g>
<g id="icon_x5F_fg">
<path class="st3" d="M9.5 9.25L8.8 11h1.4z" />
<path class="st3"
d="M8.926 7l.008.008H5.402l.866 1.966L5 9.551V14h9V7H8.926zM11 13l-.4-1H8.4L8 13H7l2-5h1l2 5h-1z" />
</g>
<g id="colorImportance">
<path class="icon-vs-green" d="M8.558 15l-3.442-3.441.884-.885 2.558 2.558 5.557-5.558.885.884z" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 994 B

1
src/sql/workbench/contrib/executionPlan/browser/images/actionIcons/execution-plan-compareDark.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#0000;}.icon-canvas-transparent{opacity:0;}.icon-vs-bg{fill:#fff;}</style></defs><title>BranchCompare_16x</title><g id="canvas"><path class="icon-canvas-transparent" d="M16,0V16H0V0Z"/></g><g id="outline"><path class="icon-vs-out" d="M14,9.619V5.5a3.507,3.507,0,0,0-2.717-3.412l.235-.234L9.664,0H9.129L6.656,2.473A3.25,3.25,0,1,0,2,6.131V10.5a3.506,3.506,0,0,0,2.717,3.412l-.235.234L6.336,16h.535L9.4,13.473A3.25,3.25,0,1,0,14,9.619Zm-3,0a3.224,3.224,0,0,0-1.6,1.907L6.6,8.732,5,10.336v-4.2A3.222,3.222,0,0,0,6.538,4.41L9.4,7.268l1.6-1.6Z"/></g><g id="iconBg"><path class="icon-vs-bg" d="M13,10.311V5.5A2.5,2.5,0,0,0,10.5,3H8.957L10.1,1.854,9.4,1.146,7.043,3.5,9.4,5.854l.708-.708L8.957,4H10.5A1.5,1.5,0,0,1,12,5.5v4.811a2.25,2.25,0,1,0,1,0Zm-.5,3.439a1.25,1.25,0,1,1,1.25-1.25A1.252,1.252,0,0,1,12.5,13.75Zm-6.6-2.9L7.043,12H5.5A1.5,1.5,0,0,1,4,10.5V5.44a2.25,2.25,0,1,0-1,0V10.5A2.5,2.5,0,0,0,5.5,13H7.043L5.9,14.146l.708.708L8.957,12.5,6.6,10.146ZM2.25,3.25A1.25,1.25,0,1,1,3.5,4.5,1.252,1.252,0,0,1,2.25,3.25Z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

16
src/sql/workbench/contrib/executionPlan/browser/images/actionIcons/openPlanFileDark.svg Normal file
View File

@@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
<style type="text/css">
.st0{fill:#0000;}
.st1{fill:#fff;}
.st2{fill:#fff;}
</style>
<path id="outline" class="st0" d="M12.2,8L12.2,8h-0.5h-1.3H9H6.5L10,4.5L6.7,1.2L5.9,0.5L3.8,2.6L4.2,3H3.5C1.6,3,0,4.6,0,6.5
S1.6,10,3.5,10h0.3l-2,2l4,4h0.1h0.4h1.3H9h2.7h0.5h0l3.8-3.8v-0.4L12.2,8z"/>
<path id="iconBg" class="st1" d="M7.3,14.8l0.9,0.4l2.4-6L9.7,8.8L7.3,14.8z M6.1,9.1L5.2,10h0l-2,2l2.9,2.9l0.7-0.7L4.6,12l2-2h0
l0.1-0.1L6.1,9.1z M12.8,10L12.8,10l-0.9-0.9l-0.7,0.7l0.1,0.1h0l2,2l-2.1,2.1l0.7,0.7l2.9-2.9L12.8,10z"/>
<path id="colorAction" class="st2" d="M1,6.5C1,5.1,2.1,4,3.5,4h3.1L5.2,2.6l0.7-0.7l0,0l0,0l2.6,2.6L5.9,7.2l0,0L5.2,6.5L6.6,5H3.5
C2.7,5,2,5.7,2,6.5S2.7,8,3.5,8H4v1H3.5C2.1,9,1,7.9,1,6.5z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

1
src/sql/workbench/contrib/executionPlan/browser/images/actionIcons/openPropertiesDark.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><style type="text/css">.icon-canvas-transparent{opacity:0;fill:#F6F6F6;} .icon-vs-out{fill:#00000000;} .icon-vs-bg{fill:#fff;} .icon-vs-fg{fill:#00000000;}</style><rect class="icon-canvas-transparent" viewBox="0 0 16 16" id="canvas"/><rect class="icon-vs-out" width="16" height="15" id="outline"/><path class="icon-vs-bg" d="M1 1v13h14v-13h-14zm13 12h-12v-11h12v11zm-4-8h-6v-1h6v1zm-6 1h8v1h-8v-1zm6 3h-6v-1h6v1zm-6 1h8v1h-8v-1z" id="iconBg"/><path class="icon-vs-fg" d="M2 2v11h12v-11h-12zm2 2h6v1h-6v-1zm0 4h6v1h-6v-1zm8 3h-8v-1h8v1zm0-4h-8v-1h8v1z" id="iconFg"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 632 B

19
src/sql/workbench/contrib/executionPlan/browser/images/actionIcons/openQueryDark.svg Normal file
View File

@@ -0,0 +1,19 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
<style type="text/css">
.st0{fill:#F6F6F6;fill-opacity:0;}
.st1{fill:#0000;}
.st2{fill:#0000;}
.st3{fill:#fff;}
.st4{fill:#fff;}
</style>
<path id="canvas" class="st0" d="M16,16H0V0h16V16z"/>
<path id="outline" class="st1" d="M7.9,0H6.5h-1h-1H2v2.4C1.7,2.5,1.3,2.7,1.1,3H0v13h14v-3h2V0H7.9z"/>
<path id="iconFg" class="st2" d="M9.2,2.8L10,3.5l-4.1,4L5,6.7V9H3.5C2.9,9,2.3,8.8,1.8,8.6v5.7h10.5v-3h2V2.8H9.2z"/>
<path id="iconBg" class="st3" d="M11,8H5v1h6V8z M7.4,1l2,2H14v8h-1V4H9.5l-2,2H12v5H4V9H3.5C3.3,9,3.2,9,3,8.9V12h9v2H2V8.6
C1.6,8.5,1.3,8.2,1,7.9V15h12v-3h2V1H7.4z"/>
<path id="colorAction" class="st4" d="M1,5.5C1,4.1,2.1,3,3.5,3h3.1L5.2,1.6l0.7-0.7l0,0l0,0l2.6,2.6L5.9,6.2l0,0L5.2,5.5L6.6,4H3.5
C2.7,4,2,4.7,2,5.5S2.7,7,3.5,7H4v1H3.5C2.1,8,1,6.9,1,5.5z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
src/sql/workbench/contrib/executionPlan/browser/images/actionIcons/resetZoomDark.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#00000000;}.canvas,.icon-canvas-transparent{opacity:0;}.canvas{fill:none;}.icon-vs-bg{fill:#fff;}.icon-vs-action-purple{fill:#fff;}</style></defs><title>ResetView_16x</title><g id="canvas"><path class="icon-canvas-transparent" d="M16,16H0V0H16Z"/></g><g id="outline"><path class="icon-vs-out" d="M16,0V16H0V0Z"/></g><g id="iconBg"><path class="canvas" d="M16,16H0V0H16Z"/><path class="icon-vs-bg" d="M1,1H5V2H2V5H1ZM11,1V2h3V5h1V1Zm3,13H11v1h4V11H14ZM2,11H1v4H5V14H2Z"/></g><g id="colorImportance"><path class="icon-vs-action-purple" d="M8,3.567,4,5.876V10.5l4,2.31,4-2.31V5.876Zm2.536,2.619L8,7.65,5.464,6.186,8,4.722ZM5,7.072,7.5,8.516v2.846L5,9.917Zm3.5,4.29V8.516L11,7.072V9.917Z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 813 B

1
src/sql/workbench/contrib/executionPlan/browser/images/actionIcons/saveDark.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#0000;}.icon-canvas-transparent{opacity:0;}.icon-vs-action-blue{fill:#fff;}</style></defs><title>Save_16x</title><g id="canvas"><path class="icon-canvas-transparent" d="M16,0V16H0V0Z"/></g><g id="outline"><path class="icon-vs-out" d="M16,2V16H2.586L0,13.414V2A2,2,0,0,1,2,0H14A2,2,0,0,1,16,2Z"/></g><g id="iconBg"><path class="icon-vs-action-blue" d="M6,12H8v3H6ZM15,2V15H12V10H4v5H3L1,13V2A1,1,0,0,1,2,1H14A1,1,0,0,1,15,2ZM13,3H3V7H13Z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 566 B

1
src/sql/workbench/contrib/executionPlan/browser/images/actionIcons/searchDark.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#0000;}.icon-canvas-transparent{opacity:0;}.icon-vs-fg{fill:#0000;}.icon-vs-bg{fill:#fff;}</style></defs><title>Search_16x</title><g id="canvas"><path class="icon-canvas-transparent" d="M16,16H0V0H16Z"/></g><g id="outline"><path class="icon-vs-out" d="M16,5.833a5.84,5.84,0,0,1-5.833,5.834,5.688,5.688,0,0,1-2.913-.8L2.561,15.561A1.5,1.5,0,0,1,.439,13.439L5.133,8.745a5.694,5.694,0,0,1-.8-2.912A5.834,5.834,0,0,1,16,5.833Z"/></g><g id="iconFg"><path class="icon-vs-fg" d="M14,5.833A3.834,3.834,0,1,1,10.167,2,3.838,3.838,0,0,1,14,5.833Z"/></g><g id="iconBg"><path class="icon-vs-bg" d="M10.167,1A4.839,4.839,0,0,0,5.333,5.833a4.786,4.786,0,0,0,1.1,3.029L1.147,14.146a.5.5,0,0,0,.707.708L7.138,9.569a4.783,4.783,0,0,0,3.029,1.1,4.834,4.834,0,0,0,0-9.667Zm0,8.667A3.834,3.834,0,1,1,14,5.833,3.838,3.838,0,0,1,10.167,9.667Z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 950 B

1
src/sql/workbench/contrib/executionPlan/browser/images/actionIcons/sortAlphabeticallyDark.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1,.icon-canvas-transparent{fill:#0000;}.icon-canvas-transparent{opacity:0;}.icon-vs-bg{fill:#fff;}.icon-white{fill:#0000;}.icon-vs-action-blue{fill:#fff;}</style></defs><title>SortAscending_16x</title><g id="canvas"><path class="icon-canvas-transparent" d="M16,16H0V0H16Z"/></g><g id="outline"><path class="cls-1" d="M16,9.983l-4.467,4.484-3.3-3.3L6.449,13H8v3H1V13.586L2.586,12H1V9H0V0H9V7.692l1.018,1.014V3.027h3v5.7l1.148-1.145L16,9.412Z"/></g><g id="iconBg"><path class="icon-vs-bg" d="M2,11H5L2,14v1H7V14H4.013L7,11.051,6.952,11H7V10H2ZM4.5,3.25,5.2,5H3.8ZM8,1V8H1V1ZM7,7,5,2H4L2,7H3l.4-1H5.6L6,7Z"/></g><g id="iconFg"><path class="icon-white" d="M6,7H7L5,2H4L2,7H3l.4-1H5.6ZM3.8,5l.7-1.75L5.2,5Z"/></g><g id="colorAction"><path class="icon-vs-action-blue" d="M14.154,8.968l.707.707-3.34,3.352L8.169,9.675l.707-.707,2.13,2.122V4h1v7.1Z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 932 B

1
src/sql/workbench/contrib/executionPlan/browser/images/actionIcons/sortByDisplayOrderDark.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><style>.icon-canvas-transparent{opacity:0;fill:#f6f6f6}.icon-vs-out{fill:#0000}.icon-vs-bg{fill:#fff}.icon-vs-blue{fill:#fff}</style><path class="icon-canvas-transparent" d="M16 16H0V0h16v16z" id="canvas"/><path class="icon-vs-out" d="M5 4v1.6c.2.1.3.3.4.4H15v3H6v2h9v3H5.6c0 .3-.1.5-.2.6-.1.3-.3.6-.5.8-.2.2-.5.4-.8.5-.2 0-.4.1-.6.1H2.2c-.1 0-.3-.1-.4-.1-.2-.1-.4-.2-.5-.3l-.3-.2V8.9S1.6 8 2.1 8H1V6.3c0-.5.3-.9 1-1.1V2.7l-1 .2V1l2.8-1H5v1h10v3H5z" id="outline"/><path class="icon-vs-bg" d="M14 3H6V2h8v1zm0 4H6v1h8V7zm0 5H6v1h8v-1z" id="iconBg"/><path class="icon-vs-blue" d="M4.5 5V4H4V1l-1.6.4v.7l.6-.2V4h-.4v1h1.9zM3.4 9.1s1-1.2 1.1-1.3c.1-.1.1-.2.1-.3v-.3c0-.2 0-.3-.1-.4 0-.3 0-.4-.2-.5-.1-.1-.2-.2-.3-.2-.2-.1-.4-.1-.6-.1H3c-.1 0-1 .3-1 .3v1c0-.1.6-.3.7-.4.1 0 .2-.1.3-.1h.6c.1 0 .2.2.2.4 0 .1-.1.4-.3.6C3.3 7.9 2 9.3 2 9.3v.7h2.6v-.9H3.4zm1.2 4.2c-.2-.4-.6-.5-.6-.5.7-.1.6-.9.6-1 0-.1 0-.2-.1-.4 0-.1-.1-.2-.2-.3-.1-.1-.2-.2-.4-.2-.2-.1-.4-.1-.6-.1H3c-.1 0-.2 0-.3.1-.1 0-.2 0-.2.1-.3-.1-.5 0-.5 0v.7c.5-.3 1.1-.2 1.2-.2.5.1.2.8.1.8s-.1.1-.3.1H2.4v.7h.8c.1 0 .2.1.3.1.1 0 .1.1.2.2 0 .1.1.2.1.3 0 .2-.1.3-.2.4-.1.1-.3.2-.6.2h-.2c-.1 0-.2 0-.3-.1-.1 0-.2-.1-.2-.1-.2 0-.2-.1-.3-.1v.8c.1 0 .1.1.2.1s.2 0 .3.1h.6c.3 0 .5 0 .7-.1.2-.1.4-.2.5-.3.1-.1.2-.2.3-.4 0 0 .1-.5 0-.9z" id="colorImportance"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
src/sql/workbench/contrib/executionPlan/browser/images/actionIcons/sortReverseAlphabeticallyDark.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#0000;}.icon-canvas-transparent{opacity:0;}.icon-vs-bg{fill:#fff;}.icon-vs-fg{fill:#0000;}.icon-vs-action-blue{fill:#fff;}</style></defs><title>SortDescending_16x</title><g id="canvas"><path class="icon-canvas-transparent" d="M16,16H0V0H16Z"/></g><g id="outline"><path class="icon-vs-out" d="M16,9.4v.536l-4.484,4.5L9,11.923V16H0V7H1V4.586L2.586,3H1V0H8V3H7.462L6.449,4H8V7H9v.682l1,1V3h3V8.7l1.148-1.144Z"/></g><g id="iconBg"><path class="icon-vs-bg" d="M7,6H2V5L5,2H2V1H7V2H6.952L7,2.051,4.013,5H7ZM3.8,12H5.2l-.7-1.75ZM8,8v7H1V8ZM7,14,5,9H4L2,14H3l.4-1H5.6L6,14Z"/></g><g id="iconFg"><path class="icon-vs-fg" d="M5,9H4L2,14H3l.4-1H5.6L6,14H7ZM3.8,12l.7-1.75L5.2,12Z"/></g><g id="colorAction"><path class="icon-vs-action-blue" d="M14.855,9.671l-3.34,3.352L8.163,9.671l.707-.707L11,11.086V4h1v7.1l2.148-2.14Z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 939 B

1
src/sql/workbench/contrib/executionPlan/browser/images/actionIcons/splitScreenHorizontallyDark.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#00000000;}.icon-canvas-transparent{opacity:0;}.icon-vs-bg{fill:#ffffff;}</style></defs><title>SplitScreenHorizontal_16x</title><g id="canvas"><path class="icon-canvas-transparent" d="M16,0V16H0V0Z"/></g><g id="outline"><path class="icon-vs-out" d="M16,1V15H0V1Z"/></g><g id="iconBg"><path class="icon-vs-bg" d="M1,2V14H15V2ZM14,13H2V10H14Zm0-5H2V5H14Z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 482 B

1
src/sql/workbench/contrib/executionPlan/browser/images/actionIcons/splitScreenVerticallyDark.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#00000000;}.icon-canvas-transparent{opacity:0;}.icon-vs-bg{fill:#fff;}</style></defs><title>SplitScreenVertical_16x</title><g id="canvas"><path class="icon-canvas-transparent" d="M16,0V16H0V0Z"/></g><g id="outline"><path class="icon-vs-out" d="M16,1V15H0V1Z"/></g><g id="iconBg"><path class="icon-vs-bg" d="M1,2V14H15V2ZM7,13H2V5H7Zm7,0H9V5h5Z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 473 B

1
src/sql/workbench/contrib/executionPlan/browser/images/actionIcons/upArrowBetter.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><style type="text/css">.icon-canvas-transparent{opacity:0;fill:#F6F6F6;} .icon-vs-out{fill:#00000000;} .icon-vs-bg{fill:#73C991;}</style><path class="icon-canvas-transparent" d="M16 16h-16v-16h16v16z" id="canvas"/><path class="icon-vs-out" d="M13.414 10l2 2-2.414 2.414-5-5-5 5-2.414-2.414 2-2-2-2 7.414-7.414 7.414 7.414-2 2z" id="outline"/><path class="icon-vs-bg" d="M8 4l5 5 1-1-6-6-6 6 1 1 5-5zm0 4l5 5 1-1-6-6-6 6 1 1 5-5z" id="iconBg"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 510 B

1
src/sql/workbench/contrib/executionPlan/browser/images/actionIcons/upArrowWorse.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><style type="text/css">.icon-canvas-transparent{opacity:0;fill:#F6F6F6;} .icon-vs-out{fill:#00000000;} .icon-vs-bg{fill:#d9534f;}</style><path class="icon-canvas-transparent" d="M16 16h-16v-16h16v16z" id="canvas"/><path class="icon-vs-out" d="M13.414 10l2 2-2.414 2.414-5-5-5 5-2.414-2.414 2-2-2-2 7.414-7.414 7.414 7.414-2 2z" id="outline"/><path class="icon-vs-bg" d="M8 4l5 5 1-1-6-6-6 6 1 1 5-5zm0 4l5 5 1-1-6-6-6 6 1 1 5-5z" id="iconBg"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 510 B

21
src/sql/workbench/contrib/executionPlan/browser/images/actionIcons/zoomDark.svg Normal file
View File

@@ -0,0 +1,21 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
<style type="text/css">
.st0{fill:#000000;fill-opacity:0;}
.st1{fill:#0000;}
.st2{fill:#fff;}
</style>
<g id="canvas">
<path class="st0" d="M16,0v16H0V0H16z"/>
</g>
<g id="outline">
<path class="st1" d="M14.5,16c-0.4,0-0.8-0.2-1.1-0.4L9.9,12C6.8,13.9,2.8,13,1,9.9S0,2.8,3.1,1s7.1-0.9,9,2.1
c1.3,2.1,1.3,4.7,0,6.8l3.5,3.5c0.6,0.6,0.6,1.5,0,2.1C15.3,15.8,14.9,16,14.5,16z"/>
</g>
<g id="iconBg">
<path class="st2" d="M14.9,14.1L10.7,10c1.9-2.3,1.6-5.8-0.7-7.8S4.2,0.6,2.3,3S0.6,8.8,3,10.7c2,1.7,5,1.7,7.1,0l4.1,4.1
c0.2,0.2,0.5,0.2,0.7,0S15,14.3,14.9,14.1z M6.5,11C4,11,2,9,2,6.5S4,2,6.5,2S11,4,11,6.5C11,9,9,11,6.5,11z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 988 B

1
src/sql/workbench/contrib/executionPlan/browser/images/actionIcons/zoomInDark.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#0000;}.icon-canvas-transparent{opacity:0;}.icon-vs-bg{fill:#fff;}.icon-vs-action-blue{fill:#fff;}</style></defs><title>ZoomIn_16x</title><g id="canvas"><path class="icon-canvas-transparent" d="M16,0V16H0V0Z"/></g><g id="outline"><path class="icon-vs-out" d="M14.5,16a1.494,1.494,0,0,1-1.061-.439L9.909,12.03A6.51,6.51,0,1,1,12.03,9.909l3.531,3.53A1.5,1.5,0,0,1,14.5,16Z"/></g><g id="iconBg"><path class="icon-vs-bg" d="M14.854,14.146l-4.13-4.129a5.509,5.509,0,1,0-.707.707l4.129,4.13a.5.5,0,0,0,.708-.708ZM6.5,11A4.5,4.5,0,1,1,11,6.5,4.505,4.505,0,0,1,6.5,11Z"/></g><g id="colorAction"><path class="icon-vs-action-blue" d="M9,6V7H7V9H6V7H4V6H6V4H7V6Z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 781 B

1
src/sql/workbench/contrib/executionPlan/browser/images/actionIcons/zoomOutDark.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#0000;}.icon-canvas-transparent{opacity:0;}.icon-vs-bg{fill:#fff;}.icon-vs-action-blue{fill:#fff;}</style></defs><title>ZoomOut_16x</title><g id="canvas"><path class="icon-canvas-transparent" d="M16,0V16H0V0Z"/></g><g id="outline"><path class="icon-vs-out" d="M14.5,16a1.494,1.494,0,0,1-1.061-.439L9.909,12.03A6.51,6.51,0,1,1,12.03,9.909l3.531,3.53A1.5,1.5,0,0,1,14.5,16Z"/></g><g id="iconBg"><path class="icon-vs-bg" d="M14.854,14.146l-4.13-4.129a5.509,5.509,0,1,0-.707.707l4.129,4.13a.5.5,0,0,0,.708-.708ZM6.5,11A4.5,4.5,0,1,1,11,6.5,4.505,4.505,0,0,1,6.5,11Z"/></g><g id="colorAction"><path class="icon-vs-action-blue" d="M9,6V7H4V6Z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 766 B

1
src/sql/workbench/contrib/executionPlan/browser/images/actionIcons/zoomToFitDark.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#0000;}.icon-canvas-transparent{opacity:0;}.icon-vs-bg{fill:#fff;}</style></defs><title>ZoomToFit_16x</title><g id="canvas"><path class="icon-canvas-transparent" d="M16,16H0V0H16Z"/></g><g id="outline"><path class="icon-vs-out" d="M12.977,15s1.03.98,1.053,1h1.944c.008-.007.018-.009.026-.016V13.755l-1-.972V3H13V0H2V3H0V13H2v2Z"/></g><g id="iconBg"><path class="icon-vs-bg" d="M15.349,14.517l-4.257-4.139A4.581,4.581,0,0,0,12.125,7.5,4.625,4.625,0,1,0,7.5,12.126a4.579,4.579,0,0,0,2.885-1.04l4.266,4.147a.5.5,0,0,0,.7-.716ZM3.875,7.5A3.625,3.625,0,1,1,7.5,11.126,3.629,3.629,0,0,1,3.875,7.5ZM8,7h2V8H8v2H7V8H5V7H7V5H8ZM1,4H2v8H1ZM12,2H3V1h9ZM3,13h9v1H3Zm11-1H13V4h1Z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 796 B

218
src/sql/workbench/contrib/executionPlan/browser/media/executionPlan.css
View File

@@ -244,6 +244,14 @@ However we always want it to be the width of the container it is resizing.
background-repeat: no-repeat;
}
.vs-dark .eps-container .ep-save-plan-icon,
.hc-black .eps-container .ep-save-plan-icon {
background-image: url(../images/actionIcons/saveDark.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
.eps-container .ep-open-properties-icon {
background-image: url(../images/actionIcons/openProperties.svg);
background-size: 16px 16px;
@@ -251,6 +259,14 @@ However we always want it to be the width of the container it is resizing.
background-repeat: no-repeat;
}
.vs-dark .eps-container .ep-open-properties-icon,
.hc-black .eps-container .ep-open-properties-icon {
background-image: url(../images/actionIcons/openPropertiesDark.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
.eps-container .ep-open-query-icon {
background-image: url(../images/actionIcons/openQuery.svg);
background-size: 16px 16px;
@@ -258,6 +274,14 @@ However we always want it to be the width of the container it is resizing.
background-repeat: no-repeat;
}
.vs-dark .eps-container .ep-open-query-icon,
.hc-black .eps-container .ep-open-query-icon {
background-image: url(../images/actionIcons/openQueryDark.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
.eps-container .ep-open-plan-file-icon {
background-image: url(../images/actionIcons/openPlanFile.svg);
background-size: 16px 16px;
@@ -265,6 +289,15 @@ However we always want it to be the width of the container it is resizing.
background-repeat: no-repeat;
}
.vs-dark .eps-container .ep-open-plan-file-icon,
.hc-black .eps-container .ep-open-plan-file-icon {
background-image: url(../images/actionIcons/openPlanFileDark.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
.eps-container .ep-search-icon {
background-image: url(../images/actionIcons/search.svg);
background-size: 16px 16px;
@@ -272,6 +305,14 @@ However we always want it to be the width of the container it is resizing.
background-repeat: no-repeat;
}
.vs-dark .eps-container .ep-search-icon,
.hc-black .eps-container .ep-search-icon {
background-image: url(../images/actionIcons/searchDark.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
.eps-container .ep-sort-alphabetically-icon {
background-image: url(../images/actionIcons/sortAlphabetically.svg);
background-size: 16px 16px;
@@ -279,6 +320,14 @@ However we always want it to be the width of the container it is resizing.
background-repeat: no-repeat;
}
.vs-dark .eps-container .ep-sort-alphabetically-icon,
.hc-black .eps-container .ep-sort-alphabetically-icon {
background-image: url(../images/actionIcons/sortAlphabeticallyDark.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
.eps-container .ep-sort-reverse-alphabetically-icon {
background-image: url(../images/actionIcons/sortReverseAlphabetically.svg);
background-size: 16px 16px;
@@ -286,6 +335,14 @@ However we always want it to be the width of the container it is resizing.
background-repeat: no-repeat;
}
.vs-dark .eps-container .ep-sort-reverse-alphabetically-icon,
.hc-black .eps-container .ep-sort-reverse-alphabetically-icon {
background-image: url(../images/actionIcons/sortReverseAlphabeticallyDark.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
.eps-container .ep-sort-display-order-icon {
background-image: url(../images/actionIcons/sortByDisplayOrder.svg);
background-size: 16px 16px;
@@ -293,6 +350,14 @@ However we always want it to be the width of the container it is resizing.
background-repeat: no-repeat;
}
.vs-dark .eps-container .ep-sort-display-order-icon,
.hc-black .eps-container .ep-sort-display-order-icon {
background-image: url(../images/actionIcons/sortByDisplayOrderDark.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
.eps-container .ep-zoom-in-icon {
background-image: url(../images/actionIcons/zoomIn.svg);
background-size: 16px 16px;
@@ -300,6 +365,14 @@ However we always want it to be the width of the container it is resizing.
background-repeat: no-repeat;
}
.vs-dark .eps-container .ep-zoom-in-icon,
.hc-black .eps-container .ep-zoom-in-icon {
background-image: url(../images/actionIcons/zoomInDark.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
.eps-container .ep-zoom-out-icon {
background-image: url(../images/actionIcons/zoomOut.svg);
background-size: 16px 16px;
@@ -307,6 +380,14 @@ However we always want it to be the width of the container it is resizing.
background-repeat: no-repeat;
}
.vs-dark .eps-container .ep-zoom-out-icon,
.hc-black .eps-container .ep-zoom-out-icon {
background-image: url(../images/actionIcons/zoomOutDark.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
.eps-container .ep-custom-zoom-icon {
background-image: url(../images/actionIcons/customZoom.svg);
background-size: 16px 16px;
@@ -314,6 +395,14 @@ However we always want it to be the width of the container it is resizing.
background-repeat: no-repeat;
}
.vs-dark .eps-container .ep-custom-zoom-icon,
.hc-black .eps-container .ep-custom-zoom-icon {
background-image: url(../images/actionIcons/customZoomDark.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
.eps-container .ep-zoom-to-fit-icon {
background-image: url(../images/actionIcons/zoomToFit.svg);
background-size: 16px 16px;
@@ -321,6 +410,14 @@ However we always want it to be the width of the container it is resizing.
background-repeat: no-repeat;
}
.vs-dark .eps-container .ep-zoom-to-fit-icon,
.hc-black .eps-container .ep-zoom-to-fit-icon {
background-image: url(../images/actionIcons/zoomToFitDark.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
.eps-container .ep-zoom-icon {
background-image: url(../images/actionIcons/zoom.svg);
background-size: 16px 16px;
@@ -328,6 +425,13 @@ However we always want it to be the width of the container it is resizing.
background-repeat: no-repeat;
}
.eps-container .ep-zoom-icon {
background-image: url(../images/actionIcons/zoomDark.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
.eps-container .ep-enable-tooltip-icon {
background-image: url(../images/actionIcons/enableTooltip.svg);
background-size: 16px 16px;
@@ -335,6 +439,14 @@ However we always want it to be the width of the container it is resizing.
background-repeat: no-repeat;
}
.vs-dark .eps-container .ep-enable-tooltip-icon,
.hc-black .eps-container .ep-enable-tooltip-icon {
background-image: url(../images/actionIcons/enableTooltipDark.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
.eps-container .ep-disable-tooltip-icon {
background-image: url(../images/actionIcons/disableTooltip.svg);
background-size: 16px 16px;
@@ -342,6 +454,14 @@ However we always want it to be the width of the container it is resizing.
background-repeat: no-repeat;
}
.vs-dark .eps-container .ep-disable-tooltip-icon,
.hc-black .eps-container .ep-disable-tooltip-icon {
background-image: url(../images/actionIcons/disableTooltipDark.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
.eps-container .ep-add-icon {
background-image: url(../images/actionIcons/add.svg);
background-size: 16px 16px;
@@ -349,6 +469,14 @@ However we always want it to be the width of the container it is resizing.
background-repeat: no-repeat;
}
.vs-dark .eps-container .ep-add-icon,
.hc-black .eps-container .ep-add-icon {
background-image: url(../images/actionIcons/addDark.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
.eps-container .ep-settings-icon {
background-image: url(../images/actionIcons/settings.svg);
background-size: 16px 16px;
@@ -363,6 +491,14 @@ However we always want it to be the width of the container it is resizing.
background-repeat: no-repeat;
}
.vs-dark .ep-split-screen-horizontally-icon,
.hc-black .ep-split-screen-horizontally-icon {
background-image: url(../images/actionIcons/splitScreenHorizontallyDark.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
.eps-container .ep-split-screen-vertically-icon {
background-image: url(../images/actionIcons/splitScreenVertically.svg);
background-size: 16px 16px;
@@ -370,6 +506,14 @@ However we always want it to be the width of the container it is resizing.
background-repeat: no-repeat;
}
.vs-dark .eps-container .ep-split-screen-vertically-icon,
.hc-black .eps-container .ep-split-screen-vertically-icon {
background-image: url(../images/actionIcons/splitScreenVerticallyDark.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
.eps-container .ep-reset-zoom-icon {
background-image: url(../images/actionIcons/resetZoom.svg);
background-size: 16px 16px;
@@ -377,6 +521,15 @@ However we always want it to be the width of the container it is resizing.
background-repeat: no-repeat;
}
.vs-dark .eps-container .ep-reset-zoom-icon,
.hc-black .eps-container .ep-reset-zoom-icon {
background-image: url(../images/actionIcons/resetZoomDark.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
.eps-container .ep-plan-compare-icon {
background-image: url(../images/actionIcons/execution-plan-compare.svg);
background-size: 16px 16px;
@@ -384,6 +537,59 @@ However we always want it to be the width of the container it is resizing.
background-repeat: no-repeat;
}
.vs-dark .eps-container .ep-plan-compare-icon,
.hc-black .eps-container .ep-plan-compare-icon {
background-image: url(../images/actionIcons/execution-plan-compareDark.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
}
.eps-container .ep-properties-different {
background-image: url(../images/actionIcons/differentValues.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
width: 16px;
height: auto;
}
.eps-container .ep-properties-red-down-arrow {
background-image: url(../images/actionIcons/downArrowWorse.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
width: 16px;
height: auto;
}
.eps-container .ep-properties-green-down-arrow {
background-image: url(../images/actionIcons/downArrowBetter.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
width: 16px;
height: auto;
}
.eps-container .ep-properties-red-up-arrow {
background-image: url(../images/actionIcons/upArrowWorse.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
width: 16px;
height: auto;
}
.eps-container .ep-properties-green-down-arrow {
background-image: url(../images/actionIcons/downArrowBetter.svg);
background-size: 16px 16px;
background-position: center;
background-repeat: no-repeat;
width: 16px;
height: auto;
}
.eps-container .comparison-editor {
width: 100%;
height: 100%;
@@ -522,3 +728,15 @@ However we always want it to be the width of the container it is resizing.
.eps-container .comparison-editor .properties .table-container {
overflow: hidden;
}
.eps-container .comparison-editor .editor-toolbar .action-item .codicon.action-label {
padding-left: 20px;
}
.eps-container .comparison-editor .parent-row-styling {
font-weight: bold;
}
.eps-container .comparison-editor .default-bottom-column-cell-styling {
padding-left: 0px;
}