Avoid re-renders in study browser and entire page

extensions/default/src/MeasurementTable.js

@@ -8,10 +8,10 @@ import {
 } from '@ohif/ui';
 
 export default function MeasurementTable({ servicesManager, commandsManager }) {
-  console.warn(servicesManager);
-
   const { MeasurementService } = servicesManager.services;
 
+  console.error('MeasurementTable rendering!!!!!!!!!!!!!');
+
   const actionButtons = (
     <React.Fragment>
       <ButtonGroup onClick={() => alert('Export')}>

extensions/default/src/ViewerLayout/index.jsx

@@ -1,19 +1,31 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { SidePanel, Toolbar } from '@ohif/ui';
+import { useToolbarLayout, useViewModel } from '@ohif/core';
 //
 import Header from './Header.jsx';
 import { displaySetManager } from '@ohif/core';
 
+function ViewportDataCreator({setViewportData}) {
+  const { displaySetInstanceUIDs } = useViewModel()
+  console.log(displaySetInstanceUIDs);
+
+  useEffect(() => {
+    setViewportData([
+      displaySetManager.getDisplaySetByUID(displaySetInstanceUIDs[0]),
+    ]);
+  }, [displaySetInstanceUIDs, setViewportData]);
+
+  return null;
+}
+
 function ViewerLayout({
   // From Extension Module Params
   extensionManager,
   // From Modes
   leftPanels,
   rightPanels,
-  toolBarLayout,
   viewports,
-  displaySetInstanceUIDs,
   ViewportGrid,
 }) {
   /**
@@ -33,14 +45,6 @@ function ViewerLayout({
   // TODO -> Need some way of selecting which displaySets hit the viewports.
   const [viewportData, setViewportData] = useState([]);
 
-  console.log(displaySetInstanceUIDs);
-
-  useEffect(() => {
-    setViewportData([
-      displaySetManager.getDisplaySetByUID(displaySetInstanceUIDs[0]),
-    ]);
-  }, [displaySetInstanceUIDs]);
-
   const getPanelData = id => {
     const entry = extensionManager.getModuleEntry(id);
     // TODO, not sure why sidepanel content has to be JSX, and not a children prop?
@@ -66,16 +70,18 @@ function ViewerLayout({
 
   const leftPanelComponents = leftPanels.map(getPanelData);
   const rightPanelComponents = rightPanels.map(getPanelData);
-
   const viewportComponents = viewports.map(getViewportComponentData);
 
-  console.log(displaySetInstanceUIDs);
-  console.log(toolBarLayout);
+  let { toolBarLayout } = useToolbarLayout();
+  if (!toolBarLayout.length) {
+    return null;
+  }
 
   const [primaryToolBarLayout, secondaryToolBarLayout] = toolBarLayout;
 
   return (
     <div>
+      <ViewportDataCreator setViewportData={setViewportData}/>
       <Header
         tools={primaryToolBarLayout.tools}
         moreTools={primaryToolBarLayout.moreTools}
@@ -179,7 +185,7 @@ ViewerLayout.propTypes = {
       moreTools: PropTypes.array,
     })
   ).isRequired,
-  displaySetInstanceUIDs: PropTypes.any.isRequired,
+  //displaySetInstanceUids: PropTypes.any.isRequired,
   leftPanels: PropTypes.array,
   rightPanels: PropTypes.array,
   /** Responsible for rendering our grid of viewports; provided by consuming application */

extensions/default/src/getPanelModule.js

@@ -3,6 +3,7 @@ import { StudyBrowser } from '@ohif/ui';
 import {
   dicomMetadataStore,
   useViewModel,
+  useToolbarLayout,
   displaySetManager,
 } from '@ohif/core';
 
@@ -27,18 +28,49 @@ function getImageSrc(imageId, { cornerstone }) {
   });
 }
 
-function StudyBrowserPanel({ getDataSources, commandsManager }) {
-  const viewModel = useViewModel();
-
-  const dataSource = getDataSources('dicomweb')[0];
+function StudyBrowserUIData({ getDataSources, commandsManager }) {
+  const [activeTabName, setActiveTabName] = useState('primary');
   const [studyData, setStudyData] = useState([]);
   const [thumbnailImageSrcMap, setThumbnailImageSrcMap] = useState(new Map());
   const updateThumbnailMap = (k, v) => {
     setThumbnailImageSrcMap(thumbnailImageSrcMap.set(k, v));
   };
+
+  console.log('StudyBrowserUIData rerender');
+
+  return (
+    <StudyBrowserPanel
+      activeTabName={activeTabName}
+      getDataSources={getDataSources}
+      commandsManager={commandsManager}
+      onSetTabActive={setActiveTabName}
+      studyData={studyData}
+      setStudyData={setStudyData}
+      thumbnailImageSrcMap={thumbnailImageSrcMap}
+      updateThumbnailMap={updateThumbnailMap}
+    />
+  );
+}
+
+function StudyBrowserPanel({
+  activeTabName,
+  getDataSources,
+  commandsManager,
+  onSetTabActive,
+  studyData,
+  setStudyData,
+  thumbnailImageSrcMap,
+  updateThumbnailMap,
+}) {
+  console.warn('StudyBrowserPanel rerender');
+  const viewModel = useViewModel();
+
+  const dataSource = getDataSources('dicomweb')[0];
+
   const viewportData = []; //useViewportGrid();
   const seriesTracking = {}; //useSeriesTracking();
 
+  // This effect
   useEffect(() => {
     if (!viewModel.displaySetInstanceUIDs.length) {
       return;
@@ -192,7 +224,7 @@ function StudyBrowserPanel({ getDataSources, commandsManager }) {
     });
 
     return () => (isSubscribed = false);
-  }, [viewModel.displaySetInstanceUIDs]);
+  }, [viewModel.displaySetInstanceUIDs, thumbnailImageSrcMap, setStudyData]);
 
   studyData.forEach(study => {
     study.displaySets.forEach(ds => {
@@ -251,13 +283,20 @@ function StudyBrowserPanel({ getDataSources, commandsManager }) {
     [studyData]
   );
 
-  return <StudyBrowser tabs={tabs} onClickStudy={memoOnClickStudy} />;
+  return (
+    <StudyBrowser
+      activeTabName={activeTabName}
+      tabs={tabs}
+      onClickStudy={memoOnClickStudy}
+      onSetTabActive={onSetTabActive}
+    />
+  );
 }
 
 function getPanelModule({ getDataSources, commandsManager, servicesManager }) {
   const wrappedStudyBrowserPanel = () => {
     return (
-      <StudyBrowserPanel
+      <StudyBrowserUIData
         getDataSources={getDataSources}
         commandsManager={commandsManager}
       />