Avoid re-renders in study browser and entire page

platform/core/src/ToolbarLayoutContext.js

@@ -0,0 +1,39 @@
+import React, { Component, useContext } from 'react';
+
+/// TODO MAKE THIS PRETTY DANNY
+
+const ToolbarLayoutContext = React.createContext({
+  toolBarLayout: [],
+  setToolBarLayout: () => {},
+});
+
+ToolbarLayoutContext.displayName = 'ToolbarLayoutContext';
+
+class ToolbarLayoutProvider extends Component {
+  state = {
+    toolBarLayout: [],
+  };
+
+  render() {
+    const setToolBarLayout = toolBarLayout => {
+      this.setState({ toolBarLayout });
+    };
+
+    return (
+      <ToolbarLayoutContext.Provider
+        value={{
+          toolBarLayout: this.state.toolBarLayout,
+          setToolBarLayout,
+        }}
+      >
+        {this.props.children}
+      </ToolbarLayoutContext.Provider>
+    );
+  }
+}
+
+const useToolbarLayout = () => useContext(ToolbarLayoutContext);
+
+export default ToolbarLayoutContext;
+
+export { ToolbarLayoutProvider, useToolbarLayout };

platform/core/src/ViewModelContext.js

@@ -4,9 +4,7 @@ import React, { Component, useContext } from 'react';
 
 const ViewModelContext = React.createContext({
   displaySetInstanceUIDs: [],
-  setDisplaySetInstanceUids: () => {},
-  toolBarLayout: [],
-  setToolBarLayout: () => {},
+  setDisplaySetInstanceUIDs: () => {},
 });
 
 ViewModelContext.displayName = 'ViewModelContext';
@@ -17,21 +15,15 @@ class ViewModelProvider extends Component {
   };
 
   render() {
-    const setDisplaySetInstanceUids = displaySetInstanceUIDs => {
+    const setDisplaySetInstanceUIDs = displaySetInstanceUIDs => {
       this.setState({ displaySetInstanceUIDs });
     };
 
-    const setToolBarLayout = toolBarLayout => {
-      this.setState({ toolBarLayout });
-    };
-
     return (
       <ViewModelContext.Provider
         value={{
           displaySetInstanceUIDs: this.state.displaySetInstanceUIDs,
-          setDisplaySetInstanceUids,
-          toolBarLayout: this.state.toolBarLayout,
-          setToolBarLayout,
+          setDisplaySetInstanceUIDs,
         }}
       >
         {this.props.children}

platform/core/src/displaySetManager.js

@@ -9,11 +9,11 @@ class DisplaySetManager {
 
     const {
       displaySetInstanceUIDs,
-      setDisplaySetInstanceUids,
+      setDisplaySetInstanceUIDs,
     } = viewModelContext;
 
     this.displaySetInstanceUIDs = displaySetInstanceUIDs;
-    this.setDisplaySetInstanceUids = setDisplaySetInstanceUids;
+    this.setDisplaySetInstanceUids = setDisplaySetInstanceUIDs;
 
     // Reset displaySetInstanceUIDs
     this.setDisplaySetInstanceUids([]);

platform/core/src/index.js

@@ -23,6 +23,10 @@ import dicomMetadataStore from './dicomMetadataStore';
 import displaySetManager from './displaySetManager';
 import ToolBarManager from './ToolBarManager';
 import { ViewModelProvider, useViewModel } from './ViewModelContext';
+import {
+  ToolbarLayoutProvider,
+  useToolbarLayout,
+} from './ToolbarLayoutContext';
 import utils, { hotkeys } from './utils/';
 
 import {
@@ -114,6 +118,8 @@ export {
   ToolBarManager,
   ViewModelProvider,
   useViewModel,
+  ToolbarLayoutProvider,
+  useToolbarLayout,
 };
 
 export { OHIF };

platform/ui/src/components/StudyBrowser/StudyBrowser.jsx

@@ -22,11 +22,14 @@ const getTrackedSeries = displaySets => {
   return trackedSeries;
 };
 
-const StudyBrowser = ({ tabs, onClickStudy, onClickThumbnail }) => {
-  const [tabActive, setTabActive] = useState(getInitialActiveTab(tabs));
+const StudyBrowser = ({ tabs, activeTabName, onSetTabActive, onClickStudy, onClickThumbnail }) => {
+  const [tabActive, setTabActive] = useState(activeTabName || getInitialActiveTab(tabs));
   const [studyActive, setStudyActive] = useState(null);
   const [thumbnailActive, setThumbnailActive] = useState(null);
 
+  console.log('StudyBrowser rerender');
+  console.log(`tabActive: ${tabActive}`);
+
   const getTabContent = () => {
     const tabData = tabs.find(tab => tab.name === tabActive);
 
@@ -105,6 +108,10 @@ const StudyBrowser = ({ tabs, onClickStudy, onClickThumbnail }) => {
                 onClick={() => {
                   setTabActive(name);
                   setStudyActive(null);
+
+                  if (onSetTabActive) {
+                    onSetTabActive(name)
+                  }
                 }}
               >
                 {label}

platform/viewer/src/routes/ModeRoute.js

@@ -1,45 +1,44 @@
 import React, { useContext, useEffect, useCallback } from 'react';
-import { displaySetManager, ToolBarManager, useViewModel } from '@ohif/core';
+import {
+  displaySetManager,
+  ToolBarManager,
+  useViewModel,
+  useToolbarLayout,
+  ToolbarLayoutProvider,
+} from '@ohif/core';
 import { DragAndDropProvider } from '@ohif/ui';
 import Compose from './Compose';
 import ViewportGrid from './../components/ViewportGrid';
 
-export default function ModeRoute({
+function DisplaySetCreator({
   location,
   mode,
   dataSourceName,
   extensionManager,
 }) {
-  const { routes, sopClassHandlers, extensions } = mode;
+  console.warn('DisplaySetCreator rerendering');
+  const { routes, sopClassHandlers } = mode;
   const dataSources = extensionManager.getDataSources(dataSourceName);
-
-  // Add toolbar state to the view model context?
-  const {
-    toolBarLayout,
-    setToolBarLayout,
-    displaySetInstanceUIDs,
-    setDisplaySetInstanceUids,
-  } = useViewModel();
-
   // TODO: For now assume one unique datasource.
 
   const dataSource = dataSources[0];
   const route = routes[0];
 
-  let toolBarManager;
+  // Add toolbar state to the view model context?
+  const { displaySetInstanceUIDs, setDisplaySetInstanceUIDs } = useViewModel();
+
+  const { toolBarLayout, setToolBarLayout } = useToolbarLayout();
 
   useEffect(() => {
-    toolBarManager = new ToolBarManager(extensionManager, setToolBarLayout);
+    let toolBarManager = new ToolBarManager(extensionManager, setToolBarLayout);
     route.init({ toolBarManager });
   }, [mode, dataSourceName, location]);
 
-  console.log(dataSource);
-
   const createDisplaySets = useCallback(() => {
     // Add SOPClassHandlers to a new SOPClassManager.
     displaySetManager.init(extensionManager, sopClassHandlers, {
       displaySetInstanceUIDs,
-      setDisplaySetInstanceUids,
+      setDisplaySetInstanceUIDs,
     });
 
     const queryParams = location.search;
@@ -55,6 +54,23 @@ export default function ModeRoute({
     createDisplaySets();
   }, [mode, dataSourceName, location]);
 
+  return null;
+}
+
+export default function ModeRoute({
+  location,
+  mode,
+  dataSourceName,
+  extensionManager,
+}) {
+  console.warn('ModeRoute rerendering');
+  const { routes, extensions } = mode;
+  const dataSources = extensionManager.getDataSources(dataSourceName);
+  // TODO: For now assume one unique datasource.
+
+  const dataSource = dataSources[0];
+  const route = routes[0];
+
   // Only handling one route per mode for now
   // You can test via http://localhost:3000/example-mode/dicomweb
   const layoutTemplateData = route.layoutTemplate({ location });
@@ -89,19 +105,27 @@ export default function ModeRoute({
   }
 
   return (
-    <CombinedContextProvider>
-      {/* TODO: extensionManager is already provided to the extension module.
-       *  Use it from there instead of passing as a prop here.
-       */}
-      <DragAndDropProvider>
-        <LayoutComponent
+    <React.Fragment>
+      <ToolbarLayoutProvider>
+        <DisplaySetCreator
+          location={location}
+          mode={mode}
+          dataSourceName={dataSourceName}
           extensionManager={extensionManager}
-          displaySetInstanceUIDs={displaySetInstanceUIDs}
-          toolBarLayout={toolBarLayout}
-          ViewportGrid={ViewportGridWithDataSource}
-          {...layoutTemplateData.props}
         />
-      </DragAndDropProvider>
-    </CombinedContextProvider>
+        <CombinedContextProvider>
+          {/* TODO: extensionManager is already provided to the extension module.
+           *  Use it from there instead of passing as a prop here.
+           */}
+          <DragAndDropProvider>
+            <LayoutComponent
+              extensionManager={extensionManager}
+              ViewportGrid={ViewportGridWithDataSource}
+              {...layoutTemplateData.props}
+            />
+          </DragAndDropProvider>
+        </CombinedContextProvider>
+      </ToolbarLayoutProvider>
+    </React.Fragment>
   );
 }