Add TOI zoom behavior

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

@@ -12,6 +12,11 @@ export const zoomTransformAtom = atom<ZoomTransformPlain>({
   k: 1
 });
 
+
+// Atom to zoom TOI when analysis is run
+type ZoomTOIFunction = (newX: number, newK: number) => void;
+export const onTOIZoomAtom = atom<ZoomTOIFunction | null>(null);
+
 // Width of the whole timeline item. Set via a size observer and then used to
 // compute the different element sizes.
 export const timelineWidthAtom = atom<number | undefined>(undefined);

app/scripts/components/exploration/components/map/analysis-message-control.tsx

@@ -11,7 +11,13 @@ import {
 } from '@devseed-ui/collecticons';
 import { timelineDatasetsAtom } from '../../atoms/datasets';
 import { selectedIntervalAtom } from '../../atoms/dates';
+
+import { useScales } from '../../hooks/scales-hooks';
 import useMaps from '$components/common/map/hooks/use-maps';
+import { useOnTOIZoom } from '$components/exploration/hooks/use-toi-zoom';
+import {
+  timelineWidthAtom
+} from '$components/exploration/atoms/timeline';
 
 import useAois from '$components/common/map/controls/hooks/use-aois';
 import { calcFeatCollArea } from '$components/common/aoi/utils';
@@ -21,6 +27,7 @@ import useThemedControl from '$components/common/map/controls/hooks/use-themed-c
 import { getZoomFromBbox } from '$components/common/map/utils';
 import { AoIFeature } from '$components/common/map/types';
 import { ShortcutCode } from '$styles/shortcut-code';
+import { RIGHT_AXIS_SPACE, HEADER_COLUMN_WIDTH } from '$components/exploration/constants';
 
 const AnalysisMessageWrapper = styled.div.attrs({
   'data-tour': 'analysis-message'
@@ -90,8 +97,13 @@ export function AnalysisMessage({ mainMap }: { mainMap: MapRef | undefined }) {
   const datasets = useAtomValue(timelineDatasetsAtom);
   const datasetIds = datasets.map((d) => d.data.id);
 
+  const timelineWidth = useAtomValue(timelineWidthAtom);
+  const { main } = useScales();
+  const { onTOIZoom } = useOnTOIZoom();
+
   const { features } = useAois();
   const selectedInterval = useAtomValue(selectedIntervalAtom);
+
   const dateLabel =
     selectedInterval &&
     formatDateRange(selectedInterval.start, selectedInterval.end);
@@ -102,7 +114,10 @@ export function AnalysisMessage({ mainMap }: { mainMap: MapRef | undefined }) {
     setObsolete();
   }, [setObsolete, features]);
 
+
+
   const analysisCallback = useCallback(() => {
+    // Fit AOI
     const bboxToFit = bbox({
       type: 'FeatureCollection',
       features: selectedFeatures
@@ -112,7 +127,18 @@ export function AnalysisMessage({ mainMap }: { mainMap: MapRef | undefined }) {
       center:[ (bboxToFit[2] + bboxToFit[0])/2, (bboxToFit[3] + bboxToFit[1])/2],
       zoom
     });
-  }, [selectedFeatures, mainMap]);
+
+    // Fit TOI
+    if (!main || !timelineWidth || !selectedInterval?.start ) return;
+
+    const widthToFit = (timelineWidth - RIGHT_AXIS_SPACE - HEADER_COLUMN_WIDTH) * 0.9;
+    const startPoint = 0;
+    const new_k = widthToFit/(main(selectedInterval.end) - main(selectedInterval.start));
+    const new_x = startPoint - new_k * main(selectedInterval.start);
+
+    onTOIZoom(new_x, new_k);
+
+  }, [selectedFeatures, mainMap, main, timelineWidth, onTOIZoom, selectedInterval]);
 
   if (isAnalyzing) {
     return (

app/scripts/components/exploration/components/timeline/timeline.tsx

@@ -56,6 +56,7 @@ import {
   useScaleFactors,
   useScales
 } from '$components/exploration/hooks/scales-hooks';
+import { useOnTOIZoom } from '$components/exploration/hooks/use-toi-zoom';
 import {
   TimelineDatasetStatus,
   TimelineDatasetSuccess,
@@ -200,7 +201,7 @@ export default function Timeline(props: TimelineProps) {
   const [selectedInterval, setSelectedInterval] = useAtom(selectedIntervalAtom);
 
   const { setObsolete, runAnalysis, isAnalyzing } = useAnalysisController();
-
+  const [zoomTransform, setZoomTransform] = useAtom(zoomTransformAtom);
   const { features } = useAois();
 
   useEffect(() => {
@@ -216,8 +217,6 @@ export default function Timeline(props: TimelineProps) {
     [width]
   );
 
-  const [zoomTransform, setZoomTransform] = useAtom(zoomTransformAtom);
-
   // Calculate min and max scale factors, such has each day has a minimum of 2px
   // and a maximum of 100px.
   const { k0, k1 } = useScaleFactors();
@@ -371,7 +370,17 @@ export default function Timeline(props: TimelineProps) {
     applyTransform(zoomBehavior, select(interactionRef.current), 0, 0, k0);
   }, [prevSuccessDatasetsCount, successDatasetsCount, k0, zoomBehavior]);
 
-  const onControlsZoom = useCallback(
+  const { initializeTOIZoom } = useOnTOIZoom();
+
+  useEffect(() => {
+    // Set TOIZoom functionality in atom so it can be used in analysis component
+    // Ensure zoomBehavior and interactionRef are defined before initializing
+    if (zoomBehavior && interactionRef.current) {
+      initializeTOIZoom(zoomBehavior, interactionRef);
+    }
+  }, [initializeTOIZoom, zoomBehavior, interactionRef]);
+
+    const onControlsZoom = useCallback(
     (zoomV) => {
       if (!interactionRef.current || !xMain || !xScaled || !selectedDay) return;
 

app/scripts/components/exploration/hooks/use-toi-zoom.ts

@@ -0,0 +1,33 @@
+import { useCallback } from 'react';
+import { useAtom } from 'jotai';
+import { select, ZoomBehavior } from 'd3';
+import { onTOIZoomAtom } from '../atoms/timeline';
+import { applyTransform } from '$components/exploration/components/timeline/timeline-utils';
+
+export function useOnTOIZoom() {
+  const [onTOIZoom, setOnTOIZoom] = useAtom(onTOIZoomAtom);
+
+  const initialize = useCallback((zoomBehavior:  ZoomBehavior<Element, unknown>, interactionRef: React.RefObject<HTMLElement>) => {
+    setOnTOIZoom(() => (newX: number, newK: number) => {
+      if (!newX || !newK) return;
+      const { current: interactionElement } = interactionRef;
+      if (!interactionElement) return;
+
+      applyTransform(
+        zoomBehavior,
+        select(interactionElement),
+        newX,
+        0,
+        newK
+      );
+    });
+  }, [setOnTOIZoom]);
+
+  const safeOnTOIZoom = (newX: number, newK: number) => {
+    if (onTOIZoom) {
+      onTOIZoom(newX, newK);
+    }
+  };
+
+  return { initializeTOIZoom: initialize, onTOIZoom: safeOnTOIZoom };
+}