From 9c61a80bde7cd590e33e82b7a9005c7cc881c4dc Mon Sep 17 00:00:00 2001
From: Charlie Meister <charlie.meister@student.hpi.de>
Date: Fri, 6 Dec 2024 17:54:39 +0100
Subject: [PATCH 01/20] very much WIP: add form item to select mag per
 annotation

---
 .../admin/voxelytics/ai_model_list_view.tsx   |  8 +-
 .../javascripts/components/mag_selection.tsx  | 34 ++++++++
 .../oxalis/view/jobs/train_ai_model.tsx       | 78 ++++++++++---------
 3 files changed, 81 insertions(+), 39 deletions(-)
 create mode 100644 frontend/javascripts/components/mag_selection.tsx

diff --git a/frontend/javascripts/admin/voxelytics/ai_model_list_view.tsx b/frontend/javascripts/admin/voxelytics/ai_model_list_view.tsx
index 7962e955660..722452c249e 100644
--- a/frontend/javascripts/admin/voxelytics/ai_model_list_view.tsx
+++ b/frontend/javascripts/admin/voxelytics/ai_model_list_view.tsx
@@ -109,7 +109,7 @@ function TrainNewAiJobModal({ onClose }: { onClose: () => void }) {
     AnnotationInfoForAIJob<APIAnnotation>[]
   >([]);
 
-  const getMagForSegmentationLayer = async (annotationId: string, layerName: string) => {
+  const getMagsForSegmentationLayer = async (annotationId: string, layerName: string) => {
     // The layer name is a human-readable one. It can either belong to an annotationLayer
     // (therefore, also to a volume tracing) or to the actual dataset.
     // Both are checked below. This won't be ambiguous because annotationLayers must not
@@ -130,10 +130,10 @@ function TrainNewAiJobModal({ onClose }: { onClose: () => void }) {
         (tracing) => tracing.tracingId === annotationLayer.tracingId,
       );
       const mags = volumeTracingMags[volumeTracingIndex] || ([[1, 1, 1]] as Vector3[]);
-      return getMagInfo(mags).getFinestMag();
+      return getMagInfo(mags);
     } else {
       const segmentationLayer = getSegmentationLayerByName(dataset, layerName);
-      return getMagInfo(segmentationLayer.resolutions).getFinestMag();
+      return getMagInfo(segmentationLayer.resolutions);
     }
   };
 
@@ -152,7 +152,7 @@ function TrainNewAiJobModal({ onClose }: { onClose: () => void }) {
       maskClosable={false}
     >
       <TrainAiModelTab
-        getMagForSegmentationLayer={getMagForSegmentationLayer}
+        getMagsForSegmentationLayer={getMagsForSegmentationLayer}
         onClose={onClose}
         annotationInfos={annotationInfosForAiJob}
         onAddAnnotationsInfos={(newItems) => {
diff --git a/frontend/javascripts/components/mag_selection.tsx b/frontend/javascripts/components/mag_selection.tsx
new file mode 100644
index 00000000000..facf533079e
--- /dev/null
+++ b/frontend/javascripts/components/mag_selection.tsx
@@ -0,0 +1,34 @@
+import { Form, Select } from "antd";
+import type { Vector3 } from "oxalis/constants";
+
+export function MagSelectionFormItem({ mags }: { mags: Vector3[] }): JSX.Element {
+  return (
+    <Form.Item
+      label={"Magnification"}
+      rules={[
+        {
+          required: true,
+          message: "Please select the magnification.",
+        },
+      ]}
+    >
+      <MagSelection mags={mags} />
+    </Form.Item>
+  );
+}
+
+function MagSelection({ mags }: { mags: Vector3[] }): JSX.Element {
+  return (
+    <Select>
+      placeholder="Select a magnification"
+      {mags.map((mag) => {
+        const readableName = mag.join("-");
+        return (
+          <Select.Option key={readableName} value={readableName}>
+            {readableName}
+          </Select.Option>
+        );
+      })}
+    </Select>
+  );
+}
diff --git a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
index af01e2885bf..aea1c0d05b5 100644
--- a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
+++ b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
@@ -39,6 +39,9 @@ import type { Vector3, Vector6 } from "oxalis/constants";
 import { serverVolumeToClientVolumeTracing } from "oxalis/model/reducers/volumetracing_reducer";
 import { convertUserBoundingBoxesFromServerToFrontend } from "oxalis/model/reducers/reducer_helpers";
 import { computeArrayFromBoundingBox } from "libs/utils";
+import { MagSelectionFormItem } from "components/mag_selection";
+import type { MagInfo } from "oxalis/model/helpers/mag_info";
+import { useFetch } from "libs/react_helpers";
 
 const { TextArea } = Input;
 const FormItem = Form.Item;
@@ -126,15 +129,15 @@ export function TrainAiModelFromAnnotationTab({ onClose }: { onClose: () => void
   const tracing = useSelector((state: OxalisState) => state.tracing);
   const dataset = useSelector((state: OxalisState) => state.dataset);
 
-  const getMagForSegmentationLayer = async (_annotationId: string, layerName: string) => {
+  const getMagsForSegmentationLayer = async (_annotationId: string, layerName: string) => {
     const segmentationLayer = getSegmentationLayerByHumanReadableName(dataset, tracing, layerName);
-    return getMagInfo(segmentationLayer.resolutions).getFinestMag();
+    return getMagInfo(segmentationLayer.resolutions);
   };
   const userBoundingBoxes = getSomeTracing(tracing).userBoundingBoxes;
 
   return (
     <TrainAiModelTab
-      getMagForSegmentationLayer={getMagForSegmentationLayer}
+      getMagsForSegmentationLayer={getMagsForSegmentationLayer}
       ensureSavedState={() => Model.ensureSavedState()}
       onClose={onClose}
       annotationInfos={[
@@ -151,13 +154,13 @@ export function TrainAiModelFromAnnotationTab({ onClose }: { onClose: () => void
 }
 
 export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | HybridTracing>({
-  getMagForSegmentationLayer,
+  getMagsForSegmentationLayer,
   onClose,
   ensureSavedState,
   annotationInfos,
   onAddAnnotationsInfos,
 }: {
-  getMagForSegmentationLayer: (annotationId: string, layerName: string) => Promise<Vector3>;
+  getMagsForSegmentationLayer: (annotationId: string, layerName: string) => Promise<MagInfo>; // TODO_c rename method
   onClose: () => void;
   ensureSavedState?: (() => Promise<void>) | null;
   annotationInfos: Array<AnnotationInfoForAIJob<GenericAnnotation>>;
@@ -165,6 +168,7 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
 }) {
   const [form] = Form.useForm();
   const [useCustomWorkflow, setUseCustomWorkflow] = React.useState(false);
+  const mags = useFetch(() => await getMagsForSegmentationLayer(annotationId, layerName)); // TODO_c
 
   const getTrainingAnnotations = async (values: any) => {
     return Promise.all(
@@ -179,7 +183,7 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
             annotationId,
             colorLayerName: imageDataLayer,
             segmentationLayerName: layerName,
-            mag: await getMagForSegmentationLayer(annotationId, layerName),
+            mag: null //TODO_c,
           };
         },
       ),
@@ -283,7 +287,7 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
         const annotationId = "id" in annotation ? annotation.id : annotation.annotationId;
         return (
           <Row key={annotationId} gutter={8}>
-            <Col span={8}>
+            <Col span={6}>
               <FormItem
                 hasFeedback
                 name={["trainingAnnotations", idx, "annotationId"]}
@@ -293,7 +297,7 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
                 <Input disabled />
               </FormItem>
             </Col>
-            <Col span={8}>
+            <Col span={6}>
               <FormItem
                 hasFeedback
                 name={["trainingAnnotations", idx, "imageDataLayer"]}
@@ -314,7 +318,11 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
                 />
               </FormItem>
             </Col>
-            <Col span={8}>
+            <Col span={6}>
+              <MagSelectionFormItem mags={ }
+              />
+            </Col>
+            <Col span={6}>
               <LayerSelectionFormItem
                 name={["trainingAnnotations", idx, "layerName"]}
                 chooseSegmentationLayer
@@ -346,31 +354,31 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
 
       {hasErrors
         ? errors.map((error) => (
-            <Alert
-              key={error}
-              description={error}
-              style={{
-                marginBottom: 12,
-                whiteSpace: "pre-line",
-              }}
-              type="error"
-              showIcon
-            />
-          ))
+          <Alert
+            key={error}
+            description={error}
+            style={{
+              marginBottom: 12,
+              whiteSpace: "pre-line",
+            }}
+            type="error"
+            showIcon
+          />
+        ))
         : null}
       {hasWarnings
         ? warnings.map((warning) => (
-            <Alert
-              key={warning}
-              description={warning}
-              style={{
-                marginBottom: 12,
-                whiteSpace: "pre-line",
-              }}
-              type="warning"
-              showIcon
-            />
-          ))
+          <Alert
+            key={warning}
+            description={warning}
+            style={{
+              marginBottom: 12,
+              whiteSpace: "pre-line",
+            }}
+            type="warning"
+            showIcon
+          />
+        ))
         : null}
 
       <FormItem>
@@ -614,10 +622,10 @@ function AnnotationsCsvInput({
               return valid
                 ? Promise.resolve()
                 : Promise.reject(
-                    new Error(
-                      "Each line should only contain an annotation ID or URL (without # or ,)",
-                    ),
-                  );
+                  new Error(
+                    "Each line should only contain an annotation ID or URL (without # or ,)",
+                  ),
+                );
             },
           }),
         ]}

From 6305026969504b6c1edaea0ad1de4eacdce49832 Mon Sep 17 00:00:00 2001
From: Charlie Meister <charlie.meister@student.hpi.de>
Date: Mon, 9 Dec 2024 11:10:32 +0100
Subject: [PATCH 02/20] pass mags to form

---
 conf/application.conf                         |  4 +-
 .../admin/voxelytics/ai_model_list_view.tsx   |  2 +-
 .../javascripts/components/mag_selection.tsx  |  6 +-
 .../oxalis/view/jobs/train_ai_model.tsx       | 63 +++++++++----------
 4 files changed, 38 insertions(+), 37 deletions(-)

diff --git a/conf/application.conf b/conf/application.conf
index 751fcd1e5aa..6c871ef6283 100644
--- a/conf/application.conf
+++ b/conf/application.conf
@@ -151,8 +151,8 @@ features {
   taskReopenAllowedInSeconds = 30
   allowDeleteDatasets = true
   # to enable jobs for local development, use "yarn enable-jobs" to also activate it in the database
-  jobsEnabled = false
-  voxelyticsEnabled = false
+  jobsEnabled = true
+  voxelyticsEnabled = true
   # For new users, the dashboard will show a banner which encourages the user to check out the following dataset.
   # If isWkorgInstance == true, `/createExplorative/hybrid/true` is appended to the URL so that a new tracing is opened.
   # If isWkorgInstance == false, `/view` is appended to the URL so that it's opened in view mode (since the user might not
diff --git a/frontend/javascripts/admin/voxelytics/ai_model_list_view.tsx b/frontend/javascripts/admin/voxelytics/ai_model_list_view.tsx
index 722452c249e..83b34bdc296 100644
--- a/frontend/javascripts/admin/voxelytics/ai_model_list_view.tsx
+++ b/frontend/javascripts/admin/voxelytics/ai_model_list_view.tsx
@@ -109,7 +109,7 @@ function TrainNewAiJobModal({ onClose }: { onClose: () => void }) {
     AnnotationInfoForAIJob<APIAnnotation>[]
   >([]);
 
-  const getMagsForSegmentationLayer = async (annotationId: string, layerName: string) => {
+  const getMagsForSegmentationLayer = (annotationId: string, layerName: string) => {
     // The layer name is a human-readable one. It can either belong to an annotationLayer
     // (therefore, also to a volume tracing) or to the actual dataset.
     // Both are checked below. This won't be ambiguous because annotationLayers must not
diff --git a/frontend/javascripts/components/mag_selection.tsx b/frontend/javascripts/components/mag_selection.tsx
index facf533079e..40c9f40b7c0 100644
--- a/frontend/javascripts/components/mag_selection.tsx
+++ b/frontend/javascripts/components/mag_selection.tsx
@@ -1,9 +1,13 @@
 import { Form, Select } from "antd";
 import type { Vector3 } from "oxalis/constants";
 
-export function MagSelectionFormItem({ mags }: { mags: Vector3[] }): JSX.Element {
+export function MagSelectionFormItem({
+  name,
+  mags,
+}: { name: string; mags: Vector3[] }): JSX.Element {
   return (
     <Form.Item
+      name={name}
       label={"Magnification"}
       rules={[
         {
diff --git a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
index aea1c0d05b5..89166ce2569 100644
--- a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
+++ b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
@@ -41,7 +41,6 @@ import { convertUserBoundingBoxesFromServerToFrontend } from "oxalis/model/reduc
 import { computeArrayFromBoundingBox } from "libs/utils";
 import { MagSelectionFormItem } from "components/mag_selection";
 import type { MagInfo } from "oxalis/model/helpers/mag_info";
-import { useFetch } from "libs/react_helpers";
 
 const { TextArea } = Input;
 const FormItem = Form.Item;
@@ -129,7 +128,7 @@ export function TrainAiModelFromAnnotationTab({ onClose }: { onClose: () => void
   const tracing = useSelector((state: OxalisState) => state.tracing);
   const dataset = useSelector((state: OxalisState) => state.dataset);
 
-  const getMagsForSegmentationLayer = async (_annotationId: string, layerName: string) => {
+  const getMagsForSegmentationLayer = (_annotationId: string, layerName: string) => {
     const segmentationLayer = getSegmentationLayerByHumanReadableName(dataset, tracing, layerName);
     return getMagInfo(segmentationLayer.resolutions);
   };
@@ -160,7 +159,7 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
   annotationInfos,
   onAddAnnotationsInfos,
 }: {
-  getMagsForSegmentationLayer: (annotationId: string, layerName: string) => Promise<MagInfo>; // TODO_c rename method
+  getMagsForSegmentationLayer: (annotationId: string, layerName: string) => MagInfo; // TODO_c rename method
   onClose: () => void;
   ensureSavedState?: (() => Promise<void>) | null;
   annotationInfos: Array<AnnotationInfoForAIJob<GenericAnnotation>>;
@@ -168,7 +167,6 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
 }) {
   const [form] = Form.useForm();
   const [useCustomWorkflow, setUseCustomWorkflow] = React.useState(false);
-  const mags = useFetch(() => await getMagsForSegmentationLayer(annotationId, layerName)); // TODO_c
 
   const getTrainingAnnotations = async (values: any) => {
     return Promise.all(
@@ -183,7 +181,6 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
             annotationId,
             colorLayerName: imageDataLayer,
             segmentationLayerName: layerName,
-            mag: null //TODO_c,
           };
         },
       ),
@@ -285,6 +282,7 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
         );
         const fixedSelectedColorLayer = colorLayers.length === 1 ? colorLayers[0] : null;
         const annotationId = "id" in annotation ? annotation.id : annotation.annotationId;
+        const mags = getMagsForSegmentationLayer(annotationId, segmentationLayers[0].name);
         return (
           <Row key={annotationId} gutter={8}>
             <Col span={6}>
@@ -319,8 +317,7 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
               </FormItem>
             </Col>
             <Col span={6}>
-              <MagSelectionFormItem mags={ }
-              />
+              <MagSelectionFormItem name="mag" mags={mags.getMagList()} />
             </Col>
             <Col span={6}>
               <LayerSelectionFormItem
@@ -354,31 +351,31 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
 
       {hasErrors
         ? errors.map((error) => (
-          <Alert
-            key={error}
-            description={error}
-            style={{
-              marginBottom: 12,
-              whiteSpace: "pre-line",
-            }}
-            type="error"
-            showIcon
-          />
-        ))
+            <Alert
+              key={error}
+              description={error}
+              style={{
+                marginBottom: 12,
+                whiteSpace: "pre-line",
+              }}
+              type="error"
+              showIcon
+            />
+          ))
         : null}
       {hasWarnings
         ? warnings.map((warning) => (
-          <Alert
-            key={warning}
-            description={warning}
-            style={{
-              marginBottom: 12,
-              whiteSpace: "pre-line",
-            }}
-            type="warning"
-            showIcon
-          />
-        ))
+            <Alert
+              key={warning}
+              description={warning}
+              style={{
+                marginBottom: 12,
+                whiteSpace: "pre-line",
+              }}
+              type="warning"
+              showIcon
+            />
+          ))
         : null}
 
       <FormItem>
@@ -622,10 +619,10 @@ function AnnotationsCsvInput({
               return valid
                 ? Promise.resolve()
                 : Promise.reject(
-                  new Error(
-                    "Each line should only contain an annotation ID or URL (without # or ,)",
-                  ),
-                );
+                    new Error(
+                      "Each line should only contain an annotation ID or URL (without # or ,)",
+                    ),
+                  );
             },
           }),
         ]}

From 19a1666e0d86a491a93d55b138b5445480eac314 Mon Sep 17 00:00:00 2001
From: Charlie Meister <charlie.meister@student.hpi.de>
Date: Mon, 9 Dec 2024 20:55:33 +0100
Subject: [PATCH 03/20] pass mags through to parent form

---
 .../admin/voxelytics/ai_model_list_view.tsx      |  1 +
 .../javascripts/components/mag_selection.tsx     | 14 +++++++++++---
 .../oxalis/view/jobs/train_ai_model.tsx          | 16 ++++++++++------
 3 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/frontend/javascripts/admin/voxelytics/ai_model_list_view.tsx b/frontend/javascripts/admin/voxelytics/ai_model_list_view.tsx
index 83b34bdc296..503745f10a8 100644
--- a/frontend/javascripts/admin/voxelytics/ai_model_list_view.tsx
+++ b/frontend/javascripts/admin/voxelytics/ai_model_list_view.tsx
@@ -131,6 +131,7 @@ function TrainNewAiJobModal({ onClose }: { onClose: () => void }) {
       );
       const mags = volumeTracingMags[volumeTracingIndex] || ([[1, 1, 1]] as Vector3[]);
       return getMagInfo(mags);
+      // TODO_c check that they exist in ground truth layer and image data layer.
     } else {
       const segmentationLayer = getSegmentationLayerByName(dataset, layerName);
       return getMagInfo(segmentationLayer.resolutions);
diff --git a/frontend/javascripts/components/mag_selection.tsx b/frontend/javascripts/components/mag_selection.tsx
index 40c9f40b7c0..820c66826fb 100644
--- a/frontend/javascripts/components/mag_selection.tsx
+++ b/frontend/javascripts/components/mag_selection.tsx
@@ -4,7 +4,7 @@ import type { Vector3 } from "oxalis/constants";
 export function MagSelectionFormItem({
   name,
   mags,
-}: { name: string; mags: Vector3[] }): JSX.Element {
+}: { name: string | Array<string | number>; mags: Vector3[] }): JSX.Element {
   return (
     <Form.Item
       name={name}
@@ -21,10 +21,18 @@ export function MagSelectionFormItem({
   );
 }
 
-function MagSelection({ mags }: { mags: Vector3[] }): JSX.Element {
+function MagSelection({
+  mags,
+  value,
+  onChange,
+}: { mags: Vector3[]; value?: string | null; onChange?: (a: string) => void }): JSX.Element {
   return (
-    <Select>
+    <Select
       placeholder="Select a magnification"
+      defaultValue={mags[0].join("-")}
+      value={value}
+      onSelect={onChange}
+    >
       {mags.map((mag) => {
         const readableName = mag.join("-");
         return (
diff --git a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
index 89166ce2569..a84b95306ed 100644
--- a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
+++ b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
@@ -175,12 +175,14 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
           annotationId: string;
           imageDataLayer: string;
           layerName: string;
+          mag: string; //TODO_c Vector3
         }) => {
-          const { annotationId, imageDataLayer, layerName } = trainingAnnotation;
+          const { annotationId, imageDataLayer, layerName, mag } = trainingAnnotation;
           return {
             annotationId,
             colorLayerName: imageDataLayer,
             segmentationLayerName: layerName,
+            mag,
           };
         },
       ),
@@ -241,7 +243,6 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
   const hasWarnings = hasBBoxWarnings;
   const errors = [...annotationErrors, ...bboxErrors];
   const warnings = bboxWarnings;
-
   return (
     <Form
       onFinish={(values) => onFinish(form, useCustomWorkflow, values)}
@@ -282,7 +283,7 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
         );
         const fixedSelectedColorLayer = colorLayers.length === 1 ? colorLayers[0] : null;
         const annotationId = "id" in annotation ? annotation.id : annotation.annotationId;
-        const mags = getMagsForSegmentationLayer(annotationId, segmentationLayers[0].name);
+        const mags = getMagsForSegmentationLayer(annotationId, segmentationLayers[0].name); // TODO_c
         return (
           <Row key={annotationId} gutter={8}>
             <Col span={6}>
@@ -316,9 +317,6 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
                 />
               </FormItem>
             </Col>
-            <Col span={6}>
-              <MagSelectionFormItem name="mag" mags={mags.getMagList()} />
-            </Col>
             <Col span={6}>
               <LayerSelectionFormItem
                 name={["trainingAnnotations", idx, "layerName"]}
@@ -331,6 +329,12 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
                 label="Ground Truth Layer"
               />
             </Col>
+            <Col span={6}>
+              <MagSelectionFormItem
+                name={["trainingAnnotations", idx, "mag"]}
+                mags={mags.getMagList()}
+              />
+            </Col>
           </Row>
         );
       })}

From 5d3151f2dee38cf4704db97eb681c392b77ac072 Mon Sep 17 00:00:00 2001
From: Charlie Meister <charlie.meister@student.hpi.de>
Date: Thu, 12 Dec 2024 21:39:22 +0100
Subject: [PATCH 04/20] remove default value

---
 .../javascripts/components/mag_selection.tsx  | 37 +++++++++++++------
 .../oxalis/view/jobs/train_ai_model.tsx       |  5 +--
 2 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/frontend/javascripts/components/mag_selection.tsx b/frontend/javascripts/components/mag_selection.tsx
index 820c66826fb..784355dcc72 100644
--- a/frontend/javascripts/components/mag_selection.tsx
+++ b/frontend/javascripts/components/mag_selection.tsx
@@ -1,10 +1,14 @@
 import { Form, Select } from "antd";
+import { V3 } from "libs/mjs";
+import { clamp } from "libs/utils";
+import _ from "lodash";
 import type { Vector3 } from "oxalis/constants";
+import type { MagInfo } from "oxalis/model/helpers/mag_info";
 
 export function MagSelectionFormItem({
   name,
-  mags,
-}: { name: string | Array<string | number>; mags: Vector3[] }): JSX.Element {
+  magInfo,
+}: { name: string | Array<string | number>; magInfo: MagInfo }): JSX.Element {
   return (
     <Form.Item
       name={name}
@@ -16,27 +20,38 @@ export function MagSelectionFormItem({
         },
       ]}
     >
-      <MagSelection mags={mags} />
+      <MagSelection magInfo={magInfo} />
     </Form.Item>
   );
 }
 
 function MagSelection({
-  mags,
+  magInfo,
   value,
   onChange,
-}: { mags: Vector3[]; value?: string | null; onChange?: (a: string) => void }): JSX.Element {
+}: { magInfo: MagInfo; value?: Vector3 | null; onChange?: (a: Vector3) => void }): JSX.Element {
+  const allMags = magInfo.getMagsWithIndices();
+
   return (
     <Select
       placeholder="Select a magnification"
-      defaultValue={mags[0].join("-")}
-      value={value}
-      onSelect={onChange}
+      value={
+        // using the index of the mag as value internally
+        value == null
+          ? null
+          : clamp(
+              0,
+              allMags.findIndex(([, v]) => V3.equals(v, value)),
+              allMags.length - 1,
+            )
+      }
+      onSelect={onChange != null ? (value) => onChange(allMags[value][1]) : _.noop}
     >
-      {mags.map((mag) => {
-        const readableName = mag.join("-");
+      {allMags.map((mag) => {
+        const readableName = mag[1].join("-");
+        const index = mag[0];
         return (
-          <Select.Option key={readableName} value={readableName}>
+          <Select.Option key={index} value={index}>
             {readableName}
           </Select.Option>
         );
diff --git a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
index a84b95306ed..15cdddbd5b3 100644
--- a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
+++ b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
@@ -330,10 +330,7 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
               />
             </Col>
             <Col span={6}>
-              <MagSelectionFormItem
-                name={["trainingAnnotations", idx, "mag"]}
-                mags={mags.getMagList()}
-              />
+              <MagSelectionFormItem name={["trainingAnnotations", idx, "mag"]} magInfo={mags} />
             </Col>
           </Row>
         );

From b7ce334dcb39b11e32a7f35b6ab70c9c5bd66c0e Mon Sep 17 00:00:00 2001
From: Charlie Meister <charlie.meister@student.hpi.de>
Date: Thu, 12 Dec 2024 23:58:02 +0100
Subject: [PATCH 05/20] WIP: clear mag selection when new layer is selected

---
 .../components/layer_selection.tsx            |  3 +++
 .../javascripts/components/mag_selection.tsx  | 20 ++++++++++++-----
 .../oxalis/view/jobs/train_ai_model.tsx       | 22 ++++++++++++++++---
 3 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/frontend/javascripts/components/layer_selection.tsx b/frontend/javascripts/components/layer_selection.tsx
index af8555c6cd7..688cd43c2de 100644
--- a/frontend/javascripts/components/layer_selection.tsx
+++ b/frontend/javascripts/components/layer_selection.tsx
@@ -8,6 +8,7 @@ type LayerSelectionProps<L extends { name: string }> = {
   getReadableNameForLayer: (layer: L) => string;
   fixedLayerName?: string;
   label?: string;
+  onChange?: (a: string) => void;
 };
 
 export function LayerSelection<L extends { name: string }>({
@@ -65,6 +66,7 @@ export function LayerSelectionFormItem<L extends { name: string }>({
   getReadableNameForLayer,
   fixedLayerName,
   label,
+  onChange,
 }: LayerSelectionProps<L>): JSX.Element {
   const layerType = chooseSegmentationLayer ? "segmentation" : "color";
   return (
@@ -85,6 +87,7 @@ export function LayerSelectionFormItem<L extends { name: string }>({
         fixedLayerName={fixedLayerName}
         layerType={layerType}
         getReadableNameForLayer={getReadableNameForLayer}
+        onChange={onChange}
       />
     </Form.Item>
   );
diff --git a/frontend/javascripts/components/mag_selection.tsx b/frontend/javascripts/components/mag_selection.tsx
index 784355dcc72..75e890c5431 100644
--- a/frontend/javascripts/components/mag_selection.tsx
+++ b/frontend/javascripts/components/mag_selection.tsx
@@ -8,7 +8,12 @@ import type { MagInfo } from "oxalis/model/helpers/mag_info";
 export function MagSelectionFormItem({
   name,
   magInfo,
-}: { name: string | Array<string | number>; magInfo: MagInfo }): JSX.Element {
+  value,
+}: {
+  name: string | Array<string | number>;
+  magInfo: MagInfo | undefined;
+  value?: Vector3;
+}): JSX.Element {
   return (
     <Form.Item
       name={name}
@@ -20,7 +25,7 @@ export function MagSelectionFormItem({
         },
       ]}
     >
-      <MagSelection magInfo={magInfo} />
+      <MagSelection magInfo={magInfo} value={value} />
     </Form.Item>
   );
 }
@@ -29,15 +34,19 @@ function MagSelection({
   magInfo,
   value,
   onChange,
-}: { magInfo: MagInfo; value?: Vector3 | null; onChange?: (a: Vector3) => void }): JSX.Element {
-  const allMags = magInfo.getMagsWithIndices();
+}: {
+  magInfo: MagInfo | undefined;
+  value?: Vector3;
+  onChange?: (a: Vector3) => void;
+}): JSX.Element {
+  const allMags = magInfo != null ? magInfo.getMagsWithIndices() : [];
 
   return (
     <Select
       placeholder="Select a magnification"
       value={
         // using the index of the mag as value internally
-        value == null
+        value == null || magInfo == null
           ? null
           : clamp(
               0,
@@ -50,6 +59,7 @@ function MagSelection({
       {allMags.map((mag) => {
         const readableName = mag[1].join("-");
         const index = mag[0];
+        console.log("mag", mag);
         return (
           <Select.Option key={index} value={index}>
             {readableName}
diff --git a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
index 15cdddbd5b3..4d36e92dacb 100644
--- a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
+++ b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
@@ -167,6 +167,14 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
 }) {
   const [form] = Form.useForm();
   const [useCustomWorkflow, setUseCustomWorkflow] = React.useState(false);
+  const [mags, setMags] = useState<MagInfo>();
+  const [chosenMag, setChosenMag] = useState<Vector3 | undefined>();
+
+  const getAvailableMags = (groundTruthLayerName: string, annotationId: string) => {
+    console.log("getAvailableMags", groundTruthLayerName, annotationId);
+    setChosenMag(undefined); // TODO_c doesnt work
+    return getMagsForSegmentationLayer(annotationId, groundTruthLayerName);
+  };
 
   const getTrainingAnnotations = async (values: any) => {
     return Promise.all(
@@ -175,7 +183,7 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
           annotationId: string;
           imageDataLayer: string;
           layerName: string;
-          mag: string; //TODO_c Vector3
+          mag: Vector3;
         }) => {
           const { annotationId, imageDataLayer, layerName, mag } = trainingAnnotation;
           return {
@@ -283,7 +291,7 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
         );
         const fixedSelectedColorLayer = colorLayers.length === 1 ? colorLayers[0] : null;
         const annotationId = "id" in annotation ? annotation.id : annotation.annotationId;
-        const mags = getMagsForSegmentationLayer(annotationId, segmentationLayers[0].name); // TODO_c
+        //const mags = getMagsForSegmentationLayer(annotationId, form.getFieldValue(["trainingAnnotations", idx, "layerName"])); // TODO_c
         return (
           <Row key={annotationId} gutter={8}>
             <Col span={6}>
@@ -327,10 +335,18 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
                 }}
                 fixedLayerName={fixedSelectedSegmentationLayer?.name || undefined}
                 label="Ground Truth Layer"
+                onChange={(newLayerName) => {
+                  setMags(getAvailableMags(newLayerName, annotationId));
+                  setChosenMag(undefined);
+                }}
               />
             </Col>
             <Col span={6}>
-              <MagSelectionFormItem name={["trainingAnnotations", idx, "mag"]} magInfo={mags} />
+              <MagSelectionFormItem
+                name={["trainingAnnotations", idx, "mag"]}
+                magInfo={mags}
+                value={chosenMag}
+              />
             </Col>
           </Row>
         );

From 5fc98f08942527563318f156c1fc7760c729d030 Mon Sep 17 00:00:00 2001
From: Charlie Meister <charlie.meister@student.hpi.de>
Date: Fri, 13 Dec 2024 18:18:37 +0100
Subject: [PATCH 06/20] WIP: update mags

---
 .../admin/voxelytics/ai_model_list_view.tsx   |   1 -
 .../javascripts/components/mag_selection.tsx  |   4 +-
 .../oxalis/view/jobs/train_ai_model.tsx       | 104 +++++++++++-------
 3 files changed, 63 insertions(+), 46 deletions(-)

diff --git a/frontend/javascripts/admin/voxelytics/ai_model_list_view.tsx b/frontend/javascripts/admin/voxelytics/ai_model_list_view.tsx
index 503745f10a8..83b34bdc296 100644
--- a/frontend/javascripts/admin/voxelytics/ai_model_list_view.tsx
+++ b/frontend/javascripts/admin/voxelytics/ai_model_list_view.tsx
@@ -131,7 +131,6 @@ function TrainNewAiJobModal({ onClose }: { onClose: () => void }) {
       );
       const mags = volumeTracingMags[volumeTracingIndex] || ([[1, 1, 1]] as Vector3[]);
       return getMagInfo(mags);
-      // TODO_c check that they exist in ground truth layer and image data layer.
     } else {
       const segmentationLayer = getSegmentationLayerByName(dataset, layerName);
       return getMagInfo(segmentationLayer.resolutions);
diff --git a/frontend/javascripts/components/mag_selection.tsx b/frontend/javascripts/components/mag_selection.tsx
index 75e890c5431..4acf371b772 100644
--- a/frontend/javascripts/components/mag_selection.tsx
+++ b/frontend/javascripts/components/mag_selection.tsx
@@ -8,11 +8,9 @@ import type { MagInfo } from "oxalis/model/helpers/mag_info";
 export function MagSelectionFormItem({
   name,
   magInfo,
-  value,
 }: {
   name: string | Array<string | number>;
   magInfo: MagInfo | undefined;
-  value?: Vector3;
 }): JSX.Element {
   return (
     <Form.Item
@@ -25,7 +23,7 @@ export function MagSelectionFormItem({
         },
       ]}
     >
-      <MagSelection magInfo={magInfo} value={value} />
+      <MagSelection magInfo={magInfo} />
     </Form.Item>
   );
 }
diff --git a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
index 4d36e92dacb..494ab9300b3 100644
--- a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
+++ b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   Alert,
   Form,
@@ -40,7 +40,7 @@ import { serverVolumeToClientVolumeTracing } from "oxalis/model/reducers/volumet
 import { convertUserBoundingBoxesFromServerToFrontend } from "oxalis/model/reducers/reducer_helpers";
 import { computeArrayFromBoundingBox } from "libs/utils";
 import { MagSelectionFormItem } from "components/mag_selection";
-import type { MagInfo } from "oxalis/model/helpers/mag_info";
+import { MagInfo } from "oxalis/model/helpers/mag_info";
 
 const { TextArea } = Input;
 const FormItem = Form.Item;
@@ -167,12 +167,23 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
 }) {
   const [form] = Form.useForm();
   const [useCustomWorkflow, setUseCustomWorkflow] = React.useState(false);
-  const [mags, setMags] = useState<MagInfo>();
-  const [chosenMag, setChosenMag] = useState<Vector3 | undefined>();
-
-  const getAvailableMags = (groundTruthLayerName: string, annotationId: string) => {
-    console.log("getAvailableMags", groundTruthLayerName, annotationId);
-    setChosenMag(undefined); // TODO_c doesnt work
+  const [mags, setMags] = useState<Map<string, MagInfo>>(); // maps annotationId to MagInfo
+  const [groundTruthLayerMags, setGroundTruthLayerMags] = useState<string, MagInfo>();
+  const [dataLayerMags, setDataLayerMags] = useState<string, MagInfo>();
+
+  useEffect(() => {
+    // TODO make this mag specific
+    const intersectingMags = groundTruthLayerMags
+      ?.getMagList()
+      .filter((mag) => dataLayerMags?.includes(mag));
+    console.log("updating", dataLayerMags, groundTruthLayerMags);
+    setMags(intersectingMags != null ? new MagInfo(intersectingMags) : undefined);
+  }, [dataLayerMags, groundTruthLayerMags]);
+
+  const getAvailableMagsForGroundTruthLayer = (
+    groundTruthLayerName: string,
+    annotationId: string,
+  ) => {
     return getMagsForSegmentationLayer(annotationId, groundTruthLayerName);
   };
 
@@ -291,7 +302,9 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
         );
         const fixedSelectedColorLayer = colorLayers.length === 1 ? colorLayers[0] : null;
         const annotationId = "id" in annotation ? annotation.id : annotation.annotationId;
-        //const mags = getMagsForSegmentationLayer(annotationId, form.getFieldValue(["trainingAnnotations", idx, "layerName"])); // TODO_c
+        const dataLayerMags =
+          fixedSelectedColorLayer != null ? fixedSelectedColorLayer.resolutions : [];
+
         return (
           <Row key={annotationId} gutter={8}>
             <Col span={6}>
@@ -322,6 +335,12 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
                   getReadableNameForLayer={(layer) => layer.name}
                   fixedLayerName={fixedSelectedColorLayer?.name || undefined}
                   style={{ width: "100%" }}
+                  onChange={(newLayerName) => {
+                    setDataLayerMags(
+                      colorLayers.filter((layer) => layer.name === newLayerName)[0].resolutions,
+                    );
+                    form.setFieldValue(["trainingAnnotations", idx, "mag"], undefined);
+                  }}
                 />
               </FormItem>
             </Col>
@@ -332,21 +351,22 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
                 layers={segmentationLayers}
                 getReadableNameForLayer={(layer) => {
                   return layer.name;
+                  //TODO_c fix that fallback layers are shown at least with the correct name?
+                  // eg. name (fallbacklayer)
+                  // remember to check-in with P
                 }}
                 fixedLayerName={fixedSelectedSegmentationLayer?.name || undefined}
                 label="Ground Truth Layer"
                 onChange={(newLayerName) => {
-                  setMags(getAvailableMags(newLayerName, annotationId));
-                  setChosenMag(undefined);
+                  setGroundTruthLayerMags(
+                    getAvailableMagsForGroundTruthLayer(newLayerName, annotationId),
+                  );
+                  form.setFieldValue(["trainingAnnotations", idx, "mag"], undefined);
                 }}
               />
             </Col>
             <Col span={6}>
-              <MagSelectionFormItem
-                name={["trainingAnnotations", idx, "mag"]}
-                magInfo={mags}
-                value={chosenMag}
-              />
+              <MagSelectionFormItem name={["trainingAnnotations", idx, "mag"]} magInfo={mags} />
             </Col>
           </Row>
         );
@@ -368,31 +388,31 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
 
       {hasErrors
         ? errors.map((error) => (
-            <Alert
-              key={error}
-              description={error}
-              style={{
-                marginBottom: 12,
-                whiteSpace: "pre-line",
-              }}
-              type="error"
-              showIcon
-            />
-          ))
+          <Alert
+            key={error}
+            description={error}
+            style={{
+              marginBottom: 12,
+              whiteSpace: "pre-line",
+            }}
+            type="error"
+            showIcon
+          />
+        ))
         : null}
       {hasWarnings
         ? warnings.map((warning) => (
-            <Alert
-              key={warning}
-              description={warning}
-              style={{
-                marginBottom: 12,
-                whiteSpace: "pre-line",
-              }}
-              type="warning"
-              showIcon
-            />
-          ))
+          <Alert
+            key={warning}
+            description={warning}
+            style={{
+              marginBottom: 12,
+              whiteSpace: "pre-line",
+            }}
+            type="warning"
+            showIcon
+          />
+        ))
         : null}
 
       <FormItem>
@@ -636,10 +656,10 @@ function AnnotationsCsvInput({
               return valid
                 ? Promise.resolve()
                 : Promise.reject(
-                    new Error(
-                      "Each line should only contain an annotation ID or URL (without # or ,)",
-                    ),
-                  );
+                  new Error(
+                    "Each line should only contain an annotation ID or URL (without # or ,)",
+                  ),
+                );
             },
           }),
         ]}

From 9011674d2a9c50fb090d5b5647e23011456d37e9 Mon Sep 17 00:00:00 2001
From: Charlie Meister <charlie.meister@student.hpi.de>
Date: Mon, 16 Dec 2024 13:01:51 +0100
Subject: [PATCH 07/20] select intersection of data and segmentation layer mags

---
 .../javascripts/components/mag_selection.tsx  |  22 +--
 .../oxalis/view/jobs/train_ai_model.tsx       | 146 +++++++++++-------
 2 files changed, 106 insertions(+), 62 deletions(-)

diff --git a/frontend/javascripts/components/mag_selection.tsx b/frontend/javascripts/components/mag_selection.tsx
index 4acf371b772..37140f9f8f6 100644
--- a/frontend/javascripts/components/mag_selection.tsx
+++ b/frontend/javascripts/components/mag_selection.tsx
@@ -1,7 +1,6 @@
 import { Form, Select } from "antd";
 import { V3 } from "libs/mjs";
 import { clamp } from "libs/utils";
-import _ from "lodash";
 import type { Vector3 } from "oxalis/constants";
 import type { MagInfo } from "oxalis/model/helpers/mag_info";
 
@@ -37,27 +36,32 @@ function MagSelection({
   value?: Vector3;
   onChange?: (a: Vector3) => void;
 }): JSX.Element {
-  const allMags = magInfo != null ? magInfo.getMagsWithIndices() : [];
+  const allMags = magInfo != null ? magInfo.getMagList() : [];
+
+  const onSelect = (index: number | undefined) => {
+    if (onChange == null || index == null) return;
+    const newMag = allMags[index];
+    if (newMag != null) onChange(newMag);
+  };
 
   return (
     <Select
       placeholder="Select a magnification"
       value={
-        // using the index of the mag as value internally
+        // using the index of the mag *in the mag list* as value internally
+        // NB: this is different from the mag index
         value == null || magInfo == null
           ? null
           : clamp(
               0,
-              allMags.findIndex(([, v]) => V3.equals(v, value)),
+              allMags.findIndex((v) => V3.equals(v, value)),
               allMags.length - 1,
             )
       }
-      onSelect={onChange != null ? (value) => onChange(allMags[value][1]) : _.noop}
+      onSelect={onSelect}
     >
-      {allMags.map((mag) => {
-        const readableName = mag[1].join("-");
-        const index = mag[0];
-        console.log("mag", mag);
+      {allMags.map((mag, index) => {
+        const readableName = mag.join("-");
         return (
           <Select.Option key={index} value={index}>
             {readableName}
diff --git a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
index 494ab9300b3..9dbf09368b8 100644
--- a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
+++ b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import {
   Alert,
   Form,
@@ -34,7 +34,12 @@ import _ from "lodash";
 import BoundingBox from "oxalis/model/bucket_data_handling/bounding_box";
 import { formatVoxels } from "libs/format_utils";
 import * as Utils from "libs/utils";
-import type { APIAnnotation, APIDataset, ServerVolumeTracing } from "types/api_flow_types";
+import type {
+  APIAnnotation,
+  APIDataLayer,
+  APIDataset,
+  ServerVolumeTracing,
+} from "types/api_flow_types";
 import type { Vector3, Vector6 } from "oxalis/constants";
 import { serverVolumeToClientVolumeTracing } from "oxalis/model/reducers/volumetracing_reducer";
 import { convertUserBoundingBoxesFromServerToFrontend } from "oxalis/model/reducers/reducer_helpers";
@@ -152,6 +157,8 @@ export function TrainAiModelFromAnnotationTab({ onClose }: { onClose: () => void
   );
 }
 
+type MagInfoPerAnnotation = { annotationId: string; magInfo: MagInfo };
+
 export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | HybridTracing>({
   getMagsForSegmentationLayer,
   onClose,
@@ -167,24 +174,47 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
 }) {
   const [form] = Form.useForm();
   const [useCustomWorkflow, setUseCustomWorkflow] = React.useState(false);
-  const [mags, setMags] = useState<Map<string, MagInfo>>(); // maps annotationId to MagInfo
-  const [groundTruthLayerMags, setGroundTruthLayerMags] = useState<string, MagInfo>();
-  const [dataLayerMags, setDataLayerMags] = useState<string, MagInfo>();
-
-  useEffect(() => {
-    // TODO make this mag specific
-    const intersectingMags = groundTruthLayerMags
-      ?.getMagList()
-      .filter((mag) => dataLayerMags?.includes(mag));
-    console.log("updating", dataLayerMags, groundTruthLayerMags);
-    setMags(intersectingMags != null ? new MagInfo(intersectingMags) : undefined);
-  }, [dataLayerMags, groundTruthLayerMags]);
-
-  const getAvailableMagsForGroundTruthLayer = (
-    groundTruthLayerName: string,
+  const [mags, setMags] = useState<MagInfoPerAnnotation[]>(); // maps annotationId to MagInfo of intersection of
+
+  // this should be a hook. depending on both layer names. TODO_c
+  const setIntersectingMags = (
     annotationId: string,
+    dataset: APIDataset,
+    groundTruthLayerName: string,
+    imageDataLayerName: string,
   ) => {
-    return getMagsForSegmentationLayer(annotationId, groundTruthLayerName);
+    const colorLayers = getColorLayers(dataset);
+    console.log("updating", imageDataLayerName, groundTruthLayerName);
+    const groundTruthLayerMags = getMagsForSegmentationLayer(
+      annotationId,
+      groundTruthLayerName,
+    ).getMagList();
+    const dataLayerMags = getMagsForColorLayer(colorLayers, imageDataLayerName);
+
+    const intersectingMags = groundTruthLayerMags?.filter((groundTruthMag) =>
+      dataLayerMags?.find(
+        (mag) =>
+          mag[0] === groundTruthMag[0] &&
+          mag[1] === groundTruthMag[1] &&
+          mag[2] === groundTruthMag[2],
+      ),
+    );
+    if (mags == null) {
+      setMags([{ annotationId, magInfo: new MagInfo(intersectingMags) }]);
+    } else {
+      setMags(
+        mags.map((mag) =>
+          mag.annotationId === annotationId
+            ? { annotationId, magInfo: new MagInfo(intersectingMags) }
+            : mag,
+        ),
+      );
+    }
+  };
+
+  const getMagsForColorLayer = (colorLayers: APIDataLayer[], layerName: string) => {
+    const colorLayer = colorLayers.find((layer) => layer.name === layerName);
+    return colorLayer != null ? getMagInfo(colorLayer.resolutions).getMagList() : null;
   };
 
   const getTrainingAnnotations = async (values: any) => {
@@ -302,8 +332,6 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
         );
         const fixedSelectedColorLayer = colorLayers.length === 1 ? colorLayers[0] : null;
         const annotationId = "id" in annotation ? annotation.id : annotation.annotationId;
-        const dataLayerMags =
-          fixedSelectedColorLayer != null ? fixedSelectedColorLayer.resolutions : [];
 
         return (
           <Row key={annotationId} gutter={8}>
@@ -335,9 +363,12 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
                   getReadableNameForLayer={(layer) => layer.name}
                   fixedLayerName={fixedSelectedColorLayer?.name || undefined}
                   style={{ width: "100%" }}
-                  onChange={(newLayerName) => {
-                    setDataLayerMags(
-                      colorLayers.filter((layer) => layer.name === newLayerName)[0].resolutions,
+                  onChange={() => {
+                    setIntersectingMags(
+                      annotationId,
+                      dataset,
+                      form.getFieldValue(["trainingAnnotations", idx, "layerName"]),
+                      form.getFieldValue(["trainingAnnotations", idx, "imageDataLayer"]),
                     );
                     form.setFieldValue(["trainingAnnotations", idx, "mag"], undefined);
                   }}
@@ -357,16 +388,25 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
                 }}
                 fixedLayerName={fixedSelectedSegmentationLayer?.name || undefined}
                 label="Ground Truth Layer"
-                onChange={(newLayerName) => {
-                  setGroundTruthLayerMags(
-                    getAvailableMagsForGroundTruthLayer(newLayerName, annotationId),
+                onChange={() => {
+                  setIntersectingMags(
+                    annotationId,
+                    dataset,
+                    form.getFieldValue(["trainingAnnotations", idx, "layerName"]),
+                    form.getFieldValue(["trainingAnnotations", idx, "imageDataLayer"]),
                   );
                   form.setFieldValue(["trainingAnnotations", idx, "mag"], undefined);
                 }}
               />
             </Col>
             <Col span={6}>
-              <MagSelectionFormItem name={["trainingAnnotations", idx, "mag"]} magInfo={mags} />
+              <MagSelectionFormItem
+                name={["trainingAnnotations", idx, "mag"]}
+                magInfo={
+                  mags?.find((magInfoPerAnno) => magInfoPerAnno.annotationId === annotationId)
+                    ?.magInfo
+                }
+              />
             </Col>
           </Row>
         );
@@ -388,31 +428,31 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
 
       {hasErrors
         ? errors.map((error) => (
-          <Alert
-            key={error}
-            description={error}
-            style={{
-              marginBottom: 12,
-              whiteSpace: "pre-line",
-            }}
-            type="error"
-            showIcon
-          />
-        ))
+            <Alert
+              key={error}
+              description={error}
+              style={{
+                marginBottom: 12,
+                whiteSpace: "pre-line",
+              }}
+              type="error"
+              showIcon
+            />
+          ))
         : null}
       {hasWarnings
         ? warnings.map((warning) => (
-          <Alert
-            key={warning}
-            description={warning}
-            style={{
-              marginBottom: 12,
-              whiteSpace: "pre-line",
-            }}
-            type="warning"
-            showIcon
-          />
-        ))
+            <Alert
+              key={warning}
+              description={warning}
+              style={{
+                marginBottom: 12,
+                whiteSpace: "pre-line",
+              }}
+              type="warning"
+              showIcon
+            />
+          ))
         : null}
 
       <FormItem>
@@ -656,10 +696,10 @@ function AnnotationsCsvInput({
               return valid
                 ? Promise.resolve()
                 : Promise.reject(
-                  new Error(
-                    "Each line should only contain an annotation ID or URL (without # or ,)",
-                  ),
-                );
+                    new Error(
+                      "Each line should only contain an annotation ID or URL (without # or ,)",
+                    ),
+                  );
             },
           }),
         ]}

From 48876d93aebc3b126a68d977bd20c4b4f341dc55 Mon Sep 17 00:00:00 2001
From: Charlie Meister <charlie.meister@student.hpi.de>
Date: Mon, 16 Dec 2024 16:12:44 +0100
Subject: [PATCH 08/20] load mags if both layers are already selected

---
 .../oxalis/view/jobs/train_ai_model.tsx       | 57 +++++++++++++++----
 1 file changed, 45 insertions(+), 12 deletions(-)

diff --git a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
index 9dbf09368b8..babc8e44180 100644
--- a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
+++ b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
@@ -176,8 +176,7 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
   const [useCustomWorkflow, setUseCustomWorkflow] = React.useState(false);
   const [mags, setMags] = useState<MagInfoPerAnnotation[]>(); // maps annotationId to MagInfo of intersection of
 
-  // this should be a hook. depending on both layer names. TODO_c
-  const setIntersectingMags = (
+  const getIntersectingMagList = (
     annotationId: string,
     dataset: APIDataset,
     groundTruthLayerName: string,
@@ -191,7 +190,7 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
     ).getMagList();
     const dataLayerMags = getMagsForColorLayer(colorLayers, imageDataLayerName);
 
-    const intersectingMags = groundTruthLayerMags?.filter((groundTruthMag) =>
+    return groundTruthLayerMags?.filter((groundTruthMag) =>
       dataLayerMags?.find(
         (mag) =>
           mag[0] === groundTruthMag[0] &&
@@ -199,19 +198,39 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
           mag[2] === groundTruthMag[2],
       ),
     );
+  };
+
+  const getIntersectingMags = (
+    annotationId: string,
+    dataset: APIDataset,
+    groundTruthLayerName: string,
+    imageDataLayerName: string,
+  ) => {
+    const intersectingMags = getIntersectingMagList(
+      annotationId,
+      dataset,
+      groundTruthLayerName,
+      imageDataLayerName,
+    );
     if (mags == null) {
-      setMags([{ annotationId, magInfo: new MagInfo(intersectingMags) }]);
+      return [{ annotationId, magInfo: new MagInfo(intersectingMags) }];
     } else {
-      setMags(
-        mags.map((mag) =>
-          mag.annotationId === annotationId
-            ? { annotationId, magInfo: new MagInfo(intersectingMags) }
-            : mag,
-        ),
+      return mags.map((mag) =>
+        mag.annotationId === annotationId
+          ? { annotationId, magInfo: new MagInfo(intersectingMags) }
+          : mag,
       );
     }
   };
 
+  const setIntersectingMags = (
+    annotationId: string,
+    dataset: APIDataset,
+    groundTruthLayerName: string,
+    imageDataLayerName: string,
+  ) =>
+    setMags(getIntersectingMags(annotationId, dataset, groundTruthLayerName, imageDataLayerName));
+
   const getMagsForColorLayer = (colorLayers: APIDataLayer[], layerName: string) => {
     const colorLayer = colorLayers.find((layer) => layer.name === layerName);
     return colorLayer != null ? getMagInfo(colorLayer.resolutions).getMagList() : null;
@@ -333,6 +352,17 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
         const fixedSelectedColorLayer = colorLayers.length === 1 ? colorLayers[0] : null;
         const annotationId = "id" in annotation ? annotation.id : annotation.annotationId;
 
+        const initialMags =
+          fixedSelectedColorLayer != null && fixedSelectedSegmentationLayer != null
+            ? getIntersectingMagList(
+                annotationId,
+                dataset,
+                fixedSelectedSegmentationLayer.name,
+                fixedSelectedColorLayer.name,
+              )
+            : [];
+        const initialMagInfo = new MagInfo(initialMags);
+
         return (
           <Row key={annotationId} gutter={8}>
             <Col span={6}>
@@ -381,6 +411,7 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
                 chooseSegmentationLayer
                 layers={segmentationLayers}
                 getReadableNameForLayer={(layer) => {
+                  console.log(layer);
                   return layer.name;
                   //TODO_c fix that fallback layers are shown at least with the correct name?
                   // eg. name (fallbacklayer)
@@ -403,8 +434,10 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
               <MagSelectionFormItem
                 name={["trainingAnnotations", idx, "mag"]}
                 magInfo={
-                  mags?.find((magInfoPerAnno) => magInfoPerAnno.annotationId === annotationId)
-                    ?.magInfo
+                  mags != null
+                    ? mags.find((magInfoPerAnno) => magInfoPerAnno.annotationId === annotationId)
+                        ?.magInfo
+                    : initialMagInfo
                 }
               />
             </Col>

From 7fdf1e1bd357d91a242671d5b4dfaf9f52e206a5 Mon Sep 17 00:00:00 2001
From: Charlie Meister <charlie.meister@student.hpi.de>
Date: Mon, 16 Dec 2024 16:28:37 +0100
Subject: [PATCH 09/20] adjust line height for non required fields

---
 frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
index babc8e44180..9e8fc998d86 100644
--- a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
+++ b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
@@ -369,7 +369,7 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
               <FormItem
                 hasFeedback
                 name={["trainingAnnotations", idx, "annotationId"]}
-                label="Annotation ID"
+                label={<div style={{ minHeight: 24 }}>Annotation ID</div>} // balance height with labels of required fields
                 initialValue={annotationId}
               >
                 <Input disabled />

From 0dea8e552265e3ed1164e9d2d6850e844fd611ed Mon Sep 17 00:00:00 2001
From: Charlie Meister <charlie.meister@student.hpi.de>
Date: Mon, 16 Dec 2024 16:30:57 +0100
Subject: [PATCH 10/20] add changelog

---
 CHANGELOG.unreleased.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
index e4e02843cd7..cf99ca81466 100644
--- a/CHANGELOG.unreleased.md
+++ b/CHANGELOG.unreleased.md
@@ -13,6 +13,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 ### Added
 - Added the total volume of a dataset to a tooltip in the dataset info tab. [#8229](https://github.com/scalableminds/webknossos/pull/8229)
 - Optimized performance of data loading with “fill value“ chunks. [#8271](https://github.com/scalableminds/webknossos/pull/8271)
+- It is now possible to select the magnification of the layers on which an AI model will be trained. [#8266](https://github.com/scalableminds/webknossos/pull/8266)
 
 ### Changed
 - Renamed "resolution" to "magnification" in more places within the codebase, including local variables. [#8168](https://github.com/scalableminds/webknossos/pull/8168)

From 3f4bcaf27456f2da4ca407760256ed01562d39d4 Mon Sep 17 00:00:00 2001
From: Charlie Meister <charlie.meister@student.hpi.de>
Date: Mon, 16 Dec 2024 16:58:04 +0100
Subject: [PATCH 11/20] remove dev edits

---
 .../javascripts/components/mag_selection.tsx  |  6 +++---
 .../oxalis/view/jobs/train_ai_model.tsx       | 19 ++++++-------------
 2 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/frontend/javascripts/components/mag_selection.tsx b/frontend/javascripts/components/mag_selection.tsx
index 37140f9f8f6..965a6848e03 100644
--- a/frontend/javascripts/components/mag_selection.tsx
+++ b/frontend/javascripts/components/mag_selection.tsx
@@ -34,7 +34,7 @@ function MagSelection({
 }: {
   magInfo: MagInfo | undefined;
   value?: Vector3;
-  onChange?: (a: Vector3) => void;
+  onChange?: (newValue: Vector3) => void;
 }): JSX.Element {
   const allMags = magInfo != null ? magInfo.getMagList() : [];
 
@@ -48,8 +48,8 @@ function MagSelection({
     <Select
       placeholder="Select a magnification"
       value={
-        // using the index of the mag *in the mag list* as value internally
-        // NB: this is different from the mag index
+        // Using the index of the mag *in the mag list* as value internally,
+        // this is different from the mag index.
         value == null || magInfo == null
           ? null
           : clamp(
diff --git a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
index 9e8fc998d86..d838c72cddf 100644
--- a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
+++ b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
@@ -46,6 +46,7 @@ import { convertUserBoundingBoxesFromServerToFrontend } from "oxalis/model/reduc
 import { computeArrayFromBoundingBox } from "libs/utils";
 import { MagSelectionFormItem } from "components/mag_selection";
 import { MagInfo } from "oxalis/model/helpers/mag_info";
+import { V3 } from "libs/mjs";
 
 const { TextArea } = Input;
 const FormItem = Form.Item;
@@ -166,7 +167,7 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
   annotationInfos,
   onAddAnnotationsInfos,
 }: {
-  getMagsForSegmentationLayer: (annotationId: string, layerName: string) => MagInfo; // TODO_c rename method
+  getMagsForSegmentationLayer: (annotationId: string, layerName: string) => MagInfo;
   onClose: () => void;
   ensureSavedState?: (() => Promise<void>) | null;
   annotationInfos: Array<AnnotationInfoForAIJob<GenericAnnotation>>;
@@ -174,7 +175,7 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
 }) {
   const [form] = Form.useForm();
   const [useCustomWorkflow, setUseCustomWorkflow] = React.useState(false);
-  const [mags, setMags] = useState<MagInfoPerAnnotation[]>(); // maps annotationId to MagInfo of intersection of
+  const [mags, setMags] = useState<MagInfoPerAnnotation[]>();
 
   const getIntersectingMagList = (
     annotationId: string,
@@ -183,20 +184,14 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
     imageDataLayerName: string,
   ) => {
     const colorLayers = getColorLayers(dataset);
-    console.log("updating", imageDataLayerName, groundTruthLayerName);
+    const dataLayerMags = getMagsForColorLayer(colorLayers, imageDataLayerName);
     const groundTruthLayerMags = getMagsForSegmentationLayer(
       annotationId,
       groundTruthLayerName,
     ).getMagList();
-    const dataLayerMags = getMagsForColorLayer(colorLayers, imageDataLayerName);
 
     return groundTruthLayerMags?.filter((groundTruthMag) =>
-      dataLayerMags?.find(
-        (mag) =>
-          mag[0] === groundTruthMag[0] &&
-          mag[1] === groundTruthMag[1] &&
-          mag[2] === groundTruthMag[2],
-      ),
+      dataLayerMags?.find((mag) => V3.equals(mag, groundTruthMag)),
     );
   };
 
@@ -411,11 +406,9 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
                 chooseSegmentationLayer
                 layers={segmentationLayers}
                 getReadableNameForLayer={(layer) => {
-                  console.log(layer);
                   return layer.name;
                   //TODO_c fix that fallback layers are shown at least with the correct name?
-                  // eg. name (fallbacklayer)
-                  // remember to check-in with P
+                  // eg. name (active layer)
                 }}
                 fixedLayerName={fixedSelectedSegmentationLayer?.name || undefined}
                 label="Ground Truth Layer"

From 420f648c40389e76f03de191f88897ab1c3a6bb5 Mon Sep 17 00:00:00 2001
From: Charlie Meister <charlie.meister@student.hpi.de>
Date: Fri, 20 Dec 2024 09:50:21 +0100
Subject: [PATCH 12/20] WIP: address review

---
 .../oxalis/view/jobs/train_ai_model.tsx       | 36 ++++++++-----------
 1 file changed, 15 insertions(+), 21 deletions(-)

diff --git a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
index d838c72cddf..008bf47a99a 100644
--- a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
+++ b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
@@ -158,7 +158,7 @@ export function TrainAiModelFromAnnotationTab({ onClose }: { onClose: () => void
   );
 }
 
-type MagInfoPerAnnotation = { annotationId: string; magInfo: MagInfo };
+type MagInfoWithAnnotationId = { annotationId: string; magInfo: MagInfo };
 
 export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | HybridTracing>({
   getMagsForSegmentationLayer,
@@ -175,7 +175,7 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
 }) {
   const [form] = Form.useForm();
   const [useCustomWorkflow, setUseCustomWorkflow] = React.useState(false);
-  const [mags, setMags] = useState<MagInfoPerAnnotation[]>();
+  const [mags, setMags] = useState<MagInfoWithAnnotationId[]>();
 
   const getIntersectingMagList = (
     annotationId: string,
@@ -358,6 +358,16 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
             : [];
         const initialMagInfo = new MagInfo(initialMags);
 
+        const onChangeLayer = () => {
+          setIntersectingMags(
+            annotationId,
+            dataset,
+            form.getFieldValue(["trainingAnnotations", idx, "layerName"]),
+            form.getFieldValue(["trainingAnnotations", idx, "imageDataLayer"]),
+          );
+          form.setFieldValue(["trainingAnnotations", idx, "mag"], undefined);
+        };
+
         return (
           <Row key={annotationId} gutter={8}>
             <Col span={6}>
@@ -388,15 +398,7 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
                   getReadableNameForLayer={(layer) => layer.name}
                   fixedLayerName={fixedSelectedColorLayer?.name || undefined}
                   style={{ width: "100%" }}
-                  onChange={() => {
-                    setIntersectingMags(
-                      annotationId,
-                      dataset,
-                      form.getFieldValue(["trainingAnnotations", idx, "layerName"]),
-                      form.getFieldValue(["trainingAnnotations", idx, "imageDataLayer"]),
-                    );
-                    form.setFieldValue(["trainingAnnotations", idx, "mag"], undefined);
-                  }}
+                  onChange={onChangeLayer}
                 />
               </FormItem>
             </Col>
@@ -412,15 +414,7 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
                 }}
                 fixedLayerName={fixedSelectedSegmentationLayer?.name || undefined}
                 label="Ground Truth Layer"
-                onChange={() => {
-                  setIntersectingMags(
-                    annotationId,
-                    dataset,
-                    form.getFieldValue(["trainingAnnotations", idx, "layerName"]),
-                    form.getFieldValue(["trainingAnnotations", idx, "imageDataLayer"]),
-                  );
-                  form.setFieldValue(["trainingAnnotations", idx, "mag"], undefined);
-                }}
+                onChange={onChangeLayer}
               />
             </Col>
             <Col span={6}>
@@ -428,7 +422,7 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
                 name={["trainingAnnotations", idx, "mag"]}
                 magInfo={
                   mags != null
-                    ? mags.find((magInfoPerAnno) => magInfoPerAnno.annotationId === annotationId)
+                    ? mags.find((magInfoForAnno) => magInfoForAnno.annotationId === annotationId)
                         ?.magInfo
                     : initialMagInfo
                 }

From 3da8f49d574dc51fcf2939d80dd8077373dcace7 Mon Sep 17 00:00:00 2001
From: Charlie Meister <charlie.meister@student.hpi.de>
Date: Fri, 20 Dec 2024 16:28:49 +0100
Subject: [PATCH 13/20] WIP: add Form.useWatch to update value whenever form
 changes

---
 .../oxalis/view/jobs/train_ai_model.tsx       | 109 +++++++-----------
 1 file changed, 39 insertions(+), 70 deletions(-)

diff --git a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
index 008bf47a99a..f667b5ab85d 100644
--- a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
+++ b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
@@ -158,7 +158,12 @@ export function TrainAiModelFromAnnotationTab({ onClose }: { onClose: () => void
   );
 }
 
-type MagInfoWithAnnotationId = { annotationId: string; magInfo: MagInfo };
+type TrainingAnnotation = {
+  annotationId: string;
+  imageDataLayer: string;
+  layerName: string;
+  mag: Vector3;
+};
 
 export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | HybridTracing>({
   getMagsForSegmentationLayer,
@@ -174,8 +179,28 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
   onAddAnnotationsInfos?: (newItems: Array<AnnotationInfoForAIJob<APIAnnotation>>) => void;
 }) {
   const [form] = Form.useForm();
+
+  const magInfoPerLayer: Array<MagInfo> | null = Form.useWatch(() => {
+    const getIntersectingMags = (idx: number, annotationId: string, dataset: APIDataset) => {
+      console.log("getIntersectingMags");
+      const segmentationLayerName = form.getFieldValue(["trainingAnnotations", idx, "layerName"]);
+      const imageDataLayerName = form.getFieldValue(["trainingAnnotations", idx, "imageDataLayer"]);
+      if (segmentationLayerName != null && imageDataLayerName != null) {
+        return new MagInfo(
+          getIntersectingMagList(annotationId, dataset, segmentationLayerName, imageDataLayerName),
+        );
+      }
+      return new MagInfo([]);
+    };
+
+    return form.getFieldValue("trainingAnnotations").map((_: TrainingAnnotation, idx: number) => {
+      const annotation = annotationInfos[idx].annotation;
+      const annotationId = "id" in annotation ? annotation.id : annotation.annotationId;
+      return getIntersectingMags(idx, annotationId, annotationInfos[idx].dataset);
+    });
+  }, form);
+
   const [useCustomWorkflow, setUseCustomWorkflow] = React.useState(false);
-  const [mags, setMags] = useState<MagInfoWithAnnotationId[]>();
 
   const getIntersectingMagList = (
     annotationId: string,
@@ -195,37 +220,6 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
     );
   };
 
-  const getIntersectingMags = (
-    annotationId: string,
-    dataset: APIDataset,
-    groundTruthLayerName: string,
-    imageDataLayerName: string,
-  ) => {
-    const intersectingMags = getIntersectingMagList(
-      annotationId,
-      dataset,
-      groundTruthLayerName,
-      imageDataLayerName,
-    );
-    if (mags == null) {
-      return [{ annotationId, magInfo: new MagInfo(intersectingMags) }];
-    } else {
-      return mags.map((mag) =>
-        mag.annotationId === annotationId
-          ? { annotationId, magInfo: new MagInfo(intersectingMags) }
-          : mag,
-      );
-    }
-  };
-
-  const setIntersectingMags = (
-    annotationId: string,
-    dataset: APIDataset,
-    groundTruthLayerName: string,
-    imageDataLayerName: string,
-  ) =>
-    setMags(getIntersectingMags(annotationId, dataset, groundTruthLayerName, imageDataLayerName));
-
   const getMagsForColorLayer = (colorLayers: APIDataLayer[], layerName: string) => {
     const colorLayer = colorLayers.find((layer) => layer.name === layerName);
     return colorLayer != null ? getMagInfo(colorLayer.resolutions).getMagList() : null;
@@ -233,22 +227,15 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
 
   const getTrainingAnnotations = async (values: any) => {
     return Promise.all(
-      values.trainingAnnotations.map(
-        async (trainingAnnotation: {
-          annotationId: string;
-          imageDataLayer: string;
-          layerName: string;
-          mag: Vector3;
-        }) => {
-          const { annotationId, imageDataLayer, layerName, mag } = trainingAnnotation;
-          return {
-            annotationId,
-            colorLayerName: imageDataLayer,
-            segmentationLayerName: layerName,
-            mag,
-          };
-        },
-      ),
+      values.trainingAnnotations.map(async (trainingAnnotation: TrainingAnnotation) => {
+        const { annotationId, imageDataLayer, layerName, mag } = trainingAnnotation;
+        return {
+          annotationId,
+          colorLayerName: imageDataLayer,
+          segmentationLayerName: layerName,
+          mag,
+        };
+      }),
     );
   };
 
@@ -347,24 +334,7 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
         const fixedSelectedColorLayer = colorLayers.length === 1 ? colorLayers[0] : null;
         const annotationId = "id" in annotation ? annotation.id : annotation.annotationId;
 
-        const initialMags =
-          fixedSelectedColorLayer != null && fixedSelectedSegmentationLayer != null
-            ? getIntersectingMagList(
-                annotationId,
-                dataset,
-                fixedSelectedSegmentationLayer.name,
-                fixedSelectedColorLayer.name,
-              )
-            : [];
-        const initialMagInfo = new MagInfo(initialMags);
-
         const onChangeLayer = () => {
-          setIntersectingMags(
-            annotationId,
-            dataset,
-            form.getFieldValue(["trainingAnnotations", idx, "layerName"]),
-            form.getFieldValue(["trainingAnnotations", idx, "imageDataLayer"]),
-          );
           form.setFieldValue(["trainingAnnotations", idx, "mag"], undefined);
         };
 
@@ -421,10 +391,9 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
               <MagSelectionFormItem
                 name={["trainingAnnotations", idx, "mag"]}
                 magInfo={
-                  mags != null
-                    ? mags.find((magInfoForAnno) => magInfoForAnno.annotationId === annotationId)
-                        ?.magInfo
-                    : initialMagInfo
+                  magInfoPerLayer != null && magInfoPerLayer[idx] != null
+                    ? magInfoPerLayer[idx]
+                    : new MagInfo([])
                 }
               />
             </Col>

From 88581c69b87343a43aa4b7297eb610ccc1deb044 Mon Sep 17 00:00:00 2001
From: Charlie Meister <charlie.meister@student.hpi.de>
Date: Sat, 21 Dec 2024 00:54:28 +0100
Subject: [PATCH 14/20] fix multi mag form

---
 frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
index f667b5ab85d..af37de458c1 100644
--- a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
+++ b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
@@ -180,9 +180,8 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
 }) {
   const [form] = Form.useForm();
 
-  const magInfoPerLayer: Array<MagInfo> | null = Form.useWatch(() => {
+  const magInfoPerLayer: Array<MagInfo> = Form.useWatch(() => {
     const getIntersectingMags = (idx: number, annotationId: string, dataset: APIDataset) => {
-      console.log("getIntersectingMags");
       const segmentationLayerName = form.getFieldValue(["trainingAnnotations", idx, "layerName"]);
       const imageDataLayerName = form.getFieldValue(["trainingAnnotations", idx, "imageDataLayer"]);
       if (segmentationLayerName != null && imageDataLayerName != null) {
@@ -193,7 +192,11 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
       return new MagInfo([]);
     };
 
-    return form.getFieldValue("trainingAnnotations").map((_: TrainingAnnotation, idx: number) => {
+    const annotationInfos = form.getFieldValue("trainingAnnotations");
+    if (annotationInfos == null) {
+      return [];
+    }
+    return annotationInfos.map((_: TrainingAnnotation, idx: number) => {
       const annotation = annotationInfos[idx].annotation;
       const annotationId = "id" in annotation ? annotation.id : annotation.annotationId;
       return getIntersectingMags(idx, annotationId, annotationInfos[idx].dataset);

From 0f83dbab290ed824ffa9851b732e5ad5202fd6eb Mon Sep 17 00:00:00 2001
From: Charlie Meister <charlie.meister@student.hpi.de>
Date: Mon, 23 Dec 2024 14:58:00 +0100
Subject: [PATCH 15/20] use useRef for watcherFunction to get the current
 annotation infos

---
 .../oxalis/view/jobs/train_ai_model.tsx       | 53 +++++++++----------
 1 file changed, 25 insertions(+), 28 deletions(-)

diff --git a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
index af37de458c1..9767d23bf04 100644
--- a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
+++ b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import {
   Alert,
   Form,
@@ -180,7 +180,10 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
 }) {
   const [form] = Form.useForm();
 
-  const magInfoPerLayer: Array<MagInfo> = Form.useWatch(() => {
+  const watcherFunctionRef = useRef(() => {
+    return [new MagInfo([])];
+  });
+  watcherFunctionRef.current = () => {
     const getIntersectingMags = (idx: number, annotationId: string, dataset: APIDataset) => {
       const segmentationLayerName = form.getFieldValue(["trainingAnnotations", idx, "layerName"]);
       const imageDataLayerName = form.getFieldValue(["trainingAnnotations", idx, "imageDataLayer"]);
@@ -192,15 +195,15 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
       return new MagInfo([]);
     };
 
-    const annotationInfos = form.getFieldValue("trainingAnnotations");
-    if (annotationInfos == null) {
-      return [];
-    }
-    return annotationInfos.map((_: TrainingAnnotation, idx: number) => {
-      const annotation = annotationInfos[idx].annotation;
+    return annotationInfos.map((annotationInfo, idx: number) => {
+      const annotation = annotationInfo.annotation;
       const annotationId = "id" in annotation ? annotation.id : annotation.annotationId;
-      return getIntersectingMags(idx, annotationId, annotationInfos[idx].dataset);
+      return getIntersectingMags(idx, annotationId, annotationInfo.dataset);
     });
+  };
+
+  const magInfoForLayer: Array<MagInfo> = Form.useWatch(() => {
+    return watcherFunctionRef.current();
   }, form);
 
   const [useCustomWorkflow, setUseCustomWorkflow] = React.useState(false);
@@ -228,18 +231,16 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
     return colorLayer != null ? getMagInfo(colorLayer.resolutions).getMagList() : null;
   };
 
-  const getTrainingAnnotations = async (values: any) => {
-    return Promise.all(
-      values.trainingAnnotations.map(async (trainingAnnotation: TrainingAnnotation) => {
-        const { annotationId, imageDataLayer, layerName, mag } = trainingAnnotation;
-        return {
-          annotationId,
-          colorLayerName: imageDataLayer,
-          segmentationLayerName: layerName,
-          mag,
-        };
-      }),
-    );
+  const getTrainingAnnotations = (values: any) => {
+    return values.trainingAnnotations.map((trainingAnnotation: TrainingAnnotation) => {
+      const { annotationId, imageDataLayer, layerName, mag } = trainingAnnotation;
+      return {
+        annotationId,
+        colorLayerName: imageDataLayer,
+        segmentationLayerName: layerName,
+        mag,
+      };
+    });
   };
 
   const onFinish = async (form: FormInstance<any>, useCustomWorkflow: boolean, values: any) => {
@@ -250,8 +251,8 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
       await ensureSavedState();
     }
 
-    await runTraining({
-      trainingAnnotations: await getTrainingAnnotations(values),
+    runTraining({
+      trainingAnnotations: getTrainingAnnotations(values),
       name: values.modelName,
       aiModelCategory: values.modelCategory,
       workflowYaml: useCustomWorkflow ? values.workflowYaml : undefined,
@@ -393,11 +394,7 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
             <Col span={6}>
               <MagSelectionFormItem
                 name={["trainingAnnotations", idx, "mag"]}
-                magInfo={
-                  magInfoPerLayer != null && magInfoPerLayer[idx] != null
-                    ? magInfoPerLayer[idx]
-                    : new MagInfo([])
-                }
+                magInfo={magInfoForLayer != null ? magInfoForLayer[idx] : new MagInfo([])}
               />
             </Col>
           </Row>

From 63258289b8889f5628300b93c5a3c93d1bd43a0f Mon Sep 17 00:00:00 2001
From: Charlie Meister <charlie.meister@student.hpi.de>
Date: Fri, 3 Jan 2025 20:18:46 +0100
Subject: [PATCH 16/20] add await to async method

---
 frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
index 9767d23bf04..7e0da84b434 100644
--- a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
+++ b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
@@ -251,7 +251,7 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
       await ensureSavedState();
     }
 
-    runTraining({
+    await runTraining({
       trainingAnnotations: getTrainingAnnotations(values),
       name: values.modelName,
       aiModelCategory: values.modelCategory,

From 0aee5219bd1d5f27a40c859d9faeca6201b03412 Mon Sep 17 00:00:00 2001
From: Charlie Meister <charlie.meister@student.hpi.de>
Date: Fri, 3 Jan 2025 23:52:32 +0100
Subject: [PATCH 17/20] WIP: render volume annotation layer names more nicely
 in layer selection

---
 .../oxalis/view/jobs/train_ai_model.tsx       | 47 ++++++++++---------
 1 file changed, 25 insertions(+), 22 deletions(-)

diff --git a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
index 7e0da84b434..109e5cff253 100644
--- a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
+++ b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
@@ -309,27 +309,31 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
       <AiModelCategoryFormItem />
 
       {annotationInfos.map(({ annotation, dataset, volumeTracings }, idx) => {
-        const segmentationLayerNames = _.uniq([
-          // Only consider the layers that are not volume layers (these aren't a fallback layer in one of the volume tracings).
-          // Add actual volume layers below.
-          ...getSegmentationLayers(dataset)
-            .filter(
-              (layer) => !volumeTracings.find((tracing) => tracing.fallbackLayer === layer.name),
-            )
-            .map((layer) => layer.name),
-          // Add volume layers here.
-          ...annotation.annotationLayers
-            .filter((layer) => layer.typ === "Volume")
-            .map((layer) => layer.name),
-        ]);
-        const segmentationLayers: Array<{ name: string }> = segmentationLayerNames.map(
-          (layerName) => ({
-            name: layerName,
-          }),
+        // Only consider the layers that are not volume layers (these aren't a fallback layer in one of the volume tracings).
+        // Add actual volume layers below.
+        const segmentationLayers = _.uniq(
+          getSegmentationLayers(dataset).filter(
+            (layer) => !volumeTracings.find((tracing) => tracing.fallbackLayer === layer.name),
+          ),
         );
 
+        const segmentationLayerNames = segmentationLayers.map((layer) => {
+          return { name: layer.name, additionalInfo: "Active layer: " };
+        });
+        // Add volume layers here.
+        const annotationLayers = _.uniq(
+          annotation.annotationLayers.filter((layer) => layer.typ === "Volume"),
+        );
+        const annotationLayerNames = annotationLayers.map((layer) => {
+          return { name: layer.name };
+        });
+
+        const segmentationAndColorLayers: Array<{ name: string; additionalInfo?: string }> = [
+          ...segmentationLayerNames,
+          ...annotationLayerNames,
+        ];
         const fixedSelectedSegmentationLayer =
-          segmentationLayers.length === 1 ? segmentationLayers[0] : null;
+          segmentationAndColorLayers.length === 1 ? segmentationAndColorLayers[0] : null;
 
         // Remove uint24 color layers because they cannot be trained on currently
         const colorLayers = getColorLayers(dataset).filter(
@@ -380,11 +384,10 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
               <LayerSelectionFormItem
                 name={["trainingAnnotations", idx, "layerName"]}
                 chooseSegmentationLayer
-                layers={segmentationLayers}
+                layers={segmentationAndColorLayers}
                 getReadableNameForLayer={(layer) => {
-                  return layer.name;
-                  //TODO_c fix that fallback layers are shown at least with the correct name?
-                  // eg. name (active layer)
+                  if (layer) return (layer.additionalInfo || "").concat(layer.name);
+                  return "";
                 }}
                 fixedLayerName={fixedSelectedSegmentationLayer?.name || undefined}
                 label="Ground Truth Layer"

From 78af65efc5ae16f617fef2c7b67415a064467a24 Mon Sep 17 00:00:00 2001
From: Philipp Otto <philipp.4096@gmail.com>
Date: Mon, 6 Jan 2025 16:19:15 +0100
Subject: [PATCH 18/20] fix that tracing ids were shown (and sent to worker)
 even though human-readable layer names should be used instead

---
 .../oxalis/view/jobs/train_ai_model.tsx       | 46 ++++++++-----------
 1 file changed, 20 insertions(+), 26 deletions(-)

diff --git a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
index 109e5cff253..5901bf99da1 100644
--- a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
+++ b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
@@ -308,30 +308,27 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
       <AiModelNameFormItem />
       <AiModelCategoryFormItem />
 
-      {annotationInfos.map(({ annotation, dataset, volumeTracings }, idx) => {
-        // Only consider the layers that are not volume layers (these aren't a fallback layer in one of the volume tracings).
-        // Add actual volume layers below.
-        const segmentationLayers = _.uniq(
-          getSegmentationLayers(dataset).filter(
-            (layer) => !volumeTracings.find((tracing) => tracing.fallbackLayer === layer.name),
-          ),
-        );
+      {annotationInfos.map(({ annotation, dataset }, idx) => {
+        // Gather layer names from dataset. Omit the layers that are also present
+        // in annotationLayers.
+        const segmentationLayerNames = getSegmentationLayers(dataset)
+          .map((layer) => layer.name)
+          .filter(
+            (tracingId) =>
+              !annotation.annotationLayers.find(
+                (annotationLayer) => annotationLayer.tracingId === tracingId,
+              ),
+          );
 
-        const segmentationLayerNames = segmentationLayers.map((layer) => {
-          return { name: layer.name, additionalInfo: "Active layer: " };
-        });
-        // Add volume layers here.
-        const annotationLayers = _.uniq(
-          annotation.annotationLayers.filter((layer) => layer.typ === "Volume"),
-        );
-        const annotationLayerNames = annotationLayers.map((layer) => {
-          return { name: layer.name };
-        });
+        // Gather layer names from the annotation
+        const annotationLayerNames = annotation.annotationLayers
+          .filter((layer) => layer.typ === "Volume")
+          .map((layer) => layer.name);
 
-        const segmentationAndColorLayers: Array<{ name: string; additionalInfo?: string }> = [
+        const segmentationAndColorLayers: Array<string> = _.uniq([
           ...segmentationLayerNames,
           ...annotationLayerNames,
-        ];
+        ]);
         const fixedSelectedSegmentationLayer =
           segmentationAndColorLayers.length === 1 ? segmentationAndColorLayers[0] : null;
 
@@ -384,12 +381,9 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
               <LayerSelectionFormItem
                 name={["trainingAnnotations", idx, "layerName"]}
                 chooseSegmentationLayer
-                layers={segmentationAndColorLayers}
-                getReadableNameForLayer={(layer) => {
-                  if (layer) return (layer.additionalInfo || "").concat(layer.name);
-                  return "";
-                }}
-                fixedLayerName={fixedSelectedSegmentationLayer?.name || undefined}
+                layers={segmentationAndColorLayers.map((name) => ({ name }))}
+                getReadableNameForLayer={(layer) => layer.name}
+                fixedLayerName={fixedSelectedSegmentationLayer || undefined}
                 label="Ground Truth Layer"
                 onChange={onChangeLayer}
               />

From feb8a4531e0dfe14c1084188a5ce363321102917 Mon Sep 17 00:00:00 2001
From: Charlie Meister <charlie.meister@student.hpi.de>
Date: Mon, 6 Jan 2025 17:32:52 +0100
Subject: [PATCH 19/20] remove application.conf edit

---
 conf/application.conf                         |  4 +-
 .../oxalis/view/jobs/train_ai_model.tsx       | 53 ++++++++++---------
 2 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/conf/application.conf b/conf/application.conf
index 6c871ef6283..751fcd1e5aa 100644
--- a/conf/application.conf
+++ b/conf/application.conf
@@ -151,8 +151,8 @@ features {
   taskReopenAllowedInSeconds = 30
   allowDeleteDatasets = true
   # to enable jobs for local development, use "yarn enable-jobs" to also activate it in the database
-  jobsEnabled = true
-  voxelyticsEnabled = true
+  jobsEnabled = false
+  voxelyticsEnabled = false
   # For new users, the dashboard will show a banner which encourages the user to check out the following dataset.
   # If isWkorgInstance == true, `/createExplorative/hybrid/true` is appended to the URL so that a new tracing is opened.
   # If isWkorgInstance == false, `/view` is appended to the URL so that it's opened in view mode (since the user might not
diff --git a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
index 5901bf99da1..1f27b5c52f7 100644
--- a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
+++ b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
@@ -220,6 +220,7 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
       annotationId,
       groundTruthLayerName,
     ).getMagList();
+    console.log("getintersectingmaglist", dataLayerMags, groundTruthLayerMags);
 
     return groundTruthLayerMags?.filter((groundTruthMag) =>
       dataLayerMags?.find((mag) => V3.equals(mag, groundTruthMag)),
@@ -414,31 +415,31 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
 
       {hasErrors
         ? errors.map((error) => (
-            <Alert
-              key={error}
-              description={error}
-              style={{
-                marginBottom: 12,
-                whiteSpace: "pre-line",
-              }}
-              type="error"
-              showIcon
-            />
-          ))
+          <Alert
+            key={error}
+            description={error}
+            style={{
+              marginBottom: 12,
+              whiteSpace: "pre-line",
+            }}
+            type="error"
+            showIcon
+          />
+        ))
         : null}
       {hasWarnings
         ? warnings.map((warning) => (
-            <Alert
-              key={warning}
-              description={warning}
-              style={{
-                marginBottom: 12,
-                whiteSpace: "pre-line",
-              }}
-              type="warning"
-              showIcon
-            />
-          ))
+          <Alert
+            key={warning}
+            description={warning}
+            style={{
+              marginBottom: 12,
+              whiteSpace: "pre-line",
+            }}
+            type="warning"
+            showIcon
+          />
+        ))
         : null}
 
       <FormItem>
@@ -682,10 +683,10 @@ function AnnotationsCsvInput({
               return valid
                 ? Promise.resolve()
                 : Promise.reject(
-                    new Error(
-                      "Each line should only contain an annotation ID or URL (without # or ,)",
-                    ),
-                  );
+                  new Error(
+                    "Each line should only contain an annotation ID or URL (without # or ,)",
+                  ),
+                );
             },
           }),
         ]}

From e12ab6f74cf0f9302bb859295c067de5a0d6b87f Mon Sep 17 00:00:00 2001
From: Charlie Meister <charlie.meister@student.hpi.de>
Date: Mon, 6 Jan 2025 17:42:17 +0100
Subject: [PATCH 20/20] lint

---
 .../oxalis/view/jobs/train_ai_model.tsx       | 52 +++++++++----------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
index 1f27b5c52f7..ca82e527abc 100644
--- a/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
+++ b/frontend/javascripts/oxalis/view/jobs/train_ai_model.tsx
@@ -415,31 +415,31 @@ export function TrainAiModelTab<GenericAnnotation extends APIAnnotation | Hybrid
 
       {hasErrors
         ? errors.map((error) => (
-          <Alert
-            key={error}
-            description={error}
-            style={{
-              marginBottom: 12,
-              whiteSpace: "pre-line",
-            }}
-            type="error"
-            showIcon
-          />
-        ))
+            <Alert
+              key={error}
+              description={error}
+              style={{
+                marginBottom: 12,
+                whiteSpace: "pre-line",
+              }}
+              type="error"
+              showIcon
+            />
+          ))
         : null}
       {hasWarnings
         ? warnings.map((warning) => (
-          <Alert
-            key={warning}
-            description={warning}
-            style={{
-              marginBottom: 12,
-              whiteSpace: "pre-line",
-            }}
-            type="warning"
-            showIcon
-          />
-        ))
+            <Alert
+              key={warning}
+              description={warning}
+              style={{
+                marginBottom: 12,
+                whiteSpace: "pre-line",
+              }}
+              type="warning"
+              showIcon
+            />
+          ))
         : null}
 
       <FormItem>
@@ -683,10 +683,10 @@ function AnnotationsCsvInput({
               return valid
                 ? Promise.resolve()
                 : Promise.reject(
-                  new Error(
-                    "Each line should only contain an annotation ID or URL (without # or ,)",
-                  ),
-                );
+                    new Error(
+                      "Each line should only contain an annotation ID or URL (without # or ,)",
+                    ),
+                  );
             },
           }),
         ]}