Refactor annotation groups

apps/editor/src/assets/de.json

@@ -93,6 +93,7 @@
   "layers": "Ebenen",
   "main-image-layer": "Haupt-Bildebene",
   "add-annotation-layer": "Neue Annotation hinzufügen",
+  "add-annotation-group": "Neue Annotationsgruppe hinzufügen",
   "no-layers": "Keine Ebenen geladen.",
   "untitled-layer": "Unbenannte Ebene",
   "layer-settings": "Ebeneneinstellungen",
@@ -124,6 +125,7 @@
   "export-tooltip": "Export (Strg + E)",
   "exporting": "Exportieren",
   "layers-to-export": "Annotationsebenen, die exportiert werden sollen",
+  "should-export-images": "Bildebenen mit exportieren",
   "export-all-layers": "Alle Ebenen exportieren",
   "export-annotation-group": "Gruppe exportieren",
   "export-as": "Exportieren als",
@@ -439,5 +441,15 @@
 
   "review": "Überprüfen",
   "supervise": "Abnicken",
-  "review-description": "{{taskType}} der Annotationen des Bildes {{image}}."
+  "review-description": "{{taskType}} der Annotationen des Bildes {{image}}.",
+
+  "untitled-group": "Unbenannte Gruppe",
+  "rename-group": "Gruppe umbenennen",
+  "delete-group": "Gruppe löschen",
+  "delete-annotation-group-message": "Wollen Sie die Annotation \"{{name}}\" und die folgenden Ebenen wirklich löschen?",
+  "warning": "Warnung:",
+  "delete-backend-data-warning": "Durch das Löschen der Annotationsgruppe \"{{name}}\" wird auch die unter \"{{dataUri}}\" gespeicherte Annotation unwiderruflich gelöscht!",
+  "unsaved-backend-annotations": "Folgende Gruppen sind noch nicht gespeichert:",
+  "get-annotation-error": "Annotation konnte nicht gefunden werden",
+  "get-annotation-error-description": "Die Annotation mit der ID \"{{id}}\" konnte nicht gefunden werden."
 }

apps/editor/src/assets/en.json

@@ -93,6 +93,7 @@
   "layers": "Layers",
   "main-image-layer": "Main Image Layer",
   "add-annotation-layer": "Add new annotation",
+  "add-annotation-group": "Add new annotation group",
   "no-layers": "No layers loaded.",
   "untitled-layer": "Untitled layer",
   "layer-settings": "Layer Settings",
@@ -124,6 +125,7 @@
   "export-tooltip": "Export (Ctrl/Cmd + E)",
   "exporting": "Exporting",
   "layers-to-export": "Layers to export",
+  "should-export-images": "Include image layers",
   "export-all-layers": "Export all layers",
   "export-annotation-group": "Export annotation group",
   "export-as": "Export as",
@@ -438,5 +440,15 @@
 
   "review": "Review",
   "supervise": "Supervise",
-  "review-description": "{{taskType}} the annotations of {{image}}"
+  "review-description": "{{taskType}} the annotations of {{image}}",
+
+  "untitled-group": "Untitled group",
+  "rename-group": "Rename Group",
+  "delete-group": "Delete Group",
+  "delete-annotation-group-message": "Do you really want to delete the annotation group \"{{name}}\" and following layers?",
+  "warning": "Warning:",
+  "delete-backend-data-warning": "Deleting the annotation group \"{{name}}\" also deletes the annotation saved under \"{{dataUri}}\"!",
+  "unsaved-backend-annotations": "The following annotation groups are not saved yet:",
+  "get-annotation-error": "Annotation cannot be found",
+  "get-annotation-error-description": "Annotation with the ID \"{{id}}\" cannot be found."
 }

apps/editor/src/components/data-manager/confirmation-popup/confirmation-popup.props.ts

@@ -1,6 +1,8 @@
 import type { StatefulPopUpProps } from "@visian/ui-shared";
+import { ReactNode } from "react";
 
