Create test-specific mock and rewrite all tests to use expandTopic with per-test data mocking

Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>

.devcontainer/devcontainer.json

@@ -2,7 +2,7 @@
   "name": "MQTT Explorer Development",
   "dockerComposeFile": "docker-compose.yml",
   "service": "app",
-  "workspaceFolder": "/workspace/MQTT-Explorer",
+  "workspaceFolder": "/workspace",
 
   "customizations": {
     "vscode": {
@@ -15,6 +15,7 @@
       ],
       "settings": {
         "editor.formatOnSave": true,
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
         "typescript.tsdk": "node_modules/typescript/lib",
         "editor.codeActionsOnSave": {
           "source.fixAll.eslint": "explicit"
@@ -23,7 +24,7 @@
     }
   },
 
-  "forwardPorts": [3000, 8080, 1883, 5900, 6080],
+  "forwardPorts": [3000, 8080, 1883],
   "portsAttributes": {
     "3000": {
       "label": "MQTT Explorer Server",
@@ -36,29 +37,10 @@
     "1883": {
       "label": "MQTT Broker",
       "onAutoForward": "ignore"
-    },
-    "5900": {
-      "label": "VNC Server",
-      "onAutoForward": "ignore"
-    },
-    "6080": {
-      "label": "noVNC Web Client",
-      "onAutoForward": "notify"
     }
   },
 
   "postCreateCommand": "yarn install",
 
-  "postStartCommand": "sudo apt-get update && sudo apt-get install -y mosquitto xvfb x11vnc ffmpeg tmux python3 python3-pip && sudo pip3 install --break-system-packages websockify",
-
-  "features": {
-    "ghcr.io/devcontainers/features/common-utils:2": {
-      "installZsh": true,
-      "installOhMyZsh": true,
-      "upgradePackages": true
-    }
-  },
-
   "remoteUser": "node"
 }
-

.devcontainer/docker-compose.yml

@@ -2,9 +2,9 @@ version: '3.8'
 
 services:
   app:
-    image: mcr.microsoft.com/devcontainers/javascript-node:24
+    image: mcr.microsoft.com/devcontainers/javascript-node:20
     volumes:
-      - ..:/workspaces/MQTT-Explorer:cached
+      - ../..:/workspace:cached
     command: sleep infinity
     network_mode: service:mosquitto
     environment:
@@ -14,10 +14,8 @@ services:
   mosquitto:
     image: eclipse-mosquitto:2
     ports:
-      - '1883:1883'
-      - '3000:3000'
-      - '8080:8080'
-      - '5900:5900'
-      - '6080:6080'
+      - "1883:1883"
+      - "3000:3000"
+      - "8080:8080"
     volumes:
       - ./mosquitto.conf:/mosquitto/config/mosquitto.conf:ro

.dockerignore

@@ -1,64 +0,0 @@
-# Git
-.git
-.gitignore
-.github
-
-# Dependencies
-node_modules
-app/node_modules
-backend/node_modules
-
-# Build artifacts
-build
-dist
-app/dist
-
-# Testing
-coverage
-.nyc_output
-test-screenshot-*.png
-ui-test.mp4
-ui-test.gif
-
-# Development
-.vscode
-.devcontainer
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# OS
-.DS_Store
-Thumbs.db
-
-# IDE
-*.swp
-*.swo
-*~
-.idea
-
-# Documentation
-*.md
-!Readme.md
-LICENSE.md
-
-# CI/CD files
-.releaserc
-appveyor.yml
-
-# Misc
-res
-scripts
-docker
-icon.xcf
-greenkeeper.json
-prettier.config.js
-.prettierignore
-.eslintrc.json
-.cspell.json
-tslint.json
-mcp.json
-
-# Data directory (will be created in container)
-data

.github/copilot-instructions.md

@@ -1,93 +1,383 @@
-# copilot-instructions.md - Agent Long-Term Memory
+# GitHub Copilot Agent Instructions for MQTT Explorer
 
-## META-INSTRUCTIONS (IMMUTABLE)
+## Overview
 
-1. **Long-term memory**: If you learn something during a session that would save time in future sessions, add it to `.github/copilot-instructions.md`
-2. **Paper knowledge must go**: If something is no longer true, update or remove it immediately
-3. **Evaluate after every session**: Consider whether the instructions need updates based on what you learned
-4. **Concise and useful**: All information must be actionable, current, and concise
+MQTT Explorer is an Electron-based desktop application for exploring MQTT brokers. It provides a comprehensive UI for connecting to MQTT brokers, browsing topics, and analyzing message flows.
 
-## Test Commands
+## Technology Stack
 
-**Unit tests:**
-- `yarn test` - All unit tests (app + backend)
-- `yarn test:app` - Frontend tests only
-- `yarn test:backend` - Backend tests only
+- **Frontend**: React 16.x with Material-UI
+- **Backend**: Node.js with TypeScript
+- **Desktop Framework**: Electron 29.x
+- **MQTT Client**: [mqttjs](https://github.com/mqttjs/MQTT.js) v4.x
+- **State Management**: Redux with redux-thunk
+- **Build Tools**: webpack, TypeScript compiler
+- **Testing**: Mocha + Chai for unit tests, Playwright for MCP introspection tests
 
-**Integration tests:**
-- `yarn test:ui` - Browser tests (requires `yarn build` first)
-- `yarn test:demo-video` - UI recording (requires Xvfb, mosquitto, tmux, ffmpeg)
-- `yarn test:mcp` - Model Context Protocol tests
-- `yarn test:all` - All tests (unit + demo-video)
-- `./scripts/runBrowserTests.sh` - Browser mode UI tests (requires mosquitto service)
+## Project Setup
 
-**CI jobs:** `test`, `ui-tests`, `demo-video`, `test-browser`, `browser-ui-tests`
+### Building and Running
 
-**Important:** Browser UI tests require MQTT broker. In CI, GitHub Actions health checks ensure the mosquitto service is ready before tests run.
-
-## Browser Mode
-
-**Prerequisites:** Node.js ≥24, Yarn, Mosquitto broker (for testing)
-
-**Development (hot reload):**
 ```bash
-export MQTT_EXPLORER_USERNAME=admin MQTT_EXPLORER_PASSWORD=yourpass
-yarn dev:server
-# Backend: http://localhost:3000, Frontend: http://localhost:8080 (use this one)
+# Install dependencies
+yarn install
+
+# Build the project
+yarn build
+
+# Set password for browser testing
+export MQTT_EXPLORER_USERNAME=admin
+export MQTT_EXPLORER_PASSWORD=secretpassword
+
+# Start the application
+yarn start
+
+# Start in development mode
+yarn dev
 ```
 
-**Production:**
+### Running with MCP Introspection (for testing)
+
 ```bash
-yarn build:server
-export MQTT_EXPLORER_USERNAME=admin MQTT_EXPLORER_PASSWORD=yourpass
-yarn start:server  # http://localhost:3000
+# Build first
+yarn build
+
+# Start with MCP introspection enabled
+electron . --enable-mcp-introspection
+
+# Or with custom port
+electron . --enable-mcp-introspection --remote-debugging-port=9223
 ```
 
-**Build artifacts:** `dist/src/server.js`, `app/build/*.js`, `app/build/index.html`
+## Writing Tests
 
-## Debugging Browser Mode
+### Requirements for All Tests
 
-**DevTools checks:**
-- Console: JavaScript errors, CSP errors (security headers), WebSocket issues
-- Network: Static asset loading, WebSocket status, API auth
+1. **Tests MUST be deterministic** - They should produce the same results every time they run
+2. **Tests MUST be independent** - Each test should be able to run in isolation without depending on other tests
+3. **Include screenshots** - Visual verification is required for UI changes
+4. **Handle asynchronous operations properly** - This is an MQTT message queue tool
 
-**Common issues:**
-- **Blank page/CSP errors:** Add `'unsafe-eval'` to `scriptSrc` in `src/server.ts` helmet config
-- **Auth loop:** WebSocket auth failing - check Network → WS → Messages and server logs
-- **Theme errors:** Verify both ThemeProvider and LegacyThemeProvider in `app/src/index.tsx`
+### Best Practices for UI Tests
 
-**Expected warnings (non-fatal):**
-- React 18 + Material-UI v5 type warnings
-- IpcRendererEventBus errors (no Electron IPC in browser mode)
-- MUI locale, componentWillReceiveProps, ACE editor warnings
+#### 1. Use Given-When-Then Pattern
+Structure tests with clear Given-When-Then comments to make them readable:
 
-**WebSocket debugging:**
-```bash
-node dist/src/server.js 2>&1 | tee server.log
-# Check DevTools → Network → WS → Messages for handshake
-# CORS: check ALLOWED_ORIGINS env var
+```typescript
+it('Given a JSON message sent to topic foo/bar/baz, the tree should display nested topics', async function () {
+  // Given: Mock MQTT publishes JSON to foo/bar/baz
+  // When: We wait for the topic to appear in the tree
+  // Then: Topic hierarchy should be visible (foo -> bar -> baz)
+})
 ```
 
-**Security notes:**
-- `unsafe-eval` in CSP required for webpack (security tradeoff)
-- Never hardcode credentials (use env vars)
-- Production: use HTTPS with reverse proxy
-- Rate limit: 5 auth attempts/15min/IP
-- File upload limit: 16MB
+#### 2. Wait for Elements, Don't Use Fixed Delays
+Prefer `waitFor` over `sleep` whenever possible:
 
-**Key files:**
-- `src/server.ts` - Express server, security middleware
-- `app/webpack.browser.config.mjs` - Browser webpack config
-- `app/src/browserEventBus.ts` - Socket.io client
-- `app/src/components/BrowserAuthWrapper.tsx` - Auth dialog
-- `app/src/index.tsx` - React entry, theme providers
+```typescript
+// ✓ Good: Wait for specific element
+const topic = await page.locator('span[data-test-topic="kitchen"]')
+await topic.waitFor({ state: 'visible', timeout: 5000 })
 
-## Styling Conventions
+// ✗ Bad: Fixed delay without verification
+await sleep(5000)
+```
 
-When modifying or creating UI components, follow the styling patterns documented in <a>STYLING.md</a>.
+#### 3. Use Meaningful Assertions
+Every test should have explicit assertions that verify the expected state:
 
-**Key points for AI agents:**
-- Use Material-UI (MUI) v7 components with `withStyles` HOC for styling
-- Access theme colors via `theme.palette.*`, spacing via `theme.spacing()`, typography via `theme.typography.*`
-- Support both light and dark modes with theme-conditional styling
-- Import Material-UI colors: `import { blueGrey, amber, green, red } from '@mui/material/colors'`
+```typescript
+// ✓ Good: Explicit assertion with meaningful message
+const treeNodes = await page.locator('[class*="TreeNode"]')
+const count = await treeNodes.count()
+expect(count).to.be.greaterThan(0, 'Topic tree should contain nodes')
+
+// ✗ Bad: No assertion, only screenshot
+await page.screenshot({ path: 'test.png' })
+```
+
+#### 4. Test Data-Driven Scenarios
+Write tests that describe the data flow:
+
+```typescript
+it('Given messages sent to livingroom/lamp/state and livingroom/lamp/brightness, both should appear under livingroom/lamp', async function () {
+  // Test implementation verifies the specific data flow
+})
+```
+
+#### 5. Use Data Test Attributes
+Leverage `data-test-*` attributes for reliable selectors:
+
+```typescript
+// ✓ Good: Use data-test attributes
+const topic = await page.locator('span[data-test-topic="kitchen"]')
+
+// ⚠ Acceptable: Use role/text when data attributes aren't available
+const button = await page.locator('//button/span[contains(text(),"Connect")]')
+
+// ✗ Bad: Rely on CSS classes that may change
+const topic = await page.locator('.MuiTreeItem-label')
+```
+
+#### 6. Verify Multiple Aspects
+Test should verify both state and UI:
+
+```typescript
+// Verify the action completed
+const isVisible = await disconnectButton.isVisible()
+expect(isVisible).to.be.true
+
+// Capture screenshot for visual verification
+await page.screenshot({ path: 'test-screenshot-connection.png' })
+```
+
+#### 7. Handle MQTT Asynchronous Nature
+Account for message propagation time:
+
+```typescript
+// Publish message
+await mockClient.publish('topic/name', 'value')
+
+// Wait for UI to update
+await page.locator(`text="value"`).waitFor({ timeout: 5000 })
+
+// Verify state
+const value = await page.textContent('.message-value')
+expect(value).toBe('value')
+```
+
+### Handling MQTT Asynchronous Operations
+
+MQTT is inherently asynchronous. When writing tests:
+
+- **Wait for message propagation**: Use proper wait strategies (e.g., `await page.waitForSelector()`, `await sleep()`)
+- **Don't assume immediate updates**: Messages take time to send, receive, and update the UI
+- **Use event-based waiting**: Wait for specific UI elements or state changes rather than fixed timeouts when possible
+- **Account for network latency**: MQTT broker communication involves network round trips
+
+### Example Test Pattern
+
+```typescript
+// 1. Perform action (e.g., publish message)
+await publishMessage(topic, payload)
+
+// 2. Wait for UI to update (not just arbitrary sleep)
+await page.waitForSelector(`text="${expectedValue}"`, { timeout: 5000 })
+
+// 3. Verify state
+const value = await page.textContent('.message-value')
+expect(value).toBe(expectedValue)
+
+// 4. Take screenshot for verification
+await page.screenshot({ path: 'test-result.png' })
+```
+
+### Running Tests
+
+```bash
+# Run all tests
+yarn test
+
+# Run specific test suites
+yarn test:app
+yarn test:backend
+yarn test:mcp
+
+# Run linters
+yarn lint
+yarn lint:fix
+```
+
+### Running UI Tests (yarn test:ui)
+
+The UI tests require specific setup in the test environment:
+
+**Prerequisites:**
+1. **Xvfb (X Virtual Framebuffer)** - Required for headless Electron testing
+   ```bash
+   # Start Xvfb on display :99
+   Xvfb :99 -screen 0 1024x720x24 -ac &
+   export DISPLAY=:99
+   ```
+
+2. **Mosquitto MQTT Broker** - Required for MQTT message testing
+   ```bash
+   # Install mosquitto
+   sudo apt-get install -y mosquitto mosquitto-clients
+   
+   # Start mosquitto service
+   sudo systemctl start mosquitto
+   
+   # Verify it's running on port 1883
+   sudo systemctl status mosquitto
+   ```
+
+3. **@types/node** - Required for TypeScript compilation
+   ```bash
+   yarn add -D @types/node
+   ```
+
+**Running UI Tests:**
+```bash
+# Build the application first
+yarn build
+
+# Run UI tests with proper display
+DISPLAY=:99 yarn test:ui
+```
+
+**Common Issues:**
+- **"Timeout exceeded" in before hook**: Mosquitto is not running or not accessible on port 1883
+- **"Cannot find type definition file for 'node'"**: Run `yarn add -D @types/node`
+- **Electron fails to launch**: Xvfb is not running or DISPLAY variable not set
+- **Tests hang**: Check if old Electron/mosquitto processes are still running and kill them
+
+**Environment Cleanup:**
+```bash
+# Kill old Electron processes
+ps aux | grep electron | grep -v grep | awk '{print $2}' | xargs kill -9 2>/dev/null
+
+# Kill old mosquitto processes (if running custom instance)
+ps aux | grep mosquitto | grep -v grep | awk '{print $2}' | xargs kill -9 2>/dev/null
+```
+
+## MCP Introspection Testing
+
+The project supports MCP (Model Context Protocol) for automated testing with Playwright:
+
+- Use `yarn test:mcp` to run automated UI tests
+- Tests launch the app with remote debugging enabled on port 9222
+- Connect to `http://localhost:9222` via Chrome DevTools Protocol
+
+## Project Structure
+
+- `app/` - Frontend React application
+- `backend/` - Backend models, tests, and connection management
+- `src/` - Electron main process and bindings
+- `src/spec/` - Test specifications including MCP introspection tests
+
+## Code Style and Formatting
+
+### Linting
+
+The project uses TSLint with Airbnb config and Prettier for code formatting:
+
+```bash
+# Run all linters
+yarn lint
+
+# Run linters individually
+yarn lint:prettier    # Check Prettier formatting
+yarn lint:tslint      # Check TSLint rules
+yarn lint:spellcheck  # Check spelling in code
+
+# Auto-fix issues
+yarn lint:fix         # Fix TSLint and Prettier issues
+yarn lint:tslint:fix  # Fix TSLint issues only
+yarn lint:prettier:fix # Fix Prettier issues only
+```
+
+### Code Style Rules
+
+- **Semicolons**: Never use semicolons (enforced by TSLint and Prettier)
+- **Quotes**: Single quotes for strings
+- **Indentation**: 2 spaces
+- **Line length**: Maximum 120 characters (Prettier) / 200 characters (TSLint)
+- **Arrow functions**: No parentheses for single parameters (`x => x + 1`)
+- **Trailing commas**: Required for multiline objects and arrays (ES5 compatible)
+
+### TypeScript Guidelines
+
+- Enable strict null checks and no implicit any
+- Use TypeScript interfaces for data structures
+- Prefer `const` over `let`, avoid `var`
+- Use type inference when possible, explicit types when clarity is needed
+
+## Dependency Management
+
+### Adding Dependencies
+
+```bash
+# Add to root project
+yarn add <package-name>
+
+# Add to app (frontend)
+cd app && yarn add <package-name>
+
+# Add to backend
+cd backend && yarn add <package-name>
+
+# Add dev dependencies
+yarn add -D <package-name>
+```
+
+### Important Dependency Notes
+
+- Main dependencies are in the root `package.json`
+- Frontend React app has its own dependencies in `app/package.json`
+- Backend models and logic have dependencies in `backend/package.json`
+- Always use `--frozen-lockfile` in CI to ensure reproducible builds
+- Run `yarn install` after pulling changes that modify `yarn.lock`
+
+## Debugging
+
+### Development Mode
+
+```bash
+# Start with hot reload for frontend
+yarn dev
+
+# This runs two processes in parallel:
+# 1. webpack-dev-server for the React app (port varies)
+# 2. Electron in development mode with the --development flag
+```
+
+### Debugging TypeScript
+
+- Source maps are enabled in `tsconfig.json`
+- Use `ts-node` for running TypeScript files directly
+- Backend tests can be debugged with: `cd backend && yarn test-inspect`
+
+### Common Issues
+
+- **Build fails**: Clear `dist/` and `app/build/` directories, then rebuild
+- **Electron won't start**: Ensure `yarn build` completed successfully
+- **Tests fail**: Check if MQTT broker (mosquitto) is running for integration tests
+- **UI not updating**: In dev mode, ensure webpack-dev-server is running
+
+## Deployment and Packaging
+
+### Creating Releases
+
+```bash
+# Prepare release (updates version, changelog)
+yarn prepare-release
+
+# Package the application for distribution
+yarn package
+
+# Package with Docker (for consistent builds)
+yarn package-with-docker
+```
+
+### Release Workflow
+
+- **Beta releases**: Create PR to `beta` branch with "feat:" or "fix:" commits
+- **Production releases**: Create PR to `release` branch with "feat:" or "fix:" commits
+- Semantic release automatically handles versioning and changelog
+- Builds are created for Windows, macOS, and Linux
+
+### Build Artifacts
+
+- Output directory: `build/`
+- Supported formats: DMG (macOS), EXE/NSIS (Windows), AppImage/Snap (Linux), AppX (Windows Store)
+- Code signing is configured via `res/` directory certificates and provisioning profiles
+
+## Important Notes
+
+- Always run `yarn build` before starting the application
+- The app uses Electron (see `package.json` for version)
+- MQTT communication is handled via [mqttjs](https://github.com/mqttjs/MQTT.js)
+- All code changes should pass linting (`yarn lint`)
+- Node.js version requirement: >= 20
+- The project uses workspace-like structure with separate package.json files for app and backend

.github/workflows/build-dockerfile.yml

@@ -22,7 +22,7 @@ jobs:
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
       - name: Build and push
-        uses: docker/build-push-action@v6
+        uses: docker/build-push-action@v5
         with:
           context: .
           push: true

.github/workflows/copilot-setup.yml

@@ -1,41 +1,25 @@
-name: 'Copilot Setup Steps'
+name: Copilot Agent Setup
 
-# Automatically run the setup steps when they are changed to allow for easy validation, and
-# allow manual testing through the repository's "Actions" tab
 on:
-  workflow_dispatch:
-  push:
-    paths:
-      - .github/workflows/copilot-setup-steps.yml
-  pull_request:
-    paths:
-      - .github/workflows/copilot-setup-steps.yml
+  workflow_call:
 
 jobs:
-  copilot-setup-steps:
+  setup:
     runs-on: ubuntu-latest
-    env:
-      TESTS_MQTT_BROKER_HOST: localhost
-      TESTS_MQTT_BROKER_PORT: 1883
-
+    
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
-
-      - name: Install system dependencies
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y xvfb mosquitto
-
+        uses: actions/checkout@v4
+      
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '24'
-
+          node-version: '20'
+      
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
-
+      
       - name: Cache yarn dependencies
         uses: actions/cache@v4
         id: yarn-cache
@@ -47,6 +31,9 @@ jobs:
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-yarn-
-
+      
       - name: Install dependencies
-        run: yarn
+        run: yarn install --frozen-lockfile
+      
+      - name: Build project
+        run: yarn build

.github/workflows/docker-browser.yml

@@ -1,220 +0,0 @@
-name: Docker Browser Build
-
-on:
-  push:
-    branches:
-      - master
-      - release
-      - beta
-    paths:
-      - 'Dockerfile.browser'
-      - 'src/server.ts'
-      - 'src/AuthManager.ts'
-      - 'app/**'
-      - 'backend/**'
-      - 'package.json'
-      - 'yarn.lock'
-      - '.github/workflows/docker-browser.yml'
-      - 'tsconfig.json'
-      - 'events/**'
-  schedule:
-    # Run every two weeks (1st and 15th of each month) at 2:00 AM UTC
-    - cron: '0 2 1,15 * *'
-  workflow_dispatch:
-
-jobs:
-  build-and-test:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      packages: write
-      id-token: write
-
-    env:
-      TESTS_MQTT_BROKER_HOST: localhost
-      TESTS_MQTT_BROKER_PORT: 1883
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Install mosquitto
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y mosquitto
-
-      - name: Start mosquitto
-        run: mosquitto -c /mosquitto/config/mosquitto.conf -d || mosquitto -d
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Log in to GitHub Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Extract metadata (tags, labels) for Docker
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: ghcr.io/${{ github.repository }}
-          tags: |
-            type=ref,event=branch
-            type=sha,prefix={{branch}}-
-            type=raw,value=latest,enable={{is_default_branch}}
-
-      - name: Build Docker image
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          file: ./Dockerfile.browser
-          platforms: linux/amd64
-          push: false
-          load: true
-          tags: mqtt-explorer:test
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-
-      - name: Test Docker image - Basic startup
-        run: |
-          # Start container with test credentials
-          docker run -d \
-            --name mqtt-explorer-test \
-            -p 3000:3000 \
-            -e MQTT_EXPLORER_USERNAME=test \
-            -e MQTT_EXPLORER_PASSWORD=test123 \
-            -e PORT=3000 \
-            mqtt-explorer:test
-
-          # Wait for server to be ready (max 60 seconds)
-          echo "Waiting for server to start..."
-          for i in {1..60}; do
-            if curl -f http://localhost:3000 > /dev/null 2>&1; then
-              echo "Server started successfully after $i seconds"
-              break
-            fi
-            if [ $i -eq 60 ]; then
-              echo "Server failed to start within 60 seconds"
-              docker logs mqtt-explorer-test
-              exit 1
-            fi
-            sleep 1
-          done
-
-      - name: Test Docker image - Health check
-        run: |
-          # Wait for health check to pass
-          echo "Waiting for health check to pass..."
-          for i in {1..30}; do
-            health=$(docker inspect --format='{{.State.Health.Status}}' mqtt-explorer-test)
-            if [ "$health" = "healthy" ]; then
-              echo "Container is healthy"
-              break
-            fi
-            if [ $i -eq 30 ]; then
-              echo "Health check failed"
-              docker logs mqtt-explorer-test
-              exit 1
-            fi
-            sleep 2
-          done
-
-      - name: Test Docker image - Verify response
-        run: |
-          # Test that the server responds with HTML
-          response=$(curl -s http://localhost:3000)
-          if echo "$response" | grep -q "MQTT Explorer"; then
-            echo "Server is serving the application correctly"
-          else
-            echo "Server response does not contain expected content"
-            echo "Response: $response"
-            exit 1
-          fi
-
-      - name: Test Docker image - Verify data persistence
-        run: |
-          # Check that data directory was created
-          docker exec mqtt-explorer-test sh -c '[ -d /app/data ] && echo "Data directory exists"'
-
-      - name: Clean up test container
-        if: always()
-        run: |
-          docker stop mqtt-explorer-test || true
-          docker rm mqtt-explorer-test || true
-
-      - name: Check Docker image size
-        run: |
-          echo "### Docker Image Size" >> $GITHUB_STEP_SUMMARY
-          docker images mqtt-explorer:test --format "table {{.Repository}}\t{{.Tag}}\t{{.Size}}" >> $GITHUB_STEP_SUMMARY
-          
-          # Get size in bytes for detailed reporting
-          SIZE_BYTES=$(docker inspect mqtt-explorer:test --format='{{.Size}}')
-          SIZE_MB=$((SIZE_BYTES / 1024 / 1024))
-          echo "" >> $GITHUB_STEP_SUMMARY
-          echo "**Image size**: ${SIZE_MB} MB (${SIZE_BYTES} bytes)" >> $GITHUB_STEP_SUMMARY
-          echo "Image size: ${SIZE_MB} MB"
-
-      - name: Setup Node.js for browser tests
-        uses: actions/setup-node@v4
-        with:
-          node-version: '24'
-          cache: 'yarn'
-
-      - name: Install dependencies for browser tests
-        run: yarn install --frozen-lockfile
-
-      - name: Install Playwright Browsers
-        run: npx playwright install --with-deps chromium
-
-      - name: Start Docker container for browser tests
-        run: |
-          docker run -d \
-            --name mqtt-explorer-browser-test \
-            --network host \
-            -e MQTT_EXPLORER_USERNAME=test \
-            -e MQTT_EXPLORER_PASSWORD=test123 \
-            -e PORT=3000 \
-            mqtt-explorer:test
-          
-          # Wait for server to be ready
-          echo "Waiting for Docker container to be ready..."
-          timeout 60 bash -c 'until curl -f http://localhost:3000; do sleep 1; done'
-          echo "Docker container is ready"
-
-      - name: Run browser test suite
-        run: |
-          yarn test:browser
-        env:
-          MQTT_EXPLORER_USERNAME: test
-          MQTT_EXPLORER_PASSWORD: test123
-          BROWSER_MODE_URL: http://localhost:3000
-
-      - name: Clean up browser test container
-        if: always()
-        run: |
-          docker logs mqtt-explorer-browser-test || true
-          docker stop mqtt-explorer-browser-test || true
-          docker rm mqtt-explorer-browser-test || true
-
-      - name: Build and push Docker image
-        id: build
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          file: ./Dockerfile.browser
-          platforms: linux/amd64,linux/arm64,linux/arm/v7
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-
-      - name: Generate artifact attestation
-        uses: actions/attest-build-provenance@v1
-        with:
-          subject-name: ghcr.io/${{ github.repository }}
-          subject-digest: ${{ steps.build.outputs.digest }}
-          push-to-registry: true

.github/workflows/platform-builds.yml

@@ -28,14 +28,14 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 24
+          node-version: 20
       - run: npm install -g yarn
       - run: yarn
       - id: create_token # get ReleaseBot access token
-        uses: actions/create-github-app-token@v1
+        uses: tibdex/github-app-token@v2
         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
@@ -50,7 +50,4 @@ jobs:
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           SNAPCRAFT_STORE_CREDENTIALS: ${{ secrets.SNAPCRAFT_STORE_CREDENTIALS }}
-          APPLE_ID: ${{ secrets.APPLE_ID }}
-          APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLE_APP_SPECIFIC_PASSWORD }}
-          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
   

.github/workflows/tests.yml

@@ -12,8 +12,6 @@ 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
@@ -21,34 +19,27 @@ jobs:
       - name: Test
         run: yarn test
 
-  browser-ui-tests:
+  ui-tests:
     runs-on: ubuntu-latest
     container:
       image: ghcr.io/thomasnordquist/mqtt-explorer-ui-tests:latest
       volumes:
         - ./:/app
       options: --user root
-    env:
-      TESTS_MQTT_BROKER_HOST: mosquitto
-      TESTS_MQTT_BROKER_PORT: 1883
     steps:
       - uses: actions/checkout@v4
-        with:
-          ref: ${{ github.event.pull_request.head.sha }}
-      - name: Start mosquitto
-        run: mosquitto -c /etc/mosquitto/conf.d/default.conf -d
       - name: Install Packages
         run: yarn install --frozen-lockfile
-      - name: Build Browser Mode
-        run: yarn build:server
-      - name: Run Browser UI Tests
+      - name: Build
+        run: yarn build
+      - name: Run UI Tests
         timeout-minutes: 10
-        run: ./scripts/runBrowserTests.sh
+        run: ./scripts/runUiTests.sh
       - name: Upload Test Screenshots
         if: always()
         uses: actions/upload-artifact@v4
         with:
-          name: browser-test-screenshots
+          name: ui-test-screenshots
           path: |
             test-screenshot-*.png
           retention-days: 30
@@ -60,15 +51,8 @@ jobs:
       volumes:
         - ./:/app
       options: --user root
-    env:
-      TESTS_MQTT_BROKER_HOST: localhost
-      TESTS_MQTT_BROKER_PORT: 1883
     steps:
       - uses: actions/checkout@v4
-        with:
-          ref: ${{ github.event.pull_request.head.sha }}
-      - name: Start mosquitto
-        run: mosquitto -c /etc/mosquitto/conf.d/default.conf -d
       - name: Install Packages
         run: yarn install --frozen-lockfile
       - name: Build
@@ -77,118 +61,41 @@ jobs:
         run: yarn ui-test
       - name: Post-processing
         run: ./scripts/prepareVideo.sh
-      - name: Generate unique base path
-        id: basepath
-        run: |
-          TIMESTAMP=$(date +%Y%m%d-%H%M%S)
-          BASEPATH="pr-${{ github.event.pull_request.number }}-${TIMESTAMP}"
-          echo "basepath=${BASEPATH}" >> $GITHUB_OUTPUT
-      - name: Install AWS CLI v2
-        run: |
-          apt-get update && apt-get install -y unzip
-          curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
-          unzip -q awscliv2.zip
-          ./aws/install
-          rm -rf aws awscliv2.zip
-      - name: Configure AWS credentials
-        uses: aws-actions/configure-aws-credentials@v4
+      - uses: hkusu/s3-upload-action@v2
+        id: upload # specify some ID for use in subsequent steps
         with:
           aws-access-key-id: ${{ vars.AWS_KEY_ID }}
           aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
           aws-region: 'eu-central-1'
-      - name: Upload full video to S3
-        env:
-          AWS_BUCKET: ${{ vars.AWS_BUCKET }}
-          BASEPATH: ${{ steps.basepath.outputs.basepath }}
-        run: |
-          # Upload GIF
-          aws s3api put-object \
-            --bucket ${AWS_BUCKET} \
-            --key artifacts/${BASEPATH}/ui-test.gif \
-            --body ./ui-test.gif \
-            --content-type image/gif
-          
-          # Upload MP4
-          aws s3api put-object \
-            --bucket ${AWS_BUCKET} \
-            --key artifacts/${BASEPATH}/ui-test.mp4 \
-            --body ./ui-test.mp4 \
-            --content-type video/mp4
-      - name: Upload video segments to S3
-        env:
-          AWS_BUCKET: ${{ vars.AWS_BUCKET }}
-          BASEPATH: ${{ steps.basepath.outputs.basepath }}
-        shell: bash
-        run: |
-          # Upload all GIF segment files if they exist
-          shopt -s nullglob  # Make glob return empty list if no matches
-          for segment in segment-*.gif; do
-            echo "Uploading $segment..."
-            aws s3api put-object \
-              --bucket ${AWS_BUCKET} \
-              --key artifacts/${BASEPATH}/${segment} \
-              --body ./${segment} \
-              --content-type image/gif
-          done
-          shopt -u nullglob  # Restore default behavior
-      - name: Generate file URLs
-        id: fileurl
-        env:
-          AWS_BUCKET: ${{ vars.AWS_BUCKET }}
-          BASEPATH: ${{ steps.basepath.outputs.basepath }}
-        run: |
-          BASE_URL="https://${AWS_BUCKET}.s3.eu-central-1.amazonaws.com/artifacts/${BASEPATH}"
-          echo "base-url=${BASE_URL}" >> $GITHUB_OUTPUT
-          echo "Uploaded to: ${BASE_URL}"
-      - name: Generate markdown summary
-        id: markdown
-        env:
-          BASE_URL: ${{ steps.fileurl.outputs.base-url }}
-        run: |
-          MARKDOWN=$(node ./scripts/generateMarkdownSummary.js "${BASE_URL}")
-          echo "markdown<<EOF" >> $GITHUB_OUTPUT
-          echo "$MARKDOWN" >> $GITHUB_OUTPUT
-          echo "EOF" >> $GITHUB_OUTPUT
-      - name: Add to workflow summary
-        env:
-          MARKDOWN: ${{ steps.markdown.outputs.markdown }}
-        run: |
-          echo "$MARKDOWN" >> $GITHUB_STEP_SUMMARY
-      - name: Post video to PR
-        uses: actions/github-script@v7
-        env:
-          MARKDOWN: ${{ steps.markdown.outputs.markdown }}
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            const markdown = process.env.MARKDOWN;
-            github.rest.issues.createComment({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              issue_number: context.issue.number,
-              body: markdown
-            });
+          aws-bucket: ${{ vars.AWS_BUCKET }}
+          file-path: './ui-test.gif'
+          content-type: image/gif
+          output-file-url: 'true'
+      - name: Show URL
+        run: echo '${{ steps.upload.outputs.file-url }}'
+        id: artifact-upload-step
+      - run: echo '<picture><img src="${{ steps.upload.outputs.file-url }}"></picture>' >> $GITHUB_STEP_SUMMARY
 
   test-browser:
     runs-on: ubuntu-latest
-    container:
-      image: ghcr.io/thomasnordquist/mqtt-explorer-ui-tests:latest
-      volumes:
-        - ./:/app
-      options: --user root
-    env:
-      TESTS_MQTT_BROKER_HOST: localhost
-      TESTS_MQTT_BROKER_PORT: 1883
+    services:
+      mosquitto:
+        image: eclipse-mosquitto:2
+        ports:
+          - 1883:1883
+        options: >-
+          --health-cmd "mosquitto_sub -t '$SYS/#' -C 1"
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
     steps:
       - uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
         with:
-          ref: ${{ github.event.pull_request.head.sha }}
-      - name: Start mosquitto
-        run: mosquitto -c /etc/mosquitto/conf.d/default.conf -d
+          node-version: '20'
       - name: Install Dependencies
         run: yarn install --frozen-lockfile
-      - name: Install Playwright Browsers
-        run: npx playwright install --with-deps chromium
       - name: Build Browser Mode
         run: yarn build:server
       - name: Test App

.github/workflows/update-website.yml

@@ -11,7 +11,7 @@ jobs:
           ref: gh-pages
       - uses: actions/setup-node@v4
         with:
-          node-version: '24'
+          node-version: 20
       - run: npm install
       - run: npm run readme
       - uses: stefanzweifel/git-auto-commit-action@v5

.gitignore

@@ -17,22 +17,3 @@ test-mcp-introspection.js
 
 /data
 test-screenshot-*.png
-test-expand-*.png
-browser-debug-screenshot.png
-
-app/.webpack-cache
-
-# Temporary files
-/tmp
-
-# Demo video artifacts
-scenes.json
-segment-*.mp4
-segment-*.gif
-ui-test.mp4
-ui-test.gif
-app.mp4
-app2.mp4
-app720.gif
-qrawvideorgb24.yuv
-intro.png

BROWSER_MODE.md

@@ -112,120 +112,6 @@ Both Electron IPC and Socket.io implement the same `EventBusInterface`, allowing
 
 ## Security Considerations
 
-### Production Deployment
-
-**CRITICAL**: The following security measures must be implemented for production deployments:
-
-#### 1. HTTPS/TLS Encryption
-Always use HTTPS in production to protect credentials and MQTT data in transit:
-
-```bash
-# Use a reverse proxy like nginx or Apache with TLS
-# Example nginx configuration:
-server {
-    listen 443 ssl http2;
-    server_name mqtt-explorer.example.com;
-    
-    ssl_certificate /path/to/cert.pem;
-    ssl_certificate_key /path/to/key.pem;
-    
-    location / {
-        proxy_pass http://localhost:3000;
-        proxy_http_version 1.1;
-        proxy_set_header Upgrade $http_upgrade;
-        proxy_set_header Connection "upgrade";
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-    }
-}
-```
-
-#### 2. Environment Variables for Credentials
-**NEVER** use generated credentials in production. Always set secure credentials via environment variables:
-
-```bash
-export MQTT_EXPLORER_USERNAME=your_secure_username
-export MQTT_EXPLORER_PASSWORD=your_strong_password_min_12_chars
-export NODE_ENV=production
-yarn start:server
-```
-
-#### 3. CORS Configuration
-Configure allowed origins instead of using the wildcard (`*`):
-
-```bash
-# Single origin
-export ALLOWED_ORIGINS=https://mqtt-explorer.example.com
-
-# Multiple origins (comma-separated)
-export ALLOWED_ORIGINS=https://app1.example.com,https://app2.example.com
-
-yarn start:server
-```
-
-In production with `NODE_ENV=production`, wildcard CORS is automatically disabled for security.
-
-#### 4. Network Security
-- Deploy behind a firewall or VPN
-- Use IP whitelisting if possible
-- Implement network-level rate limiting
-- Monitor for suspicious connection patterns
-
-#### 5. File Upload Security
-The server implements several protections against malicious file uploads:
-- Maximum file size: 16MB (configurable via `MAX_FILE_SIZE` constant)
-- Path traversal protection via filename sanitization
-- Files stored in isolated directories
-- Real path validation to prevent directory escapes
-
-#### 6. Authentication Security
-The server implements multiple layers of authentication security:
-- **Password Hashing**: bcrypt with 10 rounds
-- **Timing Attack Protection**: Constant-time string comparison for usernames
-- **Rate Limiting**: Maximum 5 failed attempts per IP per 15 minutes
-- **Session Tracking**: Failed attempts are tracked per client IP
-- **No Credential Logging**: In production mode, credentials are not logged
-
-#### 7. HTTP Security Headers
-The server uses helmet.js to set security headers:
-- Content Security Policy (CSP)
-- HTTP Strict Transport Security (HSTS) in production
-- X-Content-Type-Options: nosniff
-- X-Frame-Options: DENY
-- X-XSS-Protection
-
-### Security Best Practices
-
-1. **Rotate Credentials Regularly**: Change authentication credentials periodically
-2. **Monitor Logs**: Watch for authentication failures and unusual patterns
-3. **Keep Dependencies Updated**: Run `yarn audit` regularly
-4. **Limit Network Exposure**: Don't expose the server directly to the internet
-5. **Use Strong Passwords**: Minimum 12 characters with mixed case, numbers, and symbols
-6. **Enable Logging**: Monitor access logs and error logs
-7. **Regular Backups**: Back up configuration and certificate data
-8. **Principle of Least Privilege**: Run the server with minimal required permissions
-
-### Vulnerability Reporting
-
-If you discover a security vulnerability, please report it via:
-- GitHub Security Advisories
-- Email to the maintainer
-- Do NOT create public issues for security vulnerabilities
-
-### Security Audit Log
-
-- **2024-12**: Initial security review and hardening
-  - Added helmet.js for HTTP security headers
-  - Implemented rate limiting for authentication
-  - Added path traversal protection
-  - Implemented constant-time comparison for credentials
-  - Added input validation and size limits
-  - Removed credential logging in production
-  - Added configurable CORS origins
-  - Created comprehensive security test suite
-
-## Security Considerations (Legacy)
-
 1. **HTTPS**: For production, always use HTTPS to encrypt credentials and MQTT data
 2. **Authentication**: Keep credentials secure and rotate them regularly
 3. **Network**: Ensure the server is on a trusted network or behind a firewall

CI_CD.md

@@ -10,57 +10,6 @@ MQTT Explorer uses GitHub Actions for continuous integration and testing. The pi
 
 This workflow runs on pull requests to `master`, `beta`, and `release` branches.
 
-### Docker Browser Build Workflow (`.github/workflows/docker-browser.yml`)
-
-This workflow builds and publishes a Docker image for the browser mode.
-
-**Triggers**:
-- Push to `master`, `beta`, or `release` branches (when relevant files change)
-- Schedule: Runs every two weeks (1st and 15th of each month at 2:00 AM UTC)
-- Manual trigger via workflow_dispatch
-
-**Platforms**: 
-- linux/amd64 (x86-64)
-- linux/arm64 (Raspberry Pi 3/4/5, Apple Silicon)
-- linux/arm/v7 (Raspberry Pi 2/3)
-
-**Image Registry**: GitHub Container Registry (ghcr.io/thomasnordquist/mqtt-explorer)
-
-**Tags**:
-- `latest` - Latest build from master branch
-- `master` - Latest build from master
-- `beta` - Latest build from beta branch
-- `release` - Latest build from release branch
-- `<branch>-<sha>` - Specific commit builds
-
-**Steps**:
-1. Build Docker image with multi-stage build
-2. Test basic startup with test credentials
-3. Test health check
-4. Verify HTTP response
-5. Test data directory creation
-6. Check Docker image size
-7. Setup Node.js 24 for browser tests
-8. Install dependencies for browser tests
-9. Install Playwright browsers (`npx playwright install --with-deps chromium`)
-10. Start container for browser tests
-11. Run browser test suite with Playwright
-12. Push image to GitHub Container Registry
-13. Generate build attestation for supply chain security
-
-**Image Features**:
-- Multi-stage build for minimal size
-- Alpine Linux base with Node.js 24 (~200MB final image)
-- Multi-platform support (amd64, arm64, arm/v7)
-- Non-root user (UID 1001)
-- Health check endpoint
-- Proper signal handling with dumb-init
-- Persistent data volume at `/app/data`
-
-### Test Workflow (`.github/workflows/tests.yml`)
-
-This workflow runs on pull requests to `master`, `beta`, and `release` branches.
-
 #### Jobs
 
 ##### 1. `test` - Electron Mode Tests
@@ -68,45 +17,34 @@ This workflow runs on pull requests to `master`, `beta`, and `release` branches.
 Tests the traditional Electron desktop application:
 
 - **Environment**: Custom Docker container (`ghcr.io/thomasnordquist/mqtt-explorer-ui-tests:latest`)
-  - Based on Node.js 24
-  - Includes Xvfb for headless display
-  - Includes FFmpeg for video recording
-  - Includes Mosquitto MQTT broker
-  - **Playwright browsers pre-installed** with system dependencies
 - **Steps**:
   1. Install dependencies with frozen lockfile
   2. Build the Electron application
   3. Run unit tests (app + backend)
   4. Run UI tests with video recording
-  5. Upload test video to S3 with 90-day expiration tag
-  6. Post demo video to PR as comment
-  7. Display test results in GitHub summary
+  5. Upload test video to S3
+  6. Display test results in GitHub summary
 
-**Artifacts**: 
-- UI test video (GIF format) uploaded to S3 using AWS CLI
-- Video is tagged with `expiration=90days` for automatic lifecycle deletion
-- Video is posted to the PR thread as an embedded image
-- Videos expire after 90 days via S3 lifecycle policy
+**Artifacts**: UI test video (GIF format) uploaded to S3
 
 ##### 2. `test-browser` - Browser Mode Tests
 
 Tests the new browser/server mode:
 
-- **Environment**: Ubuntu latest with Node.js 24
+- **Environment**: Ubuntu latest with Node.js 20
 - **Services**:
   - **Mosquitto MQTT Broker**: Eclipse Mosquitto v2 on port 1883
     - Health checks enabled
     - Anonymous connections allowed
 - **Steps**:
-  1. Setup Node.js 24
+  1. Setup Node.js 20
   2. Install dependencies
-  3. Install Playwright browsers (`npx playwright install --with-deps chromium`)
-  4. Build browser mode (`yarn build:server`)
-  5. Run unit tests (app + backend)
-  6. Start server in background with test credentials
-  7. Wait for server to be ready
-  8. Run browser smoke tests
-  9. Clean up server process
+  3. Build browser mode (`yarn build:server`)
+  4. Run unit tests (app + backend)
+  5. Start server in background with test credentials
+  6. Wait for server to be ready
+  7. Run browser smoke tests
+  8. Clean up server process
 
 **Environment Variables**:
 - `MQTT_EXPLORER_USERNAME=test`
@@ -154,35 +92,6 @@ Example:
 
 ## Local Testing
 
-### Docker Browser Mode
-
-```bash
-# Build the image locally (for your platform)
-docker build -f Dockerfile.browser -t mqtt-explorer:local .
-
-# Build for specific platform (e.g., Raspberry Pi)
-docker buildx build --platform linux/arm64 -f Dockerfile.browser -t mqtt-explorer:local-arm64 .
-
-# Run the container
-docker run -d \
-  -p 3000:3000 \
-  -e MQTT_EXPLORER_USERNAME=test \
-  -e MQTT_EXPLORER_PASSWORD=test123 \
-  mqtt-explorer:local
-
-# Test the server
-curl http://localhost:3000
-
-# Check logs
-docker logs <container-id>
-
-# Stop and remove
-docker stop <container-id>
-docker rm <container-id>
-```
-
-See [DOCKER.md](DOCKER.md) for complete documentation.
-
 ### Electron Mode
 
 ```bash
@@ -218,93 +127,6 @@ The repository includes a devcontainer configuration that automatically sets up:
 
 See [.devcontainer/README.md](.devcontainer/README.md) for details.
 
-## S3 Configuration for Demo Videos
-
-### Required S3 Lifecycle Policy
-
-Demo videos uploaded from PRs are tagged with `expiration=90days` and require an S3 lifecycle policy to automatically delete them after 90 days.
-
-**Important**: The `video.mp4` file in the gh-pages branch is NOT tagged and will NOT expire.
-
-#### Setting up the Lifecycle Policy
-
-1. Create a file named `s3-lifecycle-pr-videos.json`:
-
-```json
-{
-  "Rules": [
-    {
-      "ID": "ExpirePRDemoVideosAfter90Days",
-      "Status": "Enabled",
-      "Filter": {
-        "Tag": {
-          "Key": "expiration",
-          "Value": "90days"
-        }
-      },
-      "Expiration": {
-        "Days": 90
-      }
-    }
-  ]
-}
-```
-
-2. Apply the policy to your S3 bucket:
-
-```bash
-aws s3api put-bucket-lifecycle-configuration \
-  --bucket YOUR_BUCKET_NAME \
-  --lifecycle-configuration file://s3-lifecycle-pr-videos.json
-```
-
-3. Verify the policy:
-
-```bash
-aws s3api get-bucket-lifecycle-configuration --bucket YOUR_BUCKET_NAME
-```
-
-#### How It Works
-
-- **PR demo videos**: Uploaded with filename pattern `pr-{number}-{timestamp}.gif` and tagged with:
-  - `expiration=90days` - Used by lifecycle policy for automatic deletion
-  - `Source=github-actions` - Identifies source of upload
-  - `Type=pr-demo-video` - Categorizes the object type
-- **S3 lifecycle rule**: Automatically deletes objects tagged with `expiration=90days` after 90 days
-- **Upload mechanism**: AWS CLI v2 is installed directly, authentication is configured via `aws-actions/configure-aws-credentials@v4` GitHub Action, then `aws s3api put-object` is used with object tagging support
-- **gh-pages video**: `video.mp4` in gh-pages branch is served from GitHub Pages, not S3, so it persists indefinitely
-
-#### Required AWS Credentials
-
-The workflow requires the following secrets/variables:
-- `vars.AWS_KEY_ID` - AWS access key ID (requires `s3:PutObject` and `s3:PutObjectTagging` permissions)
-- `secrets.AWS_SECRET_ACCESS_KEY` - AWS secret access key
-- `vars.AWS_BUCKET` - S3 bucket name
-- AWS region: `eu-central-1` (hardcoded in workflow)
-
-The S3 bucket must have:
-- **Bucket policy for public read access**: Since ACLs are disabled (BucketOwnerEnforced), a bucket policy must grant public read access to uploaded objects
-- Object tagging enabled
-- Lifecycle policy configured as described above
-
-**Example S3 Bucket Policy for Public Read Access**:
-```json
-{
-  "Version": "2012-10-17",
-  "Statement": [
-    {
-      "Sid": "PublicReadGetObject",
-      "Effect": "Allow",
-      "Principal": "*",
-      "Action": "s3:GetObject",
-      "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
-    }
-  ]
-}
-```
-
-The workflow uses AWS CLI v2 installed directly and `aws-actions/configure-aws-credentials@v4` action for secure credential management.
-
 ## Troubleshooting
 
 ### Browser Tests Failing
@@ -320,7 +142,6 @@ The workflow uses AWS CLI v2 installed directly and `aws-actions/configure-aws-c
 
 ## Future Improvements
 
-- [x] Add Playwright browser installation to workflows (browser tests can now use Playwright)
 - [ ] Add E2E browser tests with Playwright
 - [ ] Test WebSocket connections in browser mode
 - [ ] Add performance benchmarks

DOCKER.md

@@ -1,250 +0,0 @@
-# MQTT Explorer - Docker Browser Mode
-
-Docker image for running MQTT Explorer in browser mode.
-
-## Try It Now
-
-[![Try in PWD](https://raw.githubusercontent.com/play-with-docker/stacks/master/assets/images/button.png)](https://labs.play-with-docker.com/?stack=https://raw.githubusercontent.com/thomasnordquist/MQTT-Explorer/master/docker-compose.yml)
-
-Click the badge above to instantly try MQTT Explorer in your browser using Play with Docker (requires free Docker Hub account).
-
-## Quick Start
-
-### Using Pre-built Image
-
-Pull and run the latest image from GitHub Container Registry:
-
-```bash
-docker pull ghcr.io/thomasnordquist/mqtt-explorer:latest
-
-docker run -d \
-  -p 3000:3000 \
-  -e MQTT_EXPLORER_USERNAME=admin \
-  -e MQTT_EXPLORER_PASSWORD=your_secure_password \
-  -v mqtt-explorer-data:/app/data \
-  --name mqtt-explorer \
-  ghcr.io/thomasnordquist/mqtt-explorer:latest
-```
-
-Access the application at `http://localhost:3000`
-
-### Using Docker Compose
-
-Create a `docker-compose.yml` file:
-
-```yaml
-version: '3.8'
-
-services:
-  mqtt-explorer:
-    image: ghcr.io/thomasnordquist/mqtt-explorer:latest
-    ports:
-      - "3000:3000"
-    environment:
-      - MQTT_EXPLORER_USERNAME=admin
-      - MQTT_EXPLORER_PASSWORD=your_secure_password
-      - PORT=3000
-    volumes:
-      - mqtt-explorer-data:/app/data
-    restart: unless-stopped
-
-volumes:
-  mqtt-explorer-data:
-```
-
-Then run:
-
-```bash
-docker-compose up -d
-```
-
-## Environment Variables
-
-| Variable | Required | Default | Description |
-|----------|----------|---------|-------------|
-| `MQTT_EXPLORER_USERNAME` | No | Generated | Username for authentication |
-| `MQTT_EXPLORER_PASSWORD` | No | Generated | Password for authentication |
-| `MQTT_EXPLORER_SKIP_AUTH` | No | `false` | Set to `true` to disable authentication (use only behind a secure proxy!) |
-| `PORT` | No | `3000` | Port the server listens on |
-| `ALLOWED_ORIGINS` | No | `*` | Comma-separated list of allowed CORS origins |
-| `NODE_ENV` | No | - | Set to `production` for production deployments |
-
-### Authentication Modes
-
-**Standard Mode (Default):**
-- Requires username and password for access
-- Credentials can be set via environment variables or auto-generated
-- Auto-generated credentials are logged on first startup and saved to `/app/data/credentials.json`
-
-**Skip Authentication Mode (Use with caution!):**
-```bash
-docker run -d -p 3000:3000 \
-  -e MQTT_EXPLORER_SKIP_AUTH=true \
-  ghcr.io/thomasnordquist/mqtt-explorer:latest
-```
-
-⚠️ **WARNING**: When `MQTT_EXPLORER_SKIP_AUTH=true`, the application is **completely open** without any authentication. This should **only be used** when MQTT Explorer is deployed behind a secure authentication proxy (e.g., OAuth2 Proxy, Authelia, Nginx with auth_request) or in a trusted private network.
-
-**Recommended use case**: Integration with enterprise SSO systems where authentication is handled by a reverse proxy.
-
-**Note**: If credentials are not provided and auth is not skipped, they will be auto-generated and stored in `/app/data/credentials.json`. Check the container logs to see the generated credentials:
-
-```bash
-docker logs mqtt-explorer
-```
-
-## Data Persistence
-
-The container stores data in `/app/data`, including:
-- User credentials (`credentials.json`)
-- Connection settings (`settings.json`)
-- Uploaded certificates (`certificates/`)
-- File uploads (`uploads/`)
-
-Mount a volume to persist data across container restarts:
-
-```bash
-docker run -v mqtt-explorer-data:/app/data ...
-```
-
-## Building from Source
-
-Build the Docker image locally:
-
-```bash
-docker build -f Dockerfile.browser -t mqtt-explorer:local .
-```
-
-Run the locally built image:
-
-```bash
-docker run -d \
-  -p 3000:3000 \
-  -e MQTT_EXPLORER_USERNAME=admin \
-  -e MQTT_EXPLORER_PASSWORD=secret \
-  mqtt-explorer:local
-```
-
-## Health Check
-
-The container includes a health check that runs every 30 seconds. Check the health status:
-
-```bash
-docker inspect --format='{{.State.Health.Status}}' mqtt-explorer
-```
-
-## Security Best Practices
-
-1. **Use HTTPS in Production**: Put the container behind a reverse proxy (nginx, Traefik) with HTTPS
-2. **Set Strong Credentials**: Always set custom credentials via environment variables
-3. **Network Isolation**: Run in a private network when possible
-4. **Update Regularly**: Pull the latest image regularly for security updates
-
-### Example with Nginx Reverse Proxy
-
-```nginx
-server {
-    listen 443 ssl http2;
-    server_name mqtt-explorer.example.com;
-
-    ssl_certificate /path/to/cert.pem;
-    ssl_certificate_key /path/to/key.pem;
-
-    location / {
-        proxy_pass http://localhost:3000;
-        proxy_http_version 1.1;
-        proxy_set_header Upgrade $http_upgrade;
-        proxy_set_header Connection "upgrade";
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;
-    }
-}
-```
-
-## Troubleshooting
-
-### Container won't start
-
-Check the logs:
-```bash
-docker logs mqtt-explorer
-```
-
-### Can't access the application
-
-1. Verify the container is running: `docker ps`
-2. Check the port mapping: `docker port mqtt-explorer`
-3. Test connectivity: `curl http://localhost:3000`
-
-### Authentication issues
-
-1. Check generated credentials in logs: `docker logs mqtt-explorer`
-2. Verify environment variables: `docker inspect mqtt-explorer`
-3. Reset credentials by removing the data volume and restarting
-
-### Permission issues
-
-The container runs as a non-root user (UID 1001). If mounting host directories, ensure they're writable:
-
-```bash
-chown -R 1001:1001 /path/to/host/data
-docker run -v /path/to/host/data:/app/data ...
-```
-
-## Available Tags
-
-- `latest` - Latest stable version from the master branch
-- `master` - Latest build from master branch
-- `beta` - Latest beta version
-- `release` - Latest release version
-- `master-<sha>` - Specific commit from master
-- `beta-<sha>` - Specific commit from beta
-- `release-<sha>` - Specific commit from release
-
-## Supported Platforms
-
-The Docker image is built for multiple architectures:
-- `linux/amd64` - x86-64 (standard PCs, servers)
-- `linux/arm64` - ARM 64-bit (Raspberry Pi 3/4/5, Apple Silicon)
-- `linux/arm/v7` - ARM 32-bit (Raspberry Pi 2/3)
-
-## One-Click Deployment Options
-
-### Play with Docker (Free)
-
-Try MQTT Explorer instantly in your browser without installing anything:
-
-[![Try in PWD](https://raw.githubusercontent.com/play-with-docker/stacks/master/assets/images/button.png)](https://labs.play-with-docker.com/?stack=https://raw.githubusercontent.com/thomasnordquist/MQTT-Explorer/master/docker-compose.yml)
-
-- **No installation required** - Runs entirely in your browser
-- **Free to use** - Requires only a Docker Hub account
-- **Perfect for demos** - Great for testing and demonstrations
-- **4-hour sessions** - Sessions automatically expire after 4 hours
-
-### Cloud Platforms
-
-Deploy MQTT Explorer to various cloud platforms with one click:
-
-#### DigitalOcean App Platform
-
-[![Deploy to DO](https://www.deploytodo.com/do-btn-blue.svg)](https://cloud.digitalocean.com/apps/new?repo=https://github.com/thomasnordquist/MQTT-Explorer/tree/master&refcode=docker)
-
-- Automatically detects Docker configuration
-- Managed platform with auto-scaling
-- Starting at $5/month
-
-#### Koyeb
-
-[![Deploy to Koyeb](https://www.koyeb.com/static/images/deploy/button.svg)](https://app.koyeb.com/deploy?type=docker&name=mqtt-explorer&image=ghcr.io/thomasnordquist/mqtt-explorer:latest&ports=3000;http;/)
-
-- Deploy directly from Docker image
-- Global edge network
-- Free tier available
-
-**Note:** Remember to set the environment variables `MQTT_EXPLORER_USERNAME` and `MQTT_EXPLORER_PASSWORD` when deploying to cloud platforms.
-
-## License
-
-See the main [LICENSE.md](LICENSE.md) file.

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:24
+FROM node:20
 
 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
@@ -10,17 +10,6 @@ ENV LANG en_US.UTF-8
 ENV LANGUAGE en_US:en
 ENV LC_ALL en_US.UTF-8
 
-# Configure mosquitto for anonymous access (required for tests)
-RUN mkdir -p /etc/mosquitto/conf.d && \
-    echo "listener 1883" > /etc/mosquitto/conf.d/default.conf && \
-    echo "allow_anonymous true" >> /etc/mosquitto/conf.d/default.conf && \
-    echo "persistence false" >> /etc/mosquitto/conf.d/default.conf
-
-# Install Playwright and browsers
-# This ensures Playwright browsers are pre-installed in the container
-RUN npm install -g playwright@1.57.0 && \
-    npx playwright install --with-deps chromium
-
 CMD /bin/bash
 
 VOLUME /app

Dockerfile.browser

@@ -1,69 +0,0 @@
-# Multi-stage build for MQTT Explorer Browser Mode
-# Stage 1: Build and prepare production dependencies
-FROM node:24-alpine AS builder
-
-WORKDIR /build
-
-# Copy all source files and dependencies
-COPY package.json yarn.lock ./
-COPY tsconfig.json ./
-COPY src ./src
-COPY backend ./backend
-COPY events ./events
-COPY app ./app
-
-# Install ALL dependencies (needed for build)
-RUN yarn install --frozen-lockfile --network-timeout 100000
-
-# Build the application (compiles TypeScript and webpack bundles)
-RUN yarn build:server
-
-# Remove dev dependencies, keeping only production dependencies
-RUN yarn install --production --frozen-lockfile --network-timeout 100000 && \
-    yarn cache clean && \
-    rm -rf /tmp/*
-
-# Stage 2: Production
-FROM node:24-alpine
-
-# Install dumb-init in a single layer
-RUN apk add --no-cache dumb-init
-
-# Create app user in a single layer
-RUN addgroup -g 1001 -S mqttexplorer && \
-    adduser -u 1001 -S mqttexplorer -G mqttexplorer
-
-WORKDIR /app
-
-# Copy ONLY the compiled dist folder (contains compiled TypeScript)
-COPY --from=builder --chown=mqttexplorer:mqttexplorer /build/dist ./dist
-
-# Copy ONLY the built frontend app
-COPY --from=builder --chown=mqttexplorer:mqttexplorer /build/app/build ./app/build
-COPY --from=builder --chown=mqttexplorer:mqttexplorer /build/app/index.html ./app/
-
-# Copy runtime node_modules (production dependencies only)
-COPY --from=builder --chown=mqttexplorer:mqttexplorer /build/node_modules ./node_modules
-
-# Copy package.json for version info (needed by server)
-COPY --from=builder --chown=mqttexplorer:mqttexplorer /build/package.json ./
-
-# Create data directory for persistent storage
-RUN mkdir -p /app/data && \
-    chown -R mqttexplorer:mqttexplorer /app/data
-
-# Switch to non-root user
-USER mqttexplorer
-
-# Expose port
-EXPOSE 3000
-
-# Health check
-HEALTHCHECK --interval=30s --timeout=10s --start-period=40s --retries=3 \
-  CMD node -e "const http = require('http'); const req = http.get('http://localhost:3000', (r) => process.exit(r.statusCode === 200 ? 0 : 1)); req.on('error', () => process.exit(1));"
-
-# Use dumb-init to handle signals properly
-ENTRYPOINT ["/usr/bin/dumb-init", "--"]
-
-# Start the server
-CMD ["node", "dist/src/server.js"]

LICENSE.md

@@ -1,4 +1,4 @@
-When distributing, the attribution and donation page may not be altered or made less accessible without explicit approval.
+When redistributing, the attribution page may not be altered or made less accessible without explicit approval.
 
 # Creative Commons Attribution-ShareAlike 4.0 International
 

NOTARIZATION.md

@@ -1,143 +0,0 @@
-# macOS Notarization Setup
-
-This document explains how to set up notarization for macOS builds of MQTT Explorer.
-
-## Overview
-
-macOS notarization is a security feature required by Apple for all software distributed outside the Mac App Store. Starting with macOS 10.15 (Catalina), all software must be notarized to run without warnings on macOS.
-
-## Prerequisites
-
-1. An active Apple Developer account
-2. Xcode command line tools installed on the build machine
-3. An app-specific password for notarization
-
-## Setup Steps
-
-### 1. Create an App-Specific Password
-
-1. Sign in to [appleid.apple.com](https://appleid.apple.com)
-2. Navigate to "Sign-In and Security" section
-3. Under "App-Specific Passwords", click "Generate an app-specific password"
-4. Enter a descriptive name (e.g., "MQTT Explorer Notarization")
-5. Copy the generated password (you won't be able to see it again)
-
-### 2. Find Your Team ID
-
-1. Sign in to [developer.apple.com](https://developer.apple.com/account)
-2. Navigate to "Membership Details"
-3. Copy your Team ID (a 10-character alphanumeric string)
-
-### 3. Configure GitHub Secrets
-
-Add the following secrets to your GitHub repository:
-
-- `APPLE_ID`: Your Apple ID email address (e.g., `your.email@example.com`)
-- `APPLE_APP_SPECIFIC_PASSWORD`: The app-specific password created in step 1
-- `APPLE_TEAM_ID`: Your Team ID from step 2
-
-To add secrets:
-1. Go to your repository on GitHub
-2. Navigate to Settings → Secrets and variables → Actions
-3. Click "New repository secret" for each of the above
-
-## How It Works
-
-### Build Configuration
-
-The notarization process is configured in `package.json`:
-
-```json
-{
-  "build": {
-    "mac": {
-      "hardenedRuntime": true,
-      "gatekeeperAssess": false,
-      "entitlements": "res/entitlements.mac.plist",
-      "entitlementsInherit": "res/entitlements.mac.inherit.plist"
-    },
-    "afterSign": "./dist/scripts/notarize.js"
-  }
-}
-```
-
-### Notarization Script
-
-The `scripts/notarize.ts` script handles the notarization process:
-
-1. Checks if the build is for macOS
-2. Verifies that required environment variables are set
-3. Submits the app to Apple's notarization service
-4. Waits for notarization to complete
-5. Staples the notarization ticket to the app
-
-### Entitlements
-
-Different entitlements are used for different build types:
-
-- **DMG builds** (regular distribution):
-  - `res/entitlements.mac.plist` - Main entitlements
-  - `res/entitlements.mac.inherit.plist` - Inherited entitlements for child processes
-
-- **MAS builds** (Mac App Store):
-  - `res/entitlements.mas.plist` - App Store specific entitlements
-
-### CI/CD Integration
-
-The GitHub Actions workflow (`platform-builds.yml`) automatically:
-
-1. Builds the macOS app when code is pushed to `release` or `beta` branches
-2. Signs the app with the developer certificate
-3. Notarizes the app using the configured secrets
-4. Publishes the notarized app to GitHub releases
-
-## Troubleshooting
-
-### Notarization Fails
-
-If notarization fails, check:
-
-1. **Credentials**: Ensure all three secrets are correctly set in GitHub
-2. **App-specific password**: Verify it hasn't expired or been revoked
-3. **Team ID**: Confirm it matches your developer account
-4. **Entitlements**: Ensure the entitlements files are valid and appropriate for your app
-
-### Checking Notarization Status
-
-You can check the notarization status of a built app:
-
-```bash
-# Check if an app is notarized
-spctl -a -vv /path/to/MQTT\ Explorer.app
-
-# Check notarization history
-xcrun notarytool history --apple-id your.email@example.com --team-id YOUR_TEAM_ID
-```
-
-### Local Testing
-
-To test notarization locally:
-
-```bash
-# Set environment variables
-export APPLE_ID="your.email@example.com"
-export APPLE_APP_SPECIFIC_PASSWORD="your-app-specific-password"
-export APPLE_TEAM_ID="YOUR_TEAM_ID"
-
-# Build and notarize
-yarn build
-yarn package mac
-```
-
-## Security Considerations
-
-- Never commit Apple credentials to the repository
-- Use app-specific passwords, not your main Apple ID password
-- Rotate app-specific passwords periodically
-- Limit access to GitHub secrets to trusted maintainers only
-
-## References
-
-- [Apple Notarization Documentation](https://developer.apple.com/documentation/security/notarizing_macos_software_before_distribution)
-- [electron-builder Code Signing](https://www.electron.build/code-signing)
-- [@electron/notarize](https://github.com/electron/notarize)

Readme.md

@@ -54,27 +54,6 @@ yarn start:server
 
 Then open your browser to `http://localhost:3000`. For more details, see [BROWSER_MODE.md](BROWSER_MODE.md).
 
-### Docker (Browser Mode)
-
-[![Try in PWD](https://raw.githubusercontent.com/play-with-docker/stacks/master/assets/images/button.png)](https://labs.play-with-docker.com/?stack=https://raw.githubusercontent.com/thomasnordquist/MQTT-Explorer/master/docker-compose.yml)
-
-Run MQTT Explorer in a Docker container:
-
-```bash
-docker run -d \
-  -p 3000:3000 \
-  -e MQTT_EXPLORER_USERNAME=admin \
-  -e MQTT_EXPLORER_PASSWORD=your_secure_password \
-  -v mqtt-explorer-data:/app/data \
-  ghcr.io/thomasnordquist/mqtt-explorer:latest
-```
-
-**Supports multiple platforms**: amd64, arm64 (Raspberry Pi 3/4/5), arm/v7 (Raspberry Pi 2/3).
-
-**Enterprise integration**: Set `MQTT_EXPLORER_SKIP_AUTH=true` to disable built-in authentication when deploying behind a secure authentication proxy (e.g., OAuth2 Proxy, SSO).
-
-For complete Docker documentation including authentication options, deployment examples, and security best practices, see [DOCKER.md](DOCKER.md).
-
 ## Develop
 
 ### Desktop Application
@@ -99,55 +78,14 @@ yarn dev:server
 
 The `app` directory contains all the rendering logic, the `backend` directory currently contains the models, tests, connection management, `src` contains all the electron bindings. [mqttjs](https://github.com/mqttjs/MQTT.js) is used to facilitate communication to MQTT brokers.
 
-For information on styling conventions and visual design patterns, see [STYLING.md](STYLING.md).
-
 ## Automated Tests
 
-MQTT Explorer uses multiple test suites to ensure reliability and quality:
+To achieve a reliable product automated tests run regularly on CI.
 
-### Unit Tests
-
-**App tests** - Frontend component and logic tests:
-```bash
-yarn test:app
-```
-
-**Backend tests** - Data model and business logic tests:
-```bash
-yarn test:backend
-```
-
-**Run all unit tests**:
-```bash
-yarn test
-```
-
-### Integration & UI Tests
-
-**UI test suite** - Independent, deterministic browser tests:
-```bash
-yarn build
-yarn test:ui
-```
-
-**Demo video generation** - UI test recording for documentation:
-```bash
-yarn build
-yarn test:demo-video
-```
-Note: Requires Xvfb, mosquitto broker, tmux, and ffmpeg. For full video recording setup, use `./scripts/uiTests.sh`.
-
-**MCP introspection tests** - Model Context Protocol validation:
-```bash
-yarn build
-yarn test:mcp
-```
-
-**Run all tests** (unit tests + demo video):
-```bash
-yarn build
-yarn test:all
-```
+- **Data model tests**: `yarn test:backend`
+- **App tests**: `yarn test:app`
+- **UI test suite**: `yarn test:ui` (independent, deterministic tests)
+- **Demo video**: `yarn ui-test` (UI test recording for documentation)
 
 ### Run UI Test Suite
 
@@ -166,36 +104,18 @@ See [docs/UI-TEST-SUITE.md](docs/UI-TEST-SUITE.md) for more details.
 
 ### Run Demo Video Generation
 
-The demo video is used for documentation and showcases key features. It requires additional dependencies:
+A [mosquitto](https://mosquitto.org/) MQTT broker is required to generate the demo video.
 
 ```bash
 yarn build
-yarn test:demo-video
+yarn ui-test
 ```
 
-**Requirements:**
-- mosquitto MQTT broker
-- Xvfb (virtual framebuffer)
-- tmux (terminal multiplexer)
-- ffmpeg (video encoding)
-
-**For full video recording with post-processing:**
-```bash
-yarn build
-./scripts/uiTests.sh
-```
-
-This script handles Xvfb setup, mosquitto startup, video recording, and cleanup.
-
 ## Create a release
 
 Create a PR to `release` branch.
 There needs to be a "feat: some new feature" or "fix: some bugfix" commit for a new release to be created
 
-### macOS Notarization
-
-macOS builds are automatically notarized during the release process. To set up notarization credentials, see [NOTARIZATION.md](NOTARIZATION.md).
-
 ## Create a beta release
 
 Create a PR to `beta` branch. A "feat" or "fix" commit is necessary to create a new version.
@@ -225,9 +145,7 @@ The readme will be generated from the docs.
 
 ## License
 
-![CC BY-SA 4.0](https://img.shields.io/badge/License-CC%20BY--SA%204.0-blue.svg)  
-[CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/)
+![CC-BY-Nc 4.0](https://img.shields.io/badge/License-CC%20BY--NC%204.0-blue.svg)  
+[CC-BY-Nc 4.0](https://creativecommons.org/licenses/by-nC/4.0/)
 
-**Special requirement:** When distributing, the attribution and donation page may not be altered or made less accessible without explicit approval.
-
-The license allows for anyone to adapt, share, and redistribute the material, as long as they give appropriate credit and distribute any derivative works under the same license.
+The license allows for anyone to adapt, share, and redistribute the material, as long as it is non-commercial.

SECURITY.md

@@ -1,194 +0,0 @@
-# Security Policy
-
-## Supported Versions
-
-Security updates are provided for the latest release of MQTT Explorer.
-
-| Version | Supported          |
-| ------- | ------------------ |
-| 0.4.x   | :white_check_mark: |
-| < 0.4   | :x:                |
-
-## Reporting a Vulnerability
-
-We take security vulnerabilities seriously. If you discover a security issue, please follow these steps:
-
-### How to Report
-
-1. **DO NOT** create a public GitHub issue for security vulnerabilities
-2. Report via one of these channels:
-   - GitHub Security Advisories (preferred): https://github.com/thomasnordquist/MQTT-Explorer/security/advisories/new
-   - Email the maintainer directly
-3. Include the following information:
-   - Description of the vulnerability
-   - Steps to reproduce
-   - Potential impact
-   - Any suggested fixes (optional)
-
-### What to Expect
-
-- **Acknowledgment**: We will acknowledge receipt of your report within 48 hours
-- **Updates**: We will provide updates on the status of your report within 7 days
-- **Fix Timeline**: We aim to release security fixes within 30 days for critical issues
-- **Credit**: With your permission, we will credit you in the security advisory and release notes
-
-## Security Features
-
-### Browser Mode Security
-
-MQTT Explorer's browser mode includes several security features:
-
-#### Authentication
-- **bcrypt Password Hashing**: All passwords are hashed with bcrypt (10 rounds)
-- **Constant-Time Comparison**: Username comparison uses crypto.timingSafeEqual() to prevent timing attacks
-- **Environment Variable Configuration**: Credentials can be set via environment variables for production
-- **Automatic Credential Generation**: Secure random credentials generated if not provided
-
-#### Rate Limiting
-- **Authentication Rate Limiting**: Maximum 5 failed authentication attempts per IP per 15 minutes
-- **Per-IP Tracking**: Failed attempts tracked separately for each client IP
-- **Automatic Reset**: Rate limit counters automatically reset after 15 minutes
-
-#### HTTP Security Headers (helmet.js)
-- **Content Security Policy (CSP)**: Restricts resource loading to prevent XSS attacks
-- **HTTP Strict Transport Security (HSTS)**: Enforces HTTPS in production
-- **X-Content-Type-Options**: Prevents MIME type sniffing
-- **X-Frame-Options**: Prevents clickjacking attacks
-- **X-XSS-Protection**: Enables browser XSS protection
-
-#### Input Validation
-- **File Size Limits**: Maximum 16MB for file uploads
-- **Path Traversal Protection**: All file paths validated and sanitized
-- **Filename Sanitization**: Removes path separators, null bytes, and validates against traversal patterns
-- **Real Path Validation**: Ensures resolved paths stay within allowed directories
-- **Base64 Validation**: All file data properly validated before processing
-
-#### CORS Configuration
-- **Configurable Origins**: CORS origins configurable via ALLOWED_ORIGINS environment variable
-- **Production Restrictions**: Wildcard CORS automatically disabled in production
-- **Credential Support**: CORS configured with credentials: true for authenticated requests
-
-#### Error Handling
-- **Generic Error Messages**: Detailed errors only shown in development mode
-- **No Information Leakage**: Error messages sanitized to prevent information disclosure
-- **Secure Logging**: Sensitive information not logged in production
-
-## Security Best Practices
-
-### For Server Deployment
-
-1. **Always Use HTTPS in Production**
-   - Use a reverse proxy (nginx, Apache) with TLS certificates
-   - Never expose the Node.js server directly to the internet
-   - Use Let's Encrypt for free TLS certificates
-
-2. **Set Strong Credentials**
-   ```bash
-   export MQTT_EXPLORER_USERNAME=your_secure_username
-   export MQTT_EXPLORER_PASSWORD=your_strong_password_min_12_chars
-   export NODE_ENV=production
-   ```
-
-3. **Configure CORS Properly**
-   ```bash
-   # Single origin
-   export ALLOWED_ORIGINS=https://mqtt-explorer.example.com
-   
-   # Multiple origins
-   export ALLOWED_ORIGINS=https://app1.example.com,https://app2.example.com
-   ```
-
-4. **Network Security**
-   - Deploy behind a firewall or VPN
-   - Use IP whitelisting when possible
-   - Implement network-level rate limiting
-   - Monitor access logs regularly
-
-5. **Keep Dependencies Updated**
-   ```bash
-   yarn audit
-   yarn upgrade-interactive
-   ```
-
-6. **Regular Security Audits**
-   - Run security tests: `yarn test:security`
-   - Review access logs for suspicious activity
-   - Monitor authentication failures
-   - Check for outdated dependencies
-
-### For MQTT Connections
-
-1. **Use TLS/SSL**: Always connect to MQTT brokers using TLS encryption
-2. **Strong Credentials**: Use unique, strong passwords for MQTT authentication
-3. **Certificate Validation**: Verify broker certificates in production
-4. **Least Privilege**: Connect with minimal required permissions
-
-## Security Testing
-
-The project includes comprehensive security tests:
-
-```bash
-# Run all tests including security tests
-yarn test
-
-# Run only security tests
-npx mocha --require source-map-support/register dist/src/spec/security-tests.spec.js
-```
-
-Security tests cover:
-- Path traversal attack prevention
-- Input validation and sanitization
-- Authentication security
-- CORS configuration
-- Rate limiting
-- Error handling
-- Data sanitization
-
-## Security Audit History
-
-### December 2024 - Initial Security Review
-- Added helmet.js for HTTP security headers
-- Implemented rate limiting for authentication
-- Added path traversal protection with sanitization
-- Implemented constant-time comparison for credentials
-- Added input validation and size limits
-- Removed credential logging in production
-- Added configurable CORS origins
-- Created comprehensive security test suite (19 tests)
-- Enhanced documentation with security best practices
-
-## Known Limitations
-
-### Browser Mode
-- File system access limited to server-side directories
-- No native OS dialogs (uses browser file input)
-- Session management is stateless (no persistent sessions)
-
-### Desktop Mode (Electron)
-- Inherits security model from Electron framework
-- IPC communication between renderer and main process
-- No network exposure by default
-
-## Recommended Security Tools
-
-- **Dependency Scanning**: Dependabot, Snyk, or npm audit
-- **SAST**: SonarQube, ESLint security plugins
-- **Container Scanning**: If using Docker deployment
-- **TLS Testing**: SSL Labs, testssl.sh
-- **Penetration Testing**: OWASP ZAP, Burp Suite
-
-## References
-
-- [OWASP Top 10](https://owasp.org/www-project-top-ten/)
-- [Node.js Security Best Practices](https://nodejs.org/en/docs/guides/security/)
-- [Express Security Best Practices](https://expressjs.com/en/advanced/best-practice-security.html)
-- [helmet.js Documentation](https://helmetjs.github.io/)
-- [MQTT Security](https://mqtt.org/mqtt-specification/)
-
-## Contact
-
-For security-related questions or concerns:
-- GitHub Security Advisories: https://github.com/thomasnordquist/MQTT-Explorer/security/advisories
-- Project Issues (for non-sensitive topics): https://github.com/thomasnordquist/MQTT-Explorer/issues
-
-Thank you for helping keep MQTT Explorer secure!

STYLING.md

@@ -1,212 +0,0 @@
-# MQTT Explorer Styling Conventions
-
-This document outlines the styling conventions used in MQTT Explorer for visual consistency and maintainable code.
-
-## UI Framework
-
-Material-UI (MUI) v7 with JSS styling via `withStyles` HOC.
-
-**Stack:**
-- `@mui/material` (v7) - Core components and theming
-- `@mui/icons-material` (v7) - Icons
-- `@mui/styles` (v6) - JSS styling with `withStyles`
-- `@emotion/react` & `@emotion/styled` - CSS-in-JS foundation
-
-## Theming
-
-**Location:** `app/src/theme.ts`
-
-**Configuration:**
-- Light and dark modes supported
-- Primary color: `#335C67` (teal/blue-green)
-- Secondary: Material-UI `amber` palette
-- Base typography: `0.9rem`, `userSelect: 'none'`
-
-**Application:**
-```typescript
-<ThemeProvider theme={theme}>
-  <LegacyThemeProvider theme={theme}>
-    <App />
-  </LegacyThemeProvider>
-</ThemeProvider>
-```
-
-## Colors
-
-**Access theme colors:**
-```typescript
-backgroundColor: theme.palette.background.default
-color: theme.palette.text.primary
-borderColor: theme.palette.divider
-```
-
-**Material-UI palettes:**
-```typescript
-import { blueGrey, amber, green, red, orange } from '@mui/material/colors'
-backgroundColor: blueGrey[100]  // Light shade
-backgroundColor: blueGrey[700]  // Dark shade
-```
-
-**Theme-conditional:**
-```typescript
-const color = theme.palette.mode === 'light' ? blueGrey[300] : theme.palette.primary.main
-```
-
-**Code editor colors:** Defined in `app/src/components/Sidebar/CodeBlockColors.ts`
-
-## Typography
-
-**Variants:**
-```typescript
-<Typography variant="h6">Heading</Typography>
-<Typography variant="body1">Body text</Typography>
-<Typography variant="caption">Caption</Typography>
-```
-
-**Font sizes:**
-```typescript
-fontSize: theme.typography.pxToRem(15)
-```
-
-**Monospace:** `"12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace"`
-
-## Spacing
-
-**8px grid system:**
-```typescript
-margin: theme.spacing(1)      // 8px
-padding: theme.spacing(2)     // 16px
-marginLeft: theme.spacing(1.5) // 12px (tree indentation)
-```
-
-**Border radius:**
-```typescript
-borderRadius: theme.shape.borderRadius  // 4px default
-```
-
-## Component Styling
-
-**Primary approach - withStyles HOC:**
-```typescript
-import { withStyles } from '@mui/styles'
-import { Theme } from '@mui/material/styles'
-
-const styles = (theme: Theme) => ({
-  root: {
-    backgroundColor: theme.palette.background.default,
-    padding: theme.spacing(2),
-  },
-})
-
-export default withStyles(styles)(MyComponent)
-```
-
-**Type assertions:**
-```typescript
-display: 'block' as 'block'
-whiteSpace: 'nowrap' as 'nowrap'
-overflow: 'hidden' as 'hidden'
-```
-
-**Responsive:**
-```typescript
-[theme.breakpoints.up(750)]: {
-  display: 'block',
-}
-```
-
-**sx prop (simple cases):**
-```typescript
-<Button sx={{ color: 'primary.contrastText' }}>Text</Button>
-```
-
-## Animations
-
-**CSS animations:**
-```typescript
-animation: 'updateLight 0.5s'
-```
-
-**Theme transitions:**
-```typescript
-transition: theme.transitions.create('transform', {
-  easing: theme.transitions.easing.sharp,
-  duration: theme.transitions.duration.leavingScreen,
-})
-```
-
-## Interactive States
-
-**Hover:**
-```typescript
-'&:hover': {
-  backgroundColor: theme.palette.mode === 'light' 
-    ? blueGrey[100] 
-    : theme.palette.primary.light,
-}
-```
-
-**Selection:**
-```typescript
-selected: {
-  backgroundColor: (theme.palette.mode === 'light' 
-    ? blueGrey[300] 
-    : theme.palette.primary.main) + ' !important',
-}
-```
-
-## Common Patterns
-
-**Tree nodes:**
-```typescript
-node: {
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-}
-subnodes: {
-  marginLeft: theme.spacing(1.5),
-}
-```
-
-**Buttons:**
-```typescript
-<Button variant="contained" color="primary">Submit</Button>
-<Button variant="outlined" color="primary">Cancel</Button>
-<Button>Learn More</Button>
-```
-
-**Icons:**
-```typescript
-<Icon fontSize="inherit" />
-<Icon style={{ fontSize: '16px' }} />
-```
-
-## Best Practices
-
-**DO:**
-✅ Use theme variables (`theme.palette.*`, `theme.spacing()`, `theme.typography.*`)
-✅ Use `withStyles` HOC for component styles
-✅ Use `theme.palette.mode` for light/dark conditional styling
-✅ Import Material-UI color palettes for extended colors
-✅ Keep styles co-located with components
-
-**DON'T:**
-❌ Hardcode colors or spacing values
-❌ Create global CSS files
-❌ Duplicate style definitions
-❌ Use inline styles for complex patterns
-
-## Resources
-
-- [Material-UI Documentation](https://mui.com/material-ui/getting-started/)
-- [Color System](https://mui.com/material-ui/customization/color/)
-- [Theming Guide](https://mui.com/material-ui/customization/theming/)
-
-**Testing:** Verify in both light/dark themes, check responsive behavior, ensure accessibility.
-
-## Related
-
-- [README.md](./Readme.md) - Project overview
-- [BROWSER_MODE.md](./BROWSER_MODE.md) - Browser mode
-- [.github/copilot-instructions.md](./.github/copilot-instructions.md) - Copilot instructions

app/TESTING.md

@@ -1,309 +0,0 @@
-# React Component Testing Guide
-
-This guide explains how to write tests for React components in the MQTT-Explorer project using the generic testing utilities.
-
-## Overview
-
-We use the following testing stack:
-- **Mocha** - Test framework
-- **Chai** - Assertion library
-- **React Testing Library** - React component testing utilities
-- **JSDOM** - DOM implementation for Node.js
-- **Custom Test Utilities** - Located in `src/utils/spec/testUtils.tsx`
-
-## Quick Start
-
-### 1. Create a Test File
-
-Test files should be placed next to the component they test with the `.spec.tsx` extension:
-
-```
-src/components/MyComponent/
-  ├── MyComponent.tsx
-  └── MyComponent.spec.tsx
-```
-
-### 2. Basic Test Structure
-
-```typescript
-import React from 'react'
-import { expect } from 'chai'
-import { describe, it } from 'mocha'
-import MyComponent from './MyComponent'
-import { renderWithProviders } from '../../utils/spec/testUtils'
-
-describe('MyComponent', () => {
-  it('should render correctly', () => {
-    const { container } = renderWithProviders(<MyComponent />)
-    expect(container).to.exist
-  })
-})
-```
-
-## Using Test Utilities
-
-### `renderWithProviders`
-
-This function wraps your component with necessary providers (Theme, Redux).
-
-```typescript
-import { renderWithProviders } from '../../utils/spec/testUtils'
-
-// Render with theme only (default)
-const { container } = renderWithProviders(<MyComponent />, { withTheme: true })
-
-// Render with both theme and Redux
-const { container } = renderWithProviders(<MyComponent />, { 
-  withTheme: true,
-  withRedux: true 
-})
-
-// Render with custom theme
-import { createTheme } from '@mui/material/styles'
-const darkTheme = createTheme({ palette: { mode: 'dark' } })
-const { container } = renderWithProviders(<MyComponent />, { 
-  theme: darkTheme 
-})
-
-// Render with custom Redux store
-import { configureStore } from '@reduxjs/toolkit'
-const customStore = configureStore({ /* ... */ })
-const { container } = renderWithProviders(<MyComponent />, { 
-  store: customStore,
-  withRedux: true
-})
-```
-
-### `createMockChartData`
-
-Helper function to generate mock chart data:
-
-```typescript
-import { createMockChartData } from '../../utils/spec/testUtils'
-
-// Create 10 data points (default)
-const data = createMockChartData()
-
-// Create specific number of points
-const data = createMockChartData(50)
-```
-
-### Global Mocks
-
-The test utilities automatically set up global mocks:
-- **ResizeObserver** - Mocked for components using `react-resize-detector`
-
-## Common Testing Patterns
-
-### Testing Rendering
-
-```typescript
-it('should render without crashing', () => {
-  const { container } = renderWithProviders(<MyComponent />)
-  expect(container).to.exist
-})
-
-it('should render specific element', () => {
-  const { container } = renderWithProviders(<MyComponent />)
-  const element = container.querySelector('.my-class')
-  expect(element).to.exist
-})
-```
-
-### Testing Props
-
-```typescript
-it('should accept all valid props', () => {
-  const props = {
-    title: 'Test',
-    value: 123,
-    onchange: () => {},
-  }
-  const { container } = renderWithProviders(<MyComponent {...props} />)
-  expect(container).to.exist
-})
-```
-
-### Testing User Interactions
-
-```typescript
-import { userEvent } from '../../utils/spec/testUtils'
-
-it('should handle click events', async () => {
-  const { container } = renderWithProviders(<MyComponent />)
-  const button = container.querySelector('button')
-  
-  if (button) {
-    await userEvent.click(button)
-    // Assert expected behavior
-  }
-})
-```
-
-### Testing Different States
-
-```typescript
-it('should render empty state', () => {
-  const { container } = renderWithProviders(<MyComponent data={[]} />)
-  // Assert empty state
-})
-
-it('should render with data', () => {
-  const data = createMockChartData(5)
-  const { container } = renderWithProviders(<MyComponent data={data} />)
-  // Assert data is rendered
-})
-```
-
-### Testing SVG Components
-
-```typescript
-it('should render SVG elements', () => {
-  const { container } = renderWithProviders(<ChartComponent />)
-  
-  const svg = container.querySelector('svg')
-  expect(svg).to.exist
-  
-  const paths = container.querySelectorAll('path')
-  expect(paths.length).to.be.greaterThan(0)
-  
-  const circles = container.querySelectorAll('circle')
-  expect(circles.length).to.equal(5)
-})
-```
-
-### Testing Edge Cases
-
-```typescript
-describe('Edge Cases', () => {
-  it('should handle negative values', () => {
-    const data = [{ x: 1, y: -10 }, { x: 2, y: -20 }]
-    const { container } = renderWithProviders(<MyComponent data={data} />)
-    expect(container.querySelector('svg')).to.exist
-  })
-
-  it('should handle empty arrays', () => {
-    const { container } = renderWithProviders(<MyComponent data={[]} />)
-    expect(container).to.exist
-  })
-
-  it('should handle very large numbers', () => {
-    const data = [{ x: 1, y: 1000000 }]
-    const { container } = renderWithProviders(<MyComponent data={data} />)
-    expect(container).to.exist
-  })
-})
-```
-
-## Running Tests
-
-### Run all tests
-```bash
-yarn test
-```
-
-### Run specific test file
-```bash
-npx mocha --require tsx --require source-map-support/register "src/components/MyComponent/MyComponent.spec.tsx"
-```
-
-### Run tests in watch mode
-```bash
-npx mocha --require tsx --require source-map-support/register --watch "src/**/*.spec.{ts,tsx}"
-```
-
-## Best Practices
-
-1. **Test Behavior, Not Implementation**
-   - Focus on what the component does, not how it does it
-   - Test user-facing behavior and output
-
-2. **Use Descriptive Test Names**
-   ```typescript
-   // Good
-   it('should render error message when validation fails')
-   
-   // Bad
-   it('test1')
-   ```
-
-3. **Group Related Tests**
-   ```typescript
-   describe('MyComponent', () => {
-     describe('Rendering', () => {
-       it('should render correctly')
-       it('should render with props')
-     })
-     
-     describe('Interactions', () => {
-       it('should handle clicks')
-       it('should handle keyboard input')
-     })
-   })
-   ```
-
-4. **Keep Tests Independent**
-   - Each test should be able to run in isolation
-   - Don't rely on test execution order
-   - Clean up after each test if needed
-
-5. **Test Edge Cases**
-   - Empty data
-   - Null/undefined values
-   - Very large/small numbers
-   - Negative values
-   - Single item arrays
-
-6. **Use Chai Assertions**
-   ```typescript
-   expect(value).to.exist
-   expect(value).to.be.true
-   expect(value).to.equal(expected)
-   expect(array).to.have.length(5)
-   expect(number).to.be.greaterThan(0)
-   ```
-
-## Example: Complete Test Suite
-
-See `src/components/Chart/Chart.spec.tsx` for a comprehensive example that demonstrates:
-- Multiple test groups (Rendering, Data Visualization, Edge Cases, etc.)
-- Testing with different props and configurations
-- Testing SVG elements
-- Testing theme integration
-- Performance testing
-- Edge case coverage
-
-## Troubleshooting
-
-### "ResizeObserver is not defined"
-This is automatically mocked by the test utilities. Make sure you're importing from `testUtils.tsx`.
-
-### "Cannot find module"
-Check your import paths. Remember to use relative paths from the test file.
-
-### "Window is not defined"
-Make sure `jsdom-global/register` is imported in testUtils.tsx.
-
-### Tests timing out
-Increase the timeout in your test:
-```typescript
-it('should complete async operation', function() {
-  this.timeout(5000) // 5 seconds
-  // test code
-})
-```
-
-## Adding New Test Utilities
-
-To add new helper functions, update `src/utils/spec/testUtils.tsx`:
-
-```typescript
-export function myNewHelper() {
-  // Helper implementation
-}
-```
-
-Then use it in your tests:
-```typescript
-import { myNewHelper } from '../../utils/spec/testUtils'
-```

app/package.json

@@ -6,40 +6,33 @@
   "scripts": {
     "build": "webpack --mode production",
     "dev": "node_modules/.bin/webpack-dev-server --mode development --progress",
-    "test": "mocha --require tsx --require source-map-support/register --recursive 'src/*/**/*.spec.{ts,tsx}'",
-    "mochatest": "mocha --require tsx --require source-map-support/register --recursive 'src/*/**/*.spec.{ts,tsx}'"
+    "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"
   },
   "engines": {
     "node": ">=20"
   },
   "author": "",
-  "license": "CC-BY-SA-4.0",
+  "license": "CC-BY-ND-4.0",
   "dependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^7.3.6",
-    "@mui/lab": "^7.0.1-beta.20",
-    "@mui/material": "^7.3.6",
-    "@mui/styles": "^6.4.8",
-    "@react-spring/web": "^9.7.5",
-    "@types/react-transition-group": "^4.4.11",
-    "@visx/axis": "^3.10.1",
-    "@visx/grid": "^3.5.0",
-    "@visx/tooltip": "^3.3.0",
-    "@visx/xychart": "^3.10.2",
+    "@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",
     "ace-builds": "^1.4.11",
-    "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",
+    "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",
     "events": "^3.3.0",
     "get-value": "^3.0.1",
-    "immutable": "^4.3.7",
+    "immutable": "^4.0.0-rc.12",
     "in-viewport": "^3.6.0",
-    "js-base64": "^3.7.8",
+    "js-base64": "^2.5.1",
     "json-to-ast": "^2.1.0",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
@@ -48,63 +41,57 @@
     "os-browserify": "^0.3.0",
     "parse-duration": "^0.1.1",
     "path-browserify": "^1.0.1",
-    "prismjs": "^1.29.0",
-    "react": "^19.2.3",
-    "react-ace": "^14.0.1",
-    "react-dom": "^19.2.3",
-    "react-redux": "^9.2.0",
-    "react-resize-detector": "^11.0.1",
-    "react-split-pane": "^0.1.92",
-    "react-transition-group": "^4.4.5",
-    "redux": "^5.0.1",
-    "redux-batched-actions": "^0.5.0",
-    "redux-thunk": "^3.1.0",
+    "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",
     "sha1": "^1.1.1",
     "socket.io-client": "^4.8.1",
     "url": "^0.11.4",
-    "uuid": "^11.0.0"
+    "uuid": "7"
   },
   "devDependencies": {
-    "@babel/runtime": "^7.28.4",
-    "@reduxjs/toolkit": "2.5.0",
-    "@testing-library/dom": "10.4.0",
-    "@testing-library/react": "16.1.0",
-    "@testing-library/user-event": "14.5.2",
-    "@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": "^19.2.7",
-    "@types/react-dom": "^19.2.3",
-    "@types/react-redux": "^7.1.34",
-    "@types/react-resize-detector": "^4.0.3",
+    "@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",
     "@types/sha1": "^1.1.1",
     "@types/socket.io-client": "^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",
+    "@types/uuid": "^7.0.2",
+    "@types/vis": "^4.21.9",
+    "chai": "^4.2.0",
+    "cross-env": "^7.0.2",
+    "css-loader": "^3.0.0",
     "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.6.3",
-    "jsdom": "25.0.1",
-    "jsdom-global": "3.0.2",
+    "html-webpack-plugin": "^5.5.0",
     "lodash": "^4.17.21",
-    "mocha": "^10.8.2",
-    "moment": "^2.30.1",
-    "node-loader": "^2.0.0",
-    "source-map-loader": "^5.0.0",
-    "style-loader": "^4.0.0",
+    "mocha": "^10.4.0",
+    "moment": "^2.29.1",
+    "node-loader": "^0.6.0",
+    "source-map-loader": "^0.2.4",
+    "style-loader": "^1",
     "ts-loader": "^9.5.1",
-    "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"
+    "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"
   },
   "peerDependencies": {
-    "electron": "^39"
+    "electron": "^29"
   }
 }

app/src/actions/Publish.ts

@@ -15,7 +15,7 @@ export const setTopic = (topic?: string): Action => {
 }
 
 export const openFile =
-  (encoding: BufferEncoding = 'utf8') =>
+  (encoding: 'utf8' = '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: BufferEncoding): Promise<FileParameters | undefined> {
+async function getFileContent(encoding: string): Promise<FileParameters | undefined> {
   const rejectReasons = {
     noFileSelected: 'No file selected',
     errorReadingFile: 'Error reading file',

app/src/actions/Tree.ts

@@ -7,7 +7,7 @@ import { batchActions } from 'redux-batched-actions'
 import { globalActions } from './'
 import { setTopic } from './Publish'
 import { TopicViewModel } from '../model/TopicViewModel'
-import debounce from 'lodash.debounce'
+const debounce = require('lodash.debounce')
 export { clearTopic } from './clearTopic'
 
 export { moveSelectionUpOrDownwards, moveInward, moveOutward } from './visibleTreeTraversal'

app/src/browserEventBus.ts

@@ -1,127 +0,0 @@
-// Browser-specific EventBus implementation using Socket.io
-// This file contains the socket.io-client dependency which belongs in the app layer
-import io, { Socket } from 'socket.io-client'
-import { SocketIOClientEventBus } from '../../events/EventSystem/SocketIOClientEventBus'
-import { Rpc } from '../../events/EventSystem/Rpc'
-
-// Get auth from sessionStorage or use empty (will show login dialog)
-let username = typeof sessionStorage !== 'undefined' ? sessionStorage.getItem('mqtt-explorer-username') || '' : ''
-let password = typeof sessionStorage !== 'undefined' ? sessionStorage.getItem('mqtt-explorer-password') || '' : ''
-
-// Connect to the server (same origin in browser mode)
-const socket: Socket = io({
-  auth: {
-    username,
-    password,
-  },
-  reconnection: true,
-  reconnectionDelay: 1000,
-  reconnectionDelayMax: 5000,
-  reconnectionAttempts: Infinity,
-  transports: ['websocket', 'polling'],
-  autoConnect: false, // Don't auto-connect, we'll connect manually after checking credentials
-})
-
-// Handle connection errors
-socket.on('connect_error', (error) => {
-  console.error('Socket connection error:', error.message)
-  
-  // Check if it's an authentication error
-  if (error.message.includes('Invalid credentials') || 
-      error.message.includes('Authentication required') ||
-      error.message.includes('Too many')) {
-    // Clear invalid credentials from sessionStorage
-    if (typeof sessionStorage !== 'undefined') {
-      sessionStorage.removeItem('mqtt-explorer-username')
-      sessionStorage.removeItem('mqtt-explorer-password')
-    }
-    
-    // Dispatch custom event that BrowserAuthWrapper can listen to
-    if (typeof window !== 'undefined') {
-      window.dispatchEvent(new CustomEvent('mqtt-auth-error', { 
-        detail: { message: error.message } 
-      }))
-    }
-  }
-})
-
-socket.on('disconnect', (reason) => {
-  console.log('Socket disconnected:', reason)
-})
-
-socket.on('connect', () => {
-  console.log('Socket connected successfully')
-  
-  // Dispatch custom event that BrowserAuthWrapper can listen to
-  if (typeof window !== 'undefined') {
-    window.dispatchEvent(new CustomEvent('mqtt-auth-success', { 
-      detail: { message: 'Authentication successful' } 
-    }))
-  }
-})
-
-// Listen for auth-status from server (sent on connection)
-socket.on('auth-status', (data: { authDisabled: boolean }) => {
-  console.log('Auth status received from server:', data)
-  
-  // Dispatch custom event with auth status
-  if (typeof window !== 'undefined') {
-    window.dispatchEvent(new CustomEvent('mqtt-auth-status', { 
-      detail: { authDisabled: data.authDisabled } 
-    }))
-  }
-})
-
-/**
- * Update socket authentication credentials and attempt to reconnect
- * @param newUsername New username
- * @param newPassword New password
- */
-export function updateSocketAuth(newUsername: string, newPassword: string) {
-  username = newUsername
-  password = newPassword
-  
-  // Update socket auth
-  socket.auth = {
-    username: newUsername,
-    password: newPassword,
-  }
-  
-  // Store in sessionStorage
-  if (typeof sessionStorage !== 'undefined') {
-    sessionStorage.setItem('mqtt-explorer-username', newUsername)
-    sessionStorage.setItem('mqtt-explorer-password', newPassword)
-  }
-  
-  // Disconnect if connected, then reconnect with new credentials
-  if (socket.connected) {
-    socket.disconnect()
-  }
-  socket.connect()
-}
-
-/**
- * Connect the socket (used on initial page load)
- */
-export function connectSocket() {
-  if (!socket.connected) {
-    socket.connect()
-  }
-}
-
-export const rendererEvents = new SocketIOClientEventBus(socket)
-export const rendererRpc = new Rpc(rendererEvents)
-
-// Export socket instance for error monitoring
-export const browserSocket = socket
-
-// In browser mode, the backend is on the server
-// For compatibility, export same instances (renderer communicates with server backend via socket)
-export const backendEvents = rendererEvents
-export const backendRpc = rendererRpc
-
-// Re-export all events from the events module so imports work correctly
-export * from '../../events/Events'
-export * from '../../events/EventsV2'
-export * from '../../events/EventSystem/EventDispatcher'
-export * from '../../events/EventSystem/EventBusInterface'

app/src/components/App.tsx

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

app/src/components/BrowserAuthWrapper.tsx

@@ -1,133 +1,53 @@
 import * as React from 'react'
 import { LoginDialog } from './LoginDialog'
-import { updateSocketAuth, connectSocket } from '../browserEventBus'
-import { isBrowserMode } from '../utils/browserMode'
-import { AuthContext } from '../contexts/AuthContext'
 
 interface BrowserAuthWrapperProps {
   children: React.ReactNode
 }
 
+const isBrowserMode =
+  typeof window !== 'undefined' && (typeof process === 'undefined' || process.env?.BROWSER_MODE === 'true')
+
 export function BrowserAuthWrapper(props: BrowserAuthWrapperProps) {
   const [isAuthenticated, setIsAuthenticated] = React.useState(false)
   const [loginError, setLoginError] = React.useState<string | undefined>()
   const [showLogin, setShowLogin] = React.useState(false)
-  const [waitTimeSeconds, setWaitTimeSeconds] = React.useState<number | undefined>()
-  const [isConnecting, setIsConnecting] = React.useState(false)
-  const [authCheckComplete, setAuthCheckComplete] = React.useState(false)
-  const [authDisabled, setAuthDisabled] = React.useState(false)
 
   React.useEffect(() => {
     if (!isBrowserMode) {
       // Not in browser mode, skip authentication
       setIsAuthenticated(true)
-      setAuthCheckComplete(true)
       return
     }
 
-    // Listen for auth status from socket connection
-    const handleAuthStatus = (event: CustomEvent) => {
-      const { authDisabled } = event.detail
-      setAuthDisabled(authDisabled)
-      
-      if (authDisabled) {
-        // Authentication is disabled on server
-        console.log('Authentication is disabled on server, skipping login')
-        setIsAuthenticated(true)
-        setShowLogin(false)
-        setAuthCheckComplete(true)
-      } else {
-        // Authentication is enabled, check if we have credentials
-        setAuthCheckComplete(true)
-        
-        const username = sessionStorage.getItem('mqtt-explorer-username')
-        const password = sessionStorage.getItem('mqtt-explorer-password')
+    // Check if already authenticated
+    const username = sessionStorage.getItem('mqtt-explorer-username')
+    const password = sessionStorage.getItem('mqtt-explorer-password')
 
-        if (username && password) {
-          // Credentials exist, connection will authenticate automatically
-          setIsConnecting(true)
-        } else {
-          // No credentials, show login dialog
-          setShowLogin(true)
-        }
-      }
-    }
-
-    // Listen for successful authentication from socket
-    const handleAuthSuccess = (event: CustomEvent) => {
-      console.log('Authentication successful')
+    if (username && password) {
+      // Try to use stored credentials
       setIsAuthenticated(true)
-      setShowLogin(false)
-      setLoginError(undefined)
-      setWaitTimeSeconds(undefined)
-      setIsConnecting(false)
-    }
-
-    // Listen for authentication errors from socket
-    const handleAuthError = (event: CustomEvent) => {
-      const errorMessage = event.detail?.message || 'Authentication failed'
-      console.error('Authentication error:', errorMessage)
-      
-      // Mark auth check as complete - we now know auth is required
-      setAuthCheckComplete(true)
-      
-      // Clear authentication state
-      setIsAuthenticated(false)
+    } else {
+      // Show login dialog
       setShowLogin(true)
-      setIsConnecting(false)
-      
-      // Extract wait time from error message (e.g., "Please wait 30 seconds")
-      const waitTimeMatch = errorMessage.match(/(\d+)\s+seconds?/)
-      if (waitTimeMatch) {
-        const seconds = parseInt(waitTimeMatch[1], 10)
-        // Add a few seconds margin to the countdown
-        setWaitTimeSeconds(seconds + 3)
-      } else {
-        setWaitTimeSeconds(undefined)
-      }
-      
-      // Set user-friendly error message based on error type
-      // Error messages from server already include wait times
-      if (errorMessage.includes('Too many failed authentication attempts')) {
-        setLoginError(errorMessage)
-      } else if (errorMessage.includes('Invalid credentials')) {
-        setLoginError(errorMessage)
-      } else if (errorMessage.includes('Authentication required')) {
-        setLoginError('Please enter your username and password.')
-        setWaitTimeSeconds(undefined)
-      } else {
-        setLoginError('Authentication failed. Please try again.')
-        setWaitTimeSeconds(undefined)
-      }
-    }
-
-    // Connect socket to trigger auth-status event
-    connectSocket()
-
-    window.addEventListener('mqtt-auth-status', handleAuthStatus as EventListener)
-    window.addEventListener('mqtt-auth-success', handleAuthSuccess as EventListener)
-    window.addEventListener('mqtt-auth-error', handleAuthError as EventListener)
-
-    return () => {
-      window.removeEventListener('mqtt-auth-status', handleAuthStatus as EventListener)
-      window.removeEventListener('mqtt-auth-success', handleAuthSuccess as EventListener)
-      window.removeEventListener('mqtt-auth-error', handleAuthError as EventListener)
     }
   }, [])
 
-  const handleLogin = (username: string, password: string) => {
+  const handleLogin = async (username: string, password: string) => {
     try {
-      // Clear any previous error
+      // Store credentials in session storage
+      sessionStorage.setItem('mqtt-explorer-username', username)
+      sessionStorage.setItem('mqtt-explorer-password', password)
+
+      // The socket will use these credentials on next connection
+      setIsAuthenticated(true)
+      setShowLogin(false)
       setLoginError(undefined)
-      setWaitTimeSeconds(undefined)
-      setIsConnecting(true)
-      
-      // Update socket auth and reconnect (no page reload needed)
-      updateSocketAuth(username, password)
+
+      // Reload to reinitialize socket with new auth
+      window.location.reload()
     } catch (error) {
-      console.error('Failed to update socket auth:', error)
-      setLoginError('Failed to connect. Please try again.')
-      setIsConnecting(false)
+      setLoginError('Login failed. Please check your credentials.')
     }
   }
 
@@ -136,14 +56,9 @@ export function BrowserAuthWrapper(props: BrowserAuthWrapperProps) {
     return <>{props.children}</>
   }
 
-  // Show nothing while checking auth status to avoid flash
-  if (!authCheckComplete) {
-    return null
-  }
-
   if (!isAuthenticated) {
-    return <LoginDialog open={showLogin} onLogin={handleLogin} error={loginError} waitTimeSeconds={waitTimeSeconds} />
+    return <LoginDialog open={showLogin} onLogin={handleLogin} error={loginError} />
   }
 
-  return <AuthContext.Provider value={{ authDisabled }}>{props.children}</AuthContext.Provider>
+  return <>{props.children}</>
 }

app/src/components/Chart/Chart.domain.spec.tsx

@@ -1,112 +0,0 @@
-import { expect } from 'chai'
-import { renderWithProviders } from '../../utils/spec/testUtils'
-import Chart from './Chart'
-
-describe('Chart X-Axis Domain Investigation', () => {
-  it('should spread points across X-axis with sequential timestamps', () => {
-    // Create 5 data points, 1 second (1000ms) apart
-    const now = Date.now()
-    const data = [
-      { x: now - 4000, y: 20 },
-      { x: now - 3000, y: 21 },
-      { x: now - 2000, y: 22 },
-      { x: now - 1000, y: 23 },
-      { x: now, y: 24 }
-    ]
-
-    const { container } = renderWithProviders(<Chart data={data} />)
-    
-    // Find all circle elements (data points)
-    const circles = container.querySelectorAll('svg circle')
-    expect(circles).to.have.length(5)
-
-    // Extract cx (X-position) values
-    const cxValues: number[] = []
-    circles.forEach(circle => {
-      const cx = circle.getAttribute('cx')
-      if (cx) {
-        cxValues.push(parseFloat(cx))
-      }
-    })
-
-    // Log for debugging
-    console.log('\n========== X-AXIS DOMAIN INVESTIGATION ==========')
-    console.log('Data X values (timestamps):')
-    data.forEach((d, i) => console.log(`  Point ${i}: ${d.x} (${new Date(d.x).toISOString()})`))
-    console.log(`\nData X range: ${data[data.length - 1].x - data[0].x}ms (${(data[data.length - 1].x - data[0].x) / 1000}s)`)
-    
-    console.log('\nRendered circle CX positions:')
-    cxValues.forEach((cx, i) => console.log(`  Circle ${i}: cx=${cx.toFixed(2)}px`))
-    
-    const minCx = Math.min(...cxValues)
-    const maxCx = Math.max(...cxValues)
-    const cxRange = maxCx - minCx
-    
-    console.log(`\nCX position range: ${cxRange.toFixed(2)}px (from ${minCx.toFixed(2)} to ${maxCx.toFixed(2)})`)
-    console.log(`Points per pixel: ${(cxValues.length / cxRange).toFixed(4)}`)
-    
-    // Calculate spacing between consecutive points
-    const spacings: number[] = []
-    for (let i = 1; i < cxValues.length; i++) {
-      spacings.push(cxValues[i] - cxValues[i - 1])
-    }
-    console.log('\nSpacing between consecutive points:')
-    spacings.forEach((s, i) => console.log(`  ${i} to ${i+1}: ${s.toFixed(2)}px`))
-    
-    const avgSpacing = spacings.reduce((a, b) => a + b, 0) / spacings.length
-    console.log(`Average spacing: ${avgSpacing.toFixed(2)}px`)
-    console.log('=================================================\n')
-
-    // Assertions:
-    // 1. Points should be spread out (CX range should be significant, not bunched)
-    expect(cxRange).to.be.greaterThan(50, 'Points should be spread across at least 50px')
-    
-    // 2. Points should be in ascending order (left to right)
-    for (let i = 1; i < cxValues.length; i++) {
-      expect(cxValues[i]).to.be.greaterThan(cxValues[i - 1], 
-        `Point ${i} (cx=${cxValues[i]}) should be to the right of point ${i-1} (cx=${cxValues[i-1]})`)
-    }
-    
-    // 3. Spacing should be relatively uniform (since data points are equally spaced in time)
-    const spacingVariance = spacings.map(s => Math.abs(s - avgSpacing))
-    const maxVariance = Math.max(...spacingVariance)
-    expect(maxVariance).to.be.lessThan(avgSpacing * 0.5, 
-      'Spacing between points should be relatively uniform')
-  })
-
-  it('should handle points bunched at far right correctly', () => {
-    // Simulate the "bunched up" scenario with very large timestamps
-    const largeTimestamp = 1703347200000 // Dec 23, 2023
-    const data = [
-      { x: largeTimestamp, y: 20 },
-      { x: largeTimestamp + 1000, y: 21 },
-      { x: largeTimestamp + 2000, y: 22 },
-      { x: largeTimestamp + 3000, y: 23 },
-      { x: largeTimestamp + 4000, y: 24 }
-    ]
-
-    const { container } = renderWithProviders(<Chart data={data} />)
-    
-    const circles = container.querySelectorAll('svg circle')
-    const cxValues: number[] = []
-    circles.forEach(circle => {
-      const cx = circle.getAttribute('cx')
-      if (cx) {
-        cxValues.push(parseFloat(cx))
-      }
-    })
-
-    console.log('\n========== LARGE TIMESTAMP TEST ==========')
-    console.log('Data X values:', data.map(d => d.x))
-    console.log('Rendered CX values:', cxValues.map(v => v.toFixed(2)))
-    
-    const minCx = Math.min(...cxValues)
-    const maxCx = Math.max(...cxValues)
-    console.log(`CX range: ${(maxCx - minCx).toFixed(2)}px`)
-    console.log('==========================================\n')
-
-    // Points should still be spread out even with large timestamps
-    expect(maxCx - minCx).to.be.greaterThan(50, 
-      'Points with large timestamps should still be spread across the chart')
-  })
-})

app/src/components/Chart/Chart.spec.tsx

@@ -1,514 +0,0 @@
-/**
- * Chart Component Tests
- * 
- * These tests verify the Chart component functionality including:
- * - Rendering with various data configurations
- * - Theme integration
- * - Interactive features (tooltips, hover states)
- * - Different curve interpolation types
- * - Custom domains and ranges
- * - Responsive behavior
- */
-
-import React from 'react'
-import { expect } from 'chai'
-import { describe, it } from 'mocha'
-import Chart, { Props as ChartProps } from './Chart'
-import { renderWithProviders, createMockChartData, screen } from '../../utils/spec/testUtils'
-import { PlotCurveTypes } from '../../reducers/Charts'
-
-describe('Chart Component', () => {
-  describe('Basic Rendering', () => {
-    it('should render without crashing with valid data', () => {
-      const data = createMockChartData(5)
-      const { container } = renderWithProviders(<Chart data={data} />, { withTheme: true })
-      
-      expect(container).to.exist
-      expect(container.querySelector('svg')).to.exist
-    })
-
-    it('should render NoData component when data is empty', () => {
-      const { container } = renderWithProviders(<Chart data={[]} />, { withTheme: true })
-      
-      expect(container).to.exist
-      // NoData component should be rendered
-      const noDataElement = container.querySelector('div')
-      expect(noDataElement).to.exist
-    })
-
-    it('should render chart with correct height', () => {
-      const data = createMockChartData(5)
-      const { container } = renderWithProviders(<Chart data={data} />, { withTheme: true })
-      
-      const chartContainer = container.querySelector('[style*="height"]') as HTMLElement
-      expect(chartContainer).to.exist
-      expect(chartContainer.style.height).to.equal('150px')
-    })
-
-    it('should render SVG chart elements', () => {
-      const data = createMockChartData(5)
-      const { container } = renderWithProviders(<Chart data={data} />, { withTheme: true })
-      
-      // Check for SVG element
-      const svg = container.querySelector('svg')
-      expect(svg).to.exist
-      
-      // Check for chart elements (paths for line series)
-      const paths = container.querySelectorAll('path')
-      expect(paths.length).to.be.greaterThan(0)
-    })
-  })
-
-  describe('Data Visualization', () => {
-    it('should render data points as glyphs', () => {
-      const data = createMockChartData(3)
-      const { container } = renderWithProviders(<Chart data={data} />, { withTheme: true })
-      
-      // Check for circles (glyphs representing data points)
-      const circles = container.querySelectorAll('circle')
-      expect(circles.length).to.be.greaterThan(0)
-    })
-
-    it('should render exact number of data points matching data length', () => {
-      const dataLength = 5
-      const data = createMockChartData(dataLength)
-      const { container } = renderWithProviders(<Chart data={data} />, { withTheme: true })
-      
-      // Each data point should render as a circle
-      const circles = container.querySelectorAll('circle')
-      expect(circles.length).to.equal(dataLength, `Expected ${dataLength} circles for ${dataLength} data points`)
-      
-      // Verify each circle has proper attributes
-      circles.forEach((circle, index) => {
-        expect(circle.getAttribute('cx')).to.exist
-        expect(circle.getAttribute('cy')).to.exist
-        expect(circle.getAttribute('r')).to.equal('3')
-        expect(circle.getAttribute('fill')).to.exist
-      })
-    })
-
-    it('should position data points with valid coordinates', () => {
-      const data = createMockChartData(3)
-      const { container } = renderWithProviders(<Chart data={data} />, { withTheme: true })
-      
-      const circles = container.querySelectorAll('circle')
-      circles.forEach((circle) => {
-        const cx = parseFloat(circle.getAttribute('cx') || '0')
-        const cy = parseFloat(circle.getAttribute('cy') || '0')
-        
-        // Coordinates should be valid numbers
-        expect(cx).to.be.a('number')
-        expect(cy).to.be.a('number')
-        expect(isNaN(cx)).to.be.false
-        expect(isNaN(cy)).to.be.false
-        
-        // Coordinates should be within chart bounds (positive values)
-        expect(cx).to.be.greaterThan(0)
-        expect(cy).to.be.greaterThan(0)
-      })
-    })
-
-    it('should render line connecting data points', () => {
-      const data = createMockChartData(5)
-      const { container } = renderWithProviders(<Chart data={data} />, { withTheme: true })
-      
-      // Line series should create a path element
-      const paths = container.querySelectorAll('path')
-      expect(paths.length).to.be.greaterThan(0)
-    })
-
-    it('should handle single data point', () => {
-      const data = [{ x: Date.now(), y: 50 }]
-      const { container } = renderWithProviders(<Chart data={data} />, { withTheme: true })
-      
-      expect(container.querySelector('svg')).to.exist
-      const circles = container.querySelectorAll('circle')
-      expect(circles.length).to.equal(1, 'Single data point should render as one circle')
-    })
-
-    it('should handle large datasets', () => {
-      const data = createMockChartData(100)
-      const { container } = renderWithProviders(<Chart data={data} />, { withTheme: true })
-      
-      expect(container.querySelector('svg')).to.exist
-      const circles = container.querySelectorAll('circle')
-      expect(circles.length).to.equal(100, '100 data points should render as 100 circles')
-    })
-  })
-
-  describe('Curve Interpolation', () => {
-    const curveTypes: PlotCurveTypes[] = ['curve', 'linear', 'cubic_basis_spline', 'step_after', 'step_before']
-
-    curveTypes.forEach((interpolation) => {
-      it(`should render with ${interpolation} interpolation`, () => {
-        const data = createMockChartData(5)
-        const { container } = renderWithProviders(
-          <Chart data={data} interpolation={interpolation} />,
-          { withTheme: true }
-        )
-        
-        expect(container.querySelector('svg')).to.exist
-        const paths = container.querySelectorAll('path')
-        expect(paths.length).to.be.greaterThan(0)
-      })
-    })
-  })
-
-  describe('Custom Styling', () => {
-    it('should apply custom color', () => {
-      const data = createMockChartData(5)
-      const customColor = '#ff0000'
-      const { container } = renderWithProviders(
-        <Chart data={data} color={customColor} />,
-        { withTheme: true }
-      )
-      
-      // Check if custom color is applied to line or glyphs
-      const svg = container.querySelector('svg')
-      expect(svg).to.exist
-    })
-
-    it('should use theme colors when no custom color provided', () => {
-      const data = createMockChartData(5)
-      const { container } = renderWithProviders(<Chart data={data} />, { withTheme: true })
-      
-      expect(container.querySelector('svg')).to.exist
-    })
-  })
-
-  describe('Custom Domains and Ranges', () => {
-    it('should render with custom Y range', () => {
-      const data = createMockChartData(5)
-      const range: [number, number] = [0, 100]
-      const { container } = renderWithProviders(
-        <Chart data={data} range={range} />,
-        { withTheme: true }
-      )
-      
-      expect(container.querySelector('svg')).to.exist
-    })
-
-    it('should render with custom time range', () => {
-      const data = createMockChartData(5)
-      const timeRangeStart = 60000 // 1 minute
-      const { container } = renderWithProviders(
-        <Chart data={data} timeRangeStart={timeRangeStart} />,
-        { withTheme: true }
-      )
-      
-      expect(container.querySelector('svg')).to.exist
-    })
-
-    it('should render with partial Y range (only min)', () => {
-      const data = createMockChartData(5)
-      const range: [number?, number?] = [0, undefined]
-      const { container } = renderWithProviders(
-        <Chart data={data} range={range} />,
-        { withTheme: true }
-      )
-      
-      expect(container.querySelector('svg')).to.exist
-    })
-
-    it('should render with partial Y range (only max)', () => {
-      const data = createMockChartData(5)
-      const range: [number?, number?] = [undefined, 100]
-      const { container } = renderWithProviders(
-        <Chart data={data} range={range} />,
-        { withTheme: true }
-      )
-      
-      expect(container.querySelector('svg')).to.exist
-    })
-  })
-
-  describe('Chart Components', () => {
-    it('should render Y-axis', () => {
-      const data = createMockChartData(5)
-      const { container } = renderWithProviders(<Chart data={data} />, { withTheme: true })
-      
-      // Y-axis should be present (look for axis group or tick marks)
-      const svg = container.querySelector('svg')
-      expect(svg).to.exist
-      
-      // Axis typically contains text elements for labels
-      const texts = container.querySelectorAll('text')
-      expect(texts.length).to.be.greaterThan(0)
-    })
-
-    it('should render X-axis with time labels', () => {
-      const data = createMockChartData(5)
-      const { container } = renderWithProviders(<Chart data={data} />, { withTheme: true })
-      
-      // X-axis should be present with text labels
-      const svg = container.querySelector('svg')
-      expect(svg).to.exist
-      
-      // X-axis has text labels for timestamps
-      const texts = container.querySelectorAll('text')
-      expect(texts.length).to.be.greaterThan(0, 'X-axis and Y-axis should have text labels')
-      
-      // At least one text element should contain time format (e.g., contains ":")
-      let hasTimeFormat = false
-      texts.forEach((text) => {
-        if (text.textContent && text.textContent.includes(':')) {
-          hasTimeFormat = true
-        }
-      })
-      expect(hasTimeFormat).to.be.true
-    })
-
-    it('should render both X and Y axes', () => {
-      const data = createMockChartData(5)
-      const { container } = renderWithProviders(<Chart data={data} />, { withTheme: true })
-      
-      const svg = container.querySelector('svg')
-      expect(svg).to.exist
-      
-      // Both axes should render tick marks (lines)
-      const lines = container.querySelectorAll('line')
-      expect(lines.length).to.be.greaterThan(0, 'Axes should render tick marks')
-      
-      // Both axes should have labels (text)
-      const texts = container.querySelectorAll('text')
-      expect(texts.length).to.be.greaterThan(2, 'Both axes should have multiple labels')
-    })
-
-    it('should render grid lines', () => {
-      const data = createMockChartData(5)
-      const { container } = renderWithProviders(<Chart data={data} />, { withTheme: true })
-      
-      // Grid lines are rendered as line elements
-      const svg = container.querySelector('svg')
-      expect(svg).to.exist
-    })
-
-    it('should have proper chart margins', () => {
-      const data = createMockChartData(5)
-      const { container } = renderWithProviders(<Chart data={data} />, { withTheme: true })
-      
-      const svg = container.querySelector('svg')
-      expect(svg).to.exist
-      
-      // SVG should have proper dimensions
-      expect(svg?.getAttribute('width')).to.exist
-      expect(svg?.getAttribute('height')).to.exist
-    })
-  })
-
-  describe('Edge Cases', () => {
-    it('should handle negative values', () => {
-      const data = [
-        { x: Date.now() - 2000, y: -50 },
-        { x: Date.now() - 1000, y: -25 },
-        { x: Date.now(), y: -75 },
-      ]
-      const { container } = renderWithProviders(<Chart data={data} />, { withTheme: true })
-      
-      expect(container.querySelector('svg')).to.exist
-    })
-
-    it('should handle zero values', () => {
-      const data = [
-        { x: Date.now() - 2000, y: 0 },
-        { x: Date.now() - 1000, y: 0 },
-        { x: Date.now(), y: 0 },
-      ]
-      const { container } = renderWithProviders(<Chart data={data} />, { withTheme: true })
-      
-      expect(container.querySelector('svg')).to.exist
-    })
-
-    it('should handle very large numbers', () => {
-      const data = [
-        { x: Date.now() - 2000, y: 1000000 },
-        { x: Date.now() - 1000, y: 2000000 },
-        { x: Date.now(), y: 3000000 },
-      ]
-      const { container } = renderWithProviders(<Chart data={data} />, { withTheme: true })
-      
-      expect(container.querySelector('svg')).to.exist
-      // Y-axis should abbreviate large numbers
-      const texts = container.querySelectorAll('text')
-      expect(texts.length).to.be.greaterThan(0)
-    })
-
-    it('should handle identical values', () => {
-      const data = [
-        { x: Date.now() - 2000, y: 50 },
-        { x: Date.now() - 1000, y: 50 },
-        { x: Date.now(), y: 50 },
-      ]
-      const { container } = renderWithProviders(<Chart data={data} />, { withTheme: true })
-      
-      expect(container.querySelector('svg')).to.exist
-    })
-  })
-
-  describe('Component Props', () => {
-    it('should accept all valid props without errors', () => {
-      const data = createMockChartData(5)
-      const props: ChartProps = {
-        data,
-        interpolation: 'curve',
-        range: [0, 100],
-        timeRangeStart: 60000,
-        color: '#00ff00',
-      }
-      
-      const { container } = renderWithProviders(<Chart {...props} />, { withTheme: true })
-      expect(container.querySelector('svg')).to.exist
-    })
-
-    it('should work with minimal props', () => {
-      const data = createMockChartData(5)
-      const { container } = renderWithProviders(<Chart data={data} />, { withTheme: true })
-      
-      expect(container.querySelector('svg')).to.exist
-    })
-  })
-
-  describe('Theme Integration', () => {
-    it('should render in light theme', () => {
-      const data = createMockChartData(5)
-      const { container } = renderWithProviders(<Chart data={data} />, { withTheme: true })
-      
-      expect(container.querySelector('svg')).to.exist
-    })
-
-    // Note: Testing dark theme would require a custom theme provider
-    // This demonstrates how the test structure supports theme variations
-  })
-
-  describe('Performance', () => {
-    it('should memoize component with same props', () => {
-      const data = createMockChartData(5)
-      const { rerender } = renderWithProviders(<Chart data={data} />, { withTheme: true })
-      
-      // Component should not re-render with same props due to React.memo
-      expect(() => {
-        rerender(<Chart data={data} />)
-      }).to.not.throw()
-    })
-
-    it('should handle rapid data updates', () => {
-      const { rerender, container } = renderWithProviders(
-        <Chart data={createMockChartData(5)} />,
-        { withTheme: true }
-      )
-      
-      // Simulate rapid updates
-      for (let i = 0; i < 10; i++) {
-        rerender(<Chart data={createMockChartData(5)} />)
-      }
-      
-      expect(container.querySelector('svg')).to.exist
-    })
-  })
-
-  describe('Interactive Data Updates', () => {
-    it('should dynamically update when data points are added', () => {
-      // Start with 3 data points
-      const initialData = createMockChartData(3)
-      const { rerender, container } = renderWithProviders(
-        <Chart data={initialData} />,
-        { withTheme: true }
-      )
-      
-      // Verify initial state: should have 3 data points
-      const initialCircles = container.querySelectorAll('circle')
-      expect(initialCircles.length).to.equal(3, 'Should initially render 3 data points')
-      
-      // Verify each initial circle has valid attributes
-      initialCircles.forEach((circle, index) => {
-        const cx = circle.getAttribute('cx')
-        const cy = circle.getAttribute('cy')
-        const r = circle.getAttribute('r')
-        
-        expect(cx).to.exist
-        expect(cy).to.exist
-        expect(r).to.equal('3')
-        expect(parseFloat(cx!)).to.be.a('number').and.not.NaN
-        expect(parseFloat(cy!)).to.be.a('number').and.not.NaN
-      })
-      
-      // Update state: add 2 more data points (total 5)
-      const updatedData = createMockChartData(5)
-      rerender(<Chart data={updatedData} />)
-      
-      // Verify updated state: should now have 5 data points
-      const updatedCircles = container.querySelectorAll('circle')
-      expect(updatedCircles.length).to.equal(5, 'Should render 5 data points after update')
-      
-      // Verify each updated circle has valid attributes
-      updatedCircles.forEach((circle, index) => {
-        const cx = circle.getAttribute('cx')
-        const cy = circle.getAttribute('cy')
-        const r = circle.getAttribute('r')
-        const fill = circle.getAttribute('fill')
-        
-        expect(cx).to.exist
-        expect(cy).to.exist
-        expect(r).to.equal('3')
-        expect(fill).to.exist
-        expect(parseFloat(cx!)).to.be.a('number').and.not.NaN
-        expect(parseFloat(cy!)).to.be.a('number').and.not.NaN
-        expect(parseFloat(cy!)).to.be.greaterThan(0, 'Y coordinate should be positive')
-      })
-      
-      // Verify the line path is updated to connect all 5 points
-      const linePath = container.querySelector('path[stroke]')
-      expect(linePath).to.exist
-      expect(linePath!.getAttribute('d')).to.exist
-      
-      // The path should start with MoveTo (M) command and contain curve/line commands
-      const pathData = linePath!.getAttribute('d')
-      expect(pathData).to.include('M') // MoveTo command for first point
-      // Path may contain 'L' (line) or 'C' (curve) commands depending on interpolation
-      expect(pathData!.length).to.be.greaterThan(10, 'Path should have substantial data for 5 points')
-    })
-
-    it('should handle data point removal', () => {
-      // Start with 5 data points
-      const initialData = createMockChartData(5)
-      const { rerender, container } = renderWithProviders(
-        <Chart data={initialData} />,
-        { withTheme: true }
-      )
-      
-      // Verify initial state
-      let circles = container.querySelectorAll('circle')
-      expect(circles.length).to.equal(5, 'Should initially render 5 data points')
-      
-      // Remove 2 data points (now 3)
-      const reducedData = createMockChartData(3)
-      rerender(<Chart data={reducedData} />)
-      
-      // Verify reduced state
-      circles = container.querySelectorAll('circle')
-      expect(circles.length).to.equal(3, 'Should render 3 data points after removal')
-    })
-
-    it('should maintain chart structure during data updates', () => {
-      const initialData = createMockChartData(3)
-      const { rerender, container } = renderWithProviders(
-        <Chart data={initialData} />,
-        { withTheme: true }
-      )
-      
-      // Verify chart structure exists initially
-      expect(container.querySelector('svg')).to.exist
-      expect(container.querySelectorAll('line').length).to.be.greaterThan(0, 'Should have axis/grid lines')
-      expect(container.querySelectorAll('text').length).to.be.greaterThan(0, 'Should have axis labels')
-      
-      // Update data
-      const updatedData = createMockChartData(5)
-      rerender(<Chart data={updatedData} />)
-      
-      // Verify chart structure is maintained after update
-      expect(container.querySelector('svg')).to.exist
-      expect(container.querySelectorAll('line').length).to.be.greaterThan(0, 'Should still have axis/grid lines')
-      expect(container.querySelectorAll('text').length).to.be.greaterThan(0, 'Should still have axis labels')
-    })
-  })
-})

app/src/components/Chart/Chart.tsx

@@ -1,166 +1,105 @@
 import DateFormatter from '../helper/DateFormatter'
 import NoData from './NoData'
 import NumberFormatter from '../helper/NumberFormatter'
-import React, { memo, useCallback, useMemo } from 'react'
+import React, { memo, useCallback } from 'react'
 import TooltipComponent from './TooltipComponent'
-import { useResizeDetector } from 'react-resize-detector'
-import { emphasize, useTheme } from '@mui/material/styles'
+import { default as ReactResizeDetector } from 'react-resize-detector'
+import { emphasize } from '@material-ui/core/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 { XYChart, Axis, Grid, LineSeries, GlyphSeries } from '@visx/xychart'
+import 'react-vis/dist/style.css'
+const { XYPlot, LineMarkSeries, YAxis, HorizontalGridLines, Hint } = require('react-vis')
 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
 }
 
-const CHART_HEIGHT = 150
+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 [hoveredPoint, setHoveredPoint] = React.useState<Point | undefined>()
-  const { width = 300, ref } = useResizeDetector()
-  const chartContainerRef = React.useRef<HTMLDivElement>(null)
+    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)
-    setHoveredPoint(undefined)
-  }, [])
-
-  const showTooltip = React.useCallback(
-    (point: Point) => {
-      if (!chartContainerRef.current) {
+    const showTooltip = React.useCallback((point: Point, something: { event: MouseEvent }) => {
+      if (!something) {
         return
       }
-      setHoveredPoint(point)
-      setTooltip({ point, value: hintFormatter(point), element: chartContainerRef.current })
-    },
-    [hintFormatter]
-  )
+      setTooltip({ point, value: hintFormatter(point), element: something.event.target as any })
+    }, [])
 
-  const paletteColor =
-    theme.palette.mode === 'light' ? theme.palette.secondary.dark : theme.palette.primary.light
-  const color = props.color ? props.color : paletteColor
+    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 highlightSelectedPoint = useCallback(
-    (point: Point) => {
-      const highlight = hoveredPoint && hoveredPoint.x === point.x && hoveredPoint.y === point.y
-      return highlight ? emphasize(color, 0.8) : color
-    },
-    [hoveredPoint, 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 formatXAxis = useCallback((timestamp: number) => {
-    const date = new Date(timestamp)
-    const hours = date.getHours().toString().padStart(2, '0')
-    const minutes = date.getMinutes().toString().padStart(2, '0')
-    const seconds = date.getSeconds().toString().padStart(2, '0')
-    return `${hours}:${minutes}:${seconds}`
-  }, [])
+    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: [number, number] = [-1, 1]
-  const dummyData = [{ x: -2, y: -2 }]
-
-  const accessors = useMemo(
-    () => ({
-      xAccessor: (d: Point) => d.x,
-      yAccessor: (d: Point) => d.y,
-    }),
-    []
-  )
-
-  return (
-    <div>
-      <div ref={ref} style={{ height: `${CHART_HEIGHT}px`, width: '100%', position: 'relative' }}>
-        {data.length === 0 ? <NoData /> : null}
-        <div ref={chartContainerRef}>
-          <XYChart
-            width={width || 300}
-            height={CHART_HEIGHT}
-            margin={{ top: 10, right: 10, bottom: 30, left: 50 }}
-            xScale={{ type: 'time', domain: xDomain || dummyDomain }}
-            yScale={{ type: 'linear', domain: hasData ? yDomain : dummyDomain }}
-            onPointerOut={onMouseLeave}
+    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}
           >
-            <Grid rows={true} columns={false} stroke={theme.palette.divider} strokeOpacity={0.3} />
-            <Axis 
-              orientation="left" 
-              numTicks={5}
-              tickFormat={formatYAxis} 
-              stroke={theme.palette.text.secondary} 
-              tickStroke={theme.palette.text.secondary}
-              tickLabelProps={() => ({ fontSize: 11, fill: theme.palette.text.secondary })}
-            />
-            <Axis 
-              orientation="bottom" 
-              numTicks={4}
-              tickFormat={formatXAxis} 
-              stroke={theme.palette.text.secondary} 
-              tickStroke={theme.palette.text.secondary}
-              tickLabelProps={() => ({ fontSize: 10, fill: theme.palette.text.secondary, textAnchor: 'middle' })}
-            />
-            <LineSeries
-              dataKey="line"
+            <HorizontalGridLines />
+            <YAxis width={45} tickFormat={formatYAxis} />
+            <LineMarkSeries
+              color={color}
+              colorType="literal"
+              getColor={highlightSelectedPoint}
+              onValueMouseOver={showTooltip}
+              size={3}
               data={hasData ? data : dummyData}
-              xAccessor={accessors.xAccessor}
-              yAccessor={accessors.yAccessor}
-              stroke={color}
-              strokeWidth={2}
               curve={mapCurveType(props.interpolation)}
-              onPointerMove={(datum) => {
-                if (datum && datum.datum) {
-                  const point = datum.datum as Point
-                  showTooltip(point)
-                }
-              }}
             />
-            <GlyphSeries
-              dataKey="points"
-              data={hasData ? data : dummyData}
-              xAccessor={accessors.xAccessor}
-              yAccessor={accessors.yAccessor}
-              renderGlyph={(glyphProps) => {
-                const point = glyphProps.datum as Point
-                const pointColor = highlightSelectedPoint(point)
-                return (
-                  <circle
-                    cx={glyphProps.x}
-                    cy={glyphProps.y}
-                    r={3}
-                    fill={pointColor}
-                  />
-                )
-              }}
-            />
-          </XYChart>
+            <Hint value={{ x: 0, y: 0 }} style={{ pointerEvents: 'none' }}>
+              <TooltipComponent tooltip={tooltip} theme={props.theme} />
+            </Hint>
+          </XYPlot>
+          <ReactResizeDetector handleWidth={true} onResize={detectResize} />
         </div>
-        {/* Custom tooltip outside of visx to maintain exact same appearance */}
-        <TooltipComponent tooltip={tooltip} />
       </div>
-    </div>
-  )
-})
+    )
+  })
+)

app/src/components/Chart/NoData.tsx

@@ -1,5 +1,5 @@
 import React, { memo } from 'react'
-import { Typography } from '@mui/material'
+import { Typography } from '@material-ui/core'
 
 function NoData() {
   return (

app/src/components/Chart/TooltipComponent.tsx

@@ -1,10 +1,9 @@
 import React, { memo } from 'react'
-import { alpha as fade, useTheme } from '@mui/material/styles'
-import { Fade, Grow, Paper, Popper, Typography } from '@mui/material'
+import { fade } from '@material-ui/core/styles'
+import { Fade, Grow, Paper, Popper, Theme, Typography, withTheme } from '@material-ui/core'
 import { Tooltip } from './Model'
 
-function TooltipComponent(props: { tooltip?: Tooltip }) {
-  const theme = useTheme()
+function TooltipComponent(props: { tooltip?: Tooltip; theme: Theme }) {
   const { tooltip } = props
   return (
     <Popper
@@ -27,9 +26,9 @@ function TooltipComponent(props: { tooltip?: Tooltip }) {
                 padding: '4px',
                 marginTop: '-12px',
                 backgroundColor: fade(
-                  theme.palette.mode === 'light'
-                    ? theme.palette.background.paper
-                    : theme.palette.background.default,
+                  props.theme.palette.type === 'light'
+                    ? props.theme.palette.background.paper
+                    : props.theme.palette.background.default,
                   0.7
                 ),
               }}
@@ -57,4 +56,4 @@ function TooltipComponent(props: { tooltip?: Tooltip }) {
   )
 }
 
-export default memo(TooltipComponent)
+export default withTheme(memo(TooltipComponent))

app/src/components/Chart/effects/useCustomXDomain.tsx

@@ -3,22 +3,8 @@ import { Props } from '../Chart'
 
 export function useCustomXDomain(props: Props): [number, number] | undefined {
   return useMemo(() => {
-    if (props.data.length === 0) {
-      return undefined
-    }
-
     const lastDataPoint = [...props.data].sort((a, b) => b.x - a.x)[0]
     const lastDataDate = lastDataPoint ? lastDataPoint.x : Date.now()
-    
-    if (props.timeRangeStart) {
-      // Custom time range mode
-      return [Date.now() - props.timeRangeStart, lastDataDate]
-    } else {
-      // Auto-calculate from data (like react-vis did)
-      const xValues = props.data.map(d => d.x)
-      const minX = Math.min(...xValues)
-      const maxX = Math.max(...xValues)
-      return [minX, maxX]
-    }
+    return props.timeRangeStart ? [Date.now() - props.timeRangeStart, lastDataDate] : undefined
   }, [props.data, props.timeRangeStart])
 }

app/src/components/Chart/mapCurveType.tsx

@@ -1,19 +1,17 @@
 import { PlotCurveTypes } from '../../reducers/Charts'
-import * as d3Shape from 'd3-shape'
-
 export function mapCurveType(type: PlotCurveTypes | undefined) {
   switch (type) {
     case 'curve':
-      return d3Shape.curveMonotoneX
+      return 'curveMonotoneX'
     case 'linear':
-      return d3Shape.curveLinear
+      return 'curveLinear'
     case 'cubic_basis_spline':
-      return d3Shape.curveBasis
+      return 'curveBasis'
     case 'step_after':
-      return d3Shape.curveStepAfter
+      return 'curveStepAfter'
     case 'step_before':
-      return d3Shape.curveStepBefore
+      return 'curveStepBefore'
     default:
-      return d3Shape.curveMonotoneX
+      return 'curveMonotoneX'
   }
 }

app/src/components/ChartPanel/ChartActions.tsx

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react'
-import Play from '@mui/icons-material/PlayArrow'
-import Pause from '@mui/icons-material/PauseCircleFilled'
-import Clear from '@mui/icons-material/Clear'
+import Play from '@material-ui/icons/PlayArrow'
+import Pause from '@material-ui/icons/PauseCircleFilled'
+import Clear from '@material-ui/icons/Clear'
 import CustomIconButton from '../helper/CustomIconButton'
 import { ChartParameters } from '../../reducers/Charts'
 import { SettingsButton } from './ChartSettings/SettingsButton'

app/src/components/ChartPanel/ChartSettings/ColorSettings.tsx

@@ -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 '@mui/material'
+import { Menu, MenuItem } from '@material-ui/core'
 import { colors as createColors } from './colors'
 
 function chartParametersForColor(chart: ChartParameters, color?: string) {

app/src/components/ChartPanel/ChartSettings/InterpolationSettings.tsx

@@ -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 '@mui/material'
+import { Menu, MenuItem, Typography } from '@material-ui/core'
 
 function chartParametersForAction(chart: ChartParameters, action: string) {
   return {
@@ -39,12 +39,7 @@ function InterpolationSettings(props: {
 
   const menuItems = React.useMemo(() => {
     return curves.map(curve => (
-      <MenuItem 
-        key={curve} 
-        onClick={callbacks[curve]} 
-        selected={props.chart.interpolation === curve}
-        data-menu-item={curve.replace(/_/g, ' ')}
-      >
+      <MenuItem key={curve} onClick={callbacks[curve]} selected={props.chart.interpolation === curve}>
         <Typography variant="inherit">{curve.replace(/_/g, ' ')}</Typography>
       </MenuItem>
     ))

app/src/components/ChartPanel/ChartSettings/MoveUp.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react'
-import ArrowUpward from '@mui/icons-material/ArrowUpward'
+import ArrowUpward from '@material-ui/icons/ArrowUpward'
 import { bindActionCreators } from 'redux'
 import { chartActions } from '../../../actions'
 import { ChartParameters } from '../../../reducers/Charts'
 import { connect } from 'react-redux'
-import { MenuItem, Typography, ListItemIcon } from '@mui/material'
+import { MenuItem, Typography, ListItemIcon } from '@material-ui/core'
 
 function MoveUp(props: { actions: { chart: typeof chartActions }; chart: ChartParameters; close: () => void }) {
   const moveUp = React.useCallback(() => {

app/src/components/ChartPanel/ChartSettings/RangeSettings.tsx

@@ -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 '@mui/material'
+import { Menu, TextField, Typography } from '@material-ui/core'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import { chartActions } from '../../../actions'

app/src/components/ChartPanel/ChartSettings/SettingsButton.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import ChartSettings from '.'
 import CustomIconButton from '../../helper/CustomIconButton'
-import MoreVertIcon from '@mui/icons-material/Settings'
+import MoreVertIcon from '@material-ui/icons/Settings'
 import { ChartParameters } from '../../../reducers/Charts'
 
 export function SettingsButton(props: {

app/src/components/ChartPanel/ChartSettings/Size.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from 'react'
 import { ChartParameters } from '../../../reducers/Charts'
-import { Menu, MenuItem, TextField, Typography } from '@mui/material'
+import { Menu, MenuItem, TextField, Typography } from '@material-ui/core'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import { chartActions } from '../../../actions'

app/src/components/ChartPanel/ChartSettings/TimeRangeSettings.tsx

@@ -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 '@mui/material'
+import { Button, Menu, TextField, Typography } from '@material-ui/core'
 import { chartActions } from '../../../actions'
 import { ChartParameters } from '../../../reducers/Charts'
 import { connect } from 'react-redux'

app/src/components/ChartPanel/ChartSettings/colors.ts

@@ -12,7 +12,7 @@ import {
   yellow,
   brown,
   blueGrey,
-} from '@mui/material/colors'
+} from '@material-ui/core/colors'
 
 export function colors() {
   function colorToInt(color: string): [number, number, number] {

app/src/components/ChartPanel/ChartSettings/index.tsx

@@ -1,17 +1,17 @@
-import BarChart from '@mui/icons-material/BarChart'
-import Clear from '@mui/icons-material/Refresh'
-import ColorLens from '@mui/icons-material/ColorLens'
+import BarChart from '@material-ui/icons/BarChart'
+import Clear from '@material-ui/icons/Refresh'
+import ColorLens from '@material-ui/icons/ColorLens'
 import ColorSettings from './ColorSettings'
 import InterpolationSettings from './InterpolationSettings'
 import MoveUp from './MoveUp'
-import MultilineChart from '@mui/icons-material/MultilineChart'
+import MultilineChart from '@material-ui/icons/MultilineChart'
 import RangeSettings from './RangeSettings'
 import React, { memo } from 'react'
 import Size from './Size'
-import Sort from '@mui/icons-material/Sort'
+import Sort from '@material-ui/icons/Sort'
 import TimeRangeSettings from './TimeRangeSettings'
 import { ChartParameters } from '../../../reducers/Charts'
-import { Menu, MenuItem, ListItemIcon, Typography } from '@mui/material'
+import { Menu, MenuItem, ListItemIcon, Typography } from '@material-ui/core'
 
 function ChartSettings(props: {
   open: boolean
@@ -65,37 +65,37 @@ function ChartSettings(props: {
   return (
     <span>
       <Menu id="long-menu" anchorEl={props.anchorEl.current} open={props.open} onClose={props.close}>
-        <MenuItem key="range" onClick={toggleRange} data-menu-item="Y-Axis range (Values)">
+        <MenuItem key="range" onClick={toggleRange}>
           <ListItemIcon>
             <BarChart />
           </ListItemIcon>
           <Typography variant="inherit">Y-Axis range (Values)</Typography>
         </MenuItem>
-        <MenuItem key="timeRange" onClick={toggleTimeRange} data-menu-item="X-Axis range (Time)">
+        <MenuItem key="timeRange" onClick={toggleTimeRange}>
           <ListItemIcon>
             <BarChart />
           </ListItemIcon>
           <Typography variant="inherit">X-Axis range (Time)</Typography>
         </MenuItem>
-        <MenuItem key="interpolation" onClick={toggleInterpolation} data-menu-item="Curve interpolation">
+        <MenuItem key="interpolation" onClick={toggleInterpolation}>
           <ListItemIcon>
             <MultilineChart />
           </ListItemIcon>
           <Typography variant="inherit">Curve interpolation</Typography>
         </MenuItem>
-        <MenuItem key="size" onClick={toggleSize} data-menu-item="Size">
+        <MenuItem key="size" onClick={toggleSize}>
           <ListItemIcon>
             <Sort />
           </ListItemIcon>
           <Typography variant="inherit">Size</Typography>
         </MenuItem>
-        <MenuItem key="color" onClick={toggleColor} data-menu-item="Color">
+        <MenuItem key="color" onClick={toggleColor}>
           <ListItemIcon>
             <ColorLens />
           </ListItemIcon>
           <Typography variant="inherit">Color</Typography>
         </MenuItem>
-        <MenuItem key="clear" onClick={props.resetDataAction} data-menu-item="Clear data">
+        <MenuItem key="clear" onClick={props.resetDataAction}>
           <ListItemIcon>
             <Clear />
           </ListItemIcon>

app/src/components/ChartPanel/ChartTitle.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react'
 import { ChartParameters } from '../../reducers/Charts'
-import { Typography } from '@mui/material'
-import { withStyles } from '@mui/styles'
-import { Theme } from '@mui/material/styles'
+import { Typography, Theme, withStyles } from '@material-ui/core'
 
 function ChartTitle(props: { parameters: ChartParameters; classes: any }) {
   const { classes, parameters } = props

app/src/components/ChartPanel/TopicChart.tsx

@@ -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 '@mui/material'
+import { Paper } from '@material-ui/core'
 const throttle = require('lodash.throttle')
 
 class ClearableMessageBuffer extends q.RingBuffer<q.Message> {

app/src/components/ChartPanel/index.tsx

@@ -1,15 +1,13 @@
 import * as q from '../../../../backend/src/Model'
 import * as React from 'react'
-import ShowChart from '@mui/icons-material/ShowChart'
+import ShowChart from '@material-ui/icons/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, Typography } from '@mui/material'
-import { withStyles } from '@mui/styles'
-import { Theme } from '@mui/material/styles'
+import { Grid, Theme, Typography, withStyles } from '@material-ui/core'
 import { List } from 'immutable'
 const { TransitionGroup, CSSTransition } = require('react-transition-group/esm')
 
@@ -46,15 +44,10 @@ function mapWidth(width: 'big' | 'medium' | 'small' | undefined, calculatedSpaci
   }
 }
 
-
-// Helper function to generate unique keys for charts
-const getChartKey = (chart: ChartParameters) => `${chart.topic}-${chart.dotPath || ''}`
-
 function ChartPanel(props: Props) {
   const chartsInView = props.charts.count()
 
   const [spacing, setSpacing] = React.useState(spacingForChartCount(chartsInView))
-  const nodeRefsMap = React.useRef<Map<string, React.RefObject<HTMLDivElement>>>(new Map())
 
   React.useEffect(() => {
     props.actions.chart.loadCharts()
@@ -70,42 +63,17 @@ function ChartPanel(props: Props) {
     }
   }, [chartsInView])
 
-  // Clean up refs for removed charts
-  React.useEffect(() => {
-    const currentKeys = new Set(props.charts.map(getChartKey).toArray())
-    const refsToDelete: string[] = []
-    
-    nodeRefsMap.current.forEach((_, key) => {
-      if (!currentKeys.has(key)) {
-        refsToDelete.push(key)
-      }
-    })
-    
-    refsToDelete.forEach(key => nodeRefsMap.current.delete(key))
-  }, [props.charts])
-
-  const charts = props.charts.map(chartParameters => {
-    const key = getChartKey(chartParameters)
-    
-    // Get or create a ref for this specific chart
-    if (!nodeRefsMap.current.has(key)) {
-      nodeRefsMap.current.set(key, React.createRef<HTMLDivElement>())
-    }
-    const nodeRef = nodeRefsMap.current.get(key)!
-    
-    return (
-      <CSSTransition
-        key={key}
-        timeout={{ enter: 500, exit: 500 }}
-        classNames="example"
-        nodeRef={nodeRef}
-      >
-        <Grid item xs={mapWidth(chartParameters.width, spacing)} ref={nodeRef}>
-          <ChartWithTreeNode tree={props.tree} parameters={chartParameters} />
-        </Grid>
-      </CSSTransition>
-    )
-  })
+  const charts = props.charts.map(chartParameters => (
+    <CSSTransition
+      key={`${chartParameters.topic}-${chartParameters.dotPath || ''}`}
+      timeout={{ enter: 500, exit: 500 }}
+      classNames="example"
+    >
+      <Grid item xs={mapWidth(chartParameters.width, spacing)}>
+        <ChartWithTreeNode tree={props.tree} parameters={chartParameters} />
+      </Grid>
+    </CSSTransition>
+  ))
 
   return (
     <div className={props.classes.container}>
@@ -158,4 +126,4 @@ const styles = (theme: Theme) => ({
   },
 })
 
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ChartPanel) as any)
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ChartPanel))

app/src/components/ConfirmationDialog.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useCallback, memo } from 'react'
 import { ConfirmationRequest } from '../reducers/Global'
-import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button } from '@mui/material'
+import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button } from '@material-ui/core'
 import { KeyCodes } from '../utils/KeyCodes'
 
 function ConfirmationDialog(props: { confirmationRequests: Array<ConfirmationRequest> }) {

app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx

@@ -1,19 +1,17 @@
 import * as React from 'react'
 import { useState, useCallback, memo } from 'react'
-import Add from '@mui/icons-material/Add'
-import Lock from '@mui/icons-material/Lock'
-import Undo from '@mui/icons-material/Undo'
+import Add from '@material-ui/icons/Add'
+import Lock from '@material-ui/icons/Lock'
+import Undo from '@material-ui/icons/Undo'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { connectionManagerActions } from '../../actions'
 import { ConnectionOptions } from '../../model/ConnectionOptions'
-import { Theme } from '@mui/material/styles'
-import { withStyles } from '@mui/styles'
-import { Button, Grid, TextField, Tooltip } from '@mui/material'
+import { Theme, withStyles } from '@material-ui/core/styles'
+import { Button, Grid, TextField, Tooltip } from '@material-ui/core'
 import { QosSelect } from '../QosSelect'
 import { QoS } from '../../../../backend/src/DataSource/MqttSource'
 import Subscriptions from './Subscriptions'
-const SubscriptionsAny = Subscriptions as any
 
 interface Props {
   connection: ConnectionOptions
@@ -65,13 +63,12 @@ const ConnectionSettings = memo(function ConnectionSettings(props: Props) {
               color="secondary"
               onClick={() => props.managerActions.addSubscription({ topic, qos }, props.connection.id)}
               variant="contained"
-              data-testid="add-subscription-button"
             >
               <Add /> Add
             </Button>
           </Grid>
           <Grid item={true} xs={12} style={{ padding: 0 }}>
-            <SubscriptionsAny connection={props.connection} />
+            <Subscriptions connection={props.connection} />
           </Grid>
           <Grid item={true} xs={7} className={classes.gridPadding}>
             <TextField
@@ -100,7 +97,6 @@ const ConnectionSettings = memo(function ConnectionSettings(props: Props) {
               variant="contained"
               className={classes.button}
               onClick={props.managerActions.toggleAdvancedSettings}
-              data-testid="back-button"
             >
               <Undo /> Back
             </Button>
@@ -133,4 +129,4 @@ const styles = (theme: Theme) => ({
   },
 })
 
-export default connect(undefined, mapDispatchToProps)(withStyles(styles)(ConnectionSettings) as any)
+export default connect(undefined, mapDispatchToProps)(withStyles(styles)(ConnectionSettings))

app/src/components/ConnectionSetup/BrowserCertificateFileSelection.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react'
 import ClearAdornment from '../helper/ClearAdornment'
-import Lock from '@mui/icons-material/Lock'
+import Lock from '@material-ui/icons/Lock'
 import { bindActionCreators } from 'redux'
-import { Button, Theme, Tooltip, Typography } from '@mui/material'
+import { Button, Theme, Tooltip, Typography } from '@material-ui/core'
 import { CertificateParameters, ConnectionOptions } from '../../model/ConnectionOptions'
 import { CertificateTypes } from '../../actions/ConnectionManager'
 import { connect } from 'react-redux'
 import { connectionManagerActions } from '../../actions'
-import { withStyles } from '@mui/styles'
+import { withStyles } from '@material-ui/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.secondary,
+    color: theme.palette.text.hint,
   },
   button: {
     marginTop: theme.spacing(3),
@@ -137,4 +137,4 @@ const styles = (theme: Theme) => ({
   },
 })
 
-export default connect(undefined, mapDispatchToProps)(withStyles(styles)(BrowserCertificateFileSelection) as any)
+export default connect(undefined, mapDispatchToProps)(withStyles(styles)(BrowserCertificateFileSelection))

app/src/components/ConnectionSetup/CertificateFileSelection.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react'
 import ClearAdornment from '../helper/ClearAdornment'
-import Lock from '@mui/icons-material/Lock'
+import Lock from '@material-ui/icons/Lock'
 import { bindActionCreators } from 'redux'
-import { Button, Theme, Tooltip, Typography } from '@mui/material'
+import { Button, Theme, Tooltip, Typography } from '@material-ui/core'
 import { CertificateParameters, ConnectionOptions } from '../../model/ConnectionOptions'
 import { CertificateTypes } from '../../actions/ConnectionManager'
 import { connect } from 'react-redux'
 import { connectionManagerActions } from '../../actions'
-import { withStyles } from '@mui/styles'
+import { withStyles } from '@material-ui/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.secondary,
+    color: theme.palette.text.hint,
   },
   button: {
     marginTop: theme.spacing(3),
@@ -79,4 +79,4 @@ const styles = (theme: Theme) => ({
   },
 })
 
-export default connect(undefined, mapDispatchToProps)(withStyles(styles)(CertificateFileSelection) as any)
+export default connect(undefined, mapDispatchToProps)(withStyles(styles)(CertificateFileSelection))

app/src/components/ConnectionSetup/Certificates.tsx

@@ -1,18 +1,18 @@
 import * as React from 'react'
 import CertificateFileSelection from './CertificateFileSelection'
 import BrowserCertificateFileSelection from './BrowserCertificateFileSelection'
-import Undo from '@mui/icons-material/Undo'
+import Undo from '@material-ui/icons/Undo'
 import { bindActionCreators } from 'redux'
-import { Button, Grid } from '@mui/material'
+import { Button, Grid } from '@material-ui/core'
 import { connect } from 'react-redux'
 import { connectionManagerActions } from '../../actions'
 import { ConnectionOptions } from '../../model/ConnectionOptions'
-import { Theme } from '@mui/material/styles'
-import { withStyles } from '@mui/styles'
-import { isBrowserMode } from '../../utils/browserMode'
+import { Theme, withStyles } from '@material-ui/core/styles'
 
-// Use browser or desktop file selection based on mode
-const CertSelector: any = isBrowserMode ? BrowserCertificateFileSelection : CertificateFileSelection
+// 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
 
 interface Props {
   connection: ConnectionOptions
@@ -110,4 +110,4 @@ const styles = (theme: Theme) => ({
   },
 })
 
-export default connect(undefined, mapDispatchToProps)(withStyles(styles)(Certificates) as any)
+export default connect(undefined, mapDispatchToProps)(withStyles(styles)(Certificates))

app/src/components/ConnectionSetup/ConnectButton.tsx

@@ -1,14 +1,14 @@
 import ConnectionHealthIndicator from '../helper/ConnectionHealthIndicator'
-import PowerSettingsNew from '@mui/icons-material/PowerSettingsNew'
+import PowerSettingsNew from '@material-ui/icons/PowerSettingsNew'
 import React from 'react'
-import { Button } from '@mui/material'
+import { Button } from '@material-ui/core'
 
 function ConnectButton(props: { connecting: boolean; classes: any; toggle: () => void }) {
   const { classes, toggle, connecting } = props
 
   if (connecting) {
     return (
-      <Button variant="contained" color="primary" className={classes.button} onClick={toggle} data-testid="abort-button">
+      <Button variant="contained" color="primary" className={classes.button} onClick={toggle}>
         <ConnectionHealthIndicator />
         &nbsp;&nbsp;Abort
       </Button>
@@ -16,7 +16,7 @@ function ConnectButton(props: { connecting: boolean; classes: any; toggle: () =>
   }
 
   return (
-    <Button variant="contained" color="primary" className={classes.button} onClick={toggle} data-testid="connect-button">
+    <Button variant="contained" color="primary" className={classes.button} onClick={toggle}>
       <PowerSettingsNew /> Connect
     </Button>
   )

app/src/components/ConnectionSetup/ConnectionSettings.tsx

@@ -1,18 +1,17 @@
 import ConnectButton from './ConnectButton'
 import React, { useCallback, useState } from 'react'
-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 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 { 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 } from '@mui/material/styles'
-import { withStyles } from '@mui/styles'
+import { Theme, withStyles } from '@material-ui/core/styles'
 import { ToggleSwitch } from './ToggleSwitch'
 import { useGlobalKeyEventHandler } from '../../effects/useGlobalKeyEventHandler'
 import {
@@ -25,7 +24,7 @@ import {
   InputLabel,
   MenuItem,
   TextField,
-} from '@mui/material'
+} from '@material-ui/core'
 
 interface Props {
   connection: ConnectionOptions
@@ -236,7 +235,6 @@ function ConnectionSettings(props: Props) {
               variant="contained"
               className={classes.button}
               onClick={props.managerActions.toggleAdvancedSettings}
-              data-testid="advanced-button"
             >
               <Settings /> Advanced
             </Button>
@@ -287,4 +285,4 @@ const styles = (theme: Theme) => ({
   },
 })
 
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ConnectionSettings) as any)
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ConnectionSettings))

app/src/components/ConnectionSetup/ConnectionSetup.tsx

@@ -1,19 +1,15 @@
 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 } from '@mui/material/styles'
-import { withStyles } from '@mui/styles'
-import { Modal, Paper, Toolbar, Typography, Collapse } from '@mui/material'
+import { Theme, withStyles } from '@material-ui/core/styles'
+import { Modal, Paper, Toolbar, Typography, Collapse } from '@material-ui/core'
 import AdvancedConnectionSettings from './AdvancedConnectionSettings'
-const AdvancedConnectionSettingsAny = AdvancedConnectionSettings as any
 import Certificates from './Certificates'
-const CertificatesAny = Certificates as any
 
 interface Props {
   actions: any
@@ -38,13 +34,13 @@ class ConnectionSetup extends React.PureComponent<Props, {}> {
     return (
       <div>
         <Collapse in={!showAdvancedSettings && !showCertificateSettings}>
-          <ConnectionSettingsAny connection={connection} />
+          <ConnectionSettings connection={connection} />
         </Collapse>
         <Collapse in={showAdvancedSettings && !showCertificateSettings}>
-          <AdvancedConnectionSettingsAny connection={connection} />
+          <AdvancedConnectionSettings connection={connection} />
         </Collapse>
         <Collapse in={showCertificateSettings}>
-          <CertificatesAny connection={connection} />
+          <Certificates connection={connection} />
         </Collapse>
       </div>
     )
@@ -115,7 +111,7 @@ const styles = (theme: Theme) => ({
     textOverflow: 'ellipsis' as 'ellipsis',
     whiteSpace: 'nowrap' as 'nowrap',
     overflow: 'hidden' as 'hidden',
-    color: theme.palette.text.secondary,
+    color: theme.palette.text.hint,
     fontSize: '0.9em',
     marginLeft: theme.spacing(4),
   },
@@ -138,4 +134,4 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ConnectionSetup) as any)
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ConnectionSetup))

app/src/components/ConnectionSetup/ProfileList/AddButton.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react'
-import Add from '@mui/icons-material/Add'
-import { Fab } from '@mui/material'
-import { Theme } from '@mui/material/styles'
-import { withStyles } from '@mui/styles'
+import Add from '@material-ui/icons/Add'
+import { Fab } from '@material-ui/core'
+import { Theme, withStyles } from '@material-ui/core/styles'
 
 const styles = (theme: Theme) => ({
   addButton: {

app/src/components/ConnectionSetup/ProfileList/ConnectionItem.tsx

@@ -1,9 +1,8 @@
 import React, { useCallback } from 'react'
 import { connect } from 'react-redux'
-import { ListItem, Typography } from '@mui/material'
+import { ListItem, Typography } from '@material-ui/core'
 import { toMqttConnection, ConnectionOptions } from '../../../model/ConnectionOptions'
-import { withStyles } from '@mui/styles'
-import { Theme } from '@mui/material/styles'
+import { withStyles, Theme } from '@material-ui/core/styles'
 import { bindActionCreators } from 'redux'
 import { connectionActions, connectionManagerActions } from '../../../actions'
 
@@ -63,9 +62,9 @@ export const connectionItemStyle = (theme: Theme) => ({
     textOverflow: 'ellipsis' as 'ellipsis',
     whiteSpace: 'nowrap' as 'nowrap',
     overflow: 'hidden' as 'hidden',
-    color: theme.palette.text.secondary,
+    color: theme.palette.text.hint,
     fontSize: '0.7em',
   },
 })
 
-export default connect(null, mapDispatchToProps)(withStyles(connectionItemStyle)(ConnectionItem) as any)
+export default connect(null, mapDispatchToProps)(withStyles(connectionItemStyle)(ConnectionItem))

app/src/components/ConnectionSetup/ProfileList/index.tsx

@@ -1,5 +1,4 @@
 import ConnectionItem from './ConnectionItem'
-const ConnectionItemAny = ConnectionItem as any
 import React from 'react'
 import { AddButton } from './AddButton'
 import { AppState } from '../../../reducers'
@@ -8,9 +7,8 @@ import { connect } from 'react-redux'
 import { connectionManagerActions } from '../../../actions'
 import { ConnectionOptions } from '../../../model/ConnectionOptions'
 import { KeyCodes } from '../../../utils/KeyCodes'
-import { List } from '@mui/material'
-import { Theme } from '@mui/material/styles'
-import { withStyles } from '@mui/styles'
+import { List } from '@material-ui/core'
+import { Theme, withStyles } from '@material-ui/core/styles'
 import { useGlobalKeyEventHandler } from '../../../effects/useGlobalKeyEventHandler'
 
 interface Props {
@@ -51,7 +49,7 @@ function ProfileList(props: Props) {
     <List style={{ height: '100%' }} component="nav" subheader={createConnectionButton}>
       <div className={classes.list}>
         {Object.values(connections).map(connection => (
-          <ConnectionItemAny connection={connection} key={connection.id} selected={selected === connection.id} />
+          <ConnectionItem connection={connection} key={connection.id} selected={selected === connection.id} />
         ))}
       </div>
     </List>
@@ -79,4 +77,4 @@ const mapStateToProps = (state: AppState) => {
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ProfileList) as any)
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ProfileList))

app/src/components/ConnectionSetup/Subscriptions.tsx

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

app/src/components/ConnectionSetup/ToggleSwitch.tsx

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

app/src/components/Demo/Key.tsx

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

app/src/components/Demo/Mouse.tsx

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

app/src/components/Demo/ShowText.tsx

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

app/src/components/ErrorBoundary.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react'
 import PersistentStorage from '../utils/PersistentStorage'
-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'
+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'
 
 interface State {
   error?: Error
@@ -12,7 +11,6 @@ interface State {
 
 interface Props {
   classes: any
-  children?: React.ReactNode
 }
 
 class ErrorBoundary extends React.PureComponent<Props, State> {
@@ -25,12 +23,12 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
   }
 
   private restart = () => {
-    window.location.reload()
+    window.location = window.location
   }
 
   private clearStorage = () => {
     PersistentStorage.clear()
-    window.location.reload()
+    window.location = window.location
   }
 
   public componentDidCatch(error: Error, errorInfo: any) {

app/src/components/Layout/ContentView.tsx

@@ -1,16 +1,13 @@
 import * as React from 'react'
 import ChartPanel from '../ChartPanel'
-import ReactSplitPaneImport from 'react-split-pane'
+import ReactSplitPane from 'react-split-pane'
 import Tree from '../Tree'
 import { AppState } from '../../reducers'
 import { ChartParameters } from '../../reducers/Charts'
 import { connect } from 'react-redux'
 import { List } from 'immutable'
 import { Sidebar } from '../Sidebar'
-import { useResizeDetector } from 'react-resize-detector'
-
-// Type cast to any to work around React 18 compatibility issues with react-split-pane 0.1.x
-const ReactSplitPane = ReactSplitPaneImport as any
+import ReactResizeDetector from 'react-resize-detector'
 
 interface Props {
   heightProperty: any
@@ -24,23 +21,11 @@ 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 { 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) => {
+  const detectSize = React.useCallback((width, newHeight) => {
     setDetectedHeight(newHeight)
   }, [])
 
-  const detectSidebarSize = React.useCallback((width: any) => {
+  const detectSidebarSize = React.useCallback(width => {
     setDetectedSidebarWidth(width)
   }, [])
 
@@ -78,7 +63,7 @@ function ContentView(props: Props) {
           split="vertical"
           minSize={0}
           size={sidebarWidth}
-          onChange={(size: number) => setSidebarWidth(size)}
+          onChange={setSidebarWidth}
           onDragFinished={closeSidebarCompletelyIfItSitsOnTheEdge}
           allowResize={true}
           style={{ height: '100%' }}
@@ -95,18 +80,20 @@ function ContentView(props: Props) {
               style={{ height: 'calc(100vh - 64px)' }}
               pane1Style={{ maxHeight: '100%' }}
               pane2Style={{ borderTop: '1px solid #999', display: 'flex' }}
-              onChange={(size: number) => setHeight(size)}
+              onChange={setHeight}
               onDragFinished={closeDrawerCompletelyIfItSitsOnTheEdge}
             >
               <Tree />
               {/** Passing height constraints via flex options down */}
-              <div ref={heightRef} style={{ flex: 1, display: 'flex', height: '100%', width: '100%' }}>
+              <div 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 ref={widthRef} style={{ height: '100%' }}>
+          <div style={{ height: '100%' }}>
+            <ReactResizeDetector handleWidth={true} onResize={detectSidebarSize} />
             <div
               className={props.paneDefaults}
               style={{ minWidth: '250px', height: '100%', overflowY: 'auto', overflowX: 'hidden' }}

app/src/components/Layout/Notification.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react'
 
-import { Snackbar, SnackbarContent } from '@mui/material'
-import { Theme } from '@mui/material/styles'
-import { withStyles } from '@mui/styles'
-import { green, red } from '@mui/material/colors'
+import { Snackbar, SnackbarContent } from '@material-ui/core'
+import { Theme, withStyles } from '@material-ui/core/styles'
+import { green, red } from '@material-ui/core/colors'
 
 interface Props {
   message?: string

app/src/components/Layout/PauseButton.tsx

@@ -1,14 +1,13 @@
 import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
 import CustomIconButton from '../helper/CustomIconButton'
-import Pause from '@mui/icons-material/PauseCircleFilled'
-import Resume from '@mui/icons-material/PlayArrow'
+import Pause from '@material-ui/icons/PauseCircleFilled'
+import Resume from '@material-ui/icons/PlayArrow'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { treeActions } from '../../actions'
-import { withStyles } from '@mui/styles'
-import { Theme } from '@mui/material/styles'
+import { withStyles, Theme } from '@material-ui/core/styles'
 
 const styles = (theme: Theme) => ({
   icon: {
@@ -103,4 +102,4 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(PauseButton) as any)
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(PauseButton))

app/src/components/Layout/SearchBar.tsx

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

app/src/components/Layout/TitleBar.tsx

@@ -1,20 +1,15 @@
 import * as React from 'react'
-import CloudOff from '@mui/icons-material/CloudOff'
-import Logout from '@mui/icons-material/Logout'
+import CloudOff from '@material-ui/icons/CloudOff'
 import ConnectionHealthIndicator from '../helper/ConnectionHealthIndicator'
-const ConnectionHealthIndicatorAny = ConnectionHealthIndicator as any
-import Menu from '@mui/icons-material/Menu'
+import Menu from '@material-ui/icons/Menu'
 import PauseButton from './PauseButton'
 import SearchBar from './SearchBar'
-import { AppBar, Button, IconButton, Toolbar, Typography } from '@mui/material'
+import { AppBar, Button, IconButton, Toolbar, Typography } from '@material-ui/core'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { connectionActions, globalActions, settingsActions } from '../../actions'
-import { Theme } from '@mui/material/styles'
-import { withStyles } from '@mui/styles'
-import { isBrowserMode } from '../../utils/browserMode'
-import { useAuth } from '../../contexts/AuthContext'
+import { Theme, withStyles } from '@material-ui/core/styles'
 
 const styles = (theme: Theme) => ({
   title: {
@@ -38,9 +33,6 @@ const styles = (theme: Theme) => ({
   disconnect: {
     margin: 'auto 8px auto auto',
   },
-  logout: {
-    margin: 'auto 0 auto 8px',
-  },
   disconnectLabel: {
     color: theme.palette.primary.contrastText,
   },
@@ -62,22 +54,6 @@ class TitleBar extends React.PureComponent<Props, {}> {
     this.state = {}
   }
 
-  private handleLogout = async () => {
-    // Disconnect first
-    this.props.actions.connection.disconnect()
-    
-    // Clear credentials from sessionStorage
-    if (typeof sessionStorage !== 'undefined') {
-      sessionStorage.removeItem('mqtt-explorer-username')
-      sessionStorage.removeItem('mqtt-explorer-password')
-    }
-    
-    // Reload page to reset all state and show login dialog
-    if (typeof window !== 'undefined') {
-      window.location.reload()
-    }
-  }
-
   public render() {
     const { actions, classes } = this.props
 
@@ -99,39 +75,18 @@ class TitleBar extends React.PureComponent<Props, {}> {
           <PauseButton />
           <Button
             className={classes.disconnect}
-            sx={{ color: 'primary.contrastText' }}
+            classes={{ label: classes.disconnectLabel }}
             onClick={actions.connection.disconnect}
-            data-testid="disconnect-button"
           >
             Disconnect <CloudOff className={classes.disconnectIcon} />
           </Button>
-          <LogoutButton classes={classes} onLogout={this.handleLogout} />
-          <ConnectionHealthIndicatorAny withBackground={true} />
+          <ConnectionHealthIndicator withBackground={true} />
         </Toolbar>
       </AppBar>
     )
   }
 }
 
-// Separate component to use hooks
-function LogoutButton({ classes, onLogout }: { classes: any; onLogout: () => void }) {
-  const { authDisabled } = useAuth()
-  
-  if (!isBrowserMode || authDisabled) {
-    return null
-  }
-
-  return (
-    <Button
-      className={classes.logout}
-      sx={{ color: 'primary.contrastText' }}
-      onClick={onLogout}
-    >
-      Logout <Logout className={classes.disconnectIcon} />
-    </Button>
-  )
-}
-
 const mapStateToProps = (state: AppState) => {
   return {
     topicFilter: state.settings.get('topicFilter'),

app/src/components/LoginDialog.tsx

@@ -1,106 +1,57 @@
 import * as React from 'react'
-import { Dialog, DialogTitle, DialogContent, DialogActions, TextField, Button, Typography } from '@mui/material'
+import { Dialog, DialogTitle, DialogContent, DialogActions, TextField, Button, Typography } from '@material-ui/core'
 
 interface LoginDialogProps {
   open: boolean
   onLogin: (username: string, password: string) => void
   error?: string
-  waitTimeSeconds?: number
 }
 
 export function LoginDialog(props: LoginDialogProps) {
   const [username, setUsername] = React.useState('')
   const [password, setPassword] = React.useState('')
-  const [countdown, setCountdown] = React.useState<number | undefined>(props.waitTimeSeconds)
 
-  // Update countdown when waitTimeSeconds prop changes
-  React.useEffect(() => {
-    setCountdown(props.waitTimeSeconds)
-  }, [props.waitTimeSeconds])
-
-  // Countdown timer
-  React.useEffect(() => {
-    if (countdown === undefined || countdown <= 0) {
-      return
-    }
-
-    const timer = setInterval(() => {
-      setCountdown(prev => {
-        if (prev === undefined || prev <= 1) {
-          return undefined
-        }
-        return prev - 1
-      })
-    }, 1000)
-
-    return () => clearInterval(timer)
-  }, [countdown])
-
-  const handleLogin = () => {
-    if (countdown !== undefined && countdown > 0) {
-      // Don't allow login during countdown
-      return
-    }
-    if (!username || !password) {
-      // Don't allow empty credentials
-      return
-    }
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
     props.onLogin(username, password)
   }
 
-  const handleKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      handleLogin()
-    }
-  }
-
-  const isDisabled = countdown !== undefined && countdown > 0
-
   return (
-    <Dialog open={props.open} disableEscapeKeyDown onClose={(event, reason) => { if (reason !== 'backdropClick') { /* Allow closing only via escape if needed */ } }}>
-      <DialogTitle>Login to MQTT Explorer</DialogTitle>
-      <DialogContent>
-        {props.error && (
-          <Typography color="error" style={{ marginBottom: 16 }}>
-            {props.error}
-          </Typography>
-        )}
-        {countdown !== undefined && countdown > 0 && (
-          <Typography color="warning" style={{ marginBottom: 16, fontWeight: 'bold' }}>
-            Please wait {countdown} seconds before trying again...
-          </Typography>
-        )}
-        <TextField
-          autoFocus
-          margin="dense"
-          label="Username"
-          type="text"
-          fullWidth
-          value={username}
-          onChange={e => setUsername(e.target.value)}
-          onKeyPress={handleKeyPress}
-          disabled={isDisabled}
-          required
-          data-testid="username-input"
-        />
-        <TextField
-          margin="dense"
-          label="Password"
-          type="password"
-          fullWidth
-          value={password}
-          onChange={e => setPassword(e.target.value)}
-          onKeyPress={handleKeyPress}
-          disabled={isDisabled}
-          required
-          data-testid="password-input"
-        />
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={handleLogin} color="primary" variant="contained" disabled={isDisabled}>
-          {isDisabled ? `Wait ${countdown}s` : 'Login'}
-        </Button>
-      </DialogActions>
+    <Dialog open={props.open} disableEscapeKeyDown disableBackdropClick>
+      <form onSubmit={handleSubmit}>
+        <DialogTitle>Login to MQTT Explorer</DialogTitle>
+        <DialogContent>
+          {props.error && (
+            <Typography color="error" style={{ marginBottom: 16 }}>
+              {props.error}
+            </Typography>
+          )}
+          <TextField
+            autoFocus
+            margin="dense"
+            label="Username"
+            type="text"
+            fullWidth
+            value={username}
+            onChange={e => setUsername(e.target.value)}
+            required
+          />
+          <TextField
+            margin="dense"
+            label="Password"
+            type="password"
+            fullWidth
+            value={password}
+            onChange={e => setPassword(e.target.value)}
+            required
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button type="submit" color="primary" variant="contained">
+            Login
+          </Button>
+        </DialogActions>
+      </form>
     </Dialog>
   )
 }

app/src/components/QosSelect.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { TextField, MenuItem, Tooltip } from '@mui/material'
+import { TextField, MenuItem, Tooltip } from '@material-ui/core'
 import { QoS } from '../../../backend/src/DataSource/MqttSource'
 
 export function QosSelect(props: { selected: QoS; onChange: (value: QoS) => void; label?: string }) {

app/src/components/SettingsDrawer/BooleanSwitch.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
-import { InputLabel, Switch, Theme, Tooltip } from '@mui/material'
-import { withStyles } from '@mui/styles'
+import { InputLabel, Switch, Theme, Tooltip } from '@material-ui/core'
+import { withStyles } from '@material-ui/styles'
 const sha1 = require('sha1')
 
-function BooleanSwitch(props: { title: string; value: boolean; tooltip: string; action: () => void; classes: any; 'data-testid'?: string }) {
+function BooleanSwitch(props: { title: string; value: boolean; tooltip: string; action: () => void; classes: any }) {
   const { tooltip, value, action, title, classes } = props
 
   const clickHandler = (e: React.MouseEvent) => {
@@ -20,13 +20,7 @@ function BooleanSwitch(props: { title: string; value: boolean; tooltip: string;
         </InputLabel>
       </Tooltip>
       <Tooltip title={tooltip}>
-        <Switch 
-          name={`toggle-${sha1(title)}`} 
-          checked={value} 
-          onChange={action} 
-          color="primary"
-          data-testid={props['data-testid']}
-        />
+        <Switch name={`toggle-${sha1(title)}`} checked={value} onChange={action} color="primary" />
       </Tooltip>
     </div>
   )

app/src/components/SettingsDrawer/BrokerStatistics.tsx

@@ -3,10 +3,9 @@ import React, { useMemo } from 'react'
 import { AppState } from '../../reducers'
 import { Base64Message } from '../../../../backend/src/Model/Base64Message'
 import { connect } from 'react-redux'
-import { Theme } from '@mui/material/styles'
-import { withStyles } from '@mui/styles'
+import { Theme, withStyles } from '@material-ui/core/styles'
 import { TopicViewModel } from '../../model/TopicViewModel'
-import { Typography } from '@mui/material'
+import { Typography } from '@material-ui/core'
 import { usePollingToFetchTreeNode } from '../helper/usePollingToFetchTreeNode'
 import { useUpdateComponentWhenNodeUpdates } from '../helper/useUpdateComponentWhenNodeUpdates'
 const abbreviate = require('number-abbreviate')
@@ -20,7 +19,7 @@ const styles = (theme: Theme) => ({
   container: {
     width: '100%',
     height: '224px',
-    backgroundColor: theme.palette.mode === 'dark' ? 'rebeccapurple' : '#ebebeb',
+    backgroundColor: theme.palette.type === 'dark' ? 'rebeccapurple' : '#ebebeb',
     marginBottom: 0,
     padding: '8px',
   },

app/src/components/SettingsDrawer/Settings.tsx

@@ -1,15 +1,14 @@
 import * as React from 'react'
 import BooleanSwitch from './BooleanSwitch'
 import BrokerStatistics from './BrokerStatistics'
-import ChevronRight from '@mui/icons-material/ChevronRight'
+import ChevronRight from '@material-ui/icons/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 } from '@mui/material/styles'
-import { withStyles } from '@mui/styles'
+import { Theme, withStyles } from '@material-ui/core/styles'
 import { TopicOrder } from '../../reducers/Settings'
 
 import {
@@ -20,10 +19,9 @@ import {
   InputLabel,
   MenuItem,
   Select,
-  SelectChangeEvent,
   Typography,
   Tooltip,
-} from '@mui/material'
+} from '@material-ui/core'
 
 export const autoExpandLimitSet = [
   {
@@ -72,7 +70,7 @@ const styles = (theme: Theme) => ({
   },
   author: {
     margin: 'auto 8px 8px auto',
-    color: theme.palette.text.secondary,
+    color: theme.palette.text.hint,
     cursor: 'pointer' as 'pointer',
   },
 })
@@ -138,7 +136,6 @@ class Settings extends React.PureComponent<Props, {}> {
         tooltip="Enable dark theme"
         value={theme === 'dark'}
         action={actions.settings.toggleTheme}
-        data-testid="dark-mode-toggle"
       />
     )
   }
@@ -170,7 +167,7 @@ class Settings extends React.PureComponent<Props, {}> {
     )
   }
 
-  private onChangeAutoExpand = (e: SelectChangeEvent<number>) => {
+  private onChangeAutoExpand = (e: React.ChangeEvent<{ value: unknown }>) => {
     this.props.actions.settings.setAutoExpandLimit(parseInt(String(e.target.value), 10))
   }
 
@@ -202,7 +199,7 @@ class Settings extends React.PureComponent<Props, {}> {
     )
   }
 
-  private onChangeSorting = (e: SelectChangeEvent<TopicOrder>) => {
+  private onChangeSorting = (e: React.ChangeEvent<{ value: unknown }>) => {
     this.props.actions.settings.setTopicOrder(e.target.value as TopicOrder)
   }
 

app/src/components/SettingsDrawer/TimeLocale.tsx

@@ -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 '@mui/material'
+import { Input, InputLabel, MenuItem, Select, Theme } from '@material-ui/core'
 import { settingsActions } from '../../actions'
-import { withStyles } from '@mui/styles'
+import { withStyles } from '@material-ui/styles'
 
 function importAll(r: any) {
   r.keys().forEach(r)
@@ -38,7 +38,7 @@ function TimeLocaleSettings(props: Props) {
     </MenuItem>
   ))
 
-  function updateLocale(e: any) {
+  function updateLocale(e: React.ChangeEvent<{ value: unknown }>) {
     const locale = e.target.value ? String(e.target.value) : ''
     actions.settings.setTimeLocale(locale)
   }

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

@@ -1,11 +1,11 @@
 import * as q from '../../../../../backend/src/Model'
 import * as React from 'react'
-import ShowChart from '@mui/icons-material/ShowChart'
+import ShowChart from '@material-ui/icons/ShowChart'
 import TopicPlot from '../../TopicPlot'
 import { bindActionCreators } from 'redux'
 import { chartActions } from '../../../actions'
 import { connect } from 'react-redux'
-import { Fade, Paper, Popper, Tooltip } from '@mui/material'
+import { Fade, Paper, Popper, Tooltip } from '@material-ui/core'
 import { JsonPropertyLocation } from '../../../../../backend/src/JsonAstParser'
 
 interface Props {
@@ -41,29 +41,31 @@ function ChartPreview(props: Props) {
 
   const addChartToPanelButton = hasEnoughDataToDisplayDiagrams ? (
     <Tooltip title="Add to chart panel">
-      <span
+      <ShowChart
         ref={chartIconRef}
+        className={props.classes.icon}
         onMouseEnter={mouseOver}
         onMouseLeave={mouseOut}
         onClick={onClick}
-        style={{ cursor: 'pointer', display: 'inline-flex' }}
-      >
-        <ShowChart className={props.classes.icon} />
-      </span>
+        data-test-type="ShowChart"
+        data-test={props.literal.path}
+      />
     </Tooltip>
   ) : (
     <Tooltip title="Add to chart panel, not enough data for preview">
-      <span onClick={onClick} style={{ cursor: 'pointer', display: 'inline-flex' }}>
-        <ShowChart className={props.classes.icon} style={{ color: '#aaa' }} />
-      </span>
+      <ShowChart
+        onClick={onClick}
+        className={props.classes.icon}
+        style={{ color: '#aaa' }}
+        data-test-type="ShowChart"
+        data-test={props.literal.path}
+      />
     </Tooltip>
   )
 
   return (
-    <div style={{ display: 'inline' }}>
-      <span data-test-type="ShowChart" data-test={props.literal.path} style={{ display: 'inline-block' }}>
-        {addChartToPanelButton}
-      </span>
+    <span>
+      {addChartToPanelButton}
       <Popper open={open} anchorEl={chartIconRef.current} placement="left-end">
         <Fade in={open} timeout={300}>
           <Paper style={{ width: '300px' }}>
@@ -75,7 +77,7 @@ function ChartPreview(props: Props) {
           </Paper>
         </Fade>
       </Popper>
-    </div>
+    </span>
   )
 }
 

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

@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { Theme } from '@mui/material'
-import { withStyles } from '@mui/styles'
+import { Theme } from '@material-ui/core'
+import { withStyles } from '@material-ui/styles'
 
 interface Props {
   changes: Array<Diff.Change>

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

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

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

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

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

@@ -1,8 +1,8 @@
 import { CodeBlockColors, CodeBlockColorsBraceMonokai } from '../CodeBlockColors'
-import { Theme } from '@mui/material'
+import { Theme } from '@material-ui/core'
 
 export const style = (theme: Theme) => {
-  const codeBlockColors = theme.palette.mode === 'light' ? CodeBlockColors : CodeBlockColorsBraceMonokai
+  const codeBlockColors = theme.palette.type === 'light' ? CodeBlockColors : CodeBlockColorsBraceMonokai
   const codeBaseStyle = {
     font: "12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace",
     display: 'inline-grid' as 'inline-grid',

app/src/components/Sidebar/HistoryDrawer.tsx

@@ -1,8 +1,7 @@
 import React, { useCallback, useState, useEffect, memo } from 'react'
-import { Badge, Typography } from '@mui/material'
+import { Badge, Typography } from '@material-ui/core'
 import { selectTextWithCtrlA } from '../../utils/handleTextSelectWithCtrlA'
-import { Theme, emphasize } from '@mui/material/styles'
-import { withStyles } from '@mui/styles'
+import { Theme, withStyles, emphasize } from '@material-ui/core/styles'
 
 interface HistoryItem {
   key: string
@@ -88,7 +87,6 @@ function HistoryDrawer(props: Props) {
                 invisible={!visible}
                 badgeContent={props.items.length}
                 color="primary"
-                data-testid="message-history"
               >
                 {expanded ? '▼ History' : '▶ History'}
               </Badge>

app/src/components/Sidebar/MessageId.tsx

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

app/src/components/Sidebar/NodeStats.tsx

@@ -1,7 +1,7 @@
 import * as q from '../../../../backend/src/Model'
 import * as React from 'react'
 import { TopicViewModel } from '../../model/TopicViewModel'
-import { Typography } from '@mui/material'
+import { Typography } from '@material-ui/core'
 
 interface Props {
   node?: q.TreeNode<TopicViewModel>

app/src/components/Sidebar/Panel.tsx

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

app/src/components/Sidebar/Publish/Editor.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { default as AceEditor } from 'react-ace'
-import { useTheme } from '@mui/material/styles'
+import { Theme, withTheme } from '@material-ui/core'
 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={theme.palette.mode === 'dark' ? 'monokai' : 'dawn'}
+      theme={props.theme.palette.type === 'dark' ? 'monokai' : 'dawn'}
       name="UNIQUE_ID_OF_DIV"
       width="100%"
       height="200px"
@@ -45,4 +45,4 @@ function Editor(props: {
   )
 }
 
-export default Editor
+export default withTheme(Editor)

app/src/components/Sidebar/Publish/EditorModeSelect.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { FormControlLabel, Radio, RadioGroup } from '@mui/material'
+import { FormControlLabel, Radio, RadioGroup } from '@material-ui/core'
 
 interface Props {
   value: string

app/src/components/Sidebar/Publish/Publish.tsx

@@ -1,14 +1,14 @@
 import Editor from './Editor'
-import { AttachFileOutlined, FormatAlignLeft } from '@mui/icons-material'
+import { AttachFileOutlined, FormatAlignLeft } from '@material-ui/icons'
 import Message from './Model/Message'
-import Navigation from '@mui/icons-material/Navigation'
+import Navigation from '@material-ui/icons/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, Tooltip } from '@mui/material'
+import { Button, Fab, Theme, Tooltip, withTheme } from '@material-ui/core'
 import { connect } from 'react-redux'
 import { EditorModeSelect } from './EditorModeSelect'
 import { globalActions, publishActions } from '../../../actions'
@@ -23,6 +23,7 @@ interface Props {
   globalActions: typeof globalActions
   retain: boolean
   editorMode: string
+  theme: Theme
 }
 
 function useHistory(): [Array<Message>, (topic: string, payload?: string) => void] {
@@ -220,4 +221,4 @@ const mapStateToProps = (state: AppState) => {
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(Publish)
+export default connect(mapStateToProps, mapDispatchToProps)(withTheme(Publish))

app/src/components/Sidebar/Publish/RetainSwitch.tsx

@@ -1,6 +1,6 @@
 import QosSelect from './QosPublishOption'
 import React from 'react'
-import { Checkbox, FormControlLabel, Tooltip } from '@mui/material'
+import { Checkbox, FormControlLabel, Tooltip } from '@material-ui/core'
 import { publishActions } from '../../../actions'
 import { bindActionCreators } from 'redux'
 import { AppState } from '../../../reducers'

app/src/components/Sidebar/Publish/TopicInput.tsx

@@ -1,6 +1,6 @@
 import ClearAdornment from '../../helper/ClearAdornment'
 import React, { useCallback, useMemo, useRef } from 'react'
-import { FormControl, Input, InputLabel } from '@mui/material'
+import { FormControl, Input, InputLabel } from '@material-ui/core'
 import { publishActions } from '../../../actions'
 import { bindActionCreators } from 'redux'
 import { AppState } from '../../../reducers'

app/src/components/Sidebar/Sidebar.tsx

@@ -2,14 +2,12 @@ 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 { AccordionDetails } from '@mui/material'
+import { ExpansionPanelDetails } from '@material-ui/core'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { settingsActions, sidebarActions } from '../../actions'
-import { Theme } from '@mui/material/styles'
-import { withStyles } from '@mui/styles'
+import { Theme, withStyles } from '@material-ui/core/styles'
 import { TopicViewModel } from '../../model/TopicViewModel'
 import TopicPanel from './TopicPanel/TopicPanel'
 import Panel from './Panel'
@@ -58,16 +56,16 @@ function Sidebar(props: Props) {
     <div id="Sidebar" className={classes.drawer}>
       <div>
         <TopicPanel node={node} />
-        <ValuePanelAny lastUpdate={node ? node.lastUpdate : 0} />
+        <ValuePanel lastUpdate={node ? node.lastUpdate : 0} />
         <Panel>
           <span>Publish</span>
           <Publish connectionId={props.connectionId} />
         </Panel>
         <Panel detailsHidden={!node}>
           <span>Stats</span>
-          <AccordionDetails className={classes.details}>
+          <ExpansionPanelDetails className={classes.details}>
             <NodeStats node={node} />
-          </AccordionDetails>
+          </ExpansionPanelDetails>
         </Panel>
       </div>
     </div>

app/src/components/Sidebar/TopicPanel/RecursiveTopicDeleteButton.tsx

@@ -1,8 +1,8 @@
 import * as q from '../../../../../backend/src/Model'
 import CustomIconButton from '../../helper/CustomIconButton'
-import Delete from '@mui/icons-material/Delete'
+import Delete from '@material-ui/icons/Delete'
 import React, { useCallback } from 'react'
-import { Badge } from '@mui/material'
+import { Badge } from '@material-ui/core'
 
 export const RecursiveTopicDeleteButton = (props: {
   node?: q.TreeNode<any>

app/src/components/Sidebar/TopicPanel/Topic.tsx

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

app/src/components/Sidebar/TopicPanel/TopicDeleteButton.tsx

@@ -1,6 +1,6 @@
 import * as q from '../../../../../backend/src/Model'
 import CustomIconButton from '../../helper/CustomIconButton'
-import Delete from '@mui/icons-material/Delete'
+import Delete from '@material-ui/icons/Delete'
 import React from 'react'
 
 export const TopicDeleteButton = (props: {

app/src/components/Sidebar/TopicPanel/TopicPanel.tsx

@@ -3,7 +3,6 @@ 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'
@@ -32,7 +31,7 @@ const TopicPanel = (props: { node?: q.TreeNode<any>; actions: typeof sidebarActi
           <RecursiveTopicDeleteButton node={node} deleteTopicAction={deleteTopic} />
           <TopicTypeButton node={node} />
         </span>
-        <TopicAny node={node} />
+        <Topic node={node} />
       </Panel>
     ),
     [node, node?.childTopicCount()]

app/src/components/Sidebar/TopicPanel/TopicTypeButton.tsx

@@ -1,15 +1,15 @@
 import React, { useCallback, useMemo } from 'react'
 import * as q from '../../../../../backend/src/Model'
-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 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 { MessageDecoder, decoders } from '../../../decoders'
-import { Tooltip } from '@mui/material'
+import { Tooltip } from '@material-ui/core'
 
 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: any) => {
+  const handleClose = useCallback((event: React.MouseEvent<Document, MouseEvent>) => {
     if (anchorEl && anchorEl.contains(event.target as HTMLElement)) {
       return
     }

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

@@ -1,12 +1,10 @@
 import React, { useCallback } from 'react'
-import Code from '@mui/icons-material/Code'
-import Reorder from '@mui/icons-material/Reorder'
-import ToggleButton from '@mui/material/ToggleButton'
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
+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 { settingsActions } from '../../../actions'
-import { Tooltip } from '@mui/material'
-import { withStyles } from '@mui/styles'
-import { Theme } from '@mui/material/styles'
+import { Tooltip, withStyles, Theme } from '@material-ui/core'
 import { bindActionCreators } from 'redux'
 import { AppState } from '../../../reducers'
 import { connect } from 'react-redux'
@@ -75,4 +73,4 @@ const mapStateToProps = (state: AppState) => {
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ActionButtons) as any)
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ActionButtons))

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

@@ -1,7 +1,7 @@
-import Clear from '@mui/icons-material/Clear'
+import Clear from '@material-ui/icons/Clear'
 import React, { useMemo } from 'react'
 import { bindActionCreators } from 'redux'
-import { Button, Tooltip } from '@mui/material'
+import { Button, Tooltip } from '@material-ui/core'
 import { connect } from 'react-redux'
 import { sidebarActions } from '../../../actions'
 

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

@@ -1,6 +1,6 @@
 import * as q from '../../../../../backend/src/Model'
 import * as React from 'react'
-import ShowChart from '@mui/icons-material/ShowChart'
+import ShowChart from '@material-ui/icons/ShowChart'
 import Copy from '../../helper/Copy'
 import DateFormatter from '../../helper/DateFormatter'
 import History from '../HistoryDrawer'

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

@@ -9,9 +9,7 @@ import React, { useCallback } from 'react'
 import ValueRenderer from './ValueRenderer'
 import { AppState } from '../../../reducers'
 import { bindActionCreators } from 'redux'
-import { Typography } from '@mui/material'
-import { Theme } from '@mui/material/styles'
-import { withStyles } from '@mui/styles'
+import { Theme, Typography, withStyles } from '@material-ui/core'
 import { connect } from 'react-redux'
 import { sidebarActions } from '../../../actions'
 import DeleteSelectedTopicButton from './DeleteSelectedTopicButton'
@@ -145,4 +143,4 @@ const styles = (theme: Theme) => ({
 })
 
 // @ts-ignore
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ValuePanel) as any)
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ValuePanel))