Primary Striae Interface (app/striae/striae.tsx)

Main Component

Striae

A React component that serves as the main workspace/dashboard for authenticated users. It provides the UI and logic for managing cases, selecting and displaying images, and annotating them.

Props:

• user: User
  The currently authenticated Firebase user.

State:

• selectedImage: The URL of the currently selected image (or undefined if none).

• imageId: The ID of the currently selected image.

• error: Error message to display if an image fails to load or another error occurs.

• imageLoaded: Boolean indicating if the image has finished loading.

• currentCase: The currently selected case number.

• files: Array of file metadata for the current case.

• caseNumber: The case number being managed.

• successAction: Tracks the last successful action ('loaded', 'created', 'deleted', or null).

• showNotes: Boolean to toggle the display of notes.

Key Functions:

• useEffect (case change):
  Resets the displayed image to a default (/clear.jpg) and clears errors when the current case changes.

• handleCaseChange:
  Updates the current case number.

• useEffect (unmount):
  Cleans up image and error state when the component unmounts.

• handleImageSelect:
  Asynchronously fetches a signed URL for the selected image file using getImageUrl. Updates state to display the image or show an error if loading fails.

UI Structure:

• Sidebar:
  Displays user info, case management, file list, and controls for image/case selection. Receives all relevant state and setters as props.

• Main Content:

  • Toolbar: Tools for interacting with the image/canvas.

  • Canvas: Displays the selected image and any error messages.

  • Annotations: UI for managing and displaying image annotations.