fixed web metrics hover error

Author: garrettlchow

src/app/components/StateRoute/PerformanceVisx/BarGraph.tsx

@@ -127,7 +127,7 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
           <label id='routes-dropdown'>Route: </label>
           <select
             className='performance-dropdown'
-            labelId='demo-simple-select-label'
+            labelid='demo-simple-select-label'
             id='routes-select'
             onChange={(e) => {
               setRoute(e.target.value);
@@ -147,7 +147,7 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
         <form className='routesForm' id='routes-formcontrol'>
           <label id='routes-dropdown'>Snapshot: </label>
           <select
-            labelId='demo-simple-select-label'
+            labelid='demo-simple-select-label'
             id='snapshot-select'
             onChange={(e) => setSnapshot(e.target.value)}
           >

src/app/components/StateRoute/WebMetrics/WebMetrics.tsx

@@ -103,9 +103,15 @@ const radialGraph = (props) => {
     }
   };
 
+  const hoverOptions = {
+    followCursor: false,
+    shiftX: 20,
+    shiftY: 0,
+  };
+
   return (
     <div className='metric'>
-      <ReactHover>
+      <ReactHover options={hoverOptions}>
         <Trigger type='trigger'>
           <div id='chart' className='chart-container'>
             <Charts

src/app/containers/ErrorContainer.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { launchContentScript } from '../slices/mainSlice';
+import { launchContentScript, setTab } from '../slices/mainSlice';
 import { MainState, RootState, ErrorContainerProps } from '../FrontendTypes';
 import { RefreshCw, Github, PlayCircle } from 'lucide-react';
 
@@ -10,11 +10,50 @@ function ErrorContainer(props: ErrorContainerProps): JSX.Element {
     (state: RootState) => state.main,
   );
 
+  // Add effect to initialize currentTab if not set
+  useEffect(() => {
+    const initializeCurrentTab = async () => {
+      if (!currentTab) {
+        try {
+          // Query for the active tab
+          const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true });
+          if (activeTab?.id) {
+            dispatch(setTab(activeTab.id));
+          }
+        } catch (error) {
+          console.error('Error getting active tab:', error);
+        }
+      }
+    };
+
+    initializeCurrentTab();
+  }, [currentTab, dispatch]);
+
   // function that launches the main app and refreshes the page
   function launch(): void {
     // Add validation to ensure we have valid data
     if (!currentTab) {
-      console.warn('No current tab available');
+      console.warn('No current tab available - attempting to get active tab');
+      // Try to get the active tab when launching
+      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+        if (tabs[0]?.id) {
+          const activeTabId = tabs[0].id;
+          dispatch(setTab(activeTabId));
+          // Create default payload and launch
+          const defaultPayload = {
+            status: {
+              contentScriptLaunched: false,
+              reactDevToolsInstalled: false,
+              targetPageisaReactApp: false,
+            },
+          };
+          dispatch(launchContentScript(defaultPayload));
+          // Allow the dispatch to complete before refreshing
+          setTimeout(() => {
+            chrome.tabs.reload(activeTabId);
+          }, 100);
+        }
+      });
       return;
     }