@semiont/react-ui 0.4.20 → 0.4.21

package/src/components/resource/ResourceViewer.tsx

@@ -9,9 +9,9 @@ import { JsonLdView } from '../annotation-popups/JsonLdView';
 import type { components } from '@semiont/core';
 import { resourceId as toResourceId, annotationId as toAnnotationId } from '@semiont/core';
 import { getExactText, getTargetSelector, isHighlight, isAssessment, isReference, isComment, isTag, getBodySource } from '@semiont/api-client';
-import { useEventBus } from '../../contexts/EventBusContext';
 import { useEventSubscriptions } from '../../contexts/useEventSubscription';
-import { useCacheManager } from '../../contexts/CacheContext';
+import { useSemiont } from '../../session/SemiontProvider';
+import { useObservable } from '../../hooks/useObservable';
 import { useObservableExternalNavigation } from '../../hooks/useObservableBrowse';
 import { ANNOTATORS } from '../../lib/annotation-registry';
 import type { AnnotationsCollection } from '../../types/annotation-props';
@@ -29,7 +29,7 @@ type SemiontResource = components['schemas']['ResourceDescriptor'];
  * - No manual refetch needed - events handle cache invalidation
  *
  * Requirements:
- * - Must be wrapped in MakeMeaningEventBusProvider (provides event bus)
+ * - Must be wrapped in SemiontProvider (which owns the session's event bus)
  * - Must be wrapped in CacheContext (provides cache manager)
  *
  * Event flow:
@@ -49,7 +49,7 @@ interface Props {
 
 /**
  * @emits mark:delete - User requested to delete annotation. Payload: { annotationId: string }
- * @emits browse:panel-open - Request to open panel with annotation. Payload: { panel: string, scrollToAnnotationId?: string, motivation?: Motivation }
+ * @emits panel:open - Request to open panel with annotation. Payload: { panel: string, scrollToAnnotationId?: string, motivation?: Motivation }
  *
  * @subscribes mark:mode-toggled - Toggles between browse and annotate mode. Payload: { mode: 'browse' | 'annotate' }
  * @subscribes mark:added - New annotation was added. Payload: { annotation: Annotation }
@@ -71,8 +71,8 @@ export function ResourceViewer({
   const t = useTranslations('ResourceViewer');
   const documentViewerRef = useRef<HTMLDivElement>(null);
 
-  // Get unified event bus for emitting UI events
-  const eventBus = useEventBus();
+  const browser = useSemiont();
+  const session = useObservable(browser.activeSession$);
 
   // Get observable navigation for event-driven routing
   const navigate = useObservableExternalNavigation();
@@ -120,27 +120,19 @@ export function ResourceViewer({
   // Determine active view based on annotate mode
   const activeView = annotateMode ? 'annotate' : 'browse';
 
-  // Event-based cache invalidation - subscribe to make-meaning events
-  // This replaces manual onRefetchAnnotations calls with automatic updates
-  const cacheManager = useCacheManager();
+  const semiont = session?.client;
 
   const handleAnnotateAdded = useCallback(() => {
-    if (cacheManager) {
-      cacheManager.invalidateAnnotations(rUri);
-    }
-  }, [cacheManager, rUri]);
+    semiont?.browse.invalidateAnnotationList(rUri);
+  }, [semiont, rUri]);
 
   const handleAnnotateRemoved = useCallback(() => {
-    if (cacheManager) {
-      cacheManager.invalidateAnnotations(rUri);
-    }
-  }, [cacheManager, rUri]);
+    semiont?.browse.invalidateAnnotationList(rUri);
+  }, [semiont, rUri]);
 
   const handleAnnotateBodyUpdated = useCallback(() => {
-    if (cacheManager) {
-      cacheManager.invalidateAnnotations(rUri);
-    }
-  }, [cacheManager, rUri]);
+    semiont?.browse.invalidateAnnotationList(rUri);
+  }, [semiont, rUri]);
 
   // Annotation toolbar state - persisted in localStorage
   const [selectedMotivation, setSelectedMotivation] = useState<SelectionMotivation | null>(() => {
@@ -251,8 +243,8 @@ export function ResourceViewer({
 
   // Handle deleting annotations - emit event instead of direct call
   const handleDeleteAnnotation = useCallback((id: string) => {
-    eventBus.get('mark:delete').next({ annotationId: toAnnotationId(id) });
-  }, []); // eventBus is stable
+    session?.client.emit('mark:delete', { annotationId: toAnnotationId(id) });
+  }, [session]);
 
   // Handle annotation clicks - memoized
   const handleAnnotationClick = useCallback((annotation: Annotation, event?: React.MouseEvent) => {
@@ -337,8 +329,8 @@ export function ResourceViewer({
 
     // All annotations open the unified annotations panel
     // The panel internally switches tabs based on the motivation → tab mapping in UnifiedAnnotationsPanel
-    eventBus.get('browse:panel-open').next({ panel: 'annotations', scrollToAnnotationId: annotationId, motivation });
-  }, [highlights, references, assessments, comments, tags, handleAnnotationClick, selectedClick]);
+    browser.emit('panel:open', { panel: 'annotations', scrollToAnnotationId: annotationId, motivation });
+  }, [highlights, references, assessments, comments, tags, handleAnnotationClick, selectedClick, session]);
 
   // Event subscriptions - Combined into single useEventSubscriptions call to prevent hook ordering issues
   // IMPORTANT: All event subscriptions MUST be in a single call to maintain consistent hook order between renders

package/src/components/resource/__tests__/AnnotationHistory.test.tsx

@@ -4,7 +4,8 @@ import { screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { AnnotationHistory } from '../AnnotationHistory';
 import { renderWithProviders } from '../../../test-utils';
-import type { StoredEvent, ResourceId } from '@semiont/core';
+import type { ResourceId } from '@semiont/core';
+import { BehaviorSubject } from 'rxjs';
 
 // Mock @semiont/core - must use importOriginal to preserve EventBus etc.
 vi.mock('@semiont/core', async (importOriginal) => {
@@ -27,16 +28,26 @@ vi.mock('../../../contexts/TranslationContext', () => ({
   TranslationProvider: ({ children }: { children: React.ReactNode }) => children,
 }));
 
-// Mock useResources from api-hooks
-const mockEventsUseQuery = vi.fn();
-const mockAnnotationsUseQuery = vi.fn();
-
-vi.mock('../../../lib/api-hooks', () => ({
-  useResources: () => ({
-    events: { useQuery: mockEventsUseQuery },
-    annotations: { useQuery: mockAnnotationsUseQuery },
-  }),
-}));
+const eventsSubject = new BehaviorSubject<any[] | undefined>(undefined);
+const annotationsSubject = new BehaviorSubject<any[] | undefined>(undefined);
+
+const stableMockClient = {
+  browse: {
+    events: () => eventsSubject.asObservable(),
+    annotations: () => annotationsSubject.asObservable(),
+  },
+};
+const stableMockSession = { client: stableMockClient };
+const stableActiveSession$ = new BehaviorSubject<any>(stableMockSession);
+const stableMockBrowser = { activeSession$: stableActiveSession$ };
+
+vi.mock('../../../session/SemiontProvider', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../../session/SemiontProvider')>();
+  return {
+    ...actual,
+    useSemiont: () => stableMockBrowser,
+  };
+});
 
 // Mock HistoryEvent to avoid deep rendering and mocking all its dependencies
 const MockHistoryEvent = vi.fn(({ event }: any) => (
@@ -81,11 +92,12 @@ describe('AnnotationHistory', () => {
   beforeEach(() => {
     vi.clearAllMocks();
     mockGetAnnotationUri.mockReturnValue(null);
-    mockAnnotationsUseQuery.mockReturnValue({ data: { annotations: [] } });
+    eventsSubject.next(undefined);
+    annotationsSubject.next([]);
   });
 
   it('renders loading state', () => {
-    mockEventsUseQuery.mockReturnValue({ data: undefined, isLoading: true, isError: false });
+    eventsSubject.next(undefined);
 
     renderWithProviders(
       <AnnotationHistory
@@ -99,22 +111,8 @@ describe('AnnotationHistory', () => {
     expect(screen.getByText('Loading...')).toBeInTheDocument();
   });
 
-  it('renders null on error', () => {
-    mockEventsUseQuery.mockReturnValue({ data: undefined, isLoading: false, isError: true });
-
-    const { container } = renderWithProviders(
-      <AnnotationHistory
-        rUri={testRId}
-        Link={MockLink}
-        routes={mockRoutes}
-      />
-    );
-
-    expect(container.innerHTML).toBe('');
-  });
-
   it('renders null when no events', () => {
-    mockEventsUseQuery.mockReturnValue({ data: { events: [] }, isLoading: false, isError: false });
+    eventsSubject.next([]);
 
     const { container } = renderWithProviders(
       <AnnotationHistory
@@ -129,11 +127,11 @@ describe('AnnotationHistory', () => {
 
   it('renders events sorted by sequence number', () => {
     const events = [
-      makeStoredEvent('evt-3', 'mark:added', 3),
-      makeStoredEvent('evt-1', 'yield:created', 1),
-      makeStoredEvent('evt-2', 'mark:added', 2),
+      makeStoredEvent('e3', 'mark:added', 3),
+      makeStoredEvent('e1', 'mark:added', 1),
+      makeStoredEvent('e2', 'mark:added', 2),
     ];
-    mockEventsUseQuery.mockReturnValue({ data: { events }, isLoading: false, isError: false });
+    eventsSubject.next(events);
 
     renderWithProviders(
       <AnnotationHistory
@@ -143,195 +141,59 @@ describe('AnnotationHistory', () => {
       />
     );
 
-    expect(screen.getByText('History')).toBeInTheDocument();
-    // All three events rendered
-    expect(screen.getByTestId('history-event-evt-1')).toBeInTheDocument();
-    expect(screen.getByTestId('history-event-evt-2')).toBeInTheDocument();
-    expect(screen.getByTestId('history-event-evt-3')).toBeInTheDocument();
-
-    // Verify HistoryEvent was called with events in sequence order
-    const calls = MockHistoryEvent.mock.calls;
-    expect(calls[0][0].event.id).toBe('evt-1');  // .event is the React prop name
-    expect(calls[1][0].event.id).toBe('evt-2');
-    expect(calls[2][0].event.id).toBe('evt-3');
+    const renderedEvents = screen.getAllByTestId(/^history-event-/);
+    expect(renderedEvents).toHaveLength(3);
+    expect(renderedEvents[0]).toHaveAttribute('data-testid', 'history-event-e1');
+    expect(renderedEvents[1]).toHaveAttribute('data-testid', 'history-event-e2');
+    expect(renderedEvents[2]).toHaveAttribute('data-testid', 'history-event-e3');
   });
 
   it('filters out job events', () => {
     const events = [
-      makeStoredEvent('evt-1', 'yield:created', 1),
-      makeStoredEvent('evt-2', 'job:started', 2),
-      makeStoredEvent('evt-3', 'job:progress', 3),
-      makeStoredEvent('evt-4', 'job:completed', 4),
-      makeStoredEvent('evt-5', 'mark:added', 5),
-    ];
-    mockEventsUseQuery.mockReturnValue({ data: { events }, isLoading: false, isError: false });
-
-    renderWithProviders(
-      <AnnotationHistory
-        rUri={testRId}
-        Link={MockLink}
-        routes={mockRoutes}
-      />
-    );
-
-    // Only non-job events should render
-    expect(screen.getByTestId('history-event-evt-1')).toBeInTheDocument();
-    expect(screen.getByTestId('history-event-evt-5')).toBeInTheDocument();
-    expect(screen.queryByTestId('history-event-evt-2')).not.toBeInTheDocument();
-    expect(screen.queryByTestId('history-event-evt-3')).not.toBeInTheDocument();
-    expect(screen.queryByTestId('history-event-evt-4')).not.toBeInTheDocument();
-  });
-
-  it('passes isRelated=true when hoveredAnnotationId matches event', () => {
-    const annotationUri = 'http://localhost/annotations/ann-1';
-    mockGetAnnotationUri.mockReturnValue(annotationUri);
-
-    const events = [
-      makeStoredEvent('evt-1', 'mark:added', 1),
+      makeStoredEvent('e1', 'mark:added', 1),
+      makeStoredEvent('e2', 'job:started', 2),
+      makeStoredEvent('e3', 'job:progress', 3),
+      makeStoredEvent('e4', 'job:completed', 4),
+      makeStoredEvent('e5', 'mark:body-updated', 5),
     ];
-    mockEventsUseQuery.mockReturnValue({ data: { events }, isLoading: false, isError: false });
+    eventsSubject.next(events);
 
     renderWithProviders(
       <AnnotationHistory
         rUri={testRId}
-        hoveredAnnotationId={annotationUri}
         Link={MockLink}
         routes={mockRoutes}
       />
     );
 
-    const call = MockHistoryEvent.mock.calls[0][0];
-    expect(call.isRelated).toBe(true);
+    const renderedEvents = screen.getAllByTestId(/^history-event-/);
+    expect(renderedEvents).toHaveLength(2);
+    expect(renderedEvents[0]).toHaveAttribute('data-testid', 'history-event-e1');
+    expect(renderedEvents[1]).toHaveAttribute('data-testid', 'history-event-e5');
   });
 
-  it('passes isRelated=false when hoveredAnnotationId does not match', () => {
-    mockGetAnnotationUri.mockReturnValue('http://localhost/annotations/ann-other');
-
-    const events = [
-      makeStoredEvent('evt-1', 'mark:added', 1),
-    ];
-    mockEventsUseQuery.mockReturnValue({ data: { events }, isLoading: false, isError: false });
+  it('passes isRelated when hovered annotation matches event', () => {
+    const events = [makeStoredEvent('e1', 'mark:added', 1)];
+    eventsSubject.next(events);
+    mockGetAnnotationUri.mockReturnValue('ann-1');
 
     renderWithProviders(
       <AnnotationHistory
         rUri={testRId}
-        hoveredAnnotationId="http://localhost/annotations/ann-1"
+        hoveredAnnotationId="ann-1"
         Link={MockLink}
         routes={mockRoutes}
       />
     );
 
-    const call = MockHistoryEvent.mock.calls[0][0];
-    expect(call.isRelated).toBe(false);
-  });
-
-  it('passes isRelated=false when no hoveredAnnotationId', () => {
-    const events = [
-      makeStoredEvent('evt-1', 'mark:added', 1),
-    ];
-    mockEventsUseQuery.mockReturnValue({ data: { events }, isLoading: false, isError: false });
-
-    renderWithProviders(
-      <AnnotationHistory
-        rUri={testRId}
-        Link={MockLink}
-        routes={mockRoutes}
-      />
+    expect(MockHistoryEvent).toHaveBeenCalledWith(
+      expect.objectContaining({ isRelated: true })
     );
-
-    const call = MockHistoryEvent.mock.calls[0][0];
-    expect(call.isRelated).toBe(false);
-  });
-
-  it('passes onEventClick and onEventHover to HistoryEvent', () => {
-    const onEventClick = vi.fn();
-    const onEventHover = vi.fn();
-
-    const events = [
-      makeStoredEvent('evt-1', 'yield:created', 1),
-    ];
-    mockEventsUseQuery.mockReturnValue({ data: { events }, isLoading: false, isError: false });
-
-    renderWithProviders(
-      <AnnotationHistory
-        rUri={testRId}
-        onEventClick={onEventClick}
-        onEventHover={onEventHover}
-        Link={MockLink}
-        routes={mockRoutes}
-      />
-    );
-
-    const call = MockHistoryEvent.mock.calls[0][0];
-    expect(call.onEventClick).toBe(onEventClick);
-    expect(call.onEventHover).toBe(onEventHover);
-  });
-
-  it('does not pass onEventClick/onEventHover when not provided', () => {
-    const events = [
-      makeStoredEvent('evt-1', 'yield:created', 1),
-    ];
-    mockEventsUseQuery.mockReturnValue({ data: { events }, isLoading: false, isError: false });
-
-    renderWithProviders(
-      <AnnotationHistory
-        rUri={testRId}
-        Link={MockLink}
-        routes={mockRoutes}
-      />
-    );
-
-    const call = MockHistoryEvent.mock.calls[0][0];
-    expect(call.onEventClick).toBeUndefined();
-    expect(call.onEventHover).toBeUndefined();
-  });
-
-  it('passes annotations from useQuery to HistoryEvent', () => {
-    const mockAnnotations = [{ id: 'ann-1', body: [] }];
-    mockAnnotationsUseQuery.mockReturnValue({ data: { annotations: mockAnnotations } });
-
-    const events = [
-      makeStoredEvent('evt-1', 'yield:created', 1),
-    ];
-    mockEventsUseQuery.mockReturnValue({ data: { events }, isLoading: false, isError: false });
-
-    renderWithProviders(
-      <AnnotationHistory
-        rUri={testRId}
-        Link={MockLink}
-        routes={mockRoutes}
-      />
-    );
-
-    const call = MockHistoryEvent.mock.calls[0][0];
-    expect(call.annotations).toEqual(mockAnnotations);
-  });
-
-  it('defaults annotations to empty array when no data', () => {
-    mockAnnotationsUseQuery.mockReturnValue({ data: undefined });
-
-    const events = [
-      makeStoredEvent('evt-1', 'yield:created', 1),
-    ];
-    mockEventsUseQuery.mockReturnValue({ data: { events }, isLoading: false, isError: false });
-
-    renderWithProviders(
-      <AnnotationHistory
-        rUri={testRId}
-        Link={MockLink}
-        routes={mockRoutes}
-      />
-    );
-
-    const call = MockHistoryEvent.mock.calls[0][0];
-    expect(call.annotations).toEqual([]);
   });
 
   it('renders history panel structure with title and list', () => {
-    const events = [
-      makeStoredEvent('evt-1', 'yield:created', 1),
-    ];
-    mockEventsUseQuery.mockReturnValue({ data: { events }, isLoading: false, isError: false });
+    const events = [makeStoredEvent('e1', 'mark:added', 1)];
+    eventsSubject.next(events);
 
     const { container } = renderWithProviders(
       <AnnotationHistory

package/src/components/resource/__tests__/BrowseView.test.tsx

@@ -2,8 +2,8 @@ import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { BrowseView } from '../BrowseView';
-import type { components } from '@semiont/core';
-import { EventBusProvider, useEventBus } from '../../../contexts/EventBusContext';
+import type { components, EventBus } from '@semiont/core';
+import { createTestSemiontWrapper } from '../../../test-utils';
 
 type Annotation = components['schemas']['Annotation'];
 
@@ -97,68 +97,43 @@ interface TrackedEvent {
 function createEventTracker() {
   const events: TrackedEvent[] = [];
   const subscriptions: Set<string> = new Set();
-
-  function EventTrackingWrapper({ children }: { children: React.ReactNode }) {
-    const eventBus = useEventBus();
-
-    React.useEffect(() => {
-      const handlers: Array<{ unsubscribe: () => void }> = [];
-
-      // Track all annotation-related events
-      const trackEvent = (eventName: string) => (payload: any) => {
-        events.push({ event: eventName, payload });
-      };
-
+  return {
+    events,
+    subscriptions,
+    clear: () => {
+      events.length = 0;
+      subscriptions.clear();
+    },
+    _attach(eventBus: EventBus) {
       const annotationEvents = [
         'beckon:hover',
         'browse:click',
         'beckon:focus',
       ] as const;
-
-      annotationEvents.forEach(eventName => {
+      annotationEvents.forEach((eventName) => {
         subscriptions.add(eventName);
-        const handler = trackEvent(eventName);
-        const subscription = eventBus.get(eventName).subscribe(handler);
-        handlers.push(subscription);
+        eventBus.get(eventName).subscribe((payload: any) => {
+          events.push({ event: eventName, payload });
+        });
       });
-
-      return () => {
-        handlers.forEach(sub => sub.unsubscribe());
-      };
-    }, [eventBus]);
-
-    return <>{children}</>;
-  }
-
-  return {
-    EventTrackingWrapper,
-    events,
-    subscriptions,
-    clear: () => {
-      events.length = 0;
-      subscriptions.clear();
     },
   };
 }
 
-// Helper to render with providers - simple composition, no spy wrappers
 const renderWithProviders = (
   component: React.ReactElement,
   options: { newAnnotationIds?: Set<string> } = {}
 ) => {
-  // Update the mock if new annotation IDs are provided
   if (options.newAnnotationIds) {
     mockNewAnnotationIds = options.newAnnotationIds;
   }
-
-  return render(
-    <EventBusProvider>
-      {component}
-    </EventBusProvider>
+  const { SemiontWrapper } = createTestSemiontWrapper();
+  const Wrapper = ({ children }: { children: React.ReactNode }) => (
+    <SemiontWrapper>{children}</SemiontWrapper>
   );
+  return render(component, { wrapper: Wrapper });
 };
 
-// Helper to render with event tracking
 const renderWithEventTracking = (
   component: React.ReactElement,
   tracker: ReturnType<typeof createEventTracker>,
@@ -167,14 +142,12 @@ const renderWithEventTracking = (
   if (options.newAnnotationIds) {
     mockNewAnnotationIds = options.newAnnotationIds;
   }
-
-  return render(
-    <EventBusProvider>
-      <tracker.EventTrackingWrapper>
-        {component}
-      </tracker.EventTrackingWrapper>
-    </EventBusProvider>
+  const { SemiontWrapper, eventBus } = createTestSemiontWrapper();
+  tracker._attach(eventBus);
+  const Wrapper = ({ children }: { children: React.ReactNode }) => (
+    <SemiontWrapper>{children}</SemiontWrapper>
   );
+  return render(component, { wrapper: Wrapper });
 };
 
 // Test data fixtures
@@ -193,7 +166,6 @@ const createMockAnnotation = (motivation: string, id: string): Annotation => ({
       end: 10,
     },
   },
-  body: [],
 });
 
 describe('BrowseView Component', () => {
@@ -515,35 +487,8 @@ describe('BrowseView Component', () => {
 
   describe('Performance - Event Listener Efficiency', () => {
     it('should handle many annotations efficiently through event delegation', async () => {
-      // Create a composition-based event tracker that subscribes like a real consumer
       const eventTracker: Array<{ event: string; annotationId: string | null }> = [];
 
-      function EventTrackingWrapper({ children }: { children: React.ReactNode }) {
-        const eventBus = useEventBus();
-
-        React.useEffect(() => {
-          // Subscribe to events like a real component would
-          const handleHover = (payload: any) => {
-            eventTracker.push({ event: 'beckon:hover', annotationId: payload?.annotationId ?? null });
-          };
-
-          const handleClick = (payload: any) => {
-            eventTracker.push({ event: 'browse:click', annotationId: payload?.annotationId ?? null });
-          };
-
-          const subscription1 = eventBus.get('beckon:hover').subscribe(handleHover);
-          const subscription2 = eventBus.get('browse:click').subscribe(handleClick);
-
-          return () => {
-            subscription1.unsubscribe();
-            subscription2.unsubscribe();
-          };
-        }, [eventBus]);
-
-        return <>{children}</>;
-      }
-
-      // Create many annotations
       const manyAnnotations = {
         highlights: Array.from({ length: 50 }, (_, i) =>
           createMockAnnotation('highlighting', `highlight-${i}`)
@@ -556,12 +501,18 @@ describe('BrowseView Component', () => {
         tags: [],
       };
 
+      const { SemiontWrapper, eventBus } = createTestSemiontWrapper();
+      eventBus.get('beckon:hover').subscribe((payload: any) => {
+        eventTracker.push({ event: 'beckon:hover', annotationId: payload?.annotationId ?? null });
+      });
+      eventBus.get('browse:click').subscribe((payload: any) => {
+        eventTracker.push({ event: 'browse:click', annotationId: payload?.annotationId ?? null });
+      });
+
       const { container } = render(
-        <EventBusProvider>
-          <EventTrackingWrapper>
-            <BrowseView {...defaultProps} annotations={manyAnnotations} />
-          </EventTrackingWrapper>
-        </EventBusProvider>
+        <SemiontWrapper>
+          <BrowseView {...defaultProps} annotations={manyAnnotations} />
+        </SemiontWrapper>
       );
 
       const browseContainer = container.querySelector('.semiont-browse-view__content');