Merge pull request #1070 from PaulHax/demo-image-view

Image viewer for package demos
InsightSoftwareConsortium · Apr 23, 2024 · 1c7df01 · 1c7df01
2 parents 9e73049 + 67596fd
commit 1c7df01
Show file tree

Hide file tree

Showing 114 changed files with 2,746 additions and 1,133 deletions.
diff --git a/examples/hello-world/cypress.config.js b/examples/hello-world/cypress.config.js
@@ -6,6 +6,7 @@ export default defineConfig({
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },
+    includeShadowDom: true, // to query into itk-image-detail
     baseUrl: 'http://localhost:8083',
     specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
   },

diff --git a/examples/inputs-outputs/typescript/package.json b/examples/inputs-outputs/typescript/package.json
@@ -24,7 +24,7 @@
     "build:browser:workerEmbeddedMin": "esbuild --minify --loader:.worker.js=dataurl --bundle --format=esm --outfile=./dist/bundle/index-worker-embedded.min.js ./src/index-worker-embedded.min.ts",
     "build:version": "node -p \"'const version = ' + JSON.stringify(require('./package.json').version) + '\\nexport default version\\n'\" > src/version.ts",
     "build:tsc": "pnpm build:version && tsc --pretty",
-    "copyShoelaceAssets": "shx mkdir -p test/browser/demo-app/public && shx cp -r node_modules/@shoelace-style/shoelace/dist/assets test/browser/demo-app/public/",
+    "copyShoelaceAssets": "shx mkdir -p test/browser/demo-app/public && shx cp -r node_modules/@itk-wasm/demo-app/node_modules/@shoelace-style/shoelace/dist/assets test/browser/demo-app/public/",
     "build:demo": "pnpm copyShoelaceAssets && vite build"
   },
   "keywords": [
@@ -41,7 +41,7 @@
   "devDependencies": {
     "@itk-wasm/image-io": "workspace:^",
     "@itk-wasm/mesh-io": "workspace:^",
-    "@shoelace-style/shoelace": "^2.5.2",
+    "@itk-wasm/demo-app": "workspace:^",
     "@types/node": "^20.2.5",
     "esbuild": "^0.19.8",
     "shx": "^0.3.4",

diff --git a/examples/mean-squares-versor-registration/typescript/package.json b/examples/mean-squares-versor-registration/typescript/package.json
@@ -22,7 +22,7 @@
     "build:browser:workerEmbeddedMin": "esbuild --minify --loader:.worker.js=dataurl --bundle --format=esm --outfile=./dist/bundle/index-worker-embedded.min.js ./src/index-worker-embedded.min.ts",
     "build:version": "node -p \"'const version = ' + JSON.stringify(require('./package.json').version) + '\\nexport default version\\n'\" > src/version.ts",
     "build:tsc": "pnpm build:version && tsc --pretty",
-    "copyShoelaceAssets": "shx mkdir -p test/browser/demo-app/public && shx cp -r node_modules/@shoelace-style/shoelace/dist/assets test/browser/demo-app/public/",
+    "copyShoelaceAssets": "shx mkdir -p test/browser/demo-app/public && shx cp -r node_modules/@itk-wasm/demo-app/node_modules/@shoelace-style/shoelace/dist/assets test/browser/demo-app/public/",
     "build:demo": "pnpm copyShoelaceAssets && vite build"
   },
   "keywords": [
@@ -39,7 +39,7 @@
   "devDependencies": {
     "@itk-wasm/image-io": "workspace:^",
     "@itk-wasm/mesh-io": "workspace:^",
-    "@shoelace-style/shoelace": "^2.5.2",
+    "@itk-wasm/demo-app": "workspace:^",
     "@types/node": "^20.2.5",
     "esbuild": "^0.19.8",
     "shx": "^0.3.4",

diff --git a/examples/umd/cypress.config.js b/examples/umd/cypress.config.js
@@ -8,5 +8,6 @@ module.exports = defineConfig({
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },
+    includeShadowDom: true, // to query into itk-image-detail
   },
 })
diff --git a/examples/vite/cypress.config.js b/examples/vite/cypress.config.js
@@ -8,5 +8,6 @@ module.exports = defineConfig({
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },
+    includeShadowDom: true, // to query into itk-image-detail
   },
 })
diff --git a/examples/webpack/cypress.config.js b/examples/webpack/cypress.config.js
@@ -8,5 +8,6 @@ module.exports = defineConfig({
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },
+    includeShadowDom: true, // to query into itk-image-detail
   },
 })
diff --git a/packages/compare-images/typescript/cypress.config.ts b/packages/compare-images/typescript/cypress.config.ts
@@ -6,5 +6,6 @@ export default defineConfig({
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },
+    includeShadowDom: true, // to query into itk-image-details
   },
 });
diff --git a/packages/compare-images/typescript/cypress/e2e/compare-images.cy.ts b/packages/compare-images/typescript/cypress/e2e/compare-images.cy.ts
@@ -24,11 +24,11 @@ describe('compareImages', () => {
 
     const testFile = { contents: new Uint8Array(this['cake_easy.iwi.cbor']), fileName: 'cake_easy.iwi.cbor' }
     cy.get('#compareImagesInputs input[name="test-image-file"]').selectFile([testFile,], { force: true })
-    cy.get('#compareImages-test-image-details').should('contain', 'imageType')
+    cy.get('#compareImages-test-image-details').contains('imageType')
 
     const baselineFile = { contents: new Uint8Array(this['cake_hard.iwi.cbor']), fileName: 'cake_hard.iwi.cbor' }
     cy.get('#compareImagesInputs input[name="baseline-images-file"]').selectFile([baselineFile,], { force: true })
-    cy.get('#compareImages-baseline-images-details').should('contain', 'imageType')
+    cy.get('#compareImages-baseline-images-details').contains('imageType')
 
     cy.get('#compareImagesInputs sl-button[name="run"]').click()
 
@@ -40,11 +40,11 @@ describe('compareImages', () => {
 
     const testFile = { contents: new Uint8Array(this['cake_easy.png']), fileName: 'cake_easy.png' }
     cy.get('#compareImagesInputs input[name="test-image-file"]').selectFile([testFile,], { force: true })
-    cy.get('#compareImages-test-image-details').should('contain', 'imageType')
+    cy.get('#compareImages-test-image-details').contains('imageType')
 
     const baselineFile = { contents: new Uint8Array(this['cake_hard.png']), fileName: 'cake_hard.png' }
     cy.get('#compareImagesInputs input[name="baseline-images-file"]').selectFile([baselineFile,], { force: true })
-    cy.get('#compareImages-baseline-images-details').should('contain', 'imageType')
+    cy.get('#compareImages-baseline-images-details').contains('imageType')
 
     cy.get('#compareImagesInputs sl-button[name="run"]').click()
 
@@ -56,11 +56,11 @@ describe('compareImages', () => {
 
     const testFile = { contents: new Uint8Array(this['apple.jpg']), fileName: 'apple.jpg' }
     cy.get('#compareImagesInputs input[name="test-image-file"]').selectFile([testFile,], { force: true })
-    cy.get('#compareImages-test-image-details').should('contain', 'imageType')
+    cy.get('#compareImages-test-image-details').contains('imageType')
 
     const baselineFile = { contents: new Uint8Array(this['orange.jpg']), fileName: 'orange.jpg' }
     cy.get('#compareImagesInputs input[name="baseline-images-file"]').selectFile([baselineFile,], { force: true })
-    cy.get('#compareImages-baseline-images-details').should('contain', 'imageType')
+    cy.get('#compareImages-baseline-images-details').contains('imageType')
 
     cy.get('#compareImagesInputs sl-button[name="run"]').click()
 

diff --git a/packages/compare-images/typescript/package.json b/packages/compare-images/typescript/package.json
@@ -30,7 +30,7 @@
     "build:browser:workerEmbeddedMin": "esbuild --minify --loader:.worker.js=dataurl --bundle --format=esm --outfile=./dist/bundle/index-worker-embedded.min.js ./src/index-worker-embedded.min.ts",
     "build:tsc": "pnpm build:version && tsc --pretty",
     "build:version": "node -p \"'const version = ' + JSON.stringify(require('./package.json').version) + '\\nexport default version\\n'\" > src/version.ts",
-    "copyShoelaceAssets": "shx mkdir -p test/browser/demo-app/public && shx cp -r node_modules/@shoelace-style/shoelace/dist/assets test/browser/demo-app/public/",
+    "copyShoelaceAssets": "shx mkdir -p test/browser/demo-app/public && shx cp -r node_modules/@itk-wasm/demo-app/node_modules/@shoelace-style/shoelace/dist/assets test/browser/demo-app/public/",
     "build:demo": "pnpm copyShoelaceAssets && vite build"
   },
   "keywords": [
@@ -47,7 +47,7 @@
   "devDependencies": {
     "@itk-wasm/compare-images-build": "workspace:^",
     "@itk-wasm/image-io": "workspace:^",
-    "@shoelace-style/shoelace": "^2.12.0",
+    "@itk-wasm/demo-app": "workspace:*",
     "@types/node": "^20.10.4",
     "ava": "^5.3.1",
     "cypress": "^13.6.1",

diff --git a/packages/compare-images/typescript/test/browser/demo-app/compare-double-images-controller.ts b/packages/compare-images/typescript/test/browser/demo-app/compare-double-images-controller.ts
@@ -47,7 +47,7 @@ class CompareDoubleImagesController {
         webWorker.terminate()
         model.inputs.set("testImage", image)
         const details = document.getElementById("compareDoubleImages-test-image-details")
-        details.innerHTML = `<pre>${globalThis.escapeHtml(JSON.stringify(image, globalThis.interfaceTypeJsonReplacer, 2))}</pre>`
+        details.setImage(image)
         details.disabled = false
     })
 
@@ -190,17 +190,15 @@ class CompareDoubleImagesController {
         differenceImageOutputDownload.variant = "success"
         differenceImageOutputDownload.disabled = false
         const differenceImageDetails = document.getElementById("compareDoubleImages-difference-image-details")
-        differenceImageDetails.innerHTML = `<pre>${globalThis.escapeHtml(JSON.stringify(differenceImage, globalThis.interfaceTypeJsonReplacer, 2))}</pre>`
         differenceImageDetails.disabled = false
-        const differenceImageOutput = document.getElementById('compareDoubleImages-difference-image-details')
+        differenceImageDetails.setImage(differenceImage)
 
         model.outputs.set("differenceUchar2dImage", differenceUchar2dImage)
         differenceUchar2dImageOutputDownload.variant = "success"
         differenceUchar2dImageOutputDownload.disabled = false
         const differenceUchar2dImageDetails = document.getElementById("compareDoubleImages-difference-uchar-2d-image-details")
-        differenceUchar2dImageDetails.innerHTML = `<pre>${globalThis.escapeHtml(JSON.stringify(differenceUchar2dImage, globalThis.interfaceTypeJsonReplacer, 2))}</pre>`
         differenceUchar2dImageDetails.disabled = false
-        const differenceUchar2dImageOutput = document.getElementById('compareDoubleImages-difference-uchar-2d-image-details')
+        differenceUchar2dImageDetails.setImage(differenceUchar2dImage)
       } catch (error) {
         globalThis.notify("Error while running pipeline", error.toString(), "danger", "exclamation-octagon")
         throw error

diff --git a/packages/compare-images/typescript/test/browser/demo-app/compare-images-controller.ts b/packages/compare-images/typescript/test/browser/demo-app/compare-images-controller.ts
@@ -49,8 +49,7 @@ class CompareImagesController  {
         webWorker.terminate()
         model.inputs.set("testImage", image)
         const details = document.getElementById("compareImages-test-image-details")
-        details.innerHTML = `<pre>${globalThis.escapeHtml(JSON.stringify(image, globalThis.interfaceTypeJsonReplacer, 2))}</pre>`
-        details.disabled = false
+        details.setImage(image)
     })
 
     // ----------------------------------------------
@@ -168,17 +167,13 @@ class CompareImagesController  {
         differenceImageOutputDownload.variant = "success"
         differenceImageOutputDownload.disabled = false
         const differenceImageDetails = document.getElementById("compareImages-difference-image-details")
-        differenceImageDetails.innerHTML = `<pre>${globalThis.escapeHtml(JSON.stringify(differenceImage, globalThis.interfaceTypeJsonReplacer, 2))}</pre>`
-        differenceImageDetails.disabled = false
-        const differenceImageOutput = document.getElementById('compareImages-difference-image-details')
+        differenceImageDetails.setImage(differenceImage)
 
         model.outputs.set("differenceUchar2dImage", differenceUchar2dImage)
         differenceUchar2dImageOutputDownload.variant = "success"
         differenceUchar2dImageOutputDownload.disabled = false
         const differenceUchar2dImageDetails = document.getElementById("compareImages-difference-uchar-2d-image-details")
-        differenceUchar2dImageDetails.innerHTML = `<pre>${globalThis.escapeHtml(JSON.stringify(differenceUchar2dImage, globalThis.interfaceTypeJsonReplacer, 2))}</pre>`
-        differenceUchar2dImageDetails.disabled = false
-        const differenceUchar2dImageOutput = document.getElementById('compareImages-difference-uchar-2d-image-details')
+        differenceUchar2dImageDetails.setImage(differenceUchar2dImage)
       } catch (error) {
         globalThis.notify("Error while running pipeline", error.toString(), "danger", "exclamation-octagon")
         throw error

diff --git a/packages/compare-images/typescript/test/browser/demo-app/index.html b/packages/compare-images/typescript/test/browser/demo-app/index.html
@@ -7,41 +7,13 @@
   <link rel="stylesheet" href="./style.css" />
 
 <script type="module">
-  import '@shoelace-style/shoelace/dist/themes/light.css';
-  import '@shoelace-style/shoelace/dist/themes/dark.css';
-  import '@shoelace-style/shoelace/dist/components/button/button.js';
-  import '@shoelace-style/shoelace/dist/components/tab-group/tab-group.js';
-  import '@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js';
-  import '@shoelace-style/shoelace/dist/components/tab/tab.js';
-  import '@shoelace-style/shoelace/dist/components/input/input.js';
-  import '@shoelace-style/shoelace/dist/components/checkbox/checkbox.js';
-  import '@shoelace-style/shoelace/dist/components/textarea/textarea.js';
-  import '@shoelace-style/shoelace/dist/components/alert/alert.js';
-  import '@shoelace-style/shoelace/dist/components/icon/icon.js';
-  import '@shoelace-style/shoelace/dist/components/icon-button/icon-button.js';
-  import '@shoelace-style/shoelace/dist/components/divider/divider.js';
-  import '@shoelace-style/shoelace/dist/components/details/details.js';
-  import '@shoelace-style/shoelace/dist/components/popup/popup.js';
-  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('/');
-
-  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-    // dark mode
-    document.documentElement.classList.add('sl-theme-dark');
-  }
+  import '@itk-wasm/demo-app/demo-app.js'
 </script>
 
   <title>@itk-wasm/compare-images<img src="./javascript-logo.svg" alt="JavaScript logo" class="language-logo"/><img src="./typescript-logo.svg" alt="TypeScript logo" class="language-logo"/></title>
 </head>
 <body>
 
-<script type="module" src="/utilities.js"></script>
-
 <!-- https://tholman.com/github-corners/ -->
 <a href="https://github.com/InsightSoftwareConsortium/itk-wasm" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
 
@@ -64,7 +36,7 @@ <h3>👨‍💻 Live API Demo ✨</h3>
     <small><i>Compare images with a tolerance for regression testing.</i></small><br /><br />
 
     <div id="compareImagesInputs"><form action="">
-      <sl-tooltip content="Use the Upload button to provide the testImage"><sl-details id="compareImages-test-image-details" summary="testImage: The input test image" disabled></sl-details></sl-tooltip>
+      <sl-tooltip content="Use the Upload button to provide the testImage"><itk-image-details id="compareImages-test-image-details" summary="testImage: The input test image"></itk-image-details></sl-tooltip>
       <label for="test-image-file"><sl-button name="test-image-file-button" variant="primary" outline onclick="this.parentElement.nextElementSibling.click()">Upload</sp-button></label><input type="file" name="test-image-file" style="display: none"/>
 <br /><br />
       <sl-tooltip content="Use the Upload button to provide the baselineImages"><sl-details id="compareImages-baseline-images-details" summary="baselineImages: Baseline images compare against" disabled></sl-details></sl-tooltip>
@@ -89,7 +61,7 @@ <h3>👨‍💻 Live API Demo ✨</h3>
       <sl-details disabled id="compareImages-metrics-details" summary="metrics: Metrics for the baseline with the fewest number of pixels outside the tolerances."></sl-details>
       <sl-button variant="neutral" outline name="metrics-download" disabled>Download</sl-button>
 <br /><br />
-      <sl-details disabled id="compareImages-difference-image-details" summary="differenceImage: Absolute difference image"></sl-details>
+      <itk-image-details id="compareImages-difference-image-details" summary="differenceImage: Absolute difference image"></itk-image-details>
       <sl-select id="difference-image-output-format" placeholder="Format">
         <sl-option value="bmp">bmp</sl-option>
         <sl-option value="dcm">dcm</sl-option>
@@ -115,7 +87,7 @@ <h3>👨‍💻 Live API Demo ✨</h3>
       </sl-select>
       <sl-button variant="neutral" outline name="difference-image-download" disabled>Download</sl-button>
 <br /><br />
-      <sl-details disabled id="compareImages-difference-uchar-2d-image-details" summary="differenceUchar2dImage: Unsigned char, 2D difference image for rendering"></sl-details>
+      <itk-image-details id="compareImages-difference-uchar-2d-image-details" summary="differenceUchar2dImage: Unsigned char, 2D difference image for rendering"></itk-image-details>
       <sl-select id="difference-uchar-2d-image-output-format" placeholder="Format">
         <sl-option value="bmp">bmp</sl-option>
         <sl-option value="dcm">dcm</sl-option>

diff --git a/packages/compare-images/typescript/test/browser/demo-app/utilities.js b/packages/compare-images/typescript/test/browser/demo-app/utilities.js