stash

package.json

@@ -72,7 +72,8 @@
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
     "react-markdown": "^9.0.1",
-    "react-redux": "^9.0.4",
+    "react-redux": "^9.1.2",
+    "redux": "^5.0.1",
     "remark-gfm": "^4.0.0",
     "stream-browserify": "^3.0.0",
     "string_decoder": "^1.3.0",
@@ -86,6 +87,8 @@
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "@types/react-is": "^18.2.4",
+    "@types/react-redux": "^7.1.34",
+    "@types/redux": "^3.6.0",
     "typescript": "^5.3.3",
     "vite": "^5.0.0"
   }

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

@@ -21,6 +21,7 @@ import neo4j from 'neo4j-driver'
 import React, { useEffect, useRef, useState } from 'react'
 import { connect, useDispatch } from 'react-redux'
 import { Action, Dispatch } from 'redux'
+import { ThunkDispatch } from 'redux-thunk'
 
 import { GraphModel, GraphVisualizer } from 'neo4j-arc/graph-visualization'
 
@@ -29,7 +30,6 @@ import {
   BasicNode,
   BasicNodesAndRels,
   BasicRelationship,
-  deepEquals
 } from 'neo4j-arc/common'
 import bolt from 'services/bolt/bolt'
 import { NEO4J_BROWSER_USER_ACTION_QUERY } from 'services/bolt/txMetadata'
@@ -74,13 +74,17 @@ export type VisualizationProps = {
   disableWheelZoomInfoMessage: () => void
 }
 
-const executeCypherQuery = (query: string, params: any = {}, database?: string) => ({
-  type: ROUTED_CYPHER_READ_REQUEST,
-  query,
-  params,
-  queryType: NEO4J_BROWSER_USER_ACTION_QUERY,
-  useDb: database
-})
+const executeCypherQueryAsync = (query: string, params: any = {}, database?: string) => 
+  async (dispatch: ThunkDispatch<any, any, any>) => {
+    const action = {
+      type: ROUTED_CYPHER_READ_REQUEST,
+      query,
+      params,
+      queryType: NEO4J_BROWSER_USER_ACTION_QUERY,
+      useDb: database
+    }
+    return dispatch(action)
+  }
 
 export const Visualization: React.FC<VisualizationProps> = props => {
   const dispatch = useDispatch()
@@ -181,7 +185,7 @@ LIMIT ${maxNewNeighbours}`
         : `MATCH p=(a)--() WHERE id(a) = ${id} RETURN count(p) as allNeighboursCount`
 
     return new Promise((resolve, reject) => {
-      dispatch(executeCypherQuery(query, {}, props.result.summary.database.name))
+      executeCypherQueryAsync(query, {}, props.result.summary.database.name)(dispatch)
         .then((response: any) => {
           if (!response.success) {
             reject(new Error())
@@ -230,7 +234,7 @@ LIMIT ${maxNewNeighbours}`
     const query =
       'MATCH (a)-[r]->(b) WHERE id(a) IN $existingNodeIds AND id(b) IN $newNodeIds RETURN r;'
     return new Promise(resolve => {
-      dispatch(executeCypherQuery(query, { existingNodeIds, newNodeIds }, props.result.summary.database.name))
+      executeCypherQueryAsync(query, { existingNodeIds, newNodeIds }, props.result.summary.database.name)(dispatch)
         .then((response: any) => {
           if (!response.success) {
             console.error(response.error)
@@ -245,10 +249,6 @@ LIMIT ${maxNewNeighbours}`
             })
           }
         })
-        .catch((error: any) => {
-          console.error(error)
-          resolve({ nodes: [], relationships: [] })
-        })
     })
   }
 

src/shared/services/bolt/bolt.ts

@@ -35,7 +35,6 @@ import {
   Connection,
   connectionLost
 } from '../../../shared/modules/connections/connectionsDuck'
-import BoltWorkerModule from './boltWorker'
 import { backgroundTxMetadata } from './txMetadata'
 import { getGlobalDrivers } from './globalDrivers'
 import { BoltConnectionError } from 'services/exceptions'

src/types/neo4j-arc.d.ts

@@ -86,10 +86,32 @@ declare module 'neo4j-arc/cypher-language-support' {
 declare module 'neo4j-arc/graph-visualization' {
   export interface GraphModel {
     nodes(): any[]
-    // Add other methods as needed
   }
 
-  export interface GraphVisualizer {
-    // Add props interface as needed
+  export interface GraphVisualizerProps {
+    maxNeighbours: number
+    hasTruncatedFields: boolean
+    graphStyleData: any
+    updateStyle: (style: any) => void
+    getNeighbours: (id: string, currentNeighbourIds?: string[]) => Promise<any>
+    nodes: any[]
+    relationships: any[]
+    isFullscreen: boolean
+    assignVisElement: (v: any) => void
+    nodeLimitHit: boolean
+    getAutoCompleteCallback: (callback: any) => void
+    setGraph: (graph: GraphModel) => void
+    setNodePropertiesExpandedByDefault: (expanded: boolean) => void
+    nodePropertiesExpandedByDefault: boolean
+    wheelZoomRequiresModKey: boolean
+    wheelZoomInfoMessageEnabled: boolean
+    disableWheelZoomInfoMessage: () => void
+    DetailsPaneOverride: React.ComponentType<any>
+    OverviewPaneOverride: React.ComponentType<any>
+    useGeneratedDefaultColors: boolean
+    initialZoomToFit?: boolean
+    autocompleteRelationships?: boolean
   }
+
+  export const GraphVisualizer: React.FC<GraphVisualizerProps>
 }