From 7213a788c094ad49155d766f6fd30c94641a1269 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A0=D0=B0=D1=81=D1=83=D0=BB?= Date: Wed, 15 Jan 2025 13:58:25 +0300 Subject: [PATCH 1/5] feat: merged normalized node with selected --- src/stores/useGraphStore/index.ts | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/src/stores/useGraphStore/index.ts b/src/stores/useGraphStore/index.ts index 7d66715b1..7b08b52fa 100644 --- a/src/stores/useGraphStore/index.ts +++ b/src/stores/useGraphStore/index.ts @@ -205,19 +205,25 @@ export const useGraphStore = create()((set, get) => ({ }) } + const { nodesNormalized } = useDataStore.getState() + const { selectedNode: stateSelectedNode, simulation, selectionPath } = get() if (stateSelectedNode?.ref_id !== selectedNode?.ref_id) { 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: { ...normalizedNode, ...selectedNodeWithCoordinates }, + disableCameraRotation: true, + showSelectionGraph: !!selectedNode, + selectionPath: [...selectionPath, selectedNodeWithCoordinates.ref_id], + }) + } } }, setCameraFocusTrigger: (cameraFocusTrigger) => set({ cameraFocusTrigger }), From c821b0e5d81a37d0f974fcd9ee70639cabf8c832 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A0=D0=B0=D1=81=D1=83=D0=BB?= Date: Wed, 15 Jan 2025 13:58:46 +0300 Subject: [PATCH 2/5] feat: merged normalized node with selected --- src/stores/useGraphStore/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stores/useGraphStore/index.ts b/src/stores/useGraphStore/index.ts index 7b08b52fa..1c5d63f05 100644 --- a/src/stores/useGraphStore/index.ts +++ b/src/stores/useGraphStore/index.ts @@ -218,7 +218,7 @@ export const useGraphStore = create()((set, get) => ({ set({ hoveredNode: null, - selectedNode: { ...normalizedNode, ...selectedNodeWithCoordinates }, + selectedNode: { ...selectedNodeWithCoordinates, ...normalizedNode }, disableCameraRotation: true, showSelectionGraph: !!selectedNode, selectionPath: [...selectionPath, selectedNodeWithCoordinates.ref_id], From ebcc3e89f9ae381f70f63a1c7c9e1fddf77185f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A0=D0=B0=D1=81=D1=83=D0=BB?= Date: Wed, 15 Jan 2025 14:58:16 +0300 Subject: [PATCH 3/5] feat: fix unit tests --- src/stores/useGraphStore/index.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/stores/useGraphStore/index.ts b/src/stores/useGraphStore/index.ts index 1c5d63f05..d812b8817 100644 --- a/src/stores/useGraphStore/index.ts +++ b/src/stores/useGraphStore/index.ts @@ -195,6 +195,8 @@ export const useGraphStore = create()((set, get) => ({ set({ selectionPath: [...selectionPath, id] }) }, setSelectedNode: (selectedNode) => { + const { nodesNormalized } = useDataStore.getState() || {} + if (!selectedNode) { set({ hoveredNode: null, @@ -205,8 +207,6 @@ export const useGraphStore = create()((set, get) => ({ }) } - const { nodesNormalized } = useDataStore.getState() - const { selectedNode: stateSelectedNode, simulation, selectionPath } = get() if (stateSelectedNode?.ref_id !== selectedNode?.ref_id) { @@ -214,7 +214,7 @@ export const useGraphStore = create()((set, get) => ({ simulation.nodes().find((i: NodeExtended) => i.ref_id === selectedNode?.ref_id) || null if (stateSelectedNode?.ref_id) { - const normalizedNode = nodesNormalized.get(stateSelectedNode?.ref_id) || {} + const normalizedNode = nodesNormalized?.get(stateSelectedNode?.ref_id) || {} set({ hoveredNode: null, From 3ac559be26a55f3140dbadbd726a67d9b13395c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A0=D0=B0=D1=81=D1=83=D0=BB?= Date: Wed, 15 Jan 2025 15:15:13 +0300 Subject: [PATCH 4/5] feat: fix unit tests --- .../App/SideBar/SidebarSubView/__tests__/index.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/App/SideBar/SidebarSubView/__tests__/index.tsx b/src/components/App/SideBar/SidebarSubView/__tests__/index.tsx index 3bdc4bdcf..9796bd151 100644 --- 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 { useSelectedNode } from '../../../../../stores/useGraphStore' import { appTheme } from '../../../Providers' jest.mock('reactflow/dist/style.css', () => null) @@ -57,7 +58,12 @@ const mockSelectedNode = { describe('Test SideBarSubView', () => { beforeEach(() => { jest.clearAllMocks() - useDataStoreMock.mockReturnValue({ setSelectedNode: jest.fn(), setTeachMe: jest.fn(), showTeachMe: false }) + useDataStoreMock.mockReturnValue({ + setSelectedNode: jest.fn(), + setTeachMe: jest.fn(), + showTeachMe: false, + nodesNormalized: new Map(), + }) useSelectedNodeMock.mockReturnValue(mockSelectedNode) useAppStoreMock.mockReturnValue({ setSidebarOpen: jest.fn() }) }) From e6347026a39ff332c9d35368c72e7f343b783d84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A0=D0=B0=D1=81=D1=83=D0=BB?= Date: Wed, 15 Jan 2025 19:45:53 +0300 Subject: [PATCH 5/5] feat: update unit tests --- .../SidebarSubView/__tests__/index.tsx | 23 +++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/src/components/App/SideBar/SidebarSubView/__tests__/index.tsx b/src/components/App/SideBar/SidebarSubView/__tests__/index.tsx index 9796bd151..ee278fb71 100644 --- a/src/components/App/SideBar/SidebarSubView/__tests__/index.tsx +++ b/src/components/App/SideBar/SidebarSubView/__tests__/index.tsx @@ -8,7 +8,7 @@ import { ThemeProvider as StyleThemeProvider } from 'styled-components' import { SideBarSubView } from '..' import { useAppStore } from '../../../../../stores/useAppStore' import { useDataStore } from '../../../../../stores/useDataStore' -import { useSelectedNode } from '../../../../../stores/useGraphStore' +import { useGraphStore, useSelectedNode } from '../../../../../stores/useGraphStore' import { appTheme } from '../../../Providers' jest.mock('reactflow/dist/style.css', () => null) @@ -32,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(), })) @@ -42,6 +46,7 @@ jest.mock('~/stores/useAppStore', () => ({ const useDataStoreMock = useDataStore as jest.MockedFunction const useSelectedNodeMock = useSelectedNode as jest.MockedFunction const useAppStoreMock = useAppStore as jest.MockedFunction +const useGraphStoreMock = useGraphStore as jest.MockedFunction const mockSelectedNode = { date: moment().unix(), @@ -58,12 +63,8 @@ const mockSelectedNode = { describe('Test SideBarSubView', () => { beforeEach(() => { jest.clearAllMocks() - useDataStoreMock.mockReturnValue({ - setSelectedNode: jest.fn(), - setTeachMe: jest.fn(), - showTeachMe: false, - nodesNormalized: new Map(), - }) + useDataStoreMock.mockReturnValue({ setTeachMe: jest.fn(), showTeachMe: false }) + useGraphStoreMock.mockReturnValue({ setSelectedNode: jest.fn() }) useSelectedNodeMock.mockReturnValue(mockSelectedNode) useAppStoreMock.mockReturnValue({ setSidebarOpen: jest.fn() }) }) @@ -80,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( @@ -155,6 +159,7 @@ describe('Test SideBarSubView', () => { await waitFor(() => { expect(useAppStoreMock).toHaveBeenCalled() expect(useDataStoreMock).toHaveBeenCalled() + expect(useGraphStoreMock).toHaveBeenCalled() expect(useSelectedNodeMock).toHaveBeenCalled() }) })()