fix(misc): Update the data source name, provide a /datasources example customization for debug (#3036)

* fix(misc):Update the data source name, provide  a /datasources

Update the imports for a few things to match, to avoid 2 versions

Fix the datasources name

pr:Make the data source selector configurable

* Updated data source selector page as requested

* PR fixes

extensions/cornerstone-dicom-sr/package.json

@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@babel/runtime": "7.16.3",
-    "classnames": "^2.2.6",
+    "classnames": "^2.3.2",
     "@cornerstonejs/core": "^0.27.1",
     "@cornerstonejs/tools": "^0.36.3"
   }

extensions/cornerstone/package.json

@@ -39,7 +39,7 @@
     "react-resize-detector": "^6.7.6"
   },
   "devDependencies": {
-    "lodash": "4.17.21"
+    "lodash": "^4.17.21"
   },
   "dependencies": {
     "@babel/runtime": "7.17.9",

extensions/default/src/Panels/DataSourceSelector.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import classnames from 'classnames';
+import { useNavigate } from 'react-router-dom';
+import { useAppConfig } from '@state';
+
+import { Button } from '@ohif/ui';
+
+function DataSourceSelector() {
+  const [appConfig] = useAppConfig();
+  const navigate = useNavigate();
+
+  // This is frowned upon, but the raw config is needed here to provide
+  // the selector
+  const dsConfigs = appConfig.dataSources;
+
+  return (
+    <div style={{ width: '100%', height: '100%' }}>
+      <div className="h-screen w-screen flex justify-center items-center ">
+        <div className="py-8 px-8 mx-auto bg-secondary-dark drop-shadow-md space-y-2 rounded-lg">
+          <img
+            className="block mx-auto h-14"
+            src="./ohif-logo.svg"
+            alt="OHIF"
+          />
+          <div className="text-center space-y-2 pt-4">
+            {dsConfigs
+              .filter(
+                it =>
+                  it.sourceName !== 'dicomjson' &&
+                  it.sourceName !== 'dicomlocal'
+              )
+              .map(ds => (
+                <div key={ds.sourceName}>
+                  <h1 className="text-white">{ds.friendlyName}</h1>
+                  <Button
+                    className={classnames('font-bold', 'ml-2')}
+                    onClick={() => {
+                      navigate({
+                        pathname: '/',
+                        search: `datasources=${ds.sourceName}`,
+                      });
+                    }}
+                  >
+                    {ds.sourceName}
+                  </Button>
+                  <br />
+                </div>
+              ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default DataSourceSelector;

extensions/default/src/ViewerLayout/index.tsx

@@ -44,7 +44,7 @@ function ViewerLayout({
     const search =
       dataSourceIdx === -1
         ? undefined
-        : `datasourcename=${pathname.substring(dataSourceIdx + 1)}`;
+        : `datasources=${pathname.substring(dataSourceIdx + 1)}`;
     navigate({
       pathname: '/',
       search,

extensions/default/src/getCustomizationModule.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import DataSourceSelector from './Panels/DataSourceSelector';
 
 /**
  *
@@ -25,5 +26,19 @@ export default function getCustomizationModule() {
         ],
       },
     },
+
+    // Example customization to list a set of datasources
+    {
+      name: 'datasources',
+      value: {
+        id: 'customRoutes',
+        routes: [
+          {
+            path: '/datasources',
+            children: DataSourceSelector,
+          },
+        ],
+      },
+    },
   ];
 }

extensions/dicom-pdf/package.json

@@ -38,6 +38,6 @@
   },
   "dependencies": {
     "@babel/runtime": "7.7.6",
-    "classnames": "^2.2.6"
+    "classnames": "^2.3.2"
   }
 }

extensions/dicom-video/package.json

@@ -38,6 +38,6 @@
   },
   "dependencies": {
     "@babel/runtime": "7.7.6",
-    "classnames": "^2.2.6"
+    "classnames": "^2.3.2"
   }
 }

extensions/measurement-tracking/package.json

@@ -31,7 +31,7 @@
   },
   "peerDependencies": {
     "@ohif/core": "^3.0.0",
-    "classnames": "^2.2.6",
+    "classnames": "^2.3.2",
     "@cornerstonejs/core": "^0.27.1",
     "@cornerstonejs/tools": "^0.36.3",
     "@ohif/extension-cornerstone-dicom-sr": "^3.0.0",

extensions/tmtv/package.json

@@ -38,6 +38,6 @@
   },
   "dependencies": {
     "@babel/runtime": "7.7.6",
-    "classnames": "^2.2.6"
+    "classnames": "^2.3.2"
   }
 }

platform/docs/package.json

@@ -37,7 +37,7 @@
     "@docusaurus/plugin-google-gtag": "2.0.1",
     "@mdx-js/react": "^1.6.21",
     "@svgr/webpack": "^5.5.0",
-    "classnames": "^2.3.1",
+    "classnames": "^2.3.2",
     "clsx": "^1.1.1",
     "file-loader": "^6.2.0",
     "plugin-image-zoom": "ataft/plugin-image-zoom",

platform/ui/package.json

@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "browser-detect": "^0.2.28",
-    "classnames": "2.2.6",
+    "classnames": "^2.3.2",
     "lodash.debounce": "4.0.8",
     "moment": "2.24.0",
     "mousetrap": "^1.6.5",

platform/viewer/package.json

@@ -49,8 +49,8 @@
     "@babel/runtime": "7.16.3",
     "@ohif/core": "^3.0.0",
     "@ohif/extension-cornerstone": "^3.0.0",
-    "@ohif/extension-cornerstone-dicom-sr": "^3.0.0",
     "@ohif/extension-cornerstone-dicom-seg": "^3.0.0",
+    "@ohif/extension-cornerstone-dicom-sr": "^3.0.0",
     "@ohif/extension-default": "^3.0.0",
     "@ohif/extension-dicom-pdf": "^3.0.1",
     "@ohif/extension-dicom-video": "^3.0.1",
@@ -58,12 +58,13 @@
     "@ohif/mode-basic-dev-mode": "^3.0.0",
     "@ohif/mode-longitudinal": "^3.0.0",
     "@ohif/ui": "^2.0.0",
-    "@types/react": "^16.0.0",
+    "@types/react": "^17.0.38",
-    "classnames": "^2.2.6",
+    "classnames": "^2.3.2",
     "config-point": "^0.4.8",
     "core-js": "^3.16.1",
     "cornerstone-math": "^0.1.9",
     "cornerstone-wado-image-loader": "^4.2.1",
+    "dayjs": "^1.11.6",
     "dcmjs": "^0.28.3",
     "detect-gpu": "^4.0.16",
     "dicom-parser": "^1.8.9",
@@ -73,7 +74,6 @@
     "i18next": "^17.0.3",
     "i18next-browser-languagedetector": "^3.0.1",
     "lodash.isequal": "4.5.0",
-    "moment": "^2.24.0",
     "oidc-client": "1.11.5",
     "prop-types": "^15.7.2",
     "query-string": "^6.12.1",
@@ -86,12 +86,13 @@
     "react-router-dom": "^6.3.0"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@percy/cypress": "^3.1.1",
     "cypress": "^9.5.4",
     "cypress-file-upload": "^3.5.3",
-    "identity-obj-proxy": "3.0.x",
-    "lodash": "4.17.15",
     "glob": "^8.0.3",
+    "identity-obj-proxy": "3.0.x",
+    "lodash": "^4.17.21",
     "tailwindcss": "3.2.4",
     "terser-webpack-plugin": "^5.1.1",
     "webpack": "^5.50.0",

platform/viewer/public/config/multiple.js

@@ -1,7 +1,7 @@
 window.config = {
   routerBasename: '/',
   customizationService: [
-    '@ohif/extension-default.customizationModule.helloPage',
+    '@ohif/extension-default.customizationModule.datasources',
     {
       id: 'class:StudyBrowser',
       true: 'black',
@@ -43,8 +43,8 @@ window.config = {
       sourceName: 'aws',
       configuration: {
         name: 'aws',
-        qidoRoot: 'https://viewer.flexview.ai/dicomweb',
+        qidoRoot: 'https://dd32w2rfebxel.cloudfront.net/dicomweb',
-        wadoRoot: 'https://viewer.flexview.ai/dicomweb',
+        wadoRoot: 'https://dd32w2rfebxel.cloudfront.net/dicomweb',
         qidoSupportsIncludeField: false,
         supportsReject: false,
         supportsStow: false,

platform/viewer/src/routes/DataSourceWrapper.tsx

@@ -20,9 +20,7 @@ function DataSourceWrapper(props) {
   const location = useLocation();
 
   // TODO - get the variable from the props all the time...
-  let dataSourceName = new URLSearchParams(location.search).get(
+  let dataSourceName = new URLSearchParams(location.search).get('datasources');
-    'datasourcename'
-  );
   const dataPath = dataSourceName ? `/${dataSourceName}` : '';
 
   if (!dataSourceName && window.config.defaultDataSourceName) {

platform/viewer/src/routes/WorkList/WorkList.tsx

@@ -498,7 +498,7 @@ const defaultFilterValues = {
   sortDirection: 'none',
   pageNumber: 1,
   resultsPerPage: 25,
-  datasourcename: '',
+  datasources: '',
 };
 
 function _tryParseInt(str, defaultValue) {
@@ -530,7 +530,7 @@ function _getQueryFilterValues(query) {
     sortDirection: query.get('sortDirection'),
     pageNumber: _tryParseInt(query.get('pageNumber'), undefined),
     resultsPerPage: _tryParseInt(query.get('resultsPerPage'), undefined),
-    datasourcename: query.get('datasourcename'),
+    datasources: query.get('datasources'),
   };
 
   // Delete null/undefined keys

platform/viewer/src/routes/index.tsx

@@ -74,6 +74,7 @@ const createRoutes = ({
           {...route.props}
           route={route}
           servicesManager={servicesManager}
+          extensionManager={extensionManager}
           hotkeysManager={hotkeysManager}
         />
       </ErrorBoundary>

yarn.lock

@@ -6283,10 +6283,10 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
-"@types/react@^16.0.0":
+"@types/react@^17.0.38":
-  version "16.14.26"
+  version "17.0.53"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.26.tgz#82540a240ba7207ebe87d9579051bc19c9ef7605"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.53.tgz#10d4d5999b8af3d6bc6a9369d7eb953da82442ab"
-  integrity sha512-c/5CYyciOO4XdFcNhZW1O2woVx86k4T+DO2RorHZL7EhitkNQgSD/SgpdZJAUJa/qjVgOmTM44gHkAdZSXeQuQ==
+  integrity sha512-1yIpQR2zdYu1Z/dc1OxC+MA6GR240u3gcnP4l6mvj/PJiVaqHsQPmWttsvHsfnhfPbU2FuGmo0wSITPygjBmsw==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -8791,16 +8791,16 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@2.2.6:
+classnames@^2.2.5:
-  version "2.2.6"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
-  integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
-
-classnames@^2.2.5, classnames@^2.2.6, classnames@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
   integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
 
+classnames@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+
 clean-css@^4.2.3:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.4.tgz#733bf46eba4e607c6891ea57c24a989356831178"
@@ -10245,6 +10245,11 @@ dayjs@^1.10.4:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.2.tgz#fa0f5223ef0d6724b3d8327134890cfe3d72fbe5"
   integrity sha512-F4LXf1OeU9hrSYRPTTj/6FbO4HTjPKXvEIC1P2kcnFurViINCVk3ZV0xAS3XVx9MkMsXbbqlK6hjseaYbgKEHw==
 
+dayjs@^1.11.6:
+  version "1.11.7"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.7.tgz#4b296922642f70999544d1144a2c25730fce63e2"
+  integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==
+
 dcmjs@^0.28.3:
   version "0.28.3"
   resolved "https://registry.yarnpkg.com/dcmjs/-/dcmjs-0.28.3.tgz#a756ab4b02363d12545c9830b8f97b5141723727"
@@ -15811,12 +15816,7 @@ lodash.uniq@4.5.0, lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
 
-lodash@4.17.15:
+lodash@^4.0.1, lodash@^4.1.1, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1:
-  version "4.17.15"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
-  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
-
-lodash@4.17.21, lodash@^4.0.1, lodash@^4.1.1, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==