feat(PanelService): Left or right side panel to auto start as closed but auto open when needed (#3212)

* feat(SidePanel)
OHIF issue #3135
- Added a method to set a callback for a Panel to invoke when it is ready
to be shown (e.g. its data is loaded).
- Implemented such methods for both the segmentation and measurement panels.
- The SidePanel component now adds a callback to Panel components so that
it will automatically open a Panel that was initially closed and yet to
be opened.
- Updated the OHIF documentation accordingly.

* PR feedback
- added a PanelService that centralized much of the logic that existed in panel PanelModule
- the SidePanel subscribes to PanelService.EVENTS.ACTIVATE_PANEL for each of its child panels

* Removed the PanelMeasurementTableTracking setMeasurementPanelContentReadyCallback method.

* Made the forceActive flag in the PanelService optional and defaulted it to false.

* Fixed failing top level exports unit test.

* - PanelService subscriptions are now per panel (id) so subscribers do not
necessarily need to check the panel id in the event when it is fired
- PanelService activate panel trigger subscriptions are now returned
so that they can be (better) managed outside of the service
- updated/created the various documentation for panels and PanelService

* Clarified various documentation.
Moved the code to add the activate panel triggers out of the extensions
and into the longitudinal mode.

* Removed the openWhenPanelActivated flag.
PanelService now conforms to extending PubSubService like the other services.
Updated various documentation.

* Fixed failing e2e, mpr test.

* Renamed the ActivatePanelTriggers type properties.
The ExtensionManager now sets the id of various modules as a property on each of those modules.

extensions/cornerstone-dicom-seg/src/index.tsx

@@ -1,6 +1,8 @@
 import { id } from './id';
 import React from 'react';
 
+import { Types } from '@ohif/core';
+
 import getSopClassHandlerModule from './getSopClassHandlerModule';
 import PanelSegmentation from './panels/PanelSegmentation';
 
@@ -39,13 +41,13 @@ const extension = {
     commandsManager,
     configuration = {},
   }) => {},
-  /**
+ /**
    * PanelModule should provide a list of panels that will be available in OHIF
    * for Modes to consume and render. Each panel is defined by a {name,
    * iconName, iconLabel, label, component} object. Example of a panel module
    * is the StudyBrowserPanel that is provided by the default extension in OHIF.
    */
-  getPanelModule: ({ servicesManager, commandsManager, extensionManager }) => {
+  getPanelModule: ({ servicesManager, commandsManager, extensionManager }): Types.Panel[] => {
     const wrappedPanelSegmentation = () => {
       return (
         <PanelSegmentation

extensions/cornerstone-dicom-seg/src/panels/PanelSegmentation.tsx

@@ -4,7 +4,6 @@ import { SegmentationGroupTable } from '@ohif/ui';
 import callInputDialog from './callInputDialog';
 
 import { useTranslation } from 'react-i18next';
-import callColorPickerDialog from './callColorPickerDialog';
 
 export default function PanelSegmentation({
   servicesManager,

extensions/default/src/ViewerLayout/index.tsx

@@ -158,6 +158,7 @@ function ViewerLayout({
     const { content, entry } = getComponent(id);
 
     return {
+      id: entry.id,
       iconName: entry.iconName,
       iconLabel: entry.iconLabel,
       label: entry.label,
@@ -227,6 +228,7 @@ function ViewerLayout({
                 side="left"
                 activeTabIndex={leftPanelDefaultClosed ? null : 0}
                 tabs={leftPanelComponents}
+                servicesManager={servicesManager}
               />
             </ErrorBoundary>
           ) : null}
@@ -248,6 +250,7 @@ function ViewerLayout({
                 side="right"
                 activeTabIndex={rightPanelDefaultClosed ? null : 0}
                 tabs={rightPanelComponents}
+                servicesManager={servicesManager}
               />
             </ErrorBoundary>
           ) : null}

extensions/measurement-tracking/src/getPanelModule.tsx

@@ -1,3 +1,4 @@
+import { Types } from '@ohif/core';
 import {
   PanelMeasurementTableTracking,
   PanelStudyBrowserTracking,
@@ -11,7 +12,7 @@ function getPanelModule({
   commandsManager,
   extensionManager,
   servicesManager,
-}) {
+}): Types.Panel[] {
   return [
     {
       name: 'seriesList',
@@ -24,6 +25,7 @@ function getPanelModule({
         servicesManager,
       }),
     },
+
     {
       name: 'trackedMeasurements',
       iconName: 'tab-linear',