From 4ded682e4db4f53be8318835a7b605923c6ab3d6 Mon Sep 17 00:00:00 2001 From: Paul Elliott Date: Tue, 27 Aug 2024 10:46:45 -0400 Subject: [PATCH] fix(itk-view-controls): don't show control if no image loaded --- .changeset/few-apples-fetch.md | 4 +- .../element/examples/image-io-read-image.html | 7 ++- .../element/examples/image-io-read-image.ts | 46 ++++++++++++++++++- packages/element/package.json | 1 + .../element/src/itk-view-controls-shoelace.ts | 4 ++ pnpm-lock.yaml | 33 +++++++++++++ 6 files changed, 92 insertions(+), 3 deletions(-) diff --git a/.changeset/few-apples-fetch.md b/.changeset/few-apples-fetch.md index 36b54169..fc7101bb 100644 --- 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 index ee44e205..5e8e9338 100644 --- a/packages/element/examples/image-io-read-image.html +++ b/packages/element/examples/image-io-read-image.html @@ -13,6 +13,11 @@ - +
+ +
+ +
+
diff --git a/packages/element/examples/image-io-read-image.ts b/packages/element/examples/image-io-read-image.ts index 41ecea87..0f99a6a5 100644 --- 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 index 88ad9c73..2a806658 100644 --- 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 index 814fc791..f59b78ed 100644 --- 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` ${ diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3f9cbe81..e0352cc5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -124,6 +124,9 @@ importers: specifier: ^2.0.4 version: 2.0.5(@lit/context@1.1.2)(lit@3.1.4)(xstate@5.17.1) devDependencies: + '@itk-wasm/dicom': + specifier: ^7.2.0 + version: 7.2.0 '@itk-wasm/image-io': specifier: ^1.1.1 version: 1.2.1 @@ -1413,6 +1416,9 @@ packages: resolution: {integrity: sha512-7+9L3lrLMKF4y6B6qjs8GqfbpxT0waOJUM14NdMNEA6M+BoBS8fdHREhQHo2s7QMA5O7I+Jv7m+dyqlisGnbdQ==} hasBin: true + '@itk-wasm/dicom@7.2.0': + resolution: {integrity: sha512-ynCYdrkoTIJVYGlLZyKumhPd6LqJ3Dx9iDG9KGNfN3lMNCSwZNMbMXsnzyICu0EtnEevhDUijV0r8VjZrgVnaQ==} + '@itk-wasm/htj2k@2.1.0': resolution: {integrity: sha512-22+mWgXr/LYRCqzzfIJ5il5bgYdJjPD5jiP4XXPvSgCjp48bui5zvZSkvMmXy89bJbVinUB1O6KHuB3K0MUong==} @@ -3528,6 +3534,10 @@ packages: resolution: {integrity: sha512-ukJY3fDHFNIWA3eSk70jo8UuFqerxzn+WcpjaDW4YcOb515CEUDdRlm4vpiZbeLNjo8NJyyh1JAVEFEg7nmH4Q==} hasBin: true + itk-wasm@1.0.0-b.178: + resolution: {integrity: sha512-kW8sP2+6CwLL7VUC7jjRBnDjqsDLl/ZjRSwdcIj1XJ3I/JvFLIkLfPjsdaOlcG4VpKsi+LBQWpvpEb99iR9aWw==} + hasBin: true + jackspeak@3.4.0: resolution: {integrity: sha512-JVYhQnN59LVPFCEcVa2C3CrEKYacvjRfqIQl+h8oi91aLYQVWRYbxjPcv1bUiUy/kLmQaANrYfNMCO3kuEDHfw==} engines: {node: '>=14'} @@ -6807,6 +6817,12 @@ snapshots: transitivePeerDependencies: - debug + '@itk-wasm/dicom@7.2.0': + dependencies: + itk-wasm: 1.0.0-b.178 + transitivePeerDependencies: + - debug + '@itk-wasm/htj2k@2.1.0': dependencies: itk-wasm: 1.0.0-b.160 @@ -9293,6 +9309,23 @@ snapshots: transitivePeerDependencies: - debug + itk-wasm@1.0.0-b.178: + dependencies: + '@itk-wasm/dam': 1.1.1 + '@thewtex/zstddec': 0.2.1 + '@types/emscripten': 1.39.13 + axios: 1.7.2 + chalk: 5.3.0 + comlink: 4.4.1 + commander: 11.1.0 + fs-extra: 11.2.0 + glob: 8.1.0 + markdown-table: 3.0.3 + mime-types: 2.1.35 + wasm-feature-detect: 1.6.1 + transitivePeerDependencies: + - debug + jackspeak@3.4.0: dependencies: '@isaacs/cliui': 8.0.2