From 478411431d8b5c204ff39be6102fd169937f7757 Mon Sep 17 00:00:00 2001
From: Jamie Wilbraham <jamiewilbraham@users.noreply.github.com>
Date: Fri, 20 Nov 2020 14:02:40 +1300
Subject: [PATCH] Issue with multi-selection filtering (#72)

Co-authored-by: Carlos Reyes <carlos@zarmada.com>
---
 .../GraphViewerCommandBarComponent.js         | 26 +++++++++----------
 .../GraphViewerComponent.js                   |  2 +-
 .../GraphViewerCytoscapeComponent.js          | 11 ++++----
 3 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/client/src/components/GraphViewerComponent/GraphViewerCommandBarComponent/GraphViewerCommandBarComponent.js b/client/src/components/GraphViewerComponent/GraphViewerCommandBarComponent/GraphViewerCommandBarComponent.js
index 3683f1f5..1fef67e3 100644
--- a/client/src/components/GraphViewerComponent/GraphViewerCommandBarComponent/GraphViewerCommandBarComponent.js
+++ b/client/src/components/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
index d6562b13..7ceec1c2 100644
--- 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/client/src/components/GraphViewerComponent/GraphViewerCytoscapeComponent/GraphViewerCytoscapeComponent.js b/client/src/components/GraphViewerComponent/GraphViewerCytoscapeComponent/GraphViewerCytoscapeComponent.js
index 1241805c..56cf807f 100644
--- a/client/src/components/GraphViewerComponent/GraphViewerCytoscapeComponent/GraphViewerCytoscapeComponent.js
+++ b/client/src/components/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 => {