Feature/swodlr UI 75 - interactive tutorial (#78)

* feature/swodlr-ui-75: interactive tutorial * feature/swodlr-ui-75: add my data page to tutorial * feature/swodlr-ui-75: add tutorial start button * feature/swodlr-ui-75: optimized abotu page images and fixed input parsing error * feature/swodlr-ui-75: cleaned up tutorial and fixed spatial resulution overselection * feature/swodlr-ui-75 * feature/swodlr-ui-75 * feature/swodlr-ui-75: cleaned up spatial seach errors * feature/swodlr-ui-75: remove extra if statement * feature/swodlr-ui-75: fixed infinite loop bug with polygon edit when no edit change --------- Co-authored-by: jbyrne <[email protected]>
podaac · Jan 23, 2024 · 7a2c675 · 7a2c675
1 parent e080a7a
commit 7a2c675
Show file tree

Hide file tree

Showing 34 changed files with 677 additions and 1,255 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,5 +1,6 @@
 {
     "cSpell.words": [
-        "mgrs"
+        "mgrs",
+        "Podaac"
     ]
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "react-bootstrap-icons": "^1.10.3",
     "react-datepicker": "^4.24.0",
     "react-dom": "^18.2.0",
+    "react-joyride": "^2.7.2",
     "react-leaflet": "^4.2.1",
     "react-leaflet-draw": "^0.20.4",
     "react-redux": "^8.0.5",

diff --git a/src/assets/SWOT-YUKON.jpeg b/src/assets/SWOT-YUKON.jpeg
diff --git a/src/assets/comparing-images.png b/src/assets/comparing-images.png
diff --git a/src/assets/swot-go-up-resolution.jpg b/src/assets/swot-go-up-resolution.jpg
diff --git a/src/assets/swotPosterCropped.png b/src/assets/swotPosterCropped.png
diff --git a/src/assets/swot_mainlogo_portrait.jpg b/src/assets/swot_mainlogo_portrait.jpg
diff --git a/src/components/about/About.tsx b/src/components/about/About.tsx
@@ -63,7 +63,7 @@ const About = () => {
                             <Row className="align-items-center"><h5>Q: How do I find cycle, pass, and scene?</h5></Row>
                         </ListGroup.Item>
                         <ListGroup.Item className='howToListItem' style={{marginRight: '0%', marginLeft: '0%'}}>
-                            <Row><h5>A: The cycle, pass, and scene IDs can be found in the file name of the standard raster product. The files can be explored within {<a href="https://search.earthdata.nasa.gov/search" target="_">Earthdata Search</a>}. The file naming convention is like so: {`SWOT_L2_HR_Raster_<DescriptorString>_<CycleID>_<PassID>_<SceneID>
+                            <Row><h5>A: The cycle, pass, and scene IDs can be found in the file name of the standard raster product. The files can be explored within {<a href="https://search.earthdata.nasa.gov/search/granules?p=C2799438271-POCLOUD&pg[0][v]=f&pg[0][gsk]=-start_date&q=SWOT_L2_HR_RASTER_2.0&tl=1705536407!3!!&lat=65.390625&zoom=1" target="_">Earthdata Search</a>}. The file naming convention is like so: {`SWOT_L2_HR_Raster_<DescriptorString>_<CycleID>_<PassID>_<SceneID>
                             _<RangeBeginningDateTime>_<RangeEndingDateTime>_<CRID>_<ProductCounter>.nc`}</h5></Row>
                         </ListGroup.Item>
                     </ListGroup>

diff --git a/src/components/app/App.css b/src/components/app/App.css
@@ -629,4 +629,8 @@ TABS
 .sidebar-breadcrumb-item:active {
   color: 'black' !important;
   font-size: '24px' !important;
-}
+}
+
+/**************************************************
+WALKTHROUGH
+**************************************************/
diff --git a/src/components/app/App.test.tsx b/src/components/app/App.test.tsx
diff --git a/src/components/app/App.tsx b/src/components/app/App.tsx
@@ -4,42 +4,79 @@ import { useAppSelector, useAppDispatch } from '../../redux/hooks'
 import { setResizeInactive, setResizeEndLocation, setResizeStartLocation } from '../sidebar/actions/sidebarSlice';
 import Welcome from '../welcome/Welcome'
 import AuthorizationCodeHandler from '../edl/AuthorizationCodeHandler';
-import CustomizeProductsSidebar from '../sidebar/CustomizeProductsSidebar';
 import GeneratedProductHistory from '../history/GeneratedProductHistory';
 import About from '../about/About';
 import NavbarContainer from '../navbar/NavbarContainer';
 import PodaacFooter from '../navbar/PodaacFooter';
 import NotFound from '../error/NotFound';
-import { Route, Routes, useNavigate } from 'react-router-dom';
+import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 import { Session } from '../../authentication/session';
-import { getCurrentUser } from './appSlice';
-import { useEffect } from 'react';
+import { getCurrentUser, setStartTutorial } from './appSlice';
+import { useEffect, useState } from 'react';
 import GranuleSelectionAndConfigurationView from '../sidebar/GranuleSelectionAndConfigurationView';
+import Joyride from 'react-joyride';
+import { deleteProduct } from '../sidebar/actions/productSlice';
+import { tutorialSteps } from '../tutorial/tutorialConstants';
 
 const App = () => {
   const dispatch = useAppDispatch()
   const footerResizeActive = useAppSelector((state) => state.sidebar.footerResizeActive)
   const previousResizeEndLocation = useAppSelector((state) => state.sidebar.resizeEndLocation)
   const userAuthenticated = useAppSelector((state) => state.app.userAuthenticated)
   const colorModeClass = useAppSelector((state) => state.navbar.colorModeClass)
-  const currentUser = useAppSelector((state) => state.app.currentUser);
+  const currentUser = useAppSelector((state) => state.app.currentUser)
+  const startTutorial = useAppSelector((state) => state.app.startTutorial)
+  const addedProducts = useAppSelector((state) => state.product.addedProducts)
   const navigate = useNavigate();
+  const { search } = useLocation();
 
-    useEffect(() => {
-      // If a session was found
-      Session.getCurrent().then((session) => {
-        if (session !== null) {
-          if (currentUser === null) {
-            dispatch(getCurrentUser());
-          }
-        } else {
-          // navigate to welcome page if user isn't authenticated
-          navigate('/')
+  const [joyride, setState] = useState({
+    run: startTutorial,
+    steps: tutorialSteps
+  })
+
+  useEffect(() => {
+    setState({...joyride, run: startTutorial })
+
+  }, [startTutorial]);
+
+  const handleJoyrideCallback = (data: { action: any; index: any; status: any; type: any; step: any; lifecycle: any; }) => {
+    const { action, step, type, lifecycle } = data;
+    const stepTarget = step.target
+    if (stepTarget === '#configure-options-breadcrumb' && action === 'update') {
+      navigate(`/customizeProduct/configureOptions${search}`)
+    } else if (stepTarget === '#configure-options-breadcrumb' && action === 'prev') {
+      navigate(`/customizeProduct/selectScenes${search}`)
+    } else if (stepTarget === '#my-data-page' && action === 'prev') {
+      navigate(`/customizeProduct/configureOptions${search}`)
+    } else if (stepTarget === '#added-scenes' && action === 'update') {
+      navigate(`/customizeProduct/selectScenes?cyclePassScene=1_413_120&showUTMAdvancedOptions=true`)
+    } else if (stepTarget === '#customization-tab' && action === 'start') {
+      navigate('/customizeProduct/selectScenes')
+    } else if ((stepTarget === '#generate-products-button' && action === 'close' && lifecycle === 'complete') || (stepTarget === '#my-data-page' && action === 'next')) {
+      navigate(`/generatedProductHistory${search}`)
+    } else if (type === 'tour:end') {
+      dispatch(deleteProduct(addedProducts.map(product => product.granuleId)))
+      dispatch(setStartTutorial(false))
+      navigate(`/customizeProduct/selectScenes`)
+    }
+  };
+
+  useEffect(() => {
+    // If a session was found
+    Session.getCurrent().then((session) => {
+      if (session !== null) {
+        if (currentUser === null) {
+          dispatch(getCurrentUser());
         }
-      });
-    }, [dispatch, navigate, currentUser]);
+      } else {
+        // navigate to welcome page if user isn't authenticated
+        navigate('/')
+      }
+    });
+  }, [dispatch, navigate, currentUser]);
 
-  const handleFooterResize = (event: any) => {
+  const handleSidebarResize = (event: any) => {
     if (footerResizeActive) {
       if (event.type === 'mouseup') {
         dispatch(setResizeInactive())
@@ -61,7 +98,17 @@ const App = () => {
   }
 
   return (
-    <div className={`App ${userAuthenticated ? 'user-authenticated' : ''} ${colorModeClass}-background`} style={{cursor: footerResizeActive ? 'grabbing' : ''}} onMouseUp={(event) => handleFooterResize(event)} onMouseMove={(event) => handleFooterResize(event)}>
+    <div className={`App ${userAuthenticated ? 'user-authenticated' : ''} ${colorModeClass}-background`} style={{cursor: footerResizeActive ? 'grabbing' : ''}} onMouseUp={(event) => handleSidebarResize(event)} onMouseMove={(event) => handleSidebarResize(event)}>
+      <Joyride 
+        callback={(data) => handleJoyrideCallback(data)}
+        run={joyride.run}
+        steps={joyride.steps}
+        showProgress
+        showSkipButton
+        hideCloseButton
+        continuous
+        scrollToFirstStep
+      />
       <Routes>
         <Route path="/" element={ getPageWithFormatting(<Welcome />, false) } />
         <Route path="/edl/code" element={ getPageWithFormatting(<AuthorizationCodeHandler/>, false) } />