From 69cfd64504666c93a07e9e92a107198bb3d6f236 Mon Sep 17 00:00:00 2001
From: Matt McCormick <matt.mccormick@kitware.com>
Date: Tue, 29 Aug 2023 14:27:29 -0400
Subject: [PATCH 1/2] DOC: Add tooltip on load sample input overwrite

---
 app/index.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/index.html b/app/index.html
index 5ac1aa1..35d5470 100644
--- a/app/index.html
+++ b/app/index.html
@@ -24,6 +24,7 @@
   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 { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path';
   setBasePath('/');
@@ -73,7 +74,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 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 />

From 8daa8d5c154a6e85bd7f11dd6154bfd8eca242b9 Mon Sep 17 00:00:00 2001
From: Matt McCormick <matt.mccormick@kitware.com>
Date: Tue, 29 Aug 2023 15:10:35 -0400
Subject: [PATCH 2/2] ENH: App UI tweaks

---
 app/index.html                           | 14 ++++++++------
 app/src/conversion-controller.ts         | 10 +++++-----
 app/src/conversion-load-sample-inputs.ts |  5 ++---
 app/src/utilities.ts                     |  1 +
 4 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/app/index.html b/app/index.html
index 35d5470..8d3c9e5 100644
--- a/app/index.html
+++ b/app/index.html
@@ -25,6 +25,8 @@
   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('/');
@@ -61,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>
@@ -74,7 +76,7 @@ <h2>ITK IO Scanco</h2>
       </sl-select>
       <br />
     <sl-divider></sl-divider>
-    <br /><sl-tooltip content="Load example input data. This will overwrite any existing input data."><sl-button name="loadSampleInputs" variant="default" style="display: none;">Load sample</sl-button></sl-tooltip>
+    <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 />
@@ -83,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>
 
diff --git a/app/src/conversion-controller.ts b/app/src/conversion-controller.ts
index 4bb983c..658e196 100644
--- a/app/src/conversion-controller.ts
+++ b/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
diff --git a/app/src/conversion-load-sample-inputs.ts b/app/src/conversion-load-sample-inputs.ts
index f91389e..2fbcc9c 100644
--- a/app/src/conversion-load-sample-inputs.ts
+++ b/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
diff --git a/app/src/utilities.ts b/app/src/utilities.ts
index 9ef324d..5fea7e2 100644
--- a/app/src/utilities.ts
+++ b/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'), {