Getting started with the V3 viewer

Introduction

Flywheel is excited to introduce its new V3 viewer, available on all sites running v.19.3 or later. Based on the open-source OHIF v3 viewer that leverages the Cornerstone3D library, it brings significant improvements in multi-dimensional data visualization and segmentation. Additionally, the viewer has been completely redesigned to provide Flywheel users with a unique viewing experience.

The V3 viewer is currently available to users as a secondary viewer by default, with the V2 viewer being the main viewer. If you are interested in having the V3 viewer as your default viewer, please contact your sales representative.

Launching the viewer

There are multiple ways to open the V3 viewer from Flywheel depending on where you are on the platform and what you are trying to do. Please note that the V3 viewer will open in a separate browser tab.

For sites where the V3 viewer is not the default viewer (most common), the V3 viewer can only be launched at the file level.

At the project level

From a project's Description page, users can click on the Viewer Study List. This opens a list of all the sessions that exist in the project where each session and file can be opened in the viewer.

At the session level

If you're only interested in viewing images from the same session, you can open the viewer at the session level. From the a project's session page, click on the viewer icon next to the session you would like to open in the session list. You can also select a session from the session list, and click Launch in Viewer.

At the file level

Sites where the V3 viewer is the default viewer

If you're only interested in viewing a single file, you can open that file directly in the viewer by clicking on the viewer icon next to that file on the Acquisitions page of a session.

Sites where the V3 viewer is not the default viewer (most common)

For sites where the V3 viewer is not the default viewer (most common case), the V3 viewer can only be launched at the file-level by clicking on the three dots icon next to the file name on the acquisitions page, and select "Launch in Viewer (V3)".

Additional images from the same acquisition/session/subject can be loaded in the viewer through the viewer's file browser (see Loading more files into the left-side panel).

Viewer overview

The viewer is divided in four main components:

• The viewport
• The left-side panel
• The header toolbar

• The right-side toolbar

  

The viewport

The viewport is the area of the viewer where images are being displayed. By default, the first image dataset in the left-side panel will be automatically displayed in the viewport upon opening the viewer (see also launching the viewer). Multiple viewports can be added to create a multi-viewport layout and visualize multiple images simultaneously (see Layout selection).

Additional information and menus are available in each viewport:

• Top left corner: Flywheel session name and Flywheel acquisition name for the image file being displayed.
• Top right corner: Viewport settings/rendering controls (see below)
• Bottom left corner: Window Width (W) and Window Level (L)

• Bottom right corner: Slice/instance number

  

Default mouse controls in the viewport

The default mouse controls in the viewport are described in the table below.

Viewport rendering controls

Each viewport comes with its own rendering controls to apply settings like color maps or window level presets. Only settings that are relevant to that viewport are available and vary depending on the image modality or the type of viewport (2D vs 3D).

• List of controls available for 2d viewports

• List of controls available for 3D viewports

The left-side panel

The left-side panel is where users can browse the data that they would like to view in a viewport. Image files are represented by thumbnails and are grouped by their Flywheel session. Sessions can be collapsed for a better browsing experience.

Loading an image into a viewport

Image files and overlay files such as DICOM structured reports, DICOM SEG files or DICOM RTSTRUCT files can be loaded into a viewport either by dragging and dropping or by double-clicking on a thumbnail. When using the double-click, files will be loaded in the active viewport (identified by a thicker and different color border). Clicking anywhere in a viewport automatically makes it the active viewport.
When a multi-viewport layout is being used, thumbnails of the files being displayed in the active viewport are highlighted in the left-side panel.

In the example below, the left viewport is the active viewport and the sagittal image being displayed in the viewport is also highlighted in the left-side panel.

In this next example, the active viewport is now the right viewport and the axial image being displayed in that viewport is highlighted in the right-side panel.

Loading more files into the left-side panel

When the viewer is launched, the number of files already loaded in the left-side panel is limited. If the viewer is launched at the session-level, only files from that session's first acquisition will be loaded in the left-side panel. If the viewer is launched at the file-level, only that file will be loaded in the left-side panel.

The left-side panel file browser allows users to load additional files from the same subject into the left-side panel to be viewed in the viewer. To open the file browser, click on one of the Load Files icon located at the top and at the bottom of the left-side panel.

The file browser allows the user to browse all Flywheel files for that subject according to the Flywheel hierarchy:

• Session
  • Acquisition
    • File

Sessions and acquisitions are represented as folders that can be expanded/collapsed. Upon opening the file browser, sessions and acquisition folders are collapsed, except for the ones containing files that are already loaded in the left-side panel. In the example below, only the T1w_MPR.dcm.zip file is already loaded in the left-side panel. Files that are not supported by the viewer are grayed out and cannot be unselected.

Load more files from the same acquisition

