From 48a2a9a135450c6cfcc48eb2588f5cfe0f13d58a Mon Sep 17 00:00:00 2001
From: Jack <jack20220723@gmail.com>
Date: Thu, 7 Dec 2023 20:40:54 +0800
Subject: [PATCH] Unify node and rel prop editing (#46)

* Unify node and rel prop editing

* Unify node and rel prop editing
---
 .../PropertiesPanelContent/DetailsPane.tsx    |  1 +
 .../VisualizationView/VisualizationView.tsx   | 26 ++++++++++++++-----
 .../PropertiesTable/PropertiesTable.test.tsx  |  1 +
 .../PropertiesTable/PropertiesTable.tsx       | 21 ++++++++++-----
 .../DefaultDetailsPane.tsx                    |  1 +
 .../Graph/GraphEventHandlerModel.ts           |  4 +--
 src/neo4j-arc/graph-visualization/index.ts    |  2 +-
 src/neo4j-arc/package.json                    |  2 +-
 8 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/DetailsPane.tsx b/src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/DetailsPane.tsx
index c21a7df8583..95bd59b8d53 100644
--- a/src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/DetailsPane.tsx
+++ b/src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/DetailsPane.tsx
@@ -131,6 +131,7 @@ export function DetailsPane({
       </PaneHeader>
       <PaneBody data-testid="viz-details-pane-body">
         <PropertiesTable
+          isNode={vizItem.type === 'node'}
           visibleProperties={visibleItemProperties}
           onMoreClick={handleMorePropertiesClick}
           moreStep={DETAILS_PANE_STEP_SIZE}
diff --git a/src/browser/modules/Stream/CypherFrame/VisualizationView/VisualizationView.tsx b/src/browser/modules/Stream/CypherFrame/VisualizationView/VisualizationView.tsx
index 3b6608e4229..12eae2eb334 100644
--- a/src/browser/modules/Stream/CypherFrame/VisualizationView/VisualizationView.tsx
+++ b/src/browser/modules/Stream/CypherFrame/VisualizationView/VisualizationView.tsx
@@ -30,7 +30,7 @@ import {
   GraphVisualizer,
   REL_ON_CANVAS_CREATE,
   NODE_ON_CANVAS_CREATE,
-  NODE_PROP_UPDATE,
+  PROP_UPDATE,
   NODE_LABEL_UPDATE,
   REL_TYPE_UPDATE,
   DETAILS_PANE_TITLE_UPDATE
@@ -315,6 +315,10 @@ LIMIT ${maxNewNeighbours}`
           }
         }
       )
+
+      const cmd = 'MATCH (n) RETURN n;'
+      const action = executeCommand(cmd, { source: commandSources.rerunFrame })
+      this.props.bus.send(action.type, action)
     }
 
     if (event == NODE_LABEL_UPDATE) {
@@ -343,27 +347,33 @@ LIMIT ${maxNewNeighbours}`
           }
         }
       )
+
+      const cmd = 'MATCH (n) RETURN n;'
+      const action = executeCommand(cmd, { source: commandSources.rerunFrame })
+      this.props.bus.send(action.type, action)
     }
 
