-
Notifications
You must be signed in to change notification settings - Fork 61
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #539 from PaulHax/export-gui
Export segment group GUI
- Loading branch information
Showing
9 changed files
with
2,077 additions
and
3,081 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| <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-select | ||
| label="Format" | ||
| v-model="fileFormat" | ||
| :items="EXTENSIONS" | ||
| ></v-select> | ||
| </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 { onKeyDown } from '@vueuse/core'; | ||
| import { saveAs } from 'file-saver'; | ||
| import { useSegmentGroupStore } from '@/src/store/segmentGroups'; | ||
| import { writeImage } from '@/src/io/readWriteImage'; | ||
| import { useErrorMessage } from '@/src/composables/useErrorMessage'; | ||
| const EXTENSIONS = [ | ||
| 'nrrd', | ||
| 'nii', | ||
| 'nii.gz', | ||
| 'dcm', | ||
| 'hdf5', | ||
| 'tif', | ||
| 'mha', | ||
| 'vtk', | ||
| 'iwi.cbor', | ||
| ]; | ||
| const props = defineProps<{ | ||
| id: string; | ||
| }>(); | ||
| const emit = defineEmits(['done']); | ||
| 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; | ||
| } | ||
| saving.value = true; | ||
| await useErrorMessage('Failed to save segment group', async () => { | ||
| const image = segmentGroupStore.dataIndex[props.id]; | ||
| const serialized = await writeImage(fileFormat.value, image); | ||
| saveAs(new Blob([serialized]), `${fileName.value}.${fileFormat.value}`); | ||
| }); | ||
| saving.value = false; | ||
| emit('done'); | ||
| } | ||
| 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters