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

extensions/cornerstone-dicom-seg/.webpack/webpack.prod.js

@@ -45,10 +45,10 @@ module.exports = (env, argv) => {
       new webpack.optimize.LimitChunkCountPlugin({
         maxChunks: 1,
       }),
-      // new MiniCssExtractPlugin({
-      //   filename: `./dist/${outputName}.css`,
-      //   chunkFilename: `./dist/${outputName}.css`,
-      // }),
+      new MiniCssExtractPlugin({
+        filename: `./dist/${outputName}.css`,
+        chunkFilename: `./dist/${outputName}.css`,
+      }),
     ],
   });
 };

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, {

extensions/measurement-tracking/src/getPanelModule.tsx

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

platform/app/cypress/integration/MultiStudy.spec.js

@@ -13,8 +13,12 @@ describe('OHIF Multi Study', () => {
   it('Should display 2 comparison up', () => {
     beforeSetup();
 
-    cy.get('[data-cy="viewport-pane"]').its('length').should('be.eq', 4);
-    cy.get('[data-cy="studyDate"]').should(studyDate => {
+    cy.get('[data-cy="viewport-pane"]').as('viewportPane');
+    cy.get('@viewportPane').its('length').should('be.eq', 4);
+
+    cy.get('[data-cy="studyDate"]').as('studyDate');
+
+    cy.get('@studyDate').should(studyDate => {
       expect(studyDate.length).to.be.eq(4);
       expect(studyDate.text()).to.contain('2014').contain('2001');
       expect(studyDate.text().indexOf('2014')).to.be.lessThan(studyDate.text().indexOf('2001'));

platform/app/cypress/integration/measurement-tracking/OHIFMeasurementPanel.spec.js

@@ -23,26 +23,28 @@ describe('OHIF Measurement Panel', function () {
   it('checks if measurement item can be Relabeled under Measurements panel', function () {
     // Add length measurement
     cy.addLengthMeasurement();
-    cy.get('[data-cy="viewport-notification"]').should('exist');
-    cy.get('[data-cy="viewport-notification"]').should('be.visible');
-    cy.get('[data-cy="prompt-begin-tracking-yes-btn"]').click();
-    cy.get('[data-cy="measurement-item"]').click();
+    cy.get('[data-cy="viewport-notification"]').as('viewportNotification').should('exist');
+    cy.get('[data-cy="viewport-notification"]').as('viewportNotification').should('be.visible');
 
-    cy.get('[data-cy="measurement-item"]').find('svg').click();
+    cy.get('[data-cy="prompt-begin-tracking-yes-btn"]').as('promptBeginTrackingYesBtn').click();
+
+    cy.get('[data-cy="measurement-item"]').as('measurementItem').click();
+
+    cy.get('[data-cy="measurement-item"]').find('svg').as('measurementItemSvg').click();
 
     // enter Bone label
     cy.get('[data-cy="input-annotation"]').should('exist');
     cy.get('[data-cy="input-annotation"]').should('be.visible');
     cy.get('[data-cy="input-annotation"]').type('Bone{enter}');
 
-    // Verify if 'Bone' label was added
-    cy.get('[data-cy="measurement-item"]').should('contain.text', 'Bone');
+    cy.get('[data-cy="measurement-item"]').as('measurementItem').should('contain.text', 'Bone');
   });
 
   it('checks if image would jump when clicked on a measurement item', function () {
     // Add length measurement
     cy.addLengthMeasurement();
-    cy.get('[data-cy="prompt-begin-tracking-yes-btn"]').click();
+    cy.get('[data-cy="prompt-begin-tracking-yes-btn"]').as('promptBeginTrackingYesBtn');
+    cy.get('@promptBeginTrackingYesBtn').click();
 
     cy.scrollToIndex(13);
 

platform/app/cypress/support/commands.js

@@ -144,19 +144,22 @@ Cypress.Commands.add('drag', { prevSubject: 'element' }, (...args) =>
  * @param {number[]} secondClick - Click position [x, y]
  */
 Cypress.Commands.add('addLine', (viewport, firstClick, secondClick) => {
+  const performClick = (alias, x, y) => {
+    cy.get(alias).click(x, y, { force: true, multiple: true }).wait(250);
+  };
+
   cy.get(viewport).as('viewportAlias');
   const [x1, y1] = firstClick;
   const [x2, y2] = secondClick;
 
   // First click
-  cy.get('@viewportAlias').click(x1, y1, { force: true, multiple: true }).wait(250);
-
-  // Move the mouse and then click again
-  cy.get('@viewportAlias')
-    .trigger('mousemove', { clientX: x2, clientY: y2 })
-    .get('@viewportAlias')
-    .click(x2, y2, { force: true, multiple: true })
-    .wait(250);
+  performClick('@viewportAlias', x1, y1);
+
+  // Move the mouse
+  cy.get('@viewportAlias').trigger('mousemove', { clientX: x2, clientY: y2 }).wait(250);
+
+  // Second click
+  performClick('@viewportAlias', x2, y2);
 });
 
 /**

platform/ui/src/components/Icon/getIcon.js

@@ -39,6 +39,8 @@ import profile from './../../assets/icons/profile.svg';
 import pushLeft from './../../assets/icons/push-left.svg';
 import pushRight from './../../assets/icons/push-right.svg';
 import settings from './../../assets/icons/settings.svg';
+import sidePanelCloseLeft from './../../assets/icons/side-panel-close-left.svg';
+import sidePanelCloseRight from './../../assets/icons/side-panel-close-right.svg';
 import sorting from './../../assets/icons/sorting.svg';
 import sortingActiveDown from './../../assets/icons/sorting-active-down.svg';
 import sortingActiveUp from './../../assets/icons/sorting-active-up.svg';
@@ -71,6 +73,7 @@ import tabLinear from './../../assets/icons/tab-linear.svg';
 import tabPatientInfo from './../../assets/icons/tab-patient-info.svg';
 import tabROIThreshold from './../../assets/icons/tab-roi-threshold.svg';
 import tabSegmentation from './../../assets/icons/tab-segmentation.svg';
+import tabStudies from './../../assets/icons/tab-studies.svg';
 import uiArrowDown from './../../assets/icons/ui-arrow-down.svg';
 import uiArrowUp from './../../assets/icons/ui-arrow-up.svg';
 import uiArrowLeft from './../../assets/icons/ui-arrow-left.svg';
@@ -189,6 +192,8 @@ const ICONS = {
   'push-left': pushLeft,
   'push-right': pushRight,
   settings: settings,
+  'side-panel-close-left': sidePanelCloseLeft,
+  'side-panel-close-right': sidePanelCloseRight,
   'sorting-active-down': sortingActiveDown,
   'sorting-active-up': sortingActiveUp,
   'status-alert': statusAlert,
@@ -259,6 +264,7 @@ const ICONS = {
   'tab-patient-info': tabPatientInfo,
   'tab-roi-threshold': tabROIThreshold,
   'tab-segmentation': tabSegmentation,
+  'tab-studies': tabStudies,
   'ui-arrow-down': uiArrowDown,
   'ui-arrow-up': uiArrowUp,
   'ui-arrow-left': uiArrowLeft,