refactor: [wip]

webapp/javascript/components/TimelineChart/SyncTimelines/index.tsx

@@ -5,58 +5,69 @@ import { checkSelectionInRange } from '@webapp/components/TimelineChart/SyncTime
 import { unitsToFlamegraphTitle } from '@webapp/components/TimelineTitle';
 import { TimelineData, centerTimelineData } from '../centerTimelineData';
 import { Selection } from '../markings';
+import { useSync } from './useSync';
 
 import styles from './styles.module.scss';
 
 interface SyncTimelinesProps {
-  titleKey: 'baseline' | 'comparison';
+  // titleKey: 'baseline' | 'comparison';
   timeline: TimelineData;
+  // selection: {
+  //   from: Selection['from'];
+  //   to: Selection['to'];
+  // };
   selection: {
-    from: Selection['from'];
-    to: Selection['to'];
+    left: {
+      from: Selection['from'];
+      to: Selection['to'];
+    };
+    right: {
+      from: Selection['from'];
+      to: Selection['to'];
+    };
   };
 }
-function SyncTimelines({ timeline, selection, titleKey }: SyncTimelinesProps) {
-  const dispatch = useAppDispatch();
+function SyncTimelines({ timeline, selection }: SyncTimelinesProps) {
+  // const dispatch = useAppDispatch();
+  const { isSelectionInRange, onSync } = useSync({ timeline, selection });
 
   if (!timeline.data?.samples.length) {
     return null;
   }
 
-  const inRange = checkSelectionInRange({
-    timeline,
-    selection,
-  });
+  // const inRange = checkSelectionInRange({
+  //   timeline,
+  //   selection,
+  // });
 
-  const onClick = () => {
-    const centeredData = centerTimelineData(timeline);
-    const timelineFrom = centeredData?.[0]?.[0];
-    const timelineTo = centeredData?.[centeredData?.length - 1]?.[0];
+  // console.log('inRange', inRange);
 
-    const diff = timelineTo - timelineFrom;
+  // const onClick = () => {
+  // const centeredData = centerTimelineData(timeline);
+  // const timelineFrom = centeredData?.[0]?.[0];
+  // const timelineTo = centeredData?.[centeredData?.length - 1]?.[0];
+  // const diff = timelineTo - timelineFrom;
+  // const action =
+  //   titleKey === 'baseline'
+  //     ? actions.setLeft({
+  //         from: String(timelineFrom),
+  //         until: String(timelineFrom + diff / 2),
+  //       })
+  //     : actions.setRight({
+  //         from: String(timelineFrom + diff / 2),
+  //         until: String(timelineTo),
+  //       });
+  // dispatch(action);
+  // };
 
-    const action =
-      titleKey === 'baseline'
-        ? actions.setLeft({
-            from: String(timelineFrom),
-            until: String(timelineFrom + diff / 2),
-          })
-        : actions.setRight({
-            from: String(timelineFrom + diff / 2),
-            until: String(timelineTo),
-          });
-
-    dispatch(action);
-  };
-
-  if (inRange) {
+  if (isSelectionInRange) {
     return null;
   }
 
   return (
     <div className={styles.wrapper}>
-      Warning: {unitsToFlamegraphTitle[titleKey]} selection is out of range
-      <button onClick={onClick} type="button" className={styles.syncButton}>
+      Warning: Main Timeline selection is out of range
+      <button onClick={onSync} type="button" className={styles.syncButton}>
         Sync Timelines
       </button>
     </div>

webapp/javascript/components/TimelineChart/SyncTimelines/useSync.ts

@@ -0,0 +1,100 @@
+// import { areIntervalsOverlapping } from 'date-fns';
+import {
+  centerTimelineData,
+  TimelineData,
+} from '@webapp/components/TimelineChart/centerTimelineData';
+import { actions } from '@webapp/redux/reducers/continuous';
+import { useAppDispatch } from '@webapp/redux/hooks';
+import { markingsFromSelection, Selection } from '../markings';
+
+type UseSyncParams = {
+  timeline: TimelineData;
+  selection: {
+    left: {
+      from: Selection['from'];
+      to: Selection['to'];
+    };
+    right: {
+      from: Selection['from'];
+      to: Selection['to'];
+    };
+  };
+};
+
+export function useSync({ timeline, selection }: UseSyncParams) {
+  const dispatch = useAppDispatch();
+  const centeredData = centerTimelineData(timeline);
+
+  const leftSelectionMarkings = markingsFromSelection(
+    'single',
+    selection.left as Selection
+  );
+  const rightSelectionMarkings = markingsFromSelection(
+    'single',
+    selection.right as Selection
+  );
+
+  const timelineFrom = centeredData?.[0]?.[0];
+  const timelineTo = centeredData?.[centeredData?.length - 1]?.[0];
+
+  console.log('timelineFrom', timelineFrom);
+  console.log('timelineTo', timelineTo);
+
+  const leftSelectionFrom = leftSelectionMarkings?.[0]?.xaxis?.from;
+  const leftSelectionTo = leftSelectionMarkings?.[0]?.xaxis?.to;
+
+  const rightSelectionFrom = rightSelectionMarkings?.[0]?.xaxis?.from;
+  const rightSelectionTo = rightSelectionMarkings?.[0]?.xaxis?.to;
+
+  const fullRange = {
+    start: new Date(timelineFrom),
+    end: new Date(timelineTo),
+  };
+
+  console.log('fullRange', fullRange);
+
+  // const leftSelectionRange = {
+  //   start: new Date(leftSelectionFrom),
+  //   end: new Date(leftSelectionTo),
+  // };
+
+  const selectionsLimits = [
+    leftSelectionFrom,
+    leftSelectionTo,
+    rightSelectionFrom,
+    rightSelectionTo,
+  ];
+
+  const min = Math.min(...selectionsLimits);
+  const max = Math.max(...selectionsLimits);
+
+  //   console.log('min', min);
+  //   console.log('max', max);
+
+  const selectionRange = {
+    start: new Date(min),
+    end: new Date(max),
+  };
+
+  console.log('selectionRange', selectionRange);
+
+  // console.log('selectionRange', selectionRange);
+
+  const isLeftOut = min + 5000 < timelineFrom;
+  const isRightOut = max - 5000 > timelineTo;
+
+  console.log('isLeftOut', isLeftOut);
+  console.log('isRightOut', isRightOut);
+
+  return {
+    isSelectionInRange: !(isLeftOut || isRightOut),
+    onSync: () => {
+      dispatch(
+        actions.setFromAndUntil({
+          from: String(min - 5000),
+          until: String(max + 5000),
+        })
+      );
+    },
+  };
+}

webapp/javascript/pages/ContinuousComparisonView.tsx

@@ -81,6 +81,8 @@ function ComparisonApp() {
     rightSide &&
     leftSide.metadata.units === rightSide.metadata.units;
 
+  console.log({ leftTimeline, rightTimeline });
+
   return (
     <div>
       <PageTitle title={formatTitle('Comparison', leftQuery, rightQuery)} />
@@ -130,6 +132,13 @@ function ComparisonApp() {
               }
               selectionType="double"
             />
+            <SyncTimelines
+              timeline={leftTimeline}
+              selection={{
+                left: { from: leftFrom, to: leftUntil },
+                right: { from: rightFrom, to: rightUntil },
+              }}
+            />
           </LoadingOverlay>
         </Box>
         <div
@@ -176,11 +185,6 @@ function ComparisonApp() {
                   )
                 }
               >
-                <SyncTimelines
-                  timeline={leftTimeline}
-                  titleKey="baseline"
-                  selection={{ from: leftFrom, to: leftUntil }}
-                />
                 <TimelineChartWrapper
                   key="timeline-chart-left"
                   id="timeline-chart-left"
@@ -245,11 +249,6 @@ function ComparisonApp() {
                   )
                 }
               >
-                <SyncTimelines
-                  timeline={rightTimeline}
-                  titleKey="comparison"
-                  selection={{ from: rightFrom, to: rightUntil }}
-                />
                 <TimelineChartWrapper
                   key="timeline-chart-right"
                   id="timeline-chart-right"

webapp/javascript/pages/ContinuousDiffView.tsx

@@ -144,6 +144,13 @@ function ComparisonDiffApp() {
                 <TimelineTitle titleKey={diffView.profile?.metadata.units} />
               }
             />
+            <SyncTimelines
+              timeline={leftTimeline}
+              selection={{
+                left: { from: leftFrom, to: leftUntil },
+                right: { from: rightFrom, to: rightUntil },
+              }}
+            />
           </LoadingOverlay>
         </Box>
         <div className="diff-instructions-wrapper">
@@ -165,11 +172,6 @@ function ComparisonDiffApp() {
                   dispatch(fetchTagValues({ query, label }));
                 }}
               />
-              <SyncTimelines
-                timeline={leftTimeline}
-                titleKey="baseline"
-                selection={{ from: leftFrom, to: leftUntil }}
-              />
               <TimelineChartWrapper
                 data-testid="timeline-left"
                 key="timeline-chart-left"
@@ -210,11 +212,6 @@ function ComparisonDiffApp() {
                   dispatch(fetchTagValues({ query, label }));
                 }}
               />
-              <SyncTimelines
-                timeline={rightTimeline}
-                titleKey="comparison"
-                selection={{ from: rightFrom, to: rightUntil }}
-              />
               <TimelineChartWrapper
                 data-testid="timeline-right"
                 key="timeline-chart-right"