flock-core 0.5.0b50__py3-none-any.whl → 0.5.0b51__py3-none-any.whl

flock/frontend/src/hooks/useModulePersistence.test.ts

@@ -0,0 +1,442 @@
+import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest';
+import { renderHook, waitFor } from '@testing-library/react';
+import { useModulePersistence } from './useModulePersistence';
+import { useModuleStore } from '../store/moduleStore';
+import { indexedDBService } from '../services/indexeddb';
+import type { ModuleInstance } from '../types/modules';
+
+// Mock IndexedDB service
+vi.mock('../services/indexeddb', () => ({
+  indexedDBService: {
+    getAllModuleInstances: vi.fn(),
+    saveModuleInstance: vi.fn(),
+    deleteModuleInstance: vi.fn(),
+  },
+}));
+
+describe('useModulePersistence', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Reset module store
+    useModuleStore.setState({ instances: new Map() });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  describe('Module Loading', () => {
+    it('should load saved module instances on mount', async () => {
+      const savedInstances = [
+        {
+          instance_id: 'module-1',
+          type: 'eventLog',
+          position: { x: 100, y: 200 },
+          size: { width: 600, height: 400 },
+          visible: true,
+          created_at: '2025-10-03T00:00:00Z',
+          updated_at: '2025-10-03T00:00:00Z',
+        },
+        {
+          instance_id: 'module-2',
+          type: 'eventLog',
+          position: { x: 300, y: 400 },
+          size: { width: 800, height: 600 },
+          visible: true,
+          created_at: '2025-10-03T00:00:00Z',
+          updated_at: '2025-10-03T00:00:00Z',
+        },
+      ];
+
+      vi.mocked(indexedDBService.getAllModuleInstances).mockResolvedValue(savedInstances);
+
+      renderHook(() => useModulePersistence());
+
+      await waitFor(() => {
+        const instances = useModuleStore.getState().instances;
+        expect(instances.size).toBe(2);
+        expect(instances.get('module-1')).toEqual({
+          id: 'module-1',
+          type: 'eventLog',
+          position: { x: 100, y: 200 },
+          size: { width: 600, height: 400 },
+          visible: true,
+        });
+        expect(instances.get('module-2')).toEqual({
+          id: 'module-2',
+          type: 'eventLog',
+          position: { x: 300, y: 400 },
+          size: { width: 800, height: 600 },
+          visible: true,
+        });
+      });
+    });
+
+    it('should handle empty module instances on mount', async () => {
+      vi.mocked(indexedDBService.getAllModuleInstances).mockResolvedValue([]);
+
+      renderHook(() => useModulePersistence());
+
+      await waitFor(() => {
+        expect(indexedDBService.getAllModuleInstances).toHaveBeenCalledOnce();
+      });
+
+      const instances = useModuleStore.getState().instances;
+      expect(instances.size).toBe(0);
+    });
+
+    it('should handle errors when loading instances', async () => {
+      const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      vi.mocked(indexedDBService.getAllModuleInstances).mockRejectedValue(
+        new Error('Database error')
+      );
+
+      renderHook(() => useModulePersistence());
+
+      await waitFor(() => {
+        expect(consoleErrorSpy).toHaveBeenCalledWith(
+          '[ModulePersistence] Failed to load module instances:',
+          expect.any(Error)
+        );
+      });
+
+      consoleErrorSpy.mockRestore();
+    });
+  });
+
+  describe('Module Saving', () => {
+    it('should save new module instance when added', async () => {
+      vi.mocked(indexedDBService.getAllModuleInstances).mockResolvedValue([]);
+
+      renderHook(() => useModulePersistence());
+
+      await waitFor(() => {
+        expect(indexedDBService.getAllModuleInstances).toHaveBeenCalled();
+      });
+
+      const newInstance: ModuleInstance = {
+        id: 'new-module',
+        type: 'eventLog',
+        position: { x: 150, y: 250 },
+        size: { width: 700, height: 500 },
+        visible: true,
+      };
+
+      useModuleStore.getState().addModule(newInstance);
+
+      // Wait for debounced save (300ms + buffer)
+      await new Promise((resolve) => setTimeout(resolve, 400));
+
+      await waitFor(() => {
+        expect(indexedDBService.saveModuleInstance).toHaveBeenCalledWith(
+          expect.objectContaining({
+            instance_id: 'new-module',
+            type: 'eventLog',
+            position: { x: 150, y: 250 },
+            size: { width: 700, height: 500 },
+            visible: true,
+          })
+        );
+      });
+    });
+
+    it('should debounce saves when position changes rapidly', async () => {
+      vi.mocked(indexedDBService.getAllModuleInstances).mockResolvedValue([]);
+
+      renderHook(() => useModulePersistence());
+
+      await waitFor(() => {
+        expect(indexedDBService.getAllModuleInstances).toHaveBeenCalled();
+      });
+
+      const instance: ModuleInstance = {
+        id: 'drag-module',
+        type: 'eventLog',
+        position: { x: 100, y: 100 },
+        size: { width: 600, height: 400 },
+        visible: true,
+      };
+
+      useModuleStore.getState().addModule(instance);
+
+      // Wait for initial add to save
+      await new Promise((resolve) => setTimeout(resolve, 400));
+
+      // Rapidly update position (simulating drag)
+      useModuleStore.getState().updateModule('drag-module', { position: { x: 110, y: 110 } });
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      useModuleStore.getState().updateModule('drag-module', { position: { x: 120, y: 120 } });
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      useModuleStore.getState().updateModule('drag-module', { position: { x: 130, y: 130 } });
+
+      // Wait for debounced save
+      await new Promise((resolve) => setTimeout(resolve, 400));
+
+      await waitFor(() => {
+        // Should have saved at least twice: initial add + final position
+        expect(indexedDBService.saveModuleInstance).toHaveBeenCalled();
+        expect(indexedDBService.saveModuleInstance).toHaveBeenLastCalledWith(
+          expect.objectContaining({
+            position: { x: 130, y: 130 },
+          })
+        );
+      });
+    });
+
+    it('should save when size changes', async () => {
+      vi.mocked(indexedDBService.getAllModuleInstances).mockResolvedValue([]);
+
+      renderHook(() => useModulePersistence());
+
+      await waitFor(() => {
+        expect(indexedDBService.getAllModuleInstances).toHaveBeenCalled();
+      });
+
+      const instance: ModuleInstance = {
+        id: 'resize-module',
+        type: 'eventLog',
+        position: { x: 100, y: 100 },
+        size: { width: 600, height: 400 },
+        visible: true,
+      };
+
+      useModuleStore.getState().addModule(instance);
+      await new Promise((resolve) => setTimeout(resolve, 400));
+
+      // Update size
+      useModuleStore.getState().updateModule('resize-module', {
+        size: { width: 800, height: 600 },
+      });
+
+      await new Promise((resolve) => setTimeout(resolve, 400));
+
+      await waitFor(() => {
+        expect(indexedDBService.saveModuleInstance).toHaveBeenCalledWith(
+          expect.objectContaining({
+            size: { width: 800, height: 600 },
+          })
+        );
+      });
+    });
+
+    it('should save when visibility changes', async () => {
+      vi.mocked(indexedDBService.getAllModuleInstances).mockResolvedValue([]);
+
+      renderHook(() => useModulePersistence());
+
+      await waitFor(() => {
+        expect(indexedDBService.getAllModuleInstances).toHaveBeenCalled();
+      });
+
+      const instance: ModuleInstance = {
+        id: 'toggle-module',
+        type: 'eventLog',
+        position: { x: 100, y: 100 },
+        size: { width: 600, height: 400 },
+        visible: true,
+      };
+
+      useModuleStore.getState().addModule(instance);
+      await new Promise((resolve) => setTimeout(resolve, 400));
+
+      // Toggle visibility
+      useModuleStore.getState().toggleVisibility('toggle-module');
+
+      await new Promise((resolve) => setTimeout(resolve, 400));
+
+      await waitFor(() => {
+        expect(indexedDBService.saveModuleInstance).toHaveBeenCalledWith(
+          expect.objectContaining({
+            visible: false,
+          })
+        );
+      });
+    });
+
+    it('should handle save errors gracefully', async () => {
+      const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      vi.mocked(indexedDBService.getAllModuleInstances).mockResolvedValue([]);
+      vi.mocked(indexedDBService.saveModuleInstance).mockRejectedValue(
+        new Error('Save failed')
+      );
+
+      renderHook(() => useModulePersistence());
+
+      await waitFor(() => {
+        expect(indexedDBService.getAllModuleInstances).toHaveBeenCalled();
+      });
+
+      const instance: ModuleInstance = {
+        id: 'error-module',
+        type: 'eventLog',
+        position: { x: 100, y: 100 },
+        size: { width: 600, height: 400 },
+        visible: true,
+      };
+
+      useModuleStore.getState().addModule(instance);
+      await new Promise((resolve) => setTimeout(resolve, 400));
+
+      await waitFor(() => {
+        expect(consoleErrorSpy).toHaveBeenCalledWith(
+          expect.stringContaining('Failed to save instance'),
+          expect.any(Error)
+        );
+      });
+
+      consoleErrorSpy.mockRestore();
+    });
+  });
+
+  describe('Module Deletion', () => {
+    it('should delete module instance when removed', async () => {
+      vi.mocked(indexedDBService.getAllModuleInstances).mockResolvedValue([]);
+
+      renderHook(() => useModulePersistence());
+
+      await waitFor(() => {
+        expect(indexedDBService.getAllModuleInstances).toHaveBeenCalled();
+      });
+
+      const instance: ModuleInstance = {
+        id: 'delete-module',
+        type: 'eventLog',
+        position: { x: 100, y: 100 },
+        size: { width: 600, height: 400 },
+        visible: true,
+      };
+
+      useModuleStore.getState().addModule(instance);
+      await new Promise((resolve) => setTimeout(resolve, 400));
+
+      // Remove the instance
+      useModuleStore.getState().removeModule('delete-module');
+
+      await waitFor(() => {
+        expect(indexedDBService.deleteModuleInstance).toHaveBeenCalledWith('delete-module');
+      });
+    });
+
+    it('should cancel pending save when module is deleted', async () => {
+      vi.mocked(indexedDBService.getAllModuleInstances).mockResolvedValue([]);
+
+      renderHook(() => useModulePersistence());
+
+      await waitFor(() => {
+        expect(indexedDBService.getAllModuleInstances).toHaveBeenCalled();
+      });
+
+      const instance: ModuleInstance = {
+        id: 'cancel-module',
+        type: 'eventLog',
+        position: { x: 100, y: 100 },
+        size: { width: 600, height: 400 },
+        visible: true,
+      };
+
+      useModuleStore.getState().addModule(instance);
+
+      // Wait for initial add to save
+      await new Promise((resolve) => setTimeout(resolve, 400));
+
+      const initialCallCount = vi.mocked(indexedDBService.saveModuleInstance).mock.calls.length;
+
+      // Update position (triggers debounced save)
+      useModuleStore.getState().updateModule('cancel-module', { position: { x: 200, y: 200 } });
+
+      // Remove before debounce timer fires (100ms < 300ms debounce)
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      useModuleStore.getState().removeModule('cancel-module');
+
+      // Wait for potential saves
+      await new Promise((resolve) => setTimeout(resolve, 400));
+
+      await waitFor(() => {
+        expect(indexedDBService.deleteModuleInstance).toHaveBeenCalledWith('cancel-module');
+      });
+
+      // save should not have been called again after the update (timer was cancelled)
+      const finalCallCount = vi.mocked(indexedDBService.saveModuleInstance).mock.calls.length;
+      expect(finalCallCount).toBe(initialCallCount);
+    });
+
+    it('should handle delete errors gracefully', async () => {
+      const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      vi.mocked(indexedDBService.getAllModuleInstances).mockResolvedValue([]);
+      vi.mocked(indexedDBService.deleteModuleInstance).mockRejectedValue(
+        new Error('Delete failed')
+      );
+
+      renderHook(() => useModulePersistence());
+
+      await waitFor(() => {
+        expect(indexedDBService.getAllModuleInstances).toHaveBeenCalled();
+      });
+
+      const instance: ModuleInstance = {
+        id: 'error-delete-module',
+        type: 'eventLog',
+        position: { x: 100, y: 100 },
+        size: { width: 600, height: 400 },
+        visible: true,
+      };
+
+      useModuleStore.getState().addModule(instance);
+      await new Promise((resolve) => setTimeout(resolve, 400));
+
+      useModuleStore.getState().removeModule('error-delete-module');
+
+      await waitFor(() => {
+        expect(consoleErrorSpy).toHaveBeenCalledWith(
+          expect.stringContaining('Failed to delete instance'),
+          expect.any(Error)
+        );
+      });
+
+      consoleErrorSpy.mockRestore();
+    });
+  });
+
+  describe('Timer Cleanup', () => {
+    it('should cleanup timers on unmount', async () => {
+      vi.mocked(indexedDBService.getAllModuleInstances).mockResolvedValue([]);
+
+      const { unmount } = renderHook(() => useModulePersistence());
+
+      await waitFor(() => {
+        expect(indexedDBService.getAllModuleInstances).toHaveBeenCalled();
+      });
+
+      const instance: ModuleInstance = {
+        id: 'cleanup-module',
+        type: 'eventLog',
+        position: { x: 100, y: 100 },
+        size: { width: 600, height: 400 },
+        visible: true,
+      };
+
+      useModuleStore.getState().addModule(instance);
+
+      // Wait for initial add to potentially save
+      await new Promise((resolve) => setTimeout(resolve, 400));
+
+      const callCountBeforeUpdate = vi.mocked(indexedDBService.saveModuleInstance).mock.calls.length;
+
+      // Update position (triggers debounced save)
+      useModuleStore.getState().updateModule('cleanup-module', { position: { x: 200, y: 200 } });
+
+      // Unmount before timer fires (100ms < 300ms debounce)
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      unmount();
+
+      // Wait for potential timer - save should not be called after unmount
+      await new Promise((resolve) => setTimeout(resolve, 400));
+
+      // The update should NOT have saved because we unmounted before debounce completed
+      const finalCallCount = vi.mocked(indexedDBService.saveModuleInstance).mock.calls.length;
+      expect(finalCallCount).toBe(callCountBeforeUpdate);
+    });
+  });
+});

