Issues/swodlr UI 72 essential UI bug fixes

scss/custom.scss

@@ -4,7 +4,6 @@
 @import "node_modules/bootstrap/scss/mixins";
 
 $theme-colors: (
-    // "primary": #2275ac,
     "primary": red,
     "secondary": #24B363
 );

src/components/app/App.tsx

@@ -17,6 +17,7 @@ import GranuleSelectionAndConfigurationView from '../sidebar/GranuleSelectionAnd
 import Joyride from 'react-joyride';
 import { deleteProduct } from '../sidebar/actions/productSlice';
 import { tutorialSteps } from '../tutorial/tutorialConstants';
+import InteractiveTutorialModal from '../tutorial/InteractiveTutorialModal';
 
 const App = () => {
   const dispatch = useAppDispatch()
@@ -34,18 +35,16 @@ const App = () => {
     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') {
+    } else if (stepTarget === '#configure-options-breadcrumb' && action === 'prev' && lifecycle === 'complete') {
       navigate(`/customizeProduct/selectScenes${search}`)
     } else if (stepTarget === '#my-data-page' && action === 'prev') {
       navigate(`/customizeProduct/configureOptions${search}`)
@@ -60,6 +59,7 @@ const App = () => {
       dispatch(setStartTutorial(false))
       navigate(`/customizeProduct/selectScenes`)
     }
+    // TODO: Make condition to load previous page when clicking previous before trying to target component to highlight. Use conditions "stepTarget === '#alert-messages' && action === 'prev' && lifecycle === 'init'"
   };
 
   useEffect(() => {
@@ -118,6 +118,7 @@ const App = () => {
         <Route path="/about" element={ getPageWithFormatting(<About />, true) } />
         <Route path='*' element={getPageWithFormatting(<NotFound errorCode='404'/>, true)}/>
       </Routes>
+      <InteractiveTutorialModal />
     </div>
   );
 }

src/components/edl/AuthorizationCodeHandler.tsx

@@ -30,7 +30,6 @@ export default function AuthorizationCodeHandler(): ReactElement {
           } else if (ex instanceof TypeError) {
             console.debug('Network error')
           }
-
           // TODO: improve this handling
           resetAuth();
         });

src/components/history/GeneratedProductHistory.tsx

@@ -8,7 +8,6 @@ import { getUserProducts } from "../../user/userData";
 import { useLocation, useNavigate } from "react-router-dom";
 
 const GeneratedProductHistory = () => {
-    // const generatedProducts = useAppSelector((state) => state.product.generatedProducts)
     const colorModeClass = useAppSelector((state) => state.navbar.colorModeClass)
     const { search } = useLocation();
     const navigate = useNavigate()
@@ -66,7 +65,6 @@ const GeneratedProductHistory = () => {
                         {userProducts.map((generatedProductObject, index) => {
                             const {status, utmZoneAdjust, mgrsBandAdjust, outputGranuleExtentFlag, outputSamplingGridType, rasterResolution, timestamp: dateGenerated, cycle, pass, scene, granules} = generatedProductObject
                             const statusToUse = status[0].state
-                            // const downloadUrl = granules && granules.length !== 0 ? <a href={granules[0].uri} target="_blank" rel="noreferrer">{granules[0].uri.split('/').pop()}</a> : 'N/A'
                             const downloadUrl = granules && granules.length !== 0 ? granules[0].uri.split('/').pop() : 'N/A'
                             const utmZoneAdjustToUse = outputSamplingGridType === 'GEO' ? 'N/A' : utmZoneAdjust
                             const mgrsBandAdjustToUse = outputSamplingGridType === 'GEO' ? 'N/A' : mgrsBandAdjust
@@ -106,12 +104,6 @@ const GeneratedProductHistory = () => {
     }
 
     const renderProductHistoryViews = () => {
-        let viewToShow
-        // if (userProducts.length === 0) {
-        //     viewToShow = productHistoryAlert()
-        // } else {
-        //     viewToShow = renderHistoryTable()
-        // } 
         return (
             <Col style={{marginRight: '50px', marginLeft: '50px', marginTop: '70px', height: '100%', width: '100%'}}>
                 <Row className='normal-row' style={{marginRight: '0px'}}><h4>Generated Products Data</h4></Row>

src/components/map/WorldMap.tsx

@@ -1,4 +1,4 @@
-import { MapContainer, Polygon, TileLayer, Tooltip, ZoomControl, useMap, FeatureGroup } from 'react-leaflet'
+import { MapContainer, Polygon, TileLayer, Tooltip, ZoomControl, useMap, FeatureGroup, useMapEvent } from 'react-leaflet'
 import L, { LatLngExpression } from 'leaflet';
 import 'leaflet/dist/leaflet.css'
 import { useAppDispatch, useAppSelector } from '../../redux/hooks'
@@ -20,15 +20,27 @@ let DefaultIcon = L.icon({
 });
 L.Marker.prototype.options.icon = DefaultIcon;
 
+function UpdateMapCenter() {
+  const dispatch = useAppDispatch()
+  const mapFocus = useAppSelector((state) => state.product.mapFocus)
+
+  const map = useMapEvent('moveend', () => {
+    const center = [map.getCenter().lat, map.getCenter().lng]
+    const zoom = map.getZoom()
+    if ((mapFocus.center[0] !== center[0] && mapFocus.center[1] !== center[1]) || mapFocus.zoom !== zoom) dispatch(setMapFocus({center, zoom}))
+  })
+  return null
+}
+
 const WorldMap = () => {
   const addedProducts = useAppSelector((state) => state.product.addedProducts)
   const mapFocus = useAppSelector((state) => state.product.mapFocus)
   const dispatch = useAppDispatch()
   const footprintStyleOptions = { color: 'limegreen' }
 
   const ChangeView = () => {
-    const map = useMap();
-    map.setView(mapFocus.center as LatLngExpression, mapFocus.zoom);
+    const map = useMap()
+    map.setView(mapFocus.center as LatLngExpression, mapFocus.zoom)
     return null
   }
 
@@ -80,7 +92,6 @@ const WorldMap = () => {
         }))).map(foundIdString => {
           const cyclePassSceneStringArray = foundIdString?.split('_').map(id => parseInt(id).toString())
           const tileValue = parseInt(cyclePassSceneStringArray?.[2] as string)
-          // const sceneToUse = String(Math.floor(tileValue / 2))
           const sceneToUse = String(Math.floor(tileValue))
           return {cycle: cyclePassSceneStringArray?.[0], pass: cyclePassSceneStringArray?.[1], scene : sceneToUse} as SpatialSearchResult
         })
@@ -115,7 +126,6 @@ const WorldMap = () => {
     <Row style={{height: '100%', paddingTop: '70px', paddingBottom: '0px', marginRight: '0%'}}>
       <MapContainer className='Map-container' spatial-search-map
         id='spatial-search-map'  
-        // center={[33.854457, -118.709093]} 
         zoom={7} scrollWheelZoom={true} zoomControl={false} 
       >
           {useLocation().pathname.includes('selectScenes') ? (
@@ -124,7 +134,6 @@ const WorldMap = () => {
                 position="topright" 
                 onCreated={(createEvent) => onCreate(createEvent)} 
                 onEdited={(editEvent) => onEdit(editEvent)} 
-                // onDeleted={(deleteEvent) => onDelete(deleteEvent)} 
                 draw={{
                   rectangle: false,
                   polyline: false,
@@ -142,11 +151,12 @@ const WorldMap = () => {
             attribution='Esri, Maxar, Earthstar Geographics, and the GIS User Community'
             maxZoom = {18}
           />
+          <UpdateMapCenter />
           <ChangeView />
           <ZoomControl position='bottomright'/>
           {addedProducts.map((productObject, index) => (
           <Polygon key={`product-on-map-${index}`} positions={productObject.footprint as LatLngExpression[]} pathOptions={footprintStyleOptions}>
-            <Tooltip sticky>{[<h6>{`Cycle: ${productObject.cycle}`}</h6>, <h6>{`Pass: ${productObject.pass}`}</h6>, <h6>{`Scene: ${productObject.scene}`}</h6>]}</Tooltip>
+            <Tooltip sticky>{[<h6 key={`footprint-cycle-tooltip-${index}`}>{`Cycle: ${productObject.cycle}`}</h6>, <h6 key={`footprint-pass-tooltip-${index}`}>{`Pass: ${productObject.pass}`}</h6>, <h6 key={`footprint-scene-tooltip-${index}`}>{`Scene: ${productObject.scene}`}</h6>]}</Tooltip>
           </Polygon>
           ))}
       </MapContainer>

src/components/sidebar/CustomizeProductsSidebar.tsx

@@ -8,7 +8,6 @@ import CustomizeProductView from './CustomizeProductView';
 import GranuleSelectionView from './GranuleSelectionView';
 import { CustomizeProductSidebarProps } from '../../types/constantTypes';
 import { ArrowsExpand } from 'react-bootstrap-icons';
-import InteractiveTutorialModal from '../tutorial/InteractiveTutorialModal';
 
 const CustomizeProductsSidebar = (props: CustomizeProductSidebarProps) => {
     const { mode } = props
@@ -63,7 +62,6 @@ const CustomizeProductsSidebar = (props: CustomizeProductSidebarProps) => {
         <div className='sidebar-resize shadow'  onMouseDown={(event) => handleResizeClickDown(event)}>
             <ArrowsExpand className="sidebar-resize-icon icon-flipped" color="white" size={24} onMouseDown={(event) => handleResizeClickDown(event)}/>
         </div>
-        <InteractiveTutorialModal />
     </div>
   );
 }

src/components/sidebar/DeleteGranulesModal.tsx

@@ -4,13 +4,33 @@ import { useAppSelector, useAppDispatch } from '../../redux/hooks'
 import { setShowDeleteProductModalFalse } from './actions/modalSlice'
 import { Row } from 'react-bootstrap';
 import { deleteProduct, setSelectedGranules } from './actions/productSlice';
+import { useSearchParams } from 'react-router-dom';
 
 const GenerateProductsModal = () => {
     const showDeleteProductModal = useAppSelector((state) => state.modal.showDeleteProductModal)
     const selectedGranules = useAppSelector((state) => state.product.selectedGranules)
     const dispatch = useAppDispatch()
+    const [searchParams, setSearchParams] = useSearchParams()
+
+    const removeCPSFromUrl = (cpsCombosToRemove: string[]) => {
+        const cyclePassSceneParameters = searchParams.get('cyclePassScene')?.split('-')
+        if (cyclePassSceneParameters) {
+            const cyclePassSceneParametersToKeep = cyclePassSceneParameters.filter(cpsCombo => !cpsCombosToRemove.includes(cpsCombo)).join('-')
+            const currentUrlParameters = Object.fromEntries(searchParams.entries())
+            if (cyclePassSceneParametersToKeep.length === 0) {
+                const {cyclePassScene, ...restOfCurrentUrlParameters} = currentUrlParameters
+                setSearchParams(restOfCurrentUrlParameters)
+            } else {
+                setSearchParams({...currentUrlParameters, cyclePassScene: cyclePassSceneParametersToKeep})
+            }
+        }
+    }
+
     const handleDelete = () => {
         dispatch(deleteProduct(selectedGranules))
+        // remove url parameters of selectedGranules
+        removeCPSFromUrl(selectedGranules)
+        // addSearchParamToCurrentUrlState
         dispatch(setSelectedGranules([]))
         // unselect select-all box
         dispatch(setShowDeleteProductModalFalse())

src/components/sidebar/GranuleSelectionAndConfigurationView.tsx

@@ -1,10 +1,22 @@
 import CustomizeProductsSidebar from './CustomizeProductsSidebar';
 import { GranuleSelectionAndConfigurationViewProps } from '../../types/constantTypes';
 import WorldMap from '../map/WorldMap'
+import { setShowTutorialModalTrue, setSkipTutorialTrue } from './actions/modalSlice';
+import { useEffect } from 'react';
+import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 
 const GranuleSelectionAndConfigurationView = (props: GranuleSelectionAndConfigurationViewProps) => {
+  const dispatch = useAppDispatch()
+  const skipTutorial = useAppSelector((state) => state.modal.skipTutorial)
   const {mode} = props
 
+  useEffect(() => {
+    if (!skipTutorial) {
+      dispatch(setShowTutorialModalTrue())
+      dispatch(setSkipTutorialTrue())
+    }
+  }, []);
+
   return (
     <>
       <CustomizeProductsSidebar mode={mode}/>

src/components/sidebar/GranuleSelectionView.tsx

@@ -1,28 +1,14 @@
-import { Button, Col, Row } from 'react-bootstrap';
-import { ArrowReturnRight} from 'react-bootstrap-icons';
 import GranuleTable from './GranulesTable';
-import { useAppSelector } from '../../redux/hooks'
 import GranuleTableAlerts from './GranuleTableAlerts';
-import { useLocation, useNavigate } from 'react-router-dom';
 import SpatialSearchOptions from './SpatialSearchOptions';
 
 const GranuleSelectionView = () => {
-    const addedProducts = useAppSelector((state) => state.product.addedProducts)
-    const navigate = useNavigate();
-    const { search } = useLocation();
-
   return (
-    <>
+    <div>
         <SpatialSearchOptions />
         <GranuleTable tableType='granuleSelection'/>
         <GranuleTableAlerts />
-        <hr></hr>
-        <Row style={{marginBottom: '10px', marginRight: '10px', marginLeft: '10px'}}>
-            <Col>
-                <Button variant='success' disabled={addedProducts.length === 0} onClick={() => navigate(`/customizeProduct/configureOptions${search}`)} id='configure-products-button'>Configure Products <ArrowReturnRight /></Button>
-            </Col>
-        </Row>
-    </>
+    </div>
   );
 }