feat(SegmentGroupControls): add save button

src/components/SaveSegmentGroupDialog.vue

@@ -0,0 +1,98 @@
+<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';
+import { onKeyDown } from '@vueuse/core';
+
+const EXTENSIONS = [
+  'dcm',
+  'nrrd',
+  'hdf5',
+  'nii',
+  'nii.gz',
+  'tif',
+  'mha',
+  'vtk',
+  'iwi.cbor',
+];
+
+const props = defineProps<{
+  close: () => void;
+  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;
+});
+
+onKeyDown('Enter', () => {
+  saveSegmentGroup();
+});
+
+function validFileName(name: string) {
+  return name.trim().length > 0 || 'Required';
+}
+</script>

src/components/SaveSession.vue

@@ -33,6 +33,7 @@
 <script lang="ts">
 import { defineComponent, onMounted, ref } from 'vue';
 import { saveAs } from 'file-saver';
+import { onKeyDown } from '@vueuse/core';
 
 import { serialize } from '../io/state-file';
 
@@ -64,9 +65,14 @@ export default defineComponent({
     }
 
     onMounted(() => {
+      // triggers form validation check so can immediately save with default value
       fileName.value = DEFAULT_FILENAME;
     });
 
+    onKeyDown('Enter', () => {
+      saveSession();
+    });
+
     function validFileName(name: string) {
       return name.trim().length > 0 || 'Required';
     }

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 { selectionEquals, useDatasetStore } from '@/src/store/datasets';
 import { useDICOMStore } from '@/src/store/datasets-dicom';
@@ -143,6 +145,13 @@ function createSegmentGroupFromImage(selectedImageID: string) {
     );
   }
 }
+
+const saveId = ref('');
+const saveDialog = ref(false);
+function openSaveDialog(id: string) {
+  saveId.value = id;
+  saveDialog.value = true;
+}
 </script>
 
 <template>
@@ -202,15 +211,21 @@ function createSegmentGroupFromImage(selectedImageID: string) {
           <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>
@@ -245,6 +260,12 @@ function createSegmentGroupFromImage(selectedImageID: string) {
       </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>

src/io/readWriteImage.ts

@@ -0,0 +1,40 @@
+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, webWorker } = await readImageItk(null, file);
+  webWorker.terminate();
+  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;
+};

src/io/vtk/async.ts

@@ -18,15 +18,18 @@ interface FailResult {
 type ReadResult = SuccessReadResult | FailResult;
 
 export const runAsyncVTKReader = (readerName: string) => async (file: File) => {
-  const worker = new PromiseWorker(
-    new Worker(new URL('./async.reader.worker.ts', import.meta.url), {
+  const asyncWorker = new Worker(
+    new URL('./async.reader.worker.ts', import.meta.url),
+    {
       type: 'module',
-    })
+    }
   );
+  const worker = new PromiseWorker(asyncWorker);
   const data = (await worker.postMessage({
     file,
     readerName,
   })) as ReadResult;
+  asyncWorker.terminate();
   if (data.status === 'success') {
     return vtk(data.obj) as vtkObject;
   }
@@ -41,15 +44,18 @@ type WriteResult = SuccessWriteResult | FailResult;
 
 export const runAsyncVTKWriter =
   (writerName: string) => async (dataSet: vtkDataSet) => {
-    const worker = new PromiseWorker(
-      new Worker(new URL('./async.writer.worker.ts', import.meta.url), {
+    const asyncWorker = new Worker(
+      new URL('./async.writer.worker.ts', import.meta.url),
+      {
         type: 'module',
-      })
+      }
     );
+    const worker = new PromiseWorker(asyncWorker);
     const result = (await worker.postMessage({
       obj: dataSet.getState(),
       writerName,
     })) as WriteResult;
+    asyncWorker.terminate();
     if (result.status === 'success') {
       return result.data;
     }

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;