feat(demo): Add tooltip on inputs for Upload button

InsightSoftwareConsortium · Aug 14, 2023 · 1438456 · 1438456
1 parent 7d9b01e
commit 1438456
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 20 deletions.
diff --git a/packages/compress-stringify/python-web-demo/index.html b/packages/compress-stringify/python-web-demo/index.html
@@ -51,7 +51,7 @@ <h2>itkwasm-compress-stringify<img src="./python-logo.svg" alt="Python logo" cla
     <small><i>Given a binary, compress and optionally base64 encode.</i></small><br /><br />
 
     <div id="compress_stringify-inputs"><form action="">
-      <sl-details id="compress_stringify-input-details" summary="input: Input binary" disabled></sl-details>
+      <sl-tooltip content="Use the Upload button to provide the input"><sl-details id="compress_stringify-input-details" summary="input: Input binary" disabled></sl-details></sl-tooltip>
       <label for="input-file"><sl-button name="input-file-button" required variant="primary" outline onclick="this.parentElement.nextElementSibling.click()">Upload</sl-button></label><input type="file"  name="input-file" style="display: none"/>
 <br /><br />
       <sl-checkbox name="stringify">stringify - <i>Stringify the output</i></sl-checkbox>
@@ -80,7 +80,7 @@ <h2>itkwasm-compress-stringify<img src="./python-logo.svg" alt="Python logo" cla
     <small><i>Given a binary or string produced with compress-stringify, decompress and optionally base64 decode.</i></small><br /><br />
 
     <div id="parse_string_decompress-inputs"><form action="">
-      <sl-details id="parse_string_decompress-input-details" summary="input: Compressed input" disabled></sl-details>
+      <sl-tooltip content="Use the Upload button to provide the input"><sl-details id="parse_string_decompress-input-details" summary="input: Compressed input" disabled></sl-details></sl-tooltip>
       <label for="input-file"><sl-button name="input-file-button" required variant="primary" outline onclick="this.parentElement.nextElementSibling.click()">Upload</sl-button></label><input type="file"  name="input-file" style="display: none"/>
 <br /><br />
       <sl-checkbox name="parse-string">parse_string - <i>Parse the input string before decompression</i></sl-checkbox>

diff --git a/...ages/compress-stringify/typescript/test/browser/demo-app/compress-stringify-controller.ts b/...ages/compress-stringify/typescript/test/browser/demo-app/compress-stringify-controller.ts
@@ -46,7 +46,7 @@ class CompressStringifyController  {
 
         const arrayBuffer = await files[0].arrayBuffer()
         model.inputs.set("input", new Uint8Array(arrayBuffer))
-        const input = document.querySelector("#compressStringifyInputs sl-input[name=input]")
+        const details = document.getElementById("compressStringify-input-details")
         details.innerHTML = `<pre>${globalThis.escapeHtml(model.inputs.get("input").subarray(0, 50).toString() + ' ...')}</pre>`
         details.disabled = false
     })

diff --git a/packages/compress-stringify/typescript/test/browser/demo-app/index.html b/packages/compress-stringify/typescript/test/browser/demo-app/index.html
@@ -27,6 +27,7 @@
   import '@shoelace-style/shoelace/dist/components/tag/tag.js';
   import '@shoelace-style/shoelace/dist/components/select/select.js';
   import '@shoelace-style/shoelace/dist/components/option/option.js';
+  import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
 
   import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path';
   setBasePath('/');
@@ -65,7 +66,7 @@ <h2>@itk-wasm/compress-stringify<img src="./javascript-logo.svg" alt="JavaScript
     <small><i>Given a binary, compress and optionally base64 encode.</i></small><br /><br />
 
     <div id="compressStringifyInputs"><form action="">
-      <sl-details id="compressStringify-input-details" summary="input: Input binary" disabled></sl-details>
+      <sl-tooltip content="Use the Upload button below to provide the input"><sl-details id="compressStringify-input-details" summary="input: Input binary" disabled></sl-details></sl-tooltip>
       <label for="input-file"><sl-button name="input-file-button" required variant="primary" outline onclick="this.parentElement.nextElementSibling.click()">Upload</sl-button></label><input type="file"  name="input-file" style="display: none"/>
 <br /><br />
       <sl-checkbox name="stringify">stringify - <i>Stringify the output</i></sl-checkbox>
@@ -94,7 +95,7 @@ <h2>@itk-wasm/compress-stringify<img src="./javascript-logo.svg" alt="JavaScript
     <small><i>Given a binary or string produced with compress-stringify, decompress and optionally base64 decode.</i></small><br /><br />
 
     <div id="parseStringDecompressInputs"><form action="">
-      <sl-details id="parseStringDecompress-input-details" summary="input: Compressed input" disabled></sl-details>
+      <sl-tooltip content="Use the Upload button below to provide the input"><sl-details id="parseStringDecompress-input-details" summary="input: Compressed input" disabled></sl-details></sl-tooltip>
       <label for="input-file"><sl-button name="input-file-button" required variant="primary" outline onclick="this.parentElement.nextElementSibling.click()">Upload</sl-button></label><input type="file"  name="input-file" style="display: none"/>
 <br /><br />
       <sl-checkbox name="parse-string">parseString - <i>Parse the input string before decompression</i></sl-checkbox>

diff --git a/...compress-stringify/typescript/test/browser/demo-app/parse-string-decompress-controller.ts b/...compress-stringify/typescript/test/browser/demo-app/parse-string-decompress-controller.ts
@@ -46,7 +46,7 @@ class ParseStringDecompressController  {
 
         const arrayBuffer = await files[0].arrayBuffer()
         model.inputs.set("input", new Uint8Array(arrayBuffer))
-        const input = document.querySelector("#parseStringDecompressInputs sl-input[name=input]")
+        const details = document.getElementById("parseStringDecompress-input-details")
         details.innerHTML = `<pre>${globalThis.escapeHtml(model.inputs.get("input").subarray(0, 50).toString() + ' ...')}</pre>`
         details.disabled = false
     })

diff --git a/packages/dicom/typescript/test/browser/demo-app/index.html b/packages/dicom/typescript/test/browser/demo-app/index.html
@@ -27,6 +27,7 @@
   import '@shoelace-style/shoelace/dist/components/tag/tag.js';
   import '@shoelace-style/shoelace/dist/components/select/select.js';
   import '@shoelace-style/shoelace/dist/components/option/option.js';
+  import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
 
   import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path';
   setBasePath('/');
@@ -69,10 +70,10 @@ <h2>@itk-wasm/dicom<img src="./javascript-logo.svg" alt="JavaScript logo" class=
     <small><i>Apply a presentation state to a given DICOM image and render output as bitmap, or dicom file.</i></small><br /><br />
 
     <div id="applyPresentationStateToImageInputs"><form action="">
-      <sl-details id="applyPresentationStateToImage-image-in-details" summary="imageIn: Input DICOM file" disabled></sl-details>
+      <sl-tooltip content="Use the Upload button to provide the imageIn"><sl-details id="applyPresentationStateToImage-image-in-details" summary="imageIn: Input DICOM file" disabled></sl-details></sl-tooltip>
       <label for="image-in-file"><sl-button name="image-in-file-button" required variant="primary" outline onclick="this.parentElement.nextElementSibling.click()">Upload</sl-button></label><input type="file"  name="image-in-file" style="display: none"/>
 <br /><br />
-      <sl-details id="applyPresentationStateToImage-presentation-state-file-details" summary="presentationStateFile: Process using presentation state file" disabled></sl-details>
+      <sl-tooltip content="Use the Upload button to provide the presentationStateFile"><sl-details id="applyPresentationStateToImage-presentation-state-file-details" summary="presentationStateFile: Process using presentation state file" disabled></sl-details></sl-tooltip>
       <label for="presentation-state-file-file"><sl-button name="presentation-state-file-file-button" required variant="primary" outline onclick="this.parentElement.nextElementSibling.click()">Upload</sl-button></label><input type="file"  name="presentation-state-file-file" style="display: none"/>
 <br /><br />
       <sl-checkbox name="color-output">colorOutput - <i>output image as RGB (default: false)</i></sl-checkbox>
@@ -131,7 +132,7 @@ <h2>@itk-wasm/dicom<img src="./javascript-logo.svg" alt="JavaScript logo" class=
     <small><i>Extract PDF file from DICOM encapsulated PDF.</i></small><br /><br />
 
     <div id="readDicomEncapsulatedPdfInputs"><form action="">
-      <sl-details id="readDicomEncapsulatedPdf-dicom-file-details" summary="dicomFile: Input DICOM file" disabled></sl-details>
+      <sl-tooltip content="Use the Upload button to provide the dicomFile"><sl-details id="readDicomEncapsulatedPdf-dicom-file-details" summary="dicomFile: Input DICOM file" disabled></sl-details></sl-tooltip>
       <label for="dicom-file-file"><sl-button name="dicom-file-file-button" required variant="primary" outline onclick="this.parentElement.nextElementSibling.click()">Upload</sl-button></label><input type="file"  name="dicom-file-file" style="display: none"/>
 <br /><br />
       <sl-checkbox name="read-file-only">readFileOnly - <i>read file format only</i></sl-checkbox>
@@ -185,7 +186,7 @@ <h2>@itk-wasm/dicom<img src="./javascript-logo.svg" alt="JavaScript logo" class=
     <small><i>Render DICOM SR file and data set to HTML/XHTML</i></small><br /><br />
 
     <div id="structuredReportToHtmlInputs"><form action="">
-      <sl-details id="structuredReportToHtml-dicom-file-details" summary="dicomFile: Input DICOM file" disabled></sl-details>
+      <sl-tooltip content="Use the Upload button to provide the dicomFile"><sl-details id="structuredReportToHtml-dicom-file-details" summary="dicomFile: Input DICOM file" disabled></sl-details></sl-tooltip>
       <label for="dicom-file-file"><sl-button name="dicom-file-file-button" required variant="primary" outline onclick="this.parentElement.nextElementSibling.click()">Upload</sl-button></label><input type="file"  name="dicom-file-file" style="display: none"/>
 <br /><br />
       <sl-checkbox name="read-file-only">readFileOnly - <i>read file format only</i></sl-checkbox>
@@ -236,10 +237,10 @@ <h2>@itk-wasm/dicom<img src="./javascript-logo.svg" alt="JavaScript logo" class=
 <br /><br />
       <sl-checkbox name="add-document-type">addDocumentType - <i>add reference to SGML document type definition</i></sl-checkbox>
 <br /><br />
-      <sl-details id="structuredReportToHtml-css-reference-details"  summary="cssReference: URL: string. Add reference to specified CSS to document" disabled></sl-details>
+      <sl-tooltip content="Use the Upload button to provide the cssReference"><sl-details id="structuredReportToHtml-css-reference-details"  summary="cssReference: URL: string. Add reference to specified CSS to document" disabled></sl-details></sl-tooltip>
       <label for="css-reference-file"><sl-button name="css-reference-file-button" variant="primary" outline onclick="this.parentElement.nextElementSibling.click()">Upload</sp-button></label><input type="file"  name="css-reference-file" style="display: none"/>
 <br /><br />
-      <sl-details id="structuredReportToHtml-css-file-details"  summary="cssFile: [f]ilename: string. Embed content of specified CSS into document" disabled></sl-details>
+      <sl-tooltip content="Use the Upload button to provide the cssFile"><sl-details id="structuredReportToHtml-css-file-details"  summary="cssFile: [f]ilename: string. Embed content of specified CSS into document" disabled></sl-details></sl-tooltip>
       <label for="css-file-file"><sl-button name="css-file-file-button" variant="primary" outline onclick="this.parentElement.nextElementSibling.click()">Upload</sp-button></label><input type="file"  name="css-file-file" style="display: none"/>
 <br /><br />
       <sl-checkbox name="expand-inline">expandInline - <i>expand short content items inline (default)</i></sl-checkbox>
@@ -293,7 +294,7 @@ <h2>@itk-wasm/dicom<img src="./javascript-logo.svg" alt="JavaScript logo" class=
     <small><i>Read a DICOM structured report file and generate a plain text representation</i></small><br /><br />
 
     <div id="structuredReportToTextInputs"><form action="">
-      <sl-details id="structuredReportToText-dicom-file-details" summary="dicomFile: Input DICOM file" disabled></sl-details>
+      <sl-tooltip content="Use the Upload button to provide the dicomFile"><sl-details id="structuredReportToText-dicom-file-details" summary="dicomFile: Input DICOM file" disabled></sl-details></sl-tooltip>
       <label for="dicom-file-file"><sl-button name="dicom-file-file-button" required variant="primary" outline onclick="this.parentElement.nextElementSibling.click()">Upload</sl-button></label><input type="file"  name="dicom-file-file" style="display: none"/>
 <br /><br />
       <sl-checkbox name="unknown-relationship">unknownRelationship - <i>Accept unknown relationship type</i></sl-checkbox>
@@ -351,10 +352,10 @@ <h2>@itk-wasm/dicom<img src="./javascript-logo.svg" alt="JavaScript logo" class=
     <small><i>Read the tags from a DICOM file</i></small><br /><br />
 
     <div id="readDicomTagsInputs"><form action="">
-      <sl-details id="readDicomTags-dicom-file-details" summary="dicomFile: Input DICOM file." disabled></sl-details>
+      <sl-tooltip content="Use the Upload button to provide the dicomFile"><sl-details id="readDicomTags-dicom-file-details" summary="dicomFile: Input DICOM file." disabled></sl-details></sl-tooltip>
       <label for="dicom-file-file"><sl-button name="dicom-file-file-button" required variant="primary" outline onclick="this.parentElement.nextElementSibling.click()">Upload</sl-button></label><input type="file"  name="dicom-file-file" style="display: none"/>
 <br /><br />
-      <sl-details id="readDicomTags-tags-to-read-details" summary="tagsToRead: A JSON object with a &quot;tags&quot; array of the tags to read. If not provided, all tags are read. Example tag: &quot;0008|103e&quot;." disabled></sl-details>
+      <sl-tooltip content="Use the Upload button to provide the tagsToRead"><sl-details id="readDicomTags-tags-to-read-details" summary="tagsToRead: A JSON object with a &quot;tags&quot; array of the tags to read. If not provided, all tags are read. Example tag: &quot;0008|103e&quot;." disabled></sl-details></sl-tooltip>
       <label for="tags-to-read-file"><sl-button name="tags-to-read-file-button" variant="primary" outline onclick="this.parentElement.nextElementSibling.click()">Upload</sp-button></label><input type="file" name="tags-to-read-file" style="display: none"/>
 <br /><br />
     <sl-divider></sl-divider>
@@ -378,7 +379,7 @@ <h2>@itk-wasm/dicom<img src="./javascript-logo.svg" alt="JavaScript logo" class=
     <small><i>Read a DICOM image series and return the associated image volume</i></small><br /><br />
 
     <div id="readImageDicomFileSeriesInputs"><form action="">
-      <sl-details id="readImageDicomFileSeries-input-images-details" summary="inputImages: File names in the series" disabled></sl-details>
+      <sl-tooltip content="Use the Upload button to provide the inputImages"><sl-details id="readImageDicomFileSeries-input-images-details" summary="inputImages: File names in the series" disabled></sl-details></sl-tooltip>
       <label for="input-images-file"><sl-button name="input-images-file-button" variant="primary" outline onclick="this.parentElement.nextElementSibling.click()">Upload</sl-button></label><input type="file" multiple  name="input-images-file" style="display: none"/>
 <br /><br />
       <sl-checkbox name="single-sorted-series">singleSortedSeries - <i>The input files are a single sorted series</i></sl-checkbox>

diff --git a/src/bindgen/typescript/demo/input-parameters-demo-html.js b/src/bindgen/typescript/demo/input-parameters-demo-html.js
@@ -6,11 +6,12 @@ function inputParametersDemoHtml (functionName, prefix, indent, parameter, requi
   const description = parameter.description.replaceAll('"', '&quot;')
   const requiredAttr = required ? 'required ' : ''
   const label = useCamelCase ? camelCase(parameter.name) : snakeCase(parameter.name)
-  switch(parameter.type) {
+  const tooltipContent = `content="Use the Upload button to provide the ${label}"`
+  switch (parameter.type) {
     case 'INPUT_TEXT_FILE':
     case 'INPUT_TEXT_FILE:FILE':
     case 'INPUT_TEXT_STREAM': {
-      result += `${prefix}${indent}<sl-details id="${functionName}-${parameter.name}-details"  summary="${label}: ${description}" disabled></sl-details>\n`
+      result += `${prefix}${indent}<sl-tooltip ${tooltipContent}><sl-details id="${functionName}-${parameter.name}-details"  summary="${label}: ${description}" disabled></sl-details></sl-tooltip>\n`
       const multiple = parameter.itemsExpectedMax > 1 ? 'multiple ' : ''
       result += `${prefix}${indent}<label for="${parameter.name}-file"><sl-button name="${parameter.name}-file-button" variant="primary" outline onclick="this.parentElement.nextElementSibling.click()">Upload</sp-button></label><input type="file" ${multiple} name="${parameter.name}-file" style="display: none"/>\n`
       result += `<br /><br />\n`
@@ -19,7 +20,7 @@ function inputParametersDemoHtml (functionName, prefix, indent, parameter, requi
     case 'INPUT_BINARY_FILE':
     case 'INPUT_BINARY_FILE:FILE':
     case 'INPUT_BINARY_STREAM': {
-      result += `${prefix}${indent}<sl-details id="${functionName}-${parameter.name}-details" summary="${label}: ${description}" disabled></sl-details>\n`
+      result += `${prefix}${indent}<sl-tooltip ${tooltipContent}><sl-details id="${functionName}-${parameter.name}-details" summary="${label}: ${description}" disabled></sl-details></sl-tooltip>\n`
       const multiple = parameter.itemsExpectedMax > 1 ? 'multiple ' : ''
       result += `${prefix}${indent}<label for="${parameter.name}-file"><sl-button name="${parameter.name}-file-button" ${requiredAttr}variant="primary" outline onclick="this.parentElement.nextElementSibling.click()">Upload</sl-button></label><input type="file" ${multiple} name="${parameter.name}-file" style="display: none"/>\n`
       result += `<br /><br />\n`
@@ -44,7 +45,7 @@ function inputParametersDemoHtml (functionName, prefix, indent, parameter, requi
     case 'INPUT_JSON':
     case 'INPUT_IMAGE':
     case 'INPUT_MESH':
-      result += `${prefix}${indent}<sl-details id="${functionName}-${parameter.name}-details" summary="${label}: ${description}" disabled></sl-details>\n`
+      result += `${prefix}${indent}<sl-tooltip ${tooltipContent}><sl-details id="${functionName}-${parameter.name}-details" summary="${label}: ${description}" disabled></sl-details></sl-tooltip>\n`
       result += `${prefix}${indent}<label for="${parameter.name}-file"><sl-button name="${parameter.name}-file-button" variant="primary" outline onclick="this.parentElement.nextElementSibling.click()">Upload</sp-button></label><input type="file" name="${parameter.name}-file" style="display: none"/>\n`
       result += `<br /><br />\n`
       break

diff --git a/src/bindgen/typescript/typescript-bindings.js b/src/bindgen/typescript/typescript-bindings.js
@@ -178,6 +178,7 @@ const shoelaceScript = `
   import '@shoelace-style/shoelace/dist/components/tag/tag.js';
   import '@shoelace-style/shoelace/dist/components/select/select.js';
   import '@shoelace-style/shoelace/dist/components/option/option.js';
+  import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
 
   import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path';
   setBasePath('/');