Wire up mode buttons to mode routes; Expose displayName;

extensions/default/src/ViewerLayout/Header.jsx

@@ -1,9 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+// TODO: This may fail if package is split from PWA build
+import { useHistory } from 'react-router-dom';
 //
 import { NavBar, Svg, Icon, IconButton } from '@ohif/ui';
 
 function Header({ children }) {
+  const history = useHistory();
   // const dropdownContent = [
   //   {
   //     name: 'Soft tissue',
@@ -19,15 +22,19 @@ function Header({ children }) {
     <NavBar className="justify-between border-b-4 border-black">
       <div className="flex justify-between flex-1">
         <div className="flex items-center">
-          <div className="inline-flex items-center mr-3">
+          {/* // TODO: Should preserve filter/sort
+              // Either injected service? Or context (like react router's `useLocation`?) */}
+          <div
+            className="inline-flex items-center mr-3"
+            onClick={() => history.push('/')}
+          >
             <Icon
               name="chevron-left"
               className="w-8 cursor-pointer text-primary-active"
-              onClick={() => alert('Navigate to previous page')}
             />
-            <a href="#" className="ml-4">
+            <div className="ml-4 cursor-pointer">
               <Svg name="logo-ohif" />
-            </a>
+            </div>
           </div>
         </div>
         <div className="flex items-center">{children}</div>

modes/example/src/index.js

@@ -1,6 +1,7 @@
 export default function mode({ modeConfiguration }) {
   return {
     id: 'example-mode',
+    displayName: 'Basic Viewer',
     validationTags: {
       study: [],
       series: [],

modes/longitudinal/src/index.js

@@ -20,6 +20,7 @@ export default function mode({ modeConfiguration }) {
     // TODO: We're using this as a route segment
     // We should not be.
     id: 'longitudinal-workflow',
+    displayName: 'Comparison',
     validationTags: {
       study: [],
       series: [],

platform/ui/src/assets/icons/launch-arrow.svg

@@ -1,7 +1,7 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <g fill="currentColor" fill-rule="evenodd">
-        <circle cx="12" cy="12" r="12" fill="currentColor"/>
-        <path fill="#000" fill-rule="nonzero" d="M17.207 10.793c.36.36.388.928.083 1.32l-.083.094-5 5c-.39.39-1.024.39-1.414 0-.36-.36-.388-.928-.083-1.32l.083-.094 4.292-4.293-4.292-4.293c-.36-.36-.388-.928-.083-1.32l.083-.094c.36-.36.928-.388 1.32-.083l.094.083 5 5z"/>
-        <path fill="#000" fill-rule="nonzero" d="M17.5 11.5c0 .513-.386.936-.883.993l-.117.007H6c-.552 0-1-.448-1-1 0-.513.386-.936.883-.993L6 10.5h10.5c.552 0 1 .448 1 1z"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <g fill-rule="evenodd">
+        <circle cx="12" cy="12" r="12" fill="currentColor" fill-opacity="0.2"/>
+        <path fill="currentcolor" fill-rule="nonzero" d="M17.207 10.793c.36.36.388.928.083 1.32l-.083.094-5 5c-.39.39-1.024.39-1.414 0-.36-.36-.388-.928-.083-1.32l.083-.094 4.292-4.293-4.292-4.293c-.36-.36-.388-.928-.083-1.32l.083-.094c.36-.36.928-.388 1.32-.083l.094.083 5 5z"/>
+        <path fill="currentcolor" fill-rule="nonzero" d="M17.5 11.5c0 .513-.386.936-.883.993l-.117.007H6c-.552 0-1-.448-1-1 0-.513.386-.936.883-.993L6 10.5h10.5c.552 0 1 .448 1 1z"/>
     </g>
 </svg>

platform/viewer/src/routes/WorkList/WorkList.jsx

@@ -310,23 +310,33 @@ function WorkList({ history, data: studies, dataSource }) {
               : []
           }
         >
-          <Button
-            rounded="full"
-            variant="outlined"
-            disabled={true}
-            endIcon={<Icon name="launch-info" />}
-            className="font-bold"
-          >
-            Comparison
-          </Button>
-          <Button
-            rounded="full"
-            variant="outlined"
-            endIcon={<Icon name="launch-info" />}
-            className="ml-4 font-bold"
-          >
-            View: Segmentation
-          </Button>
+          {appConfig.modes.map((mode, i) => {
+            const isFirst = i === 0;
+
+            // TODO: Homes need a default/target route? We mostly support a single one for now.
+            // We should also be using the route path, but currently are not
+            // mode.id
+            // mode.routes[x].path
+            // Don't specify default data source, and it should just be picked up... (this may not currently be the case)
+            // How do we know which params to pass? Today, it's just StudyInstanceUIDs
+            return (
+              <Link
+                key={i}
+                to={`${mode.id}?StudyInstanceUIDs=${studyInstanceUid}`}
+                // to={`${mode.id}/dicomweb?StudyInstanceUIDs=${studyInstanceUid}`}
+              >
+                <Button
+                  rounded="full"
+                  variant="contained" // outlined
+                  disabled={false}
+                  endIcon={<Icon name="launch-arrow" />} // launch-arrow | launch-info
+                  className={classnames('font-bold', { 'ml-2': !isFirst })}
+                >
+                  {mode.displayName}
+                </Button>
+              </Link>
+            );
+          })}
         </StudyListExpandedRow>
       ),
       onClickRow: () =>