ADD: enable localStorage record

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 { GroupComparisonTour, GC_MODE_ID } from 'tour';
 
 export interface IStudyViewPageProps {
     routing: any;
@@ -989,12 +990,15 @@ export default class StudyViewPage extends React.Component<
     }
 
     render() {
+        const tourStatus = localStorage.getItem(GC_MODE_ID);
+        const showTour = tourStatus === 'on';
         return (
             <PageLayout
                 noMargin={true}
                 hideFooter={true}
                 className={'subhead-dark'}
             >
+                {showTour && <GroupComparisonTour showStartButton={false} />}
                 <LoadingIndicator
                     size={'big'}
                     isLoading={

src/tour/GroupComparisonTour/index.tsx

@@ -7,18 +7,38 @@ type Props = {
 
 type State = {
     isTourOpen: Boolean;
-    currentStep: Number;
+    // currentStep: Number;
 };
 
+export const GC_MODE_ID = 'groupcomparison-v1-hintmode';
+export const GC_STEP_ID = 'groupcomparison-v1-stepleft';
+
 export default class GroupComparisonTour extends React.Component<Props, State> {
     constructor(props: Props) {
         super(props);
         this.state = {
             isTourOpen: false,
-            currentStep: 0,
+            // currentStep: 0,
         };
     }
 
+    componentDidMount(): void {
+        const tourStatus = localStorage.getItem(GC_MODE_ID);
+        if (tourStatus === 'on') {
+            const stepLeft = localStorage.getItem(GC_STEP_ID);
+            if (
+                stepLeft &&
+                stepLeft !== '0' &&
+                typeof +stepLeft === 'number' &&
+                !isNaN(+stepLeft)
+            ) {
+                // this.setCurrentStep(+stepLeft);
+                this.steps = this.steps.slice(+stepLeft);
+                this.startTour();
+            }
+        }
+    }
+
     steps = [
         {
             selector: '#mainSearchBox input',
@@ -47,6 +67,9 @@ export default class GroupComparisonTour extends React.Component<Props, State> {
             content: () => (
                 <div className="step">Click “Explore Selected Studies”.</div>
             ),
+            action: () => {
+                localStorage.setItem(GC_STEP_ID, '3');
+            },
         },
         {
             selector: '#comparisonGroupManagerContainer > button:nth-child(2)',
@@ -57,13 +80,22 @@ export default class GroupComparisonTour extends React.Component<Props, State> {
                 </div>
             ),
         },
+        {
+            content: () => (
+                <div className="step">
+                    Demo tour is over. To be continued during GSoC...
+                </div>
+            ),
+        },
     ];
 
     endTour = () => {
+        localStorage.setItem(GC_MODE_ID, 'off');
         this.setState({ isTourOpen: false });
     };
 
     startTour = () => {
+        localStorage.setItem(GC_MODE_ID, 'on');
         this.setState({ isTourOpen: true });
     };
 
@@ -73,7 +105,7 @@ export default class GroupComparisonTour extends React.Component<Props, State> {
 
     render() {
         const { showStartButton = true } = this.props;
-        const { isTourOpen, currentStep } = this.state;
+        const { isTourOpen } = this.state;
         return (
             <>
                 {showStartButton && (

src/tour/index.tsx

@@ -1,4 +1,7 @@
 import HomePageTour from './HomePageTour';
-import GroupComparisonTour from './GroupComparisonTour';
+import GroupComparisonTour, {
+    GC_MODE_ID,
+    GC_STEP_ID,
+} from './GroupComparisonTour';
 
-export { HomePageTour, GroupComparisonTour };
+export { HomePageTour, GroupComparisonTour, GC_MODE_ID, GC_STEP_ID };