Merge pull request #2614 from stakwork/feature/selected-node-update

Feature/selected node update
stakwork · Jan 15, 2025 · ba87ca1 · ba87ca1
2 parents 8ef1f7c + e634702
commit ba87ca1
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 11 deletions.
diff --git a/src/components/App/SideBar/SidebarSubView/__tests__/index.tsx b/src/components/App/SideBar/SidebarSubView/__tests__/index.tsx
@@ -7,7 +7,8 @@ import React from 'react'
 import { ThemeProvider as StyleThemeProvider } from 'styled-components'
 import { SideBarSubView } from '..'
 import { useAppStore } from '../../../../../stores/useAppStore'
-import { useDataStore, useSelectedNode } from '../../../../../stores/useDataStore'
+import { useDataStore } from '../../../../../stores/useDataStore'
+import { useGraphStore, useSelectedNode } from '../../../../../stores/useGraphStore'
 import { appTheme } from '../../../Providers'
 
 jest.mock('reactflow/dist/style.css', () => null)
@@ -31,6 +32,10 @@ jest.mock('react-hook-form', () => ({
 
 jest.mock('~/stores/useDataStore', () => ({
   useDataStore: jest.fn(),
+}))
+
+jest.mock('~/stores/useGraphStore', () => ({
+  useGraphStore: jest.fn(),
   useSelectedNode: jest.fn(),
 }))
 
@@ -41,6 +46,7 @@ jest.mock('~/stores/useAppStore', () => ({
 const useDataStoreMock = useDataStore as jest.MockedFunction<typeof useDataStore>
 const useSelectedNodeMock = useSelectedNode as jest.MockedFunction<typeof useSelectedNode>
 const useAppStoreMock = useAppStore as jest.MockedFunction<typeof useAppStore>
+const useGraphStoreMock = useGraphStore as jest.MockedFunction<typeof useGraphStore>
 
 const mockSelectedNode = {
   date: moment().unix(),
@@ -57,7 +63,8 @@ const mockSelectedNode = {
 describe('Test SideBarSubView', () => {
   beforeEach(() => {
     jest.clearAllMocks()
-    useDataStoreMock.mockReturnValue({ setSelectedNode: jest.fn(), setTeachMe: jest.fn(), showTeachMe: false })
+    useDataStoreMock.mockReturnValue({ setTeachMe: jest.fn(), showTeachMe: false })
+    useGraphStoreMock.mockReturnValue({ setSelectedNode: jest.fn() })
     useSelectedNodeMock.mockReturnValue(mockSelectedNode)
     useAppStoreMock.mockReturnValue({ setSidebarOpen: jest.fn() })
   })
@@ -74,15 +81,18 @@ describe('Test SideBarSubView', () => {
     expect(getByTestId('sidebar-sub-view')).toHaveStyle({ visibility: 'hidden' })
   })
 
-  it('asserts that close button resets the selected node and hide the teach me', () => {
+  it('asserts that close button resets the selected node and hides the teach me', () => {
     const [setSelectedNodeMock, setTeachMeMock] = new Array(2).fill(jest.fn())
 
     useDataStoreMock.mockReturnValue({
-      setSelectedNode: setSelectedNodeMock,
       setTeachMe: setTeachMeMock,
       showTeachMe: false,
     })
 
+    useGraphStoreMock.mockReturnValue({
+      setSelectedNode: setSelectedNodeMock,
+    })
+
     const { getByTestId } = render(
       <ThemeProvider theme={appTheme}>
         <StyleThemeProvider theme={appTheme}>
@@ -149,6 +159,7 @@ describe('Test SideBarSubView', () => {
       await waitFor(() => {
         expect(useAppStoreMock).toHaveBeenCalled()
         expect(useDataStoreMock).toHaveBeenCalled()
+        expect(useGraphStoreMock).toHaveBeenCalled()
         expect(useSelectedNodeMock).toHaveBeenCalled()
       })
     })()

diff --git a/src/stores/useGraphStore/index.ts b/src/stores/useGraphStore/index.ts
@@ -195,6 +195,8 @@ export const useGraphStore = create<GraphStore>()((set, get) => ({
     set({ selectionPath: [...selectionPath, id] })
   },
   setSelectedNode: (selectedNode) => {
+    const { nodesNormalized } = useDataStore.getState() || {}
+
     if (!selectedNode) {
       set({
         hoveredNode: null,
@@ -211,13 +213,17 @@ export const useGraphStore = create<GraphStore>()((set, get) => ({
       const selectedNodeWithCoordinates =
         simulation.nodes().find((i: NodeExtended) => i.ref_id === selectedNode?.ref_id) || null
 
-      set({
-        hoveredNode: null,
-        selectedNode: selectedNodeWithCoordinates,
-        disableCameraRotation: true,
-        showSelectionGraph: !!selectedNode,
-        selectionPath: [...selectionPath, selectedNodeWithCoordinates.ref_id],
-      })
+      if (stateSelectedNode?.ref_id) {
+        const normalizedNode = nodesNormalized?.get(stateSelectedNode?.ref_id) || {}
+
+        set({
+          hoveredNode: null,
+          selectedNode: { ...selectedNodeWithCoordinates, ...normalizedNode },
+          disableCameraRotation: true,
+          showSelectionGraph: !!selectedNode,
+          selectionPath: [...selectionPath, selectedNodeWithCoordinates.ref_id],
+        })
+      }
     }
   },
   setCameraFocusTrigger: (cameraFocusTrigger) => set({ cameraFocusTrigger }),