@semiont/react-ui 0.5.1 → 0.5.2

package/src/features/resource-viewer/state/__tests__/resource-viewer-page-state-unit.test.ts

@@ -0,0 +1,203 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { BehaviorSubject, Observable, firstValueFrom } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import { annotationId, resourceId as makeResourceId } from '@semiont/core';
+import type { ShellStateUnit } from '../../../../state/shell-state-unit';
+import { createResourceViewerPageStateUnit } from '../resource-viewer-page-state-unit';
+import { makeTestClient, type TestClient } from '../../../../__tests__/test-client';
+
+const RID = makeResourceId('res-1');
+
+function mockBrowse(): ShellStateUnit {
+  return {
+    activePanel$: new BehaviorSubject(null).asObservable(),
+    scrollToAnnotationId$: new BehaviorSubject(null).asObservable(),
+    panelInitialTab$: new BehaviorSubject(null).asObservable(),
+    onScrollCompleted: vi.fn(),
+    openPanel: vi.fn(),
+    closePanel: vi.fn(),
+    dispose: vi.fn(),
+  } as unknown as ShellStateUnit;
+}
+
+function clientWithNamespaces(overrides: {
+  annotations$?: BehaviorSubject<unknown[] | undefined>;
+  entityTypes$?: BehaviorSubject<string[] | undefined>;
+  events$?: BehaviorSubject<unknown[] | undefined>;
+  referencedBy$?: BehaviorSubject<unknown[] | undefined>;
+  resourceRepresentation?: ReturnType<typeof vi.fn>;
+  mediaToken?: ReturnType<typeof vi.fn>;
+} = {}): TestClient {
+  const annotations$ = overrides.annotations$ ?? new BehaviorSubject<unknown[] | undefined>([]);
+  const entityTypes$ = overrides.entityTypes$ ?? new BehaviorSubject<string[] | undefined>(['Person']);
+  const events$ = overrides.events$ ?? new BehaviorSubject<unknown[] | undefined>([]);
+  const referencedBy$ = overrides.referencedBy$ ?? new BehaviorSubject<unknown[] | undefined>([]);
+
+  return makeTestClient({
+    browse: {
+      annotations: () => annotations$.asObservable(),
+      entityTypes: () => entityTypes$.asObservable(),
+      events: () => events$.asObservable(),
+      referencedBy: () => referencedBy$.asObservable(),
+      resourceRepresentation: overrides.resourceRepresentation ?? vi.fn().mockResolvedValue({
+        data: new TextEncoder().encode('hello').buffer,
+        contentType: 'text/plain',
+      }),
+    },
+    auth: {
+      mediaToken: overrides.mediaToken ?? vi.fn().mockResolvedValue({ token: 'tok-123' }),
+    },
+    mark: {
+      annotation: vi.fn().mockResolvedValue({ annotationId: 'ann-new' }),
+      delete: vi.fn().mockResolvedValue(undefined),
+      assist: vi.fn(() => new Observable(() => {})),
+    },
+    gather: { annotation: vi.fn(() => new Observable(() => {})) },
+    match: { search: vi.fn(() => new Observable(() => {})) },
+    yield: { fromAnnotation: vi.fn(() => new Observable(() => {})) },
+    bind: { body: vi.fn().mockResolvedValue(undefined) },
+    subscribeToResource: vi.fn().mockReturnValue(() => {}),
+  });
+}
+
+describe('createResourceViewerPageStateUnit', () => {
+  let tc: TestClient;
+
+  afterEach(() => { tc?.bus.destroy(); });
+
+  it('exposes flow VMs', () => {
+    tc = clientWithNamespaces();
+    const stateUnit = createResourceViewerPageStateUnit(tc.client, RID, 'en', mockBrowse());
+
+    expect(stateUnit.beckon).toBeDefined();
+    expect(stateUnit.mark).toBeDefined();
+    expect(stateUnit.gather).toBeDefined();
+    expect(stateUnit.yield).toBeDefined();
+    expect(stateUnit.browse).toBeDefined();
+
+    stateUnit.dispose();
+  });
+
+  it('derives annotations from browse namespace', async () => {
+    const annotations$ = new BehaviorSubject<unknown[] | undefined>([
+      { id: 'a1', motivation: 'highlighting' },
+    ]);
+    tc = clientWithNamespaces({ annotations$ });
+    const stateUnit = createResourceViewerPageStateUnit(tc.client, RID, 'en', mockBrowse());
+
+    const anns = await firstValueFrom(stateUnit.annotations$);
+    expect(anns).toHaveLength(1);
+
+    stateUnit.dispose();
+  });
+
+  it('groups annotations by type', async () => {
+    const annotations$ = new BehaviorSubject<unknown[] | undefined>([
+      { id: 'a1', motivation: 'highlighting', target: { selector: { type: 'TextQuoteSelector', exact: 'x' } } },
+      { id: 'a2', motivation: 'commenting', body: [{ type: 'TextualBody', value: 'note' }], target: { selector: { type: 'TextQuoteSelector', exact: 'y' } } },
+    ]);
+    tc = clientWithNamespaces({ annotations$ });
+    const stateUnit = createResourceViewerPageStateUnit(tc.client, RID, 'en', mockBrowse());
+
+    const groups = await firstValueFrom(stateUnit.annotationGroups$);
+    expect(groups.highlights.length + groups.comments.length).toBeGreaterThanOrEqual(1);
+
+    stateUnit.dispose();
+  });
+
+  it('exposes entity types', async () => {
+    tc = clientWithNamespaces();
+    const stateUnit = createResourceViewerPageStateUnit(tc.client, RID, 'en', mockBrowse());
+
+    const types = await firstValueFrom(stateUnit.entityTypes$);
+    expect(types).toEqual(['Person']);
+
+    stateUnit.dispose();
+  });
+
+  it('exposes events from browse namespace', async () => {
+    const events$ = new BehaviorSubject<unknown[] | undefined>([{ id: 'e1', type: 'mark:added' }]);
+    tc = clientWithNamespaces({ events$ });
+    const stateUnit = createResourceViewerPageStateUnit(tc.client, RID, 'en', mockBrowse());
+
+    const events = await firstValueFrom(stateUnit.events$);
+    expect(events).toEqual([{ id: 'e1', type: 'mark:added' }]);
+
+    stateUnit.dispose();
+  });
+
+  it('exposes referencedBy from browse namespace', async () => {
+    const referencedBy$ = new BehaviorSubject<unknown[] | undefined>([{ resourceId: 'r2' }]);
+    tc = clientWithNamespaces({ referencedBy$ });
+    const stateUnit = createResourceViewerPageStateUnit(tc.client, RID, 'en', mockBrowse());
+
+    const refs = await firstValueFrom(stateUnit.referencedBy$);
+    expect(refs).toEqual([{ resourceId: 'r2' }]);
+
+    stateUnit.dispose();
+  });
+
+  it('fetches media token for binary types', async () => {
+    const mediaToken = vi.fn().mockResolvedValue({ token: 'tok-456' });
+    tc = clientWithNamespaces({ mediaToken });
+    const stateUnit = createResourceViewerPageStateUnit(
+      tc.client, RID, 'en', mockBrowse(),
+      { mediaType: 'image/png' },
+    );
+
+    const token = await firstValueFrom(stateUnit.mediaToken$.pipe(filter((t) => t !== null)));
+    expect(token).toBe('tok-456');
+
+    stateUnit.dispose();
+  });
+
+  it('wizard initializes closed', async () => {
+    tc = clientWithNamespaces();
+    const stateUnit = createResourceViewerPageStateUnit(tc.client, RID, 'en', mockBrowse());
+
+    const wizard = await firstValueFrom(stateUnit.wizard$);
+    expect(wizard.open).toBe(false);
+
+    stateUnit.dispose();
+  });
+
+  it('bind:initiate opens wizard and fires gather:requested', async () => {
+    tc = clientWithNamespaces();
+    const stateUnit = createResourceViewerPageStateUnit(tc.client, RID, 'en', mockBrowse());
+    const gatherEvents: unknown[] = [];
+    tc.bus.get('gather:requested').subscribe((e) => gatherEvents.push(e));
+
+    tc.bus.get('bind:initiate').next({
+      annotationId: annotationId('ann-1'),
+      resourceId: makeResourceId('res-1'),
+      defaultTitle: 'Test',
+      entityTypes: ['Person'],
+    });
+
+    const wizard = await firstValueFrom(stateUnit.wizard$.pipe(filter((w) => w.open)));
+    expect(wizard.annotationId).toBe('ann-1');
+    expect(gatherEvents).toHaveLength(1);
+
+    stateUnit.dispose();
+  });
+
+  it('closeWizard resets wizard state', async () => {
+    tc = clientWithNamespaces();
+    const stateUnit = createResourceViewerPageStateUnit(tc.client, RID, 'en', mockBrowse());
+
+    tc.bus.get('bind:initiate').next({
+      annotationId: annotationId('ann-1'),
+      resourceId: makeResourceId('res-1'),
+      defaultTitle: 'Test',
+      entityTypes: [],
+    });
+
+    await firstValueFrom(stateUnit.wizard$.pipe(filter((w) => w.open)));
+    stateUnit.closeWizard();
+
+    const wizard = await firstValueFrom(stateUnit.wizard$.pipe(filter((w) => !w.open)));
+    expect(wizard.open).toBe(false);
+
+    stateUnit.dispose();
+  });
+});