flock/frontend/src/hooks/useModulePersistence.ts

@@ -0,0 +1,154 @@
+import { useEffect, useRef, useCallback } from 'react';
+import { useModuleStore } from '../store/moduleStore';
+import { indexedDBService } from '../services/indexeddb';
+import type { ModuleInstance } from '../types/modules';
+
+/**
+ * Hook to persist module instances to IndexedDB
+ *
+ * Features:
+ * - Loads all module instances on mount
+ * - Saves instances when added/updated (with debouncing for drag/resize)
+ * - Deletes instances when removed
+ * - Debounce: 300ms (same as node position persistence)
+ */
+export const useModulePersistence = () => {
+  const instances = useModuleStore((state) => state.instances);
+  const addModule = useModuleStore((state) => state.addModule);
+
+  // Track previous instances to detect changes
+  const previousInstancesRef = useRef<Map<string, ModuleInstance>>(new Map());
+
+  // Debounce timer for saves
+  const saveTimerRef = useRef<{ [key: string]: number }>({});
+
+  // Load module instances on mount
+  useEffect(() => {
+    const loadModuleInstances = async () => {
+      try {
+        const savedInstances = await indexedDBService.getAllModuleInstances();
+
+        // Restore each module instance to the store
+        savedInstances.forEach((record) => {
+          const instance: ModuleInstance = {
+            id: record.instance_id,
+            type: record.type,
+            position: record.position,
+            size: record.size,
+            visible: record.visible,
+          };
+          addModule(instance);
+        });
+
+        console.log(`[ModulePersistence] Restored ${savedInstances.length} module instances`);
+      } catch (error) {
+        console.error('[ModulePersistence] Failed to load module instances:', error);
+      }
+    };
+
+    loadModuleInstances();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Only run on mount
+
+  // Save module instances when they change (debounced)
+  const saveModuleInstance = useCallback(async (instance: ModuleInstance) => {
+    // Clear existing timer for this instance
+    if (saveTimerRef.current[instance.id]) {
+      clearTimeout(saveTimerRef.current[instance.id]);
+    }
+
+    // Debounce: wait 300ms before saving (handles rapid drag/resize updates)
+    saveTimerRef.current[instance.id] = setTimeout(async () => {
+      try {
+        const now = new Date().toISOString();
+        const record = {
+          instance_id: instance.id,
+          type: instance.type,
+          position: instance.position,
+          size: instance.size,
+          visible: instance.visible,
+          created_at: now, // Will be overwritten if updating existing
+          updated_at: now,
+        };
+
+        await indexedDBService.saveModuleInstance(record);
+        console.log(`[ModulePersistence] Saved instance: ${instance.id}`);
+      } catch (error) {
+        console.error(`[ModulePersistence] Failed to save instance ${instance.id}:`, error);
+      }
+
+      delete saveTimerRef.current[instance.id];
+    }, 300);
+  }, []);
+
+  // Delete module instance from IndexedDB
+  const deleteModuleInstance = useCallback(async (instanceId: string) => {
+    // Clear any pending save timer
+    if (saveTimerRef.current[instanceId]) {
+      clearTimeout(saveTimerRef.current[instanceId]);
+      delete saveTimerRef.current[instanceId];
+    }
+
+    try {
+      await indexedDBService.deleteModuleInstance(instanceId);
+      console.log(`[ModulePersistence] Deleted instance: ${instanceId}`);
+    } catch (error) {
+      console.error(`[ModulePersistence] Failed to delete instance ${instanceId}:`, error);
+    }
+  }, []);
+
+  // Detect changes in module instances
+  useEffect(() => {
+    const currentIds = new Set(instances.keys());
+    const previousIds = new Set(previousInstancesRef.current.keys());
+
+    // Detect added instances
+    currentIds.forEach((id) => {
+      if (!previousIds.has(id)) {
+        const instance = instances.get(id);
+        if (instance) {
+          console.log(`[ModulePersistence] Detected new instance: ${id}`);
+          saveModuleInstance(instance);
+        }
+      }
+    });
+
+    // Detect updated instances
+    instances.forEach((instance, id) => {
+      const previous = previousInstancesRef.current.get(id);
+      if (previous) {
+        // Check if position, size, or visibility changed
+        const positionChanged =
+          previous.position.x !== instance.position.x ||
+          previous.position.y !== instance.position.y;
+        const sizeChanged =
+          previous.size.width !== instance.size.width ||
+          previous.size.height !== instance.size.height;
+        const visibilityChanged = previous.visible !== instance.visible;
+
+        if (positionChanged || sizeChanged || visibilityChanged) {
+          console.log(`[ModulePersistence] Detected update to instance: ${id}`);
+          saveModuleInstance(instance);
+        }
+      }
+    });
+
+    // Detect removed instances
+    previousIds.forEach((id) => {
+      if (!currentIds.has(id)) {
+        console.log(`[ModulePersistence] Detected removed instance: ${id}`);
+        deleteModuleInstance(id);
+      }
+    });
+
+    // Update ref for next comparison
+    previousInstancesRef.current = new Map(instances);
+  }, [instances, saveModuleInstance, deleteModuleInstance]);
+
+  // Cleanup timers on unmount
+  useEffect(() => {
+    return () => {
+      Object.values(saveTimerRef.current).forEach(clearTimeout);
+    };
+  }, []);
+};