flock-core 0.5.0b65__py3-none-any.whl → 0.5.0b70__py3-none-any.whl

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

@@ -1,79 +1,220 @@
-.container {
+.wrapper {
   display: flex;
-  gap: var(--spacing-2);
   align-items: center;
-  flex-wrap: wrap;
+  width: 100%;
+  gap: var(--gap-md);
 }
 
-.pill {
-  display: flex;
+.container {
+  display: inline-flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: var(--gap-md);
-  padding: var(--spacing-1-5) var(--spacing-3);
-  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
-  border: 1px solid var(--color-primary-500);
+  pointer-events: auto;
+  margin-left: 0;
+  padding: 0;
+  max-width: 100%;
+}
+
+.toggleButton {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-sm);
+  padding: var(--spacing-1) var(--spacing-3);
   border-radius: var(--radius-full);
-  font-size: var(--font-size-body-xs);
+  border: var(--border-subtle);
+  background: color-mix(in srgb, var(--color-bg-surface) 80%, transparent);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-body-sm);
   font-weight: var(--font-weight-medium);
+  letter-spacing: var(--letter-spacing-wide);
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: var(--transition-colors), var(--transition-transform), var(--transition-shadow);
+}
+
+.toggleButton:hover {
+  color: var(--color-text-primary);
+  border-color: color-mix(in srgb, var(--color-border-focus) 60%, transparent);
+  background: color-mix(in srgb, var(--color-bg-overlay) 75%, transparent);
+}
+
+.toggleButton:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-glow-primary);
+  color: var(--color-text-primary);
+}
+
+.toggleButton:active {
+  transform: scale(0.98);
+}
+
+.toggleButtonActive {
+  color: var(--color-text-on-primary);
+  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
+  border-color: color-mix(in srgb, var(--color-primary-400) 70%, transparent);
+  box-shadow: var(--shadow-sm);
+}
+
+.toggleButtonActive:hover {
+  box-shadow: var(--shadow-md);
+}
+
+.toggleIcon {
+  display: inline-flex;
+  width: 1rem;
+  height: 1rem;
+}
+
+.toggleIcon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.toggleButtonActive .toggleIcon {
   color: var(--color-text-on-primary);
-  box-shadow: var(--shadow-xs);
-  transition: var(--transition-all);
-  animation: slideIn var(--duration-normal) var(--ease-out);
+}
+
+.toggleLabel {
+  letter-spacing: var(--letter-spacing-wide);
+}
+
+.pill {
+  --pill-accent: var(--color-primary-500);
+  --pill-accent-soft: color-mix(in srgb, var(--color-bg-overlay) 88%, var(--pill-accent) 12%);
+  --pill-border: color-mix(in srgb, var(--pill-accent) 45%, transparent);
+  --pill-shadow: 0 12px 28px -18px color-mix(in srgb, var(--pill-accent) 40%, transparent);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-sm);
+  padding: var(--spacing-1-5) var(--spacing-3);
+  border-radius: var(--radius-full);
+  background: var(--color-bg-overlay);
+  background: linear-gradient(135deg, var(--pill-accent-soft) 0%, color-mix(in srgb, var(--color-bg-surface) 92%, transparent) 100%);
+  border: 1px solid var(--pill-border);
+  color: var(--color-text-primary);
+  box-shadow: var(--shadow-xs), var(--pill-shadow);
+  transition: var(--transition-transform), var(--transition-shadow), var(--transition-colors);
+  cursor: default;
+  animation: fadeIn var(--duration-normal) var(--ease-out);
 }
 
 .pill:hover {
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-sm);
+  transform: translateY(-2px);
+  box-shadow: 0 16px 32px -18px color-mix(in srgb, var(--pill-accent) 55%, transparent);
+}
+
+.pill:focus-within {
+  box-shadow:
+    0 16px 32px -18px color-mix(in srgb, var(--pill-accent) 55%, transparent),
+    0 0 0 2px color-mix(in srgb, var(--pill-accent) 35%, transparent);
 }
 
-.pillSecondary {
-  background: linear-gradient(135deg, var(--color-secondary-600) 0%, var(--color-secondary-700) 100%);
-  border-color: var(--color-secondary-500);
+.pillAccent {
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+  background: var(--pill-accent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pill-accent) 25%, transparent);
+}
+
+.textGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  line-height: 1.1;
 }
 
