ENH: Display output image metadata

KitwareMedical · Jul 27, 2023 · 55da53c · 55da53c
1 parent d4ed17e
commit 55da53c
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 29 deletions.
diff --git a/app/index.html b/app/index.html
@@ -77,7 +77,7 @@ <h2>ITK IO Scanco</h2>
       </sl-select>
       <br />
     <sl-divider></sl-divider>
-    <br /><sl-button name="loadSampleInputs" variant="default" style="display: none;">Load sample inputs</sl-button>
+    <br /><sl-button name="loadSampleInputs" variant="default" style="display: none;">Load sample input</sl-button>
     <sl-button type="button" variant="success" name="run">Run</sl-button>
     <br />
     <br />
@@ -86,7 +86,7 @@ <h2>ITK IO Scanco</h2>
     <sl-divider></sl-divider>
 
     <div id="conversionOutputs">
-      <sl-textarea name="output-file" label="Output file" help-text="Output file information"><sl-skeleton effect="none"></sl-skeleton></sl-textarea>
+      <sl-textarea filled resize="auto" name="output-file" label="Output file" help-text="Image metadata"><sl-skeleton effect="none"></sl-skeleton></sl-textarea>
       <sl-button variant="neutral" outline name="output-download" disabled>Download</sl-button>
 <br /><br />
     </div>

diff --git a/app/src/conversion-controller.ts b/app/src/conversion-controller.ts
@@ -1,12 +1,17 @@
+import { readImageArrayBuffer, writeImageArrayBuffer } from "itk-wasm"
+
 import conversionLoadSampleInputs from "./conversion-load-sample-inputs.js"
 
 class ConversionModel {
 
   inputVolume: Uint8Array
+  inputFileName: string
   outputFormat: string
   forceServerSide: boolean
+  outputVolume: Uint8Array
 
   constructor() {
+    this.inputFileName = "scanco-volume"
     this.outputFormat = "mha"
     this.forceServerSide = false
     }
@@ -33,33 +38,31 @@ class ConversionController  {
 
     // ----------------------------------------------
     // Inputs
-    const inputElement = document.querySelector('#conversionInputs input[name=input-volume-file]')
-    inputElement.addEventListener('change', (event) => {
+    const inputVolumeElement = document.querySelector('#conversionInputs input[name=input-volume-file]')
+    inputVolumeElement.addEventListener('change', (event) => {
         const dataTransfer = event.dataTransfer
         const files = event.target.files || dataTransfer.files
+        console.log(files[0])
 
         files[0].arrayBuffer().then((arrayBuffer) => {
-            model.inputs.set("input", new Uint8Array(arrayBuffer))
-            const input = document.querySelector("#conversionInputs sl-input[name=input]")
-            input.value = model.inputs.get("input").toString().substring(0, 50) + ' ...'
+            model.inputVolume = new Uint8Array(arrayBuffer)
+            const inputVolumeElement = document.querySelector("#conversionInputs sl-input[name=input-volume]")
+            inputVolumeElement.value = model.inputVolume.subarray(0, 50).toString() + ' ...'
+            inputVolumeElement.helpText = `Input volume size: ${model.inputVolume.length.toString()}  bytes`
         })
     })
 
+    const outputFormatElement = document.querySelector('#conversionInputs sl-select[name=output-format]')
+    outputFormatElement.addEventListener('sl-change', (event) => {
+        model.outputFormat = outputFormatElement.value
+        console.log(model.outputFormat)
+    })
+
     // // ----------------------------------------------
     // // Options
-    // const stringifyElement = document.querySelector('#conversionInputs sl-checkbox[name=stringify]')
-    // stringifyElement.addEventListener('sl-change', (event) => {
-    //     model.options.set("stringify", stringifyElement.checked)
-    // })
-
-    // const compressionLevelElement = document.querySelector('#conversionInputs sl-input[name=compression-level]')
-    // compressionLevelElement.addEventListener('sl-change', (event) => {
-    //     model.options.set("compressionLevel", parseInt(compressionLevelElement.value))
-    // })
-
-    // const dataUrlPrefixElement = document.querySelector('#conversionInputs sl-input[name=data-url-prefix]')
-    // dataUrlPrefixElement.addEventListener('sl-change', (event) => {
-    //     model.options.set("dataUrlPrefix", dataUrlPrefixElement.value)
+    // const forceServerSideElement = document.querySelector('#conversionInputs sl-checkbox[name=forceServerSide]')
+    // forceServerSideElement.addEventListener('sl-change', (event) => {
+    //     model.options.set("forceServerSide", forceServerSideElement.checked)
     // })
 
     // ----------------------------------------------
@@ -88,20 +91,33 @@ class ConversionController  {
         runButton.loading = true
         const t0 = performance.now()
 
-        const { webWorker, output } = await conversion.conversion(this.webWorker,
-          model.inputs.get('input').slice(),
-          Object.fromEntries(model.options.entries())
+        const { webWorker, image } = await readImageArrayBuffer(this.webWorker,
+          model.inputVolume,
+          'volume.aim'
         )
+        this.webWorker = webWorker
+        console.log(image)
+        // Avoid later use of detached buffer
+        const direction = image.direction.slice()
+        const { arrayBuffer } = await writeImageArrayBuffer(webWorker, image, `${model.inputFileName}.${model.outputFormat}`)
 
         const t1 = performance.now()
         globalThis.notify("conversion successfully completed", `in ${t1 - t0} milliseconds.`, "success", "rocket-fill")
-        this.webWorker = webWorker
 
-        model.outputs.set("output", output)
+        model.outputVolume = new Uint8Array(arrayBuffer)
+
         outputOutputDownload.variant = "success"
         outputOutputDownload.disabled = false
-        const outputOutput = document.querySelector('#conversionOutputs sl-textarea[name=output]')
-        outputOutput.value = output.toString().substring(0, 200) + ' ...'
+        const outputOutput = document.querySelector('#conversionOutputs sl-textarea[name=output-file]')
+        function replacer (key, value) {
+          if (!!value && value.byteLength !== undefined) {
+            return String(value.slice(0, 6)) + '...'
+          }
+          return value
+        }
+        image.direction = direction
+        image.data = "[...]"
+        outputOutput.value = JSON.stringify(image, replacer, 2)
       } catch (error) {
         globalThis.notify("Error while running pipeline", error.toString(), "danger", "exclamation-octagon")
         throw error

diff --git a/app/src/conversion-load-sample-inputs.ts b/app/src/conversion-load-sample-inputs.ts
@@ -34,9 +34,8 @@ export default async function conversionLoadSampleInputs (model) {
     position += chunk.length;
   }
 
-  // const sampleInput = new Uint8Array([222, 173, 190, 239])
-  // context.inputs.set("input", sampleInput)
   model.inputVolume = inputVolume
+  model.inputFileName = 'ITKIOScancoSampleVolume.aim'
   inputVolumeElement.value = inputVolume.subarray(0, 50).toString() + ' ...'
   progressBar.setAttribute('style', 'display: none;')
   progressBar.textContent = ''