flock-core 0.4.542__py3-none-any.whl → 0.5.0__py3-none-any.whl

flock/frontend/src/store/filterStore.test.ts

@@ -0,0 +1,250 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { useFilterStore } from './filterStore';
+import type { FilterFacets, FilterSnapshot } from '../types/filters';
+import { useGraphStore } from './graphStore';
+
+// Mock graphStore to test applyFilters integration
+vi.mock('./graphStore', () => ({
+  useGraphStore: {
+    getState: vi.fn(() => ({
+      refreshCurrentView: vi.fn(),
+      viewMode: 'agent',
+    })),
+  },
+}));
+
+describe('filterStore', () => {
+  beforeEach(() => {
+    useFilterStore.setState({
+      correlationId: null,
+      timeRange: { preset: 'last10min' },
+      selectedArtifactTypes: [],
+      selectedProducers: [],
+      selectedTags: [],
+      selectedVisibility: [],
+      availableCorrelationIds: [],
+      availableArtifactTypes: [],
+      availableProducers: [],
+      availableTags: [],
+      availableVisibility: [],
+      summary: null,
+      savedFilters: [],
+    });
+  });
+
+  describe('initial state', () => {
+    it('should have defaults set', () => {
+      const state = useFilterStore.getState();
+      expect(state.correlationId).toBeNull();
+      expect(state.timeRange).toEqual({ preset: 'last10min' });
+      expect(state.selectedArtifactTypes).toEqual([]);
+      expect(state.availableCorrelationIds).toEqual([]);
+    });
+  });
+
+  describe('mutators', () => {
+    it('should update correlation id and time range', () => {
+      const store = useFilterStore.getState();
+      store.setCorrelationId('abc');
+      store.setTimeRange({ preset: 'last5min' });
+      expect(useFilterStore.getState().correlationId).toBe('abc');
+      expect(useFilterStore.getState().timeRange).toEqual({ preset: 'last5min' });
+    });
+
+    it('should update multi-select filters', () => {
+      const store = useFilterStore.getState();
+      store.setArtifactTypes(['TypeB', 'TypeA']);
+      store.setProducers(['b', 'a']);
+      store.setTags(['beta']);
+      store.setVisibility(['Private', 'Public']);
+
+      const state = useFilterStore.getState();
+      expect(state.selectedArtifactTypes).toEqual(['TypeA', 'TypeB']);
+      expect(state.selectedProducers).toEqual(['a', 'b']);
+      expect(state.selectedTags).toEqual(['beta']);
+      expect(state.selectedVisibility).toEqual(['Private', 'Public']);
+    });
+
+    it('should clear filters to defaults', () => {
+      const store = useFilterStore.getState();
+      store.setCorrelationId('abc');
+      store.setArtifactTypes(['TypeA']);
+      store.setTags(['x']);
+      store.clearFilters();
+
+      const state = useFilterStore.getState();
+      expect(state.correlationId).toBeNull();
+      expect(state.selectedArtifactTypes).toEqual([]);
+      expect(state.selectedTags).toEqual([]);
+      expect(state.timeRange).toEqual({ preset: 'last10min' });
+    });
+
+    it('should update available correlation ids', () => {
+      const now = Date.now();
+      useFilterStore
+        .getState()
+        .updateAvailableCorrelationIds([
+          { correlation_id: 'old', first_seen: now - 10_000, artifact_count: 1, run_count: 1 },
+          { correlation_id: 'new', first_seen: now - 1_000, artifact_count: 2, run_count: 2 },
+        ]);
+      const state = useFilterStore.getState();
+      expect(state.availableCorrelationIds.map((m) => m.correlation_id)).toEqual(['new', 'old']);
+    });
+
+    it('should update available facets', () => {
+      const facets: FilterFacets = {
+        artifactTypes: ['TypeB', 'TypeA'],
+        producers: ['b', 'a'],
+        tags: ['beta', 'alpha'],
+        visibilities: ['Private', 'Public'],
+      };
+      useFilterStore.getState().updateAvailableFacets(facets);
+      const state = useFilterStore.getState();
+      expect(state.availableArtifactTypes).toEqual(['TypeA', 'TypeB']);
+      expect(state.availableProducers).toEqual(['a', 'b']);
+      expect(state.availableTags).toEqual(['alpha', 'beta']);
+      expect(state.availableVisibility).toEqual(['Private', 'Public']);
+    });
+  });
+
+  describe('active filters', () => {
+    it('should return active filters across selections', () => {
+      const store = useFilterStore.getState();
+      store.setCorrelationId('abc');
+      store.setTimeRange({ preset: 'last5min' });
+      store.setArtifactTypes(['TypeA']);
+      store.setProducers(['agent1']);
+      store.setTags(['urgent']);
+      store.setVisibility(['Public']);
+
+      const active = store.getActiveFilters();
+      expect(active).toHaveLength(6);
+      expect(active.map((f) => f.type)).toContain('visibility');
+    });
+
+    it('should remove individual filters', () => {
+      const store = useFilterStore.getState();
+      store.setArtifactTypes(['TypeA', 'TypeB']);
+
+      const [firstFilter] = store.getActiveFilters().filter((f) => f.type === 'artifactTypes');
+      expect(firstFilter?.value).toBe('TypeA');
+
+      useFilterStore.getState().removeFilter(firstFilter!);
+      expect(useFilterStore.getState().selectedArtifactTypes).toEqual(['TypeB']);
+    });
+  });
+
+  describe('snapshots', () => {
+    it('should export and reapply filter snapshots', () => {
+      const store = useFilterStore.getState();
+      store.setCorrelationId('snapshot');
+      store.setArtifactTypes(['TypeA']);
+
+      const snapshot = store.getFilterSnapshot();
+      useFilterStore.getState().clearFilters();
+      useFilterStore.getState().applyFilterSnapshot(snapshot);
+
+      const state = useFilterStore.getState();
+      expect(state.correlationId).toBe('snapshot');
+      expect(state.selectedArtifactTypes).toEqual(['TypeA']);
+    });
+
+    it('should manage saved filters list', () => {
+      const snapshot: FilterSnapshot = {
+        correlationId: null,
+        timeRange: { preset: 'last10min' },
+        artifactTypes: [],
+        producers: [],
+        tags: [],
+        visibility: [],
+      };
+      useFilterStore.getState().addSavedFilter({
+        filter_id: '1',
+        name: 'Default',
+        created_at: Date.now(),
+        filters: snapshot,
+      });
+
+      expect(useFilterStore.getState().savedFilters).toHaveLength(1);
+      useFilterStore.getState().removeSavedFilter('1');
+      expect(useFilterStore.getState().savedFilters).toHaveLength(0);
+    });
+  });
+
+  describe('applyFilters - backend integration (Phase 4)', () => {
+    beforeEach(() => {
+      vi.clearAllMocks();
+    });
+
+    it('should trigger backend snapshot refresh when applying filters', async () => {
+      const mockRefresh = vi.fn().mockResolvedValue(undefined);
+      vi.mocked(useGraphStore.getState).mockReturnValue({
+        refreshCurrentView: mockRefresh,
+        viewMode: 'agent',
+      } as any);
+
+      await useFilterStore.getState().applyFilters();
+
+      expect(mockRefresh).toHaveBeenCalledTimes(1);
+    });
+
+    it('should use current filter state when refreshing graph', async () => {
+      const mockRefresh = vi.fn().mockResolvedValue(undefined);
+      vi.mocked(useGraphStore.getState).mockReturnValue({
+        refreshCurrentView: mockRefresh,
+        viewMode: 'agent',
+      } as any);
+
+      // Set some filters
+      useFilterStore.setState({
+        correlationId: 'test-correlation-456',
+        selectedArtifactTypes: ['Pizza', 'Burger'],
+        selectedProducers: ['chef_agent'],
+        selectedTags: ['urgent'],
+      });
+
+      await useFilterStore.getState().applyFilters();
+
+      // Verify refresh was called (graphStore.refreshCurrentView will use current filter state)
+      expect(mockRefresh).toHaveBeenCalledTimes(1);
+
+      // The filters are passed via the filterStore state, which graphStore reads in buildGraphRequest
+      const filterState = useFilterStore.getState();
+      expect(filterState.correlationId).toBe('test-correlation-456');
+      expect(filterState.selectedArtifactTypes).toContain('Pizza');
+    });
+
+    it('should handle errors from backend refresh gracefully', async () => {
+      const mockRefresh = vi.fn().mockRejectedValue(new Error('Backend API error'));
+      vi.mocked(useGraphStore.getState).mockReturnValue({
+        refreshCurrentView: mockRefresh,
+        viewMode: 'agent',
+      } as any);
+
+      // Should propagate error to caller
+      await expect(useFilterStore.getState().applyFilters()).rejects.toThrow('Backend API error');
+    });
+
+    it('should work with both agent and blackboard view modes', async () => {
+      const mockRefresh = vi.fn().mockResolvedValue(undefined);
+
+      // Test agent view
+      vi.mocked(useGraphStore.getState).mockReturnValue({
+        refreshCurrentView: mockRefresh,
+        viewMode: 'agent',
+      } as any);
+
+      await useFilterStore.getState().applyFilters();
+      expect(mockRefresh).toHaveBeenCalledTimes(1);
+
+      // Test blackboard view
+      vi.mocked(useGraphStore.getState).mockReturnValue({
+        refreshCurrentView: mockRefresh,
+        viewMode: 'blackboard',
+      } as any);
+
+      await useFilterStore.getState().applyFilters();
+      expect(mockRefresh).toHaveBeenCalledTimes(2);
+    });
+  });
+});

