Add Interactive Web Tour for Virtual Studies and Group Comparison (#4687)

Beking0912 · inodb · web-flow · commit b79cc3e28e61 · 2023-08-22T19:06:41.000-04:00
Co-authored-by: Ino de Bruijn &lt;ino@ino.bio&gt;
diff --git a/end-to-end-test/local/runtime-config/portal.properties b/end-to-end-test/local/runtime-config/portal.properties
@@ -74,6 +74,7 @@ skin.right_nav.show_data_sets=true
 skin.right_nav.show_examples=false
 skin.right_nav.show_testimonials=false
 skin.right_nav.show_whats_new=false
+skin.right_nav.show_web_tours=true
 
 # settings controlling what to show in the right navigation bar
 skin.study_view.link_text=To build your own case set, try out our enhanced Study View.
diff --git a/src/config/IAppConfig.ts b/src/config/IAppConfig.ts
@@ -104,6 +104,7 @@ export interface IServerConfig {
     skin_right_nav_show_testimonials: boolean;
     skin_right_nav_show_whats_new: boolean;
     skin_right_nav_show_twitter: boolean;
+    skin_right_nav_show_web_tours: boolean;
     skin_right_nav_whats_new_blurb: string | null;
     skin_show_about_tab: boolean;
     skin_show_data_tab: boolean;
diff --git a/src/config/serverConfigDefaults.ts b/src/config/serverConfigDefaults.ts
@@ -75,6 +75,7 @@ export const ServerConfigDefaults: Partial<IServerConfig> = {
     skin_right_nav_show_examples: true,
     skin_right_nav_show_testimonials: true,
     skin_right_nav_show_whats_new: true,
+    skin_right_nav_show_web_tours: false,
     skin_right_nav_show_twitter: false,
     skin_citation_rule_text:
         'Please cite: <a href="http://cancerdiscovery.aacrjournals.org/content/2/5/401.abstract" target="_blank">Cerami et al., 2012</a> &amp; <a href="http://www.ncbi.nlm.nih.gov/pubmed/23550210" target="_blank">Gao et al., 2013</a>',
diff --git a/src/pages/groupComparison/GroupComparisonPage.tsx b/src/pages/groupComparison/GroupComparisonPage.tsx
@@ -51,6 +51,7 @@ import { HelpWidget } from 'shared/components/HelpWidget/HelpWidget';
 import GroupComparisonPathwayMapper from './pathwayMapper/GroupComparisonPathwayMapper';
 import GroupComparisonMutationsTab from './GroupComparisonMutationsTab';
 import GroupComparisonPathwayMapperUserSelectionStore from './pathwayMapper/GroupComparisonPathwayMapperUserSelectionStore';
+import { Tour } from 'tours';
 
 export interface IGroupComparisonPageProps {
     routing: any;
@@ -363,7 +364,7 @@ export default class GroupComparisonPage extends React.Component<
                     break;
                 case 1:
                     studyHeader = (
-                        <h3>
+                        <h3 data-tour="single-study-group-comparison-header">
                             <StudyLink studyId={studies[0].studyId}>
                                 {studies[0].name}
                             </StudyLink>
@@ -392,6 +393,7 @@ export default class GroupComparisonPage extends React.Component<
                     <span>
                         {studyHeader}Groups from{' '}
                         <span
+                            data-tour="single-study-group-comparison-attribute"
                             style={{ fontWeight: 'bold', fontStyle: 'italic' }}
                         >
                             {this.store.sessionClinicalAttributeName}
@@ -506,6 +508,7 @@ export default class GroupComparisonPage extends React.Component<
                         </div>
                     </div>
                     <div>{this.tabs.component}</div>
+                    {this.tabs.isComplete && <Tour />}
                 </div>
             </PageLayout>
         );
diff --git a/src/pages/groupComparison/groupSelector/GroupSelector.tsx b/src/pages/groupComparison/groupSelector/GroupSelector.tsx
@@ -208,6 +208,7 @@ export default class GroupSelector extends React.Component<
                 );
                 return (
                     <div
+                        data-tour="single-study-group-comparison-groups"
                         style={{
                             display: 'flex',
                             alignItems: 'center',
diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
@@ -11,6 +11,7 @@ import RightBar from '../../shared/components/rightbar/RightBar';
 import './homePage.scss';
 import autobind from 'autobind-decorator';
 import { createQueryStore } from 'shared/lib/createQueryStore';
+import { setTourLocalStorageFromURL } from 'tours';
 
 const win = window as any;
 
@@ -37,6 +38,10 @@ export default class HomePage extends React.Component<
         this.queryStore = createQueryStore();
     }
 
+    componentDidMount() {
+        setTourLocalStorageFromURL();
+    }
+
     private handleTabChange(id: string) {
         this.props.routing.updateRoute({ tab: id });
     }
diff --git a/src/pages/studyView/StudyViewPage.tsx b/src/pages/studyView/StudyViewPage.tsx
@@ -76,6 +76,7 @@ import { CustomChartData } from 'shared/api/session-service/sessionServiceModels
 import { HelpWidget } from 'shared/components/HelpWidget/HelpWidget';
 import { buildCBioPortalPageUrl } from 'shared/api/urls';
 import StudyViewPageSettingsMenu from 'pages/studyView/menu/StudyViewPageSettingsMenu';
+import { Tour } from 'tours';
 import QueryString from 'qs';
 
 export interface IStudyViewPageProps {
@@ -367,6 +368,21 @@ export default class StudyViewPage extends React.Component<
         }
     }
 
+    @computed get isLoading() {
+        return (
+            this.store.queriedSampleIdentifiers.isPending ||
+            this.store.invalidSampleIds.isPending ||
+            this.body.isPending
+        );
+    }
+
+    @computed get isAnySampleSelected() {
+        return this.store.selectedSamples.result.length !==
+            this.store.samples.result.length
+            ? 1
+            : 0;
+    }
+
     @computed get studyViewFullUrlWithFilter() {
         return `${window.location.protocol}//${window.location.host}${
             window.location.pathname
@@ -1024,14 +1040,16 @@ export default class StudyViewPage extends React.Component<
             >
                 <LoadingIndicator
                     size={'big'}
-                    isLoading={
-                        this.store.queriedSampleIdentifiers.isPending ||
-                        this.store.invalidSampleIds.isPending ||
-                        this.body.isPending
-                    }
+                    isLoading={this.isLoading}
                     center={true}
                 />
                 {this.body.component}
+                {!this.isLoading && (
+                    <Tour
+                        studies={this.isAnySampleSelected}
+                        isLoggedIn={this.props.appStore.isLoggedIn}
+                    />
+                )}
             </PageLayout>
         );
     }
diff --git a/src/pages/studyView/charts/ChartContainer.tsx b/src/pages/studyView/charts/ChartContainer.tsx
@@ -108,6 +108,7 @@ const COMPARISON_CHART_TYPES: ChartType[] = [
 ];
 
 export interface IChartContainerProps {
+    id?: string;
     chartMeta: ChartMeta;
     chartType: ChartType;
     store: StudyViewPageStore;
@@ -466,7 +467,10 @@ export class ChartContainer extends React.Component<IChartContainerProps, {}> {
         if (this.selectedRowsKeys!.length >= 2) {
             return {
                 content: (
-                    <div style={{ display: 'flex', alignItems: 'center' }}>
+                    <div
+                        data-tour="mutated-genes-table-compare-btn"
+                        style={{ display: 'flex', alignItems: 'center' }}
+                    >
                         <ComparisonVsIcon
                             className={classnames('fa fa-fw')}
                             style={{ marginRight: 4 }}
diff --git a/src/pages/studyView/studyPageHeader/ActionButtons.tsx b/src/pages/studyView/studyPageHeader/ActionButtons.tsx
@@ -180,6 +180,7 @@ export default class ActionButtons extends React.Component<
                         overlay={<span>{this.virtualStudyButtonTooltip}</span>}
                     >
                         <button
+                            data-tour="action-button-bookmark"
                             className="btn btn-default btn-sm"
                             disabled={!this.props.loadingComplete}
                         >
diff --git a/src/pages/studyView/studyPageHeader/studySummary/StudySummary.tsx b/src/pages/studyView/studyPageHeader/studySummary/StudySummary.tsx
@@ -172,6 +172,7 @@ export default class StudySummary extends React.Component<
                         {this.descriptionFirstLine}
                         {this.hasMoreDescription && (
                             <i
+                                data-tour="show-more-description-icon"
                                 className={`fa fa-${
                                     this.showMoreDescription ? 'minus' : 'plus'
                                 }-circle`}
diff --git a/src/pages/studyView/tabs/SummaryTab.tsx b/src/pages/studyView/tabs/SummaryTab.tsx
@@ -352,6 +352,7 @@ export class StudySummaryTab extends React.Component<
                     this.store.resetGeneFilter(chartMeta.uniqueKey);
                 props.selectedGenes = this.store.selectedGenes;
                 props.onGeneSelect = this.store.onCheckGene;
+                props.id = 'mutated-genes-table';
                 props.title = this.store.getChartTitle(
                     ChartTypeEnum.MUTATED_GENES_TABLE,
                     props.title
@@ -728,7 +729,7 @@ export class StudySummaryTab extends React.Component<
         // 2.   The maintainer of RGL repo currently not actively accepts pull requests. So we don't know when the
         //      issue will be solved.
         return (
-            <div key={chartMeta.uniqueKey}>
+            <div key={chartMeta.uniqueKey} data-tour={props.id}>
                 <DelayedRender>
                     {/* Delay the render after a setTimeout, because synchronous rendering would jam UI updates
                     and make things laggy */}
diff --git a/src/pages/studyView/virtualStudy/VirtualStudy.tsx b/src/pages/studyView/virtualStudy/VirtualStudy.tsx
@@ -229,7 +229,10 @@ export default class VirtualStudy extends React.Component<
 
     render() {
         return (
-            <div className={styles.virtualStudy}>
+            <div
+                data-tour="virtual-study-summary-panel"
+                className={styles.virtualStudy}
+            >
                 <If condition={this.virtualStudy.isError}>
                     <Then>
                         <div style={{ textAlign: 'center' }}>
@@ -277,6 +280,7 @@ export default class VirtualStudy extends React.Component<
                                             <div className="input-group-btn">
                                                 {this.showSaveButton && (
                                                     <button
+                                                        data-tour="virtual-study-summary-save-btn"
                                                         className={classnames(
                                                             'btn btn-default',
                                                             styles.saveButton
@@ -308,6 +312,7 @@ export default class VirtualStudy extends React.Component<
                                                     </button>
                                                 )}
                                                 <button
+                                                    data-tour="virtual-study-summary-share-btn"
                                                     className={classnames(
                                                         'btn btn-default',
                                                         styles.saveButton
@@ -422,6 +427,7 @@ export default class VirtualStudy extends React.Component<
                                         </span>
                                         {this.saving && (
                                             <span
+                                                data-tour="virtual-study-summary-query-btn"
                                                 className="btn btn-default"
                                                 onClick={event => {
                                                     if (
diff --git a/src/shared/components/PageLayout/PageLayout.tsx b/src/shared/components/PageLayout/PageLayout.tsx
@@ -28,7 +28,7 @@ export class PageLayout extends React.Component<IPageLayout, {}> {
                         noMargin
                     )}
                 >
-                    <div id="mainColumn">
+                    <div id="mainColumn" data-tour="mainColumn">
                         <div>{this.props.children}</div>
                     </div>
                     {this.props.rightBar && (
diff --git a/src/shared/components/query/CancerStudySelector.tsx b/src/shared/components/query/CancerStudySelector.tsx
@@ -238,6 +238,7 @@ export default class CancerStudySelector extends React.Component<
 
                             return (
                                 <div
+                                    data-tour="cancer-study-search-box"
                                     style={{
                                         display: 'flex',
                                         alignItems: 'center',
@@ -268,6 +269,7 @@ export default class CancerStudySelector extends React.Component<
                             </Then>
                         </If>
                         <div
+                            data-tour="cancer-study-list-container"
                             className={styles.cancerStudyListContainer}
                             data-test="cancerTypeListContainer"
                         >
diff --git a/src/shared/components/query/CancerStudyTreeData.ts b/src/shared/components/query/CancerStudyTreeData.ts
@@ -10,7 +10,10 @@ export const CANCER_TYPE_ROOT = 'tissue';
 export const VIRTUAL_STUDY_NAME = 'My Virtual Studies';
 export const PHYSICAL_STUDY_NAME = 'Studies';
 
-export type CancerTypeWithVisibility = CancerType & { alwaysVisible?: boolean };
+export type CancerTypeWithVisibility = CancerType & {
+    alwaysVisible?: boolean;
+    id?: string;
+};
 
 export type CancerTreeNode = CancerTypeWithVisibility | CancerStudy;
 
@@ -51,6 +54,7 @@ export default class CancerStudyTreeData {
     };
 
     virtualStudyCategory: CancerTypeWithVisibility = {
+        id: 'my_virtual_studies_list',
         dedicatedColor: '',
         name: VIRTUAL_STUDY_NAME,
         parent: CANCER_TYPE_ROOT,
@@ -169,6 +173,7 @@ export default class CancerStudyTreeData {
                     allStudyTags.find(
                         t => t.studyId === (node as CancerStudy).studyId
                     );
+
                 let studyTags =
                     foundStudyByTags && foundStudyByTags?.tags
                         ? stringifyTags(JSON.parse(foundStudyByTags.tags))
diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
@@ -426,6 +426,7 @@ export default class QueryContainer extends React.Component<
                                     }
                                 >
                                     <a
+                                        data-tour="explore-studies-button"
                                         onClick={() =>
                                             !this
                                                 .exploreCohortsButtonDisabled &&
diff --git a/src/shared/components/query/studyList/StudyList.tsx b/src/shared/components/query/studyList/StudyList.tsx
@@ -149,7 +149,11 @@ export default class StudyList extends QueryStoreComponent<
             styles.Level(currentLevel)
         );
         return (
-            <ul key={arrayIndex} className={ulClassName}>
+            <ul
+                data-tour={cancerType.id}
+                key={arrayIndex}
+                className={ulClassName}
+            >
                 {heading}
                 {childStudies.map(this.renderCancerStudy)}
                 {childCancerTypes.map(this.renderCancerType)}
diff --git a/src/shared/components/rightbar/RightBar.tsx b/src/shared/components/rightbar/RightBar.tsx
@@ -9,6 +9,7 @@ import { Link } from 'react-router-dom';
 import LoadingIndicator from '../loadingIndicator/LoadingIndicator';
 import { buildCBioPortalPageUrl } from '../../api/urls';
 import { ResultsViewTab } from '../../../pages/resultsView/ResultsViewPageHelpers';
+import { Tour } from 'tours';
 import { mockOrder } from 'pages/patientView/vafPlot/mockData';
 import { remoteData } from 'cbioportal-frontend-commons';
 import { sleep } from 'shared/lib/TimeUtils';
@@ -298,10 +299,32 @@ export default class RightBar extends React.Component<
         ) : null;
     }
 
+    getHomePageTour() {
+        const isLoading =
+            !this.studyStore.cancerTypes.isComplete ||
+            !this.studyStore.cancerStudies.isComplete ||
+            !this.studyStore.userVirtualStudies.isComplete;
+        return getServerConfig().skin_right_nav_show_web_tours ? (
+            <div className="rightBarSection" style={{ minHeight: '70px' }}>
+                <h3>Interactive Tours</h3>
+                {!isLoading && (
+                    <Tour
+                        hideEntry={false}
+                        isLoggedIn={this.studyStore.userLoggedIn}
+                        studies={
+                            this.studyStore.selectableSelectedStudyIds.length
+                        }
+                    />
+                )}
+            </div>
+        ) : null;
+    }
+
     render() {
         return (
             <div>
                 {this.getWhatsNew()}
+                {this.getHomePageTour()}
                 {this.getExampleSection()}
                 {this.getInstallationMap()}
                 {this.getTestimonialsSection()}
diff --git a/src/shared/components/survival/LeftTruncationCheckbox.tsx b/src/shared/components/survival/LeftTruncationCheckbox.tsx
@@ -65,7 +65,7 @@ const LeftTruncationCheckbox: React.FunctionComponent<LeftTruncationCheckboxProp
                                         {'. '}
                                         This involves adjusting patients at risk
                                         at time t to date of sequencing rather
-                                        than date of diagnosis. Note that some 
+                                        than date of diagnosis. Note that some
                                         patients might be excluded because they
                                         passed away before their biopsies were
                                         sequenced.
diff --git a/src/tours/Steps/GroupComparison.tsx b/src/tours/Steps/GroupComparison.tsx
diff --git a/src/tours/Steps/VirtualStudy.tsx b/src/tours/Steps/VirtualStudy.tsx
diff --git a/src/tours/Steps/index.tsx b/src/tours/Steps/index.tsx
diff --git a/src/tours/Tour/index.tsx b/src/tours/Tour/index.tsx
diff --git a/src/tours/Tour/styles.css b/src/tours/Tour/styles.css
diff --git a/src/tours/Tour/types.tsx b/src/tours/Tour/types.tsx
diff --git a/src/tours/index.tsx b/src/tours/index.tsx

Original file line number	Diff line number	Diff line change
`@@ -180,6 +180,7 @@ export default class ActionButtons extends React.Component<`
`180`	`180`	`overlay={<span>{this.virtualStudyButtonTooltip}</span>}`
`181`	`181`	`>`
`182`	`182`	`<button`
	`183`	`+ data-tour="action-button-bookmark"`
`183`	`184`	`className="btn btn-default btn-sm"`
`184`	`185`	`disabled={!this.props.loadingComplete}`
`185`	`186`	`>`
Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@ export class PageLayout extends React.Component<IPageLayout, {}> {`
`28`	`28`	`noMargin`
`29`	`29`	`)}`
`30`	`30`	`>`
`31`		`- <div id="mainColumn">`
	`31`	`+ <div id="mainColumn" data-tour="mainColumn">`
`32`	`32`	`<div>{this.props.children}</div>`
`33`	`33`	`</div>`
`34`	`34`	`{this.props.rightBar && (`
Original file line number	Diff line number	Diff line change
`@@ -426,6 +426,7 @@ export default class QueryContainer extends React.Component<`
`426`	`426`	`}`
`427`	`427`	`>`
`428`	`428`	`<a`
	`429`	`+ data-tour="explore-studies-button"`
`429`	`430`	`onClick={() =>`
`430`	`431`	`!this`
`431`	`432`	`.exploreCohortsButtonDisabled &&`