-export interface ConfirmationPopUpProps extends StatefulPopUpProps {
+export interface ConfirmationPopUpProps<T = ReactNode>
+  extends StatefulPopUpProps {
   title?: string;
   titleTx?: string;
   message?: string;
@@ -10,4 +12,5 @@ export interface ConfirmationPopUpProps extends StatefulPopUpProps {
   cancel?: string;
   cancelTx?: string;
   onConfirm?: () => void;
+  children?: ReactNode;
 }

apps/editor/src/components/data-manager/confirmation-popup/confirmation-popup.tsx

@@ -1,6 +1,6 @@
 import { ButtonParam, PopUp, Text } from "@visian/ui-shared";
 import { observer } from "mobx-react-lite";
-import { useCallback } from "react";
+import { ReactNode, useCallback } from "react";
 import styled from "styled-components";
 
 import { ConfirmationPopUpProps } from "./confirmation-popup.props";
@@ -27,7 +27,7 @@ const StyledText = styled(Text)`
   overflow-wrap: anywhere;
 `;
 
-export const ConfirmationPopup = observer<ConfirmationPopUpProps>(
+export const ConfirmationPopup = observer<ConfirmationPopUpProps<ReactNode>>(
   ({
     isOpen,
     onClose,
@@ -40,6 +40,7 @@ export const ConfirmationPopup = observer<ConfirmationPopUpProps>(
     confirmTx,
     cancel,
     cancelTx,
+    children,
   }) => {
     const handleConfirmation = useCallback(() => {
       onConfirm?.();
@@ -55,6 +56,7 @@ export const ConfirmationPopup = observer<ConfirmationPopUpProps>(
         shouldDismissOnOutsidePress
       >
         <StyledText tx={messageTx} text={message} />
+        {children}
         <InlineRow>
           <StyledTextButton
             label={cancel}

apps/editor/src/components/editor/export-popup/export-popup.tsx

@@ -2,12 +2,14 @@ import {
   Button,
   DropDown,
   ILayer,
+  InvisibleButton,
   LayerList,
   PopUp,
   Switch,
   Text,
 } from "@visian/ui-shared";
 import { observer } from "mobx-react-lite";
+import path from "path";
 import { useCallback, useEffect, useState } from "react";
 import styled from "styled-components";
 
@@ -47,6 +49,15 @@ const StyledDropDown = styled(DropDown)`
   background: none;
 `;
 
+export const SelectionCheckbox = styled(InvisibleButton)<{
+  emphasized?: boolean;
+}>`
+  width: 18px;
+  margin-right: 8px;
+  opacity: ${({ emphasized }) => (emphasized ? 1 : 0.4)};
+  transition: opacity 0.1s ease-in-out;
+`;
+
 export const ExportPopUp = observer<ExportPopUpProps>(({ isOpen, onClose }) => {
   const store = useStore();
 
@@ -60,31 +71,59 @@ export const ExportPopUp = observer<ExportPopUpProps>(({ isOpen, onClose }) => {
   const [selectedExtension, setSelectedExtension] = useState(
     fileExtensions[0].value,
   );
+  const [shouldIncludeImages, setShouldIncludeImages] = useState(false);
 
   useEffect(() => {
     if (shouldExportAllLayers) {
       setLayersToExport(
         store?.editor?.activeDocument?.layers?.filter(
-          (layer) => layer.isAnnotation,
+          (layer) => layer.isAnnotation || shouldIncludeImages,
         ) ?? [],
       );
+    } else if (shouldIncludeImages) {
+      const activeGroupLayers =
+        store?.editor?.activeDocument?.activeLayer?.getAnnotationGroupLayers();
+      const imageLayers =
+        store?.editor?.activeDocument?.layers?.filter(
+          (layer) => !layer.isAnnotation,
+        ) ?? [];
+
+      const combinedLayers = activeGroupLayers?.concat(imageLayers) ?? [];
+      setLayersToExport(combinedLayers);
     } else {
       setLayersToExport(
-        store?.editor?.activeDocument?.activeLayer
-          ?.getAnnotationGroupLayers()
-          .filter((layer) => layer.isAnnotation) ?? [],
+        store?.editor?.activeDocument?.activeLayer?.getAnnotationGroupLayers() ??
+          [],
       );
     }
-  }, [store, isOpen, shouldExportAllLayers]);
+  }, [store, isOpen, shouldExportAllLayers, shouldIncludeImages]);
 
   const handleExport = useCallback(async () => {
     store?.setProgress({ labelTx: "exporting" });
 
     try {
+      const annotationGroupTitle =
+        store?.editor?.activeDocument?.activeLayer?.annotationGroup?.title;
+
+      let fileName;
+
+      if (shouldExportAllLayers) {
+        fileName = undefined;
+      } else {
+        fileName = annotationGroupTitle
+          ? path.basename(
+              annotationGroupTitle,
+              path.extname(annotationGroupTitle),
+            )
+          : undefined;
+      }
       if (selectedExtension === ".zip") {
-        await store?.editor.activeDocument?.exportZip(layersToExport, true);
+        await store?.editor.activeDocument?.exportZip(layersToExport, fileName);
       } else {
-        await store?.editor?.activeDocument?.exportSquashedNii(layersToExport);
+        await store?.editor?.activeDocument?.exportSquashedNii(
+          layersToExport,
+          fileName,
+        );
       }
     } catch (error) {
       store?.setError({
@@ -94,7 +133,36 @@ export const ExportPopUp = observer<ExportPopUpProps>(({ isOpen, onClose }) => {
     } finally {
       store?.setProgress();
     }
-  }, [layersToExport, selectedExtension, store]);
+  }, [layersToExport, selectedExtension, shouldExportAllLayers, store]);
+
+  const handleCheckIncludeImageLayer = useCallback(
+    (value: boolean) => {
+      if (value) {
+        const imageLayers =
+          store?.editor?.activeDocument?.layers?.filter(
+            (layer) => !layer.isAnnotation,
+          ) ?? [];
+        const newLayersToExport = layersToExport.concat(imageLayers);
+        setLayersToExport(newLayersToExport);
+        setShouldIncludeImages(true);
+      } else {
+        setLayersToExport(layersToExport.filter((layer) => layer.isAnnotation));
+        setShouldIncludeImages(false);
+      }
+    },
+    [layersToExport, store?.editor?.activeDocument?.layers],
+  );
+
+  const handleSelectExtension = useCallback((value: string) => {
+    if (value === ".nii.gz") {
+      setLayersToExport(
+        store?.editor?.activeDocument?.activeLayer?.getAnnotationGroupLayers() ??
+          [],
+      );
+      setShouldIncludeImages(false);
+    }
+    setSelectedExtension(value);
+  }, []);
 
   return (
     <ExportPopUpContainer
@@ -113,12 +181,24 @@ export const ExportPopUp = observer<ExportPopUpProps>(({ isOpen, onClose }) => {
         value={shouldExportAllLayers}
         onChange={setShouldExportAllLayers}
       />
+      {selectedExtension === ".zip" && (
+        <InlineRow>
+          <SectionLabel tx="should-export-images" />
+          <SelectionCheckbox
+            icon={shouldIncludeImages ? "checked" : "unchecked"}
+            onPointerDown={() =>
+              handleCheckIncludeImageLayer(!shouldIncludeImages)
+            }
+            emphasized={shouldIncludeImages}
+          />
+        </InlineRow>
+      )}
       <SectionLabel tx="export-as" />
       <InlineRow>
         <StyledDropDown
           options={fileExtensions}
           defaultValue={selectedExtension}
-          onChange={(value) => setSelectedExtension(value)}
+          onChange={(value) => handleSelectExtension(value)}
           size="medium"
           borderRadius="default"
         />

apps/editor/src/components/editor/layers/draggable-group-list-item.tsx

@@ -0,0 +1,46 @@
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { IAnnotationGroup, ILayer } from "@visian/ui-shared";
+import { observer } from "mobx-react-lite";
+import styled from "styled-components";
+
+import { AnnotationGroupListItem } from "./group-list-item";
+
+const DraggableDiv = styled.div<{
+  opacity: number;
+  transform: string | undefined;
+  transition: string | undefined;
+}>`
+  opacity: ${({ opacity }) => opacity};
+  transform: ${({ transform }) => transform};
+  transition: ${({ transition }) => transition};
+`;
+
+export const DraggableAnnotationGroupListItem = observer<{
+  group: IAnnotationGroup;
+  isActive: boolean;
+  isLast?: boolean;
+  isDragged?: boolean;
+  draggedLayer?: ILayer;
+}>(({ group, isActive, isLast, isDragged, draggedLayer }) => {
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({ id: group.id, data: { annotationGroup: group } });
+
+  return (
+    <DraggableDiv
+      ref={setNodeRef}
+      transform={CSS.Transform.toString(transform)}
+      transition={transition}
+      opacity={isDragged ? 0.3 : 1}
+      {...attributes}
+      {...listeners}
+    >
+      <AnnotationGroupListItem
+        group={group}
+        isActive={isActive}
+        isLast={isLast}
+        draggedLayer={draggedLayer}
+      />
+    </DraggableDiv>
+  );
+});

apps/editor/src/components/editor/layers/draggable-layer-list-item.tsx

@@ -0,0 +1,43 @@
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { ILayer } from "@visian/ui-shared";
+import { observer } from "mobx-react-lite";
+import styled from "styled-components";
+
+import { LayerListItem } from "./layer-list-item";
+
+const DraggableDiv = styled.div<{
+  opacity: number;
+  transform: string | undefined;
+  transition: string | undefined;
+}>`
+  opacity: ${({ opacity }) => opacity};
+  transform: ${({ transform }) => transform};
+  transition: ${({ transition }) => transition};
+`;
+
+export const DraggableLayerListItem = observer<{
+  layer: ILayer;
+  isActive?: boolean;
+  isLast?: boolean;
+  isDragged?: boolean;
+}>(({ layer, isActive, isLast, isDragged }) => {
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({
+      id: layer.id,
+      data: { layer },
+    });
+
+  return (
+    <DraggableDiv
+      ref={setNodeRef}
+      transform={CSS.Transform.toString(transform)}
+      transition={transition}
+      opacity={isDragged ? 0.3 : 1}
+      {...attributes}
+      {...listeners}
+    >
+      <LayerListItem layer={layer} isActive={isActive} isLast={isLast} />
+    </DraggableDiv>
+  );
+});