-    if (event == NODE_PROP_UPDATE) {
+    if (event == PROP_UPDATE) {
       if (properties == null) {
         throw new Error(
           'A property map with nodeId, propKey, and propVal keys are required'
         )
       }
 
-      const nodeId = properties['nodeId']
+      const isNode = properties['isNode']
+      const nodeOrRelId = properties['nodeOrRelId']
       const propKey = properties['propKey']
       const propVal = properties['propVal']
 
-      const query = `MATCH (n) WHERE ID(n) = ${nodeId} SET n.${propKey} = "${propVal}"`
-      console.log(query)
+      const query = isNode
+        ? `MATCH (n)       WHERE ID(n) = ${nodeOrRelId} SET n.${propKey} = "${propVal}"`
+        : `MATCH ()-[r]-() WHERE ID(r) = ${nodeOrRelId} SET r.${propKey} = "${propVal}"`
 
       this.props.bus.self(
         CYPHER_REQUEST,
         {
           query,
-          params: { nodeId, propKey, propVal },
+          params: { nodeOrRelId, propKey, propVal },
           queryType: NEO4J_BROWSER_USER_ACTION_QUERY
         },
         (response: any) => {
@@ -372,6 +382,10 @@ LIMIT ${maxNewNeighbours}`
           }
         }
       )
+
+      const cmd = 'MATCH (n) RETURN n;'
+      const action = executeCommand(cmd, { source: commandSources.rerunFrame })
+      this.props.bus.send(action.type, action)
     }
 
     if (event == REL_ON_CANVAS_CREATE) {
diff --git a/src/neo4j-arc/common/components/PropertiesTable/PropertiesTable.test.tsx b/src/neo4j-arc/common/components/PropertiesTable/PropertiesTable.test.tsx
index aae94f6fdd0..c5b76860e8b 100644
--- a/src/neo4j-arc/common/components/PropertiesTable/PropertiesTable.test.tsx
+++ b/src/neo4j-arc/common/components/PropertiesTable/PropertiesTable.test.tsx
@@ -72,6 +72,7 @@ describe('<DetailsPane />', () => {
     }
     return render(
       <PropertiesTable
+        isNode={type === 'node'}
         visibleProperties={propertyList}
         onMoreClick={jest.fn()}
         totalNumItems={propertyList.length}
diff --git a/src/neo4j-arc/common/components/PropertiesTable/PropertiesTable.tsx b/src/neo4j-arc/common/components/PropertiesTable/PropertiesTable.tsx
index c93d298371f..960fec73593 100644
--- a/src/neo4j-arc/common/components/PropertiesTable/PropertiesTable.tsx
+++ b/src/neo4j-arc/common/components/PropertiesTable/PropertiesTable.tsx
@@ -33,23 +33,27 @@ import { ShowMoreOrAll } from '../ShowMoreOrAll/ShowMoreOrAll'
 import { VizItemProperty } from 'neo4j-arc/common'
 import {
   GraphInteractionCallBack,
-  NODE_PROP_UPDATE
+  PROP_UPDATE
 } from '../../../graph-visualization'
 
 export const ELLIPSIS = '\u2026'
 export const WIDE_VIEW_THRESHOLD = 900
 export const MAX_LENGTH_NARROW = 150
 export const MAX_LENGTH_WIDE = 300
+
 type ExpandableValueProps = {
-  nodeId: string
+  isNode: boolean
+  nodeOrRelId: string
   propKey: string
   value: string
   width: number
   type: string
   onGraphInteraction: GraphInteractionCallBack
 }
+
 function ExpandableValue({
-  nodeId,
+  isNode,
+  nodeOrRelId,
   propKey,
   value,
   width,
@@ -76,8 +80,9 @@ function ExpandableValue({
       onKeyUp={(event: any) => {
         if (event.keyCode === 13) {
           event.preventDefault()
-          onGraphInteraction(NODE_PROP_UPDATE, {
-            nodeId: nodeId,
+          onGraphInteraction(PROP_UPDATE, {
+            isNode: isNode,
+            nodeOrRelId: nodeOrRelId,
             propKey: propKey,
             propVal: event.currentTarget.textContent
           })
@@ -97,6 +102,7 @@ function ExpandableValue({
 }
 
 type PropertiesViewProps = {
+  isNode: boolean
   visibleProperties: VizItemProperty[]
   onMoreClick: (numMore: number) => void
   totalNumItems: number
@@ -104,7 +110,9 @@ type PropertiesViewProps = {
   nodeInspectorWidth: number
   onGraphInteraction?: GraphInteractionCallBack
 }
+
 export const PropertiesTable = ({
+  isNode,
   visibleProperties,
   totalNumItems,
   onMoreClick,
@@ -131,7 +139,8 @@ export const PropertiesTable = ({
                 </KeyCell>
                 <ValueCell>
                   <ExpandableValue
-                    nodeId={id}
+                    isNode={isNode}
+                    nodeOrRelId={id}
                     propKey={key}
                     value={value}
                     width={nodeInspectorWidth}
diff --git a/src/neo4j-arc/graph-visualization/GraphVisualizer/DefaultPanelContent/DefaultDetailsPane.tsx b/src/neo4j-arc/graph-visualization/GraphVisualizer/DefaultPanelContent/DefaultDetailsPane.tsx
index 2db8a53eb16..076f68c88aa 100644
--- a/src/neo4j-arc/graph-visualization/GraphVisualizer/DefaultPanelContent/DefaultDetailsPane.tsx
+++ b/src/neo4j-arc/graph-visualization/GraphVisualizer/DefaultPanelContent/DefaultDetailsPane.tsx
@@ -138,6 +138,7 @@ export function DefaultDetailsPane({
       </PaneHeader>
       <PaneBody>
         <PropertiesTable
+          isNode={vizItem.type === 'node'}
           visibleProperties={visibleItemProperties}
           onMoreClick={handleMorePropertiesClick}
           moreStep={DETAILS_PANE_STEP_SIZE}
diff --git a/src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/GraphEventHandlerModel.ts b/src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/GraphEventHandlerModel.ts
index 6fefcb06eed..9a87578e308 100644
--- a/src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/GraphEventHandlerModel.ts
+++ b/src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/GraphEventHandlerModel.ts
@@ -31,7 +31,7 @@ import {
 import { Visualization } from './visualization/Visualization'
 
 export const NODE_ON_CANVAS_CREATE = 'NODE_ON_CANVAS_CREATE'
-export const NODE_PROP_UPDATE = 'NODE_PROP_UPDATE'
+export const PROP_UPDATE = 'PROP_UPDATE'
 export const NODE_LABEL_UPDATE = 'NODE_LABEL_UPDATE'
 export const REL_ON_CANVAS_CREATE = 'REL_ON_CANVAS_CREATE'
 export const REL_TYPE_UPDATE = 'REL_TYPE_UPDATE'
@@ -42,10 +42,10 @@ export type GraphInteraction =
   | 'NODE_UNPINNED'
   | 'NODE_DISMISSED'
   | typeof NODE_ON_CANVAS_CREATE
-  | typeof NODE_PROP_UPDATE
   | typeof NODE_LABEL_UPDATE
   | typeof REL_ON_CANVAS_CREATE
   | typeof REL_TYPE_UPDATE
+  | typeof PROP_UPDATE
   | typeof DETAILS_PANE_TITLE_UPDATE
 
 export type GraphInteractionCallBack = (
diff --git a/src/neo4j-arc/graph-visualization/index.ts b/src/neo4j-arc/graph-visualization/index.ts
index eeb831d2630..aaebacb2479 100644
--- a/src/neo4j-arc/graph-visualization/index.ts
+++ b/src/neo4j-arc/graph-visualization/index.ts
@@ -38,7 +38,7 @@ export type { OverviewPaneProps } from './GraphVisualizer/DefaultPanelContent/De
 export {
   REL_ON_CANVAS_CREATE,
   NODE_ON_CANVAS_CREATE,
-  NODE_PROP_UPDATE,
+  PROP_UPDATE,
   NODE_LABEL_UPDATE,
   REL_TYPE_UPDATE,
   DETAILS_PANE_TITLE_UPDATE
diff --git a/src/neo4j-arc/package.json b/src/neo4j-arc/package.json
index 5a8584e8293..e1eb92d84d1 100644
--- a/src/neo4j-arc/package.json
+++ b/src/neo4j-arc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "neo4j-devtools-arc",
-  "version": "0.0.75",
+  "version": "0.0.76",
   "main": "dist/neo4j-arc.js",
   "author": "Neo4j Inc.",
   "license": "GPL-3.0",