diff --git a/platform/app/public/config/default.js b/platform/app/public/config/default.js index 08109bb00..42dc11282 100644 --- a/platform/app/public/config/default.js +++ b/platform/app/public/config/default.js @@ -1,5 +1,3 @@ -import { tours } from './tours/tours'; - /** @type {AppTypes.Config} */ window.config = { @@ -293,6 +291,109 @@ window.config = { keys: ['9'], }, ], - - tours, + tours: [ + { + id: 'basicViewerTour', + 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', + }, + }, + ], + tourOptions: {}, + }, + ], }; diff --git a/platform/app/public/config/tours/tours.ts b/platform/app/public/config/tours/tours.ts deleted file mode 100644 index f1fef1beb..000000000 --- a/platform/app/public/config/tours/tours.ts +++ /dev/null @@ -1,106 +0,0 @@ -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 }; diff --git a/platform/core/src/types/AppTypes.ts b/platform/core/src/types/AppTypes.ts index 7d5d35f5e..579dfa313 100644 --- a/platform/core/src/types/AppTypes.ts +++ b/platform/core/src/types/AppTypes.ts @@ -22,6 +22,8 @@ import ExtensionManagerType from '../extensions/ExtensionManager'; import Hotkey from '../classes/Hotkey'; +import { StepOptions, TourOptions } from 'shepherd.js'; + declare global { namespace AppTypes { export type ServicesManager = ServicesManagerType; @@ -129,6 +131,12 @@ declare global { maxNumPrefetchRequests: number; order: 'closest' | 'downward' | 'upward'; }; + tours?: Array<{ + id: string; + steps: StepOptions[]; + tourOptions: TourOptions; + route: string; + }>; } export interface Test {