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

app/src/components/Chart/Chart.tsx

@@ -1,3 +1,4 @@
+import '../../react-vis-compat' // React 19 compatibility shim for react-vis
 import DateFormatter from '../helper/DateFormatter'
 import NoData from './NoData'
 import NumberFormatter from '../helper/NumberFormatter'

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>
   )
 }
 

app/src/components/Sidebar/ValueRenderer/ActionButtons.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback } from 'react'
 import Code from '@mui/icons-material/Code'
 import Reorder from '@mui/icons-material/Reorder'
-import ToggleButton from '@mui/lab/ToggleButton'
-import ToggleButtonGroup from '@mui/lab/ToggleButtonGroup'
+import ToggleButton from '@mui/material/ToggleButton'
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
 import { settingsActions } from '../../../actions'
 import { Tooltip } from '@mui/material'
 import { withStyles } from '@mui/styles'

app/src/react-vis-compat.ts

@@ -0,0 +1,28 @@
+/**
+ * React 19 compatibility shim for react-vis
+ * 
+ * react-vis uses React internals that were removed in React 19.
+ * This shim adds back the missing internals to maintain compatibility.
+ */
+import * as React from 'react'
+
+// Add missing React internals that react-vis expects
+if (typeof React !== 'undefined') {
+  const internals = (React as any).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
+  
+  if (internals) {
+    // ReactCurrentOwner was removed in React 19 but react-vis expects it
+    if (!internals.ReactCurrentOwner) {
+      internals.ReactCurrentOwner = {
+        current: null,
+      }
+    }
+    
+    // ReactCurrentDispatcher compatibility
+    if (!internals.ReactCurrentDispatcher) {
+      internals.ReactCurrentDispatcher = {
+        current: null,
+      }
+    }
+  }
+}