flock/frontend/src/store/filterStore.ts

@@ -0,0 +1,272 @@
+import { create } from 'zustand';
+import { devtools, persist } from 'zustand/middleware';
+import {
+  TimeRange,
+  CorrelationIdMetadata,
+  FilterFacets,
+  ArtifactSummary,
+  SavedFilterMeta,
+  FilterSnapshot,
+} from '../types/filters';
+import { useGraphStore } from './graphStore';
+
+export type ActiveFilterType =
+  | 'correlationId'
+  | 'timeRange'
+  | 'artifactTypes'
+  | 'producers'
+  | 'tags'
+  | 'visibility';
+
+export interface ActiveFilter {
+  type: ActiveFilterType;
+  value: string | TimeRange;
+  label: string;
+}
+
+interface FilterState {
+  correlationId: string | null;
+  timeRange: TimeRange;
+  selectedArtifactTypes: string[];
+  selectedProducers: string[];
+  selectedTags: string[];
+  selectedVisibility: string[];
+  availableCorrelationIds: CorrelationIdMetadata[];
+  availableArtifactTypes: string[];
+  availableProducers: string[];
+  availableTags: string[];
+  availableVisibility: string[];
+  summary: ArtifactSummary | null;
+  savedFilters: SavedFilterMeta[];
+
+  setCorrelationId: (id: string | null) => void;
+  setTimeRange: (range: TimeRange) => void;
+  setArtifactTypes: (types: string[]) => void;
+  setProducers: (producers: string[]) => void;
+  setTags: (tags: string[]) => void;
+  setVisibility: (visibility: string[]) => void;
+  clearFilters: () => void;
+  applyFilters: () => Promise<void>;
+
+  updateAvailableCorrelationIds: (metadata: CorrelationIdMetadata[]) => void;
+  updateAvailableFacets: (facets: FilterFacets) => void;
+  setSummary: (summary: ArtifactSummary | null) => void;
+
+  setSavedFilters: (filters: SavedFilterMeta[]) => void;
+  addSavedFilter: (filter: SavedFilterMeta) => void;
+  removeSavedFilter: (filterId: string) => void;
+
+  getActiveFilters: () => ActiveFilter[];
+  removeFilter: (filter: ActiveFilter) => void;
+  getFilterSnapshot: () => FilterSnapshot;
+  applyFilterSnapshot: (snapshot: FilterSnapshot) => void;
+}
+
+const defaultTimeRange: TimeRange = { preset: 'last10min' };
+
+export const formatTimeRange = (range: TimeRange): string => {
+  if (range.preset === 'last5min') return 'Last 5 min';
+  if (range.preset === 'last10min') return 'Last 10 min';
+  if (range.preset === 'last1hour') return 'Last hour';
+  if (range.preset === 'all') return 'All time';
+  if (range.preset === 'custom' && range.start && range.end) {
+    const startDate = new Date(range.start).toLocaleString();
+    const endDate = new Date(range.end).toLocaleString();
+    return `${startDate} - ${endDate}`;
+  }
+  if (range.preset === 'custom') {
+    return 'Custom range';
+  }
+  return 'Last 10 min';
+};
+
+const uniqueSorted = (items: string[]) => Array.from(new Set(items)).sort((a, b) => a.localeCompare(b));
+
+export const useFilterStore = create<FilterState>()(
+  devtools(
+    persist(
+      (set, get) => ({
+        correlationId: null,
+        timeRange: defaultTimeRange,
+        selectedArtifactTypes: [],
+        selectedProducers: [],
+        selectedTags: [],
+        selectedVisibility: [],
+        availableCorrelationIds: [],
+        availableArtifactTypes: [],
+        availableProducers: [],
+        availableTags: [],
+        availableVisibility: [],
+        summary: null,
+        savedFilters: [],
+
+      setCorrelationId: (id) => set({ correlationId: id }),
+      setTimeRange: (range) => set({ timeRange: range }),
+      setArtifactTypes: (types) => set({ selectedArtifactTypes: uniqueSorted(types) }),
+      setProducers: (producers) => set({ selectedProducers: uniqueSorted(producers) }),
+      setTags: (tags) => set({ selectedTags: uniqueSorted(tags) }),
+      setVisibility: (visibility) => set({ selectedVisibility: uniqueSorted(visibility) }),
+      clearFilters: () =>
+        set({
+          correlationId: null,
+          timeRange: defaultTimeRange,
+          selectedArtifactTypes: [],
+          selectedProducers: [],
+          selectedTags: [],
+          selectedVisibility: [],
+        }),
+
+      applyFilters: async () => {
+        // UI Optimization Migration (Phase 4 - Spec 002): Backend-driven filtering
+        // Trigger backend snapshot refresh with current filter state
+        // The graphStore will read current filter state via buildGraphRequest()
+        await useGraphStore.getState().refreshCurrentView();
+      },
+
+      updateAvailableCorrelationIds: (metadata) => {
+        const sorted = [...metadata].sort((a, b) => b.first_seen - a.first_seen);
+        set({
+          availableCorrelationIds: sorted.slice(0, 50),
+        });
+      },
+
+      updateAvailableFacets: (facets) =>
+        set({
+          availableArtifactTypes: uniqueSorted(facets.artifactTypes),
+          availableProducers: uniqueSorted(facets.producers),
+          availableTags: uniqueSorted(facets.tags),
+          availableVisibility: uniqueSorted(facets.visibilities),
+        }),
+
+      setSummary: (summary) => set({ summary }),
+
+      setSavedFilters: (filters) => set({ savedFilters: filters }),
+      addSavedFilter: (filter) =>
+        set((state) => ({
+          savedFilters: [...state.savedFilters.filter((f) => f.filter_id !== filter.filter_id), filter],
+        })),
+      removeSavedFilter: (filterId) =>
+        set((state) => ({
+          savedFilters: state.savedFilters.filter((f) => f.filter_id !== filterId),
+        })),
+
+      getFilterSnapshot: () => {
+        const state = get();
+        return {
+          correlationId: state.correlationId,
+          timeRange: state.timeRange,
+          artifactTypes: [...state.selectedArtifactTypes],
+          producers: [...state.selectedProducers],
+          tags: [...state.selectedTags],
+          visibility: [...state.selectedVisibility],
+        };
+      },
+
+      applyFilterSnapshot: (snapshot) =>
+        set({
+          correlationId: snapshot.correlationId,
+          timeRange: snapshot.timeRange,
+          selectedArtifactTypes: uniqueSorted(snapshot.artifactTypes),
+          selectedProducers: uniqueSorted(snapshot.producers),
+          selectedTags: uniqueSorted(snapshot.tags),
+          selectedVisibility: uniqueSorted(snapshot.visibility),
+        }),
+
+      getActiveFilters: () => {
+        console.debug('[filterStore] computing active filters', { correlationId: get().correlationId, timeRange: get().timeRange });
+        const state = get();
+        const filters: ActiveFilter[] = [];
+
+        if (state.correlationId) {
+          filters.push({
+            type: 'correlationId',
+            value: state.correlationId,
+            label: `Correlation ID: ${state.correlationId}`,
+          });
+        }
+
+        filters.push({
+          type: 'timeRange',
+          value: state.timeRange,
+          label: `Time: ${formatTimeRange(state.timeRange)}`,
+        });
+
+        state.selectedArtifactTypes.forEach((type) => {
+          filters.push({
+            type: 'artifactTypes',
+            value: type,
+            label: `Type: ${type}`,
+          });
+        });
+
+        state.selectedProducers.forEach((producer) => {
+          filters.push({
+            type: 'producers',
+            value: producer,
+            label: `Producer: ${producer}`,
+          });
+        });
+
+        state.selectedTags.forEach((tag) => {
+          filters.push({
+            type: 'tags',
+            value: tag,
+            label: `Tag: ${tag}`,
+          });
+        });
+
+        state.selectedVisibility.forEach((kind) => {
+          filters.push({
+            type: 'visibility',
+            value: kind,
+            label: `Visibility: ${kind}`,
+          });
+        });
+
+        return filters;
+      },
+
+      removeFilter: (filter) => {
+        if (filter.type === 'correlationId') {
+          set({ correlationId: null });
+          return;
+        }
+        if (filter.type === 'timeRange') {
+          set({ timeRange: defaultTimeRange });
+          return;
+        }
+        if (typeof filter.value !== 'string') {
+          return;
+        }
+        set((state) => {
+          if (filter.type === 'artifactTypes') {
+            return { selectedArtifactTypes: state.selectedArtifactTypes.filter((item) => item !== filter.value) };
+          }
+          if (filter.type === 'producers') {
+            return { selectedProducers: state.selectedProducers.filter((item) => item !== filter.value) };
+          }
+          if (filter.type === 'tags') {
+            return { selectedTags: state.selectedTags.filter((item) => item !== filter.value) };
+          }
+          if (filter.type === 'visibility') {
+            return { selectedVisibility: state.selectedVisibility.filter((item) => item !== filter.value) };
+          }
+          return {};
+        });
+      },
+      }),
+      {
+        name: 'flock-filter-state',
+        partialize: (state) => ({
+          correlationId: state.correlationId,
+          timeRange: state.timeRange,
+          selectedArtifactTypes: state.selectedArtifactTypes,
+          selectedProducers: state.selectedProducers,
+          selectedTags: state.selectedTags,
+          selectedVisibility: state.selectedVisibility,
+        }),
+      }
+    ),
+    { name: 'filterStore' }
+  )
+);