feat(SidePanel): new side panel tab look-and-feel (#3657)

extensions/default/src/Components/SidePanelWithServices.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from 'react';
+import { SidePanel } from '@ohif/ui';
+import { PanelService, ServicesManager } from '@ohif/core';
+
+export type SidePanelWithServicesProps = {
+  servicesManager: ServicesManager;
+  side: 'left' | 'right';
+  className: string;
+  activeTabIndex: number;
+  tabs: any;
+};
+
+const SidePanelWithServices = ({
+  servicesManager,
+  side,
+  className,
+  activeTabIndex: activeTabIndexProp,
+  tabs,
+}) => {
+  const panelService: PanelService = servicesManager?.services?.panelService;
+
+  // Tracks whether this SidePanel has been opened at least once since this SidePanel was inserted into the DOM.
+  // Thus going to the Study List page and back to the viewer resets this flag for a SidePanel.
+  const [hasBeenOpened, setHasBeenOpened] = useState(false);
+  const [activeTabIndex, setActiveTabIndex] = useState(activeTabIndexProp);
+
+  useEffect(() => {
+    if (panelService) {
+      const activatePanelSubscription = panelService.subscribe(
+        panelService.EVENTS.ACTIVATE_PANEL,
+        (activatePanelEvent: Types.ActivatePanelEvent) => {
+          if (!hasBeenOpened || activatePanelEvent.forceActive) {
+            const tabIndex = tabs.findIndex(tab => tab.id === activatePanelEvent.panelId);
+            if (tabIndex !== -1) {
+              setActiveTabIndex(tabIndex);
+            }
+          }
+        }
+      );
+
+      return () => {
+        activatePanelSubscription.unsubscribe();
+      };
+    }
+  }, [tabs, hasBeenOpened, panelService]);
+
+  return (
+    <SidePanel
+      side={side}
+      className={className}
+      activeTabIndex={activeTabIndex}
+      tabs={tabs}
+      onOpen={() => {
+        setHasBeenOpened(true);
+      }}
+    ></SidePanel>
+  );
+};
+
+export default SidePanelWithServices;

extensions/default/src/ViewerLayout/index.tsx

@@ -5,6 +5,7 @@ import { SidePanel, ErrorBoundary, LoadingIndicatorProgress } from '@ohif/ui';
 import { ServicesManager, HangingProtocolService, CommandsManager } from '@ohif/core';
 import { useAppConfig } from '@state';
 import ViewerHeader from './ViewerHeader';
+import SidePanelWithServices from '../Components/SidePanelWithServices';
 
 function ViewerLayout({
   // From Extension Module Params
@@ -119,7 +120,7 @@ function ViewerLayout({
           {/* LEFT SIDEPANELS */}
           {leftPanelComponents.length ? (
             <ErrorBoundary context="Left Panel">
-              <SidePanel
+              <SidePanelWithServices
                 side="left"
                 activeTabIndex={leftPanelDefaultClosed ? null : 0}
                 tabs={leftPanelComponents}
@@ -141,7 +142,7 @@ function ViewerLayout({
           </div>
           {rightPanelComponents.length ? (
             <ErrorBoundary context="Right Panel">
-              <SidePanel
+              <SidePanelWithServices
                 side="right"
                 activeTabIndex={rightPanelDefaultClosed ? null : 0}
                 tabs={rightPanelComponents}

extensions/default/src/getPanelModule.tsx

@@ -20,7 +20,7 @@ function getPanelModule({ commandsManager, extensionManager, servicesManager })
   return [
     {
       name: 'seriesList',
-      iconName: 'group-layers',
+      iconName: 'tab-studies',
       iconLabel: 'Studies',
       label: 'Studies',
       component: WrappedPanelStudyBrowser.bind(null, {