define data-tour attribute for the tours

cBioPortal · Aug 18, 2023 · 6cb6558 · 6cb6558
1 parent 51ab5f2
commit 6cb6558
Show file tree

Hide file tree

Showing 13 changed files with 49 additions and 45 deletions.
diff --git a/src/pages/groupComparison/GroupComparisonPage.tsx b/src/pages/groupComparison/GroupComparisonPage.tsx
@@ -364,7 +364,7 @@ export default class GroupComparisonPage extends React.Component<
                     break;
                 case 1:
                     studyHeader = (
-                        <h3 id="single-study-group-comparison-header">
+                        <h3 data-tour="single-study-group-comparison-header">
                             <StudyLink studyId={studies[0].studyId}>
                                 {studies[0].name}
                             </StudyLink>
@@ -393,7 +393,7 @@ export default class GroupComparisonPage extends React.Component<
                     <span>
                         {studyHeader}Groups from{' '}
                         <span
-                            id="single-study-group-comparison-attribute"
+                            data-tour="single-study-group-comparison-attribute"
                             style={{ fontWeight: 'bold', fontStyle: 'italic' }}
                         >
                             {this.store.sessionClinicalAttributeName}

diff --git a/src/pages/groupComparison/groupSelector/GroupSelector.tsx b/src/pages/groupComparison/groupSelector/GroupSelector.tsx
@@ -208,7 +208,7 @@ export default class GroupSelector extends React.Component<
                 );
                 return (
                     <div
-                        id="single-study-group-comparison-groups"
+                        data-tour="single-study-group-comparison-groups"
                         style={{
                             display: 'flex',
                             alignItems: 'center',

diff --git a/src/pages/studyView/charts/ChartContainer.tsx b/src/pages/studyView/charts/ChartContainer.tsx
@@ -468,7 +468,7 @@ export class ChartContainer extends React.Component<IChartContainerProps, {}> {
             return {
                 content: (
                     <div
-                        id="mutated-genes-table-compare-btn"
+                        data-tour="mutated-genes-table-compare-btn"
                         style={{ display: 'flex', alignItems: 'center' }}
                     >
                         <ComparisonVsIcon

diff --git a/src/pages/studyView/studyPageHeader/ActionButtons.tsx b/src/pages/studyView/studyPageHeader/ActionButtons.tsx
@@ -180,7 +180,7 @@ export default class ActionButtons extends React.Component<
                         overlay={<span>{this.virtualStudyButtonTooltip}</span>}
                     >
                         <button
-                            id="action-button-bookmark"
+                            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,7 +172,7 @@ export default class StudySummary extends React.Component<
                         {this.descriptionFirstLine}
                         {this.hasMoreDescription && (
                             <i
-                                id="show-more-description-icon"
+                                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
@@ -729,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} id={props.id}>
+            <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
@@ -230,7 +230,7 @@ export default class VirtualStudy extends React.Component<
     render() {
         return (
             <div
-                id="virtual-study-summary-panel"
+                data-tour="virtual-study-summary-panel"
                 className={styles.virtualStudy}
             >
                 <If condition={this.virtualStudy.isError}>
@@ -280,7 +280,7 @@ export default class VirtualStudy extends React.Component<
                                             <div className="input-group-btn">
                                                 {this.showSaveButton && (
                                                     <button
-                                                        id="virtual-study-summary-save-btn"
+                                                        data-tour="virtual-study-summary-save-btn"
                                                         className={classnames(
                                                             'btn btn-default',
                                                             styles.saveButton
@@ -312,7 +312,7 @@ export default class VirtualStudy extends React.Component<
                                                     </button>
                                                 )}
                                                 <button
-                                                    id="virtual-study-summary-share-btn"
+                                                    data-tour="virtual-study-summary-share-btn"
                                                     className={classnames(
                                                         'btn btn-default',
                                                         styles.saveButton
@@ -427,7 +427,7 @@ export default class VirtualStudy extends React.Component<
                                         </span>
                                         {this.saving && (
                                             <span
-                                                id="virtual-study-summary-query-btn"
+                                                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,7 +238,7 @@ export default class CancerStudySelector extends React.Component<
 
                             return (
                                 <div
-                                    id="cancer-study-search-box"
+                                    data-tour="cancer-study-search-box"
                                     style={{
                                         display: 'flex',
                                         alignItems: 'center',
@@ -269,7 +269,7 @@ export default class CancerStudySelector extends React.Component<
                             </Then>
                         </If>
                         <div
-                            id="cancer-study-list-container"
+                            data-tour="cancer-study-list-container"
                             className={styles.cancerStudyListContainer}
                             data-test="cancerTypeListContainer"
                         >

diff --git a/src/shared/components/query/QueryContainer.tsx b/src/shared/components/query/QueryContainer.tsx
@@ -426,7 +426,7 @@ export default class QueryContainer extends React.Component<
                                     }
                                 >
                                     <a
-                                        id="explore-studies-button"
+                                        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 id={cancerType.id} 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/tours/Steps/GroupComparison.tsx b/src/tours/Steps/GroupComparison.tsx
@@ -13,7 +13,7 @@ const getSteps: GetSteps = ({
 }) => [
     // Step 0: Type “glioma” in the search box
     {
-        selector: '#cancer-study-search-box input',
+        selector: '[data-tour="cancer-study-search-box"] input',
         content: () => (
             <div className="step">
                 <p className="title">Search for the studies</p>
@@ -30,7 +30,7 @@ const getSteps: GetSteps = ({
     },
     // Step 1: Click on “View study summary” button
     {
-        selector: '#cancer-study-list-container',
+        selector: '[data-tour="cancer-study-list-container"]',
         content: () => (
             <div className="step">
                 <p className="title">Click the button</p>
@@ -48,7 +48,7 @@ const getSteps: GetSteps = ({
     // Step 2:  Select more than one sample in the Mutated Genes table
     // TODO: must have overlap
     {
-        selector: '#mutated-genes-table',
+        selector: '[data-tour="mutated-genes-table"]',
         content: () => (
             <div className="step">
                 <p className="title">Select two samples</p>
@@ -64,7 +64,7 @@ const getSteps: GetSteps = ({
             setLockTour(true);
             if (node) {
                 const findCompareBtn = () => {
-                    const compareBtn = document.getElementById('mutated-genes-table-compare-btn');
+                    const compareBtn = document.querySelector('[data-tour="mutated-genes-table-compare-btn"]');
                     if (compareBtn) {
                         setGotoStep(3);
                         document.removeEventListener('click', findCompareBtn);
@@ -76,7 +76,7 @@ const getSteps: GetSteps = ({
     },
     // Step 3:  Click the “Compare” button
     {
-        selector: '#mutated-genes-table-compare-btn',
+        selector: '[data-tour="mutated-genes-table-compare-btn"]',
         content: () => (
             <div className="step">
                 <p className="title">Click the Compare button</p>
@@ -108,7 +108,7 @@ const getIntroductionTabsSteps: GetSteps = ({
 }) => [
     // Step 4: Show the header of the page
     {
-        selector: '#single-study-group-comparison-header',
+        selector: '[data-tour="single-study-group-comparison-header"]',
         content: () => (
             <div className="step">
                 <p className="title">The original study</p>
@@ -118,7 +118,7 @@ const getIntroductionTabsSteps: GetSteps = ({
     },
     // Step 5: Show the attribute
     {
-        selector: '#single-study-group-comparison-attribute',
+        selector: '[data-tour="single-study-group-comparison-attribute"]',
         content: () => (
             <div className="step">
                 <p className="title">The attribute</p>
@@ -128,7 +128,7 @@ const getIntroductionTabsSteps: GetSteps = ({
     },
     // Step 6: Show the available groups
     {
-        selector: '#single-study-group-comparison-groups',
+        selector: '[data-tour="single-study-group-comparison-groups"]',
         content: () => (
             <div className="step">
                 <p className="title">The available groups</p>
@@ -168,7 +168,7 @@ const getIntroductionTabsSteps: GetSteps = ({
     },
     // Step 8: Intro to the Survival tab
     {
-        selector: '#mainColumn',
+        selector: '[data-tour="mainColumn"]',
         content: () => (
             <div className="step">
                 <p className="title">The Survival tab</p>
@@ -195,7 +195,7 @@ const getIntroductionTabsSteps: GetSteps = ({
     },
      // Step 9: Intro to the Clinical tab
      {
-        selector: '#mainColumn',
+        selector: '[data-tour="mainColumn"]',
         content: () => (
             <div className="step">
                 <p className="title">The Clinical tab</p>
@@ -222,7 +222,7 @@ const getIntroductionTabsSteps: GetSteps = ({
     },
     // Step 10: Intro to the Genomic Alterations tab
     {
-        selector: '#mainColumn',
+        selector: '[data-tour="mainColumn"]',
         content: () => (
             <div className="step">
                 <p className="title">The Genomic Alterations tab</p>

diff --git a/src/tours/Steps/VirtualStudy.tsx b/src/tours/Steps/VirtualStudy.tsx
@@ -13,7 +13,7 @@ const getSteps: GetSteps = ({
 }) => [
     // Step 0: Type “glioma” in the search box
     {
-        selector: '#cancer-study-search-box input',
+        selector: '[data-tour="cancer-study-search-box"] input',
         content: () => (
             <div className="step">
                 <p className="title">Search for the studies</p>
@@ -30,7 +30,7 @@ const getSteps: GetSteps = ({
     },
     // Step 1: Select two studies
     {
-        selector: '#cancer-study-list-container',
+        selector: '[data-tour="cancer-study-list-container"]',
         content: () => (
             <div className="step">
                 <p className="title">Select two studies</p>
@@ -47,7 +47,7 @@ const getSteps: GetSteps = ({
     },
     // Step 2: Click the “Explore Selected Studies” button
     {
-        selector: '#explore-studies-button',
+        selector: '[data-tour="explore-studies-button"]',
         content: () => (
             <div className="step">
                 <p className="title">Click the Explore button</p>
@@ -63,7 +63,7 @@ const getSteps: GetSteps = ({
     },
     // Step 3: Click the “+” icon
     {
-        selector: '#show-more-description-icon',
+        selector: '[data-tour="show-more-description-icon"]',
         content: () => (
             <div className="step">
                 <p className="title">See list of studies</p>
@@ -73,7 +73,7 @@ const getSteps: GetSteps = ({
     },
     // Step 4: Select samples in the Mutated Genes table
     {
-        selector: '#mutated-genes-table',
+        selector: '[data-tour="mutated-genes-table"]',
         content: () => (
             <div className="step">
                 <p className="title">Select samples</p>
@@ -104,7 +104,7 @@ const getSteps: GetSteps = ({
     },
     // Step 6: Click the bookmark icon
     {
-        selector: '#action-button-bookmark',
+        selector: '[data-tour="action-button-bookmark"]',
         content: () => (
             <div className="step">
                 <p className="title">Click the bookmark icon</p>
@@ -139,7 +139,7 @@ const getNotLoggedInSteps: GetSteps = ({
 }) => [
     // Step 7: Click on the Share button
     {
-        selector: '#virtual-study-summary-panel',
+        selector: '[data-tour="virtual-study-summary-panel"]',
         content: () => (
             <div className="step">
                 <p className="title">Click on the Share button</p>
@@ -160,8 +160,8 @@ const getNotLoggedInSteps: GetSteps = ({
         action: () => {
             // only after user clicked the share button, the tour will continue
             setGotoStep(null);
-            const shareButton = document.getElementById(
-                'virtual-study-summary-share-btn'
+            const shareButton = document.querySelector(
+                '[data-tour="virtual-study-summary-share-btn"]'
             );
             if (shareButton) {
                 const handleClick = () => {
@@ -176,7 +176,7 @@ const getNotLoggedInSteps: GetSteps = ({
     },
     // Step 8: Show the share link
     {
-        selector: '#virtual-study-summary-panel',
+        selector: '[data-tour="virtual-study-summary-panel"]',
         content: () => (
             <div className="step">
                 <p className="title">Share your virtual study</p>
@@ -203,7 +203,7 @@ const getNotLoggedInSteps: GetSteps = ({
 const getLoggedInSteps: GetSteps = ({ setLockTour, setGotoStep, endTour }) => [
     // Step 7: Click on the Save button
     {
-        selector: '#virtual-study-summary-panel',
+        selector: '[data-tour="virtual-study-summary-panel"]',
         content: () => (
             <div className="step">
                 <p className="title">Click on the Save button</p>
@@ -223,8 +223,8 @@ const getLoggedInSteps: GetSteps = ({ setLockTour, setGotoStep, endTour }) => [
         action: () => {
             // only after user clicked the save button, the tour will continue
             setGotoStep(null);
-            const shareButton = document.getElementById(
-                'virtual-study-summary-save-btn'
+            const shareButton = document.querySelector(
+                '[data-tour="virtual-study-summary-save-btn"]'
             );
             if (shareButton) {
                 const handleClick = () => {
@@ -239,7 +239,7 @@ const getLoggedInSteps: GetSteps = ({ setLockTour, setGotoStep, endTour }) => [
     },
     // Step 8: Show the share link
     {
-        selector: '#virtual-study-summary-panel',
+        selector: '[data-tour="virtual-study-summary-panel"]',
         content: () => (
             <div className="step">
                 <p className="title">Already saved</p>
@@ -273,8 +273,8 @@ const getLoggedInSteps: GetSteps = ({ setLockTour, setGotoStep, endTour }) => [
             // hide the original next step button
             setLockTour(true);
 
-            const queryButton = document.getElementById(
-                'virtual-study-summary-query-btn'
+            const queryButton = document.querySelector(
+                '[data-tour="virtual-study-summary-query-btn"]'
             );
             if (queryButton) {
                 const handleClick = () => {
@@ -299,7 +299,7 @@ const getLoggedInSteps: GetSteps = ({ setLockTour, setGotoStep, endTour }) => [
     },
     // Step 9: In homepage, Show the new virtual study pre-selected
     {
-        selector: '#my_virtual_studies_list',
+        selector: '[data-tour="my_virtual_studies_list"]',
         content: () => (
             <div className="step">
                 <p className="title">My Virtual Studies</p>
@@ -310,7 +310,7 @@ const getLoggedInSteps: GetSteps = ({ setLockTour, setGotoStep, endTour }) => [
         action: () => {
             setLockTour(false);
             // end the tour if user clicked the screen
-            const searchBox = document.querySelector("#cancer-study-search-box input");
+            const searchBox = document.querySelector('[data-tour="cancer-study-search-box"] input');
 
             if (searchBox && (searchBox as any).value !== '') {
                 searchBox.setAttribute('value', '');