From 340f39d177fa1cd814300c9dbbc1f88af944bb5b Mon Sep 17 00:00:00 2001 From: Jack Date: Mon, 23 Oct 2023 18:48:56 +0800 Subject: [PATCH] Support node label editing --- .../PropertiesPanelContent/DetailsPane.tsx | 2 + .../StyleableNodeLabel.tsx | 64 +++++++++++++------ .../VisualizationView/VisualizationView.tsx | 31 ++++++++- .../Graph/GraphEventHandlerModel.ts | 2 + src/neo4j-arc/graph-visualization/index.ts | 3 +- 5 files changed, 79 insertions(+), 23 deletions(-) diff --git a/src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/DetailsPane.tsx b/src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/DetailsPane.tsx index 1105f08978f..6b28348a9b9 100644 --- a/src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/DetailsPane.tsx +++ b/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} /> ) })} diff --git a/src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/StyleableNodeLabel.tsx b/src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/StyleableNodeLabel.tsx index a3f510ab537..ea3fce06304 100644 --- a/src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/StyleableNodeLabel.tsx +++ b/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 ( - - {`${selectedLabel.label}${count || count === 0 ? ` (${count})` : ''}`} - +
+ onGraphInteraction(NODE_LABEL_UPDATE, { + nodeId: nodeId, + oldLabel: labels[0], + newLabel: e.currentTarget.textContent + }) } > - - + + {`${selectedLabel.label}${ + count || count === 0 ? ` (${count})` : '' + }`} + + } + > + + +
) } diff --git a/src/browser/modules/Stream/CypherFrame/VisualizationView/VisualizationView.tsx b/src/browser/modules/Stream/CypherFrame/VisualizationView/VisualizationView.tsx index b58833e8845..18417afc061 100644 --- a/src/browser/modules/Stream/CypherFrame/VisualizationView/VisualizationView.tsx +++ b/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('') diff --git a/src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/GraphEventHandlerModel.ts b/src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/GraphEventHandlerModel.ts index 4b12309f7c7..d64aba685ef 100644 --- a/src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/GraphEventHandlerModel.ts +++ b/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, diff --git a/src/neo4j-arc/graph-visualization/index.ts b/src/neo4j-arc/graph-visualization/index.ts index 41b92a033d1..145b62675a7 100644 --- a/src/neo4j-arc/graph-visualization/index.ts +++ b/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'