package/src/features/resource-viewer/state/resource-loader-state-unit.ts

@@ -0,0 +1,26 @@
+import { type Observable, map } from 'rxjs';
+import type { ResourceDescriptor, ResourceId } from '@semiont/core';
+import type { StateUnit } from '@semiont/sdk';
+import type { SemiontClient } from '@semiont/sdk';
+
+export interface ResourceLoaderStateUnit extends StateUnit {
+  resource$: Observable<ResourceDescriptor | undefined>;
+  isLoading$: Observable<boolean>;
+  invalidate(): void;
+}
+
+export function createResourceLoaderStateUnit(
+  client: SemiontClient,
+  resourceId: ResourceId,
+): ResourceLoaderStateUnit {
+  const raw$ = client.browse.resource(resourceId);
+  const resource$ = raw$;
+  const isLoading$: Observable<boolean> = raw$.pipe(map((r) => r === undefined));
+
+  return {
+    resource$,
+    isLoading$,
+    invalidate: () => client.browse.invalidateResourceDetail(resourceId),
+    dispose: () => {},
+  };
+}

package/src/features/resource-viewer/state/resource-viewer-page-state-unit.ts

@@ -0,0 +1,180 @@
+import { BehaviorSubject, type Observable, map } from 'rxjs';
+import type { ResourceId, components } from '@semiont/core';
+import { createDisposer } from '@semiont/sdk';
+import type { StateUnit } from '@semiont/sdk';
+import type { ShellStateUnit } from '../../../state/shell-state-unit';
+import { createBeckonStateUnit, type BeckonStateUnit } from '@semiont/sdk';
+import { createMarkStateUnit, type MarkStateUnit } from '@semiont/sdk';
+import { createGatherStateUnit, type GatherStateUnit } from '@semiont/sdk';
+import { createMatchStateUnit } from '@semiont/sdk';
+import { createYieldStateUnit, type YieldStateUnit } from '@semiont/sdk';
+import type { SemiontClient } from '@semiont/sdk';
+import { decodeWithCharset } from '@semiont/core';
+import { isHighlight, isComment, isAssessment, isReference, isTag } from '@semiont/core';
+import type { ReferencedByEntry } from '@semiont/sdk';
+
+import type { Annotation } from '@semiont/core';
+
+export interface AnnotationGroups {
+  highlights: Annotation[];
+  comments: Annotation[];
+  assessments: Annotation[];
+  references: Annotation[];
+  tags: Annotation[];
+}
+type StoredEventResponse = components['schemas']['StoredEventResponse'];
+
+export interface WizardState {
+  open: boolean;
+  annotationId: string | null;
+  resourceId: string | null;
+  defaultTitle: string;
+  entityTypes: string[];
+}
+
+const WIZARD_CLOSED: WizardState = {
+  open: false, annotationId: null, resourceId: null, defaultTitle: '', entityTypes: [],
+};
+
+export interface ResourceViewerPageStateUnit extends StateUnit {
+  beckon: BeckonStateUnit;
+  browse: ShellStateUnit;
+  mark: MarkStateUnit;
+  gather: GatherStateUnit;
+  yield: YieldStateUnit;
+
+  annotations$: Observable<Annotation[]>;
+  annotationGroups$: Observable<AnnotationGroups>;
+  entityTypes$: Observable<string[]>;
+  events$: Observable<StoredEventResponse[]>;
+  referencedBy$: Observable<ReferencedByEntry[]>;
+  content$: Observable<string>;
+  contentLoading$: Observable<boolean>;
+  mediaToken$: Observable<string | null>;
+  wizard$: Observable<WizardState>;
+
+  closeWizard(): void;
+}
+
+export function createResourceViewerPageStateUnit(
+  client: SemiontClient,
+  resourceId: ResourceId,
+  locale: string,
+  browse: ShellStateUnit,
+  options?: { mediaType?: string },
+): ResourceViewerPageStateUnit {
+  const disposer = createDisposer();
+
+  const beckon = createBeckonStateUnit(client);
+  const mark = createMarkStateUnit(client, resourceId);
+  const gather = createGatherStateUnit(client, resourceId);
+  const matchStateUnit = createMatchStateUnit(client, resourceId);
+  const yieldStateUnit = createYieldStateUnit(client, resourceId, locale);
+
+  disposer.add(beckon);
+  disposer.add(browse);
+  disposer.add(mark);
+  disposer.add(gather);
+  disposer.add(matchStateUnit);
+  disposer.add(yieldStateUnit);
+
+  const annotations$: Observable<Annotation[]> = client.browse.annotations(resourceId).pipe(
+    map((a) => a ?? []),
+  );
+
+  const annotationGroups$: Observable<AnnotationGroups> = annotations$.pipe(
+    map((anns) => {
+      const groups: AnnotationGroups = { highlights: [], comments: [], assessments: [], references: [], tags: [] };
+      for (const ann of anns) {
+        if (isHighlight(ann)) groups.highlights.push(ann);
+        else if (isComment(ann)) groups.comments.push(ann);
+        else if (isAssessment(ann)) groups.assessments.push(ann);
+        else if (isReference(ann)) groups.references.push(ann);
+        else if (isTag(ann)) groups.tags.push(ann);
+      }
+      return groups;
+    }),
+  );
+
+  const entityTypes$: Observable<string[]> = client.browse.entityTypes().pipe(
+    map((e) => e ?? []),
+  );
+
+  const events$: Observable<StoredEventResponse[]> = client.browse.events(resourceId).pipe(
+    map((e) => e ?? []),
+  );
+
+  const referencedBy$: Observable<ReferencedByEntry[]> = client.browse.referencedBy(resourceId).pipe(
+    map((r) => r ?? []),
+  );
+
+  const content$ = new BehaviorSubject<string>('');
+  const contentLoading$ = new BehaviorSubject<boolean>(false);
+  const mediaToken$ = new BehaviorSubject<string | null>(null);
+
+  const mediaType = options?.mediaType || 'text/plain';
+  const isBinaryType = mediaType.startsWith('image/') || mediaType === 'application/pdf';
+
+  if (!isBinaryType && mediaType) {
+    contentLoading$.next(true);
+    client.browse.resourceRepresentation(resourceId, { accept: mediaType })
+      .then(({ data }) => {
+        content$.next(decodeWithCharset(data, mediaType));
+        contentLoading$.next(false);
+      })
+      .catch(() => { contentLoading$.next(false); });
+  }
+
+  if (isBinaryType) {
+    client.auth!.mediaToken(resourceId)
+      .then(({ token }) => mediaToken$.next(token))
+      .catch(() => {});
+  }
+
+  const wizard$ = new BehaviorSubject<WizardState>(WIZARD_CLOSED);
+
+  const unsubscribeResource = client.subscribeToResource(resourceId);
+  disposer.add(unsubscribeResource);
+
+  const bindInitiateSub = client.bus.get('bind:initiate').subscribe((event) => {
+    wizard$.next({
+      open: true,
+      annotationId: event.annotationId,
+      resourceId: event.resourceId,
+      defaultTitle: event.defaultTitle,
+      entityTypes: event.entityTypes,
+    });
+    client.bus.get('gather:requested').next({
+      correlationId: crypto.randomUUID(),
+      annotationId: event.annotationId,
+      resourceId: event.resourceId,
+      options: { contextWindow: 2000 },
+    });
+  });
+  disposer.add(() => bindInitiateSub.unsubscribe());
+
+  return {
+    beckon,
+    browse,
+    mark,
+    gather,
+    yield: yieldStateUnit,
+    annotations$,
+    annotationGroups$,
+    entityTypes$,
+    events$,
+    referencedBy$,
+    content$: content$.asObservable(),
+    contentLoading$: contentLoading$.asObservable(),
+    mediaToken$: mediaToken$.asObservable(),
+    wizard$: wizard$.asObservable(),
+    closeWizard: () => wizard$.next(WIZARD_CLOSED),
+    dispose: () => {
+      wizard$.complete();
+      content$.complete();
+      contentLoading$.complete();
+      mediaToken$.complete();
+      disposer.dispose();
+    },
+  };
+}