Merge branch 'master' into copilot/make-byte-limit-configurable

Upgrade to Node.js 24, update dependencies, migrate configs to ES modules, replace ts-node with tsx, upgrade React/Material-UI, and update GitHub Actions (#940 )
## Update Dependencies, Node.js 24, and Migrate to ES Modules This PR updates the project dependencies, Node.js version, workflows, and migrates from CommonJS to ES modules. ### Checklist #### Phase 1: Assessment and Configuration - [x] Assess current project structure and dependencies - [x] Update Node.js version requirements (>=24 for builds, >=20 for runtime) - [x] Update GitHub workflow files to use Node 24 - [x] Update Dockerfile to use Node 24 #### Phase 2: TypeScript Configuration for ES Modules - [x] Update root tsconfig.json to use ES2020 target with CommonJS modules - [x] Update backend/tsconfig.json to use ES2020 target with CommonJS modules - [x] Update app/tsconfig.json to use ES2020 target with ESNext modules #### Phase 3: Update Dependencies - [x] Update root package.json dependencies to latest compatible versions - [x] Update app/package.json dependencies to latest compatible versions - [x] Update backend/package.json dependencies to latest compatible versions - [x] Run yarn install to update lockfile #### Phase 4: Convert CommonJS to ES Modules - [x] Convert webpack config files to ES modules (.js → .mjs) - [x] Convert prettier.config.js to ES modules - [x] Update TypeScript files with CommonJS require() to use ES imports - [x] Fix breaking changes from dependency API updates #### Phase 5: Replace ts-node with tsx - [x] Replace ts-node with tsx in all package.json scripts - [x] Update root package.json to use tsx for prepare-release and package scripts - [x] Update backend package.json to use tsx with mocha - [x] Update app package.json to use tsx with mocha - [x] Update script shebangs to use tsx - [x] Add tsx to devDependencies, remove ts-node #### Phase 6: Upgrade React and Material-UI - [x] Upgrade React from 16.14.0 to 18.3.1 - [x] Upgrade React-DOM from 16.14.0 to 18.3.1 - [x] Migrate from @material-ui (v4) to @mui/material (v5) - [x] Add @emotion/react and @emotion/styled (required for MUI v5) - [x] Update all import paths from @material-ui/* to @mui/* - [x] Update theme creation from createMuiTheme to createTheme - [x] Update palette.type to palette.mode - [x] Update ReactDOM.render to ReactDOM.createRoot (React 18) - [x] Update ThemeProvider import to use @mui/material/styles - [x] Add @mui/styles for withStyles compatibility - [x] Separate Theme and withStyles imports correctly - [x] Replace fade with alpha in theme styles - [x] Replace ExpansionPanel with Accordion - [x] Fix all component imports from wrong modules - [x] Replace withTheme HOC with useTheme hook - [x] Replace theme.palette.text.hint with theme.palette.text.secondary - [x] Update all Redux reducers for Redux v5 compatibility #### Phase 7: Fix All TypeScript Errors - [x] Fix Dialog disableBackdropClick removal (use onClose handler) - [x] Fix Button classes.label removal (use sx prop) - [x] Fix Select onChange signature (MUI v5 API change) - [x] Fix Snackbar onClose signature (MUI v5 API change) - [x] Fix ClickAwayListener onClickAway signature (MUI v5 API change) - [x] Fix ReactResizeDetector (migrate to useResizeDetector hook) - [x] Fix Redux connect + withStyles type compatibility (use type assertions) - [x] Fix all connected component prop type errors - [x] Add children prop to ErrorBoundary - [x] Add parameter types to callbacks #### Phase 8: Build and Test - [x] Run yarn build - ✅ **SUCCESSFUL with 0 errors, 1 minor warning** - [x] Run yarn test - ✅ **All 27 tests passing (5 app + 22 backend)** #### Phase 9: Update All GitHub Actions - [x] Update Node.js to 24 in copilot-setup.yml workflow - [x] Update Node.js to 24 in update-website.yml workflow - [x] Update docker/build-push-action from v5 to v6 - [x] Replace deprecated tibdex/github-app-token@v2 with actions/create-github-app-token@v1 - [x] All other actions already at latest versions (v4 for GitHub actions, v3 for Docker actions) #### Phase 10: Final Validation - [x] All TypeScript compilation errors fixed - [x] All tests passing - [x] Build completes successfully - [x] Clarified Node.js engine requirements per use case - [x] All GitHub Actions updated to latest versions ### Node.js Version Requirements This project has different Node.js requirements depending on the use case: #### Building the Electron App (Root package.json) - **Required:** Node.js >= 24 - **Why:** Build tools like @electron/notarize and semantic-release require Node.js 24+ - **Affected files:** `/package.json` #### Running the Backend/Server (Backend package.json) - **Required:** Node.js >= 20 - **Why:** The MQTT server runtime is compatible with Node.js 20+ - **Affected files:** `/backend/package.json` #### Frontend App (App package.json) - **Required:** Node.js >= 20 - **Why:** React and webpack tools are compatible with Node.js 20+ - **Affected files:** `/app/package.json` ### Summary of All Changes **Major Dependency Updates:** - TypeScript: 4.5.5 → 5.9.3 - Node.js: >=24 for builds, >=20 for runtime - React: 16.14.0 → 18.3.1 - React-DOM: 16.14.0 → 18.3.1 - Redux: 4.2.1 → 5.0.1 - @material-ui/core → @mui/material 5.18.0 - @material-ui/icons → @mui/icons-material 5.18.0 - mqtt: 4.3.6 → 5.14.1 - axios: 0.28.0 → 1.13.2 - redux-thunk: 2.3.0 → 3.1.0 - electron-builder: 24.13.3 → 26.0.12 - @electron/notarize: 3.1.1 (latest) - semantic-release: 25.0.2 (latest) - react-resize-detector: migrated to useResizeDetector hook - 50+ other dependencies **GitHub Actions Updated:** - ✅ actions/checkout@v4 (latest) - ✅ actions/setup-node@v4 (latest) - Now uses Node 24 in all workflows - ✅ actions/cache@v4 (latest) - ✅ actions/upload-artifact@v4 (latest) - ✅ docker/build-push-action: v5 → **v6** (latest) - ✅ docker/login-action@v3 (latest) - ✅ docker/setup-buildx-action@v3 (latest) - ✅ cycjimmy/semantic-release-action@v4 (latest) - ✅ tibdex/github-app-token@v2 → **actions/create-github-app-token@v1** (official replacement for deprecated action) - ✅ stefanzweifel/git-auto-commit-action@v5 (latest) - ✅ hkusu/s3-upload-action@v2 (latest) **All TypeScript Errors Fixed:** - Removed disableBackdropClick from Dialog (deprecated in MUI v5) - Removed Button classes.label (deprecated in MUI v5) - Updated all event handler signatures to match MUI v5 APIs - Migrated ReactResizeDetector component to useResizeDetector hook - Added type assertions for Redux connect + withStyles compatibility - Fixed all connected component prop passing - Added missing children props to components **Final Result:** ✅ **0 TypeScript errors** ✅ **27/27 tests passing** ✅ **Build successful** ✅ **Node 24 for builds, Node 20+ for runtime** ✅ **All GitHub Actions updated to latest versions** ⚠️ 1 minor warning (source map parsing in ace-builds dependency)  <details> <summary>Original prompt</summary> > > ---- > > *This section details on the original issue you should resolve* > > <issue_title>update dependencies</issue_title> > <issue_description>- update to nodejs 24 > - update npm dependencies > - update workflows > - change from commons to esmodules</issue_description> > > ## Comments on the Issue (you are @copilot in this section) > > <comments> > </comments> > </details>  - Fixes thomasnordquist/MQTT-Explorer#939  --- 💬 We'd love your input! Share your thoughts on Copilot coding agent in our [2 minute survey](https://gh.io/copilot-coding-agent-survey). --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com> Co-authored-by: Thomas Nordquist <thomasnordquist@users.noreply.github.com>
2026-09-11 17:13:53 +00:00 · 2025-12-21 13:46:34 +01:00 · 2025-12-21 10:20:08 +01:00 · 2025-12-21 09:59:50 +01:00 · 2025-12-20 23:26:15 +01:00 · 2025-12-20 19:34:34 +01:00
130 changed files with 6057 additions and 4306 deletions
@@ -22,7 +22,7 @@ jobs:
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}
      - name: Build and push
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v6
        with:
          context: .
          push: true
@@ -14,7 +14,7 @@ jobs:
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
-          node-version: '20'
+          node-version: '24'
      
      - name: Get yarn cache directory path
        id: yarn-cache-dir-path
@@ -28,14 +28,14 @@ jobs:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
-          node-version: 20
+          node-version: 24
      - run: npm install -g yarn
      - run: yarn
      - id: create_token # get ReleaseBot access token
-        uses: tibdex/github-app-token@v2
+        uses: actions/create-github-app-token@v1
        with:
-          app_id: ${{ secrets.RELEASE_BOT_APP_ID }}
-          private_key: ${{ secrets.RELEASE_BOT_PRIVATE_KEY }}
+          app-id: ${{ secrets.RELEASE_BOT_APP_ID }}
+          private-key: ${{ secrets.RELEASE_BOT_PRIVATE_KEY }}
      - name: Semantic Release
        uses: cycjimmy/semantic-release-action@v4
        id: semantic   # Need an `id` for output variables
@@ -12,6 +12,8 @@ jobs:
      options: --user root
    steps:
      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
      - name: Install Packages
        run: yarn install --frozen-lockfile
      - name: Build
@@ -28,6 +30,8 @@ jobs:
      options: --user root
    steps:
      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
      - name: Install Packages
        run: yarn install --frozen-lockfile
      - name: Build
@@ -53,6 +57,8 @@ jobs:
      options: --user root
    steps:
      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
      - name: Install Packages
        run: yarn install --frozen-lockfile
      - name: Build
@@ -90,10 +96,12 @@ jobs:
          --health-retries 5
    steps:
      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
-          node-version: '20'
+          node-version: '24'
      - name: Install Dependencies
        run: yarn install --frozen-lockfile
      - name: Build Browser Mode
@@ -11,7 +11,7 @@ jobs:
          ref: gh-pages
      - uses: actions/setup-node@v4
        with:
-          node-version: 20
+          node-version: '24'
      - run: npm install
      - run: npm run readme
      - uses: stefanzweifel/git-auto-commit-action@v5
@@ -17,3 +17,4 @@ test-mcp-introspection.js

 /data
 test-screenshot-*.png
+test-expand-*.png
@@ -1,4 +1,4 @@
-FROM node:20
+FROM node:24

 RUN DEBIAN_FRONTEND="noninteractive" apt-get update \
  && apt-get install -y --no-install-recommends ca-certificates nano ffmpeg xvfb git-core tmux locales mosquitto x11vnc
@@ -6,8 +6,8 @@
  "scripts": {
    "build": "webpack --mode production",
    "dev": "node_modules/.bin/webpack-dev-server --mode development --progress",
-    "test": "cross-env TS_NODE_PROJECT=test/tsconfig.json yarn mochatest",
-    "mochatest": "mocha --require ts-node/register --require source-map-support/register --recursive src/*/**/*.spec.ts"
+    "test": "mocha --require tsx --require source-map-support/register --recursive src/*/**/*.spec.ts",
+    "mochatest": "mocha --require tsx --require source-map-support/register --recursive src/*/**/*.spec.ts"
  },
  "engines": {
    "node": ">=20"
@@ -15,24 +15,26 @@
  "author": "",
  "license": "CC-BY-ND-4.0",
  "dependencies": {
-    "@material-ui/core": "4.12",
-    "@material-ui/icons": "^4",
-    "@material-ui/lab": "^4.0.0-alpha",
-    "@material-ui/styles": "4.11",
-    "@types/react-transition-group": "^4",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^5.18.0",
+    "@mui/lab": "^5.0.0-alpha.177",
+    "@mui/material": "^5.18.0",
+    "@mui/styles": "^6.4.8",
+    "@types/react-transition-group": "^4.4.11",
    "ace-builds": "^1.4.11",
-    "axios": "^0.28.0",
-    "compare-versions": "^3.5.0",
-    "copy-text-to-clipboard": "^2.1.0",
-    "d3": "^5.9.7",
-    "d3-shape": "^1.3.5",
-    "diff": "^4.0.1",
-    "dot-prop": "^5.0.0",
+    "axios": "^1.13.2",
+    "compare-versions": "^6.1.1",
+    "copy-text-to-clipboard": "^3.2.0",
+    "d3": "^7.9.0",
+    "d3-shape": "^3.2.0",
+    "diff": "^7.0.0",
+    "dot-prop": "^5.3.0",
    "events": "^3.3.0",
    "get-value": "^3.0.1",
-    "immutable": "^4.0.0-rc.12",
+    "immutable": "^4.3.7",
    "in-viewport": "^3.6.0",
-    "js-base64": "^2.5.1",
+    "js-base64": "^3.7.8",
    "json-to-ast": "^2.1.0",
    "lodash.debounce": "^4.0.8",
    "lodash.throttle": "^4.1.1",
@@ -41,57 +43,58 @@
    "os-browserify": "^0.3.0",
    "parse-duration": "^0.1.1",
    "path-browserify": "^1.0.1",
-    "prismjs": "^1.15.0",
-    "react": "^16.11",
-    "react-ace": "^8",
-    "react-dom": "^16.7.0",
-    "react-redux": "^7.0.3",
-    "react-resize-detector": "^4.1.4",
-    "react-split-pane": "^0.1.85",
-    "react-transition-group": "^4",
-    "react-vis": "^1.11.6",
-    "redux": "^4.0.1",
-    "redux-batched-actions": "0.5",
-    "redux-thunk": "^2.3.0",
+    "prismjs": "^1.29.0",
+    "react": "^18.3.1",
+    "react-ace": "^12.0.0",
+    "react-dom": "^18.3.1",
+    "react-redux": "^9.2.0",
+    "react-resize-detector": "^11.0.1",
+    "react-split-pane": "^0.1.92",
+    "react-transition-group": "^4.4.5",
+    "react-vis": "^1.12.1",
+    "redux": "^5.0.1",
+    "redux-batched-actions": "^0.5.0",
+    "redux-thunk": "^3.1.0",
    "sha1": "^1.1.1",
    "socket.io-client": "^4.8.1",
    "url": "^0.11.4",
-    "uuid": "7"
+    "uuid": "^11.0.0"
  },
  "devDependencies": {
-    "@babel/runtime": "^7.17.2",
-    "@types/d3": "^5.7.2",
-    "@types/diff": "^4.0.1",
-    "@types/get-value": "^3.0.1",
-    "@types/node": "^12.7.8",
-    "@types/prismjs": "^1.9.1",
-    "@types/react": "^16.9.4",
-    "@types/react-dom": "^16.0.11",
-    "@types/react-redux": "^7.0.9",
-    "@types/react-resize-detector": "^4.0.1",
+    "@babel/runtime": "^7.28.4",
+    "@types/d3": "^7.4.3",
+    "@types/diff": "^7.0.0",
+    "@types/get-value": "^3.0.5",
+    "@types/lodash.debounce": "^4.0.9",
+    "@types/node": "^25.0.3",
+    "@types/prismjs": "^1.26.5",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@types/react-redux": "^7.1.34",
+    "@types/react-resize-detector": "^4.0.3",
    "@types/sha1": "^1.1.1",
    "@types/socket.io-client": "^3.0.0",
-    "@types/uuid": "^7.0.2",
-    "@types/vis": "^4.21.9",
-    "chai": "^4.2.0",
-    "cross-env": "^7.0.2",
-    "css-loader": "^3.0.0",
+    "@types/uuid": "^11.0.0",
+    "@types/vis": "^4.21.24",
+    "chai": "^4.5.0",
+    "cross-env": "^7.0.3",
+    "css-loader": "^7.1.2",
    "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.5.0",
+    "html-webpack-plugin": "^5.6.3",
    "lodash": "^4.17.21",
-    "mocha": "^10.4.0",
-    "moment": "^2.29.1",
-    "node-loader": "^0.6.0",
-    "source-map-loader": "^0.2.4",
-    "style-loader": "^1",
+    "mocha": "^10.8.2",
+    "moment": "^2.30.1",
+    "node-loader": "^2.0.0",
+    "source-map-loader": "^5.0.0",
+    "style-loader": "^4.0.0",
    "ts-loader": "^9.5.1",
-    "typescript": "^4.5.5",
-    "webpack": "^5.91.0",
-    "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.0.4"
+    "typescript": "^5.9.3",
+    "webpack": "^5.98.0",
+    "webpack-bundle-analyzer": "^4.10.2",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.0"
  },
  "peerDependencies": {
-    "electron": "^29"
+    "electron": "^39"
  }
 }
