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 => {