If you opened a file from an acquisition that contains multiple files, you can load the other files in that acquisition by opening the file browser, selecting the files that you would like to load and click "Load into Viewer"

Load more files from a different acquisition in the same session

To load files from another acquisition, expand that acquisition's folder and select the files that you would like to load, then click "Load into Viewer".

Load more files from a different session

To load files from another session, expand that session's folder and select the acquisitions/files that you would like to load, then click "Load into Viewer"

Load files from analyses

If your session contains analyses files, there will be a Analyses sub-folder in that session's folder. Within this Analyses folder, analyses files are organized in sub-folders that each represent one analysis container. You can expand each analysis container to select individual analyses files to load into the left-side panel. Below is an example of analyses files as seen from the Flywheel session page (top) and how to load those same files from the file browser in the viewer (bottom).

Load files using the search bar

In cases where there are a lot of sessions and acquisitions for the same subject, it could become difficult to browse through all the files to find the ones that need to be loaded. You can use the search bar in the file browser to quickly access the files that you would like to load.

The header toolbar

The header toolbar is where users can find and edit viewer settings and image display. It includes the following tools/menus:

1. Layout selection
2. Reference lines
3. Viewport synchronization
4. Cine mode
5. Reset view
6. Image capture
7. Viewer mode selection
8. Image information
9. User avatar
10. Viewer settings

Layout selection

Users can customize the viewer layout by adding more viewports using the layout selection menu.

Common layouts

Users can quickly select one of the most common viewport layouts:

• 1x1 viewport
• 1x2 viewports
• 2x2 viewports
• 2x3 viewports

Custom layouts

Users can customize their viewport layout by adding up to 12 viewports using the custom grid. By hovering over the grid to select rows and columns, users can pick any of following layouts:

• 1x1 viewport
• 1x2 viewports
• 1x3 viewports
• 1x4 viewports
• 2x1 viewports
• 2x2 viewports
• 2x3 viewports
• 2x4 viewports
• 3x1 viewports
• 3x2 viewports
• 3x3 viewports
• 3x4 viewports

Advanced layouts

Advanced layouts (except for Frame view) are available when the image data in the active viewport is reconstructible (see requirements here).

Multi-planar reconstruction (MPR)

The multi-planar reconstruction (MPR) layout consists of a 1x3 viewport layout where each viewport is showing one of the three orientations (axial, sagittal, coronal)

3D four up

The 3 four up layout is a 2x2 viewport layout where the first row has the axial orientation and 3D rendering, and the second row has the coronal and sagittal orientations.

3D main

The 3D main layout is an asymmetric layout with two rows where the first row is one single viewport with 3D rendering and the second row has three viewports with the axial, coronal and sagittal orientations.

Axial Primary

The axial primary layout is an asymmetric layout where the first column is one single viewport with the axial orientation, and the second column has two viewports with the sagittal and coronal orientations.

3D only

The 3D only layout consists in one single viewport with 3D rendering.

3D primary

The 3D primary layout is an asymmetric layout where the first column is one single viewport with 3D rendering, and the second column has three viewports with the axial, coronal and sagittal orientations.

Reference lines

The reference line tool can be used when multiple series with different orientations are being displayed in a multi-viewport layout. A reference line is displayed on inactive viewports, that corresponds to the location of the slice being displayed in the active viewport.

Viewport synchronization

The viewport synchronization menu allows to synchronize user actions across multiple viewports.

Scroll

When checked, scrolling is synchronized across viewports with datasets with the same orientation. Additionally, the slice location is also synchronized as the user starts scrolling.

Zoom

When checked, zooming in and out as well as moving ("pan") the image is synchronized across viewports with the same orientation.

Orientation

When checked, any rotation or flip of the image will be synchronized across viewports with the same orientation.

Window Levels

When checked, window levels are synchronized across viewports displaying the datasets from the same modality.

Cine tool

For image series that have multiple images, the cine tool allows users to play those images in a cinematic loop. The speed of the cinematic loop can be adjusted from 1 frame per second (fps) to 90 fps.

Reset view

The reset view button can be used to reset the zoom, window levels and orientation of the image being displayed in the active viewport.

Image capture

The capture menu allows to download a screen capture of the active viewport. The following settings can be modified when downloading an image capture:

• File Name: Users can type in some free text for the name of the file that will be downloaded
• File Type: Image captures can be downloaded either in the .jpg or the .png format.
• Width and Height: Resolution of the image being downloaded. Minimum resolution is 100x100px and maximum resolution is 10000x10000px. The dimensions ratio is locked by default but can be unlocked using the link icon.
• Show annotations: 2D annotations or contours from DICOM RTSTRUCT files can be shown/hidden on the image capture. (Note: ROIs from 3D segmentations cannot yet be shown on image captures)

Viewer mode

