Update date range playhead behavior

Playheads now only show up when there are features for analysis.
NASA-IMPACT · Nov 3, 2023 · da3b8b7 · da3b8b7
1 parent b87b1bb
commit da3b8b7
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 33 deletions.
diff --git a/app/scripts/components/exploration/components/timeline/timeline-controls.tsx b/app/scripts/components/exploration/components/timeline/timeline-controls.tsx
@@ -30,7 +30,6 @@ import {
   selectedDateAtom,
   selectedIntervalAtom
 } from '$components/exploration/atoms/atoms';
-import { emptyDateRange } from '$components/exploration/constants';
 
 const TimelineControlsSelf = styled.div`
   width: 100%;
@@ -149,36 +148,34 @@ export function TimelineControls(props: TimelineControlsProps) {
             )}
           </ToolbarGroup>
           <ToolbarGroup>
-            <DatePicker
-              id='date-picker-lr'
-              value={selectedInterval ?? emptyDateRange}
-              onConfirm={(d) => {
-                setSelectedInterval({
-                  start: d.start!,
-                  end: d.end!
-                });
-              }}
-              isClearable={false}
-              isRange
-              alignment='right'
-              renderTriggerElement={(props) => (
-                <DatePickerButton {...props} size='small' disabled={!xScaled}>
-                  <span className='head-reference'>L</span>
-                  <span>
-                    {selectedInterval
-                      ? format(selectedInterval.start, 'MMM do, yyyy')
-                      : 'Date'}
-                  </span>
-                  <span className='head-reference'>R</span>
-                  <span>
-                    {selectedInterval
-                      ? format(selectedInterval.end, 'MMM do, yyyy')
-                      : 'Date'}
-                  </span>
-                  <CollecticonChevronDownSmall />
-                </DatePickerButton>
-              )}
-            />
+            {selectedInterval && (
+              <DatePicker
+                id='date-picker-lr'
+                value={selectedInterval}
+                onConfirm={(d) => {
+                  setSelectedInterval({
+                    start: d.start!,
+                    end: d.end!
+                  });
+                }}
+                isClearable={false}
+                isRange
+                alignment='right'
+                renderTriggerElement={(props) => (
+                  <DatePickerButton {...props} size='small' disabled={!xScaled}>
+                    <span className='head-reference'>From</span>
+                    <span>
+                        {format(selectedInterval.start, 'MMM do, yyyy')}
+                    </span>
+                    <span className='head-reference'>to</span>
+                    <span>
+                        {format(selectedInterval.end, 'MMM do, yyyy')}
+                    </span>
+                    <CollecticonChevronDownSmall />
+                  </DatePickerButton>
+                )}
+              />
+            )}
             <VerticalDivider />
 
             <ToolbarIconButton

diff --git a/app/scripts/components/exploration/components/timeline/timeline-head.tsx b/app/scripts/components/exploration/components/timeline/timeline-head.tsx
@@ -134,7 +134,7 @@ export function TimelineHeadIn(props: TimelineHeadProps) {
         }}
       />
       <text fill={theme.color?.base} fontSize='0.75rem' y='0' x='2' dy='1em'>
-        {label ?? 'L'}
+        {label}
       </text>
     </TimelineHeadBase>
   );
@@ -164,7 +164,7 @@ export function TimelineHeadOut(props: TimelineHeadProps) {
         dy='1em'
         textAnchor='end'
       >
-        {label ?? 'R'}
+        {label}
       </text>
     </TimelineHeadBase>
   );

diff --git a/app/scripts/components/exploration/components/timeline/timeline.tsx b/app/scripts/components/exploration/components/timeline/timeline.tsx
@@ -54,6 +54,7 @@ import {
 import { useInteractionRectHover } from '$components/exploration/hooks/use-dataset-hover';
 import { datasetLayers } from '$components/exploration/data-utils';
 import { useAnalysisController } from '$components/exploration/hooks/use-analysis-data-request';
+import useAois from '$components/common/map/controls/hooks/use-aois';
 
 const TimelineWrapper = styled.div`
   position: relative;
@@ -166,6 +167,8 @@ export default function Timeline(props: TimelineProps) {
 
   const { setObsolete } = useAnalysisController();
 
+  const { features } = useAois();
+
   useEffect(() => {
     // Set the analysis as obsolete when the selected interval changes.
     setObsolete();
@@ -362,6 +365,38 @@ export default function Timeline(props: TimelineProps) {
     selectedInterval
   ]);
 
+  // Set a date range selection when the user creates a new AOI.
+  const prevFeaturesCount = usePreviousValue(features.length);
+  useEffect(() => {
+    // If no feature change, no selected day, or no domain, skip.
+    if (prevFeaturesCount === features.length || !selectedDay || !dataDomain)
+      return;
+
+    if (!features.length) {
+      // All features were removed. Reset the selected day/interval.
+      setSelectedInterval(null);
+    }
+
+    if (prevFeaturesCount === 0 && features.length > 0) {
+      // We went from 0 features to some features.
+      const startDate = sub(selectedDay, { months: 2 });
+      const endDate = add(selectedDay, { months: 2 });
+
+      // Set start and end days from the selected day, if able.
+      const [start, end] = dataDomain;
+      setSelectedInterval({
+        start: isAfter(startDate, start) ? startDate : selectedDay,
+        end: isBefore(endDate, end) ? endDate : end
+      });
+    }
+  }, [
+    features.length,
+    prevFeaturesCount,
+    selectedDay,
+    dataDomain,
+    setSelectedInterval
+  ]);
+
   const shouldRenderTimeline = xScaled && dataDomain;
 
   // Attach the needed event listeners to the interaction rectangle to capture