feat(ViewportActionMenu): window level per viewport / new patient info / colorbars/ 3D presets and 3D volume rendering

[IbrahimCSAE]

👏👏👏 Big shoutout to @jbocce for kicking off the work on this fantastic feature! 💯 👏👏

---

ViewportActionMenu, Patient Info Header, 3D Presets and more

This PR will address several feature requests with and design changes

• [Feature Request] Implement redesign of ViewportActionBar tools into corner regions containing the various tools. #3742
• [Feature Request] Implement per viewport window level feature #3743
• [Feature Request] Create new multi-level menu for per viewport window level as per the design in the parent epic. #3764
• Toolbar Overhaul for Patient and More Info #3825
• [Feature Request] Add Color bar to the new window level action icon #3814

Major changes are:

• New action menu per viewport that allows user to control different things including: Window Level, Colormaps, Colorbars, 3D Presets, 3D Rendering Properties
• Addition of new patient info header in the viewer that shows the information of the currently displayed patient
• Introduction of Colorbars to OHIF
• Introduction of 3D Rendering and features allowing to set cinematic rendering, shift, shade, ambiance, diffuse and specular.

Viewport Action Menu

A fully customizable action menu, where you can define your own window level presets per modality, colormaps, 3D presets.

Customizing the existing presets can be done using the customizationService:

An example below:

function getCustomizationModule() {
  return [
    {
      name: 'default',
      value: [
        {
          id: 'cornerstone.windowLevelPresets',
          presets: defaultWindowLevelPresets,
        },
        {
          id: 'cornerstone.colorbar',
          width: '16px',
          colorbarTickPosition: 'left',
          colormaps,
          colorbarContainerPosition: 'right',
          colorbarInitialColormap: DefaultColormap,
        },
        {
          id: 'cornerstone.3dVolumeRendering',
          volumeRenderingPresets: VIEWPORT_PRESETS,
          volumeRenderingQualityRange: {
            min: 1,
            max: 4,
            step: 1,
          },
        },
      ],
    },
  ];
}

For window level, the array of presets follows this structure:

const defaultWindowLevelPresets = {
  CT: [
    { description: 'Soft tissue', window: '400', level: '40' },
    { description: 'Lung', window: '1500', level: '-600' },
    { description: 'Liver', window: '150', level: '90' },
    { description: 'Bone', window: '2500', level: '480' },
    { description: 'Brain', window: '80', level: '40' },
  ],

  PT: [
    { description: 'Default', window: '5', level: '2.5' },
    { description: 'SUV', window: '0', level: '3' },
    { description: 'SUV', window: '0', level: '5' },
    { description: 'SUV', window: '0', level: '7' },
    { description: 'SUV', window: '0', level: '8' },
    { description: 'SUV', window: '0', level: '10' },
    { description: 'SUV', window: '0', level: '15' },
  ],
};

You can add the modalities you require, and the window/level values for each preset.

Colormaps

You can now change the colormap for the viewport using the action menu, not only that, you are also able to change colormaps on fusion viewports, and pick which modality you'd like to change the colormap for.

Regular viewport:

Fusion viewport:

Colormaps Previews

You can also preview colormaps before selecting them, by toggling the preview colormap toggle, which gives you a chance to see if the colormap works for you before selecting it:

Colorbars

Colorbars are being introduced to OHIF. They are interactive and can be used to manipulate the VOI on stack and volume viewports. They also support fusion viewports with PT/CT displaysets, and turn into dual mode, each colorbar controlling it's respective displayset.

Regular viewport:

Fusion viewport:

Responsive to colormap changes

Colorbars also respond to colormap changes, as seen here:

The colorbar state is maintained during the lifecycle of the viewport.

3D Rendering

The viewport action menu also allows you to manipulate the currently displayed 3D volume, offering a varity of options such as presets, quality, and more. I will showcase each feature below:

Rendering presets

There's several presets to choose from, depending on your use case.

Rendering Quality

Shift

Shade

Ambient

Diffuse

Specular

New Patient Info Header

The new patient info header displays information about the patient for the currently displayed study.

It also includes safe guards where there are multiple patients loading into the viewer, if the following case is detected, the header will only render a text that indicates there's multiple patients, to avoid assuming it's a single patient.

The patient info header contains 3 configuration options that you can pick from and set in your appConfig located in default.js

export enum PatientInfoVisibility {
  VISIBLE = 'visible',
  VISIBLE_COLLAPSED = 'visibleCollapsed',
  DISABLED = 'disabled',
}