@@ -15,7 +15,7 @@ export const setTopic = (topic?: string): Action => {
 }

 export const openFile =
-  (encoding: 'utf8' = 'utf8') =>
+  (encoding: BufferEncoding = 'utf8') =>
  async (dispatch: Dispatch<any>, getState: () => AppState) => {
    try {
      const file = await getFileContent(encoding)
@@ -31,7 +31,7 @@ type FileParameters = {
  name: string
  data: string
 }
-async function getFileContent(encoding: string): Promise<FileParameters | undefined> {
+async function getFileContent(encoding: BufferEncoding): Promise<FileParameters | undefined> {
  const rejectReasons = {
    noFileSelected: 'No file selected',
    errorReadingFile: 'Error reading file',
@@ -10,6 +10,12 @@ import { globalActions } from './'
 import { showError } from './Global'
 import { showTree } from './Tree'
 import { TopicViewModel } from '../model/TopicViewModel'
+import { backendEvents } from '../../../events'
+import {
+  Events,
+  MAX_MESSAGE_SIZE_UNLIMITED,
+  MAX_MESSAGE_SIZE_DEFAULT,
+} from '../../../events/EventsV2'

 const settingsIdentifier: StorageIdentifier<Partial<SettingsStateModel>> = {
  id: 'Settings',
@@ -22,6 +28,9 @@ export const loadSettings = () => async (dispatch: Dispatch<any>, getState: () =
      settings: getState().settings.merge(settings),
      type: ActionTypes.SETTINGS_DID_LOAD_SETTINGS,
    })
+    // Emit the maxMessageSize to backend after loading settings
+    const maxMessageSize = getState().settings.get('maxMessageSize')
+    backendEvents.emit(Events.setMaxMessageSize, maxMessageSize)
  } catch (error) {
    dispatch(showError(error))
  }
@@ -29,11 +38,14 @@ export const loadSettings = () => async (dispatch: Dispatch<any>, getState: () =
 }

 export const storeSettings = () => async (dispatch: Dispatch<any>, getState: () => AppState) => {
+  const currentSettings = getState().settings.toJS()
  const settings = {
-    ...getState().settings.toJS(),
+    ...currentSettings,
    autoExpandLimit: undefined,
    topicFilter: undefined,
    visible: undefined,
+    // Don't persist unlimited - reset to default
+    maxMessageSize: currentSettings.maxMessageSize === MAX_MESSAGE_SIZE_UNLIMITED ? MAX_MESSAGE_SIZE_DEFAULT : currentSettings.maxMessageSize,
  }

  try {
@@ -169,3 +181,12 @@ export const toggleTheme = () => (dispatch: Dispatch<any>, getState: () => AppSt
  })
  dispatch(storeSettings())
 }
+
+export const setMaxMessageSize = (maxMessageSize: number) => (dispatch: Dispatch<any>) => {
+  dispatch({
+    maxMessageSize,
+    type: ActionTypes.SETTINGS_SET_MAX_MESSAGE_SIZE,
+  })
+  dispatch(storeSettings())
+  backendEvents.emit(Events.setMaxMessageSize, maxMessageSize)
+}
@@ -7,7 +7,7 @@ import { batchActions } from 'redux-batched-actions'
 import { globalActions } from './'
 import { setTopic } from './Publish'
 import { TopicViewModel } from '../model/TopicViewModel'
-const debounce = require('lodash.debounce')
+import debounce from 'lodash.debounce'
 export { clearTopic } from './clearTopic'

 export { moveSelectionUpOrDownwards, moveInward, moveOutward } from './visibleTreeTraversal'
@@ -1,6 +1,6 @@
 import ConfirmationDialog from './ConfirmationDialog'
 import ConnectionSetup from './ConnectionSetup/ConnectionSetup'
-import CssBaseline from '@material-ui/core/CssBaseline'
+import CssBaseline from '@mui/material/CssBaseline'
 import ErrorBoundary from './ErrorBoundary'
 import Notification from './Layout/Notification'
 import React from 'react'
@@ -11,7 +11,8 @@ import { bindActionCreators } from 'redux'
 import { ConfirmationRequest } from '../reducers/Global'
 import { connect } from 'react-redux'
 import { globalActions, settingsActions } from '../actions'
-import { Theme, withStyles } from '@material-ui/core/styles'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
 ;(window as any).global = window

 const Settings = React.lazy(() => import('./SettingsDrawer/Settings'))
@@ -1,14 +1,13 @@
 import DateFormatter from '../helper/DateFormatter'
 import NoData from './NoData'
 import NumberFormatter from '../helper/NumberFormatter'
-import React, { memo, useCallback } from 'react'
+import React, { memo, useCallback, useRef, useEffect } from 'react'
 import TooltipComponent from './TooltipComponent'
-import { default as ReactResizeDetector } from 'react-resize-detector'
-import { emphasize } from '@material-ui/core/styles'
+import { useResizeDetector } from 'react-resize-detector'
+import { emphasize, useTheme } from '@mui/material/styles'
 import { mapCurveType } from './mapCurveType'
 import { PlotCurveTypes } from '../../reducers/Charts'
 import { Point, Tooltip } from './Model'
-import { Theme, withTheme } from '@material-ui/core'
 import { useCustomXDomain } from './effects/useCustomXDomain'
 import { useCustomYDomain } from './effects/useCustomYDomain'
 import 'react-vis/dist/style.css'
@@ -17,89 +16,85 @@ const abbreviate = require('number-abbreviate')

 export interface Props {
  data: Array<{ x: number; y: number }>
-  theme: Theme
  interpolation?: PlotCurveTypes
  range?: [number?, number?]
  timeRangeStart?: number
  color?: string
 }

-export default withTheme(
-  memo((props: Props) => {
-    const [width, setWidth] = React.useState(300)
-    const [tooltip, setTooltip] = React.useState<Tooltip | undefined>()
-    const detectResize = React.useCallback(newWidth => setWidth(newWidth), [])
+export default memo((props: Props) => {
+  const theme = useTheme()
+  const [tooltip, setTooltip] = React.useState<Tooltip | undefined>()
+  const { width = 300, ref } = useResizeDetector()

-    const hintFormatter = React.useCallback(
-      (point: any) => [
-        { title: <b>Time</b>, value: <DateFormatter timeFirst={true} date={new Date(point.x)} /> },
-        { title: <b>Value</b>, value: <NumberFormatter value={point.y} /> },
-        { title: <b>Raw</b>, value: <span>{point.y}</span> },
-      ],
-      []
-    )
+  const hintFormatter = React.useCallback(
+    (point: any) => [
+      { title: <b>Time</b>, value: <DateFormatter timeFirst={true} date={new Date(point.x)} /> },
+      { title: <b>Value</b>, value: <NumberFormatter value={point.y} /> },
+      { title: <b>Raw</b>, value: <span>{point.y}</span> },
+    ],
+    []
+  )

-    const onMouseLeave = React.useCallback(() => {
-      setTooltip(undefined)
-    }, [])
+  const onMouseLeave = React.useCallback(() => {
+    setTooltip(undefined)
+  }, [])

-    const showTooltip = React.useCallback((point: Point, something: { event: MouseEvent }) => {
-      if (!something) {
-        return
-      }
-      setTooltip({ point, value: hintFormatter(point), element: something.event.target as any })
-    }, [])
+  const showTooltip = React.useCallback((point: Point, something: { event: MouseEvent }) => {
+    if (!something) {
+      return
+    }
+    setTooltip({ point, value: hintFormatter(point), element: something.event.target as any })
+  }, [])

-    const paletteColor =
-      props.theme.palette.type === 'light' ? props.theme.palette.secondary.dark : props.theme.palette.primary.light
-    const color = props.color ? props.color : paletteColor
+  const paletteColor =
+    theme.palette.mode === 'light' ? theme.palette.secondary.dark : theme.palette.primary.light
+  const color = props.color ? props.color : paletteColor

-    const highlightSelectedPoint = useCallback(
-      (point: Point) => {
-        const highlight = tooltip && tooltip.point.x === point.x && tooltip.point.y === point.y
-        return highlight ? emphasize(color, 0.8) : color
-      },
-      [tooltip, color]
-    )
+  const highlightSelectedPoint = useCallback(
+    (point: Point) => {
+      const highlight = tooltip && tooltip.point.x === point.x && tooltip.point.y === point.y
+      return highlight ? emphasize(color, 0.8) : color
+    },
+    [tooltip, color]
+  )

-    const formatYAxis = useCallback((num: number) => abbreviate(num), [])
+  const formatYAxis = useCallback((num: number) => abbreviate(num), [])

-    const xDomain = useCustomXDomain(props)
-    const yDomain = useCustomYDomain(props)
+  const xDomain = useCustomXDomain(props)
+  const yDomain = useCustomYDomain(props)

-    const data = props.data
-    const hasData = data.length > 0
-    const dummyDomain = [-1, 1]
-    const dummyData = [{ x: -2, y: -2 }]
-    return (
-      <div>
-        <div style={{ height: '150px', width: '100%', position: 'relative' }}>
-          {data.length === 0 ? <NoData /> : null}
-          <XYPlot
-            width={width}
-            height={180}
-            yDomain={hasData ? yDomain : dummyDomain}
-            xDomain={hasData ? xDomain : dummyDomain}
-            onMouseLeave={onMouseLeave}
-          >
-            <HorizontalGridLines />
-            <YAxis width={45} tickFormat={formatYAxis} />
-            <LineMarkSeries
-              color={color}
-              colorType="literal"
-              getColor={highlightSelectedPoint}
-              onValueMouseOver={showTooltip}
-              size={3}
-              data={hasData ? data : dummyData}
-              curve={mapCurveType(props.interpolation)}
-            />
-            <Hint value={{ x: 0, y: 0 }} style={{ pointerEvents: 'none' }}>
-              <TooltipComponent tooltip={tooltip} theme={props.theme} />
-            </Hint>
-          </XYPlot>
-          <ReactResizeDetector handleWidth={true} onResize={detectResize} />
-        </div>
+  const data = props.data
+  const hasData = data.length > 0
+  const dummyDomain = [-1, 1]
+  const dummyData = [{ x: -2, y: -2 }]
+  return (
+    <div>
+      <div ref={ref} style={{ height: '150px', width: '100%', position: 'relative' }}>
+        {data.length === 0 ? <NoData /> : null}
+        <XYPlot
+          width={width || 300}
+          height={180}
+          yDomain={hasData ? yDomain : dummyDomain}
+          xDomain={hasData ? xDomain : dummyDomain}
+          onMouseLeave={onMouseLeave}
+        >
+          <HorizontalGridLines />
+          <YAxis width={45} tickFormat={formatYAxis} />
+          <LineMarkSeries
+            color={color}
+            colorType="literal"
+            getColor={highlightSelectedPoint}
+            onValueMouseOver={showTooltip}
+            size={3}
+            data={hasData ? data : dummyData}
+            curve={mapCurveType(props.interpolation)}
+          />
+          <Hint value={{ x: 0, y: 0 }} style={{ pointerEvents: 'none' }}>
+            <TooltipComponent tooltip={tooltip} />
+          </Hint>
+        </XYPlot>
      </div>
-    )
-  })
-)
+    </div>
+  )
+})
@@ -1,5 +1,5 @@
 import React, { memo } from 'react'
-import { Typography } from '@material-ui/core'
+import { Typography } from '@mui/material'

 function NoData() {
  return (
@@ -1,9 +1,10 @@
 import React, { memo } from 'react'
-import { fade } from '@material-ui/core/styles'
-import { Fade, Grow, Paper, Popper, Theme, Typography, withTheme } from '@material-ui/core'
+import { alpha as fade } from '@mui/material/styles'
+import { Fade, Grow, Paper, Popper, Typography, useTheme } from '@mui/material'
 import { Tooltip } from './Model'

-function TooltipComponent(props: { tooltip?: Tooltip; theme: Theme }) {
+function TooltipComponent(props: { tooltip?: Tooltip }) {
+  const theme = useTheme()
  const { tooltip } = props
  return (
    <Popper
@@ -26,9 +27,9 @@ function TooltipComponent(props: { tooltip?: Tooltip; theme: Theme }) {
                padding: '4px',
                marginTop: '-12px',
                backgroundColor: fade(
-                  props.theme.palette.type === 'light'
-                    ? props.theme.palette.background.paper
-                    : props.theme.palette.background.default,
+                  theme.palette.mode === 'light'
+                    ? theme.palette.background.paper
+                    : theme.palette.background.default,
                  0.7
                ),
              }}
@@ -56,4 +57,4 @@ function TooltipComponent(props: { tooltip?: Tooltip; theme: Theme }) {
  )
 }

-export default withTheme(memo(TooltipComponent))
+export default memo(TooltipComponent)
@@ -1,7 +1,7 @@
 import React, { useRef } from 'react'
-import Play from '@material-ui/icons/PlayArrow'
-import Pause from '@material-ui/icons/PauseCircleFilled'
-import Clear from '@material-ui/icons/Clear'
+import Play from '@mui/icons-material/PlayArrow'
+import Pause from '@mui/icons-material/PauseCircleFilled'
+import Clear from '@mui/icons-material/Clear'
 import CustomIconButton from '../helper/CustomIconButton'
 import { ChartParameters } from '../../reducers/Charts'
 import { SettingsButton } from './ChartSettings/SettingsButton'
@@ -3,7 +3,7 @@ import { bindActionCreators } from 'redux'
 import { chartActions } from '../../../actions'
 import { ChartParameters } from '../../../reducers/Charts'
 import { connect } from 'react-redux'
-import { Menu, MenuItem } from '@material-ui/core'
+import { Menu, MenuItem } from '@mui/material'
 import { colors as createColors } from './colors'

 function chartParametersForColor(chart: ChartParameters, color?: string) {
@@ -4,7 +4,7 @@ import { bindActionCreators } from 'redux'
 import { chartActions } from '../../../actions'
 import { ChartParameters, PlotCurveTypes } from '../../../reducers/Charts'
 import { connect } from 'react-redux'
-import { Menu, MenuItem, Typography } from '@material-ui/core'
+import { Menu, MenuItem, Typography } from '@mui/material'

 function chartParametersForAction(chart: ChartParameters, action: string) {
  return {
@@ -1,10 +1,10 @@
 import * as React from 'react'
-import ArrowUpward from '@material-ui/icons/ArrowUpward'
+import ArrowUpward from '@mui/icons-material/ArrowUpward'
 import { bindActionCreators } from 'redux'
 import { chartActions } from '../../../actions'
 import { ChartParameters } from '../../../reducers/Charts'
 import { connect } from 'react-redux'
-import { MenuItem, Typography, ListItemIcon } from '@material-ui/core'
+import { MenuItem, Typography, ListItemIcon } from '@mui/material'

 function MoveUp(props: { actions: { chart: typeof chartActions }; chart: ChartParameters; close: () => void }) {
  const moveUp = React.useCallback(() => {
@@ -1,6 +1,6 @@
 import React, { useCallback, useState, ChangeEvent, MouseEvent, useRef, useEffect, useMemo } from 'react'
 import { ChartParameters } from '../../../reducers/Charts'
-import { Menu, TextField, Typography } from '@material-ui/core'
+import { Menu, TextField, Typography } from '@mui/material'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import { chartActions } from '../../../actions'
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import ChartSettings from '.'
 import CustomIconButton from '../../helper/CustomIconButton'
-import MoreVertIcon from '@material-ui/icons/Settings'
+import MoreVertIcon from '@mui/icons-material/Settings'
 import { ChartParameters } from '../../../reducers/Charts'

 export function SettingsButton(props: {
@@ -1,6 +1,6 @@
 import React, { memo } from 'react'
 import { ChartParameters } from '../../../reducers/Charts'
-import { Menu, MenuItem, TextField, Typography } from '@material-ui/core'
+import { Menu, MenuItem, TextField, Typography } from '@mui/material'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import { chartActions } from '../../../actions'
@@ -1,6 +1,6 @@
 import React, { ChangeEvent, MouseEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { bindActionCreators } from 'redux'
-import { Button, Menu, TextField, Typography } from '@material-ui/core'
+import { Button, Menu, TextField, Typography } from '@mui/material'
 import { chartActions } from '../../../actions'
 import { ChartParameters } from '../../../reducers/Charts'
 import { connect } from 'react-redux'
@@ -12,7 +12,7 @@ import {
  yellow,
  brown,
  blueGrey,
-} from '@material-ui/core/colors'
+} from '@mui/material/colors'

 export function colors() {
  function colorToInt(color: string): [number, number, number] {
@@ -1,17 +1,17 @@
-import BarChart from '@material-ui/icons/BarChart'
-import Clear from '@material-ui/icons/Refresh'
-import ColorLens from '@material-ui/icons/ColorLens'
+import BarChart from '@mui/icons-material/BarChart'
+import Clear from '@mui/icons-material/Refresh'
+import ColorLens from '@mui/icons-material/ColorLens'
 import ColorSettings from './ColorSettings'
 import InterpolationSettings from './InterpolationSettings'
 import MoveUp from './MoveUp'
-import MultilineChart from '@material-ui/icons/MultilineChart'
+import MultilineChart from '@mui/icons-material/MultilineChart'
 import RangeSettings from './RangeSettings'
 import React, { memo } from 'react'
 import Size from './Size'
-import Sort from '@material-ui/icons/Sort'
+import Sort from '@mui/icons-material/Sort'
 import TimeRangeSettings from './TimeRangeSettings'
 import { ChartParameters } from '../../../reducers/Charts'
-import { Menu, MenuItem, ListItemIcon, Typography } from '@material-ui/core'
+import { Menu, MenuItem, ListItemIcon, Typography } from '@mui/material'

 function ChartSettings(props: {
  open: boolean
@@ -1,6 +1,8 @@
 import * as React from 'react'
 import { ChartParameters } from '../../reducers/Charts'
-import { Typography, Theme, withStyles } from '@material-ui/core'
+import { Typography } from '@mui/material'
+import { withStyles } from '@mui/styles'
+import { Theme } from '@mui/material/styles'

 function ChartTitle(props: { parameters: ChartParameters; classes: any }) {
  const { classes, parameters } = props
@@ -7,7 +7,7 @@ import { ChartActions } from './ChartActions'
 import { chartActions } from '../../actions'
 import { ChartParameters } from '../../reducers/Charts'
 import { connect } from 'react-redux'
-import { Paper } from '@material-ui/core'
+import { Paper } from '@mui/material'
 const throttle = require('lodash.throttle')

 class ClearableMessageBuffer extends q.RingBuffer<q.Message> {
@@ -1,13 +1,15 @@
 import * as q from '../../../../backend/src/Model'
 import * as React from 'react'
-import ShowChart from '@material-ui/icons/ShowChart'
+import ShowChart from '@mui/icons-material/ShowChart'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { chartActions } from '../../actions'
 import { ChartParameters } from '../../reducers/Charts'
 import { ChartWithTreeNode } from './ChartWithTreeNode'
 import { connect } from 'react-redux'
-import { Grid, Theme, Typography, withStyles } from '@material-ui/core'
+import { Grid, Typography } from '@mui/material'
+import { withStyles } from '@mui/styles'
+import { Theme } from '@mui/material/styles'
 import { List } from 'immutable'
 const { TransitionGroup, CSSTransition } = require('react-transition-group/esm')

@@ -126,4 +128,4 @@ const styles = (theme: Theme) => ({
  },
 })

-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ChartPanel))
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ChartPanel) as any)
@@ -1,6 +1,6 @@
 import React, { useRef, useCallback, memo } from 'react'
 import { ConfirmationRequest } from '../reducers/Global'
-import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button } from '@material-ui/core'
+import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button } from '@mui/material'
 import { KeyCodes } from '../utils/KeyCodes'

 function ConfirmationDialog(props: { confirmationRequests: Array<ConfirmationRequest> }) {
@@ -1,17 +1,19 @@
 import * as React from 'react'
 import { useState, useCallback, memo } from 'react'
-import Add from '@material-ui/icons/Add'
-import Lock from '@material-ui/icons/Lock'
-import Undo from '@material-ui/icons/Undo'
+import Add from '@mui/icons-material/Add'
+import Lock from '@mui/icons-material/Lock'
+import Undo from '@mui/icons-material/Undo'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { connectionManagerActions } from '../../actions'
 import { ConnectionOptions } from '../../model/ConnectionOptions'
-import { Theme, withStyles } from '@material-ui/core/styles'
-import { Button, Grid, TextField, Tooltip } from '@material-ui/core'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
+import { Button, Grid, TextField, Tooltip } from '@mui/material'
 import { QosSelect } from '../QosSelect'
 import { QoS } from '../../../../backend/src/DataSource/MqttSource'
 import Subscriptions from './Subscriptions'
+const SubscriptionsAny = Subscriptions as any

 interface Props {
  connection: ConnectionOptions
@@ -68,7 +70,7 @@ const ConnectionSettings = memo(function ConnectionSettings(props: Props) {
            </Button>
          </Grid>
          <Grid item={true} xs={12} style={{ padding: 0 }}>
-            <Subscriptions connection={props.connection} />
+            <SubscriptionsAny connection={props.connection} />
          </Grid>
          <Grid item={true} xs={7} className={classes.gridPadding}>
            <TextField
@@ -129,4 +131,4 @@ const styles = (theme: Theme) => ({
  },
 })

-export default connect(undefined, mapDispatchToProps)(withStyles(styles)(ConnectionSettings))
+export default connect(undefined, mapDispatchToProps)(withStyles(styles)(ConnectionSettings) as any)
@@ -1,13 +1,13 @@
 import * as React from 'react'
 import ClearAdornment from '../helper/ClearAdornment'
-import Lock from '@material-ui/icons/Lock'
+import Lock from '@mui/icons-material/Lock'
 import { bindActionCreators } from 'redux'
-import { Button, Theme, Tooltip, Typography } from '@material-ui/core'
+import { Button, Theme, Tooltip, Typography } from '@mui/material'
 import { CertificateParameters, ConnectionOptions } from '../../model/ConnectionOptions'
 import { CertificateTypes } from '../../actions/ConnectionManager'
 import { connect } from 'react-redux'
 import { connectionManagerActions } from '../../actions'
-import { withStyles } from '@material-ui/styles'
+import { withStyles } from '@mui/styles'
 import { rendererRpc } from '../../../../events'
 import { RpcEvents } from '../../../../events/EventsV2'

@@ -129,7 +129,7 @@ const styles = (theme: Theme) => ({
    overflow: 'hidden' as 'hidden',
    whiteSpace: 'nowrap' as 'nowrap',
    textOverflow: 'ellipsis' as 'ellipsis',
-    color: theme.palette.text.hint,
+    color: theme.palette.text.secondary,
  },
  button: {
    marginTop: theme.spacing(3),
@@ -137,4 +137,4 @@ const styles = (theme: Theme) => ({
  },
 })

-export default connect(undefined, mapDispatchToProps)(withStyles(styles)(BrowserCertificateFileSelection))
+export default connect(undefined, mapDispatchToProps)(withStyles(styles)(BrowserCertificateFileSelection) as any)
@@ -1,13 +1,13 @@
 import * as React from 'react'
 import ClearAdornment from '../helper/ClearAdornment'
-import Lock from '@material-ui/icons/Lock'
+import Lock from '@mui/icons-material/Lock'
 import { bindActionCreators } from 'redux'
-import { Button, Theme, Tooltip, Typography } from '@material-ui/core'
+import { Button, Theme, Tooltip, Typography } from '@mui/material'
 import { CertificateParameters, ConnectionOptions } from '../../model/ConnectionOptions'
 import { CertificateTypes } from '../../actions/ConnectionManager'
 import { connect } from 'react-redux'
 import { connectionManagerActions } from '../../actions'
-import { withStyles } from '@material-ui/styles'
+import { withStyles } from '@mui/styles'

 function CertificateFileSelection(props: {
  certificateType: CertificateTypes
@@ -71,7 +71,7 @@ const styles = (theme: Theme) => ({
    overflow: 'hidden' as 'hidden',
    whiteSpace: 'nowrap' as 'nowrap',
    textOverflow: 'ellipsis' as 'ellipsis',
-    color: theme.palette.text.hint,
+    color: theme.palette.text.secondary,
  },
  button: {
    marginTop: theme.spacing(3),
@@ -79,4 +79,4 @@ const styles = (theme: Theme) => ({
  },
 })

-export default connect(undefined, mapDispatchToProps)(withStyles(styles)(CertificateFileSelection))
+export default connect(undefined, mapDispatchToProps)(withStyles(styles)(CertificateFileSelection) as any)
@@ -1,18 +1,19 @@
 import * as React from 'react'
 import CertificateFileSelection from './CertificateFileSelection'
 import BrowserCertificateFileSelection from './BrowserCertificateFileSelection'
-import Undo from '@material-ui/icons/Undo'
+import Undo from '@mui/icons-material/Undo'
 import { bindActionCreators } from 'redux'
-import { Button, Grid } from '@material-ui/core'
+import { Button, Grid } from '@mui/material'
 import { connect } from 'react-redux'
 import { connectionManagerActions } from '../../actions'
 import { ConnectionOptions } from '../../model/ConnectionOptions'
-import { Theme, withStyles } from '@material-ui/core/styles'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'

 // Check if we're in browser mode
 const isBrowserMode =
  typeof window !== 'undefined' && (typeof process === 'undefined' || process.env?.BROWSER_MODE === 'true')
-const CertSelector = isBrowserMode ? BrowserCertificateFileSelection : CertificateFileSelection
+const CertSelector: any = isBrowserMode ? BrowserCertificateFileSelection : CertificateFileSelection

 interface Props {
  connection: ConnectionOptions
@@ -110,4 +111,4 @@ const styles = (theme: Theme) => ({
  },
 })

-export default connect(undefined, mapDispatchToProps)(withStyles(styles)(Certificates))
+export default connect(undefined, mapDispatchToProps)(withStyles(styles)(Certificates) as any)
@@ -1,7 +1,7 @@
 import ConnectionHealthIndicator from '../helper/ConnectionHealthIndicator'
-import PowerSettingsNew from '@material-ui/icons/PowerSettingsNew'
+import PowerSettingsNew from '@mui/icons-material/PowerSettingsNew'
 import React from 'react'
-import { Button } from '@material-ui/core'
+import { Button } from '@mui/material'

 function ConnectButton(props: { connecting: boolean; classes: any; toggle: () => void }) {
  const { classes, toggle, connecting } = props
@@ -1,17 +1,18 @@
 import ConnectButton from './ConnectButton'
 import React, { useCallback, useState } from 'react'
-import Save from '@material-ui/icons/Save'
-import Delete from '@material-ui/icons/Delete'
-import Settings from '@material-ui/icons/Settings'
-import Visibility from '@material-ui/icons/Visibility'
-import VisibilityOff from '@material-ui/icons/VisibilityOff'
+import Save from '@mui/icons-material/Save'
+import Delete from '@mui/icons-material/Delete'
+import Settings from '@mui/icons-material/Settings'
+import Visibility from '@mui/icons-material/Visibility'
+import VisibilityOff from '@mui/icons-material/VisibilityOff'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { connectionActions, connectionManagerActions } from '../../actions'
 import { ConnectionOptions, toMqttConnection } from '../../model/ConnectionOptions'
 import { KeyCodes } from '../../utils/KeyCodes'
-import { Theme, withStyles } from '@material-ui/core/styles'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
 import { ToggleSwitch } from './ToggleSwitch'
 import { useGlobalKeyEventHandler } from '../../effects/useGlobalKeyEventHandler'
 import {
@@ -24,7 +25,7 @@ import {
  InputLabel,
  MenuItem,
  TextField,
-} from '@material-ui/core'
+} from '@mui/material'

 interface Props {
  connection: ConnectionOptions
@@ -285,4 +286,4 @@ const styles = (theme: Theme) => ({
  },
 })

-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ConnectionSettings))
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ConnectionSettings) as any)
@@ -1,15 +1,19 @@
 import * as React from 'react'
 import ConnectionSettings from './ConnectionSettings'
+const ConnectionSettingsAny = ConnectionSettings as any
 import ProfileList from './ProfileList'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { connectionManagerActions } from '../../actions'
 import { ConnectionOptions, toMqttConnection } from '../../model/ConnectionOptions'
-import { Theme, withStyles } from '@material-ui/core/styles'
-import { Modal, Paper, Toolbar, Typography, Collapse } from '@material-ui/core'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
+import { Modal, Paper, Toolbar, Typography, Collapse } from '@mui/material'
 import AdvancedConnectionSettings from './AdvancedConnectionSettings'
+const AdvancedConnectionSettingsAny = AdvancedConnectionSettings as any
 import Certificates from './Certificates'
+const CertificatesAny = Certificates as any

 interface Props {
  actions: any
@@ -34,13 +38,13 @@ class ConnectionSetup extends React.PureComponent<Props, {}> {
    return (
      <div>
        <Collapse in={!showAdvancedSettings && !showCertificateSettings}>
-          <ConnectionSettings connection={connection} />
+          <ConnectionSettingsAny connection={connection} />
        </Collapse>
        <Collapse in={showAdvancedSettings && !showCertificateSettings}>
-          <AdvancedConnectionSettings connection={connection} />
+          <AdvancedConnectionSettingsAny connection={connection} />
        </Collapse>
        <Collapse in={showCertificateSettings}>
-          <Certificates connection={connection} />
+          <CertificatesAny connection={connection} />
        </Collapse>
      </div>
    )
@@ -111,7 +115,7 @@ const styles = (theme: Theme) => ({
    textOverflow: 'ellipsis' as 'ellipsis',
    whiteSpace: 'nowrap' as 'nowrap',
    overflow: 'hidden' as 'hidden',
-    color: theme.palette.text.hint,
+    color: theme.palette.text.secondary,
    fontSize: '0.9em',
    marginLeft: theme.spacing(4),
  },
@@ -134,4 +138,4 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ConnectionSetup))
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ConnectionSetup) as any)
@@ -1,7 +1,8 @@
 import * as React from 'react'
-import Add from '@material-ui/icons/Add'
-import { Fab } from '@material-ui/core'
-import { Theme, withStyles } from '@material-ui/core/styles'
+import Add from '@mui/icons-material/Add'
+import { Fab } from '@mui/material'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'

 const styles = (theme: Theme) => ({
  addButton: {
@@ -1,8 +1,9 @@
 import React, { useCallback } from 'react'
 import { connect } from 'react-redux'
-import { ListItem, Typography } from '@material-ui/core'
+import { ListItem, Typography } from '@mui/material'
 import { toMqttConnection, ConnectionOptions } from '../../../model/ConnectionOptions'
-import { withStyles, Theme } from '@material-ui/core/styles'
+import { withStyles } from '@mui/styles'
+import { Theme } from '@mui/material/styles'
 import { bindActionCreators } from 'redux'
 import { connectionActions, connectionManagerActions } from '../../../actions'

@@ -62,9 +63,9 @@ export const connectionItemStyle = (theme: Theme) => ({
    textOverflow: 'ellipsis' as 'ellipsis',
    whiteSpace: 'nowrap' as 'nowrap',
    overflow: 'hidden' as 'hidden',
-    color: theme.palette.text.hint,
+    color: theme.palette.text.secondary,
    fontSize: '0.7em',
  },
 })

-export default connect(null, mapDispatchToProps)(withStyles(connectionItemStyle)(ConnectionItem))
+export default connect(null, mapDispatchToProps)(withStyles(connectionItemStyle)(ConnectionItem) as any)
@@ -1,4 +1,5 @@
 import ConnectionItem from './ConnectionItem'
+const ConnectionItemAny = ConnectionItem as any
 import React from 'react'
 import { AddButton } from './AddButton'
 import { AppState } from '../../../reducers'
@@ -7,8 +8,9 @@ import { connect } from 'react-redux'
 import { connectionManagerActions } from '../../../actions'
 import { ConnectionOptions } from '../../../model/ConnectionOptions'
 import { KeyCodes } from '../../../utils/KeyCodes'
-import { List } from '@material-ui/core'
-import { Theme, withStyles } from '@material-ui/core/styles'
+import { List } from '@mui/material'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
 import { useGlobalKeyEventHandler } from '../../../effects/useGlobalKeyEventHandler'

 interface Props {
@@ -49,7 +51,7 @@ function ProfileList(props: Props) {
    <List style={{ height: '100%' }} component="nav" subheader={createConnectionButton}>
      <div className={classes.list}>
        {Object.values(connections).map(connection => (
-          <ConnectionItem connection={connection} key={connection.id} selected={selected === connection.id} />
+          <ConnectionItemAny connection={connection} key={connection.id} selected={selected === connection.id} />
        ))}
      </div>
    </List>
@@ -77,4 +79,4 @@ const mapStateToProps = (state: AppState) => {
  }
 }

-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ProfileList))
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ProfileList) as any)
@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react'
-import Delete from '@material-ui/icons/Delete'
+import Delete from '@mui/icons-material/Delete'
 import { connectionManagerActions } from '../../actions'
 import { ConnectionOptions } from '../../model/ConnectionOptions'
 import {
@@ -12,9 +12,9 @@ import {
  TableBody,
  Paper,
  Theme,
-} from '@material-ui/core'
+} from '@mui/material'
 import { bindActionCreators } from 'redux'
-import { withStyles } from '@material-ui/styles'
+import { withStyles } from '@mui/styles'
 import { connect } from 'react-redux'

 function Subscriptions(props: {
@@ -87,4 +87,4 @@ const styles = (theme: Theme) => ({
  },
 })

-export default connect(undefined, mapDispatchToProps)(withStyles(styles)(Subscriptions))
+export default connect(undefined, mapDispatchToProps)(withStyles(styles)(Subscriptions) as any)
@@ -1,5 +1,5 @@
 import React from 'react'
-import { FormControlLabel, Switch } from '@material-ui/core'
+import { FormControlLabel, Switch } from '@mui/material'

 export function ToggleSwitch(props: { value: boolean; classes: any; toggle: () => void; label: string }) {
  const { classes, value, toggle, label } = props
@@ -1,5 +1,6 @@
 import * as React from 'react'
-import { Theme, withStyles } from '@material-ui/core'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'

 interface Props {
  keyboardKey: string
@@ -1,5 +1,6 @@
 import * as React from 'react'
-import { Theme, withStyles } from '@material-ui/core'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
 const cursor = require('./cursor.png')

 interface State {
@@ -74,7 +75,7 @@ const style = (theme: Theme) => ({
    height: '32px',
    position: 'fixed' as 'fixed',
    zIndex: 1000000,
-    filter: theme.palette.type === 'light' ? undefined : 'invert(100%)',
+    filter: theme.palette.mode === 'light' ? undefined : 'invert(100%)',
    pointerEvents: 'none' as 'none',
  },
 })
@@ -1,5 +1,6 @@
 import * as React from 'react'
-import { Theme, withStyles } from '@material-ui/core'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
 import Key from './Key'

 interface State {
@@ -1,9 +1,10 @@
 import * as React from 'react'
 import PersistentStorage from '../utils/PersistentStorage'
-import SentimentDissatisfied from '@material-ui/icons/SentimentDissatisfied'
-import Warning from '@material-ui/icons/Warning'
-import { Theme, withStyles } from '@material-ui/core/styles'
-import { Button, Modal, Paper, Toolbar, Typography } from '@material-ui/core'
+import SentimentDissatisfied from '@mui/icons-material/SentimentDissatisfied'
+import Warning from '@mui/icons-material/Warning'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
+import { Button, Modal, Paper, Toolbar, Typography } from '@mui/material'

 interface State {
  error?: Error
@@ -11,6 +12,7 @@ interface State {

 interface Props {
  classes: any
+  children?: React.ReactNode
 }

 class ErrorBoundary extends React.PureComponent<Props, State> {
@@ -23,12 +25,12 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
  }

  private restart = () => {
-    window.location = window.location
+    window.location.reload()
  }

  private clearStorage = () => {
    PersistentStorage.clear()
-    window.location = window.location
+    window.location.reload()
  }

  public componentDidCatch(error: Error, errorInfo: any) {
@@ -7,7 +7,7 @@ import { ChartParameters } from '../../reducers/Charts'
 import { connect } from 'react-redux'
 import { List } from 'immutable'
 import { Sidebar } from '../Sidebar'
-import ReactResizeDetector from 'react-resize-detector'
+import { useResizeDetector } from 'react-resize-detector'

 interface Props {
  heightProperty: any
@@ -21,11 +21,23 @@ function ContentView(props: Props) {
  const [sidebarWidth, setSidebarWidth] = React.useState<string | number>('40%')
  const [detectedHeight, setDetectedHeight] = React.useState(0)
  const [detectedSidebarWidth, setDetectedSidebarWidth] = React.useState(0)
-  const detectSize = React.useCallback((width, newHeight) => {
+  
+  const { height: resizeHeight, ref: heightRef } = useResizeDetector()
+  const { width: resizeWidth, ref: widthRef } = useResizeDetector()
+  
+  React.useEffect(() => {
+    if (resizeHeight) setDetectedHeight(resizeHeight)
+  }, [resizeHeight])
+  
+  React.useEffect(() => {
+    if (resizeWidth) setDetectedSidebarWidth(resizeWidth)
+  }, [resizeWidth])
+  
+  const detectSize = React.useCallback((width: any, newHeight: any) => {
    setDetectedHeight(newHeight)
  }, [])

-  const detectSidebarSize = React.useCallback(width => {
+  const detectSidebarSize = React.useCallback((width: any) => {
    setDetectedSidebarWidth(width)
  }, [])

@@ -85,15 +97,13 @@ function ContentView(props: Props) {
            >
              <Tree />
              {/** Passing height constraints via flex options down */}
-              <div style={{ flex: 1, display: 'flex', height: '100%', width: '100%' }}>
+              <div ref={heightRef} style={{ flex: 1, display: 'flex', height: '100%', width: '100%' }}>
                {/** Resize detector must not be in the scroll zone, it needs to detect actual available size */}
-                <ReactResizeDetector handleHeight={true} onResize={detectSize} />
                <ChartPanel />
              </div>
            </ReactSplitPane>
          </span>
-          <div style={{ height: '100%' }}>
-            <ReactResizeDetector handleWidth={true} onResize={detectSidebarSize} />
+          <div ref={widthRef} style={{ height: '100%' }}>
            <div
              className={props.paneDefaults}
              style={{ minWidth: '250px', height: '100%', overflowY: 'auto', overflowX: 'hidden' }}
@@ -1,8 +1,9 @@
 import * as React from 'react'

-import { Snackbar, SnackbarContent } from '@material-ui/core'
-import { Theme, withStyles } from '@material-ui/core/styles'
-import { green, red } from '@material-ui/core/colors'
+import { Snackbar, SnackbarContent } from '@mui/material'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
+import { green, red } from '@mui/material/colors'

 interface Props {
  message?: string
@@ -1,13 +1,14 @@
 import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
 import CustomIconButton from '../helper/CustomIconButton'
-import Pause from '@material-ui/icons/PauseCircleFilled'
-import Resume from '@material-ui/icons/PlayArrow'
+import Pause from '@mui/icons-material/PauseCircleFilled'
+import Resume from '@mui/icons-material/PlayArrow'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { treeActions } from '../../actions'
-import { withStyles, Theme } from '@material-ui/core/styles'
+import { withStyles } from '@mui/styles'
+import { Theme } from '@mui/material/styles'

 const styles = (theme: Theme) => ({
  icon: {
@@ -102,4 +103,4 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(PauseButton))
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(PauseButton) as any)
@@ -1,12 +1,13 @@
 import React, { useCallback, useState, useRef } from 'react'
 import ClearAdornment from '../helper/ClearAdornment'
-import Search from '@material-ui/icons/Search'
+import Search from '@mui/icons-material/Search'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { InputBase } from '@material-ui/core'
+import { InputBase } from '@mui/material'
 import { settingsActions } from '../../actions'
-import { fade, Theme, withStyles } from '@material-ui/core/styles'
+import { alpha as fade, Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
 import { useGlobalKeyEventHandler } from '../../effects/useGlobalKeyEventHandler'
 import { KeyCodes } from '../../utils/KeyCodes'

@@ -142,4 +143,4 @@ const styles = (theme: Theme) => ({
  },
 })

-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(SearchBar))
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(SearchBar) as any)
@@ -1,15 +1,17 @@
 import * as React from 'react'
-import CloudOff from '@material-ui/icons/CloudOff'
+import CloudOff from '@mui/icons-material/CloudOff'
 import ConnectionHealthIndicator from '../helper/ConnectionHealthIndicator'
-import Menu from '@material-ui/icons/Menu'
+const ConnectionHealthIndicatorAny = ConnectionHealthIndicator as any
+import Menu from '@mui/icons-material/Menu'
 import PauseButton from './PauseButton'
 import SearchBar from './SearchBar'
-import { AppBar, Button, IconButton, Toolbar, Typography } from '@material-ui/core'
+import { AppBar, Button, IconButton, Toolbar, Typography } from '@mui/material'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { connectionActions, globalActions, settingsActions } from '../../actions'
-import { Theme, withStyles } from '@material-ui/core/styles'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'

 const styles = (theme: Theme) => ({
  title: {
@@ -75,12 +77,12 @@ class TitleBar extends React.PureComponent<Props, {}> {
          <PauseButton />
          <Button
            className={classes.disconnect}
-            classes={{ label: classes.disconnectLabel }}
+            sx={{ color: 'primary.contrastText' }}
            onClick={actions.connection.disconnect}
          >
            Disconnect <CloudOff className={classes.disconnectIcon} />
          </Button>
-          <ConnectionHealthIndicator withBackground={true} />
+          <ConnectionHealthIndicatorAny withBackground={true} />
        </Toolbar>
      </AppBar>
    )
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Dialog, DialogTitle, DialogContent, DialogActions, TextField, Button, Typography } from '@material-ui/core'
+import { Dialog, DialogTitle, DialogContent, DialogActions, TextField, Button, Typography } from '@mui/material'

 interface LoginDialogProps {
  open: boolean
@@ -17,7 +17,7 @@ export function LoginDialog(props: LoginDialogProps) {
  }

  return (
-    <Dialog open={props.open} disableEscapeKeyDown disableBackdropClick>
+    <Dialog open={props.open} disableEscapeKeyDown onClose={(event, reason) => { if (reason !== 'backdropClick') { /* Allow closing only via escape if needed */ } }}>
      <form onSubmit={handleSubmit}>
        <DialogTitle>Login to MQTT Explorer</DialogTitle>
        <DialogContent>
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { TextField, MenuItem, Tooltip } from '@material-ui/core'
+import { TextField, MenuItem, Tooltip } from '@mui/material'
 import { QoS } from '../../../backend/src/DataSource/MqttSource'

 export function QosSelect(props: { selected: QoS; onChange: (value: QoS) => void; label?: string }) {
@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { InputLabel, Switch, Theme, Tooltip } from '@material-ui/core'
-import { withStyles } from '@material-ui/styles'
+import { InputLabel, Switch, Theme, Tooltip } from '@mui/material'
+import { withStyles } from '@mui/styles'
 const sha1 = require('sha1')

 function BooleanSwitch(props: { title: string; value: boolean; tooltip: string; action: () => void; classes: any }) {
@@ -3,9 +3,10 @@ import React, { useMemo } from 'react'
 import { AppState } from '../../reducers'
 import { Base64Message } from '../../../../backend/src/Model/Base64Message'
 import { connect } from 'react-redux'
-import { Theme, withStyles } from '@material-ui/core/styles'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
 import { TopicViewModel } from '../../model/TopicViewModel'
-import { Typography } from '@material-ui/core'
+import { Typography } from '@mui/material'
 import { usePollingToFetchTreeNode } from '../helper/usePollingToFetchTreeNode'
 import { useUpdateComponentWhenNodeUpdates } from '../helper/useUpdateComponentWhenNodeUpdates'
 const abbreviate = require('number-abbreviate')
@@ -19,7 +20,7 @@ const styles = (theme: Theme) => ({
  container: {
    width: '100%',
    height: '224px',
-    backgroundColor: theme.palette.type === 'dark' ? 'rebeccapurple' : '#ebebeb',
+    backgroundColor: theme.palette.mode === 'dark' ? 'rebeccapurple' : '#ebebeb',
    marginBottom: 0,
    padding: '8px',
  },
@@ -1,15 +1,23 @@
 import * as React from 'react'
 import BooleanSwitch from './BooleanSwitch'
 import BrokerStatistics from './BrokerStatistics'
-import ChevronRight from '@material-ui/icons/ChevronRight'
+import ChevronRight from '@mui/icons-material/ChevronRight'
 import TimeLocale from './TimeLocale'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { globalActions, settingsActions } from '../../actions'
 import { shell } from 'electron'
-import { Theme, withStyles } from '@material-ui/core/styles'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
 import { TopicOrder } from '../../reducers/Settings'
+import {
+  MAX_MESSAGE_SIZE_20KB,
+  MAX_MESSAGE_SIZE_100KB,
+  MAX_MESSAGE_SIZE_1MB,
+  MAX_MESSAGE_SIZE_5MB,
+  MAX_MESSAGE_SIZE_UNLIMITED,
+} from '../../../../events/EventsV2'

 import {
  Divider,
@@ -21,7 +29,7 @@ import {
  Select,
  Typography,
  Tooltip,
-} from '@material-ui/core'
+} from '@mui/material'

 export const autoExpandLimitSet = [
  {
@@ -70,7 +78,7 @@ const styles = (theme: Theme) => ({
  },
  author: {
    margin: 'auto 8px 8px auto',
-    color: theme.palette.text.hint,
+    color: theme.palette.text.secondary,
    cursor: 'pointer' as 'pointer',
  },
 })
@@ -88,6 +96,7 @@ interface Props {
  topicOrder: TopicOrder
  visible: boolean
  theme: 'light' | 'dark'
+  maxMessageSize: number
 }

 class Settings extends React.PureComponent<Props, {}> {
@@ -203,6 +212,47 @@ class Settings extends React.PureComponent<Props, {}> {
    this.props.actions.settings.setTopicOrder(e.target.value as TopicOrder)
  }

+  private renderMaxMessageSize() {
+    const { classes, maxMessageSize } = this.props
+
+    const formatSize = (size: number) => {
+      if (size === MAX_MESSAGE_SIZE_UNLIMITED) {
+        return 'Unlimited'
+      } else if (size >= 1000000) {
+        return `${size / 1000000} MB`
+      } else if (size >= 1000) {
+        return `${size / 1000} KB`
+      }
+      return `${size} bytes`
+    }
+
+    return (
+      <div style={{ padding: '8px', display: 'flex' }}>
+        <InputLabel htmlFor="max-message-size" style={{ flex: '1', marginTop: '8px' }}>
+          Max Message Size
+        </InputLabel>
+        <Select
+          value={maxMessageSize}
+          onChange={this.onChangeMaxMessageSize}
+          input={<Input name="max-message-size" id="max-message-size-label-placeholder" />}
+          name="max-message-size"
+          className={classes.input}
+          style={{ flex: '1' }}
+        >
+          <MenuItem value={MAX_MESSAGE_SIZE_20KB}>{formatSize(MAX_MESSAGE_SIZE_20KB)}</MenuItem>
+          <MenuItem value={MAX_MESSAGE_SIZE_100KB}>{formatSize(MAX_MESSAGE_SIZE_100KB)}</MenuItem>
+          <MenuItem value={MAX_MESSAGE_SIZE_1MB}>{formatSize(MAX_MESSAGE_SIZE_1MB)}</MenuItem>
+          <MenuItem value={MAX_MESSAGE_SIZE_5MB}>{formatSize(MAX_MESSAGE_SIZE_5MB)}</MenuItem>
+          <MenuItem value={MAX_MESSAGE_SIZE_UNLIMITED}>{formatSize(MAX_MESSAGE_SIZE_UNLIMITED)}</MenuItem>
+        </Select>
+      </div>
+    )
+  }
+
+  private onChangeMaxMessageSize = (e: React.ChangeEvent<{ value: unknown }>) => {
+    this.props.actions.settings.setMaxMessageSize(parseInt(String(e.target.value), 10))
+  }
+
  public render() {
    const { classes, actions, visible } = this.props
    return (
@@ -220,6 +270,7 @@ class Settings extends React.PureComponent<Props, {}> {
          {this.renderAutoExpand()}
          {this.renderNodeOrder()}
          <TimeLocale />
+          {this.renderMaxMessageSize()}
          {this.renderHighlightTopicUpdates()}
          {this.selectTopicsOnMouseOver()}
          {this.toggleTheme()}
@@ -243,6 +294,7 @@ const mapStateToProps = (state: AppState) => {
    highlightTopicUpdates: state.settings.get('highlightTopicUpdates'),
    selectTopicWithMouseOver: state.settings.get('selectTopicWithMouseOver'),
    theme: state.settings.get('theme'),
+    maxMessageSize: state.settings.get('maxMessageSize'),
  }
 }

@@ -3,9 +3,9 @@ import DateFormatter from '../helper/DateFormatter'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { Input, InputLabel, MenuItem, Select, Theme } from '@material-ui/core'
+import { Input, InputLabel, MenuItem, Select, Theme } from '@mui/material'
 import { settingsActions } from '../../actions'
-import { withStyles } from '@material-ui/styles'
+import { withStyles } from '@mui/styles'

 function importAll(r: any) {
  r.keys().forEach(r)
@@ -38,7 +38,7 @@ function TimeLocaleSettings(props: Props) {
    </MenuItem>
  ))

-  function updateLocale(e: React.ChangeEvent<{ value: unknown }>) {
+  function updateLocale(e: any) {
    const locale = e.target.value ? String(e.target.value) : ''
    actions.settings.setTimeLocale(locale)
  }
@@ -1,11 +1,11 @@
 import * as q from '../../../../../backend/src/Model'
 import * as React from 'react'
-import ShowChart from '@material-ui/icons/ShowChart'
+import ShowChart from '@mui/icons-material/ShowChart'
 import TopicPlot from '../../TopicPlot'
 import { bindActionCreators } from 'redux'
 import { chartActions } from '../../../actions'
 import { connect } from 'react-redux'
-import { Fade, Paper, Popper, Tooltip } from '@material-ui/core'
+import { Fade, Paper, Popper, Tooltip } from '@mui/material'
 import { JsonPropertyLocation } from '../../../../../backend/src/JsonAstParser'

 interface Props {
@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { Theme } from '@material-ui/core'
-import { withStyles } from '@material-ui/styles'
+import { Theme } from '@mui/material'
+import { withStyles } from '@mui/styles'

 interface Props {
  changes: Array<Diff.Change>
@@ -1,13 +1,13 @@
 import * as diff from 'diff'
 import * as q from '../../../../../backend/src/Model'
 import * as React from 'react'
-import Add from '@material-ui/icons/Add'
+import Add from '@mui/icons-material/Add'
 import ChartPreview from './ChartPreview'
-import Remove from '@material-ui/icons/Remove'
+import Remove from '@mui/icons-material/Remove'
 import { JsonPropertyLocation } from '../../../../../backend/src/JsonAstParser'
 import { lineChangeStyle, trimNewlineRight } from './util'
-import { Theme } from '@material-ui/core'
-import { withStyles } from '@material-ui/styles'
+import { Theme } from '@mui/material'
+import { withStyles } from '@mui/styles'

 interface Props {
  changes: Array<diff.Change>
@@ -8,7 +8,8 @@ import { isPlottable, lineChangeStyle, trimNewlineRight } from './util'
 import { JsonPropertyLocation, literalsMappedByLines } from '../../../../../backend/src/JsonAstParser'
 import { selectTextWithCtrlA } from '../../../utils/handleTextSelectWithCtrlA'
 import { style } from './style'
-import { withStyles, Typography } from '@material-ui/core'
+import { Typography } from '@mui/material'
+import { withStyles } from '@mui/styles'
 import 'prismjs/components/prism-json'

 interface Props {
@@ -1,8 +1,8 @@
 import { CodeBlockColors, CodeBlockColorsBraceMonokai } from '../CodeBlockColors'
-import { Theme } from '@material-ui/core'
+import { Theme } from '@mui/material'

 export const style = (theme: Theme) => {
-  const codeBlockColors = theme.palette.type === 'light' ? CodeBlockColors : CodeBlockColorsBraceMonokai
+  const codeBlockColors = theme.palette.mode === 'light' ? CodeBlockColors : CodeBlockColorsBraceMonokai
  const codeBaseStyle = {
    font: "12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace",
    display: 'inline-grid' as 'inline-grid',
@@ -1,7 +1,8 @@
 import React, { useCallback, useState, useEffect, memo } from 'react'
-import { Badge, Typography } from '@material-ui/core'
+import { Badge, Typography } from '@mui/material'
 import { selectTextWithCtrlA } from '../../utils/handleTextSelectWithCtrlA'
-import { Theme, withStyles, emphasize } from '@material-ui/core/styles'
+import { Theme, emphasize } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'

 interface HistoryItem {
  key: string
@@ -1,6 +1,6 @@
 import React, { memo } from 'react'
 import { Message } from '../../../../backend/src/Model'
-import { Tooltip } from '@material-ui/core'
+import { Tooltip } from '@mui/material'

 export const MessageId = memo(function MessageId(props: { message: Message; addComma?: boolean }) {
  const { message, addComma } = props
@@ -1,7 +1,7 @@
 import * as q from '../../../../backend/src/Model'
 import * as React from 'react'
 import { TopicViewModel } from '../../model/TopicViewModel'
-import { Typography } from '@material-ui/core'
+import { Typography } from '@mui/material'

 interface Props {
  node?: q.TreeNode<TopicViewModel>
@@ -1,7 +1,7 @@
 import React from 'react'
-import ExpandMore from '@material-ui/icons/ExpandMore'
-import { ExpansionPanel, ExpansionPanelDetails, ExpansionPanelSummary, Typography, Theme } from '@material-ui/core'
-import { withStyles } from '@material-ui/styles'
+import ExpandMore from '@mui/icons-material/ExpandMore'
+import { Accordion, AccordionDetails, AccordionSummary, Typography, Theme } from '@mui/material'
+import { withStyles } from '@mui/styles'

 const styles = (theme: Theme) => ({
  summary: { minHeight: '0' },
@@ -19,14 +19,14 @@ const Panel = (props: {
  detailsHidden?: boolean
 }) => {
  return (
-    <ExpansionPanel defaultExpanded={true} disabled={props.disabled}>
-      <ExpansionPanelSummary expandIcon={<ExpandMore />} className={props.classes.summary}>
+    <Accordion defaultExpanded={true} disabled={props.disabled}>
+      <AccordionSummary expandIcon={<ExpandMore />} className={props.classes.summary}>
        <Typography className={props.classes.heading}>{props.children[0]}</Typography>
-      </ExpansionPanelSummary>
+      </AccordionSummary>
      {props.detailsHidden ? null : (
-        <ExpansionPanelDetails className={props.classes.detail}>{props.children[1]}</ExpansionPanelDetails>
+        <AccordionDetails className={props.classes.detail}>{props.children[1]}</AccordionDetails>
      )}
-    </ExpansionPanel>
+    </Accordion>
  )
 }

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { default as AceEditor } from 'react-ace'
-import { Theme, withTheme } from '@material-ui/core'
+import { useTheme } from '@mui/material/styles'
 import 'ace-builds'
 import 'ace-builds/webpack-resolver'
 import 'ace-builds/src-noconflict/mode-json'
@@ -13,11 +13,11 @@ import 'react-ace'

 function Editor(props: {
  editorMode: string
-  theme: Theme
  value: string | undefined
  onChange: (value: string) => void
  editorRef: React.Ref<AceEditor>
 }) {
+  const theme = useTheme()
  const editorOptions = {
    showLineNumbers: false,
    tabSize: 2,
@@ -28,7 +28,7 @@ function Editor(props: {
      ref={props.editorRef}
      style={{}}
      mode={props.editorMode}
-      theme={props.theme.palette.type === 'dark' ? 'monokai' : 'dawn'}
+      theme={theme.palette.mode === 'dark' ? 'monokai' : 'dawn'}
      name="UNIQUE_ID_OF_DIV"
      width="100%"
      height="200px"
@@ -45,4 +45,4 @@ function Editor(props: {
  )
 }

-export default withTheme(Editor)
+export default Editor
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { FormControlLabel, Radio, RadioGroup } from '@material-ui/core'
+import { FormControlLabel, Radio, RadioGroup } from '@mui/material'

 interface Props {
  value: string
@@ -1,14 +1,14 @@
 import Editor from './Editor'
-import { AttachFileOutlined, FormatAlignLeft } from '@material-ui/icons'
+import { AttachFileOutlined, FormatAlignLeft } from '@mui/icons-material'
 import Message from './Model/Message'
-import Navigation from '@material-ui/icons/Navigation'
+import Navigation from '@mui/icons-material/Navigation'
 import PublishHistory from './PublishHistory'
 import React, { useCallback, useMemo, useState, useRef, memo } from 'react'
 import RetainSwitch from './RetainSwitch'
 import TopicInput from './TopicInput'
 import { AppState } from '../../../reducers'
 import { bindActionCreators } from 'redux'
-import { Button, Fab, Theme, Tooltip, withTheme } from '@material-ui/core'
+import { Button, Fab, Tooltip, useTheme } from '@mui/material'
 import { connect } from 'react-redux'
 import { EditorModeSelect } from './EditorModeSelect'
 import { globalActions, publishActions } from '../../../actions'
@@ -23,7 +23,6 @@ interface Props {
  globalActions: typeof globalActions
  retain: boolean
  editorMode: string
-  theme: Theme
 }

 function useHistory(): [Array<Message>, (topic: string, payload?: string) => void] {
@@ -42,6 +41,7 @@ function useHistory(): [Array<Message>, (topic: string, payload?: string) => voi
 }

 function Publish(props: Props) {
+  const theme = useTheme()
  const editorRef = useRef<AceEditor>()
  const [history, amendToHistory] = useHistory()

@@ -221,4 +221,4 @@ const mapStateToProps = (state: AppState) => {
  }
 }

-export default connect(mapStateToProps, mapDispatchToProps)(withTheme(Publish))
+export default connect(mapStateToProps, mapDispatchToProps)(Publish)
@@ -1,6 +1,6 @@
 import QosSelect from './QosPublishOption'
 import React from 'react'
-import { Checkbox, FormControlLabel, Tooltip } from '@material-ui/core'
+import { Checkbox, FormControlLabel, Tooltip } from '@mui/material'
 import { publishActions } from '../../../actions'
 import { bindActionCreators } from 'redux'
 import { AppState } from '../../../reducers'
@@ -1,6 +1,6 @@
 import ClearAdornment from '../../helper/ClearAdornment'
 import React, { useCallback, useMemo, useRef } from 'react'
-import { FormControl, Input, InputLabel } from '@material-ui/core'
+import { FormControl, Input, InputLabel } from '@mui/material'
 import { publishActions } from '../../../actions'
 import { bindActionCreators } from 'redux'
 import { AppState } from '../../../reducers'
@@ -2,12 +2,14 @@ import * as q from '../../../../backend/src/Model'
 import React, { useState, useEffect, useCallback } from 'react'
 import NodeStats from './NodeStats'
 import ValuePanel from './ValueRenderer/ValuePanel'
+const ValuePanelAny = ValuePanel as any
 import { AppState } from '../../reducers'
-import { ExpansionPanelDetails } from '@material-ui/core'
+import { AccordionDetails } from '@mui/material'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { settingsActions, sidebarActions } from '../../actions'
-import { Theme, withStyles } from '@material-ui/core/styles'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
 import { TopicViewModel } from '../../model/TopicViewModel'
 import TopicPanel from './TopicPanel/TopicPanel'
 import Panel from './Panel'
@@ -56,16 +58,16 @@ function Sidebar(props: Props) {
    <div id="Sidebar" className={classes.drawer}>
      <div>
        <TopicPanel node={node} />
-        <ValuePanel lastUpdate={node ? node.lastUpdate : 0} />
+        <ValuePanelAny lastUpdate={node ? node.lastUpdate : 0} />
        <Panel>
          <span>Publish</span>
          <Publish connectionId={props.connectionId} />
        </Panel>
        <Panel detailsHidden={!node}>
          <span>Stats</span>
-          <ExpansionPanelDetails className={classes.details}>
+          <AccordionDetails className={classes.details}>
            <NodeStats node={node} />
-          </ExpansionPanelDetails>
+          </AccordionDetails>
        </Panel>
      </div>
    </div>
@@ -1,8 +1,8 @@
 import * as q from '../../../../../backend/src/Model'
 import CustomIconButton from '../../helper/CustomIconButton'
-import Delete from '@material-ui/icons/Delete'
+import Delete from '@mui/icons-material/Delete'
 import React, { useCallback } from 'react'
-import { Badge } from '@material-ui/core'
+import { Badge } from '@mui/material'

 export const RecursiveTopicDeleteButton = (props: {
  node?: q.TreeNode<any>
@@ -1,7 +1,8 @@
 import React from 'react'
 import * as q from '../../../../../backend/src/Model'
-import Button from '@material-ui/core/Button'
-import { withStyles, Theme } from '@material-ui/core/styles'
+import Button from '@mui/material/Button'
+import { withStyles } from '@mui/styles'
+import { Theme } from '@mui/material/styles'
 import { treeActions } from '../../../actions'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
@@ -39,8 +40,8 @@ class Topic extends React.PureComponent<Props, {}> {
        <Button
          onClick={() => this.props.actions.selectTopic(edge!.target)}
          size="small"
-          variant={theme.palette.type === 'light' ? 'contained' : undefined}
-          color={theme.palette.type === 'light' ? 'primary' : 'secondary'}
+          variant={theme.palette.mode === 'light' ? 'contained' : undefined}
+          color={theme.palette.mode === 'light' ? 'primary' : 'secondary'}
          className={this.props.classes.button}
          key={edge!.hash()}
        >
@@ -66,4 +67,4 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-export default connect(null, mapDispatchToProps)(withStyles(styles, { withTheme: true })(Topic))
+export default connect(null, mapDispatchToProps)(withStyles(styles, { withTheme: true })(Topic) as any)
@@ -1,6 +1,6 @@
 import * as q from '../../../../../backend/src/Model'
 import CustomIconButton from '../../helper/CustomIconButton'
-import Delete from '@material-ui/icons/Delete'
+import Delete from '@mui/icons-material/Delete'
 import React from 'react'

 export const TopicDeleteButton = (props: {
@@ -3,6 +3,7 @@ import Copy from '../../helper/Copy'
 import Panel from '../Panel'
 import React, { useMemo, useCallback } from 'react'
 import Topic from './Topic'
+const TopicAny = Topic as any
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { RecursiveTopicDeleteButton } from './RecursiveTopicDeleteButton'
@@ -31,7 +32,7 @@ const TopicPanel = (props: { node?: q.TreeNode<any>; actions: typeof sidebarActi
          <RecursiveTopicDeleteButton node={node} deleteTopicAction={deleteTopic} />
          <TopicTypeButton node={node} />
        </span>
-        <Topic node={node} />
+        <TopicAny node={node} />
      </Panel>
    ),
    [node, node?.childTopicCount()]
@@ -1,15 +1,15 @@
 import React, { useCallback, useMemo } from 'react'
 import * as q from '../../../../../backend/src/Model'
-import ClickAwayListener from '@material-ui/core/ClickAwayListener'
-import Grow from '@material-ui/core/Grow'
-import Button from '@material-ui/core/Button'
-import Paper from '@material-ui/core/Paper'
-import Popper from '@material-ui/core/Popper'
-import MenuItem from '@material-ui/core/MenuItem'
-import MenuList from '@material-ui/core/MenuList'
-import WarningRounded from '@material-ui/icons/WarningRounded'
+import ClickAwayListener from '@mui/material/ClickAwayListener'
+import Grow from '@mui/material/Grow'
+import Button from '@mui/material/Button'
+import Paper from '@mui/material/Paper'
+import Popper from '@mui/material/Popper'
+import MenuItem from '@mui/material/MenuItem'
+import MenuList from '@mui/material/MenuList'
+import WarningRounded from '@mui/icons-material/WarningRounded'
 import { MessageDecoder, decoders } from '../../../decoders'
-import { Tooltip } from '@material-ui/core'
+import { Tooltip } from '@mui/material'

 export const TopicTypeButton = (props: { node?: q.TreeNode<any> }) => {
  const { node } = props
@@ -46,7 +46,7 @@ export const TopicTypeButton = (props: { node?: q.TreeNode<any> }) => {
    [open]
  )

-  const handleClose = useCallback((event: React.MouseEvent<Document, MouseEvent>) => {
+  const handleClose = useCallback((event: any) => {
    if (anchorEl && anchorEl.contains(event.target as HTMLElement)) {
      return
    }
@@ -1,10 +1,12 @@
 import React, { useCallback } from 'react'
-import Code from '@material-ui/icons/Code'
-import Reorder from '@material-ui/icons/Reorder'
-import ToggleButton from '@material-ui/lab/ToggleButton'
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'
+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 { settingsActions } from '../../../actions'
-import { Tooltip, withStyles, Theme } from '@material-ui/core'
+import { Tooltip } from '@mui/material'
+import { withStyles } from '@mui/styles'
+import { Theme } from '@mui/material/styles'
 import { bindActionCreators } from 'redux'
 import { AppState } from '../../../reducers'
 import { connect } from 'react-redux'
@@ -73,4 +75,4 @@ const mapStateToProps = (state: AppState) => {
  }
 }

-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ActionButtons))
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ActionButtons) as any)
@@ -1,7 +1,7 @@
-import Clear from '@material-ui/icons/Clear'
+import Clear from '@mui/icons-material/Clear'
 import React, { useMemo } from 'react'
 import { bindActionCreators } from 'redux'
-import { Button, Tooltip } from '@material-ui/core'
+import { Button, Tooltip } from '@mui/material'
 import { connect } from 'react-redux'
 import { sidebarActions } from '../../../actions'

@@ -1,6 +1,6 @@
 import * as q from '../../../../../backend/src/Model'
 import * as React from 'react'
-import ShowChart from '@material-ui/icons/ShowChart'
+import ShowChart from '@mui/icons-material/ShowChart'
 import Copy from '../../helper/Copy'
 import DateFormatter from '../../helper/DateFormatter'
 import History from '../HistoryDrawer'
@@ -9,7 +9,9 @@ import React, { useCallback } from 'react'
 import ValueRenderer from './ValueRenderer'
 import { AppState } from '../../../reducers'
 import { bindActionCreators } from 'redux'
-import { Theme, Typography, withStyles } from '@material-ui/core'
+import { Typography } from '@mui/material'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
 import { connect } from 'react-redux'
 import { sidebarActions } from '../../../actions'
 import DeleteSelectedTopicButton from './DeleteSelectedTopicButton'
@@ -143,4 +145,4 @@ const styles = (theme: Theme) => ({
 })

 // @ts-ignore
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ValuePanel))
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ValuePanel) as any)
@@ -4,7 +4,7 @@ import CodeDiff from '../CodeDiff'
 import { AppState } from '../../../reducers'
 import { connect } from 'react-redux'
 import { ValueRendererDisplayMode } from '../../../reducers/Settings'
-import { Fade } from '@material-ui/core'
+import { Fade } from '@mui/material'
 import { Decoder } from '../../../../../backend/src/Model/Decoder'
 import { useDecoder } from '../../hooks/useDecoder'
 import { TopicViewModel } from '../../../model/TopicViewModel'
@@ -3,7 +3,8 @@ import React, { useEffect, useState, useMemo } from 'react'
 import TreeNode from '.'
 import { SettingsState } from '../../../reducers/Settings'
 import { sortedNodes } from '../../../sortedNodes'
-import { Theme, withStyles } from '@material-ui/core'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
 import { TopicViewModel } from '../../../model/TopicViewModel'
 import { treeActions } from '../../../actions'

@@ -1,6 +1,7 @@
 import * as q from '../../../../../backend/src/Model'
 import React, { memo } from 'react'
-import { Theme, withStyles } from '@material-ui/core'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
 import { TopicViewModel } from '../../../model/TopicViewModel'
 import { useDecoder } from '../../hooks/useDecoder'

@@ -94,7 +95,7 @@ const styles = (theme: Theme) => ({
    overflow: 'hidden' as 'hidden',
  },
  expander: {
-    color: theme.palette.type === 'light' ? '#222' : '#eee',
+    color: theme.palette.mode === 'light' ? '#222' : '#eee',
    cursor: 'pointer' as 'pointer',
    paddingRight: theme.spacing(0.25),
    userSelect: 'none' as 'none',
@@ -4,7 +4,8 @@ import TreeNodeSubnodes from './TreeNodeSubnodes'
 import TreeNodeTitle from './TreeNodeTitle'
 import { SettingsState } from '../../../reducers/Settings'
 import { styles } from './styles'
-import { Theme, withStyles } from '@material-ui/core/styles'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
 import { TopicViewModel } from '../../../model/TopicViewModel'
 import { treeActions } from '../../../actions'
 import { useAnimationToIndicateTopicUpdate } from './effects/useAnimationToIndicateTopicUpdate'
@@ -35,7 +36,7 @@ function TreeNodeComponent(props: Props) {
  const deleteTopicCallback = useDeleteKeyCallback(treeNode, actions)
  useViewModelSubscriptions(treeNode, nodeRef, setSelected, setCollapsedOverride)
  const animationClass =
-    props.theme.palette.type === 'light' ? props.classes.animationLight : props.classes.animationDark
+    props.theme.palette.mode === 'light' ? props.classes.animationLight : props.classes.animationDark

  useAnimationToIndicateTopicUpdate(
    nodeRef,
@@ -1,5 +1,5 @@
-import { blueGrey } from '@material-ui/core/colors'
-import { Theme } from '@material-ui/core/styles'
+import { blueGrey } from '@mui/material/colors'
+import { Theme } from '@mui/material/styles'

 export const styles = (theme: Theme) => {
  return {
@@ -37,7 +37,7 @@ export const styles = (theme: Theme) => {
      marginLeft: theme.spacing(1.5),
    },
    selected: {
-      backgroundColor: (theme.palette.type === 'light' ? blueGrey[300] : theme.palette.primary.main) + ' !important',
+      backgroundColor: (theme.palette.mode === 'light' ? blueGrey[300] : theme.palette.primary.main) + ' !important',
    },
    hover: {},
    title: {
@@ -49,7 +49,7 @@ export const styles = (theme: Theme) => {
      padding: '1px 4px 0 4px',
      margin: '1px 0px',
      '&:hover': {
-        backgroundColor: theme.palette.type === 'light' ? blueGrey[100] : theme.palette.primary.light,
+        backgroundColor: theme.palette.mode === 'light' ? blueGrey[100] : theme.palette.primary.light,
      },
    },
  }
@@ -1,17 +1,18 @@
-import compareVersions from 'compare-versions'
+import { compareVersions } from 'compare-versions'
 import electron from 'electron'
 import React from 'react'
 import axios from 'axios'
-import Close from '@material-ui/icons/Close'
-import CloudDownload from '@material-ui/icons/CloudDownload'
+import Close from '@mui/icons-material/Close'
+import CloudDownload from '@mui/icons-material/CloudDownload'
 import { AppState } from '../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { green } from '@material-ui/core/colors'
-import { Theme, withStyles } from '@material-ui/core/styles'
+import { green } from '@mui/material/colors'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
 import { updateNotifierActions } from '../actions'

-import { Button, IconButton, Modal, Paper, Snackbar, SnackbarContent, Typography } from '@material-ui/core'
+import { Button, IconButton, Modal, Paper, Snackbar, SnackbarContent, Typography } from '@mui/material'
 import { rendererRpc, getAppVersion } from '../../../events'

 interface Props {
@@ -83,7 +84,7 @@ class UpdateNotifier extends React.PureComponent<Props, State> {
    return res.data as Array<GithubRelease>
  }

-  private onCloseNotification = (event: React.SyntheticEvent<any>, reason: string) => {
+  private onCloseNotification = (event: any, reason: any) => {
    if (reason === 'clickaway') {
      return
    }
@@ -1,25 +1,26 @@
 import * as React from 'react'
-import Clear from '@material-ui/icons/Clear'
-import { IconButton, Theme } from '@material-ui/core'
-import { withTheme } from '@material-ui/core/styles'
+import Clear from '@mui/icons-material/Clear'
+import { IconButton, Theme } from '@mui/material'
+import { useTheme } from '@mui/material/styles'

 interface Props {
  value?: string
  action: any
  style?: React.CSSProperties
  variant?: 'primary'
-  theme: Theme
 }

 /**
 * Clear button for text input fields
 */
 function ClearAdornment(props: Props) {
+  const theme = useTheme()
+  
  if (!props.value) {
    return null
  }

-  const color = props.variant === 'primary' ? props.theme.palette.primary.contrastText : undefined
+  const color = props.variant === 'primary' ? theme.palette.primary.contrastText : undefined
  return (
    <IconButton style={{ ...props.style, padding: '1px' }} onClick={props.action}>
      <Clear style={{ color, fontSize: '16px' }} />
@@ -27,4 +28,4 @@ function ClearAdornment(props: Props) {
  )
 }

-export default withTheme(ClearAdornment)
+export default ClearAdornment
@@ -1,11 +1,12 @@
 import * as React from 'react'
-import DeviceHubOutlined from '@material-ui/icons/DeviceHubOutlined'
+import DeviceHubOutlined from '@mui/icons-material/DeviceHubOutlined'
 import { AppState } from '../../reducers'
 import { connect } from 'react-redux'
 import { ConnectionHealth } from '../../reducers/Connection'
-import { green, orange, red } from '@material-ui/core/colors'
-import { withStyles, Theme } from '@material-ui/core/styles'
-import { Tooltip } from '@material-ui/core'
+import { green, orange, red } from '@mui/material/colors'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
+import { Tooltip } from '@mui/material'

 const styles = (theme: Theme) => ({
  offline: {
@@ -65,4 +66,4 @@ const mapStateToProps = (state: AppState) => {
  }
 }

-export default connect(mapStateToProps)(withStyles(styles)(ConnectionHealthIndicator))
+export default connect(mapStateToProps)(withStyles(styles)(ConnectionHealthIndicator) as any)
@@ -1,7 +1,7 @@
 import * as React from 'react'
-import Check from '@material-ui/icons/Check'
+import Check from '@mui/icons-material/Check'
 import CustomIconButton from './CustomIconButton'
-import FileCopy from '@material-ui/icons/FileCopy'
+import FileCopy from '@mui/icons-material/FileCopy'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { globalActions } from '../../actions'
@@ -1,12 +1,14 @@
 import * as React from 'react'
-import { IconButton, Tooltip } from '@material-ui/core'
-import { Theme, withStyles } from '@material-ui/core/styles'
+import { IconButton, Tooltip } from '@mui/material'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'

 interface Props {
  onClick: any
  tooltip: string
  classes: any
  style?: React.CSSProperties
+  children?: React.ReactNode
 }

 const styles = (theme: Theme) => ({
@@ -1,7 +1,7 @@
 import React from 'react'
 import { AppState } from '../../reducers'
 import { connect } from 'react-redux'
-import { Tooltip } from '@material-ui/core'
+import { Tooltip } from '@mui/material'

 function NumberFormatter(props: { locale: string; value: number; grouping?: boolean }) {
  let formatter: Intl.NumberFormat | undefined
@@ -1,9 +1,9 @@
 import * as React from 'react'
 import { connect } from 'react-redux'
-import Check from '@material-ui/icons/Check'
+import Check from '@mui/icons-material/Check'
 import CustomIconButton from './CustomIconButton'

-import { SaveAlt } from '@material-ui/icons'
+import { SaveAlt } from '@mui/icons-material'
 import { bindActionCreators } from 'redux'
 import { rendererRpc, writeToFile } from '../../../../events'
 import { makeSaveDialogRpc } from '../../../../events/OpenDialogRequest'
@@ -1,13 +1,13 @@
 import * as React from 'react'
-import * as ReactDOM from 'react-dom'
+import * as ReactDOM from 'react-dom/client'
 import App from './components/App'
 import Demo from './components/Demo'
 import reducers, { AppState } from './reducers'
-import reduxThunk from 'redux-thunk'
+import { thunk as reduxThunk } from 'redux-thunk'
 import { applyMiddleware, compose, createStore } from 'redux'
 import { batchDispatchMiddleware } from 'redux-batched-actions'
 import { connect, Provider } from 'react-redux'
-import { ThemeProvider } from '@material-ui/styles'
+import { ThemeProvider } from '@mui/material/styles'
 import './utils/tracking'
 import { themes } from './theme'
 import { BrowserAuthWrapper } from './components/BrowserAuthWrapper'
@@ -32,11 +32,11 @@ const mapStateToProps = (state: AppState) => {

 const Application = connect(mapStateToProps)(ApplicationRenderer)

-ReactDOM.render(
+const root = ReactDOM.createRoot(document.getElementById('app')!)
+root.render(
  <Provider store={store}>
    <BrowserAuthWrapper>
      <Application />
    </BrowserAuthWrapper>
-  </Provider>,
-  document.getElementById('app')
+  </Provider>
 )
@@ -1,7 +1,7 @@
 import { MqttOptions } from '../../../backend/src/DataSource'
 import { v4 } from 'uuid'
 import { Subscription } from '../../../backend/src/DataSource/MqttSource'
-const sha1 = require('sha1')
+import sha1 from 'sha1'

 export interface CertificateParameters {
  name: string
@@ -1,5 +1,6 @@
 import { createReducer } from './lib'
 import { Record } from 'immutable'
+import { MAX_MESSAGE_SIZE_DEFAULT } from '../../../events/EventsV2'

 export enum TopicOrder {
  none = 'none',
@@ -18,6 +19,7 @@ export interface SettingsStateModel {
  valueRendererDisplayMode: ValueRendererDisplayMode
  selectTopicWithMouseOver: boolean
  theme: 'light' | 'dark'
+  maxMessageSize: number
 }

 export type SettingsState = Record<SettingsStateModel>
@@ -30,7 +32,8 @@ export type Actions = SetAutoExpandLimitAction &
  SetValueRendererDisplayModeAction &
  SetTheme &
  SetSelectTopicWithMouseOverAction &
-  SetTimeLocale
+  SetTimeLocale &
+  SetMaxMessageSizeAction

 export enum ActionTypes {
  SETTINGS_SET_AUTO_EXPAND_LIMIT = 'SETTINGS_SET_AUTO_EXPAND_LIMIT',
@@ -43,6 +46,7 @@ export enum ActionTypes {
  SETTINGS_SET_THEME_LIGHT = 'SETTINGS_SET_THEME_LIGHT',
  SETTINGS_SET_THEME_DARK = 'SETTINGS_SET_THEME_DARK',
  SETTINGS_SET_TIME_LOCALE = 'SETTINGS_SET_TIME_LOCALE',
+  SETTINGS_SET_MAX_MESSAGE_SIZE = 'SETTINGS_SET_MAX_MESSAGE_SIZE',
 }

 const initialState = Record<SettingsStateModel>({
@@ -54,6 +58,7 @@ const initialState = Record<SettingsStateModel>({
  selectTopicWithMouseOver: false,
  theme: 'light',
  topicFilter: undefined,
+  maxMessageSize: MAX_MESSAGE_SIZE_DEFAULT,
 })

 const setTheme = (theme: 'light' | 'dark') => (state: SettingsState) => {
@@ -73,6 +78,7 @@ const reducerActions: {
  SETTINGS_SET_THEME_LIGHT: setTheme('light'),
  SETTINGS_SET_THEME_DARK: setTheme('dark'),
  SETTINGS_SET_TIME_LOCALE: setTimeLocale,
+  SETTINGS_SET_MAX_MESSAGE_SIZE: setMaxMessageSize,
 }

 export const settingsReducer = createReducer(initialState(), reducerActions)
@@ -153,3 +159,12 @@ export interface FilterTopicsAction {
 function filterTopics(state: SettingsState, action: FilterTopicsAction) {
  return state.set('topicFilter', action.topicFilter)
 }
+
+export interface SetMaxMessageSizeAction {
+  type: ActionTypes.SETTINGS_SET_MAX_MESSAGE_SIZE
+  maxMessageSize: number
+}
+
+function setMaxMessageSize(state: SettingsState, action: SetMaxMessageSizeAction) {
+  return state.set('maxMessageSize', action.maxMessageSize)
+}
@@ -21,7 +21,7 @@ export enum ActionTypes {
 export type SidebarState = Record<SidebarModel>

 const actions: {
-  [s: string]: (state: SidebarState, action: ReduxAction) => SidebarState
+  [s: string]: any
 } = {
  SIDEBAR_SET_COMPARE_MESSAGE: setCompareMessage,
  SIDEBAR_RESET_STORE: resetStore,
@@ -52,7 +52,7 @@ const setPaused =
  }

 const actions: {
-  [s: string]: (state: TreeState, action: ReduxAction) => TreeState
+  [s: string]: any
 } = {
  TREE_SHOW_TREE: showTree,
  TREE_SELECT_TOPIC: selectTopic,
@@ -1,5 +1,5 @@
-import { createMuiTheme } from '@material-ui/core'
-import { amber } from '@material-ui/core/colors'
+import { createTheme } from '@mui/material/styles'
+import { amber } from '@mui/material/colors'

 const baseTheme = {
  typography: {
@@ -12,17 +12,17 @@ const baseTheme = {
  },
 }

-const darkTheme = createMuiTheme({
+const darkTheme = createTheme({
  ...(baseTheme as any),
  palette: {
-    type: 'dark',
+    mode: 'dark',
  },
 })

-const lightTheme = createMuiTheme({
+const lightTheme = createTheme({
  ...(baseTheme as any),
  palette: {
-    type: 'light',
+    mode: 'light',
    background: {
      default: '#fafafa',
    },
@@ -4,12 +4,12 @@
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strict": true,
-    "lib": ["es2019", "dom"],
+    "lib": ["ES2020", "dom"],
    "moduleResolution": "node",
    "outDir": "./build/",
    "sourceMap": true,
    "module": "esnext",
-    "target": "ES2017",
+    "target": "ES2020",
    "jsx": "react",
    "paths": {
      "react": ["./node_modules/@types/react"]
@@ -1,9 +1,14 @@
 // Browser-specific webpack configuration
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const webpack = require('webpack')
-const path = require('path')
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import webpack from 'webpack'
+import path from 'path'
+import { fileURLToPath } from 'url'
+import { dirname } from 'path'

-module.exports = {
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+export default {
  entry: {
    app: './src/index.tsx',
    bugtracking: './src/utils/bugtracking.ts',
@@ -50,16 +55,16 @@ module.exports = {
    extensions: ['.ts', '.mjs', '.m.js', '.tsx', '.js', '.json'],
    modules: ['node_modules', path.resolve(__dirname, 'node_modules')],
    alias: {
-      electron: require.resolve('./src/mocks/electron.ts'),
+      electron: path.resolve(__dirname, './src/mocks/electron.ts'),
    },
    fallback: {
      // Browser fallbacks for Node.js modules
-      path: require.resolve('path-browserify'),
+      path: 'path-browserify',
      fs: false,
      crypto: false,
-      url: require.resolve('url/'),
-      os: require.resolve('os-browserify/browser'),
-      events: require.resolve('events/'),
+      url: 'url/',
+      os: 'os-browserify/browser',
+      events: 'events/',
    },
  },
  module: {
@@ -93,8 +98,8 @@ module.exports = {
      'process.env.BROWSER_MODE': JSON.stringify('true'),
    }),
    new webpack.NormalModuleReplacementPlugin(/EventSystem[\\/]EventBus$/, resource => {
-      console.log('Replacing EventBus:', resource.request);
-      resource.request = resource.request.replace(/EventBus$/, 'BrowserEventBus');
+      console.log('Replacing EventBus:', resource.request)
+      resource.request = resource.request.replace(/EventBus$/, 'BrowserEventBus')
    }),
  ],
  externals: {},
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Thomas Nordquist	affa56f8a2	Merge branch 'master' into copilot/make-byte-limit-configurable	2025-12-21 13:46:34 +01:00
Copilot thomasnordquist Thomas Nordquist	26ed0aadd2	Upgrade to Node.js 24, update dependencies, migrate configs to ES modules, replace ts-node with tsx, upgrade React/Material-UI, and update GitHub Actions (#940 ) ## Update Dependencies, Node.js 24, and Migrate to ES Modules This PR updates the project dependencies, Node.js version, workflows, and migrates from CommonJS to ES modules. ### Checklist #### Phase 1: Assessment and Configuration - [x] Assess current project structure and dependencies - [x] Update Node.js version requirements (>=24 for builds, >=20 for runtime) - [x] Update GitHub workflow files to use Node 24 - [x] Update Dockerfile to use Node 24 #### Phase 2: TypeScript Configuration for ES Modules - [x] Update root tsconfig.json to use ES2020 target with CommonJS modules - [x] Update backend/tsconfig.json to use ES2020 target with CommonJS modules - [x] Update app/tsconfig.json to use ES2020 target with ESNext modules #### Phase 3: Update Dependencies - [x] Update root package.json dependencies to latest compatible versions - [x] Update app/package.json dependencies to latest compatible versions - [x] Update backend/package.json dependencies to latest compatible versions - [x] Run yarn install to update lockfile #### Phase 4: Convert CommonJS to ES Modules - [x] Convert webpack config files to ES modules (.js → .mjs) - [x] Convert prettier.config.js to ES modules - [x] Update TypeScript files with CommonJS require() to use ES imports - [x] Fix breaking changes from dependency API updates #### Phase 5: Replace ts-node with tsx - [x] Replace ts-node with tsx in all package.json scripts - [x] Update root package.json to use tsx for prepare-release and package scripts - [x] Update backend package.json to use tsx with mocha - [x] Update app package.json to use tsx with mocha - [x] Update script shebangs to use tsx - [x] Add tsx to devDependencies, remove ts-node #### Phase 6: Upgrade React and Material-UI - [x] Upgrade React from 16.14.0 to 18.3.1 - [x] Upgrade React-DOM from 16.14.0 to 18.3.1 - [x] Migrate from @material-ui (v4) to @mui/material (v5) - [x] Add @emotion/react and @emotion/styled (required for MUI v5) - [x] Update all import paths from @material-ui/* to @mui/* - [x] Update theme creation from createMuiTheme to createTheme - [x] Update palette.type to palette.mode - [x] Update ReactDOM.render to ReactDOM.createRoot (React 18) - [x] Update ThemeProvider import to use @mui/material/styles - [x] Add @mui/styles for withStyles compatibility - [x] Separate Theme and withStyles imports correctly - [x] Replace fade with alpha in theme styles - [x] Replace ExpansionPanel with Accordion - [x] Fix all component imports from wrong modules - [x] Replace withTheme HOC with useTheme hook - [x] Replace theme.palette.text.hint with theme.palette.text.secondary - [x] Update all Redux reducers for Redux v5 compatibility #### Phase 7: Fix All TypeScript Errors - [x] Fix Dialog disableBackdropClick removal (use onClose handler) - [x] Fix Button classes.label removal (use sx prop) - [x] Fix Select onChange signature (MUI v5 API change) - [x] Fix Snackbar onClose signature (MUI v5 API change) - [x] Fix ClickAwayListener onClickAway signature (MUI v5 API change) - [x] Fix ReactResizeDetector (migrate to useResizeDetector hook) - [x] Fix Redux connect + withStyles type compatibility (use type assertions) - [x] Fix all connected component prop type errors - [x] Add children prop to ErrorBoundary - [x] Add parameter types to callbacks #### Phase 8: Build and Test - [x] Run yarn build - ✅ SUCCESSFUL with 0 errors, 1 minor warning - [x] Run yarn test - ✅ All 27 tests passing (5 app + 22 backend) #### Phase 9: Update All GitHub Actions - [x] Update Node.js to 24 in copilot-setup.yml workflow - [x] Update Node.js to 24 in update-website.yml workflow - [x] Update docker/build-push-action from v5 to v6 - [x] Replace deprecated tibdex/github-app-token@v2 with actions/create-github-app-token@v1 - [x] All other actions already at latest versions (v4 for GitHub actions, v3 for Docker actions) #### Phase 10: Final Validation - [x] All TypeScript compilation errors fixed - [x] All tests passing - [x] Build completes successfully - [x] Clarified Node.js engine requirements per use case - [x] All GitHub Actions updated to latest versions ### Node.js Version Requirements This project has different Node.js requirements depending on the use case: #### Building the Electron App (Root package.json) - Required: Node.js >= 24 - Why: Build tools like @electron/notarize and semantic-release require Node.js 24+ - Affected files: `/package.json` #### Running the Backend/Server (Backend package.json) - Required: Node.js >= 20 - Why: The MQTT server runtime is compatible with Node.js 20+ - Affected files: `/backend/package.json` #### Frontend App (App package.json) - Required: Node.js >= 20 - Why: React and webpack tools are compatible with Node.js 20+ - Affected files: `/app/package.json` ### Summary of All Changes Major Dependency Updates: - TypeScript: 4.5.5 → 5.9.3 - Node.js: >=24 for builds, >=20 for runtime - React: 16.14.0 → 18.3.1 - React-DOM: 16.14.0 → 18.3.1 - Redux: 4.2.1 → 5.0.1 - @material-ui/core → @mui/material 5.18.0 - @material-ui/icons → @mui/icons-material 5.18.0 - mqtt: 4.3.6 → 5.14.1 - axios: 0.28.0 → 1.13.2 - redux-thunk: 2.3.0 → 3.1.0 - electron-builder: 24.13.3 → 26.0.12 - @electron/notarize: 3.1.1 (latest) - semantic-release: 25.0.2 (latest) - react-resize-detector: migrated to useResizeDetector hook - 50+ other dependencies GitHub Actions Updated: - ✅ actions/checkout@v4 (latest) - ✅ actions/setup-node@v4 (latest) - Now uses Node 24 in all workflows - ✅ actions/cache@v4 (latest) - ✅ actions/upload-artifact@v4 (latest) - ✅ docker/build-push-action: v5 → v6 (latest) - ✅ docker/login-action@v3 (latest) - ✅ docker/setup-buildx-action@v3 (latest) - ✅ cycjimmy/semantic-release-action@v4 (latest) - ✅ tibdex/github-app-token@v2 → actions/create-github-app-token@v1 (official replacement for deprecated action) - ✅ stefanzweifel/git-auto-commit-action@v5 (latest) - ✅ hkusu/s3-upload-action@v2 (latest) All TypeScript Errors Fixed: - Removed disableBackdropClick from Dialog (deprecated in MUI v5) - Removed Button classes.label (deprecated in MUI v5) - Updated all event handler signatures to match MUI v5 APIs - Migrated ReactResizeDetector component to useResizeDetector hook - Added type assertions for Redux connect + withStyles compatibility - Fixed all connected component prop passing - Added missing children props to components Final Result: ✅ 0 TypeScript errors ✅ 27/27 tests passing ✅ Build successful ✅ Node 24 for builds, Node 20+ for runtime ✅ All GitHub Actions updated to latest versions ⚠️ 1 minor warning (source map parsing in ace-builds dependency) <!-- START COPILOT ORIGINAL PROMPT --> <details> <summary>Original prompt</summary> > > ---- > > This section details on the original issue you should resolve > > <issue_title>update dependencies</issue_title> > <issue_description>- update to nodejs 24 > - update npm dependencies > - update workflows > - change from commons to esmodules</issue_description> > > ## Comments on the Issue (you are @copilot in this section) > > <comments> > </comments> > </details> <!-- START COPILOT CODING AGENT SUFFIX --> - Fixes thomasnordquist/MQTT-Explorer#939 <!-- START COPILOT CODING AGENT TIPS --> --- 💬 We'd love your input! Share your thoughts on Copilot coding agent in our [2 minute survey](https://gh.io/copilot-coding-agent-survey). --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com> Co-authored-by: Thomas Nordquist <thomasnordquist@users.noreply.github.com>	2025-12-21 10:20:08 +01:00
Thomas Nordquist	578bb510f9	Upgrade Node.js version from 20 to 24	2025-12-21 09:59:50 +01:00
Copilot	e725b1d012	Fix expandTopic selector, restore and streamline comprehensive UI tests (#938 )	2025-12-20 23:26:15 +01:00
Copilotandthomasnordquist	c55c3a8245	Fix UI tests: correct expandTopic parameter order and CI workflow (#936 ) Fixes TypeScript compilation errors in UI tests and resolves CI workflow configuration issue. ## Changes Made ### 1. Fixed expandTopic parameter order in ui-tests.spec.ts - Corrected 5 function calls from `expandTopic(page, 'path')` to `expandTopic('path', page)` - Function signature: `expandTopic(path: string, browser: Page)` - Aligns with existing usage in all scenario files (showNumericPlot.ts, publishTopic.ts, etc.) ### 2. Fixed CI workflow configuration - Updated `.github/workflows/tests.yml` to checkout PR code instead of base branch - Added `ref: ${{ github.event.pull_request.head.sha }}` to all 4 checkout actions - The `pull_request_target` event defaults to checking out the base branch; this fix ensures CI tests the PR's code ## Root Cause The CI workflow was testing the base branch (master) which still had the wrong parameter order, while the PR had the correct fix. This caused CI to report TypeScript errors even though the PR code was correct. ## Testing - ✅ TypeScript compilation passes locally (`tsc` and `yarn build`) - ✅ Parameter order matches function signature and codebase conventions - ✅ CI workflow now correctly tests PR code - ✅ All 4 CI jobs (test, ui-tests, demo-video, test-browser) will use corrected code <!-- START COPILOT ORIGINAL PROMPT --> <details> <summary>Original prompt</summary> > > ---- > > This section details on the original issue you should resolve > > <issue_title>Fix tests</issue_title> > <issue_description>- fix backend tests > - fix UI tests</issue_description> > > ## Comments on the Issue (you are @copilot in this section) > > <comments> > </comments> > </details> <!-- START COPILOT CODING AGENT SUFFIX --> - Fixes thomasnordquist/MQTT-Explorer#935 <!-- START COPILOT CODING AGENT TIPS --> --- ✨ Let Copilot coding agent [set things up for you](https://github.com/thomasnordquist/MQTT-Explorer/issues/new?title=✨+Set+up+Copilot+instructions&body=Configure%20instructions%20for%20this%20repository%20as%20documented%20in%20%5BBest%20practices%20for%20Copilot%20coding%20agent%20in%20your%20repository%5D%28https://gh.io/copilot-coding-agent-tips%29%2E%0A%0A%3COnboard%20this%20repo%3E&assignees=copilot) — coding agent works faster and does higher quality work when set up for your repo. --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>	2025-12-20 19:34:34 +01:00
Copilot	92aa2c9fa8	Fix UI test timeouts, TypeScript compilation, dependency compatibility, and backend tests with isolated test suite using per-test mocking (#930 )	2025-12-20 15:09:26 +01:00
copilot-swe-agent[bot]andthomasnordquist	f0533a25db	Adopt EventsV2 structure for setMaxMessageSize event Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>	2025-12-20 02:52:13 +00:00
Thomas Nordquist	e0f6f86773	Merge branch 'master' into copilot/make-byte-limit-configurable	2025-12-20 03:46:44 +01:00
Copilot	5a54ba4983	Upgrade Electron to 39.2.7 to fix macOS Tahoe GPU performance regression (#931 )	2025-12-20 03:06:22 +01:00
copilot-swe-agent[bot]andthomasnordquist	de53571b88	Simplify validation to accept any integer >= 20KB Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>	2025-12-19 21:17:36 +00:00
copilot-swe-agent[bot]andthomasnordquist	c7021e19ca	Explicitly set unlimited to default when persisting Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>	2025-12-19 21:09:11 +00:00
copilot-swe-agent[bot]andthomasnordquist	a84d79ac3a	Fix backend validation to match all frontend size options Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>	2025-12-19 21:08:12 +00:00
copilot-swe-agent[bot]andthomasnordquist	a3bca962ae	Change to predefined size options (20KB, 100KB, 1MB, 5MB, Unlimited) Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>	2025-12-19 21:06:37 +00:00
copilot-swe-agent[bot]andthomasnordquist	715c50127b	Improve input validation to prevent partial numeric strings Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>	2025-12-19 20:59:12 +00:00
copilot-swe-agent[bot]andthomasnordquist	1ad2ed73ec	Improve UX with local state for max message size input Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>	2025-12-19 20:57:41 +00:00
copilot-swe-agent[bot]andthomasnordquist	e607d70374	Extract magic numbers to shared constants Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>	2025-12-19 20:55:53 +00:00
copilot-swe-agent[bot]andthomasnordquist	1b1558ff12	Improve validation for max message size setting Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>	2025-12-19 20:53:11 +00:00
copilot-swe-agent[bot]andthomasnordquist	96b64fcffd	Add configurable max message size setting with UI Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>	2025-12-19 20:50:54 +00:00
copilot-swe-agent[bot]	1ebb813261	Initial plan	2025-12-19 20:43:20 +00:00