Merge pull request #79 from thewtex/interface-tweaks

Interface tweaks

app/index.html

@@ -24,6 +24,9 @@
   import '@shoelace-style/shoelace/dist/components/option/option.js';
   import '@shoelace-style/shoelace/dist/components/select/select.js';
   import '@shoelace-style/shoelace/dist/components/progress-bar/progress-bar.js';
+  import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
+  import '@shoelace-style/shoelace/dist/components/format-bytes/format-bytes.js';
+  import '@shoelace-style/shoelace/dist/components/details/details.js';
 
   import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path';
   setBasePath('/');
@@ -60,11 +63,11 @@ <h2>ITK IO Scanco</h2>
     <small><i>Convert Scanco .AIM or .ISQ volumes to an open standard file format.</i></small><br /><br />
 
     <div id="conversionInputs"><form action="">
-      <sl-input required name="input-volume" type="text" label="AIM or ISQ volume" help-text="Input volume" disabled></sl-input>
-      <label for="input-volume-file"><sl-button required variant="primary" outline onclick="this.parentElement.nextElementSibling.click()">Upload</sl-button></label><input type="file" name="input-volume-file" style="display: none"/>
+      <label for="input-volume-file"><sl-button required variant="primary" outline onclick="this.parentElement.nextElementSibling.click()"><sl-icon slot="prefix" name="box-arrow-up"></sl-icon> Upload</sl-button></label><input type="file" name="input-volume-file" style="display: none"/>
       <br />
+      <div id="input-volume-description"></div>
       <br />
-      <sl-select pill filled value="mha" required name="output-format" label="Output format" help-text="Output file format">
+      <sl-select filled value="mha" required name="output-format" label="Output format" help-text="Output file format">
         <sl-option value="mha">MetaImage</sl-option>
         <sl-option value="nii.gz">NIfTI</sl-option>
         <sl-option value="nrrd">NRRD</sl-option>
@@ -73,7 +76,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</sl-button>
+    <br /><sl-tooltip content="Load example input data. This will overwrite data any existing input data."><sl-button name="loadSampleInputs" variant="default" style="display: none;">Load sample</sl-button></sl-tooltip>
     <sl-button type="button" variant="success" name="run">Convert</sl-button>
     <br />
     <br />
@@ -82,8 +85,8 @@ <h2>ITK IO Scanco</h2>
     <sl-divider></sl-divider>
 
     <div id="conversionOutputs">
-      <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>
+      <sl-details disabled id="output-image-details" summary="Image metadata"></sl-details>
+      <sl-button variant="neutral" outline name="output-download" disabled><sl-icon slot="prefix" name="box-arrow-down"></sl-icon> Download</sl-button>
 <br /><br />
     </div>
 

app/src/conversion-controller.ts

@@ -47,9 +47,8 @@ class ConversionController  {
 
         files[0].arrayBuffer().then((arrayBuffer) => {
             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 inputVolumeDescription = document.getElementById("input-volume-description")
+            inputVolumeDescription.innerHTML = `${files[0].name}, (<sl-format-bytes value="${model.inputVolume.length}"></sl-format-bytes>)`
         })
     })
 
@@ -108,7 +107,6 @@ class ConversionController  {
 
         outputOutputDownload.variant = "success"
         outputOutputDownload.disabled = false
-        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)) + '...'
@@ -117,7 +115,9 @@ class ConversionController  {
         }
         image.direction = direction
         image.data = "[...]"
-        outputOutput.value = JSON.stringify(image, replacer, 2)
+        const outputOutput = document.getElementById('output-image-details')
+        outputOutput.innerHTML = `<pre>${globalThis.escapeHtml(JSON.stringify(image, replacer, 2))}</pre>`
+        outputOutput.disabled = false
       } catch (error) {
         notify("Error while running pipeline", error.toString(), "danger", "exclamation-octagon")
         throw error

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

@@ -3,12 +3,12 @@ export default async function conversionLoadSampleInputs (model) {
   progressBar.value = 0
   progressBar.setAttribute('style', 'display: block;')
 
-  const inputVolumeElement = document.querySelector("#conversionInputs sl-input[name=input-volume]")
+  const inputVolumeDescription = document.getElementById("input-volume-description")
 
   const url = import.meta.env.DEV ? '/sample-data/AIMIOTestImage.AIM' : 'https://itk.mypinata.cloud/ipfs/QmPaZBXqb99fsKQi28tCuGpW1LgiVrBYKRimY28nA9mYgE'
   const response = await fetch(url)
   const contentLength = parseInt(response.headers.get('Content-Length'))
-  inputVolumeElement.helpText = 'Input volume size: ' + contentLength + ' bytes'
+  inputVolumeDescription.innerHTML = `Sample AIM volume size: <sl-format-bytes value="${contentLength}"></sl-format-bytes>`
 
   const reader = response.body.getReader()
 
@@ -37,7 +37,6 @@ export default async function conversionLoadSampleInputs (model) {
 
   model.inputVolume = inputVolume
   model.inputFileName = 'ITKIOScancoSampleVolume.aim'
-  inputVolumeElement.value = inputVolume.subarray(0, 50).toString() + ' ...'
   progressBar.setAttribute('style', 'display: none;')
   progressBar.textContent = ''
   progressBar.max = 100

app/src/utilities.ts

@@ -22,6 +22,7 @@ function escapeHtml(html) {
   div.remove()
   return escaped
 }
+globalThis.escapeHtml = escapeHtml
 
 export function notify(title, message, variant = 'primary', icon = 'info-circle', duration = 3000) {
   const slAlert = Object.assign(document.createElement('sl-alert'), {