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

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

@@ -1,10 +1,12 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
+import { useEventBus } from '../../../contexts/EventBusContext';
+import { useEventSubscriptions } from '../../../contexts/useEventSubscription';
 import type { components, Selector } from '@semiont/api-client';
+import { getTextPositionSelector, getTargetSelector } from '@semiont/api-client';
 import { TagEntry } from './TagEntry';
-import { useAnnotationPanel } from '../../../hooks/useAnnotationPanel';
 import { PanelHeader } from './PanelHeader';
 import { getAllTagSchemas } from '../../../lib/tag-schemas';
 import './TaggingPanel.css';
@@ -37,13 +39,7 @@ function getSelectorDisplayText(selector: Selector | Selector[]): string | null
 
 interface TaggingPanelProps {
   annotations: Annotation[];
-  onAnnotationClick: (annotation: Annotation) => void;
-  focusedAnnotationId: string | null;
-  hoveredAnnotationId?: string | null;
-  onAnnotationHover?: (annotationId: string | null) => void;
   annotateMode?: boolean;
-  onDetect?: (schemaId: string, categories: string[]) => void | Promise<void>;
-  onCreate: (schemaId: string, category: string) => void | Promise<void>;
   isDetecting?: boolean;
   detectionProgress?: {
     status: string;
@@ -55,24 +51,35 @@ interface TaggingPanelProps {
     requestParams?: Array<{ label: string; value: string }>;
   } | null;
   pendingAnnotation: PendingAnnotation | null;
+  scrollToAnnotationId?: string | null;
+  onScrollCompleted?: () => void;
+  hoveredAnnotationId?: string | null;
 }
 
+/**
+ * Panel for managing tag annotations with schema-based detection
+ *
+ * @emits detection:start - Start tag detection. Payload: { motivation: 'tagging', options: { schemaId: string, categories: string[] } }
+ * @emits annotation:cancel-pending - Cancel pending tag annotation. Payload: undefined
+ * @emits annotation:create - Create new tag annotation. Payload: { motivation: 'tagging', selector: Selector | Selector[], body: Body[] }
+ * @subscribes annotation:click - Annotation clicked. Payload: { annotationId: string }
+ */
 export function TaggingPanel({
   annotations,
-  onAnnotationClick,
-  focusedAnnotationId,
-  hoveredAnnotationId,
-  onAnnotationHover,
   annotateMode = true,
-  onDetect,
-  onCreate,
   isDetecting = false,
   detectionProgress,
-  pendingAnnotation
+  pendingAnnotation,
+  scrollToAnnotationId,
+  onScrollCompleted,
+  hoveredAnnotationId,
 }: TaggingPanelProps) {
   const t = useTranslations('TaggingPanel');
+  const eventBus = useEventBus();
   const [selectedSchemaId, setSelectedSchemaId] = useState<string>('legal-irac');
   const [selectedCategories, setSelectedCategories] = useState<Set<string>>(new Set());
+  const [focusedAnnotationId, setFocusedAnnotationId] = useState<string | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   // Collapsible detection section state - load from localStorage, default expanded
   const [isDetectExpanded, setIsDetectExpanded] = useState(() => {
@@ -87,8 +94,76 @@ export function TaggingPanel({
     localStorage.setItem('detect-section-expanded-tag', String(isDetectExpanded));
   }, [isDetectExpanded]);
 
-  const { sortedAnnotations, containerRef, handleAnnotationRef } =
-    useAnnotationPanel(annotations, hoveredAnnotationId);
+  // Subscribe to click events - update focused state
+  // Event handler for annotation clicks (extracted to avoid inline arrow function)
+  const handleAnnotationClick = useCallback(({ annotationId }: { annotationId: string }) => {
+    setFocusedAnnotationId(annotationId);
+    setTimeout(() => setFocusedAnnotationId(null), 3000);
+  }, []);
+
+  useEventSubscriptions({
+    'annotation:click': handleAnnotationClick,
+  });
+
+  // Direct ref management
+  const entryRefs = useRef<Map<string, HTMLDivElement>>(new Map());
+
+  // Sort annotations by their position in the resource
+  const sortedAnnotations = useMemo(() => {
+    return [...annotations].sort((a, b) => {
+      const aSelector = getTextPositionSelector(getTargetSelector(a.target));
+      const bSelector = getTextPositionSelector(getTargetSelector(b.target));
+      if (!aSelector || !bSelector) return 0;
+      return aSelector.start - bSelector.start;
+    });
+  }, [annotations]);
+
+  // Ref callback for entry components
+  const setEntryRef = useCallback((id: string, element: HTMLDivElement | null) => {
+    if (element) {
+      entryRefs.current.set(id, element);
+    } else {
+      entryRefs.current.delete(id);
+    }
+  }, []);
+
+  // Handle scrollToAnnotationId (click scroll)
+  useEffect(() => {
+    if (!scrollToAnnotationId) return;
+    const element = entryRefs.current.get(scrollToAnnotationId);
+    if (element && containerRef.current) {
+      const elementTop = element.offsetTop;
+      const containerHeight = containerRef.current.clientHeight;
+      const elementHeight = element.offsetHeight;
+      const scrollTo = elementTop - (containerHeight / 2) + (elementHeight / 2);
+      containerRef.current.scrollTo({ top: scrollTo, behavior: 'smooth' });
+      element.classList.remove('semiont-annotation-pulse');
+      void element.offsetWidth;
+      element.classList.add('semiont-annotation-pulse');
+      if (onScrollCompleted) onScrollCompleted();
+    }
+  }, [scrollToAnnotationId]);
+
+  // Handle hoveredAnnotationId (hover scroll only - pulse is handled by isHovered prop)
+  useEffect(() => {
+    if (!hoveredAnnotationId) return;
+    const element = entryRefs.current.get(hoveredAnnotationId);
+    if (!element || !containerRef.current) return;
+
+    const container = containerRef.current;
+    const elementRect = element.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    const isVisible = elementRect.top >= containerRect.top && elementRect.bottom <= containerRect.bottom;
+    if (!isVisible) {
+      const elementTop = element.offsetTop;
+      const containerHeight = container.clientHeight;
+      const elementHeight = element.offsetHeight;
+      const scrollTo = elementTop - (containerHeight / 2) + (elementHeight / 2);
+      container.scrollTo({ top: scrollTo, behavior: 'smooth' });
+    }
+
+    // Pulse effect is handled by isHovered prop on TagEntry
+  }, [hoveredAnnotationId]);
 
   const schemas = getAllTagSchemas();
   const selectedSchema = schemas.find(s => s.id === selectedSchemaId);
@@ -119,12 +194,32 @@ export function TaggingPanel({
   };
 
   const handleDetect = () => {
-    if (onDetect && selectedCategories.size > 0) {
-      onDetect(selectedSchemaId, Array.from(selectedCategories));
+    if (selectedCategories.size > 0) {
+      eventBus.emit('detection:start', {
+        motivation: 'tagging',
+        options: {
+          schemaId: selectedSchemaId,
+          categories: Array.from(selectedCategories),
+        },
+      });
       setSelectedCategories(new Set()); // Reset after detection
     }
   };
 
+  // Escape key handler for cancelling pending annotation
+  useEffect(() => {
+    if (!pendingAnnotation) return;
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        eventBus.emit('annotation:cancel-pending', undefined);
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [pendingAnnotation]);
+
   // Color schemes are now handled via CSS data attributes
 
   return (
@@ -178,8 +273,19 @@ export function TaggingPanel({
                 <select
                   className="semiont-select"
                   onChange={(e) => {
-                    if (e.target.value) {
-                      onCreate(selectedSchemaId, e.target.value);
+                    if (e.target.value && pendingAnnotation) {
+                      eventBus.emit('annotation:create', {
+                        motivation: 'tagging',
+                        selector: pendingAnnotation.selector,
+                        body: [
+                          {
+                            type: 'TextualBody',
+                            value: e.target.value,
+                            purpose: 'tagging',
+                            schema: selectedSchemaId,
+                          },
+                        ],
+                      });
                     }
                   }}
                   defaultValue=""
@@ -191,11 +297,22 @@ export function TaggingPanel({
                 </select>
               </div>
             )}
+
+            {/* Cancel button */}
+            <div className="semiont-annotation-prompt__footer">
+              <button
+                onClick={() => eventBus.emit('annotation:cancel-pending', undefined)}
+                className="semiont-button semiont-button--secondary"
+                data-type="tag"
+              >
+                {t('cancel')}
+              </button>
+            </div>
           </div>
         )}
 
         {/* Detection Section - only in Annotate mode */}
-        {annotateMode && onDetect && (
+        {annotateMode && (
           <div className="semiont-panel__section">
             <button
               onClick={() => setIsDetectExpanded(!isDetectExpanded)}
@@ -363,9 +480,8 @@ export function TaggingPanel({
                 key={tag.id}
                 tag={tag}
                 isFocused={tag.id === focusedAnnotationId}
-                onClick={() => onAnnotationClick(tag)}
-                onTagRef={handleAnnotationRef}
-                {...(onAnnotationHover && { onTagHover: onAnnotationHover })}
+                isHovered={tag.id === hoveredAnnotationId}
+                ref={(el) => setEntryRef(tag.id, el)}
               />
             ))
           )}

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

@@ -5,7 +5,6 @@ import { useTranslations } from '../../../contexts/TranslationContext';
 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 { StatisticsPanel } from './StatisticsPanel';
 import { HighlightPanel } from './HighlightPanel';
 import { ReferencesPanel } from './ReferencesPanel';
@@ -28,13 +27,13 @@ interface PendingAnnotation {
 const TAB_ORDER: TabKey[] = ['statistics', 'reference', 'highlight', 'assessment', 'comment', 'tag'];
 
 /**
- * Simplified UnifiedAnnotationsPanel using Annotator abstraction
+ * Simplified UnifiedAnnotationsPanel using event-driven architecture
  *
  * Key simplifications:
  * - Single annotations array (grouped internally by motivation)
  * - Single focusedAnnotationId (motivation-agnostic)
- * - Single hoveredAnnotationId (motivation-agnostic)
- * - Single onCreateAnnotation handler (motivation-based dispatch)
+ * - Hover state managed via event bus (no props needed)
+ * - All operations managed via event bus (no callback props)
  */
 interface UnifiedAnnotationsPanelProps {
   // All annotations (grouped internally by motivation)
@@ -43,29 +42,6 @@ interface UnifiedAnnotationsPanelProps {
   // Annotators (pure static data - no handlers)
   annotators: Record<string, Annotator>;
 
-  // Detection context (passed separately so annotators remain stable)
-  detectionContext?: {
-    client: any;
-    rUri: any;
-    setDetectingMotivation: (motivation: Motivation | null) => void;
-    setMotivationDetectionProgress: (progress: any) => void;
-    detectionStreamRef: any;
-    cacheManager: any;
-    showSuccess: (message: string) => void;
-    showError: (message: string) => void;
-  };
-
-  // Unified state (motivation-agnostic)
-  focusedAnnotationId: string | null;
-  hoveredAnnotationId?: string | null;
-
-  // Shared UI handlers (same for all annotation types)
-  onAnnotationClick: (annotation: Annotation) => void;
-  onAnnotationHover?: (annotationId: string | null) => void;
-
-  // Single generic creation handler
-  onCreateAnnotation: (motivation: Motivation, ...args: any[]) => void;
-
   // Mode
   annotateMode?: boolean;
 
@@ -84,20 +60,23 @@ interface UnifiedAnnotationsPanelProps {
   // Unified pending annotation (for creating new annotations)
   pendingAnnotation: PendingAnnotation | null;
 
-  // Reference-specific props (TODO: refactor these into annotator handlers)
+  // Reference-specific props
   allEntityTypes?: string[];
   generatingReferenceId?: string | null;
-  onGenerateDocument?: (referenceId: string, options: { title: string; prompt?: string }) => void;
-  onCreateDocument?: (annotationUri: string, title: string, entityTypes: string[]) => void;
-  onSearchDocuments?: (referenceId: string, searchTerm: string) => void;
-  onCancelDetection?: () => void;
-  mediaType?: string;
   referencedBy?: any[];
   referencedByLoading?: boolean;
 
   // Resource context
   resourceId?: string;
   initialTab?: TabKey;
+  initialTabGeneration?: number; // Generation counter for tab switching
+
+  // Scroll coordination (one-time action, will be cleared after use)
+  scrollToAnnotationId?: string | null;
+  onScrollCompleted?: () => void;
+
+  // Hover coordination (for bidirectional hover highlighting)
+  hoveredAnnotationId?: string | null;
 
   // Routing
   Link: React.ComponentType<LinkComponentProps>;
@@ -108,27 +87,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>(() => {
@@ -157,23 +134,14 @@ export function UnifiedAnnotationsPanel(props: UnifiedAnnotationsPanelProps) {
     localStorage.setItem(storageKey, activeTab);
   }, [activeTab, props.resourceId]);
 
-  // Auto-switch to the appropriate tab when an annotation is focused
-  useEffect(() => {
-    if (!props.focusedAnnotationId) return;
-
-    // Find which annotation type this focused annotation belongs to
-    const focusedAnnotation = props.annotations.find(ann => ann.id === props.focusedAnnotationId);
-    if (!focusedAnnotation) return;
 
-    // Determine the annotator key for this annotation
-    for (const [key, annotator] of Object.entries(props.annotators)) {
-      if (annotator.matchesAnnotation(focusedAnnotation)) {
-        setActiveTab(key as TabKey);
-        break;
-      }
+  // Switch to initialTab when generation counter changes (e.g., when clicking annotations with different motivations)
+  // Using generation counter ensures we can switch to the same tab multiple times
+  useEffect(() => {
+    if (props.initialTab && props.initialTabGeneration !== undefined) {
+      setActiveTab(props.initialTab);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.focusedAnnotationId]);
+  }, [props.initialTabGeneration]); // Only watch generation counter, not the tab itself
 
   // Auto-switch to the appropriate tab when creating a new annotation
   useEffect(() => {
@@ -267,29 +235,22 @@ export function UnifiedAnnotationsPanel(props: UnifiedAnnotationsPanelProps) {
 
           const annotations = grouped[activeTab] || [];
           const isDetecting = props.detectingMotivation === annotator.motivation;
-          const detectionProgress = isDetecting ? props.detectionProgress : null;
+          // Pass through detectionProgress even when not actively detecting
+          // This allows final progress message to display after detection completes
+          const detectionProgress = props.detectionProgress;
 
-          // 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)
-            ? createDetectionHandler(annotator, props.detectionContext)
-            : undefined;
-
-          // Create wrapper function that calls onCreateAnnotation with the annotator's motivation
-          const onCreate = (...args: any[]) => props.onCreateAnnotation(annotator.motivation, ...args);
+          console.log('[UnifiedAnnotationsPanel] activeTab:', activeTab, 'annotator.motivation:', annotator.motivation, 'props.detectingMotivation:', props.detectingMotivation, 'isDetecting:', isDetecting, 'detectionProgress:', detectionProgress);
 
+          // Common props for all annotation panels
           const commonProps = {
             annotations,
-            onAnnotationClick: props.onAnnotationClick,
-            focusedAnnotationId: props.focusedAnnotationId,
-            hoveredAnnotationId: props.hoveredAnnotationId,
-            onAnnotationHover: props.onAnnotationHover,
-            onDetect,
-            onCreate,
             pendingAnnotation: props.pendingAnnotation,
             isDetecting,
             detectionProgress,
-            annotateMode: props.annotateMode
+            annotateMode: props.annotateMode,
+            scrollToAnnotationId: props.scrollToAnnotationId,
+            onScrollCompleted: props.onScrollCompleted,
+            hoveredAnnotationId: props.hoveredAnnotationId
           };
 
           // Render specific panel based on activeTab with full type safety
@@ -297,8 +258,6 @@ export function UnifiedAnnotationsPanel(props: UnifiedAnnotationsPanelProps) {
             return (
               <HighlightPanel
                 {...commonProps}
-                onAnnotationClick={commonProps.onAnnotationClick!}
-                onCreate={onCreate}
               />
             );
           }
@@ -307,23 +266,15 @@ export function UnifiedAnnotationsPanel(props: UnifiedAnnotationsPanelProps) {
             return (
               <ReferencesPanel
                 annotations={commonProps.annotations}
-                onAnnotationClick={commonProps.onAnnotationClick!}
-                focusedAnnotationId={commonProps.focusedAnnotationId}
-                hoveredAnnotationId={commonProps.hoveredAnnotationId}
-                onAnnotationHover={commonProps.onAnnotationHover}
-                onDetect={onDetect}
-                onCreate={onCreate}
                 pendingAnnotation={commonProps.pendingAnnotation}
                 isDetecting={commonProps.isDetecting}
                 detectionProgress={commonProps.detectionProgress}
                 annotateMode={commonProps.annotateMode}
+                scrollToAnnotationId={commonProps.scrollToAnnotationId}
+                onScrollCompleted={commonProps.onScrollCompleted}
+                hoveredAnnotationId={commonProps.hoveredAnnotationId}
                 allEntityTypes={props.allEntityTypes || []}
-                onCancelDetection={props.onCancelDetection || (() => {})}
-                onGenerateDocument={props.onGenerateDocument}
-                onCreateDocument={props.onCreateDocument}
-                onSearchDocuments={props.onSearchDocuments}
                 generatingReferenceId={props.generatingReferenceId}
-                mediaType={props.mediaType}
                 referencedBy={props.referencedBy}
                 referencedByLoading={props.referencedByLoading}
                 Link={props.Link}
@@ -336,8 +287,6 @@ export function UnifiedAnnotationsPanel(props: UnifiedAnnotationsPanelProps) {
             return (
               <AssessmentPanel
                 {...commonProps}
-                onAnnotationClick={commonProps.onAnnotationClick!}
-                onCreate={onCreate}
               />
             );
           }
@@ -346,8 +295,6 @@ export function UnifiedAnnotationsPanel(props: UnifiedAnnotationsPanelProps) {
             return (
               <CommentsPanel
                 {...commonProps}
-                onAnnotationClick={commonProps.onAnnotationClick!}
-                onCreate={onCreate}
               />
             );
           }
@@ -356,8 +303,6 @@ export function UnifiedAnnotationsPanel(props: UnifiedAnnotationsPanelProps) {
             return (
               <TaggingPanel
                 {...commonProps}
-                onAnnotationClick={commonProps.onAnnotationClick!}
-                onCreate={onCreate}
               />
             );
           }