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

     1  import { useEffect } from 'react';
     2  import { actions, selectQueries } from '@webapp/redux/reducers/continuous';
     3  import { useAppDispatch, useAppSelector } from '@webapp/redux/hooks';
     4  import { queryToAppName, Query } from '@webapp/models/query';
     5  
     6  function isQueriesHasSameApp(queries: Query[]): boolean {
     7    const appName = queryToAppName(queries[0]);
     8    if (appName.isNothing) {
     9      return false;
    10    }
    11  
    12    return queries.every((query) => query.startsWith(appName.value));
    13  }
    14  
    15  // usePopulateLeftRightQuery populates the left and right queries using the main query
    16  export default function usePopulateLeftRightQuery() {
    17    const dispatch = useAppDispatch();
    18    const { query, leftQuery, rightQuery } = useAppSelector(selectQueries);
    19  
    20    // should not populate queries when redirected
    21    // plus it prohibits different apps from being compared/diffed
    22    const shouldResetQuery =
    23      query && !isQueriesHasSameApp([query, leftQuery, rightQuery]);
    24  
    25    // When the query changes (ie the app has changed)
    26    // We populate left and right tags to reflect that application
    27    useEffect(() => {
    28      if (shouldResetQuery) {
    29        dispatch(actions.setRightQuery(query));
    30        dispatch(actions.setLeftQuery(query));
    31      }
    32    }, [shouldResetQuery]);
    33  }