From 3ee9b5222e9ff96ebf49c96a08c5f3c7e8554fdb Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Thu, 14 Dec 2023 16:10:19 -0500
Subject: [PATCH] feat(SegmentGroupControls): add save button

---
 src/components/SaveSegmentGroupDialog.vue | 93 +++++++++++++++++++++++
 src/components/SaveSession.vue            |  1 +
 src/components/SegmentGroupControls.vue   | 25 +++++-
 src/io/readWriteImage.ts                  | 39 ++++++++++
 src/store/segmentGroups.ts                | 41 +---------
 5 files changed, 158 insertions(+), 41 deletions(-)
 create mode 100644 src/components/SaveSegmentGroupDialog.vue
 create mode 100644 src/io/readWriteImage.ts

diff --git a/src/components/SaveSegmentGroupDialog.vue b/src/components/SaveSegmentGroupDialog.vue
new file mode 100644
index 000000000..579a6e97a
--- /dev/null
+++ b/src/components/SaveSegmentGroupDialog.vue
@@ -0,0 +1,93 @@
+<template>
+  <v-card>
+    <v-card-title class="d-flex flex-row align-center">
+      Save Segment Group
+    </v-card-title>
+    <v-card-text>
+      <v-form v-model="valid" @submit.prevent="saveSegmentGroup">
+        <v-text-field
+          v-model="fileName"
+          hint="Filename that will appear in downloads."
+          label="Filename"
+          :rules="[validFileName]"
+          required
+          id="filename"
+        />
+
+        <v-radio-group v-model="fileFormat" label="Format">
+          <v-radio v-for="ext in EXTENSIONS" :key="ext" :value="ext">
+            <template #label>
+              {{ ext }}
+            </template>
+          </v-radio>
+        </v-radio-group>
+      </v-form>
+    </v-card-text>
+    <v-card-actions>
+      <v-spacer />
+      <v-btn
+        :loading="saving"
+        color="secondary"
+        @click="saveSegmentGroup"
+        :disabled="!valid"
+      >
+        <v-icon class="mr-2">mdi-content-save</v-icon>
+        <span data-testid="save-confirm-button">Save</span>
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { saveAs } from 'file-saver';
+import { useSegmentGroupStore } from '@/src/store/segmentGroups';
+import { writeImage } from '@/src/io/readWriteImage';
+
+const EXTENSIONS = [
+  'dcm',
+  'nrrd',
+  'hdf5',
+  'nii',
+  'nii.gz',
+  'tif',
+  'mha',
+  'vtk',
+  'iwi.cbor',
+];
+
+const props = defineProps<{
+  close: () => undefined;
+  id: string;
+}>();
+const fileName = ref('');
+const valid = ref(true);
+const saving = ref(false);
+const fileFormat = ref(EXTENSIONS[0]);
+
+const segmentGroupStore = useSegmentGroupStore();
+
+async function saveSegmentGroup() {
+  if (fileName.value.trim().length === 0) {
+    return;
+  }
+  try {
+    saving.value = true;
+    const image = segmentGroupStore.dataIndex[props.id];
+    const serialized = await writeImage(fileFormat.value, image);
+    saveAs(new Blob([serialized]), `${fileName.value}.${fileFormat.value}`);
+    props.close();
+  } finally {
+    saving.value = false;
+  }
+}
+
+onMounted(() => {
+  // trigger form validation check so can immediately save with default value
+  fileName.value = segmentGroupStore.metadataByID[props.id].name;
+});
+
+function validFileName(name: string) {
+  return name.trim().length > 0 || 'Required';
+}
+</script>
diff --git a/src/components/SaveSession.vue b/src/components/SaveSession.vue
index f2c999f41..ad2710b35 100644
--- a/src/components/SaveSession.vue
+++ b/src/components/SaveSession.vue
@@ -64,6 +64,7 @@ export default defineComponent({
     }
 
     onMounted(() => {
+      // triggers form validation check so can immediately save with default value
       fileName.value = DEFAULT_FILENAME;
     });
 
diff --git a/src/components/SegmentGroupControls.vue b/src/components/SegmentGroupControls.vue
index cfeebec56..e494eaf46 100644
--- a/src/components/SegmentGroupControls.vue
+++ b/src/components/SegmentGroupControls.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import SegmentList from '@/src/components/SegmentList.vue';
+import CloseableDialog from '@/src/components/CloseableDialog.vue';
+import SaveSegmentGroupDialog from '@/src/components/SaveSegmentGroupDialog.vue';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { useSegmentGroupStore } from '@/src/store/segmentGroups';
 import { usePaintToolStore } from '@/src/store/tools/paint';
@@ -110,6 +112,13 @@ function createSegmentGroup() {
 
   startEditing(id);
 }
+
+const saveId = ref('');
+const saveDialog = ref(false);
+function openSaveDialog(id: string) {
+  saveId.value = id;
+  saveDialog.value = true;
+}
 </script>
 
 <template>
@@ -143,15 +152,21 @@ function createSegmentGroup() {
           <div class="d-flex flex-row align-center w-100" :title="group.name">
             <span class="group-name">{{ group.name }}</span>
             <v-spacer />
+            <v-btn
+              icon="mdi-content-save"
+              size="small"
+              variant="flat"
+              @click.stop="openSaveDialog(group.id)"
+            ></v-btn>
             <v-btn
               icon="mdi-pencil"
-              size="x-small"
+              size="small"
               variant="flat"
               @click.stop="startEditing(group.id)"
             ></v-btn>
             <v-btn
               icon="mdi-delete"
-              size="x-small"
+              size="small"
               variant="flat"
               @click.stop="deleteGroup(group.id)"
             ></v-btn>
@@ -186,6 +201,12 @@ function createSegmentGroup() {
       </v-card-actions>
     </v-card>
   </v-dialog>
+
+  <closeable-dialog v-model="saveDialog" max-width="30%">
+    <template v-slot="{ close }">
+      <save-segment-group-dialog :close="close" :id="saveId" />
+    </template>
+  </closeable-dialog>
 </template>
 
 <style>
diff --git a/src/io/readWriteImage.ts b/src/io/readWriteImage.ts
new file mode 100644
index 000000000..fd32604b9
--- /dev/null
+++ b/src/io/readWriteImage.ts
@@ -0,0 +1,39 @@
+import vtkITKHelper from '@kitware/vtk.js/Common/DataModel/ITKHelper';
+import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
+import { copyImage } from 'itk-wasm';
+import {
+  readImage as readImageItk,
+  writeImage as writeImageItk,
+} from '@itk-wasm/image-io';
+import { vtiReader, vtiWriter } from '@/src/io/vtk/async';
+
+export const readImage = async (file: File) => {
+  if (file.name.endsWith('.vti'))
+    return (await vtiReader(file)) as vtkImageData;
+
+  const { image } = await readImageItk(null, file);
+  return vtkITKHelper.convertItkToVtkImage(image);
+};
+
+export const writeImage = async (format: string, image: vtkImageData) => {
+  if (format === 'vti') {
+    return vtiWriter(image);
+  }
+  // copyImage so writeImage does not detach live data when passing to worker
+  const itkImage = copyImage(vtkITKHelper.convertVtkToItkImage(image));
+
+  // Transpose the direction matrix to fix bug in @itk-wasm/image-io.writeImage
+  // Remove when @itk-wasm/image-io version is above 0.5.0 https://github.com/InsightSoftwareConsortium/itk-wasm/commit/ad9ca85eedc47c9d3444cf36859569c529886bde
+  const oldDirection = [...itkImage.direction];
+  const { dimension } = itkImage.imageType;
+  for (let idx = 0; idx < dimension; ++idx) {
+    for (let idy = 0; idy < dimension; ++idy) {
+      itkImage.direction[idx + idy * dimension] =
+        oldDirection[idy + idx * dimension];
+    }
+  }
+
+  const result = await writeImageItk(null, itkImage, `image.${format}`);
+  result.webWorker?.terminate();
+  return result.serializedImage.data;
+};
diff --git a/src/store/segmentGroups.ts b/src/store/segmentGroups.ts
index b04238103..97ef0645a 100644
--- a/src/store/segmentGroups.ts
+++ b/src/store/segmentGroups.ts
@@ -1,12 +1,7 @@
 import { computed, reactive, ref, toRaw, watch } from 'vue';
 import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
 import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
-import vtkITKHelper from '@kitware/vtk.js/Common/DataModel/ITKHelper';
-import { copyImage } from 'itk-wasm';
-import {
-  readImage as readImageItk,
-  writeImage as writeImageItk,
-} from '@itk-wasm/image-io';
+import { RGBAColor } from '@kitware/vtk.js/types';
 import { defineStore } from 'pinia';
 import { useImageStore } from '@/src/store/datasets-images';
 import { join, normalize } from '@/src/utils/path';
@@ -16,14 +11,13 @@ import { normalizeForStore, removeFromArray } from '@/src/utils';
 import { compareImageSpaces } from '@/src/utils/imageSpace';
 import { SegmentMask } from '@/src/types/segment';
 import { DEFAULT_SEGMENT_MASKS } from '@/src/config';
-import { RGBAColor } from '@kitware/vtk.js/types';
+import { readImage, writeImage } from '@/src/io/readWriteImage';
 import vtkLabelMap from '../vtk/LabelMap';
 import {
   StateFile,
   Manifest,
   SegmentGroupMetadata,
 } from '../io/state-file/schema';
-import { vtiReader, vtiWriter } from '../io/vtk/async';
 import { FileEntry } from '../io/types';
 import {
   DataSelection,
@@ -33,37 +27,6 @@ import {
   selectionEquals,
 } from './datasets';
 
-const readImage = async (file: File) => {
-  if (file.name.endsWith('.vti'))
-    return (await vtiReader(file)) as vtkImageData;
-
-  const { image } = await readImageItk(null, file);
-  return vtkITKHelper.convertItkToVtkImage(image);
-};
-
-const writeImage = async (format: string, image: vtkImageData) => {
-  if (format === 'vti') {
-    return vtiWriter(image);
-  }
-  // copyImage so writeImage does not detach live data when passing to worker
-  const itkImage = copyImage(vtkITKHelper.convertVtkToItkImage(image));
-
-  // Transpose the direction matrix to fix bug in @itk-wasm/image-io.writeImage
-  // Remove when @itk-wasm/image-io version is above 0.5.0 https://github.com/InsightSoftwareConsortium/itk-wasm/commit/ad9ca85eedc47c9d3444cf36859569c529886bde
-  const oldDirection = [...itkImage.direction];
-  const { dimension } = itkImage.imageType;
-  for (let idx = 0; idx < dimension; ++idx) {
-    for (let idy = 0; idy < dimension; ++idy) {
-      itkImage.direction[idx + idy * dimension] =
-        oldDirection[idy + idx * dimension];
-    }
-  }
-
-  const result = await writeImageItk(null, itkImage, `image.${format}`);
-  result.webWorker?.terminate();
-  return result.serializedImage.data;
-};
-
 const LabelmapArrayType = Uint8Array;
 export type LabelmapArrayType = Uint8Array;