feat: 🎸 Improve usability of Google Cloud adapter, including direct routes to studies (#989)

platform/viewer/src/routes/IHEInvokeImageDisplay.js

@@ -1,29 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
-import queryString from 'query-string';
 import ConnectedViewerRetrieveStudyData from '../connectedComponents/ConnectedViewerRetrieveStudyData.js';
-
-function decodeStudyUids(studyUids) {
-  const decodedData = window.atob(studyUids);
-
-  return decodedData.split(';');
-}
-
-function getQueryParameters(location) {
-  if (location) {
-    return queryString.parse(location.search);
-  }
-
-  return {};
-}
+import OHIF from '@ohif/core';
+const { urlUtil: UrlUtil } = OHIF.utils;
 
 function IHEInvokeImageDisplay({ location }) {
   const {
     // patientID,
     requestType,
     studyUID,
-  } = getQueryParameters(location);
+  } = UrlUtil.parse(location.search);
 
   switch (requestType) {
     case 'STUDY':
@@ -36,7 +23,7 @@ function IHEInvokeImageDisplay({ location }) {
     case 'STUDYBASE64':
       return (
         <ConnectedViewerRetrieveStudyData
-          studyInstanceUids={decodeStudyUids(studyUID)}
+          studyInstanceUids={UrlUtil.paramString.parseParam(studyUID)}
         />
       );
 

platform/viewer/src/routes/ViewerRouting.js

@@ -1,26 +1,47 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ConnectedViewerRetrieveStudyData from '../connectedComponents/ConnectedViewerRetrieveStudyData';
+import useServer from '../customHooks/useServer';
+import OHIF from '@ohif/core';
+const { urlUtil: UrlUtil } = OHIF.utils;
 
-function ViewerRouting({ match }) {
-  const { studyInstanceUids, seriesInstanceUids } = match.params;
+/**
+ * Get array of seriesUIDs from param or from queryString
+ * @param {*} seriesInstanceUIDs
+ * @param {*} location
+ */
+const getSeriesInstanceUIDs = (seriesInstanceUIDs, routeLocation) => {
+  const queryFilters = UrlUtil.queryString.getQueryFilters(routeLocation);
+  const querySeriesUIDs = queryFilters && queryFilters['SeriesInstanceUID'];
+  const _seriesInstanceUIDs = seriesInstanceUIDs || querySeriesUIDs;
 
-  let studyUIDs;
-  let seriesUIDs;
+  return UrlUtil.paramString.parseParam(_seriesInstanceUIDs);
+};
 
-  if (studyInstanceUids && !seriesInstanceUids) {
-    studyUIDs = studyInstanceUids.split(';');
-  } else if (studyInstanceUids && seriesInstanceUids) {
-    studyUIDs = [studyInstanceUids];
-    seriesUIDs = match.params.seriesInstanceUids.split(';');
+function ViewerRouting({ match: routeMatch, location: routeLocation }) {
+  const {
+    project,
+    location,
+    dataset,
+    dicomStore,
+    studyInstanceUids,
+    seriesInstanceUids,
+  } = routeMatch.params;
+  const server = useServer({ project, location, dataset, dicomStore });
+
+  const studyUIDs = UrlUtil.paramString.parseParam(studyInstanceUids);
+  const seriesUIDs = getSeriesInstanceUIDs(seriesInstanceUids, routeLocation);
+
+  if (server && studyUIDs) {
+    return (
+      <ConnectedViewerRetrieveStudyData
+        studyInstanceUids={studyUIDs}
+        seriesInstanceUids={seriesUIDs}
+      />
+    );
   }
 
-  return (
-    <ConnectedViewerRetrieveStudyData
-      studyInstanceUids={studyUIDs}
-      seriesInstanceUids={seriesUIDs}
-    />
-  );
+  return null;
 }
 
 ViewerRouting.propTypes = {
@@ -28,6 +49,10 @@ ViewerRouting.propTypes = {
     params: PropTypes.shape({
       studyInstanceUids: PropTypes.string.isRequired,
       seriesInstanceUids: PropTypes.string,
+      dataset: PropTypes.string,
+      dicomStore: PropTypes.string,
+      location: PropTypes.string,
+      project: PropTypes.string,
     }),
   }),
 };

platform/viewer/src/routes/routesUtil.js

@@ -0,0 +1,114 @@
+import asyncComponent from '../components/AsyncComponent.js';
+
+import OHIF from '@ohif/core';
+const { urlUtil: UrlUtil } = OHIF.utils;
+
+// Dynamic Import Routes (CodeSplitting)
+const IHEInvokeImageDisplay = asyncComponent(() =>
+  import(
+    /* webpackChunkName: "IHEInvokeImageDisplay" */ './IHEInvokeImageDisplay.js'
+  )
+);
+const ViewerRouting = asyncComponent(() =>
+  import(/* webpackChunkName: "ViewerRouting" */ './ViewerRouting.js')
+);
+
+const StudyListRouting = asyncComponent(() =>
+  import(
+    /* webpackChunkName: "StudyListRouting" */ '../studylist/StudyListRouting.js'
+  )
+);
+const StandaloneRouting = asyncComponent(() =>
+  import(/* webpackChunkName: "StandaloneRouting" */ './StandaloneRouting.js')
+);
+const ViewerLocalFileData = asyncComponent(() =>
+  import(
+    /* webpackChunkName: "ViewerLocalFileData" */ '../connectedComponents/ViewerLocalFileData.js'
+  )
+);
+
+const reload = () => window.location.reload();
+
+const ROUTES_DEF = {
+  default: {
+    viewer: {
+      path: '/viewer/:studyInstanceUids',
+      component: ViewerRouting,
+    },
+    standaloneViewer: {
+      path: '/viewer',
+      component: StandaloneRouting,
+    },
+    list: {
+      path: ['/studylist', '/'],
+      component: StudyListRouting,
+      condition: appConfig => {
+        return appConfig.showStudyList !== undefined
+          ? appConfig.showStudyList
+          : true;
+      },
+    },
+    local: {
+      path: '/local',
+      component: ViewerLocalFileData,
+    },
+    IHEInvokeImageDisplay: {
+      path: '/IHEInvokeImageDisplay',
+    },
+  },
+  gcloud: {
+    viewer: {
+      path:
+        '/projects/:project/locations/:location/datasets/:dataset/dicomStores/:dicomStore/study/:studyInstanceUids',
+      component: ViewerRouting,
+      condition: appConfig => {
+        return !!appConfig.enableGoogleCloudAdapter;
+      },
+    },
+  },
+};
+
+const getRoutes = appConfig => {
+  const routes = [];
+  for (let keyConfig in ROUTES_DEF) {
+    const routesConfig = ROUTES_DEF[keyConfig];
+
+    for (let routeKey in routesConfig) {
+      const route = routesConfig[routeKey];
+      const validRoute =
+        typeof route.condition === 'function'
+          ? route.condition(appConfig)
+          : true;
+
+      if (validRoute) {
+        routes.push({
+          path: route.path,
+          Component: route.component,
+        });
+      }
+    }
+  }
+
+  return routes;
+};
+
+const parseViewerPath = (appConfig = {}, server = {}, params) => {
+  let viewerPath = ROUTES_DEF.default.viewer.path;
+  if (appConfig.enableGoogleCloudAdapter) {
+    viewerPath = ROUTES_DEF.gcloud.viewer.path;
+  }
+
+  const _paramsCopy = Object.assign({}, server, params);
+
+  for (let key in _paramsCopy) {
+    viewerPath = UrlUtil.paramString.replaceParam(
+      viewerPath,
+      key,
+      _paramsCopy[key]
+    );
+  }
+
+  return viewerPath;
+};
+
+export { getRoutes, parseViewerPath, reload };