ENH: App conversion load sample inputs

app/index.html

@@ -80,9 +80,8 @@ <h2>ITK IO Scanco</h2>
     <br /><sl-button name="loadSampleInputs" variant="default" style="display: none;">Load sample inputs</sl-button>
     <sl-button type="button" variant="success" name="run">Run</sl-button>
     <br />
-    <sl-progress-bar name="progress-bar" label="Progress" value="0" max="100" style="display: none;"></sl-progress-bar>
-
     <br />
+    <sl-progress-bar name="progress" label="Progress" value="0" max="100" style="display: none;"></sl-progress-bar>
     </form></div>
     <sl-divider></sl-divider>
 

app/src/conversion-load-sample-inputs.ts

@@ -1,12 +1,47 @@
 export default async function conversionLoadSampleInputs (model) {
   const progressBar = document.querySelector('#conversionInputs sl-progress-bar[name=progress]')
   progressBar.value = 0
-  progressBar.setAttribute('style', 'display: block-inline;')
+  progressBar.setAttribute('style', 'display: block;')
+
+  const inputVolumeElement = document.querySelector("#conversionInputs sl-input[name=input-volume]")
+
+  const response = await fetch('/sample-data/AIMIOTestImage.AIM')
+  const contentLength = +response.headers.get('Content-Length');
+  inputVolumeElement.helpText = 'Input volume size: ' + contentLength + ' bytes'
+  progressBar.max = contentLength
+
+  const reader = response.body.getReader()
+
+  let receivedLength = 0
+  const chunks = []
+  while(true) {
+    const {done, value} = await reader.read()
+
+    if (done) {
+      break
+    }
+
+    chunks.push(value)
+    receivedLength += value.length
+    progressBar.value = receivedLength
+    progressBar.textContent = `${receivedLength.toString()} / ${contentLength.toString()} bytes`
+  }
+
+  let inputVolume = new Uint8Array(receivedLength)
+  let position = 0;
+  for(let chunk of chunks) {
+    inputVolume.set(chunk, position); // (4.2)
+    position += chunk.length;
+  }
 
   // const sampleInput = new Uint8Array([222, 173, 190, 239])
-  context.inputs.set("input", sampleInput)
-  const inputElement = document.querySelector("#conversionInputs sl-input[name=input-volume]")
-  // inputElement.value = sampleInput[:50].toString() + ' ...'
+  // context.inputs.set("input", sampleInput)
+  model.inputVolume = inputVolume
+  inputVolumeElement.value = inputVolume.subarray(0, 50).toString() + ' ...'
+  progressBar.setAttribute('style', 'display: none;')
+  progressBar.textContent = ''
+  progressBar.max = 100
+  progressBar.value = 0
 
   return model
 }