@ohif/app 3.7.0-beta.61 → 3.7.0-beta.63

package/dist/{362.bundle.9d4d81eab3e31314a932.js → 362.bundle.11a6a0792b8042b5c81b.js}

@@ -29,8 +29,8 @@ __webpack_require__.d(utils_namespaceObject, {
 
 // EXTERNAL MODULE: ../../../node_modules/dicomweb-client/build/dicomweb-client.es.js
 var dicomweb_client_es = __webpack_require__(97604);
-// EXTERNAL MODULE: ../../core/src/index.ts + 106 modules
-var src = __webpack_require__(38930);
+// EXTERNAL MODULE: ../../core/src/index.ts + 107 modules
+var src = __webpack_require__(3854);
 // EXTERNAL MODULE: ../../core/src/utils/sortStudy.ts
 var sortStudy = __webpack_require__(62971);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/DicomWebDataSource/qido.js
@@ -2055,7 +2055,7 @@ var es = __webpack_require__(69190);
 // EXTERNAL MODULE: ../node_modules/react-router/dist/index.js
 var react_router_dist = __webpack_require__(85066);
 // EXTERNAL MODULE: ../../ui/src/index.js + 458 modules
-var ui_src = __webpack_require__(33570);
+var ui_src = __webpack_require__(88344);
 // EXTERNAL MODULE: ../../i18n/src/index.js + 98 modules
 var i18n_src = __webpack_require__(43040);
 // EXTERNAL MODULE: ./state/index.js + 1 modules
@@ -2211,8 +2211,8 @@ function ViewerLayout(_ref) {
     hotkeyDefinitions,
     hotkeyDefaults
   } = hotkeysManager;
-  const versionNumber = "3.7.0-beta.61";
-  const commitHash = "35fc30c5359d8199cc38ffa670c08687d2672f11";
+  const versionNumber = "3.7.0-beta.63";
+  const commitHash = "9045ddaedca2eb852d8e0652dc6c403db12ce05b";
   const menuOptions = [{
     title: t('Header:About'),
     icon: 'info',
@@ -2346,7 +2346,7 @@ function ViewerLayout(_ref) {
   }, /*#__PURE__*/react.createElement(Toolbar, {
     servicesManager: servicesManager
   })))), /*#__PURE__*/react.createElement("div", {
-    className: "bg-black flex flex-row items-stretch w-full overflow-hidden flex-nowrap relative",
+    className: "relative flex w-full flex-row flex-nowrap items-stretch overflow-hidden bg-black",
     style: {
       height: 'calc(100vh - 52px'
     }
@@ -2360,9 +2360,9 @@ function ViewerLayout(_ref) {
     tabs: leftPanelComponents,
     servicesManager: servicesManager
   })) : null, /*#__PURE__*/react.createElement("div", {
-    className: "flex flex-col flex-1 h-full"
+    className: "flex h-full flex-1 flex-col"
   }, /*#__PURE__*/react.createElement("div", {
-    className: "flex items-center justify-center flex-1 h-full overflow-hidden bg-black relative"
+    className: "relative flex h-full flex-1 items-center justify-center overflow-hidden bg-black"
   }, /*#__PURE__*/react.createElement(ui_src/* ErrorBoundary */.SV, {
     context: "Grid"
   }, /*#__PURE__*/react.createElement(ViewportGridComp, {
@@ -2464,7 +2464,7 @@ function PanelStudyBrowser(_ref) {
     StudyInstanceUIDs
   } = (0,ui_src/* useImageViewer */.zG)();
   const [{
-    activeViewportIndex,
+    activeViewportId,
     viewports
   }, viewportGridService] = (0,ui_src/* useViewportGrid */.O_)();
   const [activeTabName, setActiveTabName] = (0,react.useState)('primary');
@@ -2475,9 +2475,9 @@ function PanelStudyBrowser(_ref) {
   const isMounted = (0,react.useRef)(true);
   const onDoubleClickThumbnailHandler = displaySetInstanceUID => {
     let updatedViewports = [];
-    const viewportIndex = activeViewportIndex;
+    const viewportId = activeViewportId;
     try {
-      updatedViewports = hangingProtocolService.getViewportsRequireUpdate(viewportIndex, displaySetInstanceUID);
+      updatedViewports = hangingProtocolService.getViewportsRequireUpdate(viewportId, displaySetInstanceUID);
     } catch (error) {
       console.warn(error);
       uiNotificationService.show({
@@ -2636,7 +2636,7 @@ function PanelStudyBrowser(_ref) {
       requestDisplaySetCreationForStudy(displaySetService, StudyInstanceUID, madeInClient);
     }
   }
-  const activeDisplaySetInstanceUIDs = viewports[activeViewportIndex]?.displaySetInstanceUIDs;
+  const activeDisplaySetInstanceUIDs = viewports.get(activeViewportId)?.displaySetInstanceUIDs;
   return /*#__PURE__*/react.createElement(ui_src/* StudyBrowser */.eX, {
     tabs: tabs,
     servicesManager: servicesManager,
@@ -3023,7 +3023,7 @@ function createReportDialogPrompt(uiDialogService, _ref) {
           };
           return /*#__PURE__*/react.createElement(react.Fragment, null, dataSourcesOpts.length > 1 && /*#__PURE__*/react.createElement(ui_src/* Select */.Ph, {
             closeMenuOnSelect: true,
-            className: "mr-2 bg-black border-primary-main",
+            className: "border-primary-main mr-2 bg-black",
             options: dataSourcesOpts,
             placeholder: dataSourcesOpts.find(option => option.value === value.dataSourceName).placeHolder,
             value: value.dataSourceName,
@@ -3038,7 +3038,7 @@ function createReportDialogPrompt(uiDialogService, _ref) {
             autoFocus: true,
             label: "Enter the report name",
             labelClassName: "text-white text-[14px] leading-[1.2]",
-            className: "bg-black border-primary-main",
+            className: "border-primary-main bg-black",
             type: "text",
             value: value.label,
             onChange: onChangeHandler,
@@ -3189,7 +3189,7 @@ function PanelMeasurementTable(_ref) {
   } = _ref;
   const [viewportGrid, viewportGridService] = (0,ui_src/* useViewportGrid */.O_)();
   const {
-    activeViewportIndex,
+    activeViewportId,
     viewports
   } = viewportGrid;
   const {
@@ -3232,7 +3232,7 @@ function PanelMeasurementTable(_ref) {
   }
   async function createReport() {
     // filter measurements that are added to the active study
-    const activeViewport = viewports[activeViewportIndex];
+    const activeViewport = viewports.get(activeViewportId);
     const measurements = measurementService.getMeasurements();
     const displaySet = displaySetService.getDisplaySetByUID(activeViewport.displaySetInstanceUIDs[0]);
     const trackedMeasurements = measurements.filter(m => displaySet.StudyInstanceUID === m.referenceStudyUID);
@@ -3267,7 +3267,7 @@ function PanelMeasurementTable(_ref) {
       uid,
       isActive
     } = _ref2;
-    measurementService.jumpToMeasurement(viewportGrid.activeViewportIndex, uid);
+    measurementService.jumpToMeasurement(viewportGrid.activeViewportId, uid);
     onMeasurementItemClickHandler({
       uid,
       isActive
@@ -3339,7 +3339,7 @@ function PanelMeasurementTable(_ref) {
             labelClassName: "text-white text-[14px] leading-[1.2]",
             autoFocus: true,
             id: "annotation",
-            className: "bg-black border-primary-main",
+            className: "border-primary-main bg-black",
             type: "text",
             value: value.label,
             onChange: onChangeHandler,
@@ -3373,7 +3373,7 @@ function PanelMeasurementTable(_ref) {
     }
   };
   return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
-    className: "overflow-x-hidden overflow-y-auto ohif-scrollbar",
+    className: "ohif-scrollbar overflow-y-auto overflow-x-hidden",
     "data-cy": 'measurements-panel'
   }, /*#__PURE__*/react.createElement(ui_src/* MeasurementTable */.wt, {
     title: "Measurements",
@@ -3960,7 +3960,7 @@ function getSopClassHandlerModule() {
 
 function ToolbarDivider() {
   return /*#__PURE__*/react.createElement("span", {
-    className: "self-center w-4 h-8 mx-2 border-l border-common-dark"
+    className: "border-common-dark mx-2 h-8 w-4 self-center border-l"
   });
 }
 ;// CONCATENATED MODULE: ../../../extensions/default/src/Toolbar/ToolbarLayoutSelector.tsx
@@ -4488,34 +4488,34 @@ function ColumnHeaders(_ref) {
     valueRef
   } = _ref;
   return /*#__PURE__*/react.createElement("div", {
-    className: classnames_default()('flex flex-row w-full bg-secondary-dark ohif-scrollbar overflow-y-scroll'),
+    className: classnames_default()('bg-secondary-dark ohif-scrollbar flex w-full flex-row overflow-y-scroll'),
     style: rowVerticalPaddingStyle
   }, /*#__PURE__*/react.createElement("div", {
-    className: "px-3 w-4/24"
+    className: "w-4/24 px-3"
   }, /*#__PURE__*/react.createElement("label", {
     ref: tagRef,
-    className: "flex flex-col flex-1 text-white text-lg pl-1 select-none"
+    className: "flex flex-1 select-none flex-col pl-1 text-lg text-white"
   }, /*#__PURE__*/react.createElement("span", {
     className: "flex flex-row items-center focus:outline-none"
   }, "Tag"))), /*#__PURE__*/react.createElement("div", {
-    className: "px-3 w-2/24"
+    className: "w-2/24 px-3"
   }, /*#__PURE__*/react.createElement("label", {
     ref: vrRef,
-    className: "flex flex-col flex-1 text-white text-lg pl-1 select-none"
+    className: "flex flex-1 select-none flex-col pl-1 text-lg text-white"
   }, /*#__PURE__*/react.createElement("span", {
     className: "flex flex-row items-center focus:outline-none"
   }, "VR"))), /*#__PURE__*/react.createElement("div", {
-    className: "px-3 w-6/24"
+    className: "w-6/24 px-3"
   }, /*#__PURE__*/react.createElement("label", {
     ref: keywordRef,
-    className: "flex flex-col flex-1 text-white text-lg pl-1 select-none"
+    className: "flex flex-1 select-none flex-col pl-1 text-lg text-white"
   }, /*#__PURE__*/react.createElement("span", {
     className: "flex flex-row items-center focus:outline-none"
   }, "Keyword"))), /*#__PURE__*/react.createElement("div", {
-    className: "px-3 w-5/24 grow"
+    className: "w-5/24 grow px-3"
   }, /*#__PURE__*/react.createElement("label", {
     ref: valueRef,
-    className: "flex flex-col flex-1 text-white text-lg pl-1 select-none"
+    className: "flex flex-1 select-none flex-col pl-1 text-lg text-white"
   }, /*#__PURE__*/react.createElement("span", {
     className: "flex flex-row items-center focus:outline-none"
   }, "Value"))));
@@ -4588,16 +4588,16 @@ function DicomTagTable(_ref2) {
         ...style,
         ...rowStyle
       },
-      className: classnames_default()('hover:bg-secondary-main transition duration-300 bg-black flex flex-row w-full border-secondary-light items-center text-base break-all', lineHeightClassName),
+      className: classnames_default()('hover:bg-secondary-main border-secondary-light flex w-full flex-row items-center break-all bg-black text-base transition duration-300', lineHeightClassName),
       key: `DICOMTagRow-${index}`
     }, /*#__PURE__*/react.createElement("div", {
-      className: "px-3 w-4/24"
+      className: "w-4/24 px-3"
     }, row[0]), /*#__PURE__*/react.createElement("div", {
-      className: "px-3 w-2/24"
+      className: "w-2/24 px-3"
     }, row[1]), /*#__PURE__*/react.createElement("div", {
-      className: "px-3 w-6/24"
+      className: "w-6/24 px-3"
     }, row[2]), /*#__PURE__*/react.createElement("div", {
-      className: "px-3 w-5/24 grow"
+      className: "w-5/24 grow px-3"
     }, row[3]));
   }, [rows]);
 
@@ -4635,7 +4635,7 @@ function DicomTagTable(_ref2) {
     keywordRef: keywordRef,
     valueRef: valueRef
   }), /*#__PURE__*/react.createElement("div", {
-    className: "m-auto relative border-2 border-black bg-black",
+    className: "relative m-auto border-2 border-black bg-black",
     style: {
       height: '32rem'
     }
@@ -4754,14 +4754,14 @@ const DicomTagBrowser = _ref => {
   return /*#__PURE__*/react.createElement("div", {
     className: "dicom-tag-browser-content"
   }, /*#__PURE__*/react.createElement("div", {
-    className: "flex flex-row mb-6 items-center pl-1"
+    className: "mb-6 flex flex-row items-center pl-1"
   }, /*#__PURE__*/react.createElement("div", {
-    className: "flex flex-row items-center w-1/2"
+    className: "flex w-1/2 flex-row items-center"
   }, /*#__PURE__*/react.createElement(ui_src/* Typography */.ZT, {
     variant: "subtitle",
     className: "mr-4"
   }, "Series"), /*#__PURE__*/react.createElement("div", {
-    className: "grow mr-8"
+    className: "mr-8 grow"
   }, /*#__PURE__*/react.createElement(ui_src/* Select */.Ph, {
     id: "display-set-selector",
     isClearable: false,
@@ -4770,7 +4770,7 @@ const DicomTagBrowser = _ref => {
     value: displaySetList.find(ds => ds.value === selectedDisplaySetInstanceUID),
     className: "text-white"
   }))), /*#__PURE__*/react.createElement("div", {
-    className: "flex flex-row items-center w-1/2"
+    className: "flex w-1/2 flex-row items-center"
   }, showInstanceList && /*#__PURE__*/react.createElement(ui_src/* Typography */.ZT, {
     variant: "subtitle",
     className: "mr-4"
@@ -4789,11 +4789,11 @@ const DicomTagBrowser = _ref => {
     labelPosition: "left",
     trackColor: '#3a3f99'
   })))), /*#__PURE__*/react.createElement("div", {
-    className: "w-full h-1 bg-black"
+    className: "h-1 w-full bg-black"
   }), /*#__PURE__*/react.createElement("div", {
-    className: "flex flex-row my-3 w-1/2"
+    className: "my-3 flex w-1/2 flex-row"
   }, /*#__PURE__*/react.createElement(ui_src/* InputFilterText */.Xe, {
-    className: "block w-full mr-8",
+    className: "mr-8 block w-full",
     placeholder: "Search metadata...",
     onDebounceChange: setFilterValue
   })), /*#__PURE__*/react.createElement(DicomTagBrowser_DicomTagTable, {
@@ -4969,65 +4969,62 @@ function _sortTagList(tagList) {
  */
 const reuseCachedLayout = (state, hangingProtocolService, syncService) => {
   const {
-    activeViewportIndex,
-    viewports,
-    layout
+    activeViewportId
   } = state;
+  const {
+    protocol
+  } = hangingProtocolService.getActiveProtocol();
   const hpInfo = hangingProtocolService.getState();
   const {
     protocolId,
     stageIndex,
     activeStudyUID
   } = hpInfo;
-  const {
-    protocol
-  } = hangingProtocolService.getActiveProtocol();
-  const stage = protocol.stages[stageIndex];
-  const storeId = `${activeStudyUID}:${protocolId}:${stageIndex}`;
   const syncState = syncService.getState();
-  const cacheId = `${activeStudyUID}:${protocolId}`;
   const viewportGridStore = {
     ...syncState.viewportGridStore
   };
-  const hangingProtocolStageIndexMap = {
-    ...syncState.hangingProtocolStageIndexMap
-  };
   const displaySetSelectorMap = {
     ...syncState.displaySetSelectorMap
   };
+  const stage = protocol.stages[stageIndex];
+  const storeId = `${activeStudyUID}:${protocolId}:${stageIndex}`;
+  const cacheId = `${activeStudyUID}:${protocolId}`;
+  const hangingProtocolStageIndexMap = {
+    ...syncState.hangingProtocolStageIndexMap
+  };
   const {
     rows,
     columns
   } = stage.viewportStructure.properties;
-  const custom = stage.viewports.length !== state.viewports.length || state.layout.numRows !== rows || state.layout.numCols !== columns;
+  const custom = stage.viewports.length !== state.viewports.size || state.layout.numRows !== rows || state.layout.numCols !== columns;
   hangingProtocolStageIndexMap[cacheId] = hpInfo;
   if (storeId && custom) {
     viewportGridStore[storeId] = {
       ...state
     };
   }
-  for (let idx = 0; idx < state.viewports.length; idx++) {
-    const viewport = state.viewports[idx];
+  state.viewports.forEach((viewport, viewportId) => {
     const {
       displaySetOptions,
       displaySetInstanceUIDs
     } = viewport;
     if (!displaySetOptions) {
-      continue;
+      return;
     }
     for (let i = 0; i < displaySetOptions.length; i++) {
       const displaySetUID = displaySetInstanceUIDs[i];
       if (!displaySetUID) {
         continue;
       }
-      if (idx === activeViewportIndex && i === 0) {
+      if (viewportId === activeViewportId && i === 0) {
         displaySetSelectorMap[`${activeStudyUID}:activeDisplaySet:0`] = displaySetUID;
       }
       if (displaySetOptions[i]?.id) {
         displaySetSelectorMap[`${activeStudyUID}:${displaySetOptions[i].id}:${displaySetOptions[i].matchedDisplaySetsIndex || 0}`] = displaySetUID;
       }
     }
-  }
+  });
   return {
     hangingProtocolStageIndexMap,
     viewportGridStore,
@@ -5043,14 +5040,14 @@ const reuseCachedLayout = (state, hangingProtocolService, syncService) => {
  * then one can be re-used from the display set if it isn't going to be displayed.
  * @param hangingProtocolService - bound parameter supplied before using this
  * @param viewportsByPosition - bound parameter supplied before using this
- * @param viewportIndex - the index to retrieve
+ * @param position - the position in the grid to retrieve
  * @param positionId - the current position on screen to retrieve
  * @param options - the set of options used, so that subsequent calls can
  *                  store state that is reset by the setLayout.
  *                  This class uses the options to store the already viewed
  *                  display sets, filling it initially with the pre-existing viewports.
  */
-const findViewportsByPosition_findOrCreateViewport = (hangingProtocolService, viewportsByPosition, viewportIndex, positionId, options) => {
+const findViewportsByPosition_findOrCreateViewport = (hangingProtocolService, viewportsByPosition, position, positionId, options) => {
   const byPositionViewport = viewportsByPosition?.[positionId];
   if (byPositionViewport) {
     return {
@@ -5104,7 +5101,7 @@ const findViewportsByPosition = (state, _ref, syncService) => {
     ...syncState.viewportsByPosition
   };
   const initialInDisplay = [];
-  for (const viewport of viewports) {
+  viewports.forEach(viewport => {
     if (viewport.positionId) {
       const storedViewport = {
         ...viewport,
@@ -5113,16 +5110,11 @@ const findViewportsByPosition = (state, _ref, syncService) => {
         }
       };
       viewportsByPosition[viewport.positionId] = storedViewport;
-      // The cache doesn't store the viewport options - it is only useful
-      // for remembering the type of viewport and UIDs
-      delete storedViewport.viewportId;
-      delete storedViewport.viewportOptions.viewportId;
     }
-  }
+  });
   for (let row = 0; row < numRows; row++) {
     for (let col = 0; col < numCols; col++) {
-      const pos = col + row * numCols;
-      const positionId = viewports?.[pos]?.positionId || `${col}-${row}`;
+      const positionId = `${col}-${row}`;
       const viewport = viewportsByPosition[positionId];
       if (viewport?.displaySetInstanceUIDs) {
         initialInDisplay.push(...viewport.displaySetInstanceUIDs);
@@ -5355,19 +5347,20 @@ const commandsModule = _ref => {
         delete displaySetSelectorMap[`${activeStudyUID || hpInfo.activeStudyUID}:activeDisplaySet:0`];
         stateSyncService.store(stateSyncReduce);
         // This is a default action applied
-        actions.toggleHpTools(hangingProtocolService.getActiveProtocol());
+        const {
+          protocol
+        } = hangingProtocolService.getActiveProtocol();
+        actions.toggleHpTools(protocol);
         // Send the notification about updating the state
         if (protocolId !== hpInfo.protocolId) {
-          const {
-            protocol
-          } = hangingProtocolService.getActiveProtocol();
           // The old protocol callbacks are used for turning off things
           // like crosshairs when moving to the new HP
           commandsManager.run(oldProtocol.callbacks?.onProtocolExit);
           // The new protocol callback is used for things like
           // activating modes etc.
-          commandsManager.run(protocol.callbacks?.onProtocolEnter);
         }
+
+        commandsManager.run(protocol.callbacks?.onProtocolEnter);
         return true;
       } catch (e) {
         actions.toggleHpTools(hangingProtocolService.getActiveProtocol());
@@ -5483,7 +5476,7 @@ const commandsModule = _ref => {
     toggleOneUp() {
       const viewportGridState = viewportGridService.getState();
       const {
-        activeViewportIndex,
+        activeViewportId,
         viewports,
         layout
       } = viewportGridState;
@@ -5491,7 +5484,7 @@ const commandsModule = _ref => {
         displaySetInstanceUIDs,
         displaySetOptions,
         viewportOptions
-      } = viewports[activeViewportIndex];
+      } = viewports.get(activeViewportId);
       if (layout.numCols === 1 && layout.numRows === 1) {
         // The viewer is in one-up. Check if there is a state to restore/toggle back to.
         const {
@@ -5502,24 +5495,37 @@ const commandsModule = _ref => {
         }
         // There is a state to toggle back to. The viewport that was
         // originally toggled to one up was the former active viewport.
-        const viewportIndexToUpdate = toggleOneUpViewportGridStore.activeViewportIndex;
-
-        // Determine which viewports need to be updated. This is particularly
-        // important when MPR is toggled to one up and a different reconstructable
-        // is swapped in. Note that currently HangingProtocolService.getViewportsRequireUpdate
-        // does not support viewport with multiple display sets.
-        const updatedViewports = displaySetInstanceUIDs.length > 1 ? [] : displaySetInstanceUIDs.map(displaySetInstanceUID => hangingProtocolService.getViewportsRequireUpdate(viewportIndexToUpdate, displaySetInstanceUID)).flat();
+        const viewportIdToUpdate = toggleOneUpViewportGridStore.activeViewportId;
+        const updatedViewportsViaHP = displaySetInstanceUIDs.length > 1 ? [] : displaySetInstanceUIDs.map(displaySetInstanceUID => hangingProtocolService.getViewportsRequireUpdate(viewportIdToUpdate, displaySetInstanceUID)).flat();
 
         // This findOrCreateViewport returns either one of the updatedViewports
         // returned from the HP service OR if there is not one from the HP service then
         // simply returns what was in the previous state.
-        const findOrCreateViewport = viewportIndex => {
-          const viewport = updatedViewports.find(viewport => viewport.viewportIndex === viewportIndex);
-          return viewport ? {
+        const findOrCreateViewport = position => {
+          // get the viewportId in the current state (since we are in the one-up layout)
+          const currentOneUpViewport = Array.from(viewports.values())[0];
+
+          // we should restore the previous layout but take into the account the fact that
+          // the current one up viewport might have a new displaySet dragged and dropped on it
+          // so we should prioritize the current one in the old grid store layout viewports
+
+          const newViewports = Array.from(toggleOneUpViewportGridStore.viewports.values()).map(viewport => {
+            if (viewport.viewportId === currentOneUpViewport.viewportId) {
+              return {
+                ...currentOneUpViewport
+              };
+            }
+            return viewport;
+          });
+
+          // However, we also need to take into account that the current one up viewport
+          // might have been part of a bigger hanging protocol layout, so going back
+          // from one up we should apply those viewports as well.
+          return updatedViewportsViaHP.length > 1 && updatedViewportsViaHP[position] ? {
             viewportOptions,
             displaySetOptions,
-            ...viewport
-          } : toggleOneUpViewportGridStore.viewports[viewportIndex];
+            ...updatedViewportsViaHP[position]
+          } : newViewports[position];
         };
         const layoutOptions = viewportGridService.getLayoutOptionsFromState(toggleOneUpViewportGridStore);
 
@@ -5527,7 +5533,7 @@ const commandsModule = _ref => {
         viewportGridService.setLayout({
           numRows: toggleOneUpViewportGridStore.layout.numRows,
           numCols: toggleOneUpViewportGridStore.layout.numCols,
-          activeViewportIndex: viewportIndexToUpdate,
+          activeViewportId: viewportIdToUpdate,
           layoutOptions,
           findOrCreateViewport
         });
@@ -5592,10 +5598,10 @@ const commandsModule = _ref => {
     },
     openDICOMTagViewer() {
       const {
-        activeViewportIndex,
+        activeViewportId,
         viewports
       } = viewportGridService.getState();
-      const activeViewportSpecificData = viewports[activeViewportIndex];
+      const activeViewportSpecificData = viewports.get(activeViewportId);
       const {
         displaySetInstanceUIDs
       } = activeViewportSpecificData;
@@ -5627,13 +5633,10 @@ const commandsModule = _ref => {
     },
     scrollActiveThumbnailIntoView: () => {
       const {
-        activeViewportIndex,
+        activeViewportId,
         viewports
       } = viewportGridService.getState();
-      if (!viewports || activeViewportIndex < 0 || activeViewportIndex > viewports.length - 1) {
-        return;
-      }
-      const activeViewport = viewports[activeViewportIndex];
+      const activeViewport = viewports.get(activeViewportId);
       const activeDisplaySetInstanceUID = activeViewport.displaySetInstanceUIDs[0];
       const thumbnailList = document.querySelector('#ohif-thumbnail-list');
       if (!thumbnailList) {
@@ -5667,12 +5670,12 @@ const commandsModule = _ref => {
       const currentDisplaySets = [...displaySetService.activeDisplaySets];
       currentDisplaySets.sort(dsSortFn);
       const {
-        activeViewportIndex,
+        activeViewportId,
         viewports
       } = viewportGridService.getState();
       const {
         displaySetInstanceUIDs
-      } = viewports[activeViewportIndex];
+      } = viewports.get(activeViewportId);
       const activeDisplaySetIndex = currentDisplaySets.findIndex(displaySet => displaySetInstanceUIDs.includes(displaySet.displaySetInstanceUID));
       let displaySetIndexToShow;
       for (displaySetIndexToShow = activeDisplaySetIndex + direction; displaySetIndexToShow > -1 && displaySetIndexToShow < currentDisplaySets.length; displaySetIndexToShow += direction) {
@@ -5688,7 +5691,7 @@ const commandsModule = _ref => {
       } = currentDisplaySets[displaySetIndexToShow];
       let updatedViewports = [];
       try {
-        updatedViewports = hangingProtocolService.getViewportsRequireUpdate(activeViewportIndex, displaySetInstanceUID);
+        updatedViewports = hangingProtocolService.getViewportsRequireUpdate(activeViewportId, displaySetInstanceUID);
       } catch (error) {
         console.warn(error);
         uiNotificationService.show({
@@ -6230,6 +6233,7 @@ const defaultProtocol = {
     viewports: [{
       viewportOptions: {
         viewportType: 'stack',
+        viewportId: 'default',
         toolGroupId: 'default',
         // This will specify the initial image options index if it matches in the URL
         // and will otherwise not specify anything.
@@ -6286,15 +6290,15 @@ function DataSourceSelector() {
       height: '100%'
     }
   }, /*#__PURE__*/react.createElement("div", {
-    className: "h-screen w-screen flex justify-center items-center "
+    className: "flex h-screen w-screen items-center justify-center "
   }, /*#__PURE__*/react.createElement("div", {
-    className: "py-8 px-8 mx-auto bg-secondary-dark drop-shadow-md space-y-2 rounded-lg"
+    className: "bg-secondary-dark mx-auto space-y-2 rounded-lg py-8 px-8 drop-shadow-md"
   }, /*#__PURE__*/react.createElement("img", {
-    className: "block mx-auto h-14",
+    className: "mx-auto block h-14",
     src: "./ohif-logo.svg",
     alt: "OHIF"
   }), /*#__PURE__*/react.createElement("div", {
-    className: "text-center space-y-2 pt-4"
+    className: "space-y-2 pt-4 text-center"
   }, dsConfigs.filter(it => it.sourceName !== 'dicomjson' && it.sourceName !== 'dicomlocal').map(ds => /*#__PURE__*/react.createElement("div", {
     key: ds.sourceName
   }, /*#__PURE__*/react.createElement("h1", {
@@ -6330,33 +6334,33 @@ function ItemListComponent(_ref) {
     setFilterValue('');
   }, [itemList]);
   return /*#__PURE__*/react.createElement("div", {
-    className: "flex flex-col gap-4 min-h-[1px] grow"
+    className: "flex min-h-[1px] grow flex-col gap-4"
   }, /*#__PURE__*/react.createElement("div", {
-    className: "flex justify-between items-center"
+    className: "flex items-center justify-between"
   }, /*#__PURE__*/react.createElement("div", {
     className: "text-primary-light text-[20px]"
   }, t(`Select ${itemLabel}`)), /*#__PURE__*/react.createElement(ui_src/* InputFilterText */.Xe, {
-    className: "grow max-w-[40%]",
+    className: "max-w-[40%] grow",
     value: filterValue,
     onDebounceChange: setFilterValue,
     placeholder: t(`Search ${itemLabel} list`)
   })), /*#__PURE__*/react.createElement("div", {
-    className: "flex flex-col relative min-h-[1px] grow text-[14px] bg-black"
+    className: "relative flex min-h-[1px] grow flex-col bg-black text-[14px]"
   }, itemList == null ? /*#__PURE__*/react.createElement(ui_src/* LoadingIndicatorProgress */.LE, {
-    className: 'w-full h-full'
+    className: 'h-full w-full'
   }) : itemList.length === 0 ? /*#__PURE__*/react.createElement("div", {
-    className: "flex flex-col h-full px-6 py-4 items-center justify-center text-primary-light"
+    className: "text-primary-light flex h-full flex-col items-center justify-center px-6 py-4"
   }, /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
     name: "magnifier",
     className: "mb-4"
   }), /*#__PURE__*/react.createElement("span", null, t(`No ${itemLabel} available`))) : /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
-    className: "bg-secondary-dark text-white px-3 py-1.5"
+    className: "bg-secondary-dark px-3 py-1.5 text-white"
   }, t(itemLabel)), /*#__PURE__*/react.createElement("div", {
-    className: "overflow-auto ohif-scrollbar"
+    className: "ohif-scrollbar overflow-auto"
   }, itemList.filter(item => !filterValue || item.name.toLowerCase().includes(filterValue.toLowerCase())).map(item => {
     const border = 'rounded border-transparent border-b-secondary-light border-[1px] hover:border-primary-light';
     return /*#__PURE__*/react.createElement("div", {
-      className: classnames_default()('group mx-2 px-6 py-2 flex justify-between items-center hover:text-primary-light hover:bg-primary-dark', border),
+      className: classnames_default()('hover:text-primary-light hover:bg-primary-dark group mx-2 flex items-center justify-between px-6 py-2', border),
       key: item.id
     }, /*#__PURE__*/react.createElement("div", null, item.name), /*#__PURE__*/react.createElement(ui_src/* Button */.zx, {
       onClick: () => onItemClicked(item),
@@ -6386,13 +6390,16 @@ function DataSourceConfigurationModalComponent(_ref) {
   } = (0,es/* useTranslation */.$G)('DataSourceConfiguration');
   const [itemList, setItemList] = (0,react.useState)();
   const [selectedItems, setSelectedItems] = (0,react.useState)(configuredItems);
-
-  // Determines whether to show the full configuration for the data source.
-  // This typically occurs when the configuration component is first displayed.
-  const [showFullConfig, setShowFullConfig] = (0,react.useState)(true);
   const [errorMessage, setErrorMessage] = (0,react.useState)();
   const [itemLabels] = (0,react.useState)(configurationAPI.getItemLabels());
 
+  // Determines whether to show the full/existing configuration for the data source.
+  // A full or complete configuration is one where the data source (path) has the
+  // maximum/required number of path items. Anything less is considered not complete and
+  // the configuration starts from scratch (i.e. as if no items are configured at all).
+  // TODO: consider configuration starting from a partial (i.e. non-empty) configuration
+  const [showFullConfig, setShowFullConfig] = (0,react.useState)(itemLabels.length === configuredItems.length);
+
   /**
    * The index of the selected item that is considered current and for which
    * its sub-items should be displayed in the items list component. When the
@@ -6434,11 +6441,11 @@ function DataSourceConfigurationModalComponent(_ref) {
   const getSelectedItemTextClasses = itemIndex => itemIndex <= selectedItems.length ? 'text-primary-light' : 'text-primary-active';
   const getErrorComponent = () => {
     return /*#__PURE__*/react.createElement("div", {
-      className: "flex flex-col gap-4 min-h-[1px] grow"
+      className: "flex min-h-[1px] grow flex-col gap-4"
     }, /*#__PURE__*/react.createElement("div", {
       className: "text-primary-light text-[20px]"
     }, t(`Error fetching ${itemLabels[selectedItems.length]} list`)), /*#__PURE__*/react.createElement("div", {
-      className: "bg-black text-[14px] grow p-4"
+      className: "grow bg-black p-4 text-[14px]"
     }, errorMessage));
   };
   const getSelectedItemsComponent = () => {
@@ -6447,13 +6454,13 @@ function DataSourceConfigurationModalComponent(_ref) {
     }, itemLabels.map((itemLabel, itemLabelIndex) => {
       return /*#__PURE__*/react.createElement("div", {
         key: itemLabel,
-        className: classnames_default()('rounded-md p-3.5 flex flex-col gap-1 shrink min-w-[1px] basis-[200px]', getSelectedItemCursorClasses(itemLabelIndex), getSelectedItemBackgroundClasses(itemLabelIndex), getSelectedItemBorderClasses(itemLabelIndex), getSelectedItemTextClasses(itemLabelIndex)),
+        className: classnames_default()('flex min-w-[1px] shrink basis-[200px] flex-col gap-1 rounded-md p-3.5', getSelectedItemCursorClasses(itemLabelIndex), getSelectedItemBackgroundClasses(itemLabelIndex), getSelectedItemBorderClasses(itemLabelIndex), getSelectedItemTextClasses(itemLabelIndex)),
         onClick: showFullConfig && itemLabelIndex < currentSelectedItemIndex || itemLabelIndex <= currentSelectedItemIndex ? () => {
           setShowFullConfig(false);
           setSelectedItems(theList => theList.slice(0, itemLabelIndex));
         } : undefined
       }, /*#__PURE__*/react.createElement("div", {
-        className: "flex gap-2 items-center text-"
+        className: "text- flex items-center gap-2"
       }, itemLabelIndex < selectedItems.length ? /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
         name: "status-tracked"
       }) : /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
@@ -6461,14 +6468,14 @@ function DataSourceConfigurationModalComponent(_ref) {
       }), /*#__PURE__*/react.createElement("div", {
         className: classnames_default()(NO_WRAP_ELLIPSIS_CLASS_NAMES)
       }, t(itemLabel))), itemLabelIndex < selectedItems.length ? /*#__PURE__*/react.createElement("div", {
-        className: classnames_default()('text-white text-[14px]', NO_WRAP_ELLIPSIS_CLASS_NAMES)
+        className: classnames_default()('text-[14px] text-white', NO_WRAP_ELLIPSIS_CLASS_NAMES)
       }, selectedItems[itemLabelIndex].name) : /*#__PURE__*/react.createElement("br", null));
     }));
   };
   return /*#__PURE__*/react.createElement("div", {
-    className: "h-[calc(100vh-300px)] flex flex-col pt-0.5 gap-4 select-none"
+    className: "flex h-[calc(100vh-300px)] select-none flex-col gap-4 pt-0.5"
   }, getSelectedItemsComponent(), /*#__PURE__*/react.createElement("div", {
-    className: "w-full h-0.5 shrink-0 bg-black"
+    className: "h-0.5 w-full shrink-0 bg-black"
   }), errorMessage ? getErrorComponent() : /*#__PURE__*/react.createElement(Components_ItemListComponent, {
     itemLabel: itemLabels[currentSelectedItemIndex + 1],
     itemList: itemList,
@@ -6516,6 +6523,9 @@ function DataSourceConfigurationComponent(_ref) {
       }
       const configAPI = configurationAPIFactory(activeDataSourceDef.sourceName);
       setConfigurationAPI(configAPI);
+
+      // New configuration API means that the existing configured items must be cleared.
+      setConfiguredItems(null);
       configAPI.getConfiguredItems().then(list => {
         if (shouldUpdate) {
           setConfiguredItems(list);
@@ -6529,12 +6539,8 @@ function DataSourceConfigurationComponent(_ref) {
       sub.unsubscribe();
     };
   }, []);
-  return configuredItems ? /*#__PURE__*/react.createElement("div", {
-    className: "flex text-aqua-pale overflow-hidden items-center"
-  }, /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
-    name: "settings",
-    className: "cursor-pointer shrink-0 w-3.5 h-3.5 mr-2.5",
-    onClick: () => show({
+  const showConfigurationModal = (0,react.useCallback)(() => {
+    show({
       content: Components_DataSourceConfigurationModalComponent,
       title: t('Configure Data Source'),
       contentProps: {
@@ -6542,14 +6548,30 @@ function DataSourceConfigurationComponent(_ref) {
         configuredItems,
         onHide: hide
       }
-    })
+    });
+  }, [configurationAPI, configuredItems]);
+  (0,react.useEffect)(() => {
+    if (!configurationAPI || !configuredItems) {
+      return;
+    }
+    if (configuredItems.length !== configurationAPI.getItemLabels().length) {
+      // Not the correct number of configured items, so show the modal to configure the data source.
+      showConfigurationModal();
+    }
+  }, [configurationAPI, configuredItems, showConfigurationModal]);
+  return configuredItems ? /*#__PURE__*/react.createElement("div", {
+    className: "text-aqua-pale flex items-center overflow-hidden"
+  }, /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
+    name: "settings",
+    className: "mr-2.5 h-3.5 w-3.5 shrink-0 cursor-pointer",
+    onClick: showConfigurationModal
   }), configuredItems.map((item, itemIndex) => {
     return /*#__PURE__*/react.createElement("div", {
       key: itemIndex,
       className: "flex overflow-hidden"
     }, /*#__PURE__*/react.createElement("div", {
       key: itemIndex,
-      className: "text-ellipsis whitespace-nowrap overflow-hidden"
+      className: "overflow-hidden text-ellipsis whitespace-nowrap"
     }, item.name), itemIndex !== configuredItems.length - 1 && /*#__PURE__*/react.createElement("div", {
       className: "px-2.5"
     }, "|"));
@@ -6651,9 +6673,14 @@ class GoogleCloudDataSourceConfigurationAPI {
     const dataSourceDefinition = this._extensionManager.getDataSourceDefinition(this._dataSourceName);
     const url = dataSourceDefinition.configuration.wadoUriRoot;
     const projectsIndex = url.indexOf('projects');
+    // Split the configured URL into (essentially) pairs (i.e. item type followed by item)
+    // Explicitly: ['projects','aProject','locations','aLocation','datasets','aDataSet','dicomStores','aDicomStore']
+    // Note that a partial configuration will have a subset of the above.
     const urlSplit = url.substring(projectsIndex).split('/');
     const configuredItems = [];
-    for (let itemType = 0; itemType < 4; itemType += 1) {
+    for (let itemType = 0;
+    // the number of configured items is either the max (4) or the number extracted from the url split
+    itemType < 4 && (itemType + 1) * 2 < urlSplit.length; itemType += 1) {
       if (itemType === ItemType.projects) {
         const projectId = urlSplit[1];
         const projectUrl = `${initialUrl}/projects/${projectId}`;