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

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

@@ -0,0 +1,220 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: var(--gap-md);
+}
+
+.container {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--gap-md);
+  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);
+  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);
+}
+
+.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(-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);
+}
+
+.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;
+}
+
+.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;
+  margin-left: var(--gap-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  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,
+.removeButton:focus-visible {
+  color: var(--color-text-primary);
+  background: color-mix(in srgb, var(--pill-accent) 18%, transparent);
+}
+
+.removeButton:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pill-accent) 35%, transparent);
+}
+
+.removeButton:active {
+  transform: scale(0.92);
+}
+
+.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: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

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

@@ -0,0 +1,189 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, within } from '@testing-library/react';
+import FilterPills from './FilterPills';
+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/settingsStore', async () => {
+  const actual = await vi.importActual<typeof import('../../store/settingsStore')>('../../store/settingsStore');
+  return {
+    ...actual,
+    useSettingsStore: vi.fn(),
+  };
+});
+
+describe('FilterPills', () => {
+  const mockRemoveFilter = vi.fn();
+  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: MockFilterState = {
+        correlationId: null,
+        timeRange: { preset: 'last10min' },
+        selectedArtifactTypes: [],
+        selectedProducers: [],
+        selectedTags: [],
+        selectedVisibility: [],
+        removeFilter: mockRemoveFilter,
+        ...override,
+      };
+      return selector(state);
+    });
+
+    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', () => {
+    setupStore({ correlationId: 'test-123' });
+
+    render(<FilterPills />);
+    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', () => {
+    setupStore({ timeRange: { preset: 'last5min' } as TimeRange });
+
+    render(<FilterPills />);
+    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', () => {
+    setupStore({
+      correlationId: 'test-123',
+      timeRange: { preset: 'last1hour' } as TimeRange,
+      selectedArtifactTypes: ['__main__.Example'],
+    });
+
+    render(<FilterPills />);
+    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', () => {
+    setupStore({ correlationId: 'test-123' });
+
+    render(<FilterPills />);
+    const removeButton = screen.getByRole('button', { name: /remove.*correlation/i });
+    expect(removeButton).toBeInTheDocument();
+  });
+
+  it('should call removeFilter when remove button is clicked', () => {
+    setupStore({ correlationId: 'test-123' });
+
+    render(<FilterPills />);
+    const removeButton = screen.getByRole('button', { name: /remove.*correlation/i });
+
+    fireEvent.click(removeButton);
+
+    expect(mockRemoveFilter).toHaveBeenCalledWith({
+      type: 'correlationId',
+      value: 'test-123',
+      label: 'Correlation ID: test-123',
+    });
+  });
+
+  it('should call removeFilter with correct type for time range', () => {
+    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({
+      type: 'timeRange',
+      value: timeRange,
+      label: 'Time: Last 5 min',
+    });
+  });
+
+  it('should display pills in a horizontal layout', () => {
+    setupStore({ correlationId: 'test-123' });
+
+    render(<FilterPills />);
+    const container = screen.getByRole('list');
+    expect(container?.className).toMatch(/container/);
+  });
+
+  it('should render X icon in remove button', () => {
+    setupStore({ correlationId: 'test-123' });
+
+    render(<FilterPills />);
+    const removeButton = screen.getByRole('button', { name: /remove.*correlation/i });
+
+    expect(within(removeButton).getByText('×')).toBeInTheDocument();
+  });
+
+  it('should handle custom time range label', () => {
+    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(formatTimeRange(customRange))).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,143 @@
+import React, { useMemo } from 'react';
+import { useFilterStore, formatTimeRange } from '../../store/filterStore';
+import { useSettingsStore } from '../../store/settingsStore';
+import styles from './FilterPills.module.css';
+
+const extractLabelParts = (label: string) => {
+  const match = label.match(/^([^:]+):(.*)$/);
+  const title = match?.[1]?.trim() ?? label.trim();
+  const value = match?.[2]?.trim() ?? '';
+
+  return { title, value };
+};
+
+const FilterPills: React.FC = () => {
+  const showFilters = useSettingsStore((state) => state.ui.showFilters);
+  const setShowFilters = useSettingsStore((state) => state.setShowFilters);
+  const correlationId = useFilterStore((state) => state.correlationId);
+  const timeRange = useFilterStore((state) => state.timeRange);
+  const selectedArtifactTypes = useFilterStore((state) => state.selectedArtifactTypes);
+  const selectedProducers = useFilterStore((state) => state.selectedProducers);
+  const selectedTags = useFilterStore((state) => state.selectedTags);
+  const selectedVisibility = useFilterStore((state) => state.selectedVisibility);
+  const removeFilter = useFilterStore((state) => state.removeFilter);
+
+  const activeFilters = useMemo(() => {
+    const filters = [];
+    if (correlationId) {
+      filters.push({
+        type: 'correlationId' as const,
+        value: correlationId,
+        label: `Correlation ID: ${correlationId}`,
+      });
+    }
+
+    filters.push({
+      type: 'timeRange' as const,
+      value: timeRange,
+      label: `Time: ${formatTimeRange(timeRange)}`,
+    });
+
+    selectedArtifactTypes.forEach((type) => {
+      filters.push({
+        type: 'artifactTypes' as const,
+        value: type,
+        label: `Type: ${type}`,
+      });
+    });
+
+    selectedProducers.forEach((producer) => {
+      filters.push({
+        type: 'producers' as const,
+        value: producer,
+        label: `Producer: ${producer}`,
+      });
+    });
+
+    selectedTags.forEach((tag) => {
+      filters.push({
+        type: 'tags' as const,
+        value: tag,
+        label: `Tag: ${tag}`,
+      });
+    });
+
+    selectedVisibility.forEach((visibilityKind) => {
+      filters.push({
+        type: 'visibility' as const,
+        value: visibilityKind,
+        label: `Visibility: ${visibilityKind}`,
+      });
+    });
+
+    return filters;
+  }, [correlationId, timeRange, selectedArtifactTypes, selectedProducers, selectedTags, selectedVisibility]);
+
+  if (activeFilters.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={styles.wrapper}>
+      <button
+        type="button"
+        onClick={() => setShowFilters(!showFilters)}
+        className={`${styles.toggleButton} ${showFilters ? styles.toggleButtonActive : ''}`}
+        title={`${showFilters ? 'Hide' : 'Show'} filter panel (Ctrl+Shift+F)`}
+        aria-pressed={showFilters}
+        aria-label={showFilters ? 'Hide filter panel' : 'Show filter panel'}
+      >
+        <span className={styles.toggleIcon} aria-hidden="true">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <path
+              d="M2.667 2.667h10.666L9.333 7v4.667l-2.666 1.333V7L2.667 2.667z"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </span>
+        <span className={styles.toggleLabel}>Filter</span>
+      </button>
+      <div className={styles.container} role="list">
+        {activeFilters.map((filter, index) => {
+          const labelValue =
+            filter.type === 'timeRange' && typeof filter.value !== 'string'
+              ? `Time: ${formatTimeRange(filter.value)}`
+              : filter.label;
+
+          const { title, value } = extractLabelParts(labelValue);
+          const accessibleDescriptor = value ? `${title} ${value}` : title;
+
+          return (
+            <div
+              key={`${filter.type}-${String(filter.value)}-${index}`}
+              className={styles.pill}
+              data-filter-type={filter.type}
+              role="listitem"
+            >
+              <span className={styles.pillAccent} aria-hidden="true" />
+              <div className={styles.textGroup}>
+                <span className={styles.pillTitle}>{title}</span>
+                {value && <span className={styles.pillValue}>{value}</span>}
+              </div>
+              <button
+                onClick={() => removeFilter(filter)}
+                aria-label={`Remove ${accessibleDescriptor} filter`}
+                className={styles.removeButton}
+                type="button"
+              >
+                <span aria-hidden="true" className={styles.removeIcon}>
+                  ×
+                </span>
+              </button>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default FilterPills;

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

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

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

@@ -0,0 +1,60 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xs);
+}
+
+.controlsRow {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+  flex-wrap: wrap;
+}
+
+.select {
+  min-width: 180px;
+  padding: var(--spacing-1) var(--spacing-2);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border-subtle);
+  background: rgba(0, 0, 0, 0.35);
+  color: var(--color-text-primary);
+}
+
+.saveButton,
+.applyButton,
+.deleteButton {
+  padding: var(--spacing-1) var(--spacing-3);
+  border-radius: var(--radius-sm);
+  border: none;
+  font-size: var(--font-size-body-xs);
+  cursor: pointer;
+  transition: background-color var(--duration-fast) ease;
+}
+
+.saveButton {
+  background: var(--color-info);
+  color: var(--color-text-on-primary);
+}
+
+.applyButton {
+  background: var(--color-success);
+  color: var(--color-text-on-primary);
+}
+
+.deleteButton {
+  background: var(--color-error);
+  color: var(--color-text-on-primary);
+}
+
+.saveButton:disabled,
+.applyButton:disabled,
+.deleteButton:disabled,
+.select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.error {
+  font-size: var(--font-size-body-xs);
+  color: var(--color-error);
+}