@ohif/app 3.9.0-beta.91 → 3.9.0-beta.93

package/dist/{3482.bundle.b5c059474c2ab266a1b9.js → 3482.bundle.a8622b8e9e5101b2f771.js}

@@ -1277,8 +1277,8 @@ var es = __webpack_require__(69190);
 var src = __webpack_require__(84793);
 // EXTERNAL MODULE: ../../ui/src/index.js + 691 modules
 var ui_src = __webpack_require__(50395);
-// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2444 modules
-var ui_next_src = __webpack_require__(6862);
+// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2449 modules
+var ui_next_src = __webpack_require__(46455);
 // EXTERNAL MODULE: ./state/index.js + 1 modules
 var state = __webpack_require__(52490);
 ;// CONCATENATED MODULE: ../../../extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTrackingHeader.tsx

package/dist/{3962.bundle.15b9b19a21e1d8b201a8.js → 3962.bundle.f8f36bf46046916a7e45.js}

@@ -1073,8 +1073,8 @@ PanelGenerateImage.propTypes = {
     }).isRequired
   }).isRequired
 };
-// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2444 modules
-var ui_next_src = __webpack_require__(6862);
+// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2449 modules
+var ui_next_src = __webpack_require__(46455);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dynamic-volume/src/panels/DynamicDataPanel.tsx
 
 

package/dist/{4210.bundle.16cfe559979bdc63c2ef.js → 4210.bundle.7c76057d5b3203a9e20e.js}

@@ -315,8 +315,8 @@ function getHangingProtocolModule() {
 
 // EXTERNAL MODULE: ./state/index.js + 1 modules
 var state = __webpack_require__(52490);
-// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2444 modules
-var ui_next_src = __webpack_require__(6862);
+// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2449 modules
+var ui_next_src = __webpack_require__(46455);
 // EXTERNAL MODULE: ../../ui/src/index.js + 691 modules
 var ui_src = __webpack_require__(50395);
 // EXTERNAL MODULE: ../../../extensions/default/src/index.ts + 99 modules

package/dist/{6552.bundle.4f2d22780b625fbe87b7.js → 6552.bundle.d3571384b43fe26e44b3.js}

@@ -2891,8 +2891,8 @@ function ViewerHeader({
     hotkeyDefinitions,
     hotkeyDefaults
   } = hotkeysManager;
-  const versionNumber = "3.9.0-beta.91";
-  const commitHash = "b4f08adfb638e5df11bb77d3c1b128b5efdf77a7";
+  const versionNumber = "3.9.0-beta.93";
+  const commitHash = "579a5928120a9acee368fe856beb8581c7ffa622";
   const menuOptions = [{
     title: t('Header:About'),
     icon: 'info',
@@ -2968,8 +2968,8 @@ function ViewerHeader({
   }))));
 }
 /* harmony default export */ const ViewerLayout_ViewerHeader = (ViewerHeader);
-// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2444 modules
-var ui_next_src = __webpack_require__(6862);
+// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2449 modules
+var ui_next_src = __webpack_require__(46455);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/Components/SidePanelWithServices.tsx
 function SidePanelWithServices_extends() { return SidePanelWithServices_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, SidePanelWithServices_extends.apply(null, arguments); }
 
@@ -3050,6 +3050,7 @@ const SidePanelWithServices = ({
 
 
 
+
 function ViewerLayout({
   // From Extension Module Params
   extensionManager,
@@ -3174,7 +3175,7 @@ function ViewerLayout({
     side: "right",
     activeTabIndex: rightPanelClosedState ? null : 0,
     servicesManager: servicesManager
-  })) : null)), /*#__PURE__*/react.createElement(ui_src/* InvestigationalUseDialog */.NE, {
+  })) : null)), /*#__PURE__*/react.createElement(ui_next_src/* Onboarding */.TG, null), /*#__PURE__*/react.createElement(ui_src/* InvestigationalUseDialog */.NE, {
     dialogConfiguration: appConfig?.investigationalUseDialog
   }));
 }

package/dist/{7913.bundle.36231ef56f2ec24de051.js → 7913.bundle.af5005f5f1f642a25dec.js}

@@ -729,8 +729,8 @@ var src = __webpack_require__(50395);
 var core_src = __webpack_require__(84793);
 // EXTERNAL MODULE: ../../../node_modules/react-i18next/dist/es/index.js + 15 modules
 var es = __webpack_require__(69190);
-// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2444 modules
-var ui_next_src = __webpack_require__(6862);
+// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2449 modules
+var ui_next_src = __webpack_require__(46455);
 ;// CONCATENATED MODULE: ../../../extensions/tmtv/src/Panels/PanelPetSUV.tsx
 
 

package/dist/{8999.bundle.d0aea792a8c4194691b9.js → 8999.bundle.fe5b9a3ecd518a7c68cf.js}

@@ -1678,8 +1678,8 @@ function saveByteArray(buffer, filename) {
   link.download = filename;
   link.click();
 }
-// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2444 modules
-var ui_next_src = __webpack_require__(6862);
+// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2449 modules
+var ui_next_src = __webpack_require__(46455);
 ;// CONCATENATED MODULE: ../../../extensions/dicom-microscopy/src/components/MicroscopyPanel/MicroscopyPanel.tsx
 
 

package/dist/app-config.js

@@ -291,4 +291,212 @@ window.config = {
       keys: ['9'],
     },
   ],
+  tours: [
+    {
+      id: 'basicViewerTour',
+      route: '/viewer',
+      steps: [
+        {
+          id: 'scroll',
+          title: 'Scrolling Through Images',
+          text: 'You can scroll through the images using the mouse wheel or scrollbar.',
+          attachTo: {
+            element: '.viewport-element',
+            on: 'top',
+          },
+          advanceOn: {
+            selector: '.cornerstone-viewport-element',
+            event: 'CORNERSTONE_TOOLS_MOUSE_WHEEL',
+          },
+          beforeShowPromise: () => waitForElement('.viewport-element'),
+        },
+        {
+          id: 'zoom',
+          title: 'Zooming In and Out',
+          text: 'You can zoom the images using the right click.',
+          attachTo: {
+            element: '.viewport-element',
+            on: 'left',
+          },
+          advanceOn: {
+            selector: '.cornerstone-viewport-element',
+            event: 'CORNERSTONE_TOOLS_MOUSE_UP',
+          },
+          beforeShowPromise: () => waitForElement('.viewport-element'),
+        },
+        {
+          id: 'pan',
+          title: 'Panning the Image',
+          text: 'You can pan the images using the middle click.',
+          attachTo: {
+            element: '.viewport-element',
+            on: 'top',
+          },
+          advanceOn: {
+            selector: '.cornerstone-viewport-element',
+            event: 'CORNERSTONE_TOOLS_MOUSE_UP',
+          },
+          beforeShowPromise: () => waitForElement('.viewport-element'),
+        },
+        {
+          id: 'windowing',
+          title: 'Adjusting Window Level',
+          text: 'You can modify the window level using the left click.',
+          attachTo: {
+            element: '.viewport-element',
+            on: 'left',
+          },
+          advanceOn: {
+            selector: '.cornerstone-viewport-element',
+            event: 'CORNERSTONE_TOOLS_MOUSE_UP',
+          },
+          beforeShowPromise: () => waitForElement('.viewport-element'),
+        },
+        {
+          id: 'length',
+          title: 'Using the Measurement Tools',
+          text: 'You can measure the length of a region using the Length tool.',
+          attachTo: {
+            element: '[data-cy="MeasurementTools-split-button-primary"]',
+            on: 'bottom',
+          },
+          advanceOn: {
+            selector: '[data-cy="MeasurementTools-split-button-primary"]',
+            event: 'click',
+          },
+          beforeShowPromise: () =>
+            waitForElement('[data-cy="MeasurementTools-split-button-primary]'),
+        },
+        {
+          id: 'drawAnnotation',
+          title: 'Drawing Length Annotations',
+          text: 'Use the length tool on the viewport to measure the length of a region.',
+          attachTo: {
+            element: '.viewport-element',
+            on: 'right',
+          },
+          advanceOn: {
+            selector: 'body',
+            event: 'event::measurement_added',
+          },
+          beforeShowPromise: () => waitForElement('.viewport-element'),
+        },
+        {
+          id: 'trackMeasurement',
+          title: 'Tracking Measurements in the Panel',
+          text: 'Click yes to track the measurements in the measurement panel.',
+          attachTo: {
+            element: '[data-cy="prompt-begin-tracking-yes-btn"]',
+            on: 'bottom',
+          },
+          advanceOn: {
+            selector: '[data-cy="prompt-begin-tracking-yes-btn"]',
+            event: 'click',
+          },
+          beforeShowPromise: () => waitForElement('[data-cy="prompt-begin-tracking-yes-btn"]'),
+        },
+        {
+          id: 'openMeasurementPanel',
+          title: 'Opening the Measurements Panel',
+          text: 'Click the measurements button to open the measurements panel.',
+          attachTo: {
+            element: '#trackedMeasurements-btn',
+            on: 'left-start',
+          },
+          advanceOn: {
+            selector: '#trackedMeasurements-btn',
+            event: 'click',
+          },
+          beforeShowPromise: () => waitForElement('#trackedMeasurements-btn'),
+        },
+        {
+          id: 'scrollAwayFromMeasurement',
+          title: 'Scrolling Away from a Measurement',
+          text: 'Scroll the images using the mouse wheel away from the measurement.',
+          attachTo: {
+            element: '.viewport-element',
+            on: 'left',
+          },
+          advanceOn: {
+            selector: '.cornerstone-viewport-element',
+            event: 'CORNERSTONE_TOOLS_MOUSE_WHEEL',
+          },
+          beforeShowPromise: () => waitForElement('.viewport-element'),
+        },
+        {
+          id: 'jumpToMeasurement',
+          title: 'Jumping to Measurements in the Panel',
+          text: 'Click the measurement in the measurement panel to jump to it.',
+          attachTo: {
+            element: '[data-cy="measurement-item"]',
+            on: 'left-start',
+          },
+          advanceOn: {
+            selector: '[data-cy="measurement-item"]',
+            event: 'click',
+          },
+          beforeShowPromise: () => waitForElement('[data-cy="measurement-item"]'),
+        },
+        {
+          id: 'changeLayout',
+          title: 'Changing Layout',
+          text: 'You can change the layout of the viewer using the layout button.',
+          attachTo: {
+            element: '[data-cy="Layout"]',
+            on: 'bottom',
+          },
+          advanceOn: {
+            selector: '[data-cy="Layout"]',
+            event: 'click',
+          },
+          beforeShowPromise: () => waitForElement('[data-cy="Layout"]'),
+        },
+        {
+          id: 'selectLayout',
+          title: 'Selecting the MPR Layout',
+          text: 'Select the MPR layout to view the images in MPR mode.',
+          attachTo: {
+            element: '[data-cy="MPR"]',
+            on: 'left-start',
+          },
+          advanceOn: {
+            selector: '[data-cy="MPR"]',
+            event: 'click',
+          },
+          beforeShowPromise: () => waitForElement('[data-cy="MPR"]'),
+        },
+      ],
+      tourOptions: {
+        useModalOverlay: true,
+        defaultStepOptions: {
+          buttons: [
+            {
+              text: 'Skip all',
+              action() {
+                this.complete();
+              },
+              secondary: true,
+            },
+          ],
+        },
+      },
+    },
+  ],
 };
+
+function waitForElement(selector, maxAttempts = 20, interval = 25) {
+  return new Promise(resolve => {
+    let attempts = 0;
+
+    const checkForElement = setInterval(() => {
+      const element = document.querySelector(selector);
+
+      if (element || attempts >= maxAttempts) {
+        clearInterval(checkForElement);
+        resolve();
+      }
+
+      attempts++;
+    }, interval);
+  });
+}