Support node label editing

src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/DetailsPane.tsx

@@ -83,6 +83,8 @@ export function DetailsPane({
                   label,
                   propertyKeys: vizItem.item.propertyList.map(p => p.key)
                 }}
+                onGraphInteraction={onGraphInteraction}
+                nodeId={vizItem.item.id}
               />
             )
           })}

src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/StyleableNodeLabel.tsx

@@ -21,7 +21,11 @@ import React from 'react'
 import { Popup } from 'semantic-ui-react'
 
 import { StyledLabelChip } from 'neo4j-arc/common'
-import { GraphStyleModel } from 'neo4j-arc/graph-visualization'
+import {
+  GraphInteractionCallBack,
+  GraphStyleModel,
+  NODE_LABEL_UPDATE
+} from 'neo4j-arc/graph-visualization'
 
 import { GrassEditor } from './GrassEditor'
 
@@ -34,11 +38,15 @@ export type StyleableNodeLabelProps = {
   graphStyle: GraphStyleModel
   /* The total number of nodes in returned graph */
   allNodesCount?: number | null
+  onGraphInteraction?: GraphInteractionCallBack
+  nodeId?: string
 }
 export function StyleableNodeLabel({
   graphStyle,
   selectedLabel,
-  allNodesCount
+  allNodesCount,
+  onGraphInteraction = () => undefined,
+  nodeId
 }: StyleableNodeLabelProps): JSX.Element {
   const labels = selectedLabel.label === '*' ? [] : [selectedLabel.label]
   const graphStyleForLabel = graphStyle.forNode({
@@ -48,26 +56,40 @@ export function StyleableNodeLabel({
     selectedLabel.label === '*' ? allNodesCount : selectedLabel.count
 
   return (
-    <Popup
-      on="click"
-      basic
-      key={selectedLabel.label}
-      wide
-      position="left center"
-      offset={[0, 0]}
-      trigger={
-        <StyledLabelChip
-          style={{
-            backgroundColor: graphStyleForLabel.get('color'),
-            color: graphStyleForLabel.get('text-color-internal')
-          }}
-          data-testid={`property-details-overview-node-label-${selectedLabel.label}`}
-        >
-          {`${selectedLabel.label}${count || count === 0 ? ` (${count})` : ''}`}
-        </StyledLabelChip>
+    <div
+      suppressContentEditableWarning={true}
+      contentEditable="true"
+      onInput={e =>
+        onGraphInteraction(NODE_LABEL_UPDATE, {
+          nodeId: nodeId,
+          oldLabel: labels[0],
+          newLabel: e.currentTarget.textContent
+        })
       }
     >
-      <GrassEditor selectedLabel={selectedLabel} />
-    </Popup>
+      <Popup
+        on="click"
+        basic
+        key={selectedLabel.label}
+        wide
+        position="left center"
+        offset={[0, 0]}
+        trigger={
+          <StyledLabelChip
+            style={{
+              backgroundColor: graphStyleForLabel.get('color'),
+              color: graphStyleForLabel.get('text-color-internal')
+            }}
+            data-testid={`property-details-overview-node-label-${selectedLabel.label}`}
+          >
+            {`${selectedLabel.label}${
+              count || count === 0 ? ` (${count})` : ''
+            }`}
+          </StyledLabelChip>
+        }
+      >
+        <GrassEditor selectedLabel={selectedLabel} />
+      </Popup>
+    </div>
   )
 }

src/browser/modules/Stream/CypherFrame/VisualizationView/VisualizationView.tsx

@@ -29,7 +29,8 @@ import {
   GraphModel,
   GraphVisualizer,
   NODE_ON_CANVAS_CREATE,
-  NODE_PROP_UPDATE
+  NODE_PROP_UPDATE,
+  NODE_LABEL_UPDATE
 } from 'neo4j-arc/graph-visualization'
 
 import { StyledVisContainer } from './VisualizationView.styled'
@@ -278,6 +279,34 @@ LIMIT ${maxNewNeighbours}`
   }
 
   onGraphInteraction: GraphInteractionCallBack = (event, properties) => {
+    if (event == NODE_LABEL_UPDATE) {
+      if (properties == null) {
+        throw new Error(
+          'A property map with nodeId, oldLabel, and newLabel keys are required'
+        )
+      }
+
+      const nodeId = properties['nodeId']
+      const oldLabel = `\`${properties['oldLabel']}\``
+      const newLabel = `\`${properties['newLabel']}\``
+
+      const query = `MATCH(n) WHERE ID(n) = ${nodeId} REMOVE n:${oldLabel} SET n:${newLabel}`
+      console.log(query)
+      this.props.bus.self(
+        CYPHER_REQUEST,
+        {
+          query,
+          params: { nodeId, oldLabel, newLabel },
+          queryType: NEO4J_BROWSER_USER_ACTION_QUERY
+        },
+        (response: any) => {
+          if (!response.success) {
+            throw new Error(response.error)
+          }
+        }
+      )
+    }
+
     if (event == NODE_PROP_UPDATE) {
       if (properties == null) {
         throw new Error('')

src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/GraphEventHandlerModel.ts

@@ -32,6 +32,7 @@ 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 NODE_LABEL_UPDATE = 'NODE_LABEL_UPDATE'
 
 export type GraphInteraction =
   | 'NODE_EXPAND'
@@ -40,6 +41,7 @@ export type GraphInteraction =
   | 'NODE_ON_CANVAS_CREATE'
   | typeof NODE_ON_CANVAS_CREATE
   | typeof NODE_PROP_UPDATE
+  | typeof NODE_LABEL_UPDATE
 
 export type GraphInteractionCallBack = (
   event: GraphInteraction,

src/neo4j-arc/graph-visualization/index.ts

@@ -36,6 +36,7 @@ export type { OverviewPaneProps } from './GraphVisualizer/DefaultPanelContent/De
 
 export {
   NODE_ON_CANVAS_CREATE,
-  NODE_PROP_UPDATE
+  NODE_PROP_UPDATE,
+  NODE_LABEL_UPDATE
 } from './GraphVisualizer/Graph/GraphEventHandlerModel'
 export type { GraphInteractionCallBack } from './GraphVisualizer/Graph/GraphEventHandlerModel'