Skip to main content
Version: Version 3.0 🚧

Module: Viewport

Overview#

Viewports consume a displaySet and display/allow the user to interact with data. An extension can register a Viewport Module by defining a getViewportModule method that returns a React component. Currently, we use viewport components to add support for:

  • 2D Medical Image Viewing (cornerstone ext.)
  • Structured Reports as SR (DICOM SR ext.)
  • Structured Reports as HTML (DICOM html ext.)
  • Encapsulated PDFs as PDFs (DICOM pdf ext.)
  • Whole Slide Microscopy Viewing (whole slide ext.)
  • etc.

The general pattern is that a mode can define which Viewport to use for which specific SOPClassHandlerUID, so if you want to fork just a single Viewport component for a specialized mode, this is possible.

// displaySet, viewportIndex, dataSourceconst getViewportModule = () => {  const wrappedViewport = props => {    return (      <ExampleViewport        {...props}        onEvent={data => {          commandsManager.runCommand('commandName', data);        }}      />    );  };
  return [{ name: 'example', component: wrappedViewport }];};

Example Viewport Component#

A simplified version of the tracked CornerstoneViewport is shown below, which creates a cornerstone viewport and and action bar on top of it.

function TrackedCornerstoneViewport({  children,  dataSource,  displaySet,  viewportIndex,  servicesManager,  extensionManager,  commandsManager,}) {  const renderViewport = () => {    const { component: Component } = extensionManager.getModuleEntry(      'org.ohif.cornerstone.viewportModule.cornerstone'    );    return (      <Component        onElementEnabled={onElementEnabled}        element={element}        {...props}      ></Component>    );  };
  return (    <>      <ViewportActionBar onDoubleClick onSeriesChange />      <div className="relative flex flex-row w-full h-full overflow-hidden">        {renderViewport()}      </div>    </>  );}

viewportModule

@ohif/viewer#

Viewport components are managed by the ViewportGrid Component. Which Viewport component is used depends on:

  • Hanging Protocols
  • The Layout Configuration
  • Registered SopClassHandlers

viewportModule-layout

An example of three cornerstone Viewports