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 = () => {

platform/core/package.json

@@ -55,6 +55,7 @@
     "object-hash": "2.1.1",
     "query-string": "^6.14.0",
     "react-shepherd": "^6.1.1",
+    "shepherd.js": "^13.0.3",
     "validate.js": "^0.12.0"
   },
   "devDependencies": {

platform/core/src/index.ts

@@ -34,7 +34,6 @@ import {
   PanelService,
   WorkflowStepsService,
   StudyPrefetcherService,
-  OnboardingService,
 } from './services';
 
 import { DisplaySetMessage, DisplaySetMessageList } from './services/DisplaySetService';
@@ -88,7 +87,6 @@ const OHIF = {
   useToolbar,
   WorkflowStepsService,
   StudyPrefetcherService,
-  OnboardingService,
 };
 
 export {
@@ -135,7 +133,6 @@ export {
   PanelService,
   WorkflowStepsService,
   StudyPrefetcherService,
-  OnboardingService,
   useToolbar,
 };
 

platform/core/src/services/OnboardingService/OnboardingService.ts

@@ -1,82 +0,0 @@
-const name = 'onboardingService';
-
-const serviceImplementation = {
-  _startTour: () => console.warn('startTour() NOT IMPLEMENTED'),
-  _exitTour: () => console.warn('exitTour() NOT IMPLEMENTED'),
-  _nextStep: () => console.warn('nextStep() NOT IMPLEMENTED'),
-  _previousStep: () => console.warn('previousStep() NOT IMPLEMENTED'),
-  _initializeTour: (steps, tourOptions) => console.warn('initializeTour() NOT IMPLEMENTED'),
-};
-
-class OnboardingService {
-  static REGISTRATION = {
-    name,
-    altName: 'OnboardingService',
-    create: (): OnboardingService => {
-      return new OnboardingService();
-    },
-  };
-
-  readonly name = name;
-
-  /**
-   * Initialize the step tour
-   */
-  initializeTour(steps, tourOptions = {}) {
-    return serviceImplementation._initializeTour(steps, tourOptions);
-  }
-
-  /**
-   * Start the step tour
-   */
-  startTour() {
-    return serviceImplementation._startTour();
-  }
-
-  /**
-   * Exit the step tour
-   */
-  exitTour() {
-    return serviceImplementation._exitTour();
-  }
-
-  /**
-   * Move to the next step in the tour
-   */
-  nextStep() {
-    return serviceImplementation._nextStep();
-  }
-
-  /**
-   * Move to the previous step in the tour
-   */
-  previousStep() {
-    return serviceImplementation._previousStep();
-  }
-
-  setServiceImplementation({
-    initializeTour: initializeTourImplementation,
-    startTour: startStepsImplementation,
-    exitTour: exitStepsImplementation,
-    nextStep: nextStepImplementation,
-    previousStep: previousStepImplementation,
-  }) {
-    if (initializeTourImplementation) {
-      serviceImplementation._initializeTour = initializeTourImplementation;
-    }
-    if (startStepsImplementation) {
-      serviceImplementation._startTour = startStepsImplementation;
-    }
-    if (exitStepsImplementation) {
-      serviceImplementation._exitTour = exitStepsImplementation;
-    }
-    if (nextStepImplementation) {
-      serviceImplementation._nextStep = nextStepImplementation;
-    }
-    if (previousStepImplementation) {
-      serviceImplementation._previousStep = previousStepImplementation;
-    }
-  }
-}
-
-export default OnboardingService;

platform/core/src/services/OnboardingService/index.ts

@@ -1,3 +0,0 @@
-import OnboardingService from './OnboardingService';
-
-export default OnboardingService;

platform/core/src/services/index.ts

@@ -18,7 +18,6 @@ import StateSyncService from './StateSyncService';
 import PanelService from './PanelService';
 import WorkflowStepsService from './WorkflowStepsService';
 import StudyPrefetcherService from './StudyPrefetcherService';
-import OnboardingService from './OnboardingService';
 
 import type Services from '../types/Services';
 
@@ -45,5 +44,4 @@ export {
   PanelService,
   WorkflowStepsService,
   StudyPrefetcherService,
-  OnboardingService,
 };

platform/core/src/types/AppTypes.ts

@@ -15,7 +15,6 @@ import PanelServiceType from '../services/PanelService';
 import UIDialogServiceType from '../services/UIDialogService';
 import UIViewportDialogServiceType from '../services/UIViewportDialogService';
 import StudyPrefetcherServiceType from '../services/StudyPrefetcherService';
-import onboardingServiceType from '../services/OnboardingService';
 
 import ServicesManagerType from '../services/ServicesManager';
 import CommandsManagerType from '../classes/CommandsManager';
@@ -44,7 +43,6 @@ declare global {
     export type UIViewportDialogService = UIViewportDialogServiceType;
     export type PanelService = PanelServiceType;
     export type StudyPrefetcherService = StudyPrefetcherServiceType;
-    export type OnboardingService = onboardingServiceType;
 
     export interface Managers {
       servicesManager?: ServicesManager;
@@ -69,7 +67,6 @@ declare global {
       uiViewportDialogService?: UIViewportDialogServiceType;
       panelService?: PanelServiceType;
       studyPrefetcherService?: StudyPrefetcherServiceType;
-      onboardingService?: onboardingServiceType;
     }
     export interface Config {
       routerBasename?: string;

platform/core/src/types/Services.ts

@@ -14,7 +14,6 @@ import {
   PanelService,
   UIDialogService,
   UIViewportDialogService,
-  OnboardingService,
 } from '../services';
 
 /**
@@ -37,7 +36,6 @@ interface Services {
   uiDialogService?: UIDialogService;
   uiViewportDialogService?: UIViewportDialogService;
   panelService?: PanelService;
-  onboardingService?: OnboardingService;
 }
 
 export default Services;

platform/ui-next/package.json

@@ -52,6 +52,7 @@
     "react": "^18.3.1",
     "react-day-picker": "^8.10.1",
     "react-shepherd": "^6.1.1",
+    "shepherd.js": "^13.0.3",
     "sonner": "^1.4.41",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "3.2.4",

platform/ui/src/components/LayoutPreset/LayoutPreset.tsx

@@ -22,7 +22,14 @@ function LayoutPreset({
         name={icon}
         className="group-hover:text-primary-light"
       />
-      {title && <div className="font-inter text-sm text-white">{title}</div>}
+      {title && (
+        <div
+          className="font-inter text-sm text-white"
+          data-cy={title}
+        >
+          {title}
+        </div>
+      )}
     </div>
   );
 }