Merge pull request #129 from DiSSCo/RefactorDigitalSpecimenTour

Refactor digital specimen tour
DiSSCo · Nov 18, 2024 · 07c17c3 · 07c17c3
2 parents 2570f8f + 347d3bd
commit 07c17c3
Show file tree

Hide file tree

Showing 7 changed files with 173 additions and 14 deletions.
diff --git a/src/components/digitalSpecimen/DigitalSpecimen.tsx b/src/components/digitalSpecimen/DigitalSpecimen.tsx
@@ -13,6 +13,7 @@ import { getDigitalSpecimen, setDigitalSpecimen } from 'redux-store/DigitalSpeci
 /* Import Types */
 import { DigitalMedia } from 'app/types/DigitalMedia';
 import { DigitalSpecimen as DigitalSpecimenType } from 'app/types/DigitalSpecimen';
+import { TourTopic } from 'app/Types';
 
 /* Import Sources */
 import DigitalSpecimenSchema from 'sources/dataModel/digitalSpecimen.json';
@@ -27,6 +28,7 @@ import GetDigitalSpecimenMasJobRecords from 'api/digitalSpecimen/GetDigitalSpeci
 import ScheduleDigitalSpecimenMas from "api/digitalSpecimen/ScheduleDigitalSpecimenMas";
 
 /* Import Components */
+import DigitalSpecimenTourSteps from './tourSteps/DigitalSpecimenTourSteps';
 import { ContentBlock, IdCard, TopBar } from './components/DigitalSpecimenComponents';
 import { AnnotationSidePanel, BreadCrumbs, Header, Footer } from 'components/elements/Elements';
 import { LoadingScreen } from 'components/elements/customUI/CustomUI';
@@ -46,6 +48,11 @@ const DigitalSpecimen = () => {
     const digitalSpecimen = useAppSelector(getDigitalSpecimen);
     const [digitalSpecimenDigitalMedia, setDigitalSpecimenDigitalMedia] = useState<DigitalMedia[] | undefined>();
     const [annotationMode, setAnnotationMode] = useState<boolean>(false);
+    const [selectedTabIndex, setSelectedTabIndex] = useState<number>(0);
+    const tourTopics: TourTopic[] = [{
+        name: 'digitalSpecimen',
+        title: 'About this page'
+    }];
 
     /* OnLoad, fetch digital specimen data */
     fetch.FetchMultiple({
@@ -104,7 +111,7 @@ const DigitalSpecimen = () => {
                     <Col className={`${digitalSpecimenBodyClass} h-100 tr-smooth`}>
                         <div className={`${digitalSpecimenContentClass} h-100 d-flex flex-column tr-smooth`}>
                             {/* Render header*/}
-                            <Header />
+                            <Header tourTopics={tourTopics} />
 
                             {/* Digital specimen page body */}
                             <Container fluid className="flex-grow-1 overflow-hidden my-5">
@@ -121,7 +128,7 @@ const DigitalSpecimen = () => {
                                                     </Col>
                                                 </Row>
                                                 {/* Top bar */}
-                                                <Row className="mt-2">
+                                                <Row className="tourDigitalSpecimen2 mt-2">
                                                     <Col>
                                                         <TopBar digitalSpecimen={digitalSpecimen}
                                                             annotationMode={annotationMode}
@@ -133,18 +140,21 @@ const DigitalSpecimen = () => {
                                                 <Row className="flex-grow-1 overflow-hidden mt-4">
                                                     {/* ID card */}
                                                     <Col lg={{ span: 3 }}
-                                                        className="h-100"
+                                                        className="tourDigitalSpecimen5 h-100"
                                                     >
                                                         <IdCard digitalSpecimen={digitalSpecimen}
                                                             digitalSpecimenDigitalMedia={digitalSpecimenDigitalMedia}
                                                         />
                                                     </Col>
                                                     {/* Content block */}
                                                     <Col lg={{ span: 9 }}
-                                                        className="h-100"
+                                                        className="tourDigitalSpecimen6 tourDigitalSpecimen7 tourDigitalSpecimen8 tourDigitalSpecimen9 tourDigitalSpecimen10
+                                                        tourDigitalSpecimen11 tourDigitalSpecimen12 h-100"
                                                     >
                                                         <ContentBlock digitalSpecimen={digitalSpecimen}
                                                             digitalSpecimenDigitalMedia={digitalSpecimenDigitalMedia}
+                                                            selectedTabIndex={selectedTabIndex}
+                                                            SetSelectedTabIndex={setSelectedTabIndex}
                                                         />
                                                     </Col>
                                                 </Row>
@@ -179,6 +189,8 @@ const DigitalSpecimen = () => {
                     }
                 </Row>
             </Container>
+
+            <DigitalSpecimenTourSteps SetSelectedTabIndex={setSelectedTabIndex} />
         </div>
     );
 };

diff --git a/src/components/digitalSpecimen/components/contentBlock/ContentBlock.tsx b/src/components/digitalSpecimen/components/contentBlock/ContentBlock.tsx
@@ -1,6 +1,5 @@
 /* Import Dependencies */
 import { isEmpty } from 'lodash';
-import { useState } from 'react';
 
 /* Import Types */
 import { DigitalMedia } from 'app/types/DigitalMedia';
@@ -14,21 +13,24 @@ import { Tabs } from 'components/elements/customUI/CustomUI';
 /* Props Type */
 type Props = {
     digitalSpecimen: DigitalSpecimen,
-    digitalSpecimenDigitalMedia: DigitalMedia[] | undefined
+    digitalSpecimenDigitalMedia: DigitalMedia[] | undefined,
+    selectedTabIndex: number,
+    SetSelectedTabIndex: Function
 };
 
 
 /**
  * Component that renders the content block on the digital specimen page
  * @param digitalSpecimen The selected digital specimen
  * @param digitalSpecimenDigitalMedia The digital media attached to the digital specimen
+ * @param selectedTabIndex The selected index for the digital specimen tabs
+ * @param SetSelectedTabIndex Function to set the selected tab index
  * @returns JSX Component
  */
 const ContentBlock = (props: Props) => {
-    const { digitalSpecimen, digitalSpecimenDigitalMedia } = props;
+    const { digitalSpecimen, digitalSpecimenDigitalMedia, selectedTabIndex, SetSelectedTabIndex } = props;
 
     /* Base variables */
-    const [selectedTabIndex, setSelectedTabIndex] = useState<number>(0);
     const tabs = {
         'digitalSpecimen': <DigitalSpecimenOverview digitalSpecimen={digitalSpecimen} />,
         ...(digitalSpecimenDigitalMedia && !isEmpty(digitalSpecimenDigitalMedia) && {
@@ -51,7 +53,7 @@ const ContentBlock = (props: Props) => {
                 }}
                 tabClassName="fs-5 px-3"
                 tabPanelClassName="h-100 overflow-y-scroll overflow-x-hidden"
-                SetSelectedIndex={(index: number) => setSelectedTabIndex(index)}
+                SetSelectedIndex={(index: number) => SetSelectedTabIndex(index)}
             />
         </div>
     );

diff --git a/src/components/digitalSpecimen/components/topBar/TopBar.tsx b/src/components/digitalSpecimen/components/topBar/TopBar.tsx
@@ -132,7 +132,9 @@ const TopBar = (props: Props) => {
                             </span>
                         </Col>
                         {versionDropdownItems &&
-                            <Col lg="auto">
+                            <Col lg="auto"
+                                className="tourDigitalSpecimen3"
+                            >
                                 <Dropdown items={versionDropdownItems}
                                     selectedItem={{
                                         label: fetch.loading ? 'Loading..' : `Version ${digitalSpecimen['ods:version']}`,
@@ -151,7 +153,7 @@ const TopBar = (props: Props) => {
                         }
                     </Row>
                 </Col>
-                <Col>
+                <Col className="tourDigitalSpecimen4">
                     <TopBarActions actionDropdownItems={actionDropdownItems}
                         annotationMode={annotationMode}
                         ToggleAnnotationSidePanel={ToggleAnnotationSidePanel}

diff --git a/src/components/digitalSpecimen/tourSteps/DigitalSpecimenTourSteps.tsx b/src/components/digitalSpecimen/tourSteps/DigitalSpecimenTourSteps.tsx
@@ -0,0 +1,95 @@
+/* Import Dependencies */
+import { Steps } from 'intro.js-react';
+
+/* Import Config */
+import StepsConfig from 'app/config/StepsConfig';
+
+/* Import Hooks */
+import { useAppSelector, useAppDispatch } from 'app/Hooks';
+
+/* Import Store */
+import { getTourTopic, setTourTopic } from 'redux-store/GlobalSlice';
+
+/* Import Sources */
+import DigitalSpecimenTourStepsText from 'sources/tourText/digitalSpecimen.json';
+
+
+/* Props Type */
+type Props = {
+    SetSelectedTabIndex: Function
+};
+
+
+/**
+ * Component that renders the tour steps for the digital specimen page
+ * @param SetSelectedTabIndex Function to set the selected tab index
+ * @returns JSX Component
+ */
+const DigitalSpecimenTourSteps = (props: Props) => {
+    const { SetSelectedTabIndex } = props;
+
+    /* Hooks */
+    const dispatch = useAppDispatch();
+
+    /* Base variables */
+    const tourTopic = useAppSelector(getTourTopic);
+    const digitalSpecimenSteps = DigitalSpecimenTourStepsText.digitalSpecimen;
+    const { options } = StepsConfig();
+    let steps: {
+        intro: string,
+        element?: string
+    }[] = [];
+
+    /* Construct Intro.js steps for digital specimen page */
+    digitalSpecimenSteps.forEach((step, index) => {
+        steps.push({
+            intro: step,
+            element: `.tourDigitalSpecimen${index + 1}`
+        });
+    });
+
+    /**
+     * Function that checks what to do on a step change
+     * @param nextIndex The next (selected) index in the step chain
+     * @param resolve Function to resolve the step promise 
+     */
+    const OnStepChange = (nextIndex: number, resolve: Function) => {
+        const nextIndexToTabIndexMap = {
+            6: 0,
+            7: 1,
+            8: 2,
+            9: 3,
+            10: 4,
+            11: 5
+        };
+
+        if (Object.keys(nextIndexToTabIndexMap).includes(`${nextIndex}`)) {
+            /* On step 7: set tab to digital specimen */
+            SetSelectedTabIndex(0);
+
+            resolve();
+        } else {
+            resolve();
+        }
+    };
+
+    return (
+        <Steps enabled={tourTopic === 'digitalSpecimen'}
+            steps={steps}
+            initialStep={0}
+            onBeforeChange={(nextIndex) => {
+                return new Promise((resolve) => {
+                    OnStepChange(nextIndex, resolve);
+                });
+            }}
+            onStart={() => SetSelectedTabIndex(0)}
+            onExit={() => {
+                SetSelectedTabIndex(0);
+                dispatch(setTourTopic(undefined));
+            }}
+            options={options}
+        />
+    );
+};
+
+export default DigitalSpecimenTourSteps;
diff --git a/src/components/search/tourSteps/CompareTourSteps.tsx b/src/components/search/tourSteps/CompareTourSteps.tsx
@@ -26,7 +26,7 @@ type Props = {
 
 
 /**
- * Component that renders the tour steps for the homepage
+ * Component that renders the tour steps for the compare functionality on the search page
  * @param pagination The pagination object used to index the digital specimen results
  * @returns JSX Component
  */
@@ -47,7 +47,7 @@ const CompareTourSteps = (props: Props) => {
         element?: string
     }[] = [];
 
-    /* Construct Intro.js steps for Homepage */
+    /* Construct Intro.js steps for compare functionality on search page */
     compareSteps.forEach((step, index) => {
         steps.push({
             intro: step,

diff --git a/src/components/search/tourSteps/SearchTourSteps.tsx b/src/components/search/tourSteps/SearchTourSteps.tsx
@@ -46,7 +46,7 @@ const SearchTourSteps = (props: Props) => {
         element?: string
     }[] = [];
 
-    /* Construct Intro.js steps for Homepage */
+    /* Construct Intro.js steps for Search page */
     searchSteps.forEach((step, index) => {
         steps.push({
             intro: step,