hover updates

apps/web/src/components/features/metrics/MetricChartCard/MetricChartCard.tsx

@@ -9,6 +9,7 @@ import { useMemoizedFn } from '@/hooks/useMemoizedFn';
 import { inputHasText } from '@/lib/text';
 import { cn } from '@/lib/utils';
 import { MetricViewChartContent } from './MetricViewChartContent';
+import { MetricViewChartProvider } from './MetricViewChartContext';
 import { MetricViewChartHeader } from './MetricViewChartHeader';
 
 export type MetricChartCardProps = {
@@ -152,6 +153,7 @@ const MetricViewChartCardContainer = React.forwardRef<
   }, [isTable, loadingData, hasData, errorData]);
 
   return (
+    <MetricViewChartProvider>
       <div
         ref={ref}
         className={cn(
@@ -162,6 +164,7 @@ const MetricViewChartCardContainer = React.forwardRef<
       >
         {children}
       </div>
+    </MetricViewChartProvider>
   );
 });
 

apps/web/src/components/features/metrics/MetricChartCard/MetricViewChartContext.tsx

@@ -0,0 +1,17 @@
+import { useCallback, useState } from 'react';
+import { createContext, useContextSelector } from 'use-context-selector';
+
+export const useMetricViewChartContext = () => {
+  return {};
+};
+
+export const MetricViewChartContext = createContext<ReturnType<typeof useMetricViewChartContext>>(
+  {} as ReturnType<typeof useMetricViewChartContext>
+);
+
+export const MetricViewChartProvider = ({ children }: { children: React.ReactNode }) => {
+  const value = useMetricViewChartContext();
+  return (
+    <MetricViewChartContext.Provider value={value}>{children}</MetricViewChartContext.Provider>
+  );
+};

apps/web/src/components/features/metrics/MetricChartCard/MetricViewChartHeader.tsx

@@ -83,9 +83,7 @@ export const MetricViewChartHeader: React.FC<MetricViewChartHeaderProps> = React
               </>
             ) : null}
           </div>
-          {headerSecondaryContent && (
-            <div className="group-hover:block hidden">{headerSecondaryContent}</div>
-          )}
+          {headerSecondaryContent}
         </div>
       </LinkWrapper>
     );

apps/web/src/components/features/metrics/MetricHeaderSecondaryWrapper.tsx

@@ -1,15 +1,16 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { Button } from '@/components/ui/buttons/Button';
 import { Dropdown, type IDropdownItems } from '@/components/ui/dropdown';
 import { DotsVertical } from '@/components/ui/icons';
+import { useDebounce } from '@/hooks/useDebounce';
 import { cn } from '@/lib/classMerge';
 
-export const MetricHeaderSecondaryWrapperDropdown = ({
-  dropdownItems,
-}: {
-  dropdownItems: IDropdownItems;
-}) => {
+export const MetricHeaderSecondaryWrapperDropdown = React.memo(
+  ({ dropdownItems }: { dropdownItems: IDropdownItems }) => {
     const [isOpen, setIsOpen] = useState(false);
+
+    const debouncedIsOpen = useDebounce(isOpen, { wait: 60 });
+
     return (
       <div
         onClick={(e) => {
@@ -19,7 +20,9 @@ export const MetricHeaderSecondaryWrapperDropdown = ({
         className={cn(
           'mt-1.5 mr-1.5 opacity-0 group-hover:opacity-100',
           'group-hover:pointer-events-auto',
-        isOpen && 'pointer-events-auto block opacity-100'
+          'group-hover:block hidden',
+          isOpen && 'pointer-events-auto !block opacity-100',
+          debouncedIsOpen && 'block!'
         )}
       >
         <Dropdown
@@ -34,4 +37,7 @@ export const MetricHeaderSecondaryWrapperDropdown = ({
         </Dropdown>
       </div>
     );
-};
+  }
+);
+
+MetricHeaderSecondaryWrapperDropdown.displayName = 'MetricHeaderSecondaryWrapperDropdown';