This commit is contained in:
Ibrahim 2024-09-27 15:44:01 -04:00
parent ea7a3e07cb
commit 579c0c9d01
5 changed files with 47 additions and 249 deletions

View File

@ -156,7 +156,7 @@ function ViewerLayout({
) : null} ) : null}
</React.Fragment> </React.Fragment>
</div> </div>
<Onboarding /> <Onboarding servicesManager={servicesManager} />
<InvestigationalUseDialog dialogConfiguration={appConfig?.investigationalUseDialog} /> <InvestigationalUseDialog dialogConfiguration={appConfig?.investigationalUseDialog} />
</div> </div>
); );

View File

@ -332,30 +332,8 @@ window.config = {
}, },
advanceOn: { advanceOn: {
selector: '.cornerstone-viewport-element', selector: '.cornerstone-viewport-element',
event: 'CORNERSTONE_CAMERA_MODIFIED', event: 'CORNERSTONE_TOOLS_MOUSE_UP',
}, },
/**
buttons: [
{
text: 'Next',
action() {
this.next();
},
},
{
text: 'Skip',
action() {
this.cancel();
},
},
{
text: 'Back',
action() {
this.back();
},
},
],
*/
}, },
{ {
id: 'pan', id: 'pan',
@ -365,30 +343,8 @@ window.config = {
}, },
advanceOn: { advanceOn: {
selector: '.cornerstone-viewport-element', selector: '.cornerstone-viewport-element',
event: 'CORNERSTONE_TOOLS_MOUSE_DRAG', event: 'CORNERSTONE_TOOLS_MOUSE_UP',
}, },
/**
buttons: [
{
text: 'Next',
action() {
this.next();
},
},
{
text: 'Skip',
action() {
this.cancel();
},
},
{
text: 'Back',
action() {
this.back();
},
},
],
*/
}, },
{ {
id: 'windowing', id: 'windowing',
@ -397,29 +353,11 @@ window.config = {
element: '.viewport-element', element: '.viewport-element',
on: 'left-start', on: 'left-start',
}, },
/** advanceOn: {
buttons: [ selector: '.cornerstone-viewport-element',
{ event: 'CORNERSTONE_TOOLS_MOUSE_UP',
text: 'Next',
action() {
this.next();
}, },
}, },
{
text: 'Skip',
action() {
this.cancel();
},
},
{
text: 'Back',
action() {
this.back();
},
},
],
*/
},
{ {
id: 'length', id: 'length',
text: 'You can measure the length of a region using the Length tool.', text: 'You can measure the length of a region using the Length tool.',
@ -427,29 +365,11 @@ window.config = {
element: '[data-cy="MeasurementTools-split-button-primary"]', element: '[data-cy="MeasurementTools-split-button-primary"]',
on: 'bottom', on: 'bottom',
}, },
/** advanceOn: {
buttons: [ selector: '[data-cy="MeasurementTools-split-button-primary"]',
{ event: 'click',
text: 'Next',
action() {
this.next();
}, },
}, },
{
text: 'Skip',
action() {
this.cancel();
},
},
{
text: 'Back',
action() {
this.back();
},
},
],
*/
},
{ {
id: 'drawAnnotation', id: 'drawAnnotation',
text: 'Use the length tool on the viewport to measure the length of a region.', text: 'Use the length tool on the viewport to measure the length of a region.',
@ -457,29 +377,11 @@ window.config = {
element: '.viewport-element', element: '.viewport-element',
on: 'left-start', on: 'left-start',
}, },
/** advanceOn: {
buttons: [ selector: 'body',
{ event: 'event::measurement_added',
text: 'Next',
action() {
this.next();
}, },
}, },
{
text: 'Skip',
action() {
this.cancel();
},
},
{
text: 'Back',
action() {
this.back();
},
},
],
*/
},
{ {
id: 'trackMeasurement', id: 'trackMeasurement',
text: 'Click yes to track the measurements in the measurement panel.', text: 'Click yes to track the measurements in the measurement panel.',
@ -487,29 +389,11 @@ window.config = {
element: '[data-cy="prompt-begin-tracking-yes-btn"]', element: '[data-cy="prompt-begin-tracking-yes-btn"]',
on: 'bottom', on: 'bottom',
}, },
/** advanceOn: {
buttons: [ selector: '[data-cy="prompt-begin-tracking-yes-btn"]',
{ event: 'click',
text: 'Next',
action() {
this.next();
}, },
}, },
{
text: 'Skip',
action() {
this.cancel();
},
},
{
text: 'Back',
action() {
this.back();
},
},
],
*/
},
{ {
id: 'openMeasurementPanel', id: 'openMeasurementPanel',
text: 'Click the measurements button to open the measurements panel.', text: 'Click the measurements button to open the measurements panel.',
@ -517,59 +401,23 @@ window.config = {
element: '#trackedMeasurements-btn', element: '#trackedMeasurements-btn',
on: 'left-start', on: 'left-start',
}, },
/** advanceOn: {
buttons: [ selector: '#trackedMeasurements-btn',
{ event: 'click',
text: 'Next',
action() {
this.next();
}, },
}, },
{
text: 'Skip',
action() {
this.cancel();
},
},
{
text: 'Back',
action() {
this.back();
},
},
],
*/
},
{ {
id: 'scrollAwayFromMeasurement', id: 'scrollAwayFromMeasurement',
text: 'Scroll the images using the mouse wheel away from the measurement.', text: 'Scroll the images using the mouse wheel away from the measurement.',
attachTo: { attachTo: {
element: '.viewport-element', element: '.scroll',
on: 'left-start', on: 'left-start',
}, },
/** advanceOn: {
buttons: [ selector: '.cornerstone-viewport-element',
{ event: 'CORNERSTONE_TOOLS_MOUSE_WHEEL',
text: 'Next',
action() {
this.next();
}, },
}, },
{
text: 'Skip',
action() {
this.cancel();
},
},
{
text: 'Back',
action() {
this.back();
},
},
],
*/
},
{ {
id: 'jumpToMeasurement', id: 'jumpToMeasurement',
text: 'Click the measurement in the measurement panel to jump to it.', text: 'Click the measurement in the measurement panel to jump to it.',
@ -577,29 +425,11 @@ window.config = {
element: '[data-cy="measurement-item"]', element: '[data-cy="measurement-item"]',
on: 'left-start', on: 'left-start',
}, },
/** advanceOn: {
buttons: [ selector: '[data-cy="measurement-item"]',
{ event: 'click',
text: 'Next',
action() {
this.next();
}, },
}, },
{
text: 'Skip',
action() {
this.cancel();
},
},
{
text: 'Back',
action() {
this.back();
},
},
],
*/
},
{ {
id: 'changeLayout', id: 'changeLayout',
text: 'You can change the layout of the viewer using the layout button.', text: 'You can change the layout of the viewer using the layout button.',
@ -607,29 +437,11 @@ window.config = {
element: '[data-cy="Layout"]', element: '[data-cy="Layout"]',
on: 'bottom', on: 'bottom',
}, },
/** advanceOn: {
buttons: [ selector: '[data-cy="Layout"]',
{ event: 'click',
text: 'Next',
action() {
this.next();
}, },
}, },
{
text: 'Skip',
action() {
this.cancel();
},
},
{
text: 'Back',
action() {
this.back();
},
},
],
*/
},
{ {
id: 'selectLayout', id: 'selectLayout',
text: 'Select the MPR layout to view the images in MPR mode.', text: 'Select the MPR layout to view the images in MPR mode.',
@ -637,29 +449,11 @@ window.config = {
element: '[data-cy="MPR"]', element: '[data-cy="MPR"]',
on: 'left-start', on: 'left-start',
}, },
/** advanceOn: {
buttons: [ selector: '[data-cy="MPR"]',
{ event: 'click',
text: 'Complete',
action() {
this.complete();
}, },
}, },
{
text: 'Skip',
action() {
this.cancel();
},
},
{
text: 'Back',
action() {
this.back();
},
},
],
*/
},
], ],
tourOptions: {}, tourOptions: {},
}, },

View File

@ -535,7 +535,7 @@ function WorkList({
WhiteLabeling={appConfig.whiteLabeling} WhiteLabeling={appConfig.whiteLabeling}
showPatientInfo={PatientInfoVisibility.DISABLED} showPatientInfo={PatientInfoVisibility.DISABLED}
/> />
<Onboarding /> <Onboarding servicesManager={servicesManager} />
<InvestigationalUseDialog dialogConfiguration={appConfig?.investigationalUseDialog} /> <InvestigationalUseDialog dialogConfiguration={appConfig?.investigationalUseDialog} />
<div className="ohif-scrollbar ohif-scrollbar-stable-gutter flex grow flex-col overflow-y-auto sm:px-5"> <div className="ohif-scrollbar ohif-scrollbar-stable-gutter flex grow flex-col overflow-y-auto sm:px-5">
<StudyListFilter <StudyListFilter

View File

@ -80,6 +80,9 @@ function _broadcastEvent(eventName, callbackProps) {
const hasListeners = Object.keys(this.listeners).length > 0; const hasListeners = Object.keys(this.listeners).length > 0;
const hasCallbacks = Array.isArray(this.listeners[eventName]); const hasCallbacks = Array.isArray(this.listeners[eventName]);
const event = new CustomEvent(eventName, { detail: callbackProps });
document.body.dispatchEvent(event);
if (hasListeners && hasCallbacks) { if (hasListeners && hasCallbacks) {
this.listeners[eventName].forEach(listener => { this.listeners[eventName].forEach(listener => {
listener.callback(callbackProps); listener.callback(callbackProps);

View File

@ -17,7 +17,7 @@ const markTourAsShown = (tourId: string) => {
} }
}; };
const Onboarding = () => { const Onboarding = ({ servicesManager }: withAppTypes) => {
const Shepherd = useShepherd(); const Shepherd = useShepherd();
const location = useLocation(); const location = useLocation();
const tours = window.config.tours as Array<{ const tours = window.config.tours as Array<{
@ -50,7 +50,7 @@ const Onboarding = () => {
} }
}); });
if (!hasTourBeenShown(matchingTour.id)) { if (true) {
observer.observe(document.body, { childList: true, subtree: true }); observer.observe(document.body, { childList: true, subtree: true });
setTimeout(() => observer.disconnect(), 5000); setTimeout(() => observer.disconnect(), 5000);
} }
@ -59,6 +59,7 @@ const Onboarding = () => {
startTour(); startTour();
} }
}, [Shepherd, tours, location.pathname]); }, [Shepherd, tours, location.pathname]);
return null; return null;
}; };