feat(panel and auth): fix study panel to not rely on priors and add token param to url (#3381)

* fix: multiframe

* fix the unnecessary use of prior since some servers dont like it

* add authentication via token in url

* add data citation

* add resources

* upgrade packages

* yarn lock

* apply review comments

platform/core/package.json

@@ -32,7 +32,7 @@
   },
   "peerDependencies": {
     "cornerstone-math": "0.1.9",
-    "@cornerstonejs/dicom-image-loader": "^0.4.0",
+    "@cornerstonejs/dicom-image-loader": "^0.6.4",
     "@cornerstonejs/codec-charls": "^1.2.3",
     "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
     "@cornerstonejs/codec-openjpeg": "^1.2.2",

platform/core/src/classes/MetadataProvider.js

@@ -481,6 +481,9 @@ class MetadataProvider {
       imageURI = imageIdToURI(imageId);
     }
 
+    // remove &frame=number from imageId
+    imageURI = imageURI.split('&frame=')[0];
+
     const uids = this.imageURIToUIDs.get(imageURI);
     let frameNumber = this.getFrameInformationFromURL(imageId) || '1';
 

platform/core/src/services/CustomizationService/CustomizationService.ts

@@ -63,7 +63,7 @@ export default class CustomizationService extends PubSubService {
 
   modeCustomizations: Record<string, Customization> = {};
   globalCustomizations: Record<string, Customization> = {};
-  configuration: CustomizationConfiguration;
+  configuration: any;
 
   constructor({ configuration, commandsManager }) {
     super(EVENTS);

platform/docs/docs/deployment/authorization.md

@@ -0,0 +1,67 @@
+---
+sidebar_position: 8
+sidebar_label: Authorization
+---
+
+# Authorization
+The OHIF Viewer can be configured to work with authorization servers that support one or more of the OpenID-Connect authorization flows. The Viewer finds it's OpenID-Connect settings on the oidc configuration key. You can set these values in your configuration files. For instance you can take a look at our
+`google.js` configuration file.
+
+
+```js
+oidc: [
+    {
+      // ~ REQUIRED
+      // Authorization Server URL
+      authority: 'https://accounts.google.com',
+      client_id:
+        '723928408739-k9k9r3i44j32rhu69vlnibipmmk9i57p.apps.googleusercontent.com',
+      redirect_uri: '/callback',
+      response_type: 'id_token token',
+      scope:
+        'email profile openid https://www.googleapis.com/auth/cloudplatformprojects.readonly https://www.googleapis.com/auth/cloud-healthcare', // email profile openid
+      // ~ OPTIONAL
+      post_logout_redirect_uri: '/logout-redirect.html',
+      revoke_uri: 'https://accounts.google.com/o/oauth2/revoke?token=',
+      automaticSilentRenew: true,
+      revokeAccessTokenOnSignout: true,
+    },
+  ],
+```
+
+You need to provide the following information:
+- authority: The URL of the authorization server.
+- client_id: The client id of your application (provided by the authorization server).
+- redirect_uri: The callback URL of your application.
+- response_type: The response type of the authorization flow (e.g. id_token token, [learn more about different flows](https://darutk.medium.com/diagrams-of-all-the-openid-connect-flows-6968e3990660)).
+- scope: The scopes that your application needs to access
+- post_logout_redirect_uri: The URL that the user will be redirected to after logout.
+- revoke_uri: The URL that the user will be redirected to after logout.
+- automaticSilentRenew: If true, the user will be automatically logged in after the token expires.
+- revokeAccessTokenOnSignout: If true, the access token will be revoked on logout.
+
+
+
+## How it works
+The Viewer uses the `userAuthenticationService` to set the OpenID-Connect settings. The `userAuthenticationService` is a singleton service that is responsible for authentication and authorization. It is initialized by the app and you can grab it
+from the `servicesManager`
+
+```js
+const userAuthenticationService = servicesManager.services.userAuthenticationService;
+```
+
+Then the userAuthenticationService will inject the token as Authorization header in the requests that are sent to the server (both metadata
+and pixelData).
+
+
+## Token based authentication
+Sometimes (although not recommended), some servers like to send the token
+in the query string. In this case, the viewer will automatically grab the token from the query string
+and add it to the userAuthenticationService and remove it from the query string (to prevent it from being logged in the console
+in future requests).
+
+and example would be
+
+```js
+http://localhost:3000/viewer?StudyInstanceUIDs=1.2.3.4.5.6.6.7&token=e123125jsdfahsdf
+```

platform/docs/docs/resources.md

@@ -9,6 +9,23 @@ Throughout the development of the OHIF Viewer, we have participated in various
 conferences and "hackathons". In this page, we will provide the presentations
 and other resources that we have provided to the community in the past:
 
+## 2023
+### SIIM 2023 Tech Tools Webinar |  April 12th, 2023
+
+Free, Open Source Tools for Research: MONAI and OHIF Viewer
+[[Slides](https://docs.google.com/presentation/d/1afJ5Y9Tzukgn7eAbaO1oiCtN7XvIimFdmZP-HcOUofA/edit?usp=sharing)][[Video](https://www.youtube.com/watch?v=lo8J5w5jUJI)]
+
+
+### [NA-MIC Project Week 38th 2023 - Remote]
+
+We participated in the 38th Project Week with three projects around OHIF. [[Website](https://projectweek.na-mic.org/PW38_2023_GranCanaria/)]
+
+- PolySeg representations for OHIF Viewer ([link](https://projectweek.na-mic.org/PW38_2023_GranCanaria/Projects/OHIF_PolySeg/))
+- Cross study sychronizer for OHIF Crosshair ([link](https://projectweek.na-mic.org/PW38_2023_GranCanaria/Projects/OHIF_SyncCrosshair/))
+- DATSCAN Viewer implementation in OHIF ([link](https://projectweek.na-mic.org/PW38_2023_GranCanaria/Projects/OHIF_DATSCAN/))
+
+
+
 ## 2022
 
 ### OHIF Demo to Interns

platform/viewer/package.json

@@ -68,7 +68,7 @@
     "config-point": "^0.4.8",
     "core-js": "^3.16.1",
     "cornerstone-math": "^0.1.9",
-    "@cornerstonejs/dicom-image-loader": "^0.4.0",
+    "@cornerstonejs/dicom-image-loader": "^0.6.4",
     "@cornerstonejs/codec-charls": "^1.2.3",
     "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
     "@cornerstonejs/codec-openjpeg": "^1.2.2",

platform/viewer/src/routes/Mode/Mode.tsx

@@ -99,7 +99,6 @@ export default function ModeRoute({
   const params = useParams();
   const searchParams = useSearchParams();
 
-  const runTimeHangingProtocolId = searchParams.get('hangingprotocolid');
   const [studyInstanceUIDs, setStudyInstanceUIDs] = useState();
 
   const [refresh, setRefresh] = useState(false);
@@ -123,6 +122,7 @@ export default function ModeRoute({
   const {
     displaySetService,
     hangingProtocolService,
+    userAuthenticationService,
   } = (servicesManager as ServicesManager).services;
 
   const {
@@ -131,6 +131,34 @@ export default function ModeRoute({
     hotkeys: hotkeyObj,
     hangingProtocol,
   } = mode;
+
+  const runTimeHangingProtocolId = searchParams.get('hangingprotocolid');
+  const token = searchParams.get('token');
+
+  if (token) {
+    // if a token is passed in, set the userAuthenticationService to use it
+    // for the Authorization header for all requests
+    userAuthenticationService.setServiceImplementation({
+      getAuthorizationHeader: () => ({
+        Authorization: 'Bearer ' + token,
+      }),
+    });
+
+    // Create a URL object with the current location
+    const urlObj = new URL(
+      window.location.origin + location.pathname + location.search
+    );
+
+    // Remove the token from the URL object
+    urlObj.searchParams.delete('token');
+    const cleanUrl = urlObj.toString();
+
+    // Update the browser's history without the token
+    if (window.history && window.history.replaceState) {
+      window.history.replaceState(null, '', cleanUrl);
+    }
+  }
+
   // Preserve the old array interface for hotkeys
   const hotkeys = Array.isArray(hotkeyObj) ? hotkeyObj : hotkeyObj?.hotkeys;
   const hotkeyName = hotkeyObj?.name || 'hotkey-definitions-v2';