mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-24 17:23:05 -05:00
Changing plan comparison properties table logic and icons (#19700)
* Changing plan comparison logic and icons * Removing empty class ref
This commit is contained in:
Aasim Khan
@@ -280,10 +280,8 @@ export const splitScreenVerticallyIconClassName = 'ep-split-screen-vertically-ic
|
||||
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';
|
||||
export const executionPlanComparisonPropertiesDownArrow = 'ep-properties-down-arrow';
|
||||
export const executionPlanComparisonPropertiesUpArrow = 'ep-properties-up-arrow';
|
||||
|
||||
/**
|
||||
* Plan comparison polygon border colors
|
||||
|
||||
@@ -12,7 +12,7 @@ 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 { executionPlanComparisonPropertiesDifferent, executionPlanComparisonPropertiesUpArrow, executionPlanComparisonPropertiesDownArrow } 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';
|
||||
|
||||
@@ -205,41 +205,22 @@ 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';
|
||||
let diffIconClass = '';
|
||||
if (topProp && bottomProp) {
|
||||
row['displayOrder'] = v.topProp.displayOrder;
|
||||
if (v.topProp.displayValue !== v.bottomProp.displayValue) {
|
||||
switch (v.topProp.betterValue) {
|
||||
case sqlExtHostType.executionPlan.ExecutionPlanGraphElementPropertyBetterValue.None:
|
||||
switch (v.topProp.dataType) {
|
||||
case sqlExtHostType.executionPlan.ExecutionPlanGraphElementPropertyDataType.Boolean:
|
||||
diffIconClass = executionPlanComparisonPropertiesDifferent;
|
||||
break;
|
||||
case sqlExtHostType.executionPlan.ExecutionPlanGraphElementPropertyBetterValue.LowerNumber:
|
||||
if (parseFloat(v.bottomProp.displayValue) < parseFloat(v.topProp.displayValue)) {
|
||||
diffIconClass = executionPlanComparisonPropertiesGreenDownArrow;
|
||||
} else {
|
||||
diffIconClass = executionPlanComparisonPropertiesRedUpArrow;
|
||||
}
|
||||
case sqlExtHostType.executionPlan.ExecutionPlanGraphElementPropertyDataType.Number:
|
||||
diffIconClass = (parseFloat(v.topProp.displayValue) > parseFloat(v.bottomProp.displayValue)) ? executionPlanComparisonPropertiesDownArrow : executionPlanComparisonPropertiesUpArrow;
|
||||
break;
|
||||
case sqlExtHostType.executionPlan.ExecutionPlanGraphElementPropertyBetterValue.HigherNumber:
|
||||
if (parseFloat(v.bottomProp.displayValue) > parseFloat(v.topProp.displayValue)) {
|
||||
diffIconClass = executionPlanComparisonPropertiesGreenUpArrow;
|
||||
} else {
|
||||
diffIconClass = executionPlanComparisonPropertiesRedDownArrow;
|
||||
}
|
||||
case sqlExtHostType.executionPlan.ExecutionPlanGraphElementPropertyDataType.String:
|
||||
diffIconClass = executionPlanComparisonPropertiesDifferent;
|
||||
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;
|
||||
}
|
||||
default:
|
||||
diffIconClass = executionPlanComparisonPropertiesDifferent;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
viewBox="0 0 16 16"
|
||||
version="1.1"
|
||||
id="svg1710"
|
||||
sodipodi:docname="different.svg"
|
||||
inkscape:version="1.2 (dc2aedaf03, 2022-05-15)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs1714" />
|
||||
<sodipodi:namedview
|
||||
id="namedview1712"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
showgrid="false"
|
||||
inkscape:zoom="64.1875"
|
||||
inkscape:cx="5.1801363"
|
||||
inkscape:cy="7.9922103"
|
||||
inkscape:window-width="2560"
|
||||
inkscape:window-height="1369"
|
||||
inkscape:window-x="2552"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="level-1" />
|
||||
<g
|
||||
id="canvas">
|
||||
<path
|
||||
d="M 12.432328,11.918208 H 4.6426485 V 3.7390458 h 7.7896795 z"
|
||||
fill="none"
|
||||
opacity="0"
|
||||
id="path1698"
|
||||
style="stroke-width:0.498878" />
|
||||
</g>
|
||||
<g
|
||||
id="level-1"
|
||||
transform="matrix(1.6469005,0,0,1.6700347,-5.945311,-5.3728163)">
|
||||
<path
|
||||
transform="translate(4.1,0.7)"
|
||||
d="m 7.9,6.3 h -7 v -1 h 7 z m 0,2 h -7 v 1 h 7 z"
|
||||
fill="#000000"
|
||||
id="path1705" />
|
||||
<rect
|
||||
style="display:inline;opacity:1;fill:#000000;fill-opacity:1;stroke-width:0.0145143;image-rendering:auto"
|
||||
id="rect2147"
|
||||
width="0.78535908"
|
||||
height="9.4417553"
|
||||
x="11.18577"
|
||||
y="-3.1382523"
|
||||
ry="0.019074254"
|
||||
inkscape:label="rect2147"
|
||||
transform="matrix(0.82260815,0.56860868,-0.58464093,0.81129217,0,0)" />
|
||||
</g>
|
||||
<rect
|
||||
x="62.1"
|
||||
y="25"
|
||||
width="312.5"
|
||||
height="312.5"
|
||||
fill="rgb(255, 255, 255)"
|
||||
id="rect1708" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
@@ -0,0 +1,68 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
viewBox="0 0 16 16"
|
||||
version="1.1"
|
||||
id="svg1710"
|
||||
sodipodi:docname="different.svg"
|
||||
inkscape:version="1.2 (dc2aedaf03, 2022-05-15)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs1714" />
|
||||
<sodipodi:namedview
|
||||
id="namedview1712"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
showgrid="false"
|
||||
inkscape:zoom="64.1875"
|
||||
inkscape:cx="5.1801363"
|
||||
inkscape:cy="7.9922103"
|
||||
inkscape:window-width="2560"
|
||||
inkscape:window-height="1369"
|
||||
inkscape:window-x="2552"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="level-1" />
|
||||
<g
|
||||
id="canvas">
|
||||
<path
|
||||
d="M 12.432328,11.918208 H 4.6426485 V 3.7390458 h 7.7896795 z"
|
||||
fill="none"
|
||||
opacity="0"
|
||||
id="path1698"
|
||||
style="stroke-width:0.498878" />
|
||||
</g>
|
||||
<g
|
||||
id="level-1"
|
||||
transform="matrix(1.6469005,0,0,1.6700347,-5.945311,-5.3728163)">
|
||||
<path
|
||||
transform="translate(4.1,0.7)"
|
||||
d="m 7.9,6.3 h -7 v -1 h 7 z m 0,2 h -7 v 1 h 7 z"
|
||||
fill="#fff"
|
||||
id="path1705" />
|
||||
<rect
|
||||
style="display:inline;opacity:1;fill:#fff;fill-opacity:1;stroke-width:0.0145143;image-rendering:auto"
|
||||
id="rect2147"
|
||||
width="0.78535908"
|
||||
height="9.4417553"
|
||||
x="11.18577"
|
||||
y="-3.1382523"
|
||||
ry="0.019074254"
|
||||
inkscape:label="rect2147"
|
||||
transform="matrix(0.82260815,0.56860868,-0.58464093,0.81129217,0,0)" />
|
||||
</g>
|
||||
<rect
|
||||
x="62.1"
|
||||
y="25"
|
||||
width="312.5"
|
||||
height="312.5"
|
||||
fill="rgb(255, 255, 255)"
|
||||
id="rect1708" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
@@ -1 +0,0 @@
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 512 B |
@@ -1 +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>
|
||||
<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:#000000;}</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>
|
||||
|
Before Width: | Height: | Size: 512 B After Width: | Height: | Size: 512 B |
@@ -1 +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>
|
||||
<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:#ffffff;}</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>
|
||||
|
Before Width: | Height: | Size: 512 B After Width: | Height: | Size: 512 B |
@@ -1 +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>
|
||||
<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:#000000;}</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>
|
||||
|
Before Width: | Height: | Size: 510 B After Width: | Height: | Size: 510 B |
@@ -1 +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>
|
||||
<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:#ffffff;}</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>
|
||||
|
Before Width: | Height: | Size: 510 B After Width: | Height: | Size: 510 B |
@@ -546,7 +546,7 @@ However we always want it to be the width of the container it is resizing.
|
||||
}
|
||||
|
||||
.eps-container .ep-properties-different {
|
||||
background-image: url(../images/actionIcons/differentValues.svg);
|
||||
background-image: url(../images/actionIcons/different.svg);
|
||||
background-size: 16px 16px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
@@ -554,8 +554,9 @@ However we always want it to be the width of the container it is resizing.
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.eps-container .ep-properties-red-down-arrow {
|
||||
background-image: url(../images/actionIcons/downArrowWorse.svg);
|
||||
.vs-dark .eps-container .ep-properties-different,
|
||||
.hc-black .eps-container .ep-properties-different {
|
||||
background-image: url(../images/actionIcons/differentDark.svg);
|
||||
background-size: 16px 16px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
@@ -563,8 +564,9 @@ However we always want it to be the width of the container it is resizing.
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.eps-container .ep-properties-green-down-arrow {
|
||||
background-image: url(../images/actionIcons/downArrowBetter.svg);
|
||||
|
||||
.eps-container .ep-properties-down-arrow {
|
||||
background-image: url(../images/actionIcons/downArrow.svg);
|
||||
background-size: 16px 16px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
@@ -572,8 +574,9 @@ However we always want it to be the width of the container it is resizing.
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.eps-container .ep-properties-red-up-arrow {
|
||||
background-image: url(../images/actionIcons/upArrowWorse.svg);
|
||||
.vs-dark .eps-container .ep-properties-down-arrow,
|
||||
.hc-black .eps-container .ep-properties-down-arrow {
|
||||
background-image: url(../images/actionIcons/downArrowDark.svg);
|
||||
background-size: 16px 16px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
@@ -581,8 +584,18 @@ However we always want it to be the width of the container it is resizing.
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.eps-container .ep-properties-green-down-arrow {
|
||||
background-image: url(../images/actionIcons/downArrowBetter.svg);
|
||||
.eps-container .ep-properties-up-arrow {
|
||||
background-image: url(../images/actionIcons/upArrow.svg);
|
||||
background-size: 16px 16px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
width: 16px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.vs-dark .eps-container .ep-properties-up-arrow,
|
||||
.hc-black .eps-container .ep-properties-up-arrow {
|
||||
background-image: url(../images/actionIcons/upArrowDark.svg);
|
||||
background-size: 16px 16px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
@@ -736,7 +749,3 @@ However we always want it to be the width of the container it is resizing.
|
||||
.eps-container .comparison-editor .parent-row-styling {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.eps-container .comparison-editor .default-bottom-column-cell-styling {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user