The V3 viewer currently supports two different modes: Basic Viewer and TMTV mode.

Image information

The image information menu provides information from the image metadata. By clicking on the information icon , users can quickly check the following image metadata:

• Subject ID: from PatientID (0010,0020)
• Sex: from PatientSex (0010,0040)
• Age: from PatientsAge (0010,1010)
• MRN: from PatientsName (0010,0010)
• Thickness: from SliceThickness (0018,0050)
• Spacing: from SpacingBetweenSlices (0018,0088)
• Scanner: from ManufacturerModelName (0008,1090)

DICOM Tag Browser

The DICOM Tag browser allows users to check the value of any DICOM tag for all image datasets already loaded in the left-side panel of the viewer. Users can first select the image dataset that they would like to check from the Series drop-down list. Then users can either scroll down the list of DICOM tags, or they can search for a specific tag by typing the name of that tag in the search bar. For each series, the Instance Number slider can be used to check instance-specific tags.

Viewer Settings

The Viewer settings menu provides links to relevant resources like links to the Release Notes page, Flywheel's user forum, or Flywheel's support portal. It also provides the Flywheel version and the version of the web browser being used, which is usually helpful information to troubleshoot issues.

User preferences

Customized hotkeys

In the user preferences, users can customize the default hotkeys. For any of the functions listed, users can assign the hotkey that they would like to use. If a hotkey is already being used, a warning will be shown (see below). The same hotkey cannot be assigned to multiple functions. Customized hotkeys will persist until they are modified again by the user. To reset the hotkeys to the default settings, users can click on "Reset to Defaults"

The right-side toolbar

The right side toolbar includes all the tools needed for better visualization of images.

Window levels

This tool is selected by default upon opening the viewer. When the tool is selected, hold down the left button of the mouse anywhere in the viewport and move up and down to modify the window level, or up and down to modify the window width.

Move image

When the move tool is selected, hold on the left button of the mouse to move the image anywhere within the viewport.

Zoom

When clicking on the zoom button in the right-side toolbar, a menu appears with two options:

• Zoom: when this tool is active, zoom in and out on the image by holding down the left button of the mouse and move up and down anywhere in the viewport.
• Magnify: when this tool is active, zoom in on a specific location of the image by holding down the left button of the mouse in the viewport.

Crosshair

The crosshair tool is only available for advanced layouts that display planar reconstructions and provides a way to locate a specific part of the image in the different orientations. When the crosshair tool is active, clicking anywhere in the viewport will move the crosshair to that location in all three orientation viewports.

Custom orientation reconstruction

With the crosshair tool, users can visualize a planar reconstruction of their dataset in any orientation. To change the orientation of a reconstruction, hover over one of the crosshairs to reveal a couple of dots. Click on the dot that is the furthest away from the crosshairs intersection and drag the mouse in any direction to rotate the crosshair. This will change the orientation of the reconstruction displayed in the other viewports.

Maximum intensity projection (MIP)

The crosshair tool can also be used to create a maximum intensity projection (MIP) of an image. Hover over one of the crosshairs to reveal a couple of dots. Click on the dot that is the closest to the crosshairs intersection and drag the mouse in the direction perpendicular to the crosshair to increase the slab thickness. This creates a maximum intensity projection in the viewport displaying the reconstruction represented by that crosshair. The MIP view can then be rotated by rotating the crosshair (see below)

3D rotation

The 3D rotation tool is only available for 3D viewports and is selected by default when the active viewport is a 3D viewport. When the tool is active, click anywhere in the viewport and drag the mouse in any direction to rotate the 3D rendering.

Invert colors

The invert tool can be used to invert the colors of the image. Simply click on the tool, or use the hotkey I to invert the colors of the active viewport.

Rotate images

Images can be rotated 90 degrees to the right by clicking "Rotate right" or using the hotkey R. Images can be rotated 90 degrees to the left by clicking "Rotate left" or using the hotkey L.

Flip images

Images can be flipped vertically by clicking "Flip vertically" or using the hotkey V. Images can be flipped horizontally by clicking "Flip horizontally" or using the hotkey H.

Annotations tools

Expand the tool menu to select the tool that you would like to use. The icon in the toolbar will change to the most recently used tool. See Annotate images for more details on annotation tools and how to use them.

Stack scroll

The stack scroll tool allows to scroll through image slices simply by holding down the left button of the mouse and dragging it up and down.

Measurements panel

The measurements panel icon allows to expand or collapse the measurements panel. For more details on measurements, see Annotate images

Segmentation panel

The segmentation panel icon allows to expand or collapse the segmentation panel. For more details on segmentations, see 3D segmentations

Default hotkeys

• Default hotkeys for viewport actions

• Hotkeys for window level presets (available for CT images only)

• Hotkeys for segmentation tools