@striae-org/striae 3.0.4

package/app/components/canvas/canvas.tsx

@@ -0,0 +1,449 @@
+import { useEffect, useState, useRef, useContext } from 'react';
+import { BoxAnnotations } from './box-annotations/box-annotations';
+import { ConfirmationModal } from './confirmation/confirmation';
+import { AnnotationData, BoxAnnotation, ConfirmationData } from '~/types/annotations';
+import { AuthContext } from '~/contexts/auth.context';
+import { storeConfirmation } from '~/components/actions/confirm-export';
+import { auditService } from '~/services/audit.service';
+import styles from './canvas.module.css';
+
+interface CanvasProps {
+  imageUrl?: string;
+  filename?: string;
+  company?: string;
+  firstName?: string;
+  error?: string;
+  activeAnnotations?: Set<string>;
+  annotationData?: AnnotationData | null;
+  onAnnotationUpdate?: (annotationData: AnnotationData) => void;
+  isBoxAnnotationMode?: boolean;
+  boxAnnotationColor?: string;
+  isReadOnly?: boolean;
+  // Confirmation data for storing case-level confirmations
+  caseNumber: string; // Required for audit logging
+  currentImageId?: string;
+}
+
+type ImageLoadError = {
+  type: 'load' | 'network' | 'invalid';
+  message: string;
+}
+
+export const Canvas = ({ 
+  imageUrl, 
+  filename, 
+  company, 
+  firstName, 
+  error, 
+  activeAnnotations, 
+  annotationData,
+  onAnnotationUpdate,
+  isBoxAnnotationMode = false,
+  boxAnnotationColor = '#FF0000',
+  isReadOnly = false,
+  caseNumber,
+  currentImageId
+}: CanvasProps) => {
+  const { user } = useContext(AuthContext);
+  const [isLoading, setIsLoading] = useState(false);
+  const [loadError, setLoadError] = useState<ImageLoadError | undefined>();
+  const [isFlashing, setIsFlashing] = useState(false);
+  const [isConfirmationModalOpen, setIsConfirmationModalOpen] = useState(false);
+  const imageRef = useRef<HTMLImageElement>(null);
+
+  // Handle box annotation changes
+  const handleBoxAnnotationsChange = (boxAnnotations: BoxAnnotation[]) => {
+    if (!onAnnotationUpdate || !annotationData || isReadOnly || annotationData.confirmationData) return;
+    
+    const updatedAnnotationData: AnnotationData = {
+      ...annotationData,
+      boxAnnotations
+    };
+    
+    onAnnotationUpdate(updatedAnnotationData);
+  };
+
+  // Handle annotation data changes (for additional notes updates)
+  const handleAnnotationDataChange = (data: { additionalNotes?: string; boxAnnotations?: BoxAnnotation[]; earliestAnnotationTimestamp?: string }) => {
+    if (!onAnnotationUpdate || !annotationData || isReadOnly || annotationData.confirmationData) return;
+    
+    const updatedAnnotationData: AnnotationData = {
+      ...annotationData,
+      ...data
+    };
+    
+    onAnnotationUpdate(updatedAnnotationData);
+  };
+
+  // Handle confirmation
+  const handleConfirmation = async (confirmationData: ConfirmationData) => {
+    if (!onAnnotationUpdate || !annotationData) return;
+    
+    // Store in annotation data
+    const updatedAnnotationData: AnnotationData = {
+      ...annotationData,
+      confirmationData
+    };
+    
+    onAnnotationUpdate(updatedAnnotationData);
+    console.log('Confirmation data saved to annotation:', confirmationData);
+
+    // Store at case level for original analyst tracking
+    if (user && caseNumber && currentImageId) {
+      const success = await storeConfirmation(
+        user,
+        caseNumber,
+        currentImageId,
+        confirmationData,
+        filename
+      );
+      
+      if (success) {
+        console.log('Confirmation stored at case level for original image tracking');
+      } else {
+        console.error('Failed to store confirmation at case level');
+      }
+    } else {
+      console.warn('Missing required data for case-level confirmation storage:', {
+        hasUser: !!user,
+        caseNumber,
+        currentImageId
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!imageUrl) {
+      setLoadError(undefined);
+      setIsLoading(false);
+      return;
+    }
+    
+    setIsLoading(true);
+    setLoadError(undefined);
+
+    const img = new Image();
+    
+    img.onload = () => {
+      setIsLoading(false);
+      setLoadError(undefined);
+    };
+    
+    img.onerror = (e) => {
+      setLoadError({
+        type: 'load',
+        message: `Failed to load image: ${e instanceof Error ? e.message : 'Unknown error'}`
+      });
+      setIsLoading(false);
+    };
+
+    try {
+      img.src = imageUrl;
+    } catch (e) {
+      setLoadError({
+        type: 'invalid',
+        message: 'Invalid image URL provided'
+      });
+      setIsLoading(false);
+    }
+    
+    return () => {
+      img.onload = null;
+      img.onerror = null;
+      setLoadError(undefined);
+      setIsLoading(false);
+    };
+  }, [imageUrl]);
+  
+  useEffect(() => {
+    if (!activeAnnotations?.has('class') || !annotationData?.hasSubclass) {
+      setIsFlashing(false);
+      return;
+    }
+
+    const flashInterval = setInterval(() => {
+      setIsFlashing(true);
+      setTimeout(() => setIsFlashing(false), 200);
+      setTimeout(() => {
+        setIsFlashing(true);
+        setTimeout(() => setIsFlashing(false), 200);
+      }, 300);
+    }, 60000);
+
+    return () => clearInterval(flashInterval);
+  }, [activeAnnotations, annotationData?.hasSubclass]);
+
+  const getErrorMessage = () => {
+    if (error) return error;
+    if (loadError) return loadError.message;
+    return 'An error occurred';
+  };
+
+  // Programmatically determine if a color is dark and needs a light background
+  const needsLightBackground = (color: string) => {
+    if (!color) return false;
+    
+    // Handle named colors
+    const namedColors: { [key: string]: string } = {
+      'black': '#000000',
+      'white': '#ffffff',
+      'red': '#ff0000',
+      'green': '#008000',
+      'blue': '#0000ff',
+      'yellow': '#ffff00',
+      'cyan': '#00ffff',
+      'magenta': '#ff00ff',
+      'silver': '#c0c0c0',
+      'gray': '#808080',
+      'maroon': '#800000',
+      'olive': '#808000',
+      'lime': '#00ff00',
+      'aqua': '#00ffff',
+      'teal': '#008080',
+      'navy': '#000080',
+      'fuchsia': '#ff00ff',
+      'purple': '#800080'
+    };
+    
+    let hexColor = color.toLowerCase().trim();
+    
+    // Convert named color to hex
+    if (namedColors[hexColor]) {
+      hexColor = namedColors[hexColor];
+    }
+    
+    // Remove # if present
+    hexColor = hexColor.replace('#', '');
+    
+    // Handle 3-digit hex codes
+    if (hexColor.length === 3) {
+      hexColor = hexColor.split('').map(char => char + char).join('');
+    }
+    
+    // Validate hex color
+    if (!/^[0-9a-f]{6}$/i.test(hexColor)) {
+      return false; // Invalid color, don't apply background
+    }
+    
+    // Convert to RGB
+    const r = parseInt(hexColor.substr(0, 2), 16);
+    const g = parseInt(hexColor.substr(2, 2), 16);
+    const b = parseInt(hexColor.substr(4, 2), 16);
+    
+    // Calculate relative luminance using WCAG formula
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    
+    // Colors with luminance < 0.5 are considered dark
+    return luminance < 0.5;
+  };
+
+  return (    
+    <div className={styles.canvasContainer}>
+      {/* Filename & Connfirmation Field Display - Upper Left */}
+      {filename && (
+        <div className={styles.filenameDisplay}>
+          File: {filename}
+          {annotationData?.includeConfirmation && (
+            <>
+              {/* Show confirmation status based on whether confirmation data exists */}
+              {annotationData?.confirmationData ? (
+                <div className={styles.confirmationRow}>
+                  <div className={styles.confirmationConfirmed}>
+                    Identification Confirmed
+                  </div>
+                  <button 
+                    className={styles.viewConfirmationButton}
+                    onClick={() => setIsConfirmationModalOpen(true)}
+                  >
+                    View Confirmation Data
+                  </button>
+                </div>
+              ) : (
+                <div className={styles.confirmationRow}>
+                  <div className={styles.confirmationIncluded}>
+                    {isReadOnly ? 'Confirmation Requested' : 'Confirmation Field Included'}
+                  </div>
+                  {isReadOnly && (
+                    <button 
+                      className={styles.confirmButton}
+                      onClick={() => setIsConfirmationModalOpen(true)}
+                    >
+                      Confirm
+                    </button>
+                  )}
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      )}
+      
+      {/* Company Display - Upper Right */}
+      {company && (
+        <div className={styles.companyDisplay}>
+          {isReadOnly ? 'CASE REVIEW ONLY' : company}
+        </div>
+      )}
+      
+      {(loadError || error) ? (
+        <p className={styles.error}>{getErrorMessage()}</p>
+      ) : isLoading ? (
+        <p className={styles.loading}>Loading image...</p>
+      ) : imageUrl && imageUrl !== '/clear.jpg' ? (
+        <div className={styles.imageAndNotesContainer}>
+          <div className={styles.imageContainer}>
+            {/* Class Characteristics - Above Image */}
+            {activeAnnotations?.has('class') && annotationData && (annotationData.customClass || annotationData.classType) && (
+              <div className={styles.classCharacteristics}>
+                <div className={styles.classText}>
+                  {annotationData.customClass || annotationData.classType}
+                  {annotationData.classNote && ` (${annotationData.classNote})`}
+                </div>
+              </div>
+            )}
+            
+            <img 
+            ref={imageRef}
+            src={imageUrl}
+            alt="Case evidence"
+            className={styles.image}
+            style={{
+              border: activeAnnotations?.has('index') && annotationData?.indexType === 'color' && annotationData?.indexColor
+                ? `6px solid ${annotationData.indexColor}`
+                : undefined,
+              userSelect: 'none'
+            }}
+            onError={() => setLoadError({
+              type: 'network',
+              message: 'Failed to load image from network'
+            })}
+            draggable={false}
+          />
+          
+          {/* Box Annotations Component - Show when box tool is active for visibility */}
+          {activeAnnotations?.has('box') && (
+            <BoxAnnotations
+              imageRef={imageRef}
+              annotations={annotationData?.boxAnnotations || []}
+              onAnnotationsChange={handleBoxAnnotationsChange}
+              isAnnotationMode={isBoxAnnotationMode && !annotationData?.confirmationData}
+              annotationColor={boxAnnotationColor}
+              annotationData={annotationData ? { additionalNotes: annotationData.additionalNotes, earliestAnnotationTimestamp: annotationData.earliestAnnotationTimestamp } : undefined}
+              onAnnotationDataChange={handleAnnotationDataChange}
+              isReadOnly={isReadOnly || !!annotationData?.confirmationData}
+              caseNumber={caseNumber}
+              imageFileId={currentImageId}
+              originalImageFileName={filename}
+            />
+          )}
+          
+          {/* Annotations Overlay */}
+          {activeAnnotations?.has('number') && annotationData && (
+            <div className={styles.annotationsOverlay}>
+              {/* Left side case and item numbers */}
+              <div 
+                className={styles.leftAnnotation}
+                style={{ 
+                  color: annotationData.caseFontColor || '#FFDE21',
+                  backgroundColor: needsLightBackground(annotationData.caseFontColor || '#FFDE21')
+                    ? 'rgba(255, 255, 255, 0.9)' : undefined
+                }}
+              >
+                <div className={styles.caseText}>
+                  {annotationData.leftCase}
+                  {annotationData.leftItem && ` ${annotationData.leftItem}`}
+                </div>
+              </div>
+              
+              {/* Right side case and item numbers */}
+              <div 
+                className={styles.rightAnnotation}
+                style={{ 
+                  color: annotationData.caseFontColor || '#FFDE21',
+                  backgroundColor: needsLightBackground(annotationData.caseFontColor || '#FFDE21')
+                    ? 'rgba(255, 255, 255, 0.9)' : undefined
+                }}
+              >
+                <div className={styles.caseText}>
+                  {annotationData.rightCase}
+                  {annotationData.rightItem && ` ${annotationData.rightItem}`}
+                </div>
+              </div>
+            </div>
+          )}
+          
+          {/* Index Number Overlay */}
+          {activeAnnotations?.has('index') && annotationData?.indexType === 'number' && annotationData?.indexNumber && (
+            <div className={styles.annotationsOverlay}>
+              <div 
+                className={styles.indexAnnotation}
+                style={{ 
+                  color: annotationData.caseFontColor || '#FFDE21',
+                  backgroundColor: needsLightBackground(annotationData.caseFontColor || '#FFDE21')
+                    ? 'rgba(255, 255, 255, 0.9)' : undefined
+                }}
+              >
+                <div className={styles.caseText}>
+                  Index: {annotationData.indexNumber}
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+        
+        {/* Additional Notes - Below Image */}
+        {activeAnnotations?.has('notes') && annotationData?.additionalNotes && (
+          <div className={styles.additionalNotesContainer}>
+            <div className={styles.additionalNotesBox}>
+              {annotationData.additionalNotes}
+            </div>
+          </div>
+        )}
+        </div>
+      ) : (
+        <p 
+          className={styles.placeholder}
+          dangerouslySetInnerHTML={{
+            __html: firstName 
+              ? `Hello, ${firstName}<br>Upload or select an image to get started`
+              : 'Upload or select an image to get started'
+          }}
+        />
+      )}
+      
+      {/* Support Level - Bottom Left of Canvas */}
+      {activeAnnotations?.has('id') && annotationData && annotationData.supportLevel && (
+        <div className={styles.supportLevelAnnotation}>
+          <div 
+            className={styles.supportLevelText}
+            style={{ 
+              color: annotationData.supportLevel === 'ID' ? '#28a745' : 
+                     annotationData.supportLevel === 'Exclusion' ? '#dc3545' : 
+                     '#ffc107' 
+            }}
+          >
+            {annotationData.supportLevel === 'ID' ? 'Identification' : annotationData.supportLevel}
+          </div>
+        </div>
+      )}
+      
+      {/* Subclass Warning - Bottom Right of Canvas */}
+      {activeAnnotations?.has('class') && annotationData?.hasSubclass && (
+        <div className={`${styles.subclassWarning} ${isFlashing ? styles.flashing : ''}`}>
+          <div className={styles.subclassText}>
+            POTENTIAL SUBCLASS
+          </div>
+        </div>
+      )}
+
+      {/* Confirmation Modal */}
+      <ConfirmationModal
+        isOpen={isConfirmationModalOpen}
+        onClose={() => setIsConfirmationModalOpen(false)}
+        onConfirm={handleConfirmation}
+        company={company}
+        existingConfirmation={annotationData?.confirmationData || null}
+      />
+    </div>    
+  );
+};

package/app/components/canvas/confirmation/confirmation.module.css

@@ -0,0 +1,187 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  background-color: color-mix(in lab, var(--background) 50%, transparent);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: var(--zIndex5);
+  transition: background-color var(--durationM) var(--bezierFastoutSlowin);
+}
+
+.modal {
+  background: var(--backgroundLight);
+  border-radius: var(--spaceXS);
+  width: 90%;
+  max-width: 400px;
+  max-height: 90vh;
+  box-shadow: 0 var(--spaceXS) var(--spaceL) color-mix(in lab, var(--black) 10%, transparent);
+  transition: background-color var(--durationM) var(--bezierFastoutSlowin);
+}
+
+.header {
+  display: flex;
+  font-size: var(--fontSizeBodyM);
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spaceM);
+  border-bottom: 1px solid color-mix(in lab, var(--text) 10%, transparent);
+  color: var(--textTitle);
+}
+
+.title {
+  margin: 0;
+  font-size: var(--fontSizeBodyM);
+  font-weight: 600;
+  color: var(--textTitle);
+}
+
+.closeButton {
+  background: none;
+  border: none;
+  font-size: var(--fontSizeBodyL);
+  cursor: pointer;
+  padding: var(--spaceXS);
+  color: var(--textLight);
+  transition: color var(--durationS) var(--bezierFastoutSlowin);
+}
+
+.closeButton:hover {
+  color: var(--text);
+}
+
+.content {
+  padding: var(--spaceM);
+  overflow-y: auto;
+  max-height: calc(90vh - var(--space3XL));
+}
+
+.fieldGroup {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceS);
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spaceXS);
+}
+
+.label {
+  font-size: var(--fontSizeBodyXS);
+  font-weight: var(--fontWeightMedium);
+  color: var(--textTitle);
+  margin: 0;
+}
+
+.input {
+  width: 100%;
+  padding: var(--spaceS);
+  border: 1px solid color-mix(in lab, var(--text) 20%, transparent);
+  border-radius: var(--spaceXS);
+  font-size: var(--fontSizeBodyXS);
+  color: var(--text);
+  background: var(--background);
+  transition: border-color var(--durationS) var(--bezierFastoutSlowin);
+  box-sizing: border-box;
+}
+
+.input:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px color-mix(in lab, var(--primary) 20%, transparent);
+}
+
+.input:disabled {
+  background: color-mix(in lab, var(--background) 50%, var(--backgroundLight));
+  color: var(--textLight);
+  cursor: not-allowed;
+}
+
+.readOnlyValue {
+  padding: var(--spaceS);
+  background: color-mix(in lab, var(--background) 50%, var(--backgroundLight));
+  border: 1px solid color-mix(in lab, var(--text) 10%, transparent);
+  border-radius: var(--spaceXS);
+  font-size: var(--fontSizeBodyXS);
+  color: var(--text);
+  font-family: 'Inter', monospace;
+}
+
+.error {
+  color: var(--error);
+  font-size: var(--fontSizeBodyXS);
+  margin-top: var(--spaceS);
+  padding: var(--spaceS);
+  background: color-mix(in lab, var(--error) 5%, transparent);
+  border: 1px solid color-mix(in lab, var(--error) 20%, transparent);
+  border-radius: var(--spaceXS);
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spaceS);
+  padding: var(--spaceM);
+  border-top: 1px solid color-mix(in lab, var(--text) 10%, transparent);
+  background: color-mix(in lab, var(--backgroundLight) 95%, var(--background));
+}
+
+.cancelButton {
+  padding: var(--spaceS) var(--spaceM);
+  border: 1px solid color-mix(in lab, var(--text) 20%, transparent);
+  border-radius: var(--spaceXS);
+  background: var(--background);
+  color: var(--text);
+  font-size: var(--fontSizeBodyXS);
+  font-weight: var(--fontWeightMedium);
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  min-width: 70px;
+}
+
+.cancelButton:hover:not(:disabled) {
+  background: color-mix(in lab, var(--text) 5%, var(--background));
+  border-color: color-mix(in lab, var(--text) 30%, transparent);
+}
+
+.cancelButton:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.confirmButton {
+  padding: var(--spaceS) var(--spaceM);
+  border: none;
+  border-radius: var(--spaceXS);
+  background: var(--success);
+  color: white;
+  font-size: var(--fontSizeBodyXS);
+  font-weight: var(--fontWeightMedium);
+  cursor: pointer;
+  transition: all var(--durationS) var(--bezierFastoutSlowin);
+  min-width: 70px;
+  box-shadow: 0 1px 3px color-mix(in lab, var(--success) 30%, transparent);
+}
+
+.confirmButton:hover:not(:disabled) {
+  background: color-mix(in lab, var(--success) 85%, var(--black));
+  box-shadow: 0 2px 6px color-mix(in lab, var(--success) 40%, transparent);
+}
+
+.confirmButton:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.existingConfirmationBanner {
+  background: color-mix(in lab, var(--success) 90%, white);
+  color: color-mix(in lab, var(--success) 20%, var(--black));
+  padding: var(--spaceS) var(--spaceM);
+  text-align: center;
+  font-size: var(--fontSizeBodyXS);
+  font-weight: var(--fontWeightMedium);
+  border-bottom: 1px solid color-mix(in lab, var(--success) 20%, transparent);
+}