feat(multimonitor): Add simple multi-monitor support to open another study(#4178)

platform/ui/src/components/StudyBrowser/StudyBrowser.tsx

@@ -34,6 +34,7 @@ const StudyBrowser = ({
   onClickThumbnail = noop,
   onDoubleClickThumbnail = noop,
   onClickUntrack = noop,
+  onClickLaunch,
   activeDisplaySetInstanceUIDs,
   servicesManager,
 }: withAppTypes) => {
@@ -60,6 +61,7 @@ const StudyBrowser = ({
               onClick={() => {
                 onClickStudy(studyInstanceUid);
               }}
+              onClickLaunch={onClickLaunch?.bind(null, studyInstanceUid)}
               data-cy="thumbnail-list"
             />
             {isExpanded && displaySets && (

platform/ui/src/components/StudyItem/StudyItem.tsx

@@ -15,8 +15,21 @@ const StudyItem = ({
   trackedSeries,
   isActive,
   onClick,
+  onClickLaunch,
 }) => {
   const { t } = useTranslation('StudyItem');
+
+  const onSetActive = evt => {
+    evt.stopPropagation();
+    onClickLaunch(0);
+    return false;
+  };
+  const onLaunchWindow = evt => {
+    onClickLaunch(1);
+    evt.stopPropagation();
+    return false;
+  };
+
   return (
     <div
       className={classnames(
@@ -35,6 +48,20 @@ const StudyItem = ({
             <Icons.GroupLayers className="mx-2 w-4 text-blue-300" />
             {numInstances}
           </div>
+          {!!onClickLaunch && (
+            <div className="items-right flex flex-row text-base text-blue-300">
+              <Icon
+                name="icon-play"
+                className="mx-2 w-4 text-blue-300"
+                onClick={onSetActive}
+              />
+              <Icon
+                name="launch-arrow"
+                className="mx-2 w-4 text-blue-300"
+                onClick={onLaunchWindow}
+              />
+            </div>
+          )}
         </div>
         <div className="flex flex-row items-center py-1">
           <div className="text-l flex items-center pr-5 text-blue-300">{modalities}</div>