github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/javascript/hooks/timeline.hook.ts (about)

     1  import { useEffect } from 'react';
     2  import { useAppDispatch, useAppSelector } from '@webapp/redux/hooks';
     3  import {
     4    fetchSideTimelines,
     5    selectContinuousState,
     6    selectTimelineSidesData,
     7  } from '@webapp/redux/reducers/continuous';
     8  import Color from 'color';
     9  
    10  // Purple
    11  export const leftColor = Color('rgb(208, 102, 212)');
    12  // Blue
    13  export const rightColor = Color('rgb(19, 152, 246)');
    14  // Greyish
    15  export const selectionColor = Color('rgb(240, 240, 240)');
    16  
    17  export default function useTimelines() {
    18    const dispatch = useAppDispatch();
    19    const {
    20      from,
    21      until,
    22      refreshToken,
    23      maxNodes,
    24  
    25      leftQuery,
    26      rightQuery,
    27    } = useAppSelector(selectContinuousState);
    28    const timelines = useAppSelector(selectTimelineSidesData);
    29  
    30    // Only reload timelines when an item that affects a timeline has changed
    31    useEffect(() => {
    32      if (leftQuery && rightQuery) {
    33        dispatch(fetchSideTimelines(null));
    34      }
    35    }, [from, until, refreshToken, maxNodes, leftQuery, rightQuery]);
    36  
    37    const leftTimeline = {
    38      color: leftColor.rgb().toString(),
    39      data: timelines.left,
    40    };
    41  
    42    const rightTimeline = {
    43      color: rightColor.rgb().toString(),
    44      data: timelines.right,
    45    };
    46    return {
    47      leftTimeline,
    48      rightTimeline,
    49    };
    50  }