visible: the patient info header will always be visible and it's in expanded state.
visibleCollapsed: the patient info header will be visible, but it's initial state is collapsed, a user would have to click on it to expand it.
disabled: the patient info header will not be shown.

[netlify]

✅ Deploy Preview for ohif-platform-docs canceled.

Name	Link
🔨 Latest commit	958fdf7
🔍 Latest deploy log	https://app.netlify.com/sites/ohif-platform-docs/deploys/660c06b66e4b7a0008989179

[netlify]

✅ Deploy Preview for ohif-dev canceled.

Name	Link
🔨 Latest commit	958fdf7
🔍 Latest deploy log	https://app.netlify.com/sites/ohif-dev/deploys/660c06b6f546830009a944d3

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 1 lines in your changes are missing coverage. Please review.

Project coverage is 44.37%. Comparing base (8a335bd) to head (958fdf7).
Report is 272 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #3963      +/-   ##
==========================================
- Coverage   46.23%   44.37%   -1.87%     
==========================================
  Files          78       80       +2     
  Lines        1276     1334      +58     
  Branches      312      327      +15     
==========================================
+ Hits          590      592       +2     
- Misses        548      589      +41     
- Partials      138      153      +15     

Files	Coverage Δ
platform/app/src/appInit.js	0.00% <0.00%> (ø)

... and 9 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 07301fc...958fdf7. Read the comment docs.

[sedghi]

I don't think we need the dropdown for the window level anymore, just use a simple radioButton like zoom or pan

<img width="430" alt="CleanShot 2024-03-27 at 11 20 42@2x" src="https://github.com/OHIF/Viewe

---

The issue i sent over slack for color bar sticking around with old colors

CleanShot.2024-03-27.at.09.14.56.mp4

---

I don't think the icon is correct color in the inverted viewports

it probably should be the same color as the text, see text overlay on how we detect background is inverted and accordingly use a separate color for texts

---

when inverted color the colorbar tickers should be black or something they are white seems like , it is not readable

---

we should probably have another toggle that is invert background so that when the LUT is changed, the user can toggle the background to black to make it work

---

something weird happens when you set PT preset, seems like the winodw level does not work after that. maybe it is related to the weird binary image after the preset selection.

CleanShot.2024-03-27.at.11.28.35.mp4

---

Not sure why we don't show the dates for the cor, sag ct

---

we should not show I: for the reconstructed views since they are not instance number

---

I should not be able to select overlay texts

---

we don't need PT fusion color map after this PR and also remove the dropdown for window level presets for tmtv as well

---

color bar for tmtv is weird

---

logo seems like is a bit to the right, ask Dan, IMO it should align with the left of the viewport grid

similar to how the right side is aligned

the right side vertical bar also seems black, maybe is wrong? ask Dan

(Not your PR) can we fix this as well

---

[IbrahimCSAE]

@sedghi

Fixed

• Colorbar sticking around for new displaysets
• OHIF logo position
• Viewport overlay no longer selectable, Viewport Markers no longer selectable
• Removed PET colormap tool in TMTV
• Removed WindowLevel presets in all modes
• Fixed colorbar position in TMV mode
• Fixed study date not showing up in MPR
• inverted icon for window level menu on inverted displaysets
• black markers for colorbar on inverted displaysets

Comments

• For PT window level, it seems the problem is the preset, it puts them in a level where window tool can't control them anymore, u can verify this if you switch back to default preset (first item in list), the window tool will start working again, tell me what u want to do for this
• we should not show I: for the reconstructed views since they are not instance number: I cant find a good way to do this, suggestions?

I don't understand what needs to be fixed?

• I noticed something has broken the colormap sync again recently in OHIF, it affected this PR as well

https://viewer-dev.ohif.org/tmtv?StudyInstanceUIDs=1.3.6.1.4.1.14519.5.2.1.7009.2403.871108593056125491804754960339

Change the colormap using the tool, then go into 1x1 and comeback out, the sync is broken...

This affected my MPR as well when you change the colormap in none MPR then go into MPR, it goes back to grayscale, it wasn't like this before

[cypress]

1 failed test on run #3785 ↗︎

1

42

0

0

0

Details:

Add react-i18next for internationalization support
Project: Viewers	Commit: 958fdf7315
Status: Failed	Duration: 05:57 💡
Started: Apr 2, 2024 1:33 PM	Ended: Apr 2, 2024 1:39 PM

  cypress/integration/customization/HangingProtocol.spec.js • 1 failed test

View Output Video

Test		Artifacts
OHIF HP > Should navigate next/previous stage		Test Replay Screenshots Video

Review all test suite changes for PR #3963 ↗︎