-.pillLabel {
-  user-select: none;
+.pillTitle {
+  font-size: var(--font-size-tiny);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--letter-spacing-wide);
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+}
+
+.pillValue {
+  font-size: var(--font-size-body-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  line-height: 1.3;
 }
 
 .removeButton {
   background: none;
   border: none;
-  cursor: pointer;
-  padding: 0 var(--spacing-0-5);
-  font-size: 16px;
-  color: var(--color-text-on-primary);
-  line-height: 1;
-  display: flex;
+  margin-left: var(--gap-sm);
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  transition: var(--transition-transform);
-  opacity: 0.8;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--radius-full);
+  color: var(--color-text-tertiary);
+  transition: var(--transition-transform), var(--transition-colors), var(--transition-shadow);
+  cursor: pointer;
 }
 
-.removeButton:hover {
-  opacity: 1;
-  transform: scale(1.2);
+.removeButton:hover,
+.removeButton:focus-visible {
+  color: var(--color-text-primary);
+  background: color-mix(in srgb, var(--pill-accent) 18%, transparent);
 }
 
-@keyframes slideIn {
-  from {
-    opacity: 0;
-    transform: translateX(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
+.removeButton:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pill-accent) 35%, transparent);
 }
 
-/* Animation when pill is removed */
-.pill.removing {
-  animation: slideOut var(--duration-fast) var(--ease-in) forwards;
+.removeButton:active {
+  transform: scale(0.92);
 }
 
-@keyframes slideOut {
-  to {
+.removeIcon {
+  font-size: var(--font-size-body);
+  line-height: 1;
+}
+
+.pill[data-filter-type='timeRange'] {
+  --pill-accent: var(--color-tertiary-500);
+}
+
+.pill[data-filter-type='artifactTypes'] {
+  --pill-accent: var(--color-secondary-500);
+}
+
+.pill[data-filter-type='producers'] {
+  --pill-accent: var(--color-success);
+}
+
+.pill[data-filter-type='tags'] {
+  --pill-accent: var(--color-secondary-400);
+}
+
+.pill[data-filter-type='visibility'] {
+  --pill-accent: var(--color-info);
+}
+
+@media (max-width: 768px) {
+  .wrapper {
+    width: 100%;
+  }
+
+  .container {
+    border-radius: var(--radius-xl);
+    width: 100%;
+  }
+}
+
+@keyframes fadeIn {
+  from {
     opacity: 0;
-    transform: scale(0.8) translateX(-10px);
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
 }

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

@@ -1,83 +1,125 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, within } from '@testing-library/react';
 import FilterPills from './FilterPills';
-import { useFilterStore } from '../../store/filterStore';
+import { useFilterStore, formatTimeRange } from '../../store/filterStore';
+import { useSettingsStore } from '../../store/settingsStore';
+import type { TimeRange } from '../../types/filters';
+
+vi.mock('../../store/filterStore', async () => {
+  const actual = await vi.importActual<typeof import('../../store/filterStore')>('../../store/filterStore');
+  return {
+    ...actual,
+    useFilterStore: vi.fn(),
+  };
+});
 
-vi.mock('../../store/filterStore');
+vi.mock('../../store/settingsStore', async () => {
+  const actual = await vi.importActual<typeof import('../../store/settingsStore')>('../../store/settingsStore');
+  return {
+    ...actual,
+    useSettingsStore: vi.fn(),
+  };
+});
 
 describe('FilterPills', () => {
   const mockRemoveFilter = vi.fn();
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('should not render anything when no filters are active', () => {
+  const mockSetShowFilters = vi.fn();
+
+  type MockFilterState = {
+    correlationId: string | null;
+    timeRange: TimeRange;
+    selectedArtifactTypes: string[];
+    selectedProducers: string[];
+    selectedTags: string[];
+    selectedVisibility: string[];
+    removeFilter: typeof mockRemoveFilter;
+  };
+
+  const setupStore = (override: Partial<MockFilterState> = {}) => {
     vi.mocked(useFilterStore).mockImplementation((selector: any) => {
-      const state = {
+      const state: MockFilterState = {
         correlationId: null,
-        timeRange: { preset: 'last10min' as const },
+        timeRange: { preset: 'last10min' },
+        selectedArtifactTypes: [],
+        selectedProducers: [],
+        selectedTags: [],
+        selectedVisibility: [],
         removeFilter: mockRemoveFilter,
+        ...override,
       };
       return selector(state);
     });
 
-    const { container } = render(<FilterPills />);
-    expect(container.firstChild).toBeNull();
+    vi.mocked(useSettingsStore).mockImplementation((selector: any) =>
+      selector({
+        ui: { showFilters: false },
+        setShowFilters: mockSetShowFilters,
+      })
+    );
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render the default time range filter when no other filters are active', () => {
+    setupStore();
+
+    render(<FilterPills />);
+    expect(screen.getByRole('button', { name: /filter panel/i })).toBeInTheDocument();
+    expect(screen.getByText('Time')).toBeInTheDocument();
+    expect(screen.getByText('Last 10 min')).toBeInTheDocument();
   });
 
   it('should render filter pill for active correlation ID', () => {
-    vi.mocked(useFilterStore).mockImplementation((selector: any) => {
-      const state = {
-        correlationId: 'test-123',
-        timeRange: { preset: 'last10min' as const },
-        removeFilter: mockRemoveFilter,
-      };
-      return selector(state);
-    });
+    setupStore({ correlationId: 'test-123' });
 
     render(<FilterPills />);
-    expect(screen.getByText('Correlation ID: test-123')).toBeInTheDocument();
+    const pill = screen.getAllByRole('listitem').find((item) => within(item).queryByText('Correlation ID'));
+    expect(pill).toBeDefined();
+    if (!pill) {
+      throw new Error('Correlation ID pill not found');
+    }
+    expect(within(pill).getByText('Correlation ID')).toBeInTheDocument();
+    expect(within(pill).getByText('test-123')).toBeInTheDocument();
   });
 
   it('should render filter pill for active time range', () => {
-    vi.mocked(useFilterStore).mockImplementation((selector: any) => {
-      const state = {
-        correlationId: null,
-        timeRange: { preset: 'last5min' as const },
-        removeFilter: mockRemoveFilter,
-      };
-      return selector(state);
-    });
+    setupStore({ timeRange: { preset: 'last5min' } as TimeRange });
 
     render(<FilterPills />);
-    expect(screen.getByText('Time: Last 5 min')).toBeInTheDocument();
+    const pill = screen.getByRole('listitem');
+    expect(within(pill).getByText('Time')).toBeInTheDocument();
+    expect(within(pill).getByText('Last 5 min')).toBeInTheDocument();
+  });
+
+  it('should toggle filters when toggle button is clicked', () => {
+    setupStore();
+
+    render(<FilterPills />);
+    fireEvent.click(screen.getByRole('button', { name: /filter panel/i }));
+
+    expect(mockSetShowFilters).toHaveBeenCalledWith(true);
   });
 
   it('should render multiple filter pills', () => {
-    vi.mocked(useFilterStore).mockImplementation((selector: any) => {
-      const state = {
-        correlationId: 'test-123',
-        timeRange: { preset: 'last1hour' as const },
-        removeFilter: mockRemoveFilter,
-      };
-      return selector(state);
+    setupStore({
+      correlationId: 'test-123',
+      timeRange: { preset: 'last1hour' } as TimeRange,
+      selectedArtifactTypes: ['__main__.Example'],
     });
 
     render(<FilterPills />);
-    expect(screen.getByText('Correlation ID: test-123')).toBeInTheDocument();
-    expect(screen.getByText('Time: Last hour')).toBeInTheDocument();
+    expect(screen.getByText('Correlation ID')).toBeInTheDocument();
+    expect(screen.getByText('test-123')).toBeInTheDocument();
+    expect(screen.getByText('Time')).toBeInTheDocument();
+    expect(screen.getByText('Last hour')).toBeInTheDocument();
+    expect(screen.getByText('Type')).toBeInTheDocument();
+    expect(screen.getByText('__main__.Example')).toBeInTheDocument();
   });
 
   it('should render remove button for each pill', () => {
-    vi.mocked(useFilterStore).mockImplementation((selector: any) => {
-      const state = {
-        correlationId: 'test-123',
-        timeRange: { preset: 'last10min' as const },
-        removeFilter: mockRemoveFilter,
-      };
-      return selector(state);
-    });
+    setupStore({ correlationId: 'test-123' });
 
     render(<FilterPills />);
     const removeButton = screen.getByRole('button', { name: /remove.*correlation/i });
@@ -85,89 +127,63 @@ describe('FilterPills', () => {
   });
 
   it('should call removeFilter when remove button is clicked', () => {
-    vi.mocked(useFilterStore).mockImplementation((selector: any) => {
-      const state = {
-        correlationId: 'test-123',
-        timeRange: { preset: 'last10min' as const },
-        removeFilter: mockRemoveFilter,
-      };
-      return selector(state);
-    });
+    setupStore({ correlationId: 'test-123' });
 
     render(<FilterPills />);
     const removeButton = screen.getByRole('button', { name: /remove.*correlation/i });
 
     fireEvent.click(removeButton);
 
-    expect(mockRemoveFilter).toHaveBeenCalledWith('correlationId');
+    expect(mockRemoveFilter).toHaveBeenCalledWith({
+      type: 'correlationId',
+      value: 'test-123',
+      label: 'Correlation ID: test-123',
+    });
   });
 
   it('should call removeFilter with correct type for time range', () => {
-    vi.mocked(useFilterStore).mockImplementation((selector: any) => {
-      const state = {
-        correlationId: null,
-        timeRange: { preset: 'last5min' as const },
-        removeFilter: mockRemoveFilter,
-      };
-      return selector(state);
-    });
+    const timeRange = { preset: 'last5min' } as TimeRange;
+    setupStore({ timeRange });
 
     render(<FilterPills />);
     const removeButton = screen.getByRole('button', { name: /remove.*time/i });
 
     fireEvent.click(removeButton);
 
-    expect(mockRemoveFilter).toHaveBeenCalledWith('timeRange');
+    expect(mockRemoveFilter).toHaveBeenCalledWith({
+      type: 'timeRange',
+      value: timeRange,
+      label: 'Time: Last 5 min',
+    });
   });
 
   it('should display pills in a horizontal layout', () => {
-    vi.mocked(useFilterStore).mockImplementation((selector: any) => {
-      const state = {
-        correlationId: 'test-123',
-        timeRange: { preset: 'last5min' as const },
-        removeFilter: mockRemoveFilter,
-      };
-      return selector(state);
-    });
+    setupStore({ correlationId: 'test-123' });
 
     render(<FilterPills />);
-    const container = screen.getByText('Correlation ID: test-123').closest('div')?.parentElement;
-
-    // Should have container class (hashed by CSS modules)
+    const container = screen.getByRole('list');
     expect(container?.className).toMatch(/container/);
   });
 
   it('should render X icon in remove button', () => {
-    vi.mocked(useFilterStore).mockImplementation((selector: any) => {
-      const state = {
-        correlationId: 'test-123',
-        timeRange: { preset: 'last10min' as const },
-        removeFilter: mockRemoveFilter,
-      };
-      return selector(state);
-    });
+    setupStore({ correlationId: 'test-123' });
 
     render(<FilterPills />);
     const removeButton = screen.getByRole('button', { name: /remove.*correlation/i });
 
-    expect(removeButton).toHaveTextContent('×');
+    expect(within(removeButton).getByText('×')).toBeInTheDocument();
   });
 
   it('should handle custom time range label', () => {
-    vi.mocked(useFilterStore).mockImplementation((selector: any) => {
-      const state = {
-        correlationId: null,
-        timeRange: {
-          preset: 'custom' as const,
-          start: new Date('2025-01-01T10:00:00').getTime(),
-          end: new Date('2025-01-01T12:00:00').getTime(),
-        },
-        removeFilter: mockRemoveFilter,
-      };
-      return selector(state);
-    });
+    const customRange: TimeRange = {
+      preset: 'custom',
+      start: new Date('2025-01-01T10:00:00').getTime(),
+      end: new Date('2025-01-01T12:00:00').getTime(),
+    };
+    setupStore({ timeRange: customRange });
 
     render(<FilterPills />);
-    expect(screen.getByText(/Time:/)).toBeInTheDocument();
+    expect(screen.getByText('Time')).toBeInTheDocument();
+    expect(screen.getByText(formatTimeRange(customRange))).toBeInTheDocument();
   });
 });