Install extensions on ohif/app:v3.9 container

jdelu · February 14, 2025, 11:14am

How to install extension on OHIF container

Hi everyone,

I have integrated the OHIF viewer into my DICOM environment, primarily working on a container-based cloud architecture. Currently, I am exploring the full capabilities of this viewer.

I am using the ohif/app:v3.9.3 image, have made the necessary configurations in the JS file, and applied some UI customizations by directly overriding the resources.

I would like to understand how to install the @radicalimaging/ecg-dicom viewer, which I found here: @radicalimaging/ecg-dicom.

From my understanding, since ohif/app:v3.9.3 is a pre-built static app served by Nginx, it does not include a Node.js runtime or a package.json. This means that I cannot install new extensions or dependencies inside the container using yarn or npm directly.

I believe the correct approach would be to build a custom image based on Nginx, clone the Git project, and install all the dependencies and extensions before serving the application.

Any guidance or documentation on this would be greatly appreciated! In the meantime, I’m continuing to explore the full potential of the OHIF viewer.

Thanks in advance for any help!

Best Regards

Jacopo

ugly_doggy · February 18, 2025, 12:46am

I think this document can help you.
OHIF Command Line Interface | OHIF
You can build the OHIF in local.
Build for Production | OHIF
And then Deploy it like the static pages in cloud.
Deploy Static Assets | OHIF

jdelu · March 6, 2025, 11:11am

Hi Chan

Thank you so much for your reply.

I initially assumed that I needed to build my OHIF environment locally and deploy it, including my custom Docker image.

I have been following the official documentation and running some tests, but I am encountering difficulties integrating the extension and enabling the mode.

I cloned the OHIF Viewer repository and checked out 3.9 version.
I share the steps I have made in the following.

yarn run cli add-extension @radicalimaging/ecg-dicom
yarn install

I noticed that:

yarn.lock has been updated with
babel/runtime dependencies
radicalimaging/ecg-dicom^3.19.1 package
dicomweb-client version update
radicalimaging/ecg-dicom has been added to package.json
radicalimaging/ecg-dicom has been added to pluginConfig.json

Then the build command worked fine with some warnings

yarn build

yarn run v1.22.22
$ lerna run build:viewer --stream
(node:20456) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
lerna notice cli v7.4.2

> @ohif/app:"build:viewer"

(node:20456) [DEP0060] DeprecationWarning: The `util._extend` API is deprecated. Please use Object.assign() instead.

[...]

@ohif/app: WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
@ohif/app: This can impact web performance.
@ohif/app: Assets: 
@ohif/app:   app.bundle.37b6ed593ae814aa4701.js (5.98 MiB)
@ohif/app:   3900.bundle.562f517e62ef4ee7ea62.js (844 KiB)
@ohif/app:   1436.bundle.a953741da83b138e98d0.js (648 KiB)
@ohif/app:   8523.bundle.bfbe3ebb6a85036b7f91.js (1.14 MiB)
@ohif/app:   2343.bundle.713710526e2811da5c2f.js (610 KiB)
@ohif/app:   5717.bundle.2041a4c15182e8dcc642.js (501 KiB)
@ohif/app:   17dd54813d5acc10bf8f.wasm (5.38 MiB)
@ohif/app:   031089e563a18ada8441.wasm (250 KiB)
@ohif/app:   1185.bundle.9546668409b2bda66e41.js (316 KiB)
@ohif/app:   dicom-microscopy-viewer/dicomMicroscopyViewer.min.js (2.31 MiB)
@ohif/app:   dicom-microscopy-viewer/index.worker.min.worker.js.map (724 KiB)
@ohif/app:   dicom-microscopy-viewer/dicomMicroscopyViewer.min.js.map (8.47 MiB)
@ohif/app: WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
@ohif/app: Entrypoints:
@ohif/app:   app (6.2 MiB)
@ohif/app:       app.bundle.css
@ohif/app:       app.bundle.37b6ed593ae814aa4701.js
@ohif/app: 
@ohif/app: webpack 5.94.0 compiled with 2 warnings in 68654 ms (667e9b8251b059b62629)

so dist was generated containing radicalimaging directory and the app-config.js configuration

  extensions: [],
  modes: [],

Then, serving the application

cd platform/app
npx serve ./dist -c ../public/serve.json

OHIF runs well, and I can see the extension in the console

> window.extensions
(3) ['@ohif/extension-default', '@ohif/extension-cornerstone', '@radicalimaging/ecg-dicom']

I want to specify that adding radicalimaging/ecg-dicom in extensions of app-config (or modifying default.js before building), the console warns me that the extensions might be initialized twice.

The last step should be enabling the ecg-dicom viewer. According to the plugin documentation, I added the required modes.

modes: ['@ohif/mode-longitudinal', '@radicalimaging/ecg-dicom']

However, when I serve the application, the OHIF studies list does not appear, and an error occurs in the console

react-dom.production.min.js:188 TypeError: t.isValidMode is not a function
    at WorkList.tsx:362:38
    at Array.sort (<anonymous>)
    at WorkList.tsx:361:39
    at Array.map (<anonymous>)
    at L (WorkList.tsx:248:41)
    at fo (react-dom.production.min.js:160:137)
    at Ds (react-dom.production.min.js:196:258)
    at Cl (react-dom.production.min.js:291:88)
    at Sc (react-dom.production.min.js:279:389)
    at gc (react-dom.production.min.js:279:320)
ds	@	react-dom.production.min.js:188
i.componentDidCatch.n.callback	@	react-dom.production.min.js:189
Hi	@	react-dom.production.min.js:156
bl	@	react-dom.production.min.js:260
Sl	@	react-dom.production.min.js:259
yl	@	react-dom.production.min.js:258
(anonymous)	@	react-dom.production.min.js:282
Mc	@	react-dom.production.min.js:280
ac	@	react-dom.production.min.js:269
I	@	scheduler.production.min.js:13
A	@	scheduler.production.min.js:14

I suspect this issue is related to the radicalimaging/ecg-dicom mode, but I’m unsure how to resolve it.

Thank you again for your help

Best Regards

J.

ugly_doggy · March 7, 2025, 2:59am

You don’t need modified the mode or extensions in appConfig.json file.
yarn run cli add-extension will modifies the pluginConfig.json which will dynamic add mode or extensions.
You can regard “extensions” as “provider” and “mode” as “consumer”. If you already add @radicalimaging/ecg-dicom. Try to using them in Viewer/modes/longitudinal which is the basic viewer or add a mode that utilizes ·radicalimaging/ecg-dicom·.