Merge branch 'feat/v2-main' into dannyrb/ohif-154/restore-command-functionality-for-toolbar

platform/viewer/src/components/PreferencesDropdown/PreferencesDropdown.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { Dropdown, IconButton, Icon, useModal } from '@ohif/ui';
+
+const PreferencesDropdown = () => {
+  const { show } = useModal();
+
+  const showAboutModal = () => {
+    const modalComponent = () => <div>About modal</div>;
+    show({
+      content: modalComponent,
+      title: 'About',
+    });
+  };
+
+  const showPreferencesModal = () => {
+    const modalComponent = () => <div>Preferences modal</div>;
+    show({
+      content: modalComponent,
+      title: 'Preferences',
+    });
+  };
+
+  return (
+    <Dropdown
+      showDropdownIcon={false}
+      list={[
+        { title: 'About', icon: 'info', onClick: showAboutModal },
+        {
+          title: 'Preferences',
+          icon: 'settings',
+          onClick: showPreferencesModal,
+        },
+      ]}
+    >
+      <IconButton
+        variant="text"
+        color="inherit"
+        size="initial"
+        className="text-primary-active"
+      >
+        <Icon name="settings" />
+      </IconButton>
+      <IconButton
+        variant="text"
+        color="inherit"
+        size="initial"
+        className="text-primary-active"
+        onClick={() => {}}
+      >
+        <Icon name="chevron-down" />
+      </IconButton>
+    </Dropdown>
+  );
+};
+
+export default PreferencesDropdown;

platform/viewer/src/components/PreferencesDropdown/index.js

@@ -0,0 +1 @@
+export { default } from './PreferencesDropdown';

platform/viewer/src/components/ViewportGrid.jsx

@@ -1,10 +1,12 @@
 /**
  * CSS Grid Reference: http://grid.malven.co/
  */
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { ViewportGrid, ViewportPane, useViewportGrid } from '@ohif/ui';
 import EmptyViewport from './EmptyViewport';
+import { classes } from '@ohif/core';
+const { ImageSet } = classes;
 
 function ViewerViewportGrid(props) {
   const { servicesManager, viewportComponents, dataSource } = props;
@@ -20,6 +22,29 @@ function ViewerViewportGrid(props) {
   // TODO -> Need some way of selecting which displaySets hit the viewports.
   const { DisplaySetService } = servicesManager.services;
 
+  useEffect(() => {
+    const { unsubscribe } = DisplaySetService.subscribe(
+      DisplaySetService.EVENTS.DISPLAY_SETS_CHANGED,
+      displaySets => {
+        displaySets.sort((a, b) => {
+          const isImageSet = x => x instanceof ImageSet;
+          return (isImageSet(a) === isImageSet(b)) ? 0 : isImageSet(a) ? -1 : 1;
+        });
+        dispatch({
+          type: 'SET_DISPLAYSET_FOR_VIEWPORT',
+          payload: {
+            viewportIndex: 0,
+            displaySetInstanceUID: displaySets[0].displaySetInstanceUID,
+          },
+        });
+      },
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
   // TODO -> Make a HangingProtocolService
   const HangingProtocolService = displaySets => {
     let displaySetInstanceUID;