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

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

@@ -1,44 +1,30 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
+import { forwardRef } from 'react';
 import type { components } from '@semiont/api-client';
 import { getAnnotationExactText } from '@semiont/api-client';
 import { getTagCategory, getTagSchemaId } from '@semiont/ontology';
 import { getTagSchema } from '../../../lib/tag-schemas';
+import { useEventBus } from '../../../contexts/EventBusContext';
 
 type Annotation = components['schemas']['Annotation'];
 
 interface TagEntryProps {
   tag: Annotation;
   isFocused: boolean;
-  onClick: () => void;
-  onTagRef: (tagId: string, el: HTMLElement | null) => void;
-  onTagHover?: (tagId: string | null) => void;
+  isHovered?: boolean;
 }
 
-export function TagEntry({
-  tag,
-  isFocused,
-  onClick,
-  onTagRef,
-  onTagHover,
-}: TagEntryProps) {
-  const tagRef = useRef<HTMLDivElement>(null);
-
-  // Register ref with parent
-  useEffect(() => {
-    onTagRef(tag.id, tagRef.current);
-    return () => {
-      onTagRef(tag.id, null);
-    };
-  }, [tag.id, onTagRef]);
-
-  // Scroll to tag when focused
-  useEffect(() => {
-    if (isFocused && tagRef.current) {
-      tagRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
-    }
-  }, [isFocused]);
+export const TagEntry = forwardRef<HTMLDivElement, TagEntryProps>(
+  function TagEntry(
+    {
+      tag,
+      isFocused,
+      isHovered = false,
+    },
+    ref
+  ) {
+  const eventBus = useEventBus();
 
   const selectedText = getAnnotationExactText(tag);
   const category = getTagCategory(tag);
@@ -47,11 +33,17 @@ export function TagEntry({
 
   return (
     <div
-      ref={tagRef}
-      onClick={onClick}
-      onMouseEnter={() => onTagHover?.(tag.id)}
-      onMouseLeave={() => onTagHover?.(null)}
-      className="semiont-annotation-entry"
+      ref={ref}
+      onClick={() => {
+        eventBus.emit('annotation:click', { annotationId: tag.id, motivation: tag.motivation });
+      }}
+      onMouseEnter={() => {
+        eventBus.emit('annotation:hover', { annotationId: tag.id });
+      }}
+      onMouseLeave={() => {
+        eventBus.emit('annotation:hover', { annotationId: null });
+      }}
+      className={`semiont-annotation-entry${isHovered ? ' semiont-annotation-pulse' : ''}`}
       data-type="tag"
       data-focused={isFocused ? 'true' : 'false'}
     >
@@ -73,4 +65,4 @@ export function TagEntry({
       </div>
     </div>
   );
-}
+});

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

@@ -1,11 +1,12 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { useTranslations } from '../../../contexts/TranslationContext';
-import { useMakeMeaningEvents } from '../../../contexts/MakeMeaningEventBusContext';
+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';
@@ -38,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;
@@ -56,25 +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 = useMakeMeaningEvents();
+  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(() => {
@@ -89,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);
@@ -121,8 +194,14 @@ 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
     }
   };
@@ -133,13 +212,13 @@ export function TaggingPanel({
 
     const handleEscape = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
-        eventBus.emit('ui:annotation:cancel-pending');
+        eventBus.emit('annotation:cancel-pending', undefined);
       }
     };
 
     document.addEventListener('keydown', handleEscape);
     return () => document.removeEventListener('keydown', handleEscape);
-  }, [pendingAnnotation, eventBus]);
+  }, [pendingAnnotation]);
 
   // Color schemes are now handled via CSS data attributes
 
@@ -194,8 +273,18 @@ 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' as const,
+                            value: e.target.value,
+                            purpose: 'tagging' as const,
+                          },
+                        ],
+                      });
                     }
                   }}
                   defaultValue=""
@@ -211,7 +300,7 @@ export function TaggingPanel({
             {/* Cancel button */}
             <div className="semiont-annotation-prompt__footer">
               <button
-                onClick={() => eventBus.emit('ui:annotation:cancel-pending')}
+                onClick={() => eventBus.emit('annotation:cancel-pending', undefined)}
                 className="semiont-button semiont-button--secondary"
                 data-type="tag"
               >
@@ -222,7 +311,7 @@ export function TaggingPanel({
         )}
 
         {/* Detection Section - only in Annotate mode */}
-        {annotateMode && onDetect && (
+        {annotateMode && (
           <div className="semiont-panel__section">
             <button
               onClick={() => setIsDetectExpanded(!isDetectExpanded)}
@@ -390,9 +479,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,8 +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 { supportsDetection } from '../../../lib/resource-utils';
 import { StatisticsPanel } from './StatisticsPanel';
 import { HighlightPanel } from './HighlightPanel';
 import { ReferencesPanel } from './ReferencesPanel';
@@ -29,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)
@@ -44,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;
 
@@ -85,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>;
@@ -156,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(() => {
@@ -266,38 +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:
-          // 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;
-
-          // 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
@@ -305,8 +258,6 @@ export function UnifiedAnnotationsPanel(props: UnifiedAnnotationsPanelProps) {
             return (
               <HighlightPanel
                 {...commonProps}
-                onAnnotationClick={commonProps.onAnnotationClick!}
-                onCreate={onCreate}
               />
             );
           }
@@ -315,21 +266,14 @@ 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}
                 referencedBy={props.referencedBy}
                 referencedByLoading={props.referencedByLoading}
@@ -343,8 +287,6 @@ export function UnifiedAnnotationsPanel(props: UnifiedAnnotationsPanelProps) {
             return (
               <AssessmentPanel
                 {...commonProps}
-                onAnnotationClick={commonProps.onAnnotationClick!}
-                onCreate={onCreate}
               />
             );
           }
@@ -353,8 +295,6 @@ export function UnifiedAnnotationsPanel(props: UnifiedAnnotationsPanelProps) {
             return (
               <CommentsPanel
                 {...commonProps}
-                onAnnotationClick={commonProps.onAnnotationClick!}
-                onCreate={onCreate}
               />
             );
           }
@@ -363,8 +303,6 @@ export function UnifiedAnnotationsPanel(props: UnifiedAnnotationsPanelProps) {
             return (
               <TaggingPanel
                 {...commonProps}
-                onAnnotationClick={commonProps.onAnnotationClick!}
-                onCreate={onCreate}
               />
             );
           }