Make node properties editable inspector panel

QubitPi · Oct 19, 2023 · 3bd5fc6 · 3bd5fc6
1 parent c25b0e8
commit 3bd5fc6
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 9 deletions.
diff --git a/...owser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/DetailsPane.tsx b/...owser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/DetailsPane.tsx
@@ -30,7 +30,8 @@ export const DETAILS_PANE_STEP_SIZE = 1000
 export function DetailsPane({
   vizItem,
   graphStyle,
-  nodeInspectorWidth
+  nodeInspectorWidth,
+  onGraphInteraction
 }: DetailsPaneProps): JSX.Element {
   const [maxPropertiesCount, setMaxPropertiesCount] = useState(
     DETAILS_PANE_STEP_SIZE
@@ -93,6 +94,7 @@ export function DetailsPane({
           moreStep={DETAILS_PANE_STEP_SIZE}
           totalNumItems={allItemProperties.length}
           nodeInspectorWidth={nodeInspectorWidth}
+          onGraphInteraction={onGraphInteraction}
         />
       </PaneBody>
     </PaneWrapper>

diff --git a/src/browser/modules/Stream/CypherFrame/VisualizationView/VisualizationView.tsx b/src/browser/modules/Stream/CypherFrame/VisualizationView/VisualizationView.tsx
@@ -28,7 +28,8 @@ import {
   GraphInteractionCallBack,
   GraphModel,
   GraphVisualizer,
-  NODE_ON_CANVAS_CREATE
+  NODE_ON_CANVAS_CREATE,
+  NODE_PROP_UPDATE
 } from 'neo4j-arc/graph-visualization'
 
 import { StyledVisContainer } from './VisualizationView.styled'
@@ -277,6 +278,33 @@ LIMIT ${maxNewNeighbours}`
   }
 
   onGraphInteraction: GraphInteractionCallBack = (event, properties) => {
+    if (event == NODE_PROP_UPDATE) {
+      if (properties == null) {
+        throw new Error('')
+      }
+
+      const nodeId = properties['nodeId']
+      const propKey = properties['propKey']
+      const propVal = properties['propVal']
+
+      const query = `MATCH (n) WHERE ID(n) = ${nodeId} SET n.${propKey} = "${propVal}"`
+      console.log(query)
+
+      this.props.bus.self(
+        CYPHER_REQUEST,
+        {
+          query,
+          params: { nodeId, propKey, propVal },
+          queryType: NEO4J_BROWSER_USER_ACTION_QUERY
+        },
+        (response: any) => {
+          if (!response.success) {
+            throw new Error(response.error)
+          }
+        }
+      )
+    }
+
     if (event == NODE_ON_CANVAS_CREATE) {
       if (properties == null) {
         throw new Error(

diff --git a/src/neo4j-arc/common/components/PropertiesTable/PropertiesTable.tsx b/src/neo4j-arc/common/components/PropertiesTable/PropertiesTable.tsx
@@ -31,17 +31,31 @@ import {
 import { ClipboardCopier } from '../ClipboardCopier'
 import { ShowMoreOrAll } from '../ShowMoreOrAll/ShowMoreOrAll'
 import { VizItemProperty } from 'neo4j-arc/common'
+import {
+  GraphInteractionCallBack,
+  NODE_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
+  propKey: string
   value: string
   width: number
   type: string
+  onGraphInteraction: GraphInteractionCallBack
 }
-function ExpandableValue({ value, width, type }: ExpandableValueProps) {
+function ExpandableValue({
+  nodeId,
+  propKey,
+  value,
+  width,
+  type,
+  onGraphInteraction
+}: ExpandableValueProps) {
   const [expanded, setExpanded] = useState(false)
 
   const maxLength =
@@ -56,7 +70,16 @@ function ExpandableValue({ value, width, type }: ExpandableValueProps) {
   valueShown += valueIsTrimmed ? ELLIPSIS : ''
 
   return (
-    <>
+    <div
+      contentEditable="true"
+      onInput={e =>
+        onGraphInteraction(NODE_PROP_UPDATE, {
+          nodeId: nodeId,
+          propKey: propKey,
+          propVal: e.currentTarget.textContent
+        })
+      }
+    >
       {type.startsWith('Array') && '['}
       <ClickableUrls text={valueShown} />
       {valueIsTrimmed && (
@@ -65,7 +88,7 @@ function ExpandableValue({ value, width, type }: ExpandableValueProps) {
         </StyledExpandValueButton>
       )}
       {type.startsWith('Array') && ']'}
-    </>
+    </div>
   )
 }
 
@@ -75,14 +98,23 @@ type PropertiesViewProps = {
   totalNumItems: number
   moreStep: number
   nodeInspectorWidth: number
+  onGraphInteraction?: GraphInteractionCallBack
 }
 export const PropertiesTable = ({
   visibleProperties,
   totalNumItems,
   onMoreClick,
   moreStep,
-  nodeInspectorWidth
+  nodeInspectorWidth,
+  onGraphInteraction
 }: PropertiesViewProps): JSX.Element => {
+  let id = ''
+  for (let i = 0; i < visibleProperties.length; i++) {
+    if (visibleProperties[i].key == '<id>') {
+      id = visibleProperties[i].value
+    }
+  }
+
   return (
     <>
       <StyledInlineList>
@@ -95,9 +127,12 @@ export const PropertiesTable = ({
                 </KeyCell>
                 <ValueCell>
                   <ExpandableValue
+                    nodeId={id}
+                    propKey={key}
                     value={value}
                     width={nodeInspectorWidth}
                     type={type}
+                    onGraphInteraction={onGraphInteraction ?? (() => undefined)}
                   />
                 </ValueCell>
                 <CopyCell>

diff --git a/src/neo4j-arc/graph-visualization/GraphVisualizer/DefaultPanelContent/DefaultDetailsPane.tsx b/src/neo4j-arc/graph-visualization/GraphVisualizer/DefaultPanelContent/DefaultDetailsPane.tsx
@@ -26,17 +26,20 @@ import { PaneBody, PaneHeader, PaneTitle, PaneWrapper } from './styled'
 import { NodeLabel } from './NodeLabel'
 import { RelType } from './RelType'
 import { GraphStyleModel } from '../../models/GraphStyle'
+import { GraphInteractionCallBack } from '../Graph/GraphEventHandlerModel'
 
 export const DETAILS_PANE_STEP_SIZE = 1000
 export type DetailsPaneProps = {
   vizItem: NodeItem | RelationshipItem
   graphStyle: GraphStyleModel
   nodeInspectorWidth: number
+  onGraphInteraction?: GraphInteractionCallBack
 }
 export function DefaultDetailsPane({
   vizItem,
   graphStyle,
-  nodeInspectorWidth
+  nodeInspectorWidth,
+  onGraphInteraction
 }: DetailsPaneProps): JSX.Element {
   const [maxPropertiesCount, setMaxPropertiesCount] = useState(
     DETAILS_PANE_STEP_SIZE
@@ -99,6 +102,7 @@ export function DefaultDetailsPane({
           moreStep={DETAILS_PANE_STEP_SIZE}
           totalNumItems={allItemProperties.length}
           nodeInspectorWidth={nodeInspectorWidth}
+          onGraphInteraction={onGraphInteraction}
         />
       </PaneBody>
     </PaneWrapper>

diff --git a/src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/GraphEventHandlerModel.ts b/src/neo4j-arc/graph-visualization/GraphVisualizer/Graph/GraphEventHandlerModel.ts
@@ -31,13 +31,15 @@ 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 type GraphInteraction =
   | 'NODE_EXPAND'
   | 'NODE_UNPINNED'
   | 'NODE_DISMISSED'
   | 'NODE_ON_CANVAS_CREATE'
   | typeof NODE_ON_CANVAS_CREATE
+  | typeof NODE_PROP_UPDATE
 
 export type GraphInteractionCallBack = (
   event: GraphInteraction,

diff --git a/src/neo4j-arc/graph-visualization/GraphVisualizer/GraphVisualizer.tsx b/src/neo4j-arc/graph-visualization/GraphVisualizer/GraphVisualizer.tsx
@@ -297,6 +297,7 @@ export class GraphVisualizer extends Component<
           }}
           DetailsPaneOverride={this.props.DetailsPaneOverride}
           OverviewPaneOverride={this.props.OverviewPaneOverride}
+          onGraphInteraction={this.props.onGraphInteraction}
         />
       </StyledFullSizeContainer>
     )

diff --git a/src/neo4j-arc/graph-visualization/GraphVisualizer/NodeInspectorPanel.tsx b/src/neo4j-arc/graph-visualization/GraphVisualizer/NodeInspectorPanel.tsx
@@ -38,6 +38,7 @@ import { Resizable } from 're-resizable'
 import { GraphStats } from '../utils/mapper'
 import { GraphStyleModel } from '../models/GraphStyle'
 import { VizItem } from '../types'
+import { GraphInteractionCallBack } from './Graph/GraphEventHandlerModel'
 
 interface NodeInspectorPanelProps {
   expanded: boolean
@@ -51,6 +52,7 @@ interface NodeInspectorPanelProps {
   width: number
   DetailsPaneOverride?: React.FC<DetailsPaneProps>
   OverviewPaneOverride?: React.FC<OverviewPaneProps>
+  onGraphInteraction?: GraphInteractionCallBack
 }
 
 export const defaultPanelWidth = (): number =>
@@ -68,7 +70,8 @@ export class NodeInspectorPanel extends Component<NodeInspectorPanelProps> {
       toggleExpanded,
       width,
       DetailsPaneOverride,
-      OverviewPaneOverride
+      OverviewPaneOverride,
+      onGraphInteraction
     } = this.props
     const relevantItems = ['node', 'relationship']
     const hoveringNodeOrRelationship =
@@ -120,6 +123,7 @@ export class NodeInspectorPanel extends Component<NodeInspectorPanelProps> {
                   vizItem={shownEl}
                   graphStyle={graphStyle}
                   nodeInspectorWidth={width}
+                  onGraphInteraction={onGraphInteraction}
                 />
               ) : (
                 <OverviewPane

diff --git a/src/neo4j-arc/graph-visualization/index.ts b/src/neo4j-arc/graph-visualization/index.ts
@@ -34,5 +34,8 @@ export { GraphVisualizer } from './GraphVisualizer/GraphVisualizer'
 export type { DetailsPaneProps } from './GraphVisualizer/DefaultPanelContent/DefaultDetailsPane'
 export type { OverviewPaneProps } from './GraphVisualizer/DefaultPanelContent/DefaultOverviewPane'
 
-export { NODE_ON_CANVAS_CREATE } from './GraphVisualizer/Graph/GraphEventHandlerModel'
+export {
+  NODE_ON_CANVAS_CREATE,
+  NODE_PROP_UPDATE
+} from './GraphVisualizer/Graph/GraphEventHandlerModel'
 export type { GraphInteractionCallBack } from './GraphVisualizer/Graph/GraphEventHandlerModel'