area/ui: Make timeline guide conditionally be on top

ui/packages/shared/profile/src/ProfileIcicleGraph/IcicleGraphArrow/index.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {memo, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 
 import {Dictionary, Table, Vector, tableFromIPC} from 'apache-arrow';
 import {useContextMenu} from 'react-contexify';
@@ -33,6 +33,7 @@ import GraphTooltipArrow from '../../GraphTooltipArrow';
 import GraphTooltipArrowContent from '../../GraphTooltipArrow/Content';
 import {DockedGraphTooltip} from '../../GraphTooltipArrow/DockedGraphTooltip';
 import {useProfileViewContext} from '../../ProfileView/context/ProfileViewContext';
+import {TimelineAndIcicleContext} from '../context/TimelineAndIcicleContext';
 import ContextMenu from './ContextMenu';
 import {IcicleNode, RowHeight, colorByColors} from './IcicleGraphNodes';
 import {useFilenamesList} from './useMappingList';
@@ -113,6 +114,7 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
   mappingsListFromMetadata,
   compareAbsolute,
 }: IcicleGraphArrowProps): React.JSX.Element {
+  const {setIsIcicleGraphHovered} = useContext(TimelineAndIcicleContext);
   const [isContextMenuOpen, setIsContextMenuOpen] = useState<boolean>(false);
   const dispatch = useAppDispatch();
   const [highlightSimilarStacksPreference] = useUserPreference<boolean>(
@@ -192,6 +194,10 @@ export const IcicleGraphArrow = memo(function IcicleGraphArrow({
 
   const colorByColors: colorByColors = colorByList[colorByValue as ColorByKey];
 
+  useEffect(() => {
+    setIsIcicleGraphHovered(hoveringRow !== null);
+  }, [hoveringRow, setIsIcicleGraphHovered]);
+
   useEffect(() => {
     if (ref.current != null) {
       setHeight(ref?.current.getBoundingClientRect().height);

ui/packages/shared/profile/src/ProfileIcicleGraph/context/TimelineAndIcicleContext.tsx

@@ -0,0 +1,40 @@
+// Copyright 2022 The Parca Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {ReactNode, createContext, useState} from 'react';
+
+interface TimelineAndIcicleContextType {
+  isIcicleGraphHovered: boolean;
+  setIsIcicleGraphHovered: (value: boolean) => void;
+}
+
+interface TimelineAndIcicleProviderProps {
+  children: ReactNode;
+}
+
+export const TimelineAndIcicleContext = createContext<TimelineAndIcicleContextType>({
+  isIcicleGraphHovered: false,
+  setIsIcicleGraphHovered: () => null,
+});
+
+function TimelineAndIcicleProvider({children}: TimelineAndIcicleProviderProps): React.JSX.Element {
+  const [isIcicleGraphHovered, setIsIcicleGraphHovered] = useState(false);
+
+  return (
+    <TimelineAndIcicleContext.Provider value={{isIcicleGraphHovered, setIsIcicleGraphHovered}}>
+      {children}
+    </TimelineAndIcicleContext.Provider>
+  );
+}
+
+export default TimelineAndIcicleProvider;

ui/packages/shared/profile/src/ProfileIcicleGraph/index.tsx

@@ -26,6 +26,7 @@ import {TimelineGuide} from '../TimelineGuide';
 import {IcicleGraph} from './IcicleGraph';
 import {FIELD_FUNCTION_NAME, IcicleGraphArrow} from './IcicleGraphArrow';
 import useMappingList from './IcicleGraphArrow/useMappingList';
+import TimelineAndIcicleProvider from './context/TimelineAndIcicleContext';
 
 const numberFormatter = new Intl.NumberFormat('en-US');
 
@@ -167,29 +168,31 @@ const ProfileIcicleGraph = function ProfileIcicleGraphNonMemo({
     if (arrow !== undefined)
       return (
         <div className="relative">
-          {timelineGuide?.show === true && (
-            <TimelineGuide
-              bounds={timelineGuide.props.bounds}
+          <TimelineAndIcicleProvider>
+            {timelineGuide?.show === true && (
+              <TimelineGuide
+                bounds={timelineGuide.props.bounds}
+                width={width}
+                height={1000}
+                margin={0}
+                ticks={60000 / 10000}
+              />
+            )}
+            <IcicleGraphArrow
               width={width}
-              height={1000}
-              margin={0}
-              ticks={60000 / 10000}
+              arrow={arrow}
+              total={total}
+              filtered={filtered}
+              curPath={curPath}
+              setCurPath={setNewCurPath}
+              profileType={profileType}
+              sortBy={storeSortBy as string}
+              flamegraphLoading={isLoading}
+              isHalfScreen={isHalfScreen}
+              mappingsListFromMetadata={mappingsList}
+              compareAbsolute={isCompareAbsolute}
             />
-          )}
-          <IcicleGraphArrow
-            width={width}
-            arrow={arrow}
-            total={total}
-            filtered={filtered}
-            curPath={curPath}
-            setCurPath={setNewCurPath}
-            profileType={profileType}
-            sortBy={storeSortBy as string}
-            flamegraphLoading={isLoading}
-            isHalfScreen={isHalfScreen}
-            mappingsListFromMetadata={mappingsList}
-            compareAbsolute={isCompareAbsolute}
-          />
+          </TimelineAndIcicleProvider>
         </div>
       );
   }, [

ui/packages/shared/profile/src/ProfileView/components/ActionButtons/GroupByDropdown.tsx

@@ -200,7 +200,7 @@ const GroupByDropdown: React.FC<GroupByDropdownProps> = ({
           leaveTo="opacity-0"
           show={isDropdownOpen}
         >
-          <div className="absolute left-0 z-10 mt-1 min-w-[400px] overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm">
+          <div className="absolute left-0 z-30 mt-1 min-w-[400px] overflow-auto rounded-md bg-gray-50 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:ring-white dark:ring-opacity-20 sm:text-sm">
             <div className="p-4">
               <fieldset>
                 <div className="space-y-5">

ui/packages/shared/profile/src/TimelineGuide/index.tsx

@@ -11,10 +11,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {Fragment} from 'react';
+import {Fragment, useContext} from 'react';
 
+import cx from 'classnames';
 import * as d3 from 'd3';
 
+import {TimelineAndIcicleContext} from '../ProfileIcicleGraph/context/TimelineAndIcicleContext';
 import {NumberDuo} from '../utils';
 
 interface Props {
@@ -38,11 +40,15 @@ const alignBeforeAxisCorrection = (val: number): number => {
 
 export const TimelineGuide = ({bounds, width, height, margin, ticks}: Props): JSX.Element => {
   const xScale = d3.scaleLinear().domain(bounds).range([0, width]);
+  const {isIcicleGraphHovered} = useContext(TimelineAndIcicleContext);
 
   return (
     <div className="relative h-4">
-      <div className="absolute" style={{width, height}}>
-        <svg style={{width: '100%', height: '100%'}} className="z-[5]">
+      <div
+        className={cx('absolute pointer-events-none', isIcicleGraphHovered ? 'z-[9]' : 'z-[10]')}
+        style={{width, height}}
+      >
+        <svg style={{width: '100%', height: '100%'}}>
           <g
             className="x axis"
             fill="none"