@semiont/react-ui 0.2.33-build.78 → 0.2.33-build.79

package/src/components/resource/panels/TaggingPanel.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
+import { useMakeMeaningEvents } from '../../../contexts/MakeMeaningEventBusContext';
 import type { components, Selector } from '@semiont/api-client';
 import { TagEntry } from './TagEntry';
 import { useAnnotationPanel } from '../../../hooks/useAnnotationPanel';
@@ -71,6 +72,7 @@ export function TaggingPanel({
   pendingAnnotation
 }: TaggingPanelProps) {
   const t = useTranslations('TaggingPanel');
+  const eventBus = useMakeMeaningEvents();
   const [selectedSchemaId, setSelectedSchemaId] = useState<string>('legal-irac');
   const [selectedCategories, setSelectedCategories] = useState<Set<string>>(new Set());
 
@@ -125,6 +127,20 @@ export function TaggingPanel({
     }
   };
 
+  // Escape key handler for cancelling pending annotation
+  useEffect(() => {
+    if (!pendingAnnotation) return;
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        eventBus.emit('ui:annotation:cancel-pending');
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [pendingAnnotation, eventBus]);
+
   // Color schemes are now handled via CSS data attributes
 
   return (
@@ -191,6 +207,17 @@ export function TaggingPanel({
                 </select>
               </div>
             )}
+
+            {/* Cancel button */}
+            <div className="semiont-annotation-prompt__footer">
+              <button
+                onClick={() => eventBus.emit('ui:annotation:cancel-pending')}
+                className="semiont-button semiont-button--secondary"
+                data-type="tag"
+              >
+                {t('cancel')}
+              </button>
+            </div>
           </div>
         )}
 

package/src/components/resource/panels/UnifiedAnnotationsPanel.tsx

@@ -6,6 +6,7 @@ import type { components, Selector } from '@semiont/api-client';
 import type { RouteBuilder, LinkComponentProps } from '../../../contexts/RoutingContext';
 import type { Annotator } from '../../../lib/annotation-registry';
 import { createDetectionHandler } from '../../../lib/annotation-registry';
+import { supportsDetection } from '../../../lib/resource-utils';
 import { StatisticsPanel } from './StatisticsPanel';
 import { HighlightPanel } from './HighlightPanel';
 import { ReferencesPanel } from './ReferencesPanel';
@@ -108,27 +109,25 @@ export function UnifiedAnnotationsPanel(props: UnifiedAnnotationsPanelProps) {
   const t = useTranslations('UnifiedAnnotationsPanel');
 
   // Group annotations by type using annotators
-  const grouped = React.useMemo(() => {
-    const groups: Record<string, Annotation[]> = {
-      highlight: [],
-      comment: [],
-      assessment: [],
-      reference: [],
-      tag: []
-    };
-
-    for (const ann of props.annotations) {
-      const annotator = Object.values(props.annotators).find(a => a.matchesAnnotation(ann));
-      if (annotator) {
-        if (!groups[annotator.internalType]) {
-          groups[annotator.internalType] = [];
-        }
-        groups[annotator.internalType].push(ann);
+  const groups: Record<string, Annotation[]> = {
+    highlight: [],
+    comment: [],
+    assessment: [],
+    reference: [],
+    tag: []
+  };
+
+  for (const ann of props.annotations) {
+    const annotator = Object.values(props.annotators).find(a => a.matchesAnnotation(ann));
+    if (annotator) {
+      if (!groups[annotator.internalType]) {
+        groups[annotator.internalType] = [];
       }
+      groups[annotator.internalType].push(ann);
     }
+  }
 
-    return groups;
-  }, [props.annotations, props.annotators]);
+  const grouped = groups;
 
   // Load tab from localStorage (per-resource)
   const [activeTab, setActiveTab] = useState<TabKey>(() => {
@@ -270,8 +269,17 @@ export function UnifiedAnnotationsPanel(props: UnifiedAnnotationsPanelProps) {
           const detectionProgress = isDetecting ? props.detectionProgress : null;
 
           // Common props for all annotation panels
-          // Create detection handler on-demand if detection is supported and context is provided
-          const onDetect = (annotator.detection && props.detectionContext)
+          // Create detection handler on-demand if:
+          // 1. Annotator supports detection (has detection config)
+          // 2. Detection context is provided (API client, state handlers)
+          // 3. API client is available (not undefined/null)
+          // 4. Resource supports detection (is a text/* media type)
+          const onDetect = (
+            annotator.detection &&
+            props.detectionContext &&
+            props.detectionContext.client &&
+            supportsDetection(props.mediaType)
+          )
             ? createDetectionHandler(annotator, props.detectionContext)
             : undefined;
 
@@ -323,7 +331,6 @@ export function UnifiedAnnotationsPanel(props: UnifiedAnnotationsPanelProps) {
                 onCreateDocument={props.onCreateDocument}
                 onSearchDocuments={props.onSearchDocuments}
                 generatingReferenceId={props.generatingReferenceId}
-                mediaType={props.mediaType}
                 referencedBy={props.referencedBy}
                 referencedByLoading={props.referencedByLoading}
                 Link={props.Link}

package/src/components/resource/panels/__tests__/AssessmentPanel.test.tsx

@@ -0,0 +1,547 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import type { MockedFunction } from 'vitest';
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { AssessmentPanel } from '../AssessmentPanel';
+import type { components } from '@semiont/api-client';
+
+type Annotation = components['schemas']['Annotation'];
+
+// Mock MakeMeaningEventBusContext
+vi.mock('../../../../contexts/MakeMeaningEventBusContext', () => ({
+  useMakeMeaningEvents: vi.fn(() => ({
+    emit: vi.fn(),
+    on: vi.fn(),
+    off: vi.fn(),
+  })),
+}));
+
+// Mock TranslationContext
+vi.mock('../../../../contexts/TranslationContext', () => ({
+  useTranslations: vi.fn(() => (key: string) => {
+    const translations: Record<string, string> = {
+      title: 'Assessments',
+      noAssessments: 'No assessments yet. Select text to add an assessment.',
+      assessmentPlaceholder: 'Type your assessment here...',
+      save: 'Save',
+      cancel: 'Cancel',
+      fragmentSelected: 'Fragment selected',
+    };
+    return translations[key] || key;
+  }),
+}));
+
+// Mock @semiont/api-client utilities
+vi.mock('@semiont/api-client', async () => {
+  const actual = await vi.importActual('@semiont/api-client');
+  return {
+    ...actual,
+    getTextPositionSelector: vi.fn(),
+    getTargetSelector: vi.fn(),
+  };
+});
+
+// Mock AssessmentEntry component to simplify testing
+vi.mock('../AssessmentEntry', () => ({
+  AssessmentEntry: ({ assessment, onClick, onAssessmentRef, onAssessmentHover }: any) => (
+    <div
+      data-testid={`assessment-${assessment.id}`}
+      onClick={() => onClick()}
+    >
+      <button
+        onMouseEnter={() => onAssessmentHover?.(assessment.id)}
+        onMouseLeave={() => onAssessmentHover?.(null)}
+      >
+        Hover
+      </button>
+      <div>{assessment.id}</div>
+    </div>
+  ),
+}));
+
+// Mock DetectSection component
+vi.mock('../DetectSection', () => ({
+  DetectSection: ({ annotationType, isDetecting, onDetect }: any) => (
+    <div data-testid="detect-section">
+      <button onClick={() => onDetect?.('test instructions')}>
+        Start Detection
+      </button>
+      {isDetecting && <div>Detecting...</div>}
+    </div>
+  ),
+}));
+
+import { getTextPositionSelector, getTargetSelector } from '@semiont/api-client';
+
+const mockGetTextPositionSelector = getTextPositionSelector as MockedFunction<typeof getTextPositionSelector>;
+const mockGetTargetSelector = getTargetSelector as MockedFunction<typeof getTargetSelector>;
+
+// Test data fixtures
+const createMockAssessment = (id: string, start: number, end: number): Annotation => ({
+  '@context': 'http://www.w3.org/ns/anno.jsonld',
+  id,
+  type: 'Annotation',
+  motivation: 'assessing',
+  creator: {
+    name: `user${id}@example.com`,
+  },
+  created: `2024-01-0${id.slice(-1)}T10:00:00Z`,
+  modified: `2024-01-0${id.slice(-1)}T10:00:00Z`,
+  target: {
+    source: 'resource-1',
+    selector: {
+      type: 'TextPositionSelector',
+      start,
+      end,
+    },
+  },
+  body: [
+    {
+      type: 'TextualBody',
+      value: `Assessment ${id}`,
+      purpose: 'assessing',
+    },
+  ],
+});
+
+const mockAssessments = {
+  empty: [],
+  single: [createMockAssessment('1', 0, 10)],
+  multiple: [
+    createMockAssessment('1', 50, 60),  // Middle position
+    createMockAssessment('2', 0, 10),   // First position
+    createMockAssessment('3', 100, 110), // Last position
+  ],
+};
+
+// Helper to create pending annotation
+const createPendingAnnotation = (exact: string) => ({
+  motivation: 'assessing' as const,
+  selector: {
+    type: 'TextQuoteSelector' as const,
+    exact,
+  },
+});
+
+describe('AssessmentPanel Component', () => {
+  const defaultProps = {
+    annotations: mockAssessments.empty,
+    onAnnotationClick: vi.fn(),
+    onCreate: vi.fn(),
+    focusedAnnotationId: null,
+    pendingAnnotation: null,
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    // Mock scrollIntoView for jsdom
+    Element.prototype.scrollIntoView = vi.fn();
+
+    // Mock selector functions to return proper position data
+    mockGetTargetSelector.mockImplementation((target: any) => target.selector);
+    mockGetTextPositionSelector.mockImplementation((selector: any) => {
+      if (selector?.type === 'TextPositionSelector') {
+        return selector;
+      }
+      return null;
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render panel header with title and count', () => {
+      render(<AssessmentPanel {...defaultProps} annotations={mockAssessments.multiple} />);
+
+      expect(screen.getByText(/Assessments/)).toBeInTheDocument();
+      expect(screen.getByText(/\(3\)/)).toBeInTheDocument();
+    });
+
+    it('should show empty state when no assessments', () => {
+      render(<AssessmentPanel {...defaultProps} />);
+
+      expect(screen.getByText(/No assessments yet/)).toBeInTheDocument();
+    });
+
+    it('should render all assessments', () => {
+      render(<AssessmentPanel {...defaultProps} annotations={mockAssessments.multiple} />);
+
+      expect(screen.getByTestId('assessment-1')).toBeInTheDocument();
+      expect(screen.getByTestId('assessment-2')).toBeInTheDocument();
+      expect(screen.getByTestId('assessment-3')).toBeInTheDocument();
+    });
+
+    it('should have proper panel structure', () => {
+      const { container } = render(<AssessmentPanel {...defaultProps} />);
+
+      const panel = container.firstChild as HTMLElement;
+      expect(panel).toHaveClass('semiont-panel');
+    });
+  });
+
+  describe('Assessment Sorting', () => {
+    it('should sort assessments by position in resource', () => {
+      render(<AssessmentPanel {...defaultProps} annotations={mockAssessments.multiple} />);
+
+      const assessments = screen.getAllByTestId(/assessment-/);
+
+      // Should be sorted by start position: assessment-2 (0), assessment-1 (50), assessment-3 (100)
+      expect(assessments[0]).toHaveAttribute('data-testid', 'assessment-2');
+      expect(assessments[1]).toHaveAttribute('data-testid', 'assessment-1');
+      expect(assessments[2]).toHaveAttribute('data-testid', 'assessment-3');
+    });
+
+    it('should handle assessments without valid selectors', () => {
+      mockGetTextPositionSelector.mockReturnValue(null);
+
+      expect(() => {
+        render(<AssessmentPanel {...defaultProps} annotations={mockAssessments.multiple} />);
+      }).not.toThrow();
+    });
+  });
+
+  describe('New Assessment Creation', () => {
+    it('should not show new assessment input by default', () => {
+      render(<AssessmentPanel {...defaultProps} />);
+
+      expect(screen.queryByPlaceholderText(/Type your assessment here/)).not.toBeInTheDocument();
+    });
+
+    it('should show new assessment input when pendingAnnotation exists', () => {
+      const pendingAnnotation = createPendingAnnotation('Selected text');
+
+      render(
+        <AssessmentPanel
+          {...defaultProps}
+          pendingAnnotation={pendingAnnotation}
+        />
+      );
+
+      expect(screen.getByPlaceholderText(/Type your assessment here/)).toBeInTheDocument();
+    });
+
+    it('should display quoted selected text in new assessment area', () => {
+      const pendingAnnotation = createPendingAnnotation('Selected text for assessment');
+
+      render(
+        <AssessmentPanel
+          {...defaultProps}
+          pendingAnnotation={pendingAnnotation}
+        />
+      );
+
+      expect(screen.getByText(/"Selected text for assessment"/)).toBeInTheDocument();
+    });
+
+    it('should truncate long selected text at 100 characters', () => {
+      const longText = 'A'.repeat(150);
+      const pendingAnnotation = createPendingAnnotation(longText);
+
+      render(
+        <AssessmentPanel
+          {...defaultProps}
+          pendingAnnotation={pendingAnnotation}
+        />
+      );
+
+      expect(screen.getByText(new RegExp(`"${'A'.repeat(100)}`))).toBeInTheDocument();
+      expect(screen.getByText(/\.\.\./)).toBeInTheDocument();
+    });
+
+    it('should allow typing in new assessment textarea', async () => {
+      const pendingAnnotation = createPendingAnnotation('Selected text');
+
+      render(
+        <AssessmentPanel
+          {...defaultProps}
+          pendingAnnotation={pendingAnnotation}
+        />
+      );
+
+      const textarea = screen.getByPlaceholderText(/Type your assessment here/);
+      await userEvent.type(textarea, 'My assessment');
+
+      expect(textarea).toHaveValue('My assessment');
+    });
+
+    it('should show character count', async () => {
+      const pendingAnnotation = createPendingAnnotation('Selected text');
+
+      render(
+        <AssessmentPanel
+          {...defaultProps}
+          pendingAnnotation={pendingAnnotation}
+        />
+      );
+
+      expect(screen.getByText('0/2000')).toBeInTheDocument();
+
+      const textarea = screen.getByPlaceholderText(/Type your assessment here/);
+      await userEvent.type(textarea, 'Test');
+
+      expect(screen.getByText('4/2000')).toBeInTheDocument();
+    });
+
+    it('should enforce maxLength of 2000 characters', () => {
+      const pendingAnnotation = createPendingAnnotation('Selected text');
+
+      render(
+        <AssessmentPanel
+          {...defaultProps}
+          pendingAnnotation={pendingAnnotation}
+        />
+      );
+
+      const textarea = screen.getByPlaceholderText(/Type your assessment here/) as HTMLTextAreaElement;
+      expect(textarea).toHaveAttribute('maxLength', '2000');
+    });
+
+    it('should auto-focus new assessment textarea', () => {
+      const pendingAnnotation = createPendingAnnotation('Selected text');
+
+      render(
+        <AssessmentPanel
+          {...defaultProps}
+          pendingAnnotation={pendingAnnotation}
+        />
+      );
+
+      const textarea = screen.getByPlaceholderText(/Type your assessment here/);
+      expect(textarea).toHaveFocus();
+    });
+
+    it('should call onCreate when save is clicked', async () => {
+      const onCreate = vi.fn();
+      const pendingAnnotation = createPendingAnnotation('Selected text');
+
+      render(
+        <AssessmentPanel
+          {...defaultProps}
+          pendingAnnotation={pendingAnnotation}
+          onCreate={onCreate}
+        />
+      );
+
+      const textarea = screen.getByPlaceholderText(/Type your assessment here/);
+      await userEvent.type(textarea, 'My assessment');
+
+      const saveButton = screen.getByText('Save');
+      await userEvent.click(saveButton);
+
+      expect(onCreate).toHaveBeenCalledWith('My assessment');
+    });
+
+    it('should clear textarea after successful save', async () => {
+      const pendingAnnotation = createPendingAnnotation('Selected text');
+
+      render(
+        <AssessmentPanel
+          {...defaultProps}
+          pendingAnnotation={pendingAnnotation}
+        />
+      );
+
+      const textarea = screen.getByPlaceholderText(/Type your assessment here/);
+      await userEvent.type(textarea, 'My assessment');
+      await userEvent.click(screen.getByText('Save'));
+
+      expect(textarea).toHaveValue('');
+    });
+
+    it('should allow saving with empty text (assessment text is optional)', async () => {
+      const onCreate = vi.fn();
+      const pendingAnnotation = createPendingAnnotation('Selected text');
+
+      render(
+        <AssessmentPanel
+          {...defaultProps}
+          pendingAnnotation={pendingAnnotation}
+          onCreate={onCreate}
+        />
+      );
+
+      const saveButton = screen.getByText('Save');
+      await userEvent.click(saveButton);
+
+      // Should NOT call onCreate with empty text (handleSaveNewAssessment checks trim())
+      expect(onCreate).not.toHaveBeenCalled();
+    });
+
+    it('should have proper styling for new assessment area', () => {
+      const pendingAnnotation = createPendingAnnotation('Selected text');
+
+      const { container } = render(
+        <AssessmentPanel
+          {...defaultProps}
+          pendingAnnotation={pendingAnnotation}
+        />
+      );
+
+      const newAssessmentArea = container.querySelector('.semiont-annotation-prompt');
+      expect(newAssessmentArea).toBeInTheDocument();
+      expect(newAssessmentArea).toHaveAttribute('data-type', 'assessment');
+    });
+  });
+
+  describe('Assessment Interactions', () => {
+    it('should call onAnnotationClick when assessment is clicked', () => {
+      const onAnnotationClick = vi.fn();
+      render(
+        <AssessmentPanel
+          {...defaultProps}
+          annotations={mockAssessments.single}
+          onAnnotationClick={onAnnotationClick}
+        />
+      );
+
+      const assessment = screen.getByTestId('assessment-1');
+      fireEvent.click(assessment);
+
+      expect(onAnnotationClick).toHaveBeenCalledWith(mockAssessments.single[0]);
+    });
+  });
+
+  describe('Assessment Hover Behavior', () => {
+    it('should call onAnnotationHover when provided', () => {
+      const onAnnotationHover = vi.fn();
+      render(
+        <AssessmentPanel
+          {...defaultProps}
+          annotations={mockAssessments.single}
+          onAnnotationHover={onAnnotationHover}
+        />
+      );
+
+      const hoverButton = screen.getByText('Hover');
+      fireEvent.mouseEnter(hoverButton);
+
+      expect(onAnnotationHover).toHaveBeenCalledWith('1');
+    });
+
+    it('should not error when onAnnotationHover is not provided', () => {
+      expect(() => {
+        render(
+          <AssessmentPanel
+            {...defaultProps}
+            annotations={mockAssessments.single}
+          />
+        );
+      }).not.toThrow();
+    });
+  });
+
+  describe('Detection Section', () => {
+    it('should render DetectSection when onDetect is provided and annotateMode is true', () => {
+      render(
+        <AssessmentPanel
+          {...defaultProps}
+          onDetect={vi.fn()}
+          annotateMode={true}
+        />
+      );
+
+      expect(screen.getByTestId('detect-section')).toBeInTheDocument();
+    });
+
+    it('should not render DetectSection when onDetect is not provided', () => {
+      render(
+        <AssessmentPanel
+          {...defaultProps}
+          annotateMode={true}
+        />
+      );
+
+      expect(screen.queryByTestId('detect-section')).not.toBeInTheDocument();
+    });
+
+    it('should not render DetectSection when annotateMode is false', () => {
+      render(
+        <AssessmentPanel
+          {...defaultProps}
+          onDetect={vi.fn()}
+          annotateMode={false}
+        />
+      );
+
+      expect(screen.queryByTestId('detect-section')).not.toBeInTheDocument();
+    });
+
+    it('should call onDetect when detection is started', async () => {
+      const onDetect = vi.fn();
+      render(
+        <AssessmentPanel
+          {...defaultProps}
+          onDetect={onDetect}
+          annotateMode={true}
+        />
+      );
+
+      const detectButton = screen.getByText('Start Detection');
+      await userEvent.click(detectButton);
+
+      expect(onDetect).toHaveBeenCalledWith('test instructions');
+    });
+  });
+
+  describe('Cancel Functionality', () => {
+    it('should show Cancel button when pendingAnnotation exists', () => {
+      const pendingAnnotation = createPendingAnnotation('Selected text');
+
+      render(
+        <AssessmentPanel
+          {...defaultProps}
+          pendingAnnotation={pendingAnnotation}
+        />
+      );
+
+      expect(screen.getByText('Cancel')).toBeInTheDocument();
+    });
+
+    it('should clear textarea when Cancel button is clicked', async () => {
+      const pendingAnnotation = createPendingAnnotation('Selected text');
+
+      render(
+        <AssessmentPanel
+          {...defaultProps}
+          pendingAnnotation={pendingAnnotation}
+        />
+      );
+
+      const textarea = screen.getByPlaceholderText(/Type your assessment here/);
+      await userEvent.type(textarea, 'My assessment');
+
+      const cancelButton = screen.getByText('Cancel');
+      await userEvent.click(cancelButton);
+
+      expect(textarea).toHaveValue('');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have proper heading structure', () => {
+      render(<AssessmentPanel {...defaultProps} />);
+
+      const heading = screen.getByText(/Assessments/);
+      expect(heading).toHaveClass('semiont-panel-header__text');
+    });
+
+    it('should have proper textarea attributes for new assessments', () => {
+      const pendingAnnotation = createPendingAnnotation('Selected text');
+
+      render(
+        <AssessmentPanel
+          {...defaultProps}
+          pendingAnnotation={pendingAnnotation}
+        />
+      );
+
+      const textarea = screen.getByPlaceholderText(/Type your assessment here/);
+      expect(textarea).toHaveAttribute('rows', '3');
+    });
+  });
+});

package/src/components/resource/panels/__tests__/CommentsPanel.test.tsx

@@ -9,6 +9,15 @@ import type { components } from '@semiont/api-client';
 
 type Annotation = components['schemas']['Annotation'];
 
+// Mock MakeMeaningEventBusContext
+vi.mock('../../../../contexts/MakeMeaningEventBusContext', () => ({
+  useMakeMeaningEvents: vi.fn(() => ({
+    emit: vi.fn(),
+    on: vi.fn(),
+    off: vi.fn(),
+  })),
+}));
+
 // Mock TranslationContext
 vi.mock('../../../../contexts/TranslationContext', () => ({
   useTranslations: vi.fn(() => (key: string) => {
@@ -17,6 +26,7 @@ vi.mock('../../../../contexts/TranslationContext', () => ({
       noComments: 'No comments yet. Select text to add a comment.',
       commentPlaceholder: 'Add your comment...',
       save: 'Save',
+      cancel: 'Cancel',
     };
     return translations[key] || key;
   }),