updates

platform/app/package.json

@@ -99,6 +99,7 @@
     "react-router": "^6.23.1",
     "react-router-dom": "^6.8.1",
     "react-shepherd": "^6.1.1",
+    "shepherd.js": "^13.0.3",
     "url-loader": "^4.1.1"
   },
   "devDependencies": {

platform/app/public/config/default.js

@@ -1,3 +1,5 @@
+import { tours } from './tours/tours';
+
 /** @type {AppTypes.Config} */
 
 window.config = {
@@ -292,22 +294,5 @@ window.config = {
     },
   ],
 
-  tours: [
-    {
-      route: '/viewer',
-      steps: [
-        {
-          id: 'example-step',
-          text: 'This step is attached to the bottom of the <code>.example-css-selector</code> element.',
-          attachTo: {
-            element: '[data-cy="WindowLevel"]',
-            on: 'bottom',
-          },
-          classes: 'example-step-extra-class',
-          buttons: [],
-        },
-      ],
-      tourOptions: {},
-    },
-  ],
+  tours,
 };

platform/app/public/config/tours/tours.ts

@@ -0,0 +1,106 @@
+import { StepOptions, TourOptions } from 'shepherd.js';
+
+const tours = {
+  route: '/viewer',
+  steps: [
+    {
+      id: 'scroll',
+      text: 'You can scroll through the images using the mouse wheel.',
+      attachTo: {
+        element: '.viewport-element',
+        on: 'left-start',
+      },
+    },
+    {
+      id: 'zoom',
+      text: 'You can zoom the images using the right click.',
+      attachTo: {
+        element: '.viewport-element',
+        on: 'left-start',
+      },
+    },
+    {
+      id: 'pan',
+      text: 'You can pan the images using the middle click.',
+      attachTo: {
+        element: '.viewport-element',
+        on: 'left-start',
+      },
+    },
+    {
+      id: 'windowing',
+      text: 'You can modify the window level using the left click.',
+      attachTo: {
+        element: '.viewport-element',
+        on: 'left-start',
+      },
+    },
+    {
+      id: 'length',
+      text: 'You can measure the length of a region using the Length tool.',
+      attachTo: {
+        element: '.MeasurementTools-split-button-primary',
+        on: 'bottom',
+      },
+    },
+    {
+      id: 'drawAnnotation',
+      text: 'Use the length tool on the viewport to measure the length of a region.',
+      attachTo: {
+        element: '.viewport-element',
+        on: 'left-start',
+      },
+    },
+    {
+      id: 'trackMeasurement',
+      text: 'Click yes to track the measurements in the measurement panel.',
+      attachTo: {
+        element: '[data-cy="prompt-begin-tracking-yes-btn"]',
+        on: 'bottom',
+      },
+    },
+    {
+      id: 'openMeasurementPanel',
+      text: 'Click the measurements button to open the measurements panel.',
+      attachTo: {
+        element: '#trackedMeasurements-btn',
+        on: 'left-start',
+      },
+    },
+    {
+      id: 'scrollAwayFromMeasurement',
+      text: 'Scroll the images using the mouse wheel away from the measurement.',
+      attachTo: {
+        element: '.viewport-element',
+        on: 'left-start',
+      },
+    },
+    {
+      id: 'jumpToMeasurement',
+      text: 'Click the measurement in the measurement panel to jump to it.',
+      attachTo: {
+        element: '[data-cy="measurement-item"]',
+        on: 'left-start',
+      },
+    },
+    {
+      id: 'changeLayout',
+      text: 'You can change the layout of the viewer using the layout button.',
+      attachTo: {
+        element: '[data-cy="Layout"]',
+        on: 'bottom',
+      },
+    },
+    {
+      id: 'selectLayout',
+      text: 'Select the MPR layout to view the images in MPR mode.',
+      attachTo: {
+        element: '[data-cy="MPR"]',
+        on: 'left-start',
+      },
+    },
+  ] as StepOptions[],
+  tourOptions: {} as TourOptions,
+};
+
+export { tours };

platform/app/src/App.tsx

@@ -116,7 +116,7 @@ function App({
     [SnackbarProvider, { service: uiNotificationService }],
     [DialogProvider, { service: uiDialogService }],
     [ModalProvider, { service: uiModalService, modal: Modal }],
-    [OnboardingProvider, { service: onboardingService }],
+    [OnboardingProvider],
   ];
 
   // Loop through and register each of the service providers registered with the ServiceProvidersManager.

platform/app/src/appInit.js

@@ -21,7 +21,6 @@ import {
   PanelService,
   WorkflowStepsService,
   StudyPrefetcherService,
-  OnboardingService,
   // utils,
 } from '@ohif/core';
 
@@ -76,7 +75,6 @@ async function appInit(appConfigOrFunc, defaultExtensions, defaultModes) {
     WorkflowStepsService.REGISTRATION,
     StateSyncService.REGISTRATION,
     [StudyPrefetcherService.REGISTRATION, appConfig.studyPrefetcher],
-    OnboardingService.REGISTRATION,
   ]);
 
   errorHandler.getHTTPErrorHandler = () => {