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

flock/frontend/src/components/filters/SavedFiltersControl.test.tsx

@@ -0,0 +1,158 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import SavedFiltersControl from './SavedFiltersControl';
+import { useFilterStore } from '../../store/filterStore';
+import { indexedDBService } from '../../services/indexeddb';
+import type { SavedFilterMeta, FilterSnapshot } from '../../types/filters';
+
+vi.mock('../../store/filterStore');
+vi.mock('../../services/indexeddb', () => ({
+  indexedDBService: {
+    initialize: vi.fn(),
+    getAllFilterPresets: vi.fn(),
+    saveFilterPreset: vi.fn(),
+    deleteFilterPreset: vi.fn(),
+  },
+}));
+
+const baseSnapshot: FilterSnapshot = {
+  correlationId: null,
+  timeRange: { preset: 'last10min' },
+  artifactTypes: [],
+  producers: [],
+  tags: [],
+  visibility: [],
+};
+
+const createMockState = (overrides: Record<string, unknown> = {}) => ({
+  savedFilters: [] as SavedFilterMeta[],
+  setSavedFilters: vi.fn(),
+  addSavedFilter: vi.fn(),
+  removeSavedFilter: vi.fn(),
+  getFilterSnapshot: vi.fn(() => baseSnapshot),
+  applyFilterSnapshot: vi.fn(),
+  getActiveFilters: () => [],
+  ...overrides,
+});
+
+type MockFilterState = ReturnType<typeof createMockState>;
+
+let state: MockFilterState;
+type MockedFn = ReturnType<typeof vi.fn>;
+const mockedUseFilterStore = useFilterStore as unknown as MockedFn;
+
+const getIndexedDBMocks = () => indexedDBService as unknown as {
+  initialize: ReturnType<typeof vi.fn>;
+  getAllFilterPresets: ReturnType<typeof vi.fn>;
+  saveFilterPreset: ReturnType<typeof vi.fn>;
+  deleteFilterPreset: ReturnType<typeof vi.fn>;
+};
+
+describe('SavedFiltersControl', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    state = createMockState();
+    mockedUseFilterStore.mockReset();
+    mockedUseFilterStore.mockImplementation((selector: any) => selector(state as any));
+
+    const indexedDb = getIndexedDBMocks();
+    indexedDb.initialize.mockResolvedValue(undefined);
+    indexedDb.getAllFilterPresets.mockResolvedValue([]);
+    indexedDb.saveFilterPreset.mockResolvedValue(undefined);
+    indexedDb.deleteFilterPreset.mockResolvedValue(undefined);
+  });
+
+  it('loads saved presets on mount', async () => {
+    const presets: SavedFilterMeta[] = [
+      {
+        filter_id: 'preset-1',
+        name: 'Recent Ops',
+        created_at: Date.now(),
+        filters: baseSnapshot,
+      },
+    ];
+
+    const indexedDb = getIndexedDBMocks();
+    indexedDb.getAllFilterPresets.mockResolvedValueOnce(presets);
+
+    render(<SavedFiltersControl />);
+
+    await waitFor(() => {
+      expect(state.setSavedFilters).toHaveBeenCalledWith(presets);
+    });
+  });
+
+  it('saves current snapshot when Save Current is clicked', async () => {
+    const indexedDb = getIndexedDBMocks();
+    indexedDb.getAllFilterPresets.mockResolvedValueOnce([]);
+
+    const promptSpy = vi.spyOn(window, 'prompt').mockReturnValue('My Filters');
+    const uuidSpy = vi.spyOn(globalThis.crypto, 'randomUUID').mockReturnValue('123e4567-e89b-12d3-a456-426614174000');
+
+    render(<SavedFiltersControl />);
+
+    const saveButton = await screen.findByRole('button', { name: /save current/i });
+    fireEvent.click(saveButton);
+
+    await waitFor(() => {
+      expect(indexedDb.saveFilterPreset).toHaveBeenCalledTimes(1);
+      expect(state.addSavedFilter).toHaveBeenCalledTimes(1);
+    });
+
+    const savedRecord = indexedDb.saveFilterPreset.mock.calls[0]?.[0];
+    expect(savedRecord).toBeDefined();
+    if (savedRecord) {
+      expect(savedRecord.filter_id).toBe('123e4567-e89b-12d3-a456-426614174000');
+      expect(savedRecord.name).toBe('My Filters');
+      expect(savedRecord.filters).toEqual(baseSnapshot);
+    }
+
+    promptSpy.mockRestore();
+    uuidSpy.mockRestore();
+  });
+
+  it('applies selected preset when Apply is clicked', async () => {
+    const preset: SavedFilterMeta = {
+      filter_id: 'preset-apply',
+      name: 'Important',
+      created_at: Date.now(),
+      filters: { ...baseSnapshot, artifactTypes: ['Plan'] },
+    };
+    state = createMockState({ savedFilters: [preset] });
+    mockedUseFilterStore.mockImplementation((selector: any) => selector(state as any));
+
+    const indexedDb = getIndexedDBMocks();
+    indexedDb.getAllFilterPresets.mockResolvedValueOnce([preset]);
+
+    render(<SavedFiltersControl />);
+
+    const applyButton = await screen.findByRole('button', { name: /apply/i });
+    fireEvent.click(applyButton);
+
+    expect(state.applyFilterSnapshot).toHaveBeenCalledWith(preset.filters);
+  });
+
+  it('deletes preset and updates store when Delete is clicked', async () => {
+    const preset: SavedFilterMeta = {
+      filter_id: 'preset-delete',
+      name: 'Old preset',
+      created_at: Date.now(),
+      filters: baseSnapshot,
+    };
+    state = createMockState({ savedFilters: [preset] });
+    mockedUseFilterStore.mockImplementation((selector: any) => selector(state as any));
+
+    const indexedDb = getIndexedDBMocks();
+    indexedDb.getAllFilterPresets.mockResolvedValueOnce([preset]);
+
+    render(<SavedFiltersControl />);
+
+    const deleteButton = await screen.findByRole('button', { name: /delete/i });
+    fireEvent.click(deleteButton);
+
+    await waitFor(() => {
+      expect(indexedDb.deleteFilterPreset).toHaveBeenCalledWith('preset-delete');
+      expect(state.removeSavedFilter).toHaveBeenCalledWith('preset-delete');
+    });
+  });
+});

flock/frontend/src/components/filters/SavedFiltersControl.tsx

@@ -0,0 +1,159 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { indexedDBService } from '../../services/indexeddb';
+import { useFilterStore } from '../../store/filterStore';
+import styles from './SavedFiltersControl.module.css';
+
+const SavedFiltersControl: React.FC = () => {
+  const savedFilters = useFilterStore((state) => state.savedFilters);
+  const setSavedFilters = useFilterStore((state) => state.setSavedFilters);
+  const addSavedFilter = useFilterStore((state) => state.addSavedFilter);
+  const removeSavedFilter = useFilterStore((state) => state.removeSavedFilter);
+  const getFilterSnapshot = useFilterStore((state) => state.getFilterSnapshot);
+  const applyFilterSnapshot = useFilterStore((state) => state.applyFilterSnapshot);
+
+  const [selectedId, setSelectedId] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const renderCountRef = useRef(0);
+  renderCountRef.current += 1;
+  if (import.meta.env.DEV) {
+    console.debug('[SavedFilters] render', {
+      renderCount: renderCountRef.current,
+      savedCount: savedFilters.length,
+      loading,
+      selectedId
+    });
+  }
+
+  useEffect(() => {
+    let mounted = true;
+    (async () => {
+      try {
+        if (import.meta.env.DEV) {
+          console.debug('[SavedFilters] initializing IndexedDB');
+        }
+        await indexedDBService.initialize();
+        const presets = await indexedDBService.getAllFilterPresets();
+        if (import.meta.env.DEV) {
+          console.debug('[SavedFilters] loaded presets', { count: presets.length });
+        }
+        if (!mounted) return;
+        setSavedFilters(presets);
+        if (presets.length > 0) {
+          setSelectedId(presets[0]?.filter_id ?? '');
+        } else {
+          setSelectedId('');
+        }
+        setError(null);
+      } catch (err) {
+        console.error('[SavedFilters] Failed to load presets', err);
+        if (mounted) {
+          setError('Unable to load saved presets');
+        }
+      } finally {
+        if (mounted) {
+          setLoading(false);
+        }
+      }
+    })();
+    return () => {
+      mounted = false;
+    };
+  }, [setSavedFilters]);
+
+  const handleSavePreset = async () => {
+    const name = window.prompt('Save current filters as preset. Enter a name:');
+    if (!name || !name.trim()) {
+      return;
+    }
+
+    try {
+      const record = {
+        filter_id: typeof crypto !== 'undefined' && crypto.randomUUID ? crypto.randomUUID() : `filter-${Date.now()}`,
+        name: name.trim(),
+        created_at: Date.now(),
+        filters: getFilterSnapshot(),
+      };
+      await indexedDBService.saveFilterPreset(record);
+      addSavedFilter(record);
+      setSelectedId(record.filter_id);
+      setError(null);
+    } catch (err) {
+      console.error('[SavedFilters] Failed to save preset', err);
+      setError('Failed to save preset');
+    }
+  };
+
+  const handleApplyPreset = () => {
+    if (!selectedId) return;
+    const preset = savedFilters.find((filter) => filter.filter_id === selectedId);
+    if (!preset) return;
+    applyFilterSnapshot(preset.filters);
+  };
+
+  const handleDeletePreset = async () => {
+    if (!selectedId) return;
+    try {
+      await indexedDBService.deleteFilterPreset(selectedId);
+      removeSavedFilter(selectedId);
+      const remaining = savedFilters.filter((filter) => filter.filter_id !== selectedId);
+      setSelectedId(remaining[0]?.filter_id ?? '');
+      setError(null);
+    } catch (err) {
+      console.error('[SavedFilters] Failed to delete preset', err);
+      setError('Failed to delete preset');
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.controlsRow}>
+        <button
+          type="button"
+          className={styles.saveButton}
+          onClick={handleSavePreset}
+          disabled={loading}
+        >
+          Save Current
+        </button>
+
+        <select
+          className={styles.select}
+          value={selectedId}
+          onChange={(event) => setSelectedId(event.target.value)}
+          disabled={loading || savedFilters.length === 0}
+          aria-label="Saved filter presets"
+        >
+          {savedFilters.length === 0 && <option value="">No presets</option>}
+          {savedFilters.map((preset) => (
+            <option key={preset.filter_id} value={preset.filter_id}>
+              {preset.name}
+            </option>
+          ))}
+        </select>
+
+        <button
+          type="button"
+          className={styles.applyButton}
+          onClick={handleApplyPreset}
+          disabled={!selectedId}
+        >
+          Apply
+        </button>
+
+        <button
+          type="button"
+          className={styles.deleteButton}
+          onClick={handleDeletePreset}
+          disabled={!selectedId}
+        >
+          Delete
+        </button>
+      </div>
+      {error && <div className={styles.error}>{error}</div>}
+    </div>
+  );
+};
+
+export default SavedFiltersControl;

flock/frontend/src/components/filters/TagFilter.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import MultiSelect from '../settings/MultiSelect';
+import { useFilterStore } from '../../store/filterStore';
+
+const TagFilter: React.FC = () => {
+  const options = useFilterStore((state) => state.availableTags);
+  const selected = useFilterStore((state) => state.selectedTags);
+  const setTags = useFilterStore((state) => state.setTags);
+
+  return (
+    <MultiSelect
+      options={options}
+      selected={selected}
+      onChange={setTags}
+      placeholder={options.length ? 'Select tags…' : 'No tags available'}
+      disabled={options.length === 0}
+    />
+  );
+};
+
+export default TagFilter;

flock/frontend/src/components/filters/TimeRangeFilter.module.css

@@ -0,0 +1,115 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.presetButtons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-2);
+  align-items: center;
+}
+
+.presetButton {
+  padding: var(--spacing-2) var(--spacing-4);
+  background-color: var(--color-bg-surface);
+  color: var(--color-text-secondary);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-size: var(--font-size-body-sm);
+  font-weight: var(--font-weight-medium);
+  font-family: var(--font-family-sans);
+  transition: var(--transition-colors);
+  white-space: nowrap;
+}
+
+.presetButton:hover {
+  background-color: var(--color-bg-overlay);
+  border-color: var(--color-border-strong);
+}
+
+.presetButton.active {
+  background-color: var(--color-primary-600);
+  color: var(--color-text-on-primary);
+  border-color: var(--color-primary-600);
+}
+
+.presetButton.active:hover {
+  background-color: var(--color-primary-700);
+  border-color: var(--color-primary-700);
+}
+
+.presetButtonAll {
+  background: rgba(194, 65, 244, 0.15); /* secondary tint */
+  color: var(--color-secondary-200);
+  border-color: var(--color-secondary-500);
+}
+
+.presetButtonAll:hover {
+  background: rgba(194, 65, 244, 0.25);
+  border-color: var(--color-secondary-400);
+  color: var(--color-secondary-100);
+}
+
+.presetButtonAll.active {
+  background: var(--color-secondary-500);
+  border-color: var(--color-secondary-300);
+  color: var(--color-text-on-primary);
+}
+
+.presetButtonAll.active:hover {
+  background: var(--color-secondary-400);
+  border-color: var(--color-secondary-200);
+}
+
+.customRange {
+  display: flex;
+  gap: var(--spacing-3);
+  align-items: center;
+  padding: var(--spacing-2);
+  background-color: var(--color-bg-surface);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border-subtle);
+}
+
+.dateInputGroup {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+.dateLabel {
+  font-size: var(--font-size-caption);
+  color: var(--color-text-tertiary);
+  font-weight: var(--font-weight-medium);
+}
+
+.dateInput {
+  padding: var(--spacing-1-5) var(--spacing-2);
+  background-color: var(--color-bg-elevated);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-body-sm);
+  font-family: var(--font-family-sans);
+  color: var(--color-text-primary);
+  outline: none;
+  transition: var(--transition-colors), box-shadow var(--duration-normal) var(--ease-smooth);
+}
+
+.dateInput:focus {
+  border-color: var(--color-border-focus);
+  box-shadow: var(--shadow-glow-primary);
+}
+
+/* Custom styling for date input calendar icon */
+.dateInput::-webkit-calendar-picker-indicator {
+  cursor: pointer;
+  filter: invert(0.7);
+  transition: var(--transition-opacity);
+}
+
+.dateInput::-webkit-calendar-picker-indicator:hover {
+  filter: invert(1);
+}

flock/frontend/src/components/filters/TimeRangeFilter.test.tsx

@@ -0,0 +1,154 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import TimeRangeFilter from './TimeRangeFilter';
+import { useFilterStore } from '../../store/filterStore';
+
+vi.mock('../../store/filterStore');
+
+describe('TimeRangeFilter', () => {
+  const mockSetTimeRange = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(useFilterStore).mockImplementation((selector: any) => {
+      const state = {
+        timeRange: { preset: 'last10min' },
+        setTimeRange: mockSetTimeRange,
+      };
+      return selector(state);
+    });
+  });
+
+  it('should render time range filter with presets', () => {
+    render(<TimeRangeFilter />);
+    expect(screen.getByText(/Last 5 min/i)).toBeInTheDocument();
+    expect(screen.getByText(/Last 10 min/i)).toBeInTheDocument();
+    expect(screen.getByText(/Last hour/i)).toBeInTheDocument();
+    expect(screen.getByText(/Custom/i)).toBeInTheDocument();
+  });
+
+  it('should highlight selected preset', () => {
+    render(<TimeRangeFilter />);
+    const last10MinButton = screen.getByText(/Last 10 min/i);
+
+    // Should have active class for selected preset (hashed by CSS modules)
+    expect(last10MinButton.className).toMatch(/active/);
+  });
+
+  it('should call setTimeRange when preset is selected', () => {
+    render(<TimeRangeFilter />);
+    const last5MinButton = screen.getByText(/Last 5 min/i);
+
+    fireEvent.click(last5MinButton);
+
+    expect(mockSetTimeRange).toHaveBeenCalledWith({ preset: 'last5min' });
+  });
+
+  it('should show custom date inputs when Custom is selected', () => {
+    vi.mocked(useFilterStore).mockImplementation((selector: any) => {
+      const state = {
+        timeRange: { preset: 'custom', start: Date.now() - 3600000, end: Date.now() },
+        setTimeRange: mockSetTimeRange,
+      };
+      return selector(state);
+    });
+
+    render(<TimeRangeFilter />);
+
+    expect(screen.getByLabelText(/Start/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/End/i)).toBeInTheDocument();
+  });
+
+  it('should not show custom date inputs when preset is not custom', () => {
+    render(<TimeRangeFilter />);
+
+    expect(screen.queryByLabelText(/Start/i)).not.toBeInTheDocument();
+    expect(screen.queryByLabelText(/End/i)).not.toBeInTheDocument();
+  });
+
+  it('should call setTimeRange with custom range when dates are changed', () => {
+    vi.mocked(useFilterStore).mockImplementation((selector: any) => {
+      const state = {
+        timeRange: { preset: 'custom', start: Date.now() - 3600000, end: Date.now() },
+        setTimeRange: mockSetTimeRange,
+      };
+      return selector(state);
+    });
+
+    render(<TimeRangeFilter />);
+
+    const startInput = screen.getByLabelText(/Start/i) as HTMLInputElement;
+
+    // Create datetime-local format
+    const startDate = new Date(Date.now() - 7200000);
+    const startValue = startDate.toISOString().slice(0, 16);
+
+    fireEvent.change(startInput, { target: { value: startValue } });
+
+    expect(mockSetTimeRange).toHaveBeenCalledWith({
+      preset: 'custom',
+      start: expect.any(Number),
+      end: expect.any(Number),
+    });
+  });
+
+  it('should display current custom range values in inputs', () => {
+    const now = Date.now();
+    const start = now - 3600000;
+    const end = now;
+
+    vi.mocked(useFilterStore).mockImplementation((selector: any) => {
+      const state = {
+        timeRange: { preset: 'custom', start, end },
+        setTimeRange: mockSetTimeRange,
+      };
+      return selector(state);
+    });
+
+    render(<TimeRangeFilter />);
+
+    const startInput = screen.getByLabelText(/Start/i) as HTMLInputElement;
+    const endInput = screen.getByLabelText(/End/i) as HTMLInputElement;
+
+    // Should have values set
+    expect(startInput.value).toBeTruthy();
+    expect(endInput.value).toBeTruthy();
+  });
+
+  it('should switch to custom preset when clicking Custom button', () => {
+    render(<TimeRangeFilter />);
+    const customButton = screen.getByText(/Custom/i);
+
+    fireEvent.click(customButton);
+
+    expect(mockSetTimeRange).toHaveBeenCalledWith({
+      preset: 'custom',
+      start: expect.any(Number),
+      end: expect.any(Number),
+    });
+  });
+
+  it('should apply consistent styling to all preset buttons', () => {
+    render(<TimeRangeFilter />);
+    const buttons = [
+      screen.getByText(/Last 5 min/i),
+      screen.getByText(/Last 10 min/i),
+      screen.getByText(/Last hour/i),
+      screen.getByText(/Custom/i),
+    ];
+
+    buttons.forEach((button) => {
+      // All buttons should have the presetButton class (hashed by CSS modules)
+      expect(button.className).toMatch(/presetButton/);
+    });
+  });
+
+  it('should handle last1hour preset correctly', () => {
+    render(<TimeRangeFilter />);
+    const lastHourButton = screen.getByText(/Last hour/i);
+
+    fireEvent.click(lastHourButton);
+
+    expect(mockSetTimeRange).toHaveBeenCalledWith({ preset: 'last1hour' });
+  });
+});