diff --git a/src/components/ShellView/ResultGraph.vue b/src/components/ShellView/ResultGraph.vue
index e871d9a..5ecdbfd 100644
--- a/src/components/ShellView/ResultGraph.vue
+++ b/src/components/ShellView/ResultGraph.vue
@@ -23,7 +23,16 @@
-
{{ sidePanelPropertyTitlePrefix }} Properties
+
+
{{ sidePanelPropertyTitlePrefix }} Properties
+
+
0">
- Showing {{ counters.total.node }} nodes
+
+
+ Showing
+
+ {{ counters.total.node - numHiddenNodes }}/{{ counters.total.node }} nodes
+ ({{ numHiddenNodes }} hidden)
+
+
+
-
-
Showing {{ counters.total.rel }} rels
+
+ Showing
+
+ {{ counters.total.rel - numHiddenRels }}/{{ counters.total.rel }} rels
+ ({{ numHiddenRels }} hidden)
+
@@ -122,6 +152,8 @@ export default {
sidebarWidth: 500,
graphWidth: 0,
borderWidth: UI_SIZE.DEFAULT_BORDER_WIDTH,
+ numHiddenNodes: 0,
+ numHiddenRels: 0,
hoveredProperties: [],
hoveredLabel: "",
hoveredIsNode: false,
@@ -341,6 +373,37 @@ export default {
this.graphCreated = true;
},
+ hideNode() {
+ const currentSelectedNode = this.g6graph.findAllByState('node', 'click')[0];
+ const nodeId = currentSelectedNode.getModel().id;
+ this.numHiddenNodes += 1;
+ currentSelectedNode.hide();
+ this.deselectAll();
+ const relatedEdges = this.g6graph.getEdges().filter((edge) => {
+ const edgeModel = edge.getModel();
+ return edgeModel.source === nodeId || edgeModel.target === nodeId;
+ });
+ relatedEdges.forEach((edge) => {
+ this.numHiddenRels += 1;
+ edge.hide();
+ });
+ },
+
+ showAllNodesRels() {
+ this.g6graph.getNodes().forEach((node) => {
+ if (!node.isVisible()) {
+ node.show();
+ }
+ });
+ this.g6graph.getEdges().forEach((edge) => {
+ if (!edge.isVisible()) {
+ edge.show();
+ }
+ });
+ this.numHiddenNodes = 0;
+ this.numHiddenRels = 0;
+ },
+
encodeNodeId(id) {
return `${id.table}_${id.offset}`;
},
@@ -543,14 +606,14 @@ export default {
const label = model.properties._label;
this.hoveredLabel = label;
this.hoveredProperties = ValueFormatter.filterAndBeautifyProperties(model.properties, this.schema);
- this.hoveredIsNode = !(model._src && model._dst);
+ this.hoveredIsNode = !(model.properties._src && model.properties._dst);
},
handleClick(model) {
const label = model.properties._label;
this.clickedLabel = label;
this.clickedProperties = ValueFormatter.filterAndBeautifyProperties(model.properties, this.schema);
- this.clickedIsNode = !(model._src && model._dst);
+ this.clickedIsNode = !(model.properties._src && model.properties._dst);
},
deselectAll() {
@@ -660,6 +723,22 @@ export default {
height: 100%;
}
+ .result-container__summary-section {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ p {
+ display: inline-block;
+ margin: 0;
+ }
+
+ button {
+ padding: 5px;
+ margin-right: 20px;
+ }
+ }
+
.result-container__tools_container {
display: flex;
flex-direction: column;