feat: include image viewer in package demo apps

Manually updated readImage and compareImages TS code and index.html.
InsightSoftwareConsortium · Mar 11, 2024 · 9cf5f78 · 9cf5f78
1 parent 692d6d8
commit 9cf5f78
Show file tree

Hide file tree

Showing 17 changed files with 2,451 additions and 121 deletions.
diff --git a/packages/compare-images/typescript/package.json b/packages/compare-images/typescript/package.json
@@ -45,6 +45,8 @@
     "itk-wasm": "workspace:^"
   },
   "devDependencies": {
+    "@itk-viewer/element": "^0.2.12",
+    "@itk-viewer/io": "^0.1.8",
     "@itk-wasm/compare-images-build": "workspace:^",
     "@itk-wasm/image-io": "workspace:^",
     "@shoelace-style/shoelace": "^2.12.0",

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>`
+        loadImage(image, details)
         details.disabled = false
     })
 
@@ -192,15 +192,15 @@ class CompareDoubleImagesController {
         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')
+        loadImage(differenceImage, differenceImageDetails)
 
         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')
+        loadImage(differenceUchar2dImage, differenceUchar2dImageDetails)
       } 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
@@ -34,6 +34,10 @@
     // dark mode
     document.documentElement.classList.add('sl-theme-dark');
   }
+
+  import '@shoelace-style/shoelace/dist/components/range/range.js';
+  import '@shoelace-style/shoelace/dist/components/card/card.js';
+  import '@itk-viewer/element/itk-viewer-2d.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>

diff --git a/packages/compare-images/typescript/vite.config.js b/packages/compare-images/typescript/vite.config.js
@@ -18,7 +18,7 @@ export default defineConfig({
     format: 'es'
   },
   optimizeDeps: {
-    exclude: ['itk-wasm', '@itk-wasm/image-io', '@thewtex/zstddec']
+    exclude: ['itk-wasm', '@itk-wasm/image-io', '@thewtex/zstddec', '@itk-viewer/io']
   },
   plugins: [
     // put lazy loaded JavaScript and Wasm bundles in dist directory

diff --git a/packages/compress-stringify/typescript/package.json b/packages/compress-stringify/typescript/package.json
@@ -44,6 +44,8 @@
     "itk-wasm": "workspace:^"
   },
   "devDependencies": {
+    "@itk-viewer/element": "^0.2.12",
+    "@itk-viewer/io": "^0.1.8",
     "@itk-wasm/compress-stringify-build": "workspace:*",
     "@shoelace-style/shoelace": "^2.5.2",
     "@types/node": "^20.2.5",

diff --git a/packages/compress-stringify/typescript/vite.config.js b/packages/compress-stringify/typescript/vite.config.js
@@ -18,7 +18,7 @@ export default defineConfig({
     format: 'es'
   },
   optimizeDeps: {
-    exclude: ['itk-wasm', '@itk-wasm/image-io', '@thewtex/zstddec']
+    exclude: ['itk-wasm', '@itk-wasm/image-io', '@thewtex/zstddec', '@itk-viewer/io']
   },
   plugins: [
     // put lazy loaded JavaScript and Wasm bundles in dist directory

diff --git a/packages/dicom/typescript/package.json b/packages/dicom/typescript/package.json
@@ -44,6 +44,8 @@
     "itk-wasm": "workspace:^"
   },
   "devDependencies": {
+    "@itk-viewer/element": "^0.2.12",
+    "@itk-viewer/io": "^0.1.8",
     "@itk-wasm/dicom-build": "workspace:*",
     "@itk-wasm/image-io": "workspace:*",
     "@shoelace-style/shoelace": "^2.12.0",

diff --git a/packages/dicom/typescript/vite.config.js b/packages/dicom/typescript/vite.config.js
@@ -18,7 +18,7 @@ export default defineConfig({
     format: 'es'
   },
   optimizeDeps: {
-    exclude: ['itk-wasm', '@itk-wasm/image-io', '@thewtex/zstddec', 'comlink', 'wasm-feature-detect', 'axios']
+    exclude: ['itk-wasm', '@itk-wasm/image-io', '@thewtex/zstddec', 'comlink', 'wasm-feature-detect', 'axios', 'itk-viewer/io']
   },
   plugins: [
     // put lazy loaded JavaScript and Wasm bundles in dist directory

diff --git a/packages/downsample/typescript/package.json b/packages/downsample/typescript/package.json
@@ -45,6 +45,8 @@
     "itk-wasm": "workspace:^"
   },
   "devDependencies": {
+    "@itk-viewer/element": "^0.2.12",
+    "@itk-viewer/io": "^0.1.8",
     "@itk-wasm/compare-images": "workspace:^",
     "@itk-wasm/image-io": "workspace:^",
     "@itk-wasm/mesh-io": "workspace:^",

diff --git a/packages/image-io/typescript/build/vite.config.js b/packages/image-io/typescript/build/vite.config.js
@@ -22,7 +22,7 @@ export function generateConfig() {
       format: 'es'
     },
     optimizeDeps: {
-      exclude: ['itk-wasm', '@thewtex/zstddec']
+      exclude: ['itk-wasm', '@thewtex/zstddec', '@itk-viewer/io']
     },
     plugins: [
       // put lazy loaded JavaScript and Wasm bundles in dist directory

diff --git a/packages/image-io/typescript/package.json b/packages/image-io/typescript/package.json
@@ -51,6 +51,8 @@
     "mime-types": "^2.1.35"
   },
   "devDependencies": {
+    "@itk-viewer/element": "^0.2.12",
+    "@itk-viewer/io": "^0.1.8",
     "@itk-wasm/image-io-build": "workspace:*",
     "@shoelace-style/shoelace": "^2.12.0",
     "@types/mime-types": "^2.1.4",

diff --git a/packages/image-io/typescript/test/browser/demo-app/index.html b/packages/image-io/typescript/test/browser/demo-app/index.html
@@ -34,6 +34,10 @@
     // dark mode
     document.documentElement.classList.add('sl-theme-dark');
   }
+
+  import '@shoelace-style/shoelace/dist/components/range/range.js';
+  import '@shoelace-style/shoelace/dist/components/card/card.js';
+  import '@itk-viewer/element/itk-viewer-2d.js'
 </script>
 
   <title>@itk-wasm/image-io<img src="./javascript-logo.svg" alt="JavaScript logo" class="language-logo"/><img src="./typescript-logo.svg" alt="TypeScript logo" class="language-logo"/></title>

diff --git a/packages/image-io/typescript/test/browser/demo-app/read-image-controller.ts b/packages/image-io/typescript/test/browser/demo-app/read-image-controller.ts
@@ -129,7 +129,7 @@ class ReadImageController  {
         const imageDetails = document.getElementById("readImage-image-details")
         imageDetails.innerHTML = `<pre>${globalThis.escapeHtml(JSON.stringify(image, globalThis.interfaceTypeJsonReplacer, 2))}</pre>`
         imageDetails.disabled = false
-        const imageOutput = document.getElementById('readImage-image-details')
+        loadImage(image, imageDetails)
       } catch (error) {
         globalThis.notify("Error while running pipeline", error.toString(), "danger", "exclamation-octagon")
         throw error

diff --git a/packages/image-io/typescript/test/browser/demo-app/utilities.js b/packages/image-io/typescript/test/browser/demo-app/utilities.js
@@ -1,6 +1,7 @@
 // Generated file. To retain edits, remove this comment.
 
 import * as itk from 'itk-wasm'
+import { ItkWasmMultiscaleSpatialImage } from "@itk-viewer/io/ItkWasmMultiscaleSpatialImage.js";
 globalThis.itk = itk
 
 function downloadFile(content, filename) {
@@ -93,3 +94,41 @@ function applyInputParsedJson(inputElement, modelMap, parameterName) {
   }
 }
 globalThis.applyInputParsedJson = applyInputParsedJson
+
+
+function showImage(image, details) {
+  details.innerHTML = ''
+
+  const viewer = document.createElement('itk-viewer-2d')
+  viewer.style.width = '100%'
+  viewer.style.height = '26rem'
+  const multiImage = new ItkWasmMultiscaleSpatialImage(image);
+  // need to wait a tick due to bad setup flow in @itk-viewer/element
+  setTimeout(() => {
+    const viewerActor = viewer.getActor();
+    viewerActor.send({ type: "setImage", image: multiImage });
+  }, 0)
+
+  const imageInfo = document.createElement('pre')
+  imageInfo.innerHTML = escapeHtml(JSON.stringify(image, interfaceTypeJsonReplacer, 2))
+
+  details.appendChild(viewer)
+  details.appendChild(imageInfo)
+}
+
+function loadImage(image, details) {
+  if(!details.summary.startsWith('️🔎')) {
+    details.summary = '️🔎 ' + details.summary 
+  }
+  if(details.open) {
+    showImage(image, details)
+  }
+  if(details.showImageListener) {
+    details.removeEventListener('sl-show', details.showImageListener)
+  }
+  details.showImageListener = () => {
+    showImage(image, details)
+  }
+  details.addEventListener('sl-show', details.showImageListener)
+}
+globalThis.loadImage = loadImage
diff --git a/packages/image-io/typescript/vite.config.js b/packages/image-io/typescript/vite.config.js
@@ -15,7 +15,7 @@ export default defineConfig({
     format: 'es'
   },
   optimizeDeps: {
-    exclude: ['itk-wasm', '@itk-wasm/image-io', '@itk-wasm/mesh-io', '@thewtex/zstddec']
+    exclude: ['itk-wasm', '@itk-wasm/image-io', '@itk-wasm/mesh-io', '@thewtex/zstddec', '@itk-viewer/io']
   },
   plugins: [
     // put lazy loaded JavaScript and Wasm bundles in dist directory

diff --git a/packages/mesh-io/typescript/package.json b/packages/mesh-io/typescript/package.json
@@ -46,6 +46,8 @@
     "mime-types": "^2.1.35"
   },
   "devDependencies": {
+    "@itk-viewer/element": "^0.2.12",
+    "@itk-viewer/io": "^0.1.8",
     "@itk-wasm/image-io": "workspace:^",
     "@itk-wasm/mesh-io-build": "workspace:*",
     "@shoelace-style/shoelace": "^2.5.2",