fix(itk-view-controls): don't show control if no image loaded

InsightSoftwareConsortium · Aug 27, 2024 · 4ded682 · 4ded682
1 parent d9bdc59
commit 4ded682
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 3 deletions.
diff --git a/.changeset/few-apples-fetch.md b/.changeset/few-apples-fetch.md
@@ -4,4 +4,6 @@
 '@itk-viewer/vtkjs': patch
 ---
 
-Fix error when unmounting renderer by calling setContainer(undefined) and imageSnapshot happens.
+Fix error when unmounting renderer by calling setContainer(undefined) and imageSnapshot happens. 
+
+Don't show viewer GUI controls when no image is loaded.
diff --git a/packages/element/examples/image-io-read-image.html b/packages/element/examples/image-io-read-image.html
@@ -13,6 +13,11 @@
   </head>
 
   <body>
-    <itk-viewer-2d id="viewer"></itk-viewer-2d>
+    <div class="fill">
+      <input id="file-input" type="file" multiple style="padding: 1rem" />
+      <div class="fill">
+        <itk-viewer-2d id="viewer"></itk-viewer-2d>
+      </div>
+    </div>
   </body>
 </html>
diff --git a/packages/element/examples/image-io-read-image.ts b/packages/element/examples/image-io-read-image.ts
@@ -1,7 +1,40 @@
 import './assetPathSetup.js';
-import { readImage } from '@itk-wasm/image-io';
 import { ItkWasmMultiscaleSpatialImage } from '@itk-viewer/io/ItkWasmMultiscaleSpatialImage.js';
 import { ItkViewer2d } from '../src/itk-viewer-2d.js';
+import { readImage } from '@itk-wasm/image-io';
+import { readImageDicomFileSeries } from '@itk-wasm/dicom';
+
+/**
+ * Filenames must be sanitized prior to being passed into itk-wasm.
+ *
+ * In particular, forward slashes cause FS errors in itk-wasm.
+ * @param name
+ * @returns
+ */
+function sanitizeFileName(name: string) {
+  return name.replace(/\//g, '_');
+}
+
+/**
+ * Returns a new File instance with a sanitized name.
+ * @param file
+ */
+function sanitizeFile(file: File) {
+  return new File([file], sanitizeFileName(file.name));
+}
+
+const makeImage = async (files: File[]) => {
+  const cleanFiles = files.map(sanitizeFile);
+  if (cleanFiles.length === 1) {
+    const { image } = await readImage(cleanFiles[0]);
+    return image;
+  }
+  const { outputImage } = await readImageDicomFileSeries({
+    inputImages: cleanFiles,
+    singleSortedSeries: false,
+  });
+  return outputImage;
+};
 
 document.addEventListener('DOMContentLoaded', async function () {
   const viewerElement = document.querySelector('#viewer')! as ItkViewer2d;
@@ -16,4 +49,15 @@ document.addEventListener('DOMContentLoaded', async function () {
   const image = new ItkWasmMultiscaleSpatialImage(itkimage);
 
   viewer!.send({ type: 'setImage', image, name: 'image' });
+
+  const fileInput = document.querySelector('#file-input')! as HTMLInputElement;
+  fileInput.addEventListener('change', async (event: Event) => {
+    const files = (event.target as HTMLInputElement).files;
+    if (!files || files.length === 0) {
+      return;
+    }
+    const itkImage = await makeImage(Array.from(files));
+    const image = new ItkWasmMultiscaleSpatialImage(itkImage);
+    viewer!.send({ type: 'setImage', image, name: 'image' });
+  });
 });
diff --git a/packages/element/package.json b/packages/element/package.json
@@ -46,6 +46,7 @@
   },
   "homepage": "https://github.com/InsightSoftwareConsortium/itk-viewer#readme",
   "devDependencies": {
+    "@itk-wasm/dicom": "^7.2.0",
     "@itk-wasm/image-io": "^1.1.1",
     "@shoelace-style/shoelace": "^2.16.0",
     "typescript": "^5.5.4",

diff --git a/packages/element/src/itk-view-controls-shoelace.ts b/packages/element/src/itk-view-controls-shoelace.ts
@@ -63,6 +63,10 @@ export class ViewControlsShoelace extends LitElement {
     const showScale = scaleCount >= 2;
     const tfEditorHeight = this.view === '2d' ? '2rem' : '8rem';
 
+    if (imageDimension === 0) {
+      return '';
+    }
+
     return html`
       <sl-card>
         ${

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml