fix: 1929 - follow on fixes to pr 1922

app/scripts/components/exploration/atoms/viewMode.ts

@@ -0,0 +1,20 @@
+import { atomWithUrlValueStability } from '$utils/params-location-atom/atom-with-url-value-stability';
+
+const initialParams = new URLSearchParams(window.location.search);
+
+const hydrateViewMode = (serialized: string | null) => {
+  if (serialized === 'simple') return serialized;
+  return 'default';
+};
+
+const dehydrateViewMode = (value: 'simple' | 'default') => {
+  return value ?? 'default';
+};
+
+export const viewModeAtom = atomWithUrlValueStability<'simple' | 'default'>({
+  initialValue: hydrateViewMode(initialParams.get('viewMode')),
+  urlParam: 'viewMode',
+  hydrate: hydrateViewMode,
+  dehydrate: dehydrateViewMode,
+  areEqual: (prev, next) => prev === next
+});

app/scripts/components/exploration/embed-exploration.tsx → app/scripts/components/exploration/components/exploration-simple-view/exploration-simple-view.tsx

@@ -4,12 +4,12 @@ import { useAtom } from 'jotai';
 import {
   convertProjectionToMapbox,
   projectionDefault
-} from '../common/map/controls/map-options/projections';
-import { BasemapId } from '../common/map/controls/map-options/basemap';
-import { selectedCompareDateAtom, selectedDateAtom } from './atoms/dates';
-import { zoomAtom } from './atoms/zoom';
-import { centerAtom } from './atoms/center';
-import EmbedTimeline from './components/embed-exploration/embed-timeline';
+} from '../../../common/map/controls/map-options/projections';
+import { BasemapId } from '../../../common/map/controls/map-options/basemap';
+import { selectedCompareDateAtom, selectedDateAtom } from '../../atoms/dates';
+import { zoomAtom } from '../../atoms/zoom';
+import { centerAtom } from '../../atoms/center';
+import TimelineSimpleView from './timeline-simple-view';
 import MapBlock from '$components/common/blocks/block-map';
 import {
   VizDataset,
@@ -21,31 +21,33 @@ import { useReconcileWithStacMetadata } from '$components/exploration/hooks/use-
 import { ProjectionOptions, TimeDensity } from '$types/veda';
 import { useVedaUI } from '$context/veda-ui-provider';
 
-const Carto = styled.div`
+const StyledDiv = styled.div`
   position: relative;
   flex-grow: 1;
   height: 100vh;
   display: flex;
 `;
-const BaseTimelineContainer = styled.div<{ isCompareMode?: boolean }>`
+const StyledDivTimelineContainer = styled.div<{ isCompareMode?: boolean }>`
   position: absolute;
   bottom: 2rem;
   left: ${({ isCompareMode }) => (isCompareMode ? '25%' : '50%')};
   transform: translateX(-50%);
   z-index: 10;
 `;
-const CompareTimelineContainer = styled.div`
+const StyledDivCompareTimelineContainer = styled.div`
   position: absolute;
   bottom: 2rem;
   left: 75%;
   transform: translateX(-50%);
   z-index: 10;
 `;
 
-interface EmbeddedExplorationProps {
+interface ExplorationSimpleViewProps {
   datasets: TimelineDataset[];
 }
-export default function EmbeddedExploration(props: EmbeddedExplorationProps) {
+export default function ExplorationSimpleView(
+  props: ExplorationSimpleViewProps
+) {
   const { datasets } = props;
   const [selectedDay, setSelectedDay] = useAtom(selectedDateAtom);
   const [selectedCompareDay, setSelectedComparedDay] = useAtom(
@@ -54,21 +56,20 @@ export default function EmbeddedExploration(props: EmbeddedExplorationProps) {
   const [zoom] = useAtom(zoomAtom);
   const [center] = useAtom(centerAtom);
   return (
-    <>
-      <EmbeddedLayersExploration
-        datasets={datasets}
-        selectedDay={selectedDay}
-        setSelectedDay={setSelectedDay}
-        setSelectedComparedDay={setSelectedComparedDay}
-        selectedCompareDay={selectedCompareDay}
-        center={center}
-        zoom={zoom}
-      />
-    </>
+    // eslint-disable-next-line react/jsx-pascal-case
+    <ExplorationSimpleView_
+      datasets={datasets}
+      selectedDay={selectedDay}
+      setSelectedDay={setSelectedDay}
+      setSelectedComparedDay={setSelectedComparedDay}
+      selectedCompareDay={selectedCompareDay}
+      center={center}
+      zoom={zoom}
+    />
   );
 }
 
-interface EmbeddedLayersExplorationProps {
+interface ExplorationSimpleViewProps_ {
   datasets: TimelineDataset[];
   setSelectedDay: (x: Date) => void;
   setSelectedComparedDay: (x: Date) => void;
@@ -99,7 +100,7 @@ const getDataLayer = (
   };
 };
 
-function EmbeddedLayersExploration(props: EmbeddedLayersExplorationProps) {
+function ExplorationSimpleView_(props: ExplorationSimpleViewProps_) {
   const {
     datasets,
     selectedDay,
@@ -164,7 +165,7 @@ function EmbeddedLayersExploration(props: EmbeddedLayersExplorationProps) {
   }, [basemapId]);
 
   return (
-    <Carto>
+    <StyledDiv>
       <MapBlock
         baseDataLayer={baseDataLayer}
         compareDataLayer={compareDataLayer}
@@ -181,28 +182,34 @@ function EmbeddedLayersExploration(props: EmbeddedLayersExplorationProps) {
         navigationControlPosition='top-right'
         height='100%'
       />
-      <BaseTimelineContainer isCompareMode={!!selectedCompareDay}>
+      <StyledDivTimelineContainer isCompareMode={!!selectedCompareDay}>
         {selectedDay && (
-          <EmbedTimeline
+          <TimelineSimpleView
             label=''
             date={selectedDay}
             setDate={setSelectedDay}
             datasets={layers as TimelineDataset[]}
             timeDensity={baseTimeDensity}
+            tipContent={
+              selectedCompareDay
+                ? 'Date shown on left map'
+                : 'Date shown on map'
+            }
           />
         )}
-      </BaseTimelineContainer>
-      <CompareTimelineContainer>
+      </StyledDivTimelineContainer>
+      <StyledDivCompareTimelineContainer>
         {selectedCompareDay && (
-          <EmbedTimeline
+          <TimelineSimpleView
             label=''
             date={selectedCompareDay}
             setDate={setSelectedComparedDay}
             datasets={layers as TimelineDataset[]}
             timeDensity={compareTimeDensity}
+            tipContent='Date shown on right map'
           />
         )}
-      </CompareTimelineContainer>
-    </Carto>
+      </StyledDivCompareTimelineContainer>
+    </StyledDiv>
   );
 }

app/scripts/components/exploration/components/embed-exploration/embed-timeline.tsx → app/scripts/components/exploration/components/exploration-simple-view/timeline-simple-view.tsx

@@ -22,16 +22,17 @@ const TimelineWrapper = styled.div`
   background-color: white;
   border-radius: 2px;
 `;
-interface EmbedTimelineProps {
+interface TimelineSimpleViewProps {
   date: Date | null;
   setDate: (date: Date | null) => void;
   timeDensity: TimeDensity;
   datasets: TimelineDataset[];
   label: string;
+  tipContent?: string;
 }
 
-function EmbedTimeline(props: EmbedTimelineProps) {
-  const { date, setDate, timeDensity, datasets, label } = props;
+function TimelineSimpleView(props: TimelineSimpleViewProps) {
+  const { date, setDate, timeDensity, datasets, label, tipContent } = props;
 
   const lowestCommonTimeDensity = useMemo(
     () =>
@@ -85,6 +86,7 @@ function EmbedTimeline(props: EmbedTimelineProps) {
         minDate={minMaxTemporalExtent[0]}
         maxDate={minMaxTemporalExtent[1]}
         selectedDay={date}
+        tipContent={tipContent}
         onConfirm={(d) => {
           if (!d) return;
           setDate(new Date(d));
@@ -98,4 +100,4 @@ function EmbedTimeline(props: EmbedTimelineProps) {
   );
 }
 
-export default EmbedTimeline;
+export default TimelineSimpleView;

app/scripts/components/exploration/container.tsx

@@ -6,8 +6,8 @@ import { useAtom, useSetAtom } from 'jotai';
 import { DatasetSelectorModal } from './components/dataset-selector-modal';
 import useTimelineDatasetAtom from './hooks/use-timeline-dataset-atom';
 import { externalDatasetsAtom } from './atoms/datasetLayers';
-import { isEmbeddedAtom } from './atoms/embed';
-import EmbeddedExploration from './embed-exploration';
+import { viewModeAtom } from './atoms/viewMode';
+import ExplorationSimpleView from './components/exploration-simple-view/exploration-simple-view';
 import ExplorationAndAnalysis from '.';
 import { allExploreDatasets } from '$data-layer/datasets';
 import { urlAtom } from '$utils/params-location-atom/url';
@@ -34,13 +34,10 @@ export default function ExplorationAndAnalysisContainer() {
   // atomWithLocation gets initialized outside of Exploration page and returns the previous page's value
   // We check if url Atom actually returns the values for exploration page here.
   const [currentUrl] = useAtom(urlAtom);
-  const [isEmbedded] = useAtom(isEmbeddedAtom);
+  const [viewMode] = useAtom(viewModeAtom);
 
   if (!currentUrl.pathname?.includes(EXPLORATION_PATH)) return null;
 
-  if (isEmbedded) {
-    return <EmbeddedExploration datasets={timelineDatasets} />;
-  }
   const openModal = () => setDatasetModalRevealed(true);
   const closeModal = () => setDatasetModalRevealed(false);
 
@@ -51,32 +48,41 @@ export default function ExplorationAndAnalysisContainer() {
         title='Exploration'
         description='Explore and analyze datasets'
         hideFooter
+        {...(viewMode === 'simple' && { hideNav: true, hideHeader: true })}
       />
       <PageMainContent>
         <PageHero title='Exploration' isHidden />
-        <ExplorationAndAnalysis
-          datasets={timelineDatasets}
-          setDatasets={setTimelineDatasets}
-          openDatasetsSelectionModal={openModal}
-        />
-        <DatasetSelectorModal
-          revealed={datasetModalRevealed}
-          close={closeModal}
-          datasets={allExploreDatasets}
-          timelineDatasets={timelineDatasets}
-          setTimelineDatasets={setTimelineDatasets}
-          emptyStateContent={
-            <>
-              <p>There are no datasets to show with the selected filters.</p>
-              <p>
-                This tool allows the exploration and analysis of time-series
-                datasets in raster format. For a comprehensive list of available
-                datasets, please visit the{' '}
-                <Link to={DATASETS_PATH}>Data Catalog</Link>.
-              </p>
-            </>
-          }
-        />
+        {viewMode === 'simple' ? (
+          <ExplorationSimpleView datasets={timelineDatasets} />
+        ) : (
+          <>
+            <ExplorationAndAnalysis
+              datasets={timelineDatasets}
+              setDatasets={setTimelineDatasets}
+              openDatasetsSelectionModal={openModal}
+            />
+            <DatasetSelectorModal
+              revealed={datasetModalRevealed}
+              close={closeModal}
+              datasets={allExploreDatasets}
+              timelineDatasets={timelineDatasets}
+              setTimelineDatasets={setTimelineDatasets}
+              emptyStateContent={
+                <>
+                  <p>
+                    There are no datasets to show with the selected filters.
+                  </p>
+                  <p>
+                    This tool allows the exploration and analysis of time-series
+                    datasets in raster format. For a comprehensive list of
+                    available datasets, please visit the{' '}
+                    <Link to={DATASETS_PATH}>Data Catalog</Link>.
+                  </p>
+                </>
+              }
+            />
+          </>
+        )}
       </PageMainContent>
     </>
   );

app/scripts/libs/index.ts

@@ -56,7 +56,7 @@ export {
 
 export {
   CatalogContent,
-  EmbeddedExploration,
+  ExplorationSimpleView,
   ExplorationAndAnalysis,
   StoriesHubContent,
   DatasetSelectorModal

app/scripts/libs/page-components.ts

@@ -1,6 +1,6 @@
 export { default as CatalogContent } from '$components/common/catalog/catalog-content';
 export { default as ExplorationAndAnalysis } from '$components/exploration';
-export { default as EmbeddedExploration } from '$components/exploration/embed-exploration';
+export { default as ExplorationSimpleView } from '$components/exploration/components/exploration-simple-view/exploration-simple-view';
 // DataSelectorModal needs to be paried with E&A, so putting this for now.
 export { DatasetSelectorModal } from '$components/exploration/components/dataset-selector-modal';
 export { default as StoriesHubContent } from '$components/stories/hub/hub-content';