Upgrade to Material-UI v7 and React 19 (#954)

app/src/components/Sidebar/CodeDiff/ChartPreview.tsx

@@ -41,31 +41,29 @@ function ChartPreview(props: Props) {
 
   const addChartToPanelButton = hasEnoughDataToDisplayDiagrams ? (
     <Tooltip title="Add to chart panel">
-      <ShowChart
+      <span
         ref={chartIconRef}
-        className={props.classes.icon}
         onMouseEnter={mouseOver}
         onMouseLeave={mouseOut}
         onClick={onClick}
-        data-test-type="ShowChart"
-        data-test={props.literal.path}
-      />
+        style={{ cursor: 'pointer', display: 'inline-flex' }}
+      >
+        <ShowChart className={props.classes.icon} />
+      </span>
     </Tooltip>
   ) : (
     <Tooltip title="Add to chart panel, not enough data for preview">
-      <ShowChart
-        onClick={onClick}
-        className={props.classes.icon}
-        style={{ color: '#aaa' }}
-        data-test-type="ShowChart"
-        data-test={props.literal.path}
-      />
+      <span onClick={onClick} style={{ cursor: 'pointer', display: 'inline-flex' }}>
+        <ShowChart className={props.classes.icon} style={{ color: '#aaa' }} />
+      </span>
     </Tooltip>
   )
 
   return (
-    <span>
-      {addChartToPanelButton}
+    <div style={{ display: 'inline' }}>
+      <span data-test-type="ShowChart" data-test={props.literal.path} style={{ display: 'inline-block' }}>
+        {addChartToPanelButton}
+      </span>
       <Popper open={open} anchorEl={chartIconRef.current} placement="left-end">
         <Fade in={open} timeout={300}>
           <Paper style={{ width: '300px' }}>
@@ -77,7 +75,7 @@ function ChartPreview(props: Props) {
           </Paper>
         </Fade>
       </Popper>
-    </span>
+    </div>
   )
 }