Issue with multi-selection filtering (#72)

Co-authored-by: Carlos Reyes <[email protected]>
Azure-Samples · Nov 20, 2020 · 4784114 · 4784114
1 parent b3142b2
commit 4784114
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 19 deletions.
diff --git a/...nts/GraphViewerComponent/GraphViewerCommandBarComponent/GraphViewerCommandBarComponent.js b/...nts/GraphViewerComponent/GraphViewerCommandBarComponent/GraphViewerCommandBarComponent.js
@@ -112,18 +112,6 @@ export class GraphViewerCommandBarComponent extends Component {
       className: `${this.buttonClass} command-bar-dropdown`,
       subMenuProps: {
         items: [
-          {
-            key: "hide-others",
-            text: "Hide all others",
-            ariaLabel: "Hide all others",
-            onClick: () => this.props.onHideOthers()
-          },
-          {
-            key: "hide-non-children",
-            text: "Hide non-children",
-            ariaLabel: "Hide non children",
-            onClick: () => this.props.onHideNonChildren()
-          },
           {
             key: "hide-selected",
             text: "Hide selected",
@@ -135,6 +123,18 @@ export class GraphViewerCommandBarComponent extends Component {
             text: "Hide selected and children",
             ariaLabel: "Hide selected and children",
             onClick: () => this.props.onHideWithChildren()
+          },
+          {
+            key: "hide-others",
+            text: "Hide all others",
+            ariaLabel: "Hide all others",
+            onClick: () => this.props.onHideOthers()
+          },
+          {
+            key: "hide-non-children",
+            text: "Hide non-children",
+            ariaLabel: "Hide non children",
+            onClick: () => this.props.onHideNonChildren()
           }
         ]
       }
@@ -244,7 +244,7 @@ export class GraphViewerCommandBarComponent extends Component {
   render() {
     const { selectedNode, selectedNodes, onTwinDelete, onRelationshipCreate, query, onGetCurrentNodes, selectedEdge, canShowAll } = this.props;
     this.farItems.find(i => i.key === "deleteTwin").disabled = !selectedNode;
-    this.farItems.find(i => i.key === "hideTwins").disabled = !selectedNodes || selectedNodes.length !== 1;
+    this.farItems.find(i => i.key === "hideTwins").disabled = !selectedNodes;
     this.farItems.find(i => i.key === "showTwins").disabled = !canShowAll;
     this.farItems.find(i => i.key === "getRelationship").disabled = !selectedNodes || selectedNodes.length !== 1;
     this.farItems.find(i => i.key === "addRelationship").disabled = !selectedNodes || selectedNodes.length !== 2;

diff --git a/client/src/components/GraphViewerComponent/GraphViewerComponent.js b/client/src/components/GraphViewerComponent/GraphViewerComponent.js
@@ -28,7 +28,7 @@ export class GraphViewerComponent extends React.Component {
       selectedNodes: null,
       selectedEdge: null,
       layout: "Klay",
-      hideMode: "hide-others",
+      hideMode: "hide-selected",
       canShowAll: false
     };
     this.cyRef = React.createRef();

diff --git a/...nents/GraphViewerComponent/GraphViewerCytoscapeComponent/GraphViewerCytoscapeComponent.js b/...nents/GraphViewerComponent/GraphViewerCytoscapeComponent/GraphViewerCytoscapeComponent.js
@@ -72,9 +72,9 @@ export class GraphViewerCytoscapeComponent extends React.Component {
     const cy = this.graphControl;
     this.selectedNodes.forEach(x => {
       cy.$id(x.id).toggleClass("hide", true);
-      cy.$id(x.id).unselect();
     });
-    this.selectedNode = [];
+    cy.$(":selected").unselect();
+    this.selectedNodes = [];
   }
 
   hideOtherTwins() {
@@ -125,9 +125,7 @@ export class GraphViewerCytoscapeComponent extends React.Component {
         cy.$id(cyNode.id()).unselect();
       }
     });
-    this.selectedNodes.forEach(x => {
-      cy.$id(x.id).unselect();
-    });
+    cy.$(":selected").unselect();
     this.selectedNode = [];
   }
 
@@ -281,6 +279,9 @@ export class GraphViewerCytoscapeComponent extends React.Component {
       this.highlightRelatedNodes();
       this.onNodeClicked();
     }
+    if (this.selectedNodes.length === 0) {
+      this.clearSelection();
+    }
   }
 
   onEdgeSelected = e => {