Annotation page - classes pane functionality

[jacksonjacobs1]

Classes Pane in the Annotation Page

Description

Implement the Classes Pane within the Annotation Page, allowing users to add, edit, select, and delete classes. Each class corresponds to a unique annotation category with specific settings such as name, color, and magnification level. Classes are globally consistent across the project and can be created directly or through a context menu in the annotation pane.

The following has already been implemented:

1. Classes pane react component already exists
2. pane already lists all classes in the project
3. selecting a list item corrently sets the class and updates the other components in the page.

Feature Details

The Classes Pane contains the following elements:

1. Class List (scrollable):

   • "Tissue" Class: Selectable but immutable.
   • "Class 1": Selectable and mutable.
   • ... etc.
   • “+” Button: Allows adding a new class by opening the Add Class modal.

2. Add Class Functionality:

   • Add Class Modal: Opens when the “+” button or “Create new class” context menu item is clicked.
     • Fields:
       1. Class Name: Text field for naming the class.
       2. Class Color: Color picker for setting the class color.
       3. Working Magnification: Dropdown to select the magnification level, with options based on the project requirements.
       4. Patch Preview: Displays a 40x preview image that updates when the working magnification changes.
     • Submit Button: Saves the new class and adds it to the Classes Pane.
     • Suggested Magnification: When creating a class this way, the working magnification will auto-fill with a suggested value based on the size of the selected annotation.

3. Class Elements in the Pane:

   • Details:
     • Each class is listed with the following:
       • Class Name
       • Edit Button: Opens the Add Class modal with current settings pre-filled for editing.
       • Delete Button: Removes the class after user confirmation.
       • Color Square: Displays the class color, which also serves as the fill color for annotations of this class.
   • Edit Class: Clicking the edit button on a class opens the Add Class modal (with the fields pre-filled).
   • Delete Class: Clicking the delete button on a class shows a warning confirmation. Upon confirmation, all relevant UI elements (annotation, ground truth, and predictions) are re-rendered without any annotations of the deleted class.

Acceptance Criteria

1. Classes Pane displays a scrollable list of classes, including "Tissue" (immutable) and any user-created classes.
2. Users can add a new class through the “+” button or the context menu in the annotation pane.
3. The Add Class modal opens as expected, updates the preview image based on the selected magnification, and saves new classes to the Classes Pane.
4. Each class element displays the class name, edit button, delete button, and color square.
5. Edit Class: Users can edit class details, which updates in the Classes Pane.
6. Delete Class: Users can delete a class after confirming a warning. UI elements re-render without annotations belonging to the deleted class.

---

References:
N/A