Viewers: Inclusion of VTK extension causes the OHIF study viewer to crash

Thank you for creating an amazing set of components.

I’ve been trying to embed the OHIF viewer into an existing web application for viewing Dicoms pulled from Orthanc, and I’m running into trouble with with the VTK plugin. Is there an minimal working example that I can inspect to see how to include it?

Right now, I’m using a checkout from the recent master branch with a custom script include build of the extension that I’ve adapted from the example in your documentation. Here’s what the HTML and viewer initialization look like:

<body>
  ...
  <div id="root"></div>

  <!-- OHIF and Plugins -->
  <script type="text/javascript" src="/js/ohif/sonador.app-config.js" crossorigin></script>
  <script src="/js/ohif/index.umd.js" crossorigin></script>
  <script src="/js/ohif/microscopy/index.umd.js" crossorigin></script>
  <script src="/js/ohif/cornerstone/index.umd.js" crossorigin></script>
  <script src="/js/ohif/segmentation/index.umd.js" crossorigin></script>
  <script src="/js/ohif/vtk/index.umd.js" crossorigin></script>
  ...
  <!-- Initialize Viewer -->
  <script>
    // Application configuration
    var containerId = 'root';

    // Read PACS server connection from JSON string
    window.config.servers.dicomWeb = [
      JSON.parse(document.getElementById('pacs-connection').innerHTML)
    ];

    // Logos and branding for viewer
    window.config.whiteLabeling = {
      createLogoComponentFn: function(React) {
        return React.createElement('a', {
          rel: 'noopener noreferrer',
          className: 'header-brand',
        });
      }
    }

    // Extensions
    window.config.extensions = [OHIFExtDicomMicroscopy, OHIFExtCornerstone, OHIFExtDicomSeg, OHIFExtVtk];

    window.OHIFViewer.installViewer(
      // Configuration and container ID
      window.config, containerId,

      // Completion callback
      function() {
        console.log('OHIF Viewer rendered/updated');  
      }
    );
  </script>
...
</body>

The VTK extension loads okay, but when I attempt to load the study viewer, it causes everything to crash with the following error.

This is the relevant information from the link included in the output:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

Any thoughts on what might be causing this, or how it might be fixed? I’m happy to repair this and submit a merge/pull request, but need some guidance to get started.

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 19 (9 by maintainers)

Most upvoted comments

@dannyrb Thanks for responding so quickly with the suggestions. I’ll start by comparing the build manifest for VTK against the other plugins, and try and spot for differences.

The project I’m working on needs the volume rendering and three dimensional capabilities of VTK, and we’ve decided to build it on OHIF; so this seems like a good time and place to dig into the code.

I’ll see if I can get you a merge request in the next few days. Cheers!

robertsoakes on May 12, 2020

@ranasrule please try again, yesterday we had some problems with our Gitlab server, now is back online.

racacere on Nov 5, 2021

Hi there,

At my company we find a workaround for this problem, it consists in import all needed plugins at platform/viewer/src/index-umd,js, in the same way that it is done in platform/viewer/src/index.js:

import 'regenerator-runtime/runtime';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

import OHIFVTKExtension from '@nurohif/extension-vtk';
import OHIFDicomHtmlExtension from '@nurohif/extension-dicom-html';
import OHIFDicomSegmentationExtension from '@nurohif/extension-dicom-segmentation';
import OHIFDicomRtExtension from '@nurohif/extension-dicom-rt';
import OHIFDicomMicroscopyExtension from '@nurohif/extension-dicom-microscopy';
import OHIFDicomPDFExtension from '@nurohif/extension-dicom-pdf';
import OHIFDicomTagBrowserExtension from '@nurohif/extension-dicom-tag-browser';
//import OHIFDebuggingExtension from '@nurohif/extension-debugging';

function installViewer(config, containerId = 'root', callback) {
  const container = document.getElementById(containerId);

  const defaultExtensions = [
    OHIFVTKExtension,
    OHIFDicomHtmlExtension,
    OHIFDicomMicroscopyExtension,
    OHIFDicomPDFExtension,
    OHIFDicomSegmentationExtension,
    OHIFDicomRtExtension,
    //OHIFDebuggingExtension,
    OHIFDicomTagBrowserExtension,
  ];

  if (!container) {
    throw new Error(
      `No root element found to install viewer. Please add a <div> with the id '${containerId}', or pass a DOM element into the installViewer function.`
    );
  }

  return ReactDOM.render(
    <App config={config} defaultExtensions={defaultExtensions} />,
    container,
    callback
  );
}

export { App, installViewer };

Maybe this is not the best solution for all use cases but it can be useful for someone. You also can be the changes at our public fork of Ohif: https://gitlab.nursoft.cl/foss/ohif-viewer/-/commit/41d2f5095e3cca9ed08bf9962664164a88f43224?view=parallel

Best regards.

racacere on Aug 20, 2021

FWIW, using PWA build and code splitting on features specific to clients is a much better experience for end users.

Embedded UMD is supposed to be simpler, and ideal for things like embedding in Google Collab, a Python Notebook, etc.

dannyrb on Nov 23, 2020