Release v0.0.63

microsoft · Aug 11, 2024 · ab4c7e1 · ab4c7e1
1 parent 03b2b6c
commit ab4c7e1
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 7 deletions.
diff --git a/dist/build.js b/dist/build.js
@@ -93458,15 +93458,15 @@ azdataQueryPlan.prototype.init = function (queryPlanConfiguration) {
                 expandCollapse.setAttribute('role', 'button');
                 expandCollapse.ariaLabel = (cell.collapsed? 'Expand node' : 'Collapse node ') + cell.value.label;
                 const icon = cell.collapsed ? expandCollapsePaths.expand : expandCollapsePaths.collapse;
-                expandCollapse.style.backgroundImage = 'url(' + icon + ')';
+                expandCollapse.setAttribute ('class', cell.collapsed? 'graph-icon-badge-expand expanded' : 'graph-icon-badge-expand collapsed');
                 cellContainer.appendChild(expandCollapse);
                 mxEvent.addListener(expandCollapse, 'click', (evt) => {
 
                     const currentCell = cell;
                     const collapse = !currentCell.collapsed;
                     const icon = collapse ? expandCollapsePaths.expand : expandCollapsePaths.collapse;
+                    expandCollapse.setAttribute ('class', cell.collapsed? 'graph-icon-badge-expand expanded' : 'graph-icon-badge-expand collapsed');
                     expandCollapse.ariaLabel = (cell.collapsed? 'Expand node' : 'Collapse node ') + cell.value.label;
-                    expandCollapse.style.backgroundImage = 'url(' + icon + ')';
 
                     // undefined is for the middle parameter since the overwritten definition of foldCells doesn't reference it.
                     this.foldCells(collapse, undefined, [currentCell]);

diff --git a/dist/js/azdata/azdataQueryPlan.js b/dist/js/azdata/azdataQueryPlan.js
@@ -514,15 +514,15 @@ azdataQueryPlan.prototype.init = function (queryPlanConfiguration) {
                 expandCollapse.setAttribute('role', 'button');
                 expandCollapse.ariaLabel = (cell.collapsed? 'Expand node' : 'Collapse node ') + cell.value.label;
                 const icon = cell.collapsed ? expandCollapsePaths.expand : expandCollapsePaths.collapse;
-                expandCollapse.style.backgroundImage = 'url(' + icon + ')';
+                expandCollapse.setAttribute ('class', cell.collapsed? 'graph-icon-badge-expand expanded' : 'graph-icon-badge-expand collapsed');
                 cellContainer.appendChild(expandCollapse);
                 mxEvent.addListener(expandCollapse, 'click', (evt) => {
 
                     const currentCell = cell;
                     const collapse = !currentCell.collapsed;
                     const icon = collapse ? expandCollapsePaths.expand : expandCollapsePaths.collapse;
+                    expandCollapse.setAttribute ('class', cell.collapsed? 'graph-icon-badge-expand expanded' : 'graph-icon-badge-expand collapsed');
                     expandCollapse.ariaLabel = (cell.collapsed? 'Expand node' : 'Collapse node ') + cell.value.label;
-                    expandCollapse.style.backgroundImage = 'url(' + icon + ')';
 
                     // undefined is for the middle parameter since the overwritten definition of foldCells doesn't reference it.
                     this.foldCells(collapse, undefined, [currentCell]);

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "azdataGraph",
   "description": "azdataGraph is a derivative of mxGraph, which is a fully client side JavaScript diagramming library that uses SVG and HTML for rendering.",
-  "version": "0.0.62",
+  "version": "0.0.63",
   "homepage": "https://github.com/microsoft/azdataGraph",
   "author": "Microsoft",
   "license": "Apache-2.0",

diff --git a/src/css/common.css b/src/css/common.css
@@ -227,6 +227,14 @@ td.mxPopupMenuIcon {
 	background-color: #FFFFFF;
 }
 
+.graph-cell .graph-icon-badge-expand.expanded {
+	background-image: url('../images/expanded.gif');
+}
+
+.graph-cell .graph-icon-badge-expand.collapsed {
+	background-image: url('../images/collapsed.gif');
+}
+
 .graph-cell-cost{
 	border-radius: 15px;
 	width: fit-content;

diff --git a/src/js/azdata/azdataQueryPlan.js b/src/js/azdata/azdataQueryPlan.js
@@ -514,15 +514,15 @@ azdataQueryPlan.prototype.init = function (queryPlanConfiguration) {
                 expandCollapse.setAttribute('role', 'button');
                 expandCollapse.ariaLabel = (cell.collapsed? 'Expand node' : 'Collapse node ') + cell.value.label;
                 const icon = cell.collapsed ? expandCollapsePaths.expand : expandCollapsePaths.collapse;
-                expandCollapse.style.backgroundImage = 'url(' + icon + ')';
+                expandCollapse.setAttribute ('class', cell.collapsed? 'graph-icon-badge-expand expanded' : 'graph-icon-badge-expand collapsed');
                 cellContainer.appendChild(expandCollapse);
                 mxEvent.addListener(expandCollapse, 'click', (evt) => {
 
                     const currentCell = cell;
                     const collapse = !currentCell.collapsed;
                     const icon = collapse ? expandCollapsePaths.expand : expandCollapsePaths.collapse;
+                    expandCollapse.setAttribute ('class', cell.collapsed? 'graph-icon-badge-expand expanded' : 'graph-icon-badge-expand collapsed');
                     expandCollapse.ariaLabel = (cell.collapsed? 'Expand node' : 'Collapse node ') + cell.value.label;
-                    expandCollapse.style.backgroundImage = 'url(' + icon + ')';
 
                     // undefined is for the middle parameter since the overwritten definition of foldCells doesn't reference it.
                     this.foldCells(collapse, undefined, [currentCell]);