feat(URL): add param for initial series and sop uids to display (#3265)

* feat: Allow navigating to a specified series and sop instance

This was a feature in OHIF v2, so adding it to v3, albeit with new
parameters.

feat: Allow comma separated as well as repeated args params

* docs

* Test fixes

* feat: Navigate to SOP selected - PR fixes

* Updated docs

* PR fixes

platform/viewer/cypress/integration/customization/HangingProtocol.spec.js

@@ -1,5 +1,5 @@
 describe('OHIF HP', () => {
-  beforeEach(() => {
+  const beforeSetup = () => {
     cy.checkStudyRouteInViewer(
       '1.3.6.1.4.1.25403.345050719074.3824.20170125113417.1',
       '&hangingProtocolId=@ohif/hp-extension.mn'
@@ -7,15 +7,19 @@ describe('OHIF HP', () => {
     cy.expectMinimumThumbnails(3);
     cy.initCornerstoneToolsAliases();
     cy.initCommonElementsAliases();
-  });
+  };
 
   it('Should display 3 up', () => {
+    beforeSetup();
+
     cy.get('[data-cy="viewport-pane"]')
       .its('length')
       .should('be.eq', 3);
   });
 
   it('Should navigate next/previous stage', () => {
+    beforeSetup();
+
     cy.get('body').type(',');
     cy.wait(250);
     cy.get('[data-cy="viewport-pane"]')
@@ -28,4 +32,19 @@ describe('OHIF HP', () => {
       .its('length')
       .should('be.eq', 2);
   });
+
+  it('Should navigate to display set specified', () => {
+    // This filters by series instance UID, meaning there will only be 1 thumbnail
+    // It applies the initial SOP instance, navigating to that image
+    cy.checkStudyRouteInViewer(
+      '1.3.6.1.4.1.25403.345050719074.3824.20170125113417.1',
+      '&SeriesInstanceUID=1.3.6.1.4.1.25403.345050719074.3824.20170125113545.4&initialSopInstanceUID=1.3.6.1.4.1.25403.345050719074.3824.20170125113546.1'
+    );
+    cy.expectMinimumThumbnails(1);
+    cy.initCornerstoneToolsAliases();
+    cy.initCommonElementsAliases();
+
+    // The specified series/sop UID's are index 101, so ensure that image is displayed
+    cy.get('@viewportInfoTopRight').should('contains.text', 'I:6');
+  });
 });

platform/viewer/src/components/ViewportGrid.tsx

@@ -99,9 +99,10 @@ function ViewerViewportGrid(props) {
       return {
         displaySetInstanceUIDs: displaySetUIDsToHang,
         displaySetOptions: displaySetUIDsToHangOptions,
-        viewportOptions: {
-          ...viewportOptions,
-        },
+        viewportOptions: hangingProtocolService.getComputedOptions(
+          viewportOptions,
+          displaySetUIDsToHang
+        ),
       };
     };
 

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

@@ -279,8 +279,10 @@ export default function ModeRoute({
       const filters =
         Array.from(query.keys()).reduce(
           (acc: Record<string, string>, val: string) => {
-            if (val !== 'StudyInstanceUIDs') {
-              if (['seriesInstanceUID', 'SeriesInstanceUID'].includes(val)) {
+            const lowerVal = val.toLowerCase();
+            if (lowerVal !== 'studyinstanceuids') {
+              // Not sure why the case matters here - it doesn't in the URL
+              if (lowerVal === 'seriesinstanceuid') {
                 return {
                   ...acc,
                   seriesInstanceUID: query.get(val),