Bump electron-updater from 4.2.5 to 4.3.9

Bumps [electron-updater](https://github.com/electron-userland/electron-builder) from 4.2.5 to 4.3.9. - [Release notes](https://github.com/electron-userland/electron-builder/releases) - [Changelog](https://github.com/electron-userland/electron-builder/blob/master/CHANGELOG.md) - [Commits](https://github.com/electron-userland/electron-builder/commits) Signed-off-by: dependabot-preview[bot] <support@dependabot.com>
2026-09-11 17:13:53 +00:00 · 2021-06-01 05:24:52 +00:00
137 changed files with 10722 additions and 11584 deletions
@@ -1,11 +1,4 @@
 {
-  "import": [
-    "@cspell/dict-typescript/cspell-ext.json"
-  ],
-  "ignoreRegExpList": [
-    "import(?:(?:(?:[ \\n\\t]+([^ *\\n\\t\\{\\},]+)[ \\n\\t]*(?:,|[ \\n\\t]+))?([ \\n\\t]*\\{(?:[ \\n\\t]*[^ \\n\\t\"'\\{\\}]+[ \\n\\t]*,?)+\\})?[ \\n\\t]*)|[ \n\\n\\t]*\\*[ \\n\\t]*as[ \\n\\t]+([^ \\n\\t\\{\\}]+)[ \\n\\t]+)from[ \\n\\t]*(?:['\"])([^'\"\\n]+)(['\"])\n",
-    "^import\\s+(['\"]).*\\1$"
-  ],
  "language": "en",
  "words": [
    "Bbreak",
@@ -15,13 +8,15 @@
    "nowrap",
    "subheader",
    "basepath",
+    "webdriverio",
    "repo",
    "hexagonalize",
    "pixelize",
    "Transistions",
+    "squashfs",
+    "squashfs",
    "provisionprofile",
    "Nsis",
-    "webdriverio",
    "Appx",
    "Hashable",
    "clickaway",
@@ -31,6 +26,8 @@
    "Monokai",
    "plottable",
    "snackbar",
+    "webdriverio",
+    "prismjs",
    "Nordquist",
    "debounced",
    "mosquitto",
@@ -50,9 +47,6 @@
    "mixins",
    "Explorerdmg",
    "heapsnapshot",
-    "noconflict",
-    "sparkplugb",
-    "protojson",
-    "typesafe"
+    "noconflict"
  ]
-}
+}
@@ -1,3 +0,0 @@
-package.ts @thomasnordquist
-.github @thomasnordquist
-scripts @thomasnordquist
@@ -1,29 +0,0 @@
-on:
-  push:
-    branches:
-      - master
-      - release
-      - beta
-    paths:
-      - Dockerfile
-      - .github
-
-jobs:
-  create-image:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-      - name: Build and push
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          push: true
-          tags: ghcr.io/thomasnordquist/mqtt-explorer-ui-tests:latest
@@ -1,53 +0,0 @@
-name: Build
-
-on:
-  push:
-    branches:
-      - release
-      - beta
-
-concurrency:
-  group: ${{ github.ref }}
-  cancel-in-progress: false
-
-jobs:
-  build:
-    strategy:
-      matrix:
-        build:
-          - os: ubuntu-latest
-            task: linux
-          - os: windows-latest
-            task: win
-          - os: macos-latest
-            task: mac
-    runs-on: ${{ matrix.build.os }}
-    steps:
-      - if: matrix.build.os == 'ubuntu-latest'
-        run: sudo snap install snapcraft --classic
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-      - run: npm install -g yarn
-      - run: yarn
-      - id: create_token # get ReleaseBot access token
-        uses: tibdex/github-app-token@v2
-        with:
-          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
-        env:
-          GITHUB_TOKEN: ${{ steps.create_token.outputs.token }}
-      - run: yarn build
-        if: steps.semantic.outputs.new_release_published == 'true'
-      - run: yarn prepare-release
-        if: steps.semantic.outputs.new_release_published == 'true'
-      - run: yarn package ${{ matrix.build.task }}
-        if: steps.semantic.outputs.new_release_published == 'true'
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          SNAPCRAFT_STORE_CREDENTIALS: ${{ secrets.SNAPCRAFT_STORE_CREDENTIALS }}
-  
@@ -1,38 +0,0 @@
-on:
-  pull_request_target: # Use pull_request_target
-    branches: [master, beta, release]
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-    container:
-      image: ghcr.io/thomasnordquist/mqtt-explorer-ui-tests:latest
-      volumes:
-        - ./:/app
-      options: --user root
-    steps:
-      - uses: actions/checkout@v4
-      - name: Install Packages
-        run: yarn install --frozen-lockfile
-      - name: Build
-        run: yarn build
-      - name: Test
-        run: yarn test
-      - name: UI-Test
-        run: yarn ui-test
-      - name: Post-processing
-        run: ./scripts/prepareVideo.sh
-      - 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'
-          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
@@ -1,17 +0,0 @@
-name: Update Website
-
-on: [release, workflow_dispatch]
-
-jobs:
-  update-website:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          ref: gh-pages
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-      - run: npm install
-      - run: npm run readme
-      - uses: stefanzweifel/git-auto-commit-action@v5
@@ -1,30 +0,0 @@
-{
-  "branches": [
-    "release",
-    {
-      "name": "beta",
-      "prerelease": true
-    }
-  ],
-  repositoryUrl: "git@github.com:thomasnordquist/MQTT-Explorer.git",
-  "plugins": [
-    "@semantic-release/commit-analyzer",
-    "semantic-release-export-data",
-    "@semantic-release/changelog",
-    [
-      "@semantic-release/npm",
-      {
-        "npmPublish": false
-      }
-    ],
-    [
-      "@semantic-release/git",
-      {
-        "assets": [
-          "package.json",
-          "yarn.lock"
-        ]
-      }
-    ]
-  ]
-}
@@ -0,0 +1,46 @@
+language: node_js
+
+services:
+  - xvfb
+
+cache:
+  directories:
+  - node_modules
+  - $HOME/.cache/electron
+  - $HOME/.cache/electron-builder
+  - $HOME/.npm/_prebuilds
+
+node_js:
+  - "10"
+
+os:
+  - linux
+  - osx
+
+osx_image: xcode10.2
+
+dist: bionic
+
+services:
+  - docker
+
+install:
+  - yarn install
+  - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sudo apt-get update && sudo apt-get -y install snap squashfs-tools && sudo snap install snapcraft --classic; fi;
+
+script:
+  - yarn run build
+  - yarn lint
+  - yarn test
+  - export TRAVIS_BUILD_NUMBER="" # Override travis build number since it is uses for tagging the binary version https://github.com/electron-userland/electron-builder/issues/3730
+  - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then docker run -e GH_TOKEN=$GH_TOKEN -e GIT_TAG=$TRAVIS_TAG --rm -v `pwd`:/app thomasnordquist/ui-test-recording-env sh -c "cd app && docker/testMounted.sh"; fi
+  - if [[ "$TRAVIS_TAG" != "" ]]; then yarn run prepare-release; fi
+  - |
+    if [[ "$TRAVIS_OS_NAME" == "linux" ]] && [[ "$TRAVIS_TAG" != "" ]]; then
+      openssl aes-256-cbc -d -in res/snapstore-credentials.enc -out credentials -k $SNAPSTORE_CREDENTIALS_DECRYPTION_KEY;
+      snapcraft login --with credentials;
+      rm credentials;
+      yarn run package linux;
+    fi
+  - if [[ "$TRAVIS_OS_NAME" == "osx" ]] && [[ "$TRAVIS_TAG" != "" ]]; then yarn run package -- mac; fi
+  - if [[ "$TRAVIS_OS_NAME" == "osx" ]] && [[ "$TRAVIS_TAG" != "" ]]; then unset CSC_LINK; yarn run package -- win; fi
@@ -6,12 +6,11 @@
 [![Build status](https://ci.appveyor.com/api/projects/status/c35tkm29rm4m5364/branch/master?svg=true)](https://ci.appveyor.com/project/thomasnordquist/mqtt-explorer/branch/master)
 [![Codacy Badge](https://api.codacy.com/project/badge/Grade/47b26e03fce543ceac7914214482334a)](https://app.codacy.com/app/thomasnordquist/MQTT-Explorer?utm_source=github.com&utm_medium=referral&utm_content=thomasnordquist/MQTT-Explorer&utm_campaign=Badge_Grade_Dashboard)

-|                                                                                                                                     |                                                                                                                |                                                                                                                |
-| :---------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------: |
-| [![screen_composite](https://mqtt-explorer.com/img/screen-composite_small.png)](https://mqtt-explorer.com/img/screen-composite.png) | [![screen2_small](https://mqtt-explorer.com/img/screen2_small.png)](https://mqtt-explorer.com/img/screen2.png) | [![screen3_small](https://mqtt-explorer.com/img/screen3_small.png)](https://mqtt-explorer.com/img/screen3.png) |
+|   |   |   |
+|:---:|:---:|:---:|
+|[![screen_composite](https://mqtt-explorer.com/img/screen-composite_small.png)](https://mqtt-explorer.com/img/screen-composite.png)|[![screen2_small](https://mqtt-explorer.com/img/screen2_small.png)](https://mqtt-explorer.com/img/screen2.png)|[![screen3_small](https://mqtt-explorer.com/img/screen3_small.png)](https://mqtt-explorer.com/img/screen3.png)|

 # The App has moved to [mqtt-explorer.com](https://mqtt-explorer.com)
-
 MQTT Explorer is a comprehensive and easy-to-use MQTT Client.  
 Downloads can be found at the link above.

@@ -30,7 +29,6 @@ yarn start
 ## Develop

 Launch Application
-
 ```bash
 npm install -g yarn
 yarn
@@ -65,20 +63,12 @@ npm run build
 node dist/src/spec/webdriverio.js
 ```

-## 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
-
-## Create a beta release
-
-Create a PR to `beta` branch. A "feat" or "fix" commit is necessary to create a new version.
-
 ## Write docs

 ```
-git clone --single-branch -b gh-pages https://github.com/thomasnordquist/MQTT-Explorer.git mqtt-explorer-pages
+git clone https://github.com/thomasnordquist/MQTT-Explorer.git mqtt-explorer-pages
 cd mqtt-explorer-pages
+git checkout gh-pages
 bundle install
 bundle exec jekyll serve --incremental
 ```
@@ -1,197 +1,181 @@
 <!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
+    <title>MQTT Explorer</title>
+    <script src="./bugtracking.bundle.js"></script>

-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
-  <title>MQTT Explorer</title>
-  <script src="./bugtracking.bundle.js"></script>
-
-  <style>
-    body,
-    html {
-      margin: 0;
-      padding: 0;
-    }
-
-    [tabindex] {
-      outline: none;
-    }
-
-    @keyframes updateDark {
-      0% {
-        background-color: none;
+    <style>
+      body,
+      html {
+        margin: 0;
+        padding: 0;
      }

-      25% {
-        background-color: #595585;
+      [tabindex] {
+        outline: none;
      }

-      50% {
-        background-color: #595585;
+      @keyframes updateDark {
+        0% {
+          background-color: none;
+        }
+        25% {
+          background-color: #595585;
+        }
+        50% {
+          background-color: #595585;
+        }
+        100% {
+          background-color: none;
+        }
      }

-      100% {
-        background-color: none;
-      }
-    }
-
-    @keyframes updateLight {
-      0% {
-        background-color: none;
-        color: inherit;
+      @keyframes updateLight {
+        0% {
+          background-color: none;
+          color: inherit;
+        }
+        25% {
+          background-color: #c0c8c0;
+        }
+        50% {
+          background-color: #c0c8c0;
+        }
+        100% {
+          background-color: none;
+          color: inherit;
+        }
      }

-      25% {
-        background-color: #c0c8c0;
+      ::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
      }

-      50% {
-        background-color: #c0c8c0;
+      ::-webkit-scrollbar-corner {
+        background-color: rgba(0, 0, 0, 0);
      }

-      100% {
-        background-color: none;
-        color: inherit;
+      ::-webkit-scrollbar-track {
+        -webkit-box-shadow: inset 0 0 6px rgba(60, 60, 60, 0.5);
+        background-color: rgba(140, 140, 140, 0.1);
      }
-    }

-    ::-webkit-scrollbar {
-      width: 8px;
-      height: 8px;
-    }
+      ::-webkit-scrollbar-thumb {
+        background-color: rgba(140, 140, 140, 0.8);
+      }
+    </style>
+    <style>
+      .Resizer {
+        background: rgba(200, 200, 200, 0);
+        z-index: 10;
+        -moz-box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        -moz-background-clip: padding;
+        -webkit-background-clip: padding;
+        background-clip: padding-box;
+      }

-    ::-webkit-scrollbar-corner {
-      background-color: rgba(0, 0, 0, 0);
-    }
+      .Resizer:hover {
+        -webkit-transition: all 0.3s ease-out;
+        transition: all 0.3s ease-out;
+      }

-    ::-webkit-scrollbar-track {
-      -webkit-box-shadow: inset 0 0 6px rgba(60, 60, 60, 0.5);
-      background-color: rgba(140, 140, 140, 0.1);
-    }
+      .Resizer.horizontal {
+        height: 10px;
+        margin: -10px 0 0 0;
+        border-top: 5px solid rgba(255, 255, 255, 0);
+        border-bottom: 5px solid rgba(255, 255, 255, 0);
+        cursor: row-resize;
+        width: 100%;
+      }

-    ::-webkit-scrollbar-thumb {
-      background-color: rgba(140, 140, 140, 0.8);
-    }
-  </style>
-  <style>
-    .Resizer {
-      background: rgba(200, 200, 200, 0);
-      z-index: 10;
-      -moz-box-sizing: border-box;
-      -webkit-box-sizing: border-box;
-      box-sizing: border-box;
-      -moz-background-clip: padding;
-      -webkit-background-clip: padding;
-      background-clip: padding-box;
-    }
+      .Resizer.horizontal::before {
+        content: '•••';
+        display: inline-block;
+        vertical-align: middle;
+        text-align: center;
+        width: 100%;
+        margin-top: -22px;
+        color: #aaa;
+        opacity: 1;
+      }

-    .Resizer:hover {
-      -webkit-transition: all 0.3s ease-out;
-      transition: all 0.3s ease-out;
-    }
+      .Resizer.horizontal:hover {
+        border-top: 5px solid rgba(120, 120, 120, 0.3);
+        border-bottom: 5px solid rgba(120, 120, 120, 0.3);
+      }

-    .Resizer.horizontal {
-      height: 10px;
-      margin: -10px 0 0 0;
-      border-top: 5px solid rgba(255, 255, 255, 0);
-      border-bottom: 5px solid rgba(255, 255, 255, 0);
-      cursor: row-resize;
-      width: 100%;
-    }
+      .Resizer.vertical {
+        width: 2px;
+        margin: 0px -8px 0px 0px;
+        border-left: 0px solid rgba(128, 128, 128, 0);
+        border-right: 8px solid rgba(128, 128, 128, 0);
+        cursor: col-resize;
+      }

-    .Resizer.horizontal::before {
-      content: '•••';
-      display: inline-block;
-      vertical-align: middle;
-      text-align: center;
-      width: 100%;
-      margin-top: -22px;
-      color: #aaa;
-      opacity: 1;
-    }
+      .Resizer.vertical::before {
+        content: '•••';
+        margin-left: -11px;
+        height: 3em;
+        margin-top: calc(50vh - 32px);
+        display: inline-block;
+        vertical-align: middle;
+        text-align: center;
+        color: #aaa;
+        opacity: 1;
+        writing-mode: vertical-lr;
+        text-orientation: sideways;
+      }

-    .Resizer.horizontal:hover {
-      border-top: 5px solid rgba(120, 120, 120, 0.3);
-      border-bottom: 5px solid rgba(120, 120, 120, 0.3);
-    }
+      .Resizer.vertical:hover {
+        border-left: 0px solid rgba(130, 130, 130, 0.3);
+        border-right: 8px solid rgba(140, 140, 140, 0.3);
+      }

-    .Resizer.vertical {
-      width: 2px;
-      margin: 0px -8px 0px 0px;
-      border-left: 0px solid rgba(128, 128, 128, 0);
-      border-right: 8px solid rgba(128, 128, 128, 0);
-      cursor: col-resize;
-    }
+      .Resizer.disabled {
+        cursor: not-allowed;
+      }
+      .Resizer.disabled:hover {
+        border-color: transparent;
+      }

-    .Resizer.vertical::before {
-      content: '•••';
-      margin-left: -11px;
-      height: 3em;
-      margin-top: calc(50vh - 32px);
-      display: inline-block;
-      vertical-align: middle;
-      text-align: center;
-      color: #aaa;
-      opacity: 1;
-      writing-mode: vertical-lr;
-      text-orientation: sideways;
-    }
+      .example-enter {
+        opacity: 0;
+      }
+      .example-enter-active {
+        opacity: 1;
+        transition: opacity 300ms ease-in;
+      }
+      .example-exit {
+        opacity: 1;
+      }
+      .example-exit-active {
+        opacity: 0;
+        transition: opacity 300ms ease-in;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app" style="font: -webkit-control;"></div>
+    <script>
+      function loadScript(path) {
+        var script = document.createElement('script')
+        script.src = path
+        document.head.appendChild(script)
+      }

-    .Resizer.vertical:hover {
-      border-left: 0px solid rgba(130, 130, 130, 0.3);
-      border-right: 8px solid rgba(140, 140, 140, 0.3);
-    }
-
-    .Resizer.disabled {
-      cursor: not-allowed;
-    }
-
-    .Resizer.disabled:hover {
-      border-color: transparent;
-    }
-
-    .example-enter {
-      opacity: 0;
-    }
-
-    .example-enter-active {
-      opacity: 1;
-      transition: opacity 300ms ease-in;
-    }
-
-    .example-exit {
-      opacity: 1;
-    }
-
-    .example-exit-active {
-      opacity: 0;
-      transition: opacity 300ms ease-in;
-    }
-  </style>
-  <script>
-    global = globalThis //<- this should be enough
-  </script>
-</head>
-
-<body>
-  <div id="app" style="font: -webkit-control;"></div>
-  <script>
-    function loadScript(path) {
-      var script = document.createElement('script')
-      script.src = path
-      document.head.appendChild(script)
-    }
-
-    document.addEventListener('DOMContentLoaded', onLoad(), false)
-    function onLoad() {
-      // <% _.forEach(htmlWebpackPlugin.files.js, function(file) { %>loadScript("<%- file %>");<% }); %>
-      // loadScript("<%= JSON.stringify(htmlWebpackPlugin) %>")
-    }
-  </script>
-  <% _.forEach(htmlWebpackPlugin.files.js, function(file) { %>
+      document.addEventListener('DOMContentLoaded', onLoad(), false)
+      function onLoad() {
+        // <% _.forEach(htmlWebpackPlugin.files.js, function(file) { %>loadScript("<%- file %>");<% }); %>
+        // loadScript("<%= JSON.stringify(htmlWebpackPlugin) %>")
+      }
+    </script>
+    <% _.forEach(htmlWebpackPlugin.files.js, function(file) { %>
    <script src="<%- file %>"></script>
    <% }); %>
-</body>
-
-</html>
+  </body>
+</html>
@@ -4,30 +4,30 @@
  "description": "",
  "main": "index.js",
  "scripts": {
-    "build": "webpack --mode production",
+    "build": "yarn rebuild && webpack --mode production",
    "dev": "node_modules/.bin/webpack-dev-server --mode development --progress",
+    "rebuild": "cd node_modules/heapdump && node-gyp rebuild --target=7.1.1 --arch=x64 --dist-url=https://atom.io/download/electron || echo Could not build heapdump; cd -",
    "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": ">=18"
+    "mochatest": "mocha --require ts-node/register src/**/*.spec.ts"
  },
  "author": "",
  "license": "CC-BY-ND-4.0",
  "dependencies": {
-    "@material-ui/core": "4.12",
+    "@material-ui/core": "^4",
    "@material-ui/icons": "^4",
    "@material-ui/lab": "^4.0.0-alpha",
-    "@material-ui/styles": "4.11",
+    "@material-ui/styles": "^4",
    "@types/react-transition-group": "^4",
    "ace-builds": "^1.4.11",
-    "axios": "^0.28.0",
+    "axios": "^0.19.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",
+    "electron-telemetry": "git+https://github.com/thomasnordquist/electron-telemetry.git#dist",
+    "file-loader": "6",
    "get-value": "^3.0.1",
    "immutable": "^4.0.0-rc.12",
    "in-viewport": "^3.6.0",
@@ -35,6 +35,7 @@
    "json-to-ast": "^2.1.0",
    "lodash.debounce": "^4.0.8",
    "lodash.throttle": "^4.1.1",
+    "moment": "^2.24.0",
    "moving-average": "^1.0.0",
    "number-abbreviate": "^2.0.0",
    "parse-duration": "^0.1.1",
@@ -55,7 +56,6 @@
    "uuid": "7"
  },
  "devDependencies": {
-    "@babel/runtime": "^7.17.2",
    "@types/d3": "^5.7.2",
    "@types/diff": "^4.0.1",
    "@types/get-value": "^3.0.1",
@@ -69,25 +69,24 @@
    "@types/socket.io-client": "^1.4.32",
    "@types/uuid": "^7.0.2",
    "@types/vis": "^4.21.9",
+    "awesome-typescript-loader": "^5.2.1",
    "chai": "^4.2.0",
    "cross-env": "^7.0.2",
    "css-loader": "^3.0.0",
-    "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.5.0",
-    "lodash": "^4.17.21",
-    "mocha": "^10.4.0",
-    "moment": "^2.29.1",
+    "hard-source-webpack-plugin": "^0.13.1",
+    "heapdump": "^0.3.12",
+    "html-webpack-plugin": "^4.0.0-beta.5",
+    "mocha": "^7.1.1",
    "node-loader": "^0.6.0",
    "source-map-loader": "^0.2.4",
    "style-loader": "^1",
-    "ts-loader": "^9.5.1",
-    "typescript": "^4.5.5",
-    "webpack": "^5.91.0",
-    "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.0.4"
+    "typescript": "^3.6.3",
+    "webpack": "^4.28.2",
+    "webpack-bundle-analyzer": "^3.0.3",
+    "webpack-cli": "^3.3.6",
+    "webpack-dev-server": "^3.1.14"
  },
  "peerDependencies": {
-    "electron": "^29"
+    "electron": "^5.0.5"
  }
 }
@@ -60,55 +60,63 @@ export const saveCharts = () => async (dispatch: Dispatch<any>, getState: () =>
  }
 }

-export const addChart =
-  (chartParameters: ChartParameters) => async (dispatch: Dispatch<any>, getState: () => AppState) => {
-    const chartExists = Boolean(
-      getState()
-        .charts.get('charts')
-        .find(chart => chart.topic === chartParameters.topic && chart.dotPath === chartParameters.dotPath)
-    )
-    if (chartExists) {
-      dispatch(showNotification('Already added'))
-      return
-    }
-
-    dispatch({
-      type: ActionTypes.CHARTS_ADD,
-      chart: chartParameters,
-    })
-    dispatch(saveCharts())
-    dispatch(showNotification('Added to chart panel'))
+export const addChart = (chartParameters: ChartParameters) => async (
+  dispatch: Dispatch<any>,
+  getState: () => AppState
+) => {
+  const chartExists = Boolean(
+    getState()
+      .charts.get('charts')
+      .find(chart => chart.topic === chartParameters.topic && chart.dotPath === chartParameters.dotPath)
+  )
+  if (chartExists) {
+    dispatch(showNotification('Already added'))
+    return
  }

-export const updateChart =
-  (chartParameters: ChartParameters) => async (dispatch: Dispatch<any>, getState: () => AppState) => {
-    dispatch({
-      type: ActionTypes.CHARTS_UPDATE,
-      topic: chartParameters.topic,
-      dotPath: chartParameters.dotPath,
-      parameters: chartParameters,
-    })
-    dispatch(saveCharts())
-  }
+  dispatch({
+    type: ActionTypes.CHARTS_ADD,
+    chart: chartParameters,
+  })
+  dispatch(saveCharts())
+  dispatch(showNotification('Added to chart panel'))
+}

-export const removeChart =
-  (chartParameters: ChartParameters) => async (dispatch: Dispatch<any>, getState: () => AppState) => {
-    dispatch({
-      chart: chartParameters,
-      type: ActionTypes.CHARTS_REMOVE,
-    })
-    dispatch(saveCharts())
-  }
+export const updateChart = (chartParameters: ChartParameters) => async (
+  dispatch: Dispatch<any>,
+  getState: () => AppState
+) => {
+  dispatch({
+    type: ActionTypes.CHARTS_UPDATE,
+    topic: chartParameters.topic,
+    dotPath: chartParameters.dotPath,
+    parameters: chartParameters,
+  })
+  dispatch(saveCharts())
+}

-export const moveChartUp =
-  (parameters: { topic: string; dotPath?: string }) => async (dispatch: Dispatch<any>, getState: () => AppState) => {
-    dispatch({
-      topic: parameters.topic,
-      dotPath: parameters.dotPath,
-      type: ActionTypes.CHARTS_MOVE_UP,
-    })
-    dispatch(saveCharts())
-  }
+export const removeChart = (chartParameters: ChartParameters) => async (
+  dispatch: Dispatch<any>,
+  getState: () => AppState
+) => {
+  dispatch({
+    chart: chartParameters,
+    type: ActionTypes.CHARTS_REMOVE,
+  })
+  dispatch(saveCharts())
+}
+
+export const moveChartUp = (parameters: { topic: string; dotPath?: string }) => async (
+  dispatch: Dispatch<any>,
+  getState: () => AppState
+) => {
+  dispatch({
+    topic: parameters.topic,
+    dotPath: parameters.dotPath,
+    type: ActionTypes.CHARTS_MOVE_UP,
+  })
+  dispatch(saveCharts())
+}

 export const setCharts = (charts: Array<ChartParameters>): Action => {
  return {
@@ -11,29 +11,31 @@ import { showError } from './Global'
 import { TopicViewModel } from '../model/TopicViewModel'
 import { addMqttConnectionEvent, makeConnectionStateEvent, removeConnection, rendererEvents } from '../../../events'

-export const connect =
-  (options: MqttOptions, connectionId: string) => (dispatch: Dispatch<any>, getState: () => AppState) => {
-    dispatch(connecting(connectionId))
-    rendererEvents.emit(addMqttConnectionEvent, { options, id: connectionId })
-    const event = makeConnectionStateEvent(connectionId)
-    const host = url.parse(options.url).hostname
+export const connect = (options: MqttOptions, connectionId: string) => (
+  dispatch: Dispatch<any>,
+  getState: () => AppState
+) => {
+  dispatch(connecting(connectionId))
+  rendererEvents.emit(addMqttConnectionEvent, { options, id: connectionId })
+  const event = makeConnectionStateEvent(connectionId)
+  const host = url.parse(options.url).hostname

-    rendererEvents.subscribe(event, dataSourceState => {
-      if (dataSourceState.connected) {
-        const didReconnect = Boolean(getState().connection.tree)
-        if (!didReconnect) {
-          const tree = new q.Tree<TopicViewModel>()
-          tree.updateWithConnection(rendererEvents, connectionId)
-          dispatch(showTree(tree))
-          dispatch(connected(tree, host!))
-        }
-      } else if (dataSourceState.error) {
-        dispatch(showError(dataSourceState.error))
-        dispatch(disconnect())
+  rendererEvents.subscribe(event, dataSourceState => {
+    if (dataSourceState.connected) {
+      const didReconnect = Boolean(getState().connection.tree)
+      if (!didReconnect) {
+        const tree = new q.Tree<TopicViewModel>()
+        tree.updateWithConnection(rendererEvents, connectionId)
+        dispatch(showTree(tree))
+        dispatch(connected(tree, host!))
      }
-      dispatch(updateHealth(dataSourceState))
-    })
-  }
+    } else if (dataSourceState.error) {
+      dispatch(showError(dataSourceState.error))
+      dispatch(disconnect())
+    }
+    dispatch(updateHealth(dataSourceState))
+  })
+}

 const updateHealth = (dataSourceState: DataSourceState) => (dispatch: Dispatch<any>, getState: () => AppState) => {
  let state
@@ -9,12 +9,12 @@ import {
 import { default as persistentStorage, StorageIdentifier } from '../utils/PersistentStorage'
 import { Dispatch } from 'redux'
 import { showError } from './Global'
+import { remote } from 'electron'
+import { promises as fsPromise } from 'fs'
 import * as path from 'path'
 import { ActionTypes, Action } from '../reducers/ConnectionManager'
 import { Subscription } from '../../../backend/src/DataSource/MqttSource'
 import { connectionsMigrator } from './migrations/Connection'
-import { rendererRpc, readFromFile } from '../../../events'
-import { makeOpenDialogRpc } from '../../../events/OpenDialogRequest'

 export interface ConnectionDictionary {
  [s: string]: ConnectionOptions
@@ -50,19 +50,21 @@ export const loadConnectionSettings = () => async (dispatch: Dispatch<any>, getS
 }

 export type CertificateTypes = 'selfSignedCertificate' | 'clientCertificate' | 'clientKey'
-export const selectCertificate =
-  (type: CertificateTypes, connectionId: string) => async (dispatch: Dispatch<any>, getState: () => AppState) => {
-    try {
-      const certificate = await openCertificate()
-      dispatch(
-        updateConnection(connectionId, {
-          [type]: certificate,
-        })
-      )
-    } catch (error) {
-      dispatch(showError(error))
-    }
+export const selectCertificate = (type: CertificateTypes, connectionId: string) => async (
+  dispatch: Dispatch<any>,
+  getState: () => AppState
+) => {
+  try {
+    const certificate = await openCertificate()
+    dispatch(
+      updateConnection(connectionId, {
+        [type]: certificate,
+      })
+    )
+  } catch (error) {
+    dispatch(showError(error))
  }
+}

 async function openCertificate(): Promise<CertificateParameters> {
  const rejectReasons = {
@@ -70,7 +72,7 @@ async function openCertificate(): Promise<CertificateParameters> {
    certificateSizeDoesNotMatch: 'Certificate size larger/smaller then expected.',
  }

-  const openDialogReturnValue = await rendererRpc.call(makeOpenDialogRpc(), {
+  const openDialogReturnValue = await remote.dialog.showOpenDialog(remote.getCurrentWindow(), {
    properties: ['openFile'],
    securityScopedBookmarks: true,
  })
@@ -80,8 +82,8 @@ async function openCertificate(): Promise<CertificateParameters> {
    throw rejectReasons.noCertificateSelected
  }

-  const data = await rendererRpc.call(readFromFile, { filePath: selectedFile })
-  if (data.length > 16_384 || data.length < 64) {
+  const data = await fsPromise.readFile(selectedFile)
+  if (data.length > 16_384 || data.length < 128) {
    throw rejectReasons.certificateSizeDoesNotMatch
  }

@@ -1,7 +1,7 @@
 import { ActionTypes, ConfirmationRequest } from '../reducers/Global'
 import { Dispatch } from 'redux'

-export const showError = (error?: string | unknown) => ({
+export const showError = (error?: string) => ({
  error,
  type: ActionTypes.showError,
 })
@@ -2,10 +2,7 @@ import { Action, ActionTypes } from '../reducers/Publish'
 import { AppState } from '../reducers'
 import { Base64Message } from '../../../backend/src/Model/Base64Message'
 import { Dispatch } from 'redux'
-import { MqttMessage, makePublishEvent, rendererEvents, rendererRpc, readFromFile } from '../../../events'
-import { makeOpenDialogRpc } from '../../../events/OpenDialogRequest'
-import { showError } from './Global'
-import { Base64 } from 'js-base64'
+import { makePublishEvent, rendererEvents } from '../../../events'

 export const setTopic = (topic?: string): Action => {
  return {
@@ -14,49 +11,6 @@ export const setTopic = (topic?: string): Action => {
  }
 }

-export const openFile = (encoding: 'utf8' = 'utf8') => async (dispatch: Dispatch<any>, getState: () => AppState) => {
-  try {
-    const file = await getFileContent(encoding)
-    if (file) {
-      dispatch(
-        setPayload(file.data))
-    }
-  } catch (error) {
-    dispatch(showError(error))
-  }
-}
-
-type FileParameters = {
-  name: string,
-  data: string
-}
-async function getFileContent(encoding: string): Promise<FileParameters | undefined> {
-  const rejectReasons = {
-    noFileSelected: 'No file selected',
-    errorReadingFile: 'Error reading file'
-  }
-
-  const { canceled, filePaths } = await rendererRpc.call(makeOpenDialogRpc(), {
-    properties: ['openFile'],
-    securityScopedBookmarks: true,
-  })
-
-  if (canceled) {
-    return
-  }
-
-  const selectedFile = filePaths[0]
-  if (!selectedFile) {
-    throw rejectReasons.noFileSelected
-  }
-  try {
-    const data = await rendererRpc.call(readFromFile, { filePath: selectedFile, encoding })
-    return { name: selectedFile, data: data.toString(encoding) }
-  } catch (error) {
-    throw rejectReasons.errorReadingFile
-  }
-}
-
 export const setPayload = (payload?: string): Action => {
  return {
    payload,
@@ -87,7 +41,7 @@ export const publish = (connectionId: string) => (dispatch: Dispatch<Action>, ge
  }

  const publishEvent = makePublishEvent(connectionId)
-  const mqttMessage: Partial<MqttMessage> = {
+  const mqttMessage = {
    topic,
    payload: state.publish.payload ? Base64Message.fromString(state.publish.payload) : null,
    retain: state.publish.retain,
@@ -1,5 +1,5 @@
 import * as q from '../../../backend/src/Model'
-import { ActionTypes, SettingsStateModel, TopicOrder, ValueRendererDisplayMode } from '../reducers/Settings'
+import { ActionTypes, SettingsStateModel, TopicOrder } from '../reducers/Settings'
 import { AppState } from '../reducers'
 import { autoExpandLimitSet } from '../components/SettingsDrawer/Settings'
 import { Base64Message } from '../../../backend/src/Model/Base64Message'
@@ -43,14 +43,12 @@ export const storeSettings = () => async (dispatch: Dispatch<any>, getState: ()
  }
 }

-export const setAutoExpandLimit =
-  (autoExpandLimit: number = 0) =>
-  (dispatch: Dispatch<any>) => {
-    dispatch({
-      autoExpandLimit,
-      type: ActionTypes.SETTINGS_SET_AUTO_EXPAND_LIMIT,
-    })
-  }
+export const setAutoExpandLimit = (autoExpandLimit: number = 0) => (dispatch: Dispatch<any>) => {
+  dispatch({
+    autoExpandLimit,
+    type: ActionTypes.SETTINGS_SET_AUTO_EXPAND_LIMIT,
+  })
+}

 export const setTimeLocale = (timeLocale: string) => (dispatch: Dispatch<any>) => {
  dispatch({
@@ -68,14 +66,13 @@ export const selectTopicWithMouseOver = (doSelect: boolean) => (dispatch: Dispat
  dispatch(storeSettings())
 }

-export const setValueDisplayMode =
-  (valueRendererDisplayMode: ValueRendererDisplayMode) => (dispatch: Dispatch<any>) => {
-    dispatch({
-      valueRendererDisplayMode,
-      type: ActionTypes.SETTINGS_SET_VALUE_RENDERER_DISPLAY_MODE,
-    })
-    dispatch(storeSettings())
-  }
+export const setValueDisplayMode = (valueRendererDisplayMode: 'diff' | 'raw') => (dispatch: Dispatch<any>) => {
+  dispatch({
+    valueRendererDisplayMode,
+    type: ActionTypes.SETTINGS_SET_VALUE_RENDERER_DISPLAY_MODE,
+  })
+  dispatch(storeSettings())
+}

 export const toggleHighlightTopicUpdates = () => (dispatch: Dispatch<any>) => {
  dispatch({
@@ -84,15 +81,13 @@ export const toggleHighlightTopicUpdates = () => (dispatch: Dispatch<any>) => {
  dispatch(storeSettings())
 }

-export const setTopicOrder =
-  (topicOrder: TopicOrder = TopicOrder.none) =>
-  (dispatch: Dispatch<any>) => {
-    dispatch({
-      topicOrder,
-      type: ActionTypes.SETTINGS_SET_TOPIC_ORDER,
-    })
-    dispatch(storeSettings())
-  }
+export const setTopicOrder = (topicOrder: TopicOrder = TopicOrder.none) => (dispatch: Dispatch<any>) => {
+  dispatch({
+    topicOrder,
+    type: ActionTypes.SETTINGS_SET_TOPIC_ORDER,
+  })
+  dispatch(storeSettings())
+}

 export const filterTopics = (filterStr: string) => (dispatch: Dispatch<any>, getState: () => AppState) => {
  const { tree } = getState().connection
@@ -118,7 +113,7 @@ export const filterTopics = (filterStr: string) => (dispatch: Dispatch<any>, get
    const messageMatches =
      node.message &&
      node.message.payload &&
-      node.message.payload.toUnicodeString().toLowerCase().indexOf(filterStr) !== -1
+      Base64Message.toUnicodeString(node.message.payload).toLowerCase().indexOf(filterStr) !== -1

    return Boolean(messageMatches)
  }
@@ -12,10 +12,12 @@ export { clearTopic } from './clearTopic'

 export { moveSelectionUpOrDownwards, moveInward, moveOutward } from './visibleTreeTraversal'

-export const selectTopic =
-  (topic: q.TreeNode<TopicViewModel>) => (dispatch: Dispatch<any>, getState: () => AppState) => {
-    debouncedSelectTopic(topic, dispatch, getState)
-  }
+export const selectTopic = (topic: q.TreeNode<TopicViewModel>) => (
+  dispatch: Dispatch<any>,
+  getState: () => AppState
+) => {
+  debouncedSelectTopic(topic, dispatch, getState)
+}

 const debouncedSelectTopic = debounce(
  (topic: q.TreeNode<TopicViewModel>, dispatch: Dispatch<any>, getState: () => AppState) => {
@@ -33,8 +35,13 @@ const debouncedSelectTopic = debounce(
      setTopicDispatch = setTopic(topic.path())
    }

-    previouslySelectedTopic?.viewModel?.setSelected(false)
-    topic.viewModel?.setSelected(true)
+    if (previouslySelectedTopic && previouslySelectedTopic.viewModel) {
+      previouslySelectedTopic.viewModel.setSelected(false)
+    }
+
+    if (topic.viewModel) {
+      topic.viewModel.setSelected(true)
+    }

    const selectTreeTopicDispatch = {
      selectedTopic: topic,
@@ -67,26 +74,25 @@ function destroyUnreferencedTree(state: AppState) {
  }
 }

-export const resetStore =
-  () =>
-  (dispatch: Dispatch<any>, getState: () => AppState): AnyAction => {
-    destroyUnreferencedTree(getState())
+export const resetStore = () => (dispatch: Dispatch<any>, getState: () => AppState): AnyAction => {
+  destroyUnreferencedTree(getState())

-    return dispatch({
-      type: ActionTypes.TREE_RESET_STORE,
-    })
-  }
+  return dispatch({
+    type: ActionTypes.TREE_RESET_STORE,
+  })
+}

-export const showTree =
-  (tree: q.Tree<TopicViewModel> | undefined) =>
-  (dispatch: Dispatch<any>, getState: () => AppState): AnyAction => {
-    destroyUnreferencedTree(getState())
+export const showTree = (tree: q.Tree<TopicViewModel> | undefined) => (
+  dispatch: Dispatch<any>,
+  getState: () => AppState
+): AnyAction => {
+  destroyUnreferencedTree(getState())

-    return dispatch({
-      tree,
-      type: ActionTypes.TREE_SHOW_TREE,
-    })
-  }
+  return dispatch({
+    tree,
+    type: ActionTypes.TREE_SHOW_TREE,
+  })
+}

 export const togglePause = (tree?: q.Tree<TopicViewModel>) => (dispatch: Dispatch<any>, getState: () => AppState) => {
  const paused = getState().tree.get('paused')
@@ -5,50 +5,52 @@ import { makePublishEvent, rendererEvents } from '../../../events'
 import { moveSelectionUpOrDownwards } from './visibleTreeTraversal'
 import { globalActions } from '.'

-export const clearTopic =
-  (topic: q.TreeNode<any>, recursive: boolean) => async (dispatch: Dispatch<any>, getState: () => AppState) => {
-    const topicsForPurging = recursive ? [topic, ...topic.childTopics()] : [topic]
+export const clearTopic = (topic: q.TreeNode<any>, recursive: boolean) => async (
+  dispatch: Dispatch<any>,
+  getState: () => AppState
+) => {
+  const topicsForPurging = recursive ? [topic, ...topic.childTopics()] : [topic]

-    if (recursive) {
-      const topicCount = topic.childTopicCount()
+  if (recursive) {
+    const topicCount = topic.childTopicCount()

-      const topicDelta = topic.hasMessage() ? -1 : 0
-      const childTopicsMessage =
-        topicCount + topicDelta > 0
-          ? ` and ${topicCount + topicDelta} child ${topicCount + topicDelta === 1 ? 'topic' : 'topics'}`
-          : ''
+    const topicDelta = topic.hasMessage() ? -1 : 0
+    const childTopicsMessage =
+      topicCount + topicDelta > 0
+        ? ` and ${topicCount + topicDelta} child ${topicCount + topicDelta === 1 ? 'topic' : 'topics'}`
+        : ''

-      const confirmed = await dispatch(
-        globalActions.requestConfirmation(
-          'Confirm delete',
-          `Do you want to clear "${topic.path()}"${childTopicsMessage}?\n\nThis function will send an empty payload (QoS 0, retain) to this and every subtopic, clearing retained topics in the process. Only use this function if you know what you are doing.`
-        )
+    const confirmed = await dispatch(
+      globalActions.requestConfirmation(
+        'Confirm delete',
+        `Do you want to clear "${topic.path()}"${childTopicsMessage}?\n\nThis function will send an empty payload (QoS 0, retain) to this and every subtopic, clearing retained topics in the process. Only use this function if you know what you are doing.`
      )
-      if (!confirmed) {
-        return
-      }
-    }
-
-    dispatch(moveSelectionUpOrDownwards('next'))
-
-    const { connectionId } = getState().connection
-    if (!connectionId) {
+    )
+    if (!confirmed) {
      return
    }
-    const publishEvent = makePublishEvent(connectionId)
-
-    topicsForPurging
-      .filter(t => t.path() !== '' && t.hasMessage())
-      .map(t => t.path())
-      .forEach((path, idx) => {
-        const mqttMessage = {
-          topic: path,
-          payload: null,
-          retain: true,
-          qos: 0 as 0,
-          messageId: undefined,
-        }
-        // Rate limit deletion
-        setTimeout(() => rendererEvents.emit(publishEvent, mqttMessage), 20 * idx)
-      })
  }
+
+  dispatch(moveSelectionUpOrDownwards('next'))
+
+  const { connectionId } = getState().connection
+  if (!connectionId) {
+    return
+  }
+  const publishEvent = makePublishEvent(connectionId)
+
+  topicsForPurging
+    .filter(t => t.path() !== '' && t.hasMessage())
+    .map(t => t.path())
+    .forEach((path, idx) => {
+      const mqttMessage = {
+        topic: path,
+        payload: null,
+        retain: true,
+        qos: 0 as 0,
+        messageId: undefined,
+      }
+      // Rate limit deletion
+      setTimeout(() => rendererEvents.emit(publishEvent, mqttMessage), 20 * idx)
+    })
+}
@@ -6,56 +6,53 @@ import { SettingsState } from '../reducers/Settings'
 import { sortedNodes } from '../sortedNodes'
 import { TopicViewModel } from '../model/TopicViewModel'

-export const moveSelectionUpOrDownwards =
-  (direction: 'next' | 'previous') =>
-  (dispatch: Dispatch<any>, getState: () => AppState): any => {
-    const state = getState()
-    const selected = state.tree.get('selectedTopic')
-    const tree = state.tree.get('tree')
+export const moveSelectionUpOrDownwards = (direction: 'next' | 'previous') => (
+  dispatch: Dispatch<any>,
+  getState: () => AppState
+): any => {
+  const state = getState()
+  const selected = state.tree.get('selectedTopic')
+  const tree = state.tree.get('tree')

-    if (!selected || !tree) {
-      if (tree) {
-        dispatch(selectTopic(tree))
-      }
-      return
-    }
-    const nextTreeNode = nextVisibleElementInTree(state.settings, tree, selected, direction)
-    if (nextTreeNode && nextTreeNode.viewModel) {
-      dispatch(selectTopic(nextTreeNode))
+  if (!selected || !tree) {
+    if (tree) {
+      dispatch(selectTopic(tree))
    }
+    return
+  }
+  const nextTreeNode = nextVisibleElementInTree(state.settings, tree, selected, direction)
+  if (nextTreeNode && nextTreeNode.viewModel) {
+    dispatch(selectTopic(nextTreeNode))
+  }
+}
+
+export const moveInward = () => (dispatch: Dispatch<any>, getState: () => AppState): any => {
+  const state = getState()
+  const selected = state.tree.get('selectedTopic')
+  if (!selected || !selected.viewModel) {
+    return
  }

-export const moveInward =
-  () =>
-  (dispatch: Dispatch<any>, getState: () => AppState): any => {
-    const state = getState()
-    const selected = state.tree.get('selectedTopic')
-    if (!selected || !selected.viewModel) {
-      return
-    }
+  if (!selected.viewModel.isExpanded() && selected.edgeCount() > 0) {
+    selected.viewModel.setExpanded(true, true)
+  } else {
+    dispatch(moveSelectionUpOrDownwards('next'))
+  }
+}

-    if (!selected.viewModel.isExpanded() && selected.edgeCount() > 0) {
-      selected.viewModel.setExpanded(true, true)
-    } else {
-      dispatch(moveSelectionUpOrDownwards('next'))
-    }
+export const moveOutward = () => (dispatch: Dispatch<any>, getState: () => AppState): any => {
+  const state = getState()
+  const selected = state.tree.get('selectedTopic')
+  if (!selected || !selected.viewModel) {
+    return
  }

-export const moveOutward =
-  () =>
-  (dispatch: Dispatch<any>, getState: () => AppState): any => {
-    const state = getState()
-    const selected = state.tree.get('selectedTopic')
-    if (!selected || !selected.viewModel) {
-      return
-    }
-
-    if (selected.viewModel.isExpanded() && selected.edgeCount() > 0) {
-      selected.viewModel.setExpanded(false, true)
-    } else {
-      dispatch(moveSelectionUpOrDownwards('previous'))
-    }
+  if (selected.viewModel.isExpanded() && selected.edgeCount() > 0) {
+    selected.viewModel.setExpanded(false, true)
+  } else {
+    dispatch(moveSelectionUpOrDownwards('previous'))
  }
+}

 function isTreeNodeVisible(treeNode: q.TreeNode<any>) {
  return Boolean(treeNode.viewModel)
@@ -12,7 +12,6 @@ import { ConfirmationRequest } from '../reducers/Global'
 import { connect } from 'react-redux'
 import { globalActions, settingsActions } from '../actions'
 import { Theme, withStyles } from '@material-ui/core/styles'
-;(window as any).global = window

 const Settings = React.lazy(() => import('./SettingsDrawer/Settings'))
 const ContentView = React.lazy(() => import('./Layout/ContentView'))
@@ -67,8 +66,6 @@ class App extends React.PureComponent<Props, {}> {
      return null
    }

-    const anyProps: any = {}
-
    return (
      <div className={centerContent}>
        <CssBaseline />
@@ -76,7 +73,7 @@ class App extends React.PureComponent<Props, {}> {
          <ConfirmationDialog confirmationRequests={this.props.confirmationRequests} />
          {this.renderNotification()}
          <React.Suspense fallback={<div></div>}>
-            <Settings {...anyProps} />
+            <Settings />
          </React.Suspense>
          <div className={centerContent}>
            <div className={`${settingsVisible ? contentShift : content}`}>
@@ -114,7 +114,6 @@ function TopicChart(props: Props) {
        </div>
      </div>
      <TopicPlot
-        node={props.treeNode ? props.treeNode : undefined}
        color={props.parameters.color}
        interpolation={props.parameters.interpolation}
        timeInterval={props.parameters.timeRange ? props.parameters.timeRange.until : undefined}
@@ -1,5 +1,7 @@
 import * as React from 'react'
+import Add from '@material-ui/icons/Add'
 import ClearAdornment from '../helper/ClearAdornment'
+import Delete from '@material-ui/icons/Delete'
 import Lock from '@material-ui/icons/Lock'
 import { bindActionCreators } from 'redux'
 import { Button, Theme, Tooltip, Typography } from '@material-ui/core'
@@ -1,40 +1,26 @@
-import React, { useCallback } from 'react'
+import React from 'react'
 import { connect } from 'react-redux'
 import { ListItem, Typography } from '@material-ui/core'
 import { toMqttConnection, ConnectionOptions } from '../../../model/ConnectionOptions'
 import { withStyles, Theme } from '@material-ui/core/styles'
 import { bindActionCreators } from 'redux'
-import { connectionActions, connectionManagerActions } from '../../../actions'
+import { connectionManagerActions } from '../../../actions'

 export interface Props {
  connection: ConnectionOptions
-  actions: {
-    connection: any
-    connectionManager: any
-  }
+  actions: any
  selected: boolean
  classes: any
 }

 const ConnectionItem = (props: Props) => {
-  const connect = useCallback(() => {
-    const mqttOptions = toMqttConnection(props.connection)
-    if (mqttOptions) {
-      props.actions.connection.connect(mqttOptions, props.connection.id)
-    }
-  }, [props.connection, props])
-
  const connection = props.connection.host && toMqttConnection(props.connection)
  return (
    <ListItem
      button={true}
      selected={props.selected}
      style={{ display: 'block' }}
-      onClick={() => props.actions.connectionManager.selectConnection(props.connection.id)}
-      onDoubleClick={() => {
-        props.actions.connectionManager.selectConnection(props.connection.id)
-        connect()
-      }}
+      onClick={() => props.actions.selectConnection(props.connection.id)}
    >
      <Typography className={props.classes.name}>{props.connection.name || 'mqtt broker'}</Typography>
      <Typography className={props.classes.details}>{connection && connection.url}</Typography>
@@ -44,12 +30,10 @@ const ConnectionItem = (props: Props) => {

 export const mapDispatchToProps = (dispatch: any) => {
  return {
-    actions: {
-      connection: bindActionCreators(connectionActions, dispatch),
-      connectionManager: bindActionCreators(connectionManagerActions, dispatch),
-    },
+    actions: bindActionCreators(connectionManagerActions, dispatch),
  }
 }
+
 export const connectionItemStyle = (theme: Theme) => ({
  name: {
    width: '100%',
@@ -7,7 +7,7 @@ import { connect } from 'react-redux'
 import { connectionManagerActions } from '../../../actions'
 import { ConnectionOptions } from '../../../model/ConnectionOptions'
 import { KeyCodes } from '../../../utils/KeyCodes'
-import { List } from '@material-ui/core'
+import { List, ListSubheader } from '@material-ui/core'
 import { Theme, withStyles } from '@material-ui/core/styles'
 import { useGlobalKeyEventHandler } from '../../../effects/useGlobalKeyEventHandler'

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Theme, withStyles } from '@material-ui/core'
-const cursor = require('./cursor.png')
+import cursor from './cursor.png'

 interface State {
  enabled: boolean
@@ -5,7 +5,7 @@ let heapdump: any

 function writeHeapdump(path?: string) {
  if (!heapdump) {
-    //<heapdump = require('heapdump')
+    heapdump = require('heapdump')
  }

  heapdump.writeSnapshot(path || `${Date.now()}.heapsnapshot`)
@@ -2,6 +2,7 @@ import * as React from 'react'
 import PersistentStorage from '../utils/PersistentStorage'
 import SentimentDissatisfied from '@material-ui/icons/SentimentDissatisfied'
 import Warning from '@material-ui/icons/Warning'
+import { electronRendererTelemetry } from 'electron-telemetry'
 import { Theme, withStyles } from '@material-ui/core/styles'
 import { Button, Modal, Paper, Toolbar, Typography } from '@material-ui/core'

@@ -32,7 +33,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
  }

  public componentDidCatch(error: Error, errorInfo: any) {
-    // electronRendererTelemetry.trackError(error)
+    electronRendererTelemetry.trackError(error)
    console.log('did catch', error)
  }

@@ -123,7 +123,7 @@ function renderStat(tree: q.Tree<TopicViewModel>, stat: Stats) {
    return null
  }

-  const str = node.message.payload ? node.message.payload.toUnicodeString() : ''
+  const str = node.message.payload ? Base64Message.toUnicodeString(node.message.payload) : ''
  let value = node.message && node.message.payload ? parseFloat(str) : NaN
  value = !isNaN(value) ? abbreviate(value) : str

@@ -3,17 +3,10 @@ import DateFormatter from '../helper/DateFormatter'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { Input, InputLabel, MenuItem, Select, Theme } from '@material-ui/core'
+import { Input, InputLabel, MenuItem, Select, StyleRulesCallback, Theme } from '@material-ui/core'
 import { settingsActions } from '../../actions'
 import { withStyles } from '@material-ui/styles'
-
-function importAll(r: any) {
-  r.keys().forEach(r)
-}
-// @ts-expect-error -- webpack require
-importAll(require.context('moment/locale', true, /\.js$/))
-
-const moment = require('moment')
+const moment = require('moment/min/moment-with-locales')

 interface Props {
  actions: {
@@ -52,16 +52,16 @@ function ChartPreview(props: Props) {
      />
    </Tooltip>
  ) : (
-      <Tooltip title="Add to chart panel, not enough data for preview">
-        <ShowChart
-          onClick={onClick}
-          className={props.classes.icon}
-          style={{ color: '#aaa' }}
-          data-test-type="ShowChart"
-          data-test={props.literal.path}
-        />
-      </Tooltip>
-    )
+    <Tooltip title="Add to chart panel, not enough data for preview">
+      <ShowChart
+        onClick={onClick}
+        className={props.classes.icon}
+        style={{ color: '#aaa' }}
+        data-test-type="ShowChart"
+        data-test={props.literal.path}
+      />
+    </Tooltip>
+  )

  return (
    <span>
@@ -69,7 +69,7 @@ function ChartPreview(props: Props) {
      <Popper open={open} anchorEl={chartIconRef.current} placement="left-end">
        <Fade in={open} timeout={300}>
          <Paper style={{ width: '300px' }}>
-            {open ? <TopicPlot node={props.treeNode} history={props.treeNode.messageHistory} dotPath={props.literal.path} /> : <span />}
+            {open ? <TopicPlot history={props.treeNode.messageHistory} dotPath={props.literal.path} /> : <span />}
          </Paper>
        </Fade>
      </Popper>
@@ -43,9 +43,9 @@ class CodeDiff extends React.PureComponent<Props, State> {
  private plottableLiteralsIndexedWithLineNumbers() {
    const allLiterals = this.isValidJson(this.props.current) ? literalsMappedByLines(this.props.current) || [] : []

-    return allLiterals.map((l: JsonPropertyLocation) =>
-      isPlottable(l.value) ? l : undefined
-    ) as Array<JsonPropertyLocation>
+    return allLiterals.map((l: JsonPropertyLocation) => (isPlottable(l.value) ? l : undefined)) as Array<
+      JsonPropertyLocation
+    >
  }

  private renderStyledCodeLines(changes: Array<Diff.Change>) {
@@ -30,5 +30,4 @@ const Panel = (props: {
  )
 }

-// @ts-ignore
 export default withStyles(styles)(Panel)
@@ -1,5 +1,5 @@
 import Editor from './Editor'
-import { AttachFileOutlined, FormatAlignLeft } from '@material-ui/icons'
+import FormatAlignLeft from '@material-ui/icons/FormatAlignLeft'
 import Message from './Model/Message'
 import Navigation from '@material-ui/icons/Navigation'
 import PublishHistory from './PublishHistory'
@@ -116,17 +116,13 @@ const EditorMode = memo(function EditorMode(props: {
    props.actions.setEditorMode(value)
  }, [])

-  const openFile = useCallback(() => {
-    props.actions.openFile()
-  }, [])
-
  const formatJson = useCallback(() => {
    if (props.payload) {
      try {
        const str = JSON.stringify(JSON.parse(props.payload), undefined, '  ')
        updatePayload(str)
      } catch (error) {
-        props.globalActions.showError(`Format error: ${(error as Error)?.message}`)
+        props.globalActions.showError(`Format error: ${error.message}`)
      }
    }
  }, [props.payload])
@@ -136,7 +132,6 @@ const EditorMode = memo(function EditorMode(props: {
      <div style={{ width: '100%', lineHeight: '64px', textAlign: 'center' }}>
        <EditorModeSelect value={props.editorMode} onChange={updateMode} focusEditor={props.focusEditor} />
        <FormatJsonButton editorMode={props.editorMode} focusEditor={props.focusEditor} formatJson={formatJson} />
-        <OpenFileButton editorMode={props.editorMode} openFile={openFile} />
        <div style={{ float: 'right' }}>
          <PublishButton publish={props.publish} focusEditor={props.focusEditor} />
        </div>
@@ -168,20 +163,6 @@ const FormatJsonButton = React.memo(function FormatJsonButton(props: {
  )
 })

-const OpenFileButton = React.memo(function OpenFileButton(props: { editorMode: string; openFile: () => void }) {
-  return (
-    <Tooltip title="Open file">
-      <Fab
-        style={{ width: '36px', height: '36px', margin: '0 8px' }}
-        onClick={props.openFile}
-        id="sidebar-publish-open-file"
-      >
-        <AttachFileOutlined style={{ fontSize: '20px' }} />
-      </Fab>
-    </Tooltip>
-  )
-})
-
 const PublishButton = memo(function PublishButton(props: { publish: () => void; focusEditor: () => void }) {
  const handleClickPublish = useCallback(
    (e: React.MouseEvent) => {
@@ -1,9 +1,10 @@
 import * as q from '../../../../backend/src/Model'
 import React, { useState, useEffect, useCallback } from 'react'
+import ExpandMore from '@material-ui/icons/ExpandMore'
 import NodeStats from './NodeStats'
 import ValuePanel from './ValueRenderer/ValuePanel'
 import { AppState } from '../../reducers'
-import { ExpansionPanelDetails } from '@material-ui/core'
+import { Badge, ExpansionPanel, ExpansionPanelDetails, ExpansionPanelSummary, Typography } from '@material-ui/core'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { settingsActions, sidebarActions } from '../../actions'
@@ -27,7 +28,7 @@ interface Props {
 }

 function useUpdateNodeWhenNodeReceivesUpdates(node?: q.TreeNode<any>) {
-  const [, setLastUpdate] = useState(0)
+  const [lastUpdate, setLastUpdate] = useState(0)
  const updateNode = useCallback(
    throttle(() => {
      setLastUpdate(node ? node.lastUpdate : 0)
@@ -51,6 +52,7 @@ function Sidebar(props: Props) {
  const { classes, tree, nodePath } = props
  const node = usePollingToFetchTreeNode(tree, nodePath || '')
  useUpdateNodeWhenNodeReceivesUpdates(node)
+  // console.log(node && node.path(), tree, nodePath)

  return (
    <div id="Sidebar" className={classes.drawer}>
@@ -6,19 +6,19 @@ import Topic from './Topic'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { RecursiveTopicDeleteButton } from './RecursiveTopicDeleteButton'
-import { TopicDeleteButton } from './TopicDeleteButton'
-import { TopicTypeButton } from './TopicTypeButton'
 import { sidebarActions } from '../../../actions'
+import { TopicDeleteButton } from './TopicDeleteButton'

 const TopicPanel = (props: { node?: q.TreeNode<any>; actions: typeof sidebarActions }) => {
  const { node } = props
-
+  console.log(node && node.path())
  const copyTopic = node ? <Copy value={node.path()} /> : null

  const deleteTopic = useCallback((topic?: q.TreeNode<any>, recursive: boolean = false) => {
    if (!topic) {
      return
    }
+
    props.actions.clearTopic(topic, recursive)
  }, [])

@@ -29,12 +29,11 @@ const TopicPanel = (props: { node?: q.TreeNode<any>; actions: typeof sidebarActi
          Topic {copyTopic}
          <TopicDeleteButton node={node} deleteTopicAction={deleteTopic} />
          <RecursiveTopicDeleteButton node={node} deleteTopicAction={deleteTopic} />
-          <TopicTypeButton node={node} />
        </span>
        <Topic node={node} />
      </Panel>
    ),
-    [node, node?.childTopicCount()]
+    [node, node && node.childTopicCount()]
  )
 }

@@ -1,103 +0,0 @@
-import React, { useCallback, useMemo } from 'react'
-import * as q from '../../../../../backend/src/Model'
-import ClickAwayListener from '@material-ui/core/ClickAwayListener'
-import Grow from '@material-ui/core/Grow'
-import Button from '@material-ui/core/Button'
-import Paper from '@material-ui/core/Paper'
-import Popper from '@material-ui/core/Popper'
-import MenuItem from '@material-ui/core/MenuItem'
-import MenuList from '@material-ui/core/MenuList'
-import WarningRounded from '@material-ui/icons/WarningRounded'
-import { MessageDecoder, decoders } from '../../../decoders'
-import { Tooltip } from '@material-ui/core'
-
-export const TopicTypeButton = (props: { node?: q.TreeNode<any> }) => {
-  const { node } = props
-  if (!node || !node.message || !node.message.payload) {
-    return null
-  }
-
-  const options = decoders.flatMap(decoder => decoder.formats.map(format => [decoder, format] as const))
-
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
-  const [open, setOpen] = React.useState(false)
-
-  const selectOption = useCallback(
-    (decoder: MessageDecoder, format: string) => {
-      if (!node) {
-        return
-      }
-
-      node.viewModel.decoder = { decoder, format }
-      setOpen(false)
-    },
-    [node]
-  )
-
-  const handleToggle = useCallback(
-    (event: React.MouseEvent<HTMLElement>) => {
-      event.stopPropagation()
-      if (open === true) {
-        return
-      }
-      setAnchorEl(event.currentTarget)
-      setOpen(prevOpen => !prevOpen)
-    },
-    [open]
-  )
-
-  const handleClose = useCallback((event: React.MouseEvent<Document, MouseEvent>) => {
-    if (anchorEl && anchorEl.contains(event.target as HTMLElement)) {
-      return
-    }
-    setOpen(false)
-  }, [])
-
-  return (
-    <Button onClick={handleToggle}>
-      {props.node?.viewModel.decoder?.format ?? props.node?.type}
-      <Popper open={open} anchorEl={anchorEl} role={undefined} transition>
-        {({ TransitionProps, placement }) => (
-          <Grow
-            {...TransitionProps}
-            style={{
-              transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom',
-            }}
-          >
-            <Paper>
-              <ClickAwayListener onClickAway={handleClose}>
-                <MenuList id="topicTypeMode">
-                  {options.map(([decoder, format], index) => (
-                    <MenuItem
-                      key={format}
-                      selected={node && format === node.type}
-                      onClick={() => selectOption(decoder, format)}
-                    >
-                      <DecoderStatus decoder={decoder} format={format} node={node} />
-                    </MenuItem>
-                  ))}
-                </MenuList>
-              </ClickAwayListener>
-            </Paper>
-          </Grow>
-        )}
-      </Popper>
-    </Button>
-  )
-}
-
-function DecoderStatus({ node, decoder, format }: { node: q.TreeNode<any>; decoder: MessageDecoder; format: string }) {
-  const decoded = useMemo(() => {
-    return node.message?.payload && decoder.decode(node.message?.payload, format)
-  }, [node.message, decoder, format])
-
-  return decoded?.error ? (
-    <Tooltip title={decoded.error}>
-      <div>
-        {format} <WarningRounded />
-      </div>
-    </Tooltip>
-  ) : (
-    <>{format}</>
-  )
-}
@@ -40,7 +40,7 @@ function ActionButtons(props: {
        </Tooltip>
      </ToggleButton>
      <ToggleButton className={props.classes.toggleButton} value="raw" id="valueRendererDisplayMode-raw">
-        <Tooltip title="Raw / formatted JSON / formatted sparkplugb protojson">
+        <Tooltip title="Raw / formatted JSON">
          <span>
            <Reorder className={props.classes.toggleButtonIcon} />
          </span>
@@ -5,6 +5,7 @@ import Copy from '../../helper/Copy'
 import DateFormatter from '../../helper/DateFormatter'
 import History from '../HistoryDrawer'
 import TopicPlot from '../../TopicPlot'
+import { Base64Message } from '../../../../../backend/src/Model/Base64Message'
 import { isPlottable } from '../CodeDiff/util'
 import { TopicViewModel } from '../../../model/TopicViewModel'
 import { bindActionCreators } from 'redux'
@@ -12,8 +13,6 @@ import { chartActions } from '../../../actions'
 import { connect } from 'react-redux'
 import CustomIconButton from '../../helper/CustomIconButton'
 import { MessageId } from '../MessageId'
-import { useSubscription } from '../../hooks/useSubscription'
-import { useDecoder } from '../../hooks/useDecoder'

 const throttle = require('lodash.throttle')

@@ -26,100 +25,117 @@ interface Props {
  }
 }

-export const MessageHistory: React.FC<Props> = props => {
-  const [, setLastUpdate] = React.useState(Date.now())
-  const updateNodeThrottled = React.useCallback(
-    throttle(() => {
-      setLastUpdate
-    }, 300),
-    []
-  )
+interface State {
+  displayMessage?: q.Message
+  anchorEl?: HTMLElement
+  lastUpdate: number
+}

-  useSubscription(props.node?.onMessage, updateNodeThrottled)
-  const decodeMessage = useDecoder(props.node)
+class MessageHistory extends React.PureComponent<Props, State> {
+  private updateNode = throttle(() => {
+    this.setState({ lastUpdate: Date.now() })
+  }, 300)

-  function addNodeToCharts(event: React.MouseEvent) {
+  constructor(props: any) {
+    super(props)
+    this.state = { lastUpdate: 0 }
+  }
+
+  private addNodeToCharts = (event: React.MouseEvent) => {
    event.preventDefault()
    event.stopPropagation()

-    const { node } = props
+    const { node } = this.props
    if (!node) {
      return null
    }

-    props.actions.charts.addChart({ topic: node.path() })
+    this.props.actions.charts.addChart({ topic: node.path() })
  }

-  function displayMessage(index: number, eventTarget: EventTarget) {
-    const message = props.node && props.node.messageHistory.toArray().reverse()[index]
+  private displayMessage = (index: number, eventTarget: EventTarget) => {
+    const message = this.props.node && this.props.node.messageHistory.toArray().reverse()[index]
    if (message) {
-      props.onSelect(message)
+      this.props.onSelect(message)
    }
  }

-  const { node } = props
-  if (!node) {
-    return null
+  public componentWillReceiveProps(nextProps: Props) {
+    this.props.node && this.props.node.onMessage.unsubscribe(this.updateNode)
+    nextProps.node && nextProps.node.onMessage.subscribe(this.updateNode)
  }

-  const history = node.messageHistory.toArray()
-  let previousMessage: q.Message | undefined = node.message
-  const historyElements = [...history].reverse().map((message, idx) => {
-    const value = node.message ? decodeMessage(message)?.message?.format()[0] ?? null : null
+  public componentDidMount() {
+    this.props.node && this.props.node.onMessage.subscribe(this.updateNode)
+  }

-    const element = {
-      value: value ?? '',
-      key: `${message.messageNumber}-${message.received}`,
-      title: (
-        <span>
-          <div style={{ float: 'left' }}>
-            <DateFormatter date={message.received} />
-            {previousMessage && previousMessage !== message ? (
-              <i>
-                (-
-                <DateFormatter date={message.received} intervalSince={previousMessage.received} />)
-              </i>
-            ) : null}
-          </div>
+  public componentWillUnMount() {
+    this.props.node && this.props.node.onMessage.unsubscribe(this.updateNode)
+  }
+
+  public render() {
+    const { node } = this.props
+    if (!node) {
+      return null
+    }
+
+    const history = node.messageHistory.toArray()
+    let previousMessage: q.Message | undefined = node.message
+    const historyElements = [...history].reverse().map((message, idx) => {
+      const value = message.payload ? Base64Message.toUnicodeString(message.payload) : ''
+      const element = {
+        value,
+        key: `${message.messageNumber}-${message.received}`,
+        title: (
          <span>
-            &nbsp;
-            <MessageId message={message} />
+            <div style={{ float: 'left' }}>
+              <DateFormatter date={message.received} />
+              {previousMessage && previousMessage !== message ? (
+                <i>
+                  (-
+                  <DateFormatter date={message.received} intervalSince={previousMessage.received} />)
+                </i>
+              ) : null}
+            </div>
+            <span>
+              &nbsp;
+              <MessageId message={message} />
+            </span>
+            <div style={{ float: 'right' }}>
+              <Copy value={value} />
+            </div>
          </span>
-          <div style={{ float: 'right' }}>
-            <Copy value={value ?? ''} />
-          </div>
-        </span>
-      ),
-      selected: message && message === props.selected,
-    }
-    previousMessage = message
-    return element
-  })
+        ),
+        selected: message && message === this.props.selected,
+      }
+      previousMessage = message
+      return element
+    })

-  const value = node.message ? decodeMessage(node.message)?.message?.format()[0] ?? null : null
-
-  const isMessagePlottable = isPlottable(value)
-  return (
-    <div>
-      <History
-        items={historyElements}
-        contentTypeIndicator={
-          isMessagePlottable ? (
-            <CustomIconButton
-              style={{ height: '22px', width: '22px' }}
-              onClick={addNodeToCharts}
-              tooltip="Add to chart panel"
-            >
-              <ShowChart style={{ marginTop: '-5px' }} />
-            </CustomIconButton>
-          ) : undefined
-        }
-        onClick={displayMessage}
-      >
-        {isMessagePlottable ? <TopicPlot node={node} history={node.messageHistory} /> : null}
-      </History>
-    </div>
-  )
+    const isMessagePlottable =
+      node.message && node.message.payload && isPlottable(Base64Message.toUnicodeString(node.message.payload))
+    return (
+      <div>
+        <History
+          items={historyElements}
+          contentTypeIndicator={
+            isMessagePlottable ? (
+              <CustomIconButton
+                style={{ height: '22px', width: '22px' }}
+                onClick={this.addNodeToCharts}
+                tooltip="Add to chart panel"
+              >
+                <ShowChart style={{ marginTop: '-5px' }} />
+              </CustomIconButton>
+            ) : undefined
+          }
+          onClick={this.displayMessage}
+        >
+          {isMessagePlottable ? <TopicPlot history={node.messageHistory} /> : null}
+        </History>
+      </div>
+    )
+  }
 }

 const mapDispatchToProps = (dispatch: any) => {
@@ -128,4 +144,4 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-export default connect(null, mapDispatchToProps)(React.memo(MessageHistory))
+export default connect(null, mapDispatchToProps)(MessageHistory)
@@ -1,20 +1,19 @@
 import * as q from '../../../../../backend/src/Model'
 import ActionButtons from './ActionButtons'
 import Copy from '../../helper/Copy'
-import Save from '../../helper/Save'
 import DateFormatter from '../../helper/DateFormatter'
 import MessageHistory from './MessageHistory'
 import Panel from '../Panel'
 import React, { useCallback } from 'react'
 import ValueRenderer from './ValueRenderer'
 import { AppState } from '../../../reducers'
+import { Base64Message } from '../../../../../backend/src/Model/Base64Message'
 import { bindActionCreators } from 'redux'
 import { Theme, Typography, withStyles } from '@material-ui/core'
 import { connect } from 'react-redux'
 import { sidebarActions } from '../../../actions'
 import DeleteSelectedTopicButton from './DeleteSelectedTopicButton'
 import { MessageId } from '../MessageId'
-import { useDecoder } from '../../hooks/useDecoder'

 interface Props {
  node?: q.TreeNode<any>
@@ -36,7 +35,6 @@ function RenderedValue(props: { node?: q.TreeNode<any>; compareMessage?: q.Messa

 function ValuePanel(props: Props) {
  const { node, compareMessage } = props
-  const decodeMessage = useDecoder(node)

  function renderViewOptions() {
    if (!props.node || !props.node.message) {
@@ -56,16 +54,6 @@ function ValuePanel(props: Props) {
    )
  }

-  const getDecodedValue = useCallback(() => {
-    return node?.message && decodeMessage(node.message)?.message?.toUnicodeString()
-  }, [node, decodeMessage])
-
-  const getData = () => {
-    if (node?.message && node.message.payload) {
-      return node.message.payload.base64Message
-    }
-  }
-
  function messageMetaInfo() {
    if (!props.node || !props.node.message) {
      return null
@@ -97,16 +85,14 @@ function ValuePanel(props: Props) {
    [compareMessage]
  )

-  const [value] =
-    node && node.message && node.message.payload ? node.message.payload?.format(node.type) : [null, undefined]
-  const copyValue = value ? <Copy getValue={getDecodedValue} /> : null
-  const saveValue = value ? <Save getData={getData} /> : null
+  const copyValue =
+    node && node.message && node.message.payload ? (
+      <Copy value={Base64Message.toUnicodeString(node.message.payload)} />
+    ) : null

  return (
    <Panel>
-      <span>
-        Value {copyValue} {saveValue}
-      </span>
+      <span>Value {copyValue}</span>
      <span style={{ width: '100%' }}>
        {renderViewOptions()}
        <div style={{ marginBottom: '-8px', marginTop: '8px' }}>
@@ -142,5 +128,4 @@ const styles = (theme: Theme) => ({
  },
 })

-// @ts-ignore
 export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ValuePanel))
@@ -1,13 +1,12 @@
 import * as q from '../../../../../backend/src/Model'
-import React, { useMemo } from 'react'
+import * as React from 'react'
 import CodeDiff from '../CodeDiff'
 import { AppState } from '../../../reducers'
+import { Base64Message } from '../../../../../backend/src/Model/Base64Message'
 import { connect } from 'react-redux'
+import { default as ReactResizeDetector } from 'react-resize-detector'
 import { ValueRendererDisplayMode } from '../../../reducers/Settings'
-import { Fade } from '@material-ui/core'
-import { Decoder } from '../../../../../backend/src/Model/Decoder'
-import { useDecoder } from '../../hooks/useDecoder'
-import { TopicViewModel } from '../../../model/TopicViewModel'
+import { Typography, Fade, Grow } from '@material-ui/core'

 interface Props {
  message: q.Message
@@ -16,114 +15,98 @@ interface Props {
  renderMode: ValueRendererDisplayMode
 }

-type Language = 'json'
-
-function renderDiff(
-  treeNode: q.TreeNode<TopicViewModel>,
-  compareWithPreviousMessage: boolean,
-  current: string = '',
-  previous: string = '',
-  title?: string,
-  language?: Language
-) {
-  return (
-    <CodeDiff
-      treeNode={treeNode}
-      previous={previous}
-      current={current}
-      title={title}
-      language={language}
-      nameOfCompareMessage={compareWithPreviousMessage ? 'selected' : 'previous'}
-    />
-  )
+interface State {
+  width: number
 }

-function renderDiffMode(
-  treeNode: q.TreeNode<TopicViewModel>,
-  currentStr: string | undefined,
-  compareStr: string | undefined,
-  currentType: Language | undefined,
-  compareType: Language | undefined,
-  compareWithPreviousMessage: boolean
-) {
-  const language = currentType === compareType && compareType === 'json' ? 'json' : undefined
+class ValueRenderer extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { width: 0 }
+  }

-  return <div>{renderDiff(treeNode, compareWithPreviousMessage, currentStr, compareStr, undefined, language)}</div>
-}
+  private renderDiff(current: string = '', previous: string = '', title?: string, language?: 'json') {
+    return (
+      <CodeDiff
+        treeNode={this.props.treeNode}
+        previous={previous}
+        current={current}
+        title={title}
+        language={language}
+        nameOfCompareMessage={this.props.compareWith ? 'selected' : 'previous'}
+      />
+    )
+  }

-function renderRawMode(
-  treeNode: q.TreeNode<TopicViewModel>,
-  currentStr: string | undefined,
-  compareStr: string | undefined,
-  currentType: Language | undefined,
-  compareType: Language | undefined,
-  compareWithPreviousMessage: boolean
-) {
-  return (
-    <div>
-      {renderDiff(treeNode, compareWithPreviousMessage, currentStr, currentStr, undefined, currentType)}
-      <Fade in={Boolean(compareStr)} timeout={400}>
-        <div>
-          {Boolean(compareStr)
-            ? renderDiff(treeNode, compareWithPreviousMessage, compareStr, compareStr, 'selected', compareType)
-            : null}
-        </div>
-      </Fade>
-    </div>
-  )
-}
-
-export const ValueRenderer: React.FC<Props> = ({ treeNode, compareWith: compare, message, renderMode }) => {
-  const decodeMessage = useDecoder(treeNode)
-  const decodedMessage = useMemo(() => decodeMessage(message), [decodeMessage, message])
-
-  const previousMessages = treeNode.messageHistory.toArray()
-  const previousMessage = previousMessages[previousMessages.length - 2]
-  const compareMessage = compare || previousMessage || message
-  const compareWithPreviousMessage = !!compare
-
-  const [currentStr, currentType] = useMemo(
-    () => decodedMessage?.message?.format(treeNode.type) ?? [],
-    [decodedMessage, treeNode.type]
-  )
-  const [compareStr, compareType] = useMemo(
-    () => decodeMessage(compareMessage)?.message?.format(treeNode.type) ?? [],
-    [compareMessage, decodeMessage, treeNode.type]
-  )
-
-  function renderValue(
-    treeNode: q.TreeNode<TopicViewModel>,
-    currentStr: string | undefined,
-    compareStr: string | undefined,
-    currentType: Language | undefined,
-    compareType: Language | undefined,
-    renderMode: string,
-    compareWithPreviousMessage: boolean
-  ) {
-    if (!decodedMessage) {
-      return null
+  private convertMessage(msg?: Base64Message): [string | undefined, 'json' | undefined] {
+    if (!msg) {
+      return [undefined, undefined]
    }

-    switch (renderMode) {
-      case 'diff':
-        return renderDiffMode(treeNode, currentStr, compareStr, currentType, compareType, compareWithPreviousMessage)
-      default:
-        return renderRawMode(treeNode, currentStr, compareStr, currentType, compareType, compareWithPreviousMessage)
+    const str = Base64Message.toUnicodeString(msg)
+    try {
+      JSON.parse(str)
+    } catch (error) {
+      return [str, undefined]
+    }
+
+    return [this.messageToPrettyJson(str), 'json']
+  }
+
+  private messageToPrettyJson(str: string): string | undefined {
+    try {
+      const json = JSON.parse(str)
+      return JSON.stringify(json, undefined, '  ')
+    } catch {
+      return undefined
    }
  }

-  const renderedValue = useMemo(
-    () =>
-      renderValue(treeNode, currentStr, compareStr, currentType, compareType, renderMode, compareWithPreviousMessage),
-    [treeNode, currentStr, compareStr, currentType, compareType, renderMode, compareWithPreviousMessage]
-  )
+  private renderRawMode(message: q.Message, compare?: q.Message) {
+    if (!message.payload) {
+      return
+    }
+    const [value, valueLanguage] = this.convertMessage(message.payload)
+    const [compareStr, compareStrLanguage] =
+      compare && compare.payload ? this.convertMessage(compare.payload) : [undefined, undefined]

-  return (
-    <div style={{ padding: '0px 0px 8px 0px', width: '100%' }}>
-      {decodedMessage?.decoder === Decoder.SPARKPLUG && 'Decoded SparkplugB'}
-      {renderedValue}
-    </div>
-  )
+    return (
+      <div>
+        {this.renderDiff(value, value, undefined, valueLanguage)}
+        <Fade in={Boolean(compareStr)} timeout={400}>
+          <div>
+            {Boolean(compareStr) ? this.renderDiff(compareStr, compareStr, 'selected', compareStrLanguage) : null}
+          </div>
+        </Fade>
+      </div>
+    )
+  }
+
+  public render() {
+    return <div style={{ padding: '0px 0px 8px 0px', width: '100%' }}>{this.renderValue()}</div>
+  }
+
+  public renderValue() {
+    const { message, treeNode, compareWith, renderMode } = this.props
+    const previousMessages = treeNode.messageHistory.toArray()
+    const previousMessage = previousMessages[previousMessages.length - 2]
+    const compareMessage = compareWith || previousMessage || message
+
+    if (renderMode === 'raw') {
+      return this.renderRawMode(message, compareWith)
+    }
+    if (!message.payload) {
+      return null
+    }
+
+    const compareValue = compareMessage.payload || message.payload
+    const [current, currentLanguage] = this.convertMessage(message.payload)
+    const [compare, compareLanguage] = this.convertMessage(compareValue)
+
+    const language = currentLanguage === compareLanguage && compareLanguage === 'json' ? 'json' : undefined
+
+    return this.renderDiff(current, compare, undefined, language)
+  }
 }

 const mapStateToProps = (state: AppState) => {
@@ -2,14 +2,12 @@ import * as dotProp from 'dot-prop'
 import * as q from '../../../backend/src/Model'
 import * as React from 'react'
 import PlotHistory from './Chart/Chart'
+import { Base64Message } from '../../../backend/src/Model/Base64Message'
 import { toPlottableValue } from './Sidebar/CodeDiff/util'
 import { PlotCurveTypes } from '../reducers/Charts'
-import { DecoderFunction, useDecoder } from './hooks/useDecoder'
-
 const parseDuration = require('parse-duration')

 interface Props {
-  node?: q.TreeNode<any>
  history: q.MessageHistory
  dotPath?: string
  timeInterval?: string
@@ -27,27 +25,21 @@ function filterUsingTimeRange(startTime: number | undefined, data: Array<q.Messa
  return data
 }

-function nodeToHistory(decodeMessage: DecoderFunction, startTime: number | undefined, history: q.MessageHistory) {
+function nodeToHistory(startTime: number | undefined, history: q.MessageHistory) {
  return filterUsingTimeRange(startTime, history.toArray())
    .map((message: q.Message) => {
-      const decoded = decodeMessage(message)?.message?.toUnicodeString()
-      return { x: message.received.getTime(), y: toPlottableValue(decoded) }
+      const value = message.payload ? toPlottableValue(Base64Message.toUnicodeString(message.payload)) : NaN
+      return { x: message.received.getTime(), y: toPlottableValue(value) }
    })
    .filter(data => !isNaN(data.y as any)) as any
 }

-function nodeDotPathToHistory(
-  decodeMessage: DecoderFunction,
-  startTime: number | undefined,
-  history: q.MessageHistory,
-  dotPath: string
-) {
+function nodeDotPathToHistory(startTime: number | undefined, history: q.MessageHistory, dotPath: string) {
  return filterUsingTimeRange(startTime, history.toArray())
    .map((message: q.Message) => {
-      let json: any = {}
+      let json = {}
      try {
-        const decoded = decodeMessage(message)?.message
-        json = decoded ? JSON.parse(decoded.toUnicodeString()) : {}
+        json = message.payload ? JSON.parse(Base64Message.toUnicodeString(message.payload)) : {}
      } catch (ignore) {}

      const value = dotProp.get(json, dotPath)
@@ -58,17 +50,14 @@ function nodeDotPathToHistory(
 }

 function TopicPlot(props: Props) {
-  const decodeMessage = useDecoder(props.node)
  const startOffset = props.timeInterval ? parseDuration(props.timeInterval) : undefined
-  const data = React.useMemo(() => {
-    if (!props.node) {
-      return []
-    }
-
-    return props.dotPath
-      ? nodeDotPathToHistory(decodeMessage, startOffset, props.history, props.dotPath)
-      : nodeToHistory(decodeMessage, startOffset, props.history)
-  }, [props.history.last(), startOffset, props.dotPath])
+  const data = React.useMemo(
+    () =>
+      props.dotPath
+        ? nodeDotPathToHistory(startOffset, props.history, props.dotPath)
+        : nodeToHistory(startOffset, props.history),
+    [props.history.last(), startOffset, props.dotPath]
+  )

  return (
    <PlotHistory
@@ -1,8 +1,8 @@
 import * as q from '../../../../../backend/src/Model'
 import React, { memo } from 'react'
+import { Base64Message } from '../../../../../backend/src/Model/Base64Message'
 import { Theme, withStyles } from '@material-ui/core'
 import { TopicViewModel } from '../../../model/TopicViewModel'
-import { useDecoder } from '../../hooks/useDecoder'

 export interface TreeNodeProps extends React.HTMLAttributes<HTMLElement> {
  treeNode: q.TreeNode<TopicViewModel>
@@ -14,72 +14,67 @@ export interface TreeNodeProps extends React.HTMLAttributes<HTMLElement> {
  classes: any
 }

-export const TreeNodeTitle = (props: TreeNodeProps) => {
-  const decodeMessage = useDecoder(props.treeNode)
-
-  function renderSourceEdge() {
-    const name = props.name || (props.treeNode.sourceEdge && props.treeNode.sourceEdge.name)
+class TreeNodeTitle extends React.PureComponent<TreeNodeProps, {}> {
+  private renderSourceEdge() {
+    const name = this.props.name || (this.props.treeNode.sourceEdge && this.props.treeNode.sourceEdge.name)

    return (
-      <span key="edge" className={props.classes.sourceEdge} data-test-topic={name}>
+      <span key="edge" className={this.props.classes.sourceEdge}>
        {name}
      </span>
    )
  }

-  function truncatedMessage() {
+  private truncatedMessage() {
    const limit = 400
-    if (!props.treeNode.message || !props.treeNode.message.payload) {
+    if (!this.props.treeNode.message || !this.props.treeNode.message.payload) {
      return ''
    }
-    const [value = ''] = decodeMessage(props.treeNode.message)?.message?.format(props.treeNode.type) ?? []

-    return value.length > limit ? `${value.slice(0, limit)}…` : value
+    const str = Base64Message.toUnicodeString(this.props.treeNode.message.payload)
+    return str.length > limit ? `${str.slice(0, limit)}…` : str
  }

-  function renderValue() {
-    return props.treeNode.message && props.treeNode.message.payload && props.treeNode.message.length > 0 ? (
-      <span key="value" className={props.classes.value}>
+  private renderValue() {
+    return this.props.treeNode.message &&
+      this.props.treeNode.message.payload &&
+      this.props.treeNode.message.length > 0 ? (
+      <span key="value" className={this.props.classes.value}>
        {' '}
-        = {truncatedMessage()}
+        = {this.truncatedMessage()}
      </span>
    ) : null
  }

-  function renderExpander() {
-    if (props.treeNode.edgeCount() === 0) {
+  private renderExpander() {
+    if (this.props.treeNode.edgeCount() === 0) {
      return null
    }

    return (
-      <span key="expander" className={props.classes.expander} onClick={props.toggleCollapsed}>
-        {props.collapsed ? '▶' : '▼'}
+      <span key="expander" className={this.props.classes.expander} onClick={this.props.toggleCollapsed}>
+        {this.props.collapsed ? '▶' : '▼'}
      </span>
    )
  }

-  function renderMetadata() {
-    if (props.treeNode.edgeCount() === 0 || !props.collapsed) {
+  private renderMetadata() {
+    if (this.props.treeNode.edgeCount() === 0 || !this.props.collapsed) {
      return null
    }

-    const messages = props.treeNode.leafMessageCount()
-    const topicCount = props.treeNode.childTopicCount()
+    const messages = this.props.treeNode.leafMessageCount()
+    const topicCount = this.props.treeNode.childTopicCount()
    return (
-      <span key="metadata" className={props.classes.collapsedSubnodes}>{` (${topicCount} ${
+      <span key="metadata" className={this.props.classes.collapsedSubnodes}>{` (${topicCount} ${
        topicCount === 1 ? 'topic' : 'topics'
      }, ${messages} ${messages === 1 ? 'message' : 'messages'})`}</span>
    )
  }

-  return (
-    <>
-      {renderExpander()}
-      {renderSourceEdge()}
-      {renderMetadata()}
-      {renderValue()}
-    </>
-  )
+  public render() {
+    return [this.renderExpander(), this.renderSourceEdge(), this.renderMetadata(), this.renderValue()]
+  }
 }

 const styles = (theme: Theme) => ({
@@ -1,18 +0,0 @@
-import * as q from '../../../../../../backend/src/Model'
-import { useEffect } from 'react'
-import { TopicViewModel } from '../../../../model/TopicViewModel'
-
-export function useViewModel(treeNode: q.TreeNode<TopicViewModel> | undefined) {
-  useEffect(() => {
-    if (treeNode && !treeNode?.viewModel) {
-      treeNode.viewModel = new TopicViewModel(treeNode)
-    }
-    treeNode?.viewModel?.retain()
-
-    return function cleanup() {
-      treeNode?.viewModel?.release()
-    }
-  }, [treeNode])
-
-  return treeNode?.viewModel
-}
@@ -1,8 +1,6 @@
 import * as q from '../../../../../../backend/src/Model'
-import React, { useCallback } from 'react'
+import React, { useEffect } from 'react'
 import { TopicViewModel } from '../../../../model/TopicViewModel'
-import { useSubscription } from '../../../hooks/useSubscription'
-import { useViewModel } from './useViewModel'

 export function useViewModelSubscriptions(
  treeNode: q.TreeNode<TopicViewModel>,
@@ -10,21 +8,37 @@ export function useViewModelSubscriptions(
  setSelected: (value: boolean) => void,
  setCollapsedOverride: (value: boolean) => void
 ) {
-  const viewModel = useViewModel(treeNode)
+  useEffect(() => {
+    const selectionDidChange = () => {
+      const selected = treeNode.viewModel && treeNode.viewModel.isSelected()
+      treeNode.viewModel && setSelected(Boolean(selected))

-  const selectionDidChange = useCallback(() => {
-    const selected = viewModel && viewModel.isSelected()
-    viewModel && setSelected(Boolean(selected))
-
-    if (selected && nodeRef && nodeRef.current) {
-      nodeRef.current.focus({ preventScroll: false })
+      if (selected && nodeRef && nodeRef.current) {
+        nodeRef.current.focus({ preventScroll: false })
+      }
    }
-  }, [viewModel])

-  const expandedDidChange = useCallback(() => {
-    viewModel && setCollapsedOverride(!viewModel.isExpanded())
-  }, [viewModel])
+    const expandedDidChange = () => {
+      treeNode.viewModel && setCollapsedOverride(!treeNode.viewModel.isExpanded())
+    }

-  useSubscription(viewModel?.selectionChange, selectionDidChange)
-  useSubscription(viewModel?.expandedChange, expandedDidChange)
+    function addSubscriber() {
+      treeNode.viewModel = new TopicViewModel()
+      treeNode.viewModel.selectionChange.subscribe(selectionDidChange)
+      treeNode.viewModel.expandedChange.subscribe(expandedDidChange)
+    }
+
+    function removeSubscriber() {
+      if (treeNode.viewModel) {
+        treeNode.viewModel.selectionChange.unsubscribe(selectionDidChange)
+        treeNode.viewModel.expandedChange.unsubscribe(expandedDidChange)
+        treeNode.viewModel = undefined
+      }
+    }
+
+    addSubscriber()
+    return function cleanup() {
+      removeSubscriber()
+    }
+  }, [treeNode])
 }
@@ -91,26 +91,23 @@ class TreeComponent extends React.PureComponent<Props, State> {
    const updateInterval = Math.max(expectedRenderTime * 7, 300)
    const timeUntilNextUpdate = updateInterval - (performance.now() - this.renderTime)

-    this.updateTimer = setTimeout(
-      () => {
-        window.requestIdleCallback(
-          () => {
-            this.updateTimer && clearTimeout(this.updateTimer)
-            this.updateTimer = undefined
-            this.renderTime = performance.now()
+    this.updateTimer = setTimeout(() => {
+      window.requestIdleCallback(
+        () => {
+          this.updateTimer && clearTimeout(this.updateTimer)
+          this.updateTimer = undefined
+          this.renderTime = performance.now()

-            window.requestIdleCallback(
-              () => {
-                this.setState({ lastUpdate: this.renderTime })
-              },
-              { timeout: 100 }
-            )
-          },
-          { timeout: 500 }
-        )
-      },
-      Math.max(0, timeUntilNextUpdate)
-    )
+          window.requestIdleCallback(
+            () => {
+              this.setState({ lastUpdate: this.renderTime })
+            },
+            { timeout: 100 }
+          )
+        },
+        { timeout: 500 }
+      )
+    }, Math.max(0, timeUntilNextUpdate))
  }

  public componentWillUpdate() {
@@ -1,7 +1,7 @@
-import compareVersions from 'compare-versions'
-import electron from 'electron'
-import os from 'os'
-import React from 'react'
+import * as compareVersions from 'compare-versions'
+import * as electron from 'electron'
+import * as os from 'os'
+import * as React from 'react'
 import axios from 'axios'
 import Close from '@material-ui/icons/Close'
 import CloudDownload from '@material-ui/icons/CloudDownload'
@@ -13,7 +13,6 @@ import { Theme, withStyles } from '@material-ui/core/styles'
 import { updateNotifierActions } from '../actions'

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

 interface Props {
  showUpdateNotification: boolean
@@ -51,21 +50,18 @@ class UpdateNotifier extends React.PureComponent<Props, State> {
    super(props)
    this.state = { newerVersions: [] }

-    this.checkForUpdates()
-  }
+    const ownVersion = electron.remote.app.getVersion()
+    this.fetchReleases().then(releases => {
+      const newerVersions = releases
+        .filter(release => this.allowPrereleaseIfOwnVersionIsBeta(release, ownVersion))
+        .filter(release => compareVersions(release.tag_name, ownVersion) > 0)
+        .sort((a, b) => compareVersions(b.tag_name, a.tag_name))

-  private async checkForUpdates() {
-    const ownVersion = await rendererRpc.call(getAppVersion, undefined, 10000)
-    const releases = await this.fetchReleases()
-    const newerVersions = releases
-      .filter(release => this.allowPrereleaseIfOwnVersionIsBeta(release, ownVersion))
-      .filter(release => compareVersions(release.tag_name, ownVersion) > 0)
-      .sort((a, b) => compareVersions(b.tag_name, a.tag_name))
-
-    if (newerVersions.length > 0) {
-      this.setState({ newerVersions })
-      this.props.actions.showUpdateNotification(true)
-    }
+      if (newerVersions.length > 0) {
+        this.setState({ newerVersions })
+        this.props.actions.showUpdateNotification(true)
+      }
+    })
  }

  private allowPrereleaseIfOwnVersionIsBeta(release: GithubRelease, ownVersion: string) {
@@ -9,8 +9,7 @@ import { globalActions } from '../../actions'
 const copy = require('copy-text-to-clipboard')

 interface Props {
-  value?: string
-  getValue?: () => string | undefined
+  value: string
  actions: {
    global: typeof globalActions
  }
@@ -29,7 +28,7 @@ class Copy extends React.PureComponent<Props, State> {
  private handleClick = (event: React.MouseEvent) => {
    event.stopPropagation()

-    copy(this.props.value ?? this.props.getValue?.())
+    copy(this.props.value)
    this.props.actions.global.showNotification('Copied to clipboard')
    this.setState({ didCopy: true })
    setTimeout(() => {
@@ -1,5 +1,5 @@
-import moment from 'moment'
-import React from 'react'
+import * as moment from 'moment'
+import * as React from 'react'
 import { AppState } from '../../reducers'
 import { connect } from 'react-redux'

@@ -12,7 +12,6 @@ interface Props {
 }

 const unitMapping = {
-  ms: 'milliseconds',
  s: 'seconds',
  m: 'minutes',
  h: 'hours',
@@ -22,7 +21,7 @@ class DateFormatter extends React.PureComponent<Props, {}> {
  private intervalSince(intervalSince: Date) {
    const interval = intervalSince.getTime() - this.props.date.getTime()
    const unit = this.unitForInterval(interval)
-    return `${moment.duration(interval).as(unit).toFixed(3)} ${unitMapping[unit]}`
+    return `${Math.round(moment.duration(interval).as(unit) * 100) / 100} ${unitMapping[unit]}`
  }

  private legacyDate() {
@@ -32,11 +31,10 @@ class DateFormatter extends React.PureComponent<Props, {}> {
  private localizedDate(locale: string) {
    return moment(this.props.date)
      .locale(locale)
-      .format(this.props.timeFirst ? 'LTS.SSS L' : 'L LTS.SSS')
+      .format(this.props.timeFirst ? 'LTS L' : 'L LTS')
  }

  private unitForInterval(milliseconds: number) {
-    const oneSecond = 1000 * 1
    const oneMinute = 1000 * 60
    const oneHour = oneMinute * 60

@@ -48,11 +46,7 @@ class DateFormatter extends React.PureComponent<Props, {}> {
      return 'm'
    }

-    if (milliseconds > oneSecond * 0.5) {
-      return 's'
-    }
-
-    return 'ms'
+    return 's'
  }

  public render() {
@@ -1,85 +0,0 @@
-import * as React from 'react'
-import { connect } from 'react-redux'
-import Check from '@material-ui/icons/Check'
-import CustomIconButton from './CustomIconButton'
-
-import { SaveAlt } from '@material-ui/icons'
-import { bindActionCreators } from 'redux'
-import { rendererRpc, writeToFile } from '../../../../events'
-import { makeSaveDialogRpc } from '../../../../events/OpenDialogRequest'
-
-import { globalActions } from '../../actions'
-
-export async function saveToFile(data: string): Promise<string | undefined> {
-  const rejectReasons = {
-    errorWritingFile: 'Error writing file',
-  }
-
-  const { canceled, filePath } = await rendererRpc.call(makeSaveDialogRpc(), {
-    securityScopedBookmarks: true,
-  })
-
-  if (!canceled && filePath !== undefined) {
-    try {
-      const filename = await rendererRpc.call(writeToFile, { filePath, data })
-      return filePath
-    } catch (error) {
-      throw rejectReasons.errorWritingFile
-    }
-  }
-}
-
-interface Props {
-  getData: () => string | undefined
-  actions: {
-    global: typeof globalActions
-  }
-}
-
-interface State {
-  didSave: boolean
-}
-
-class Save extends React.PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props)
-    this.state = { didSave: false }
-  }
-
-  private handleClick = async (event: React.MouseEvent) => {
-    event.stopPropagation()
-    const data = this.props.getData()
-    if (data != undefined) {
-      const filename = await saveToFile(data)
-      this.props.actions.global.showNotification(`Saved to ${filename}`)
-      this.setState({ didSave: true })
-      setTimeout(() => {
-        this.setState({ didSave: false })
-      }, 1500)
-    }
-  }
-
-  public render() {
-    const icon = !this.state.didSave ? (
-      <SaveAlt fontSize="inherit" />
-    ) : (
-      <Check fontSize="inherit" style={{ cursor: 'default' }} />
-    )
-
-    return (
-      <CustomIconButton onClick={this.handleClick} tooltip="Save to file">
-        <div style={{ marginTop: '2px' }}>{icon}</div>
-      </CustomIconButton>
-    )
-  }
-}
-
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    actions: {
-      global: bindActionCreators(globalActions, dispatch),
-    },
-  }
-}
-
-export default connect(undefined, mapDispatchToProps)(Save)
@@ -1,31 +0,0 @@
-import * as q from '../../../../backend/src/Model'
-import { useCallback, useState } from 'react'
-import { TopicViewModel } from '../../model/TopicViewModel'
-import { useSubscription } from './useSubscription'
-import { useViewModel } from '../Tree/TreeNode/effects/useViewModel'
-import { DecoderEnvelope } from '../../decoders/DecoderEnvelope'
-import { Decoder } from '../../../../backend/src/Model/Decoder'
-
-export type DecoderFunction = (message: q.Message) => DecoderEnvelope | undefined
-
-/**
- * Provides the latest decoder for a topic
- *
- * @param treeNode
- * @returns
- */
-export function useDecoder(treeNode: q.TreeNode<TopicViewModel> | undefined): DecoderFunction {
-  const viewModel = useViewModel(treeNode)
-  const [decoder, setDecoder] = useState(viewModel?.decoder)
-
-  useSubscription(viewModel?.onDecoderChange, setDecoder)
-
-  return useCallback(
-    message => {
-      return decoder && message.payload
-        ? decoder.decoder.decode(message.payload, decoder.format)
-        : { message: message.payload ?? undefined, decoder: Decoder.NONE }
-    },
-    [decoder]
-  )
-}
@@ -1,10 +0,0 @@
-import { useEffect } from 'react'
-import { EventDispatcher } from '../../../../events'
-
-export function useSubscription<T>(dispatcher: EventDispatcher<T> | undefined, callback: (value: T) => void) {
-  useEffect(() => {
-    dispatcher?.subscribe(callback)
-
-    return () => dispatcher?.unsubscribe(callback)
-  }, [dispatcher, callback])
-}
@@ -1,56 +0,0 @@
-import { Base64Message } from '../../../backend/src/Model/Base64Message'
-import { Decoder } from '../../../backend/src/Model/Decoder'
-import { DecoderEnvelope } from './DecoderEnvelope'
-import { MessageDecoder } from './MessageDecoder'
-
-type BinaryFormats =
-  | 'int8'
-  | 'int16'
-  | 'int32'
-  | 'int64'
-  | 'uint8'
-  | 'uint16'
-  | 'uint32'
-  | 'uint64'
-  | 'float'
-  | 'double'
-
-/**
- * Binary decode primitive binary data type and arrays of these
- */
-export const BinaryDecoder: MessageDecoder<BinaryFormats> = {
-  formats: ['int8', 'int16', 'int32', 'int64', 'uint8', 'uint16', 'uint32', 'uint64', 'float', 'double'],
-  decode(input: Base64Message, format: BinaryFormats): DecoderEnvelope {
-    const decodingOption = {
-      int8: [Buffer.prototype.readInt8, 1],
-      int16: [Buffer.prototype.readInt16LE, 2],
-      int32: [Buffer.prototype.readInt32LE, 4],
-      int64: [Buffer.prototype.readBigInt64LE, 8],
-      uint8: [Buffer.prototype.readUint8, 1],
-      uint16: [Buffer.prototype.readUint16LE, 2],
-      uint32: [Buffer.prototype.readUint32LE, 4],
-      uint64: [Buffer.prototype.readBigUint64LE, 8],
-      float: [Buffer.prototype.readFloatLE, 4],
-      double: [Buffer.prototype.readDoubleLE, 8],
-    } as const
-
-    const [readNumber, bytesToRead] = decodingOption[format]
-
-    const buf = input.toBuffer()
-    let str: String[] = []
-    if (buf.length % bytesToRead !== 0) {
-      return {
-        error: 'Data type does not align with message',
-        decoder: Decoder.NONE,
-      }
-    }
-    for (let index = 0; index < buf.length; index += bytesToRead) {
-      str.push((readNumber as any).apply(buf, [index]).toString())
-    }
-
-    return {
-      message: Base64Message.fromString(JSON.stringify(str.length === 1 ? str[0] : str)),
-      decoder: Decoder.NONE,
-    }
-  },
-}
@@ -1,8 +0,0 @@
-import { Base64Message } from '../../../backend/src/Model/Base64Message'
-import { Decoder } from '../../../backend/src/Model/Decoder'
-
-export interface DecoderEnvelope {
-  message?: Base64Message
-  error?: string
-  decoder: Decoder
-}
@@ -1,13 +0,0 @@
-import { Base64Message } from '../../../backend/src/Model/Base64Message'
-import { DecoderEnvelope } from './DecoderEnvelope'
-
-export interface MessageDecoder<T = string> {
-  /**
-   * Can be used to
-   * @param topic
-   */
-  formats: T[]
-  canDecodeTopic?(topic: string): boolean
-  canDecodeData?(data: Base64Message): boolean
-  decode(input: Base64Message, format: T | string | undefined): DecoderEnvelope
-}
@@ -1,28 +0,0 @@
-import { Base64Message } from '../../../backend/src/Model/Base64Message'
-import { Decoder } from '../../../backend/src/Model/Decoder'
-import { get } from 'sparkplug-payload'
-import { MessageDecoder } from './MessageDecoder'
-var sparkplug = get('spBv1.0')
-
-export const SparkplugDecoder: MessageDecoder = {
-  formats: ['Sparkplug'],
-  canDecodeTopic(topic: string) {
-    return !!topic.match(/^spBv1\.0\/[^/]+\/[ND](DATA|CMD|DEATH|BIRTH)\/[^/]+(\/[^/]+)?$/u)
-  },
-  decode(input) {
-    try {
-      const message = Base64Message.fromString(
-        JSON.stringify(
-          // @ts-ignore
-          sparkplug.decodePayload(new Uint8Array(input.toBuffer()))
-        )
-      )
-      return { message, decoder: Decoder.SPARKPLUG }
-    } catch {
-      return {
-        error: 'Failed to decode sparkplugb payload',
-        decoder: Decoder.NONE,
-      }
-    }
-  },
-}
@@ -1,10 +0,0 @@
-import { Base64Message } from '../../../backend/src/Model/Base64Message'
-import { Decoder } from '../../../backend/src/Model/Decoder'
-import { MessageDecoder } from './MessageDecoder'
-
-export const StringDecoder: MessageDecoder = {
-  formats: ['string'],
-  decode(input: Base64Message) {
-    return { message: input, decoder: Decoder.NONE }
-  },
-}
@@ -1,6 +0,0 @@
-import { StringDecoder } from './StringDecoder'
-import { BinaryDecoder } from './BinaryDecoder'
-import { SparkplugDecoder } from './SparkplugBDecoder'
-export * from './MessageDecoder'
-
-export const decoders = [SparkplugDecoder, BinaryDecoder, StringDecoder] as const
@@ -77,11 +77,11 @@ export function createEmptyConnection(): ConnectionOptions {
 export function makeDefaultConnections() {
  return {
    // remember: there was also iot.eclipse.org once
-    'mqtt.eclipseprojects.io': {
+    'mqtt.eclipse.org': {
      ...createEmptyConnection(),
-      id: 'mqtt.eclipseprojects.io',
-      name: 'mqtt.eclipseprojects.io',
-      host: 'mqtt.eclipseprojects.io',
+      id: 'mqtt.eclipse.org',
+      name: 'mqtt.eclipse.org',
+      host: 'mqtt.eclipse.org',
    },
    'test.mosquitto.org': {
      ...createEmptyConnection(),
@@ -1,4 +1,5 @@
 import { ConnectionOptions, createEmptyConnection } from './ConnectionOptions'
+import { v4 } from 'uuid'

 interface LegacyConnectionSettings {
  host: string
@@ -1,77 +1,19 @@
-import * as q from '../../../backend/src/Model'
 import { Destroyable } from '../../../backend/src/Model/Destroyable'
-import { MessageDecoder, decoders } from '../decoders'
 import { EventDispatcher } from '../../../events'

-function findDecoder<T extends Destroyable>(node: q.TreeNode<T>): TopicDecoder | undefined {
-  const decoder = decoders.find(
-    decoder =>
-      decoder.canDecodeTopic?.(node.path()) || (node.message?.payload && decoder.canDecodeData?.(node.message?.payload))
-  )
-
-  return decoder
-    ? {
-        decoder,
-        format: undefined,
-      }
-    : undefined
-}
-
-type TopicDecoder = { decoder: MessageDecoder; format: string | undefined }
-
 export class TopicViewModel implements Destroyable {
  private selected: boolean
  private expanded: boolean
-  private owner: q.TreeNode<TopicViewModel> | undefined
-  private _decoder?: TopicDecoder
-  /**
-   * Reference counter for useViewModel hook
-   */
-  private referenceCounter = 0
  public selectionChange = new EventDispatcher<void>()
  public expandedChange = new EventDispatcher<void>()
-  public onDecoderChange = new EventDispatcher<TopicDecoder | undefined>()

-  get decoder(): TopicDecoder | undefined {
-    if (!this._decoder) {
-      this._decoder = this.owner && findDecoder(this.owner)
-    }
-
-    return this._decoder
-  }
-
-  set decoder(override: TopicDecoder | undefined) {
-    this._decoder = override
-
-    this.onDecoderChange.dispatch(override)
-  }
-
-  public constructor(treeNode: q.TreeNode<TopicViewModel>) {
-    this.owner = treeNode
+  public constructor() {
    this.selected = false
    this.expanded = false
  }

-  public retain() {
-    this.referenceCounter += 1
-  }
-
-  public release() {
-    this.referenceCounter -= 1
-    if (this.referenceCounter <= 0) {
-      this.destroy()
-    }
-  }
-
  public destroy() {
-    console.log('destroy', this.referenceCounter)
-    if (this.owner) {
-      this.owner.viewModel = undefined
-      this.owner = undefined
-    }
    this.selectionChange.removeAllListeners()
-    this.onDecoderChange.removeAllListeners()
-    this.expandedChange.removeAllListeners()
  }

  public isSelected() {
@@ -45,11 +45,9 @@ const initialStateFactory = Record<TreeStateModel>({
  filter: undefined,
 })

-const setPaused =
-  (pause: boolean) =>
-  (state: TreeState, action: ShowTree): TreeState => {
-    return state.set('paused', pause)
-  }
+const setPaused = (pause: boolean) => (state: TreeState, action: ShowTree): TreeState => {
+  return state.set('paused', pause)
+}

 const actions: {
  [s: string]: (state: TreeState, action: ReduxAction) => TreeState
@@ -1,6 +1,13 @@
-import { rendererRpc } from '../../../events'
+import { rendererEvents } from '../../../events'
+import { v4 } from 'uuid'

-import { storageStoreEvent, storageLoadEvent, storageClearEvent } from '../../../events/StorageEvents'
+import {
+  storageStoreEvent,
+  makeStorageResponseEvent,
+  storageLoadEvent,
+  storageClearEvent,
+  makeStorageAcknowledgementEvent,
+} from '../../../events/StorageEvents'

 export interface StorageIdentifier<Model> {
  id: string
@@ -13,27 +20,71 @@ export interface PersistentStorage {
 }

 class RemoteStorage implements PersistentStorage {
-  public store<Model>(identifier: StorageIdentifier<Model>, data: Model): Promise<void> {
-    return rendererRpc.call(storageStoreEvent, {
-      data,
-      store: identifier.id,
+  private timeoutCallback(event: any, callback: any, reject: any) {
+    setTimeout(() => {
+      reject('remote storage timeout')
+      rendererEvents.unsubscribe(event, callback)
+    }, 10000)
+  }
+
+  private expectAck(transactionId: string): Promise<void> {
+    const ack = makeStorageAcknowledgementEvent(transactionId)
+    return new Promise<void>((resolve, reject) => {
+      const callback = (msg: any) => {
+        if (msg && msg.error) {
+          reject(msg.error)
+        } else {
+          resolve()
+        }
+        rendererEvents.unsubscribe(ack, callback)
+      }
+      rendererEvents.subscribe(ack, callback)
+      this.timeoutCallback(ack, callback, reject)
    })
  }

-  public async load<Model>(identifier: StorageIdentifier<Model>): Promise<Model | undefined> {
-    const result = await rendererRpc.call(
-      storageLoadEvent,
-      {
-        store: identifier.id,
-      },
-      10000
-    )
+  public store<Model>(identifier: StorageIdentifier<Model>, data: Model): Promise<void> {
+    const transactionId = v4()
+    const expectation = this.expectAck(transactionId)
+    rendererEvents.emit(storageStoreEvent, {
+      data,
+      transactionId,
+      store: identifier.id,
+    })
+    return expectation
+  }

-    return (result as any).data
+  public load<Model>(identifier: StorageIdentifier<Model>): Promise<Model | undefined> {
+    const transactionId = v4()
+    const responseEvent = makeStorageResponseEvent(transactionId)
+
+    const promise = new Promise<Model>((resolve, reject) => {
+      const callback = (msg: any) => {
+        if (msg.error) {
+          reject(msg.error)
+        } else {
+          resolve(msg.data)
+        }
+        rendererEvents.unsubscribe(responseEvent, callback)
+      }
+      rendererEvents.subscribe(responseEvent, callback)
+      this.timeoutCallback(responseEvent, callback, reject)
+    })
+
+    rendererEvents.emit(storageLoadEvent, {
+      transactionId,
+      store: identifier.id,
+    })
+
+    return promise
  }

  public clear(): Promise<void> {
-    return rendererRpc.call(storageClearEvent, undefined, 10000)
+    const transactionId = v4()
+    const expectation = this.expectAck(transactionId)
+
+    rendererEvents.emit(storageClearEvent, { transactionId })
+    return expectation
  }
 }

@@ -1,4 +1,4 @@
-// import { electronRendererTelemetry } from 'electron-telemetry'
+import { electronRendererTelemetry } from 'electron-telemetry'

-// const telemetry = electronRendererTelemetry
-// electronRendererTelemetry.registerErrorHandler()
+const telemetry = electronRendererTelemetry
+electronRendererTelemetry.registerErrorHandler()
@@ -1,23 +1,24 @@
-export const selectTextWithCtrlA =
-  (options?: { targetSelector: string }) => (e: React.KeyboardEvent<HTMLDivElement>) => {
-    const isCtrlA = (e.metaKey || e.ctrlKey) && e.key === 'a'
+export const selectTextWithCtrlA = (options?: { targetSelector: string }) => (
+  e: React.KeyboardEvent<HTMLDivElement>
+) => {
+  const isCtrlA = (e.metaKey || e.ctrlKey) && e.key === 'a'

-    if (isCtrlA && window.getSelection) {
-      e.persist()
-      e.preventDefault()
-      e.stopPropagation()
-      const selection = window.getSelection()
-      const range = document.createRange()
-      const eventTarget = e.target as HTMLElement
-      const target: HTMLElement | null = options ? eventTarget.querySelector(options.targetSelector) : eventTarget
+  if (isCtrlA && window.getSelection) {
+    e.persist()
+    e.preventDefault()
+    e.stopPropagation()
+    const selection = window.getSelection()
+    const range = document.createRange()
+    const eventTarget = e.target as HTMLElement
+    const target: HTMLElement | null = options ? eventTarget.querySelector(options.targetSelector) : eventTarget

-      if (!target) {
-        console.error('Could not find matching target for Ctrl+A Event')
-      }
-      if (selection && target) {
-        range.selectNodeContents(target)
-        selection.removeAllRanges()
-        selection.addRange(range)
-      }
+    if (!target) {
+      console.error('Could not find matching target for Ctrl+A Event')
+    }
+    if (selection && target) {
+      range.selectNodeContents(target)
+      selection.removeAllRanges()
+      selection.addRange(range)
    }
  }
+}
@@ -1,27 +1,27 @@
-// import { electronRendererTelemetry } from 'electron-telemetry'
+import { electronRendererTelemetry } from 'electron-telemetry'

 // Used to determine long-time-stability and memory leaks
-// function trackProcessStatistics() {
-//   setInterval(() => {
-//     try {
-//       electronRendererTelemetry.trackCustomEvent({
-//         name: 'heapStatistics',
-//         payload: process.getHeapStatistics(),
-//       })
-//       electronRendererTelemetry.trackCustomEvent({
-//         name: 'cpuUsage',
-//         payload: process.getCPUUsage(),
-//       })
-//       electronRendererTelemetry.trackCustomEvent({
-//         name: 'runningSince',
-//         payload: performance.now(),
-//       })
-//     } catch (error) {
-//       console.error(error)
-//     }
-//   }, 60 * 1000)
-// }
-// trackProcessStatistics()
+function trackProcessStatistics() {
+  setInterval(() => {
+    try {
+      electronRendererTelemetry.trackCustomEvent({
+        name: 'heapStatistics',
+        payload: process.getHeapStatistics(),
+      })
+      electronRendererTelemetry.trackCustomEvent({
+        name: 'cpuUsage',
+        payload: process.getCPUUsage(),
+      })
+      electronRendererTelemetry.trackCustomEvent({
+        name: 'runningSince',
+        payload: performance.now(),
+      })
+    } catch (error) {
+      console.error(error)
+    }
+  }, 60 * 1000)
+}
+trackProcessStatistics()

 // Log reducer event names to determine what functionality is used and how to reproduce reported errors
 export function trackEvent(name: string) {
@@ -30,6 +30,6 @@ export function trackEvent(name: string) {
  }
  const blacklist = ['CONNECTION_SET_HEALTH']
  if (blacklist.indexOf(name) === -1) {
-    // electronRendererTelemetry.trackEvent(name)
+    electronRendererTelemetry.trackEvent(name)
  }
 }
@@ -0,0 +1,3 @@
+--require ts-node/register
+--require source-map-support/register
+--recursive ./src/**/*.spec.ts
@@ -4,23 +4,18 @@
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strict": true,
-    "lib": ["es2019", "dom"],
+    "lib": ["es2017", "dom"],
    "moduleResolution": "node",
    "outDir": "./build/",
    "sourceMap": true,
    "module": "esnext",
-    "target": "ES2017",
+    "target": "es2017",
    "jsx": "react",
-    "paths": {
-      "react": ["./node_modules/@types/react"]
-    },
    "types": ["react"],
-    "allowSyntheticDefaultImports": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true
+    "allowSyntheticDefaultImports": true
  },
  "include": ["./src/**/*"],
-  "exclude": ["**/*.d.ts", ".src/**/*.png", "./node_modules"],
+  "exclude": ["**/*.d.ts", ".src/**/*.png"],
  "awesomeTypescriptLoaderOptions": {
    "useCache": true,
    "transpileModule": true,
@@ -1,6 +1,7 @@
 // const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const webpack = require('webpack')
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack');
+const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

 module.exports = {
  entry: {
@@ -17,11 +18,12 @@ module.exports = {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
+      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
-      // name: true,
+      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/](react|react-dom|@material-ui|popper\.js|react|react-redux|prop-types|jss|redux|scheduler|react-transition-group)[\\/]/,
@@ -30,7 +32,6 @@ module.exports = {
          priority: -10,
        },
        default: {
-          name: 'default',
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
@@ -41,7 +42,6 @@ module.exports = {
  devServer: {
    // contentBase: './dist', // content not from webpack
    hot: true,
-    liveReload: true,
  },
  target: 'electron-renderer',
  mode: 'production',
@@ -55,15 +55,13 @@ module.exports = {
      // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
      {
        test: /\.tsx?$/,
-        use: [
-          {
-            loader: 'ts-loader',
-            // options: {
-            //   configFile: './tsconfig.json',
-            // },
-          },
-        ],
-        exclude: /node_modules/,
+        loader: 'awesome-typescript-loader',
+        options: {
+          reportFiles: [
+            "src/**/*.{ts,tsx}",
+            "../backend/src/**/*.{ts,tsx}"
+          ]
+        }
      },
      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      { enforce: 'pre', test: /\.js$/, loader: 'source-map-loader' },
@@ -72,28 +70,35 @@ module.exports = {
        use: ['style-loader', 'css-loader'],
      },
      {
-        test: /\.(png|jpg|gif)$/i,
-        type: 'asset/resource',
+        test: /\.(png|jpg|gif)$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {},
+          },
+        ],
+      },
+      {
+        test: /\.node$/,
+        use: {
+          loader: 'node-loader',
+          options: {
+            modules: true,
+          }
+        }
      },
-      // {
-      //   test: /\.node$/,
-      //   use: {
-      //     loader: 'node-loader',
-      //     options: {
-      //       modules: true,
-      //     }
-      //   }
-      // },
    ],
  },
-  // node: { global: true },
+
  plugins: [
    new HtmlWebpackPlugin({ template: './index.html', file: './build/index.html', inject: false }),
    // new BundleAnalyzerPlugin(),
-    // new webpack.IgnorePlugin({
-    //   resourceRegExp: /\.\/build\/Debug\/addon/,
-    //   contextRegExp: /heapdump$/
-    // }),
+    new HardSourceWebpackPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.IgnorePlugin({
+      resourceRegExp: /\.\/build\/Debug\/addon/,
+      contextRegExp: /heapdump$/
+    }),
  ],

  // When importing a module whose path matches one of the following, just
@@ -104,10 +109,4 @@ module.exports = {
    // "react": "React",
    // "react-dom": "ReactDOM"
  },
-  cache: {
-    type: 'filesystem',
-  },
-  optimization: {
-    runtimeChunk: 'single',
-  },
-}
+};
@@ -7,10 +7,10 @@ cache:
  - '%LOCALAPPDATA%\electron-builder\cache'

 install:
-  - ps: Install-Product node 19
+  - ps: Install-Product node 10

 build_script:
-  - yarn install --frozen-lockfile
+  - yarn
  - yarn build
  - yarn prepare-release
  - yarn package appx
@@ -4,16 +4,13 @@
  "description": "",
  "main": "build/index.js",
  "scripts": {
-    "test": "mocha --require ts-node/register --require source-map-support/register --recursive ./src/*/**/*.spec.ts",
+    "test": "mocha",
    "build": "tsc",
-    "test-inspect": "mocha --inspect-brk --require ts-node/register --require source-map-support/register --recursive ./src/*/**/*.spec.ts",
-    "coverage": "nyc mocha --require ts-node/register --require source-map-support/register --recursive ./src/*/**/*.spec.ts",
+    "test-inspect": "mocha --inspect-brk",
+    "coverage": "nyc mocha",
    "debug": "ts-node --inspect ./src/index.ts",
    "postinstall": "yarn build"
  },
-  "engines": {
-    "node": ">=18"
-  },
  "author": "",
  "license": "CC-BY-ND-4.0",
  "nyc": {
@@ -41,9 +38,7 @@
  "peerDependencies": {
    "fs-extra": "^8.0.1",
    "js-base64": "^2.5.1",
-    "long": "^4.0.0",
    "lowdb": "^1.0.0",
-    "mqtt": "^3.0.0",
-    "protobufjs": "^6.11.4"
+    "mqtt": "^3.0.0"
  }
-}
+}
@@ -1,9 +1,15 @@
-import FileAsync from 'lowdb/adapters/FileAsync'
-import fs from 'fs-extra'
-import lowdb from 'lowdb'
-import path from 'path'
-import { backendRpc } from '../../events'
-import { storageClearEvent, storageLoadEvent, storageStoreEvent } from '../../events/StorageEvents'
+import * as FileAsync from 'lowdb/adapters/FileAsync'
+import * as fs from 'fs-extra'
+import * as lowdb from 'lowdb'
+import * as path from 'path'
+import { backendEvents } from '../../events'
+import {
+  makeStorageAcknowledgementEvent,
+  makeStorageResponseEvent,
+  storageClearEvent,
+  storageLoadEvent,
+  storageStoreEvent,
+} from '../../events/StorageEvents'

 export default class ConfigStorage {
  private file: string
@@ -26,26 +32,56 @@ export default class ConfigStorage {
  }

  public async init() {
-    backendRpc.on(storageStoreEvent, async event => {
-      const db = await this.getDb()
-      await db.set(event.store, event.data).write()
-      return
-    })
-
-    backendRpc.on(storageLoadEvent, async event => {
-      const db = await this.getDb()
-      const data = await db.get(event.store).value()
-      return {
-        data,
-        store: event.store,
+    backendEvents.subscribe(storageStoreEvent, async event => {
+      const ack = makeStorageAcknowledgementEvent(event.transactionId)
+      try {
+        const db = await this.getDb()
+        await db.set(event.store, event.data).write()
+        backendEvents.emit(ack, undefined)
+      } catch (error) {
+        backendEvents.emit(ack, {
+          error,
+          transactionId: event.transactionId,
+          store: event.store,
+        })
+        throw error
      }
    })

-    backendRpc.on(storageClearEvent, async event => {
-      const db = await this.getDb()
-      const keys = await db.keys().value()
-      for (const key of keys) {
-        await db.unset(key).write()
+    backendEvents.subscribe(storageLoadEvent, async event => {
+      const responseEvent = makeStorageResponseEvent(event.transactionId)
+      try {
+        const db = await this.getDb()
+        const data = await db.get(event.store).value()
+        backendEvents.emit(responseEvent, {
+          data,
+          transactionId: event.transactionId,
+          store: event.store,
+        })
+      } catch (error) {
+        backendEvents.emit(responseEvent, {
+          error,
+          transactionId: event.transactionId,
+          store: event.store,
+        })
+        throw error
+      }
+    })
+
+    backendEvents.subscribe(storageClearEvent, async event => {
+      try {
+        const db = await this.getDb()
+        const keys = await db.keys().value()
+        for (const key of keys) {
+          await db.unset(key).write()
+        }
+        backendEvents.emit(makeStorageAcknowledgementEvent(event.transactionId), undefined)
+      } catch (error) {
+        backendEvents.emit(makeStorageAcknowledgementEvent(event.transactionId), {
+          error,
+          transactionId: event.transactionId,
+        })
+        throw error
      }
    })
  }
@@ -1,4 +1,4 @@
-import { URL } from 'url'
+import * as Url from 'url'

 import { Client, connect as mqttConnect } from 'mqtt'
 import { DataSource, DataSourceStateMachine } from './'
@@ -41,13 +41,13 @@ export class MqttSource implements DataSource<MqttOptions> {
    const urlStr = options.tls ? options.url.replace(/^(mqtt|ws):/, '$1s:') : options.url
    let url
    try {
-      url = new URL(urlStr)
+      url = Url.parse(urlStr)
    } catch (error) {
-      this.stateMachine.setError(error as Error)
+      this.stateMachine.setError(error)
      throw error
    }

-    const client = mqttConnect(url.toString(), {
+    const client = mqttConnect(url, {
      resubscribe: false,
      rejectUnauthorized: options.certValidation,
      username: options.username,
@@ -98,7 +98,7 @@ export class MqttSource implements DataSource<MqttOptions> {

  public publish(msg: MqttMessage) {
    if (this.client) {
-      this.client.publish(msg.topic, (msg.payload && new Base64Message(msg.payload))?.toBuffer() ?? '', {
+      this.client.publish(msg.topic, msg.payload ? Base64Message.toUnicodeString(msg.payload) : '', {
        qos: msg.qos,
        retain: msg.retain,
      })
@@ -1,93 +1,29 @@
-import { Base64 } from 'js-base64'
-import { TopicDataType } from './TreeNode'
-
-export type Base64MessageDTO = Pick<Base64Message, 'base64Message'>
+const { Base64 } = require('js-base64')

 export class Base64Message {
-  public base64Message: string
-  private _unicodeValue: string | undefined
+  private base64Message: string
+  private unicodeValue: string

-  // Todo: Rename to `encodedLength`
-  public get length(): number {
-    return this.base64Message.length
+  public length: number
+
+  private constructor(base64Str: string) {
+    this.base64Message = base64Str
+    this.unicodeValue = Base64.decode(base64Str)
+    this.length = base64Str.length
  }

-  private get unicodeValue(): string {
-    if (!this._unicodeValue) {
-      this._unicodeValue = Base64.decode(this.base64Message ?? '')
-    }
-
-    return this._unicodeValue
-  }
-
-  constructor(base64Str?: string | Base64MessageDTO, error?: string) {
-    if (typeof base64Str === 'string' || typeof base64Str === 'undefined') {
-      this.base64Message = base64Str ?? ''
-    } else {
-      if (typeof base64Str.base64Message !== 'string') {
-        throw new Error('Received unexpected type in copy constructor')
-      }
-      this.base64Message = base64Str.base64Message
-    }
-  }
-
-  /**
-   * Override default JSON serialization behavior to only return the DTO
-   * @returns
-   */
-  public toJSON(): Base64MessageDTO {
-    return { base64Message: this.base64Message }
-  }
-
-  public toUnicodeString() {
-    return this.unicodeValue || ''
+  public static toUnicodeString(message: Base64Message) {
+    return message.unicodeValue || ''
  }

  public static fromBuffer(buffer: Buffer) {
    return new Base64Message(buffer.toString('base64'))
  }

-  public toBuffer(): Buffer {
-    return Buffer.from(this.base64Message, 'base64')
-  }
-
  public static fromString(str: string) {
    return new Base64Message(Base64.encode(str))
  }

-  public format(type: TopicDataType = 'string'): [string, 'json' | undefined] {
-    try {
-      switch (type) {
-        case 'json': {
-          const json = JSON.parse(this.toUnicodeString())
-          return [JSON.stringify(json, undefined, '  '), 'json']
-        }
-        case 'hex': {
-          const hex = Base64Message.toHex(this)
-          return [hex, undefined]
-        }
-        default: {
-          const str = this.toUnicodeString()
-          return [str, undefined]
-        }
-      }
-    } catch (error) {
-      const str = this.toUnicodeString()
-      return [str, undefined]
-    }
-  }
-
-  public static toHex(message: Base64Message) {
-    const buf = Buffer.from(message.base64Message, 'base64')
-
-    let str: string = ''
-    buf.forEach(element => {
-      let hex = element.toString(16).toUpperCase()
-      str += `0x${hex.length < 2 ? '0' + hex : hex} `
-    })
-    return str.trimRight()
-  }
-
  public static toDataUri(message: Base64Message, mimeType: string) {
    return `data:${mimeType};base64,${message.base64Message}`
  }
@@ -15,7 +15,7 @@ export class ChangeBuffer {
  public push(val: MqttMessage) {
    if (!this.isFull()) {
      this.buffer.push({ message: val, received: new Date() })
-      this.size += this.estimatedMessageOverhead + (val.payload?.base64Message.length ?? 0)
+      this.size += this.estimatedMessageOverhead + (val.payload ? val.payload.length : 0)
      this.length += 1
    }
  }
@@ -1,4 +0,0 @@
-export enum Decoder {
-  NONE,
-  SPARKPLUG,
-}
@@ -1,8 +1,7 @@
 import { Base64Message } from './Base64Message'
 import { QoS } from '../DataSource/MqttSource'
-import { MemoryConsumptionExpressedByLength } from './RingBuffer'

-export interface Message extends MemoryConsumptionExpressedByLength {
+export interface Message {
  // mqtt based info
  payload: Base64Message | null
  messageId?: number
@@ -1,6 +1,6 @@
 import { ChangeBuffer } from './ChangeBuffer'
 import { Destroyable } from './Destroyable'
-import { EventDispatcher, makeConnectionMessageEvent, MqttMessage, EventBusInterface } from '../../../events'
+import { EventBusInterface, EventDispatcher, makeConnectionMessageEvent, MqttMessage } from '../../../events'
 import { TreeNode } from './'
 import { TreeNodeFactory } from './TreeNodeFactory'

@@ -2,8 +2,6 @@ import { Destroyable } from './Destroyable'
 import { Edge, Message, RingBuffer, MessageHistory } from './'
 import { EventDispatcher } from '../../../events'

-export type TopicDataType = 'string' | 'json' | 'hex'
-
 export class TreeNode<ViewModel extends Destroyable> {
  public sourceEdge?: Edge<ViewModel>
  public message?: Message
@@ -19,7 +17,6 @@ export class TreeNode<ViewModel extends Destroyable> {
  public onMessage = new EventDispatcher<Message>()
  public onDestroy = new EventDispatcher<TreeNode<ViewModel>>()
  public isTree = false
-  public type: TopicDataType = 'json'

  private cachedPath?: string
  private cachedChildTopics?: Array<TreeNode<ViewModel>>
@@ -156,7 +153,7 @@ export class TreeNode<ViewModel extends Destroyable> {

  public path(): string {
    if (!this.cachedPath) {
-      this.cachedPath = this.branch()
+      return this.branch()
        .map(node => node.sourceEdge && node.sourceEdge.name)
        .filter(name => name !== undefined)
        .join('/')
@@ -1,7 +1,6 @@
 import { Destroyable } from './Destroyable'
 import { Edge, Tree, TreeNode } from './'
 import { MqttMessage } from '../../../events'
-import { Base64Message } from './Base64Message'

 export abstract class TreeNodeFactory {
  private static messageCounter = 0
@@ -31,8 +30,7 @@ export abstract class TreeNodeFactory {
    mqttMessage.retain
    node.setMessage({
      ...mqttMessage,
-      payload: mqttMessage.payload && new Base64Message(mqttMessage.payload?.base64Message),
-      length: mqttMessage.payload?.base64Message.length ?? 0,
+      length: mqttMessage.payload?.length ?? 0,
      received: receiveDate,
      messageNumber: this.messageCounter,
    })
@@ -1,5 +1,5 @@
 export { Edge } from './Edge'
-export { TreeNode, TopicDataType } from './TreeNode'
+export { TreeNode } from './TreeNode'
 export { Message } from './Message'
 export { TreeNodeFactory } from './TreeNodeFactory'
 export { Tree } from './Tree'
@@ -1,6 +1,7 @@
 import 'mocha'

 import { expect } from 'chai'
+import { Base64Message } from '../Base64Message'
 import { makeTreeNode } from './makeTreeNode'

 describe('TreeNode', () => {
@@ -13,7 +14,7 @@ describe('TreeNode', () => {
  it('updateWithNode should update value', () => {
    const topics = 'foo/bar'.split('/')
    const leaf = makeTreeNode('foo/bar', '3')
-    expect(leaf.message!.payload!.toUnicodeString()).to.eq('3')
+    expect(Base64Message.toUnicodeString(leaf.message!.payload!)).to.eq('3')

    const updateLeave = makeTreeNode('foo/bar', '5')

@@ -21,13 +22,13 @@ describe('TreeNode', () => {
    root.updateWithNode(updateLeave.firstNode())

    expect(root.sourceEdge).to.eq(undefined)
-    expect(leaf.message!.payload!.toUnicodeString()).to.eq('5')
+    expect(Base64Message.toUnicodeString(leaf.message!.payload!)).to.eq('5')
  })

  it('updateWithNode should update intermediate nodes', () => {
    const topics1 = 'foo/bar/baz'.split('/')
    const leaf = makeTreeNode('foo/bar/baz', '3')
-    expect(leaf.message!.payload!.toUnicodeString()).to.eq('3')
+    expect(Base64Message.toUnicodeString(leaf.message!.payload!)).to.eq('3')

    const topics2 = 'foo/bar'.split('/')
    const updateLeave = makeTreeNode('foo/bar', '5')
@@ -36,10 +37,10 @@ describe('TreeNode', () => {

    const barNode = leaf.firstNode().findNode('foo/bar')
    expect(barNode && barNode.sourceEdge && barNode.sourceEdge.name).to.eq('bar')
-    expect(barNode!.message!.payload!.toUnicodeString()).to.eq('5')
+    expect(Base64Message.toUnicodeString(barNode!.message!.payload!)).to.eq('5')

    expect(leaf.sourceEdge && leaf.sourceEdge.name).to.eq('baz')
-    expect(leaf.message!.payload!.toUnicodeString()).to.eq('3')
+    expect(Base64Message.toUnicodeString(leaf.message!.payload!)).to.eq('3')
  })

  it('updateWithNode should add nodes to the tree', () => {
@@ -1,5 +1,6 @@
 import 'mocha'
 import { expect } from 'chai'
+import { Base64Message } from '../Base64Message'
 import { makeTreeNode } from './makeTreeNode'

 describe('TreeNodeFactory', () => {
@@ -19,7 +20,7 @@ describe('TreeNodeFactory', () => {

    expect(node).to.not.eq(undefined)
    expect(node.sourceEdge.name).to.eq('bar')
-    expect(node.message.payload!.toUnicodeString()).to.eq('5')
+    expect(Base64Message.toUnicodeString(node.message.payload!)).to.eq('5')

    const foo = node.firstNode().findNode('foo')
    expect(foo && foo.sourceEdge && foo.sourceEdge.name).to.eq('foo')
@@ -33,7 +34,7 @@ describe('TreeNodeFactory', () => {
      return
    }

-    expect(node.message.payload!.toUnicodeString()).to.eq('5')
+    expect(Base64Message.toUnicodeString(node.message.payload!)).to.eq('5')
    expect(node.sourceEdge.name).to.eq('baz')

    const barNode = node.sourceEdge.source
@@ -46,12 +46,9 @@ export class ConnectionManager {
        buffer = buffer.slice(0, 20000)
      }

-      let decoded_payload = null
-      decoded_payload = Base64Message.fromBuffer(buffer)
-
      backendEvents.emit(messageEvent, {
        topic,
-        payload: decoded_payload,
+        payload: Base64Message.fromBuffer(buffer),
        qos: packet.qos,
        retain: packet.retain,
        messageId: packet.messageId,
@@ -0,0 +1,3 @@
+--require ts-node/register
+--require source-map-support/register
+--recursive ./src/**/*.spec.ts
@@ -1,15 +1,11 @@
 {
  "compileOnSave": true,
  "compilerOptions": {
-    "skipLibCheck": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "outDir": "./build",
    "strict": true,
-    "lib": [
-      "es2017",
-      "dom"
-    ],
+    "lib": ["es2017", "dom"],
    "sourceMap": true
  },
  "includes": [
@@ -22,4 +18,4 @@
    "**/*.d.ts",
    "typings"
  ]
-}
+}
@@ -2,96 +2,537 @@
 # yarn lockfile v1


-"@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@protobufjs/aspromise/-/aspromise-1.1.2.tgz#9b8b0cc663d669a7d8f6f5d0893a14d348f30fbf"
-  integrity sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==
+async-limiter@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
+  integrity sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==

-"@protobufjs/base64@^1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@protobufjs/base64/-/base64-1.1.2.tgz#4c85730e59b9a1f1f349047dbf24296034bb2735"
-  integrity sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==
+balanced-match@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+  integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=

-"@protobufjs/codegen@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@protobufjs/codegen/-/codegen-2.0.4.tgz#7ef37f0d010fb028ad1ad59722e506d9262815cb"
-  integrity sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==
+base64-js@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.0.tgz#cab1e6118f051095e58b5281aea8c1cd22bfc0e3"
+  integrity sha512-ccav/yGvoa80BQDljCxsmmQ3Xvx60/UpBIij5QN21W3wBi/hhIC9OoO+KLpu9IJTS9j4DRVJ3aDDF9cMSoa2lw==

-"@protobufjs/eventemitter@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz#355cbc98bafad5978f9ed095f397621f1d066b70"
-  integrity sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==
-
-"@protobufjs/fetch@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@protobufjs/fetch/-/fetch-1.1.0.tgz#ba99fb598614af65700c1619ff06d454b0d84c45"
-  integrity sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==
+bl@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-1.2.2.tgz#a160911717103c07410cef63ef51b397c025af9c"
+  integrity sha512-e8tQYnZodmebYDWGH7KMRvtzKXaJHx3BbilrgZCfvyLUYdKpK1t5PSPmpkny/SgiTSCnjfLW7v5rlONXVFkQEA==
  dependencies:
-    "@protobufjs/aspromise" "^1.1.1"
-    "@protobufjs/inquire" "^1.1.0"
+    readable-stream "^2.3.5"
+    safe-buffer "^5.1.1"

-"@protobufjs/float@^1.0.2":
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+buffer-from@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
+  integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
+
+callback-stream@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/callback-stream/-/callback-stream-1.1.0.tgz#4701a51266f06e06eaa71fc17233822d875f4908"
+  integrity sha1-RwGlEmbwbgbqpx/BcjOCLYdfSQg=
+  dependencies:
+    inherits "^2.0.1"
+    readable-stream "> 1.0.0 < 3.0.0"
+
+commist@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/commist/-/commist-1.1.0.tgz#17811ec6978f6c15ee4de80c45c9beb77cee35d5"
+  integrity sha512-rraC8NXWOEjhADbZe9QBNzLAN5Q3fsTPQtBV+fEVj6xKIgDgNiEVE6ZNfHpZOqfQ21YUzfVNUXLOEZquYvQPPg==
+  dependencies:
+    leven "^2.1.0"
+    minimist "^1.1.0"
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
+
+concat-stream@^1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
+  integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
+  dependencies:
+    buffer-from "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^2.2.2"
+    typedarray "^0.0.6"
+
+core-util-is@~1.0.0:
  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@protobufjs/float/-/float-1.0.2.tgz#5e9e1abdcb73fc0a7cb8b291df78c8cbd97b87d1"
-  integrity sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==
+  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
+  integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=

-"@protobufjs/inquire@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@protobufjs/inquire/-/inquire-1.1.0.tgz#ff200e3e7cf2429e2dcafc1140828e8cc638f089"
-  integrity sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==
-
-"@protobufjs/path@^1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@protobufjs/path/-/path-1.1.2.tgz#6cc2b20c5c9ad6ad0dccfd21ca7673d8d7fbf68d"
-  integrity sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==
-
-"@protobufjs/pool@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@protobufjs/pool/-/pool-1.1.0.tgz#09fd15f2d6d3abfa9b65bc366506d6ad7846ff54"
-  integrity sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==
-
-"@protobufjs/utf8@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
-  integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==
-
-"@types/long@^4.0.1":
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/@types/long/-/long-4.0.2.tgz#b74129719fc8d11c01868010082d483b7545591a"
-  integrity sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA==
-
-"@types/node@>=13.7.0":
-  version "20.12.2"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.12.2.tgz#9facdd11102f38b21b4ebedd9d7999663343d72e"
-  integrity sha512-zQ0NYO87hyN6Xrclcqp7f8ZbXNbRfoGWNcMvHTPQp9UUrwI0mI7XBz+cu7/W6/VClYo2g63B0cjull/srU7LgQ==
+d@1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a"
+  integrity sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==
  dependencies:
-    undici-types "~5.26.4"
+    es5-ext "^0.10.50"
+    type "^1.0.1"

-long@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/long/-/long-4.0.0.tgz#9a7b71cfb7d361a194ea555241c92f7468d5bf28"
-  integrity sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==
-
-protobufjs@^6.11.4:
-  version "6.11.4"
-  resolved "https://registry.yarnpkg.com/protobufjs/-/protobufjs-6.11.4.tgz#29a412c38bf70d89e537b6d02d904a6f448173aa"
-  integrity sha512-5kQWPaJHi1WoCpjTGszzQ32PG2F4+wRY6BmAT4Vfw56Q2FZ4YZzK20xUYQH4YkfehY1e6QSICrJquM6xXZNcrw==
+duplexify@^3.5.1, duplexify@^3.6.0:
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.7.1.tgz#2a4df5317f6ccfd91f86d6fd25d8d8a103b88309"
+  integrity sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==
  dependencies:
-    "@protobufjs/aspromise" "^1.1.2"
-    "@protobufjs/base64" "^1.1.2"
-    "@protobufjs/codegen" "^2.0.4"
-    "@protobufjs/eventemitter" "^1.1.0"
-    "@protobufjs/fetch" "^1.1.0"
-    "@protobufjs/float" "^1.0.2"
-    "@protobufjs/inquire" "^1.1.0"
-    "@protobufjs/path" "^1.1.2"
-    "@protobufjs/pool" "^1.1.0"
-    "@protobufjs/utf8" "^1.1.0"
-    "@types/long" "^4.0.1"
-    "@types/node" ">=13.7.0"
-    long "^4.0.0"
+    end-of-stream "^1.0.0"
+    inherits "^2.0.1"
+    readable-stream "^2.0.0"
+    stream-shift "^1.0.0"

-undici-types@~5.26.4:
-  version "5.26.5"
-  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
-  integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
+end-of-stream@^1.0.0, end-of-stream@^1.1.0, end-of-stream@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.1.tgz#ed29634d19baba463b6ce6b80a37213eab71ec43"
+  integrity sha512-1MkrZNvWTKCaigbn+W15elq2BB/L22nqrSY5DKlo3X6+vclJm8Bb5djXJBmEX6fS3+zCh/F4VBK5Z2KxJt4s2Q==
+  dependencies:
+    once "^1.4.0"
+
+es5-ext@^0.10.35, es5-ext@^0.10.50, es5-ext@~0.10.14:
+  version "0.10.50"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.50.tgz#6d0e23a0abdb27018e5ac4fd09b412bc5517a778"
+  integrity sha512-KMzZTPBkeQV/JcSQhI5/z6d9VWJ3EnQ194USTUwIYZ2ZbpN8+SGXQKt1h68EX44+qt+Fzr8DO17vnxrw7c3agw==
+  dependencies:
+    es6-iterator "~2.0.3"
+    es6-symbol "~3.1.1"
+    next-tick "^1.0.0"
+
+es6-iterator@~2.0.1, es6-iterator@~2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
+  integrity sha1-p96IkUGgWpSwhUQDstCg+/qY87c=
+  dependencies:
+    d "1"
+    es5-ext "^0.10.35"
+    es6-symbol "^3.1.1"
+
+es6-map@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/es6-map/-/es6-map-0.1.5.tgz#9136e0503dcc06a301690f0bb14ff4e364e949f0"
+  integrity sha1-kTbgUD3MBqMBaQ8LsU/042TpSfA=
+  dependencies:
+    d "1"
+    es5-ext "~0.10.14"
+    es6-iterator "~2.0.1"
+    es6-set "~0.1.5"
+    es6-symbol "~3.1.1"
+    event-emitter "~0.3.5"
+
+es6-set@~0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/es6-set/-/es6-set-0.1.5.tgz#d2b3ec5d4d800ced818db538d28974db0a73ccb1"
+  integrity sha1-0rPsXU2ADO2BjbU40ol02wpzzLE=
+  dependencies:
+    d "1"
+    es5-ext "~0.10.14"
+    es6-iterator "~2.0.1"
+    es6-symbol "3.1.1"
+    event-emitter "~0.3.5"
+
+es6-symbol@3.1.1, es6-symbol@^3.1.1, es6-symbol@~3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.1.tgz#bf00ef4fdab6ba1b46ecb7b629b4c7ed5715cc77"
+  integrity sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=
+  dependencies:
+    d "1"
+    es5-ext "~0.10.14"
+
+event-emitter@~0.3.5:
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.5.tgz#df8c69eef1647923c7157b9ce83840610b02cc39"
+  integrity sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=
+  dependencies:
+    d "1"
+    es5-ext "~0.10.14"
+
+extend@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
+
+glob-parent@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
+  integrity sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=
+  dependencies:
+    is-glob "^3.1.0"
+    path-dirname "^1.0.0"
+
+glob-stream@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/glob-stream/-/glob-stream-6.1.0.tgz#7045c99413b3eb94888d83ab46d0b404cc7bdde4"
+  integrity sha1-cEXJlBOz65SIjYOrRtC0BMx73eQ=
+  dependencies:
+    extend "^3.0.0"
+    glob "^7.1.1"
+    glob-parent "^3.1.0"
+    is-negated-glob "^1.0.0"
+    ordered-read-streams "^1.0.0"
+    pumpify "^1.3.5"
+    readable-stream "^2.1.5"
+    remove-trailing-separator "^1.0.1"
+    to-absolute-glob "^2.0.0"
+    unique-stream "^2.0.2"
+
+glob@^7.1.1:
+  version "7.1.4"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.4.tgz#aa608a2f6c577ad357e1ae5a5c26d9a8d1969255"
+  integrity sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+help-me@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/help-me/-/help-me-1.1.0.tgz#8f2d508d0600b4a456da2f086556e7e5c056a3c6"
+  integrity sha1-jy1QjQYAtKRW2i8IZVbn5cBWo8Y=
+  dependencies:
+    callback-stream "^1.0.2"
+    glob-stream "^6.1.0"
+    through2 "^2.0.1"
+    xtend "^4.0.0"
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
+
+is-absolute@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-absolute/-/is-absolute-1.0.0.tgz#395e1ae84b11f26ad1795e73c17378e48a301576"
+  integrity sha512-dOWoqflvcydARa360Gvv18DZ/gRuHKi2NU/wU5X1ZFzdYfH29nkiNZsF3mp4OJ3H4yo9Mx8A/uAGNzpzPN3yBA==
+  dependencies:
+    is-relative "^1.0.0"
+    is-windows "^1.0.1"
+
+is-extglob@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
+
+is-glob@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a"
+  integrity sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=
+  dependencies:
+    is-extglob "^2.1.0"
+
+is-negated-glob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-negated-glob/-/is-negated-glob-1.0.0.tgz#6910bca5da8c95e784b5751b976cf5a10fee36d2"
+  integrity sha1-aRC8pdqMleeEtXUbl2z1oQ/uNtI=
+
+is-relative@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-relative/-/is-relative-1.0.0.tgz#a1bb6935ce8c5dba1e8b9754b9b2dcc020e2260d"
+  integrity sha512-Kw/ReK0iqwKeu0MITLFuj0jbPAmEiOsIwyIXvvbfa6QfmN9pkD1M+8pdk7Rl/dTKbH34/XBFMbgD4iMJhLQbGA==
+  dependencies:
+    is-unc-path "^1.0.0"
+
+is-unc-path@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-unc-path/-/is-unc-path-1.0.0.tgz#d731e8898ed090a12c352ad2eaed5095ad322c9d"
+  integrity sha512-mrGpVd0fs7WWLfVsStvgF6iEJnbjDFZh9/emhRDcGWTduTfNHd9CHeUwH3gYIjdbwo4On6hunkztwOaAw0yllQ==
+  dependencies:
+    unc-path-regex "^0.1.2"
+
+is-windows@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
+  integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
+
+isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
+
+json-stable-stringify-without-jsonify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
+  integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
+
+leven@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/leven/-/leven-2.1.0.tgz#c2e7a9f772094dee9d34202ae8acce4687875580"
+  integrity sha1-wuep93IJTe6dNCAq6KzORoeHVYA=
+
+minimatch@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
+  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimist@^1.1.0, minimist@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
+  integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
+
+mqtt-packet@^6.0.0:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/mqtt-packet/-/mqtt-packet-6.1.2.tgz#239493d185c9209011a5a22ebce30e098c731f81"
+  integrity sha512-yVG5PoS3wJ8TLzfS8pQMsDVLAf/EipnBAG5XQE9X/9L0EMxuduI9J2WnlRvJT497K1CUT4VJWjoP08+CKiKt1Q==
+  dependencies:
+    bl "^1.2.2"
+    inherits "^2.0.3"
+    process-nextick-args "^2.0.0"
+    safe-buffer "^5.1.2"
+
+mqtt@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/mqtt/-/mqtt-3.0.0.tgz#7961e5f61efba3eec37d5aa9c4cbcdeb6f841380"
+  integrity sha512-0nKV6MAc1ibKZwaZQUTb3iIdT4NVpj541BsYrqrGBcQdQ7Jd0MnZD1/6/nj1UFdGTboK9ZEUXvkCu2nPCugHFA==
+  dependencies:
+    base64-js "^1.3.0"
+    commist "^1.0.0"
+    concat-stream "^1.6.2"
+    end-of-stream "^1.4.1"
+    es6-map "^0.1.5"
+    help-me "^1.0.1"
+    inherits "^2.0.3"
+    minimist "^1.2.0"
+    mqtt-packet "^6.0.0"
+    pump "^3.0.0"
+    readable-stream "^2.3.6"
+    reinterval "^1.1.0"
+    split2 "^3.1.0"
+    websocket-stream "^5.1.2"
+    xtend "^4.0.1"
+
+next-tick@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
+  integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
+
+once@^1.3.0, once@^1.3.1, once@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
+  dependencies:
+    wrappy "1"
+
+ordered-read-streams@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/ordered-read-streams/-/ordered-read-streams-1.0.1.tgz#77c0cb37c41525d64166d990ffad7ec6a0e1363e"
+  integrity sha1-d8DLN8QVJdZBZtmQ/61+xqDhNj4=
+  dependencies:
+    readable-stream "^2.0.1"
+
+path-dirname@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
+  integrity sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
+
+process-nextick-args@^2.0.0, process-nextick-args@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
+  integrity sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==
+
+pump@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.1.tgz#12399add6e4cf7526d973cbc8b5ce2e2908b3909"
+  integrity sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+pump@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
+  integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+pumpify@^1.3.5:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.5.1.tgz#36513be246ab27570b1a374a5ce278bfd74370ce"
+  integrity sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==
+  dependencies:
+    duplexify "^3.6.0"
+    inherits "^2.0.3"
+    pump "^2.0.0"
+
+"readable-stream@> 1.0.0 < 3.0.0", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.5, readable-stream@^2.3.6, readable-stream@~2.3.6:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
+  integrity sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~2.0.0"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.1.1"
+    util-deprecate "~1.0.1"
+
+readable-stream@^3.0.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.4.0.tgz#a51c26754658e0a3c21dbf59163bd45ba6f447fc"
+  integrity sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
+reinterval@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/reinterval/-/reinterval-1.1.0.tgz#3361ecfa3ca6c18283380dd0bb9546f390f5ece7"
+  integrity sha1-M2Hs+jymwYKDOA3Qu5VG85D17Oc=
+
+remove-trailing-separator@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
+  integrity sha1-wkvOKig62tW8P1jg1IJJuSN52O8=
+
+safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
+
+split2@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/split2/-/split2-3.1.1.tgz#c51f18f3e06a8c4469aaab487687d8d956160bb6"
+  integrity sha512-emNzr1s7ruq4N+1993yht631/JH+jaj0NYBosuKmLcq+JkGQ9MmTw1RB1fGaTCzUuseRIClrlSLHRNYGwWQ58Q==
+  dependencies:
+    readable-stream "^3.0.0"
+
+stream-shift@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
+  integrity sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=
+
+string_decoder@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.2.0.tgz#fe86e738b19544afe70469243b2a1ee9240eae8d"
+  integrity sha512-6YqyX6ZWEYguAxgZzHGL7SsCeGx3V2TtOTqZz1xSTSWnqsbWwbptafNyvf/ACquZUXV3DANr5BDIwNYe1mN42w==
+  dependencies:
+    safe-buffer "~5.1.0"
+
+string_decoder@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
+  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
+  dependencies:
+    safe-buffer "~5.1.0"
+
+through2-filter@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/through2-filter/-/through2-filter-3.0.0.tgz#700e786df2367c2c88cd8aa5be4cf9c1e7831254"
+  integrity sha512-jaRjI2WxN3W1V8/FMZ9HKIBXixtiqs3SQSX4/YGIiP3gL6djW48VoZq9tDqeCWs3MT8YY5wb/zli8VW8snY1CA==
+  dependencies:
+    through2 "~2.0.0"
+    xtend "~4.0.0"
+
+through2@^2.0.1, through2@~2.0.0:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
+  integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
+  dependencies:
+    readable-stream "~2.3.6"
+    xtend "~4.0.1"
+
+to-absolute-glob@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/to-absolute-glob/-/to-absolute-glob-2.0.2.tgz#1865f43d9e74b0822db9f145b78cff7d0f7c849b"
+  integrity sha1-GGX0PZ50sIItufFFt4z/fQ98hJs=
+  dependencies:
+    is-absolute "^1.0.0"
+    is-negated-glob "^1.0.0"
+
+type@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/type/-/type-1.0.1.tgz#084c9a17fcc9151a2cdb1459905c2e45e4bb7d61"
+  integrity sha512-MAM5dBMJCJNKs9E7JXo4CXRAansRfG0nlJxW7Wf6GZzSOvH31zClSaHdIMWLehe/EGMBkqeC55rrkaOr5Oo7Nw==
+
+typedarray@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+  integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
+
+ultron@~1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.1.tgz#9fe1536a10a664a65266a1e3ccf85fd36302bc9c"
+  integrity sha512-UIEXBNeYmKptWH6z8ZnqTeS8fV74zG0/eRU9VGkpzz+LIJNs8W/zM/L+7ctCkRrgbNnnR0xxw4bKOr0cW0N0Og==
+
+unc-path-regex@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/unc-path-regex/-/unc-path-regex-0.1.2.tgz#e73dd3d7b0d7c5ed86fbac6b0ae7d8c6a69d50fa"
+  integrity sha1-5z3T17DXxe2G+6xrCufYxqadUPo=
+
+unique-stream@^2.0.2:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/unique-stream/-/unique-stream-2.3.1.tgz#c65d110e9a4adf9a6c5948b28053d9a8d04cbeac"
+  integrity sha512-2nY4TnBE70yoxHkDli7DMazpWiP7xMdCYqU2nBRO0UB+ZpEkGsSija7MvmvnZFUeC+mrgiUfcHSr3LmRFIg4+A==
+  dependencies:
+    json-stable-stringify-without-jsonify "^1.0.1"
+    through2-filter "^3.0.0"
+
+util-deprecate@^1.0.1, util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+  integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
+
+websocket-stream@^5.1.2:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/websocket-stream/-/websocket-stream-5.5.0.tgz#9827f2846fc0d2b4dca7aab8f92980b2548b868e"
+  integrity sha512-EXy/zXb9kNHI07TIMz1oIUIrPZxQRA8aeJ5XYg5ihV8K4kD1DuA+FY6R96HfdIHzlSzS8HiISAfrm+vVQkZBug==
+  dependencies:
+    duplexify "^3.5.1"
+    inherits "^2.0.1"
+    readable-stream "^2.3.3"
+    safe-buffer "^5.1.2"
+    ws "^3.2.0"
+    xtend "^4.0.0"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
+
+ws@^3.2.0:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-3.3.3.tgz#f1cf84fe2d5e901ebce94efaece785f187a228f2"
+  integrity sha512-nnWLa/NwZSt4KQJu51MYlCcSQ5g7INpOrOMt4XV8j4dqTXdmlUmSHQ8/oLC069ckre0fRsgfvsKwbTdtKLCDkA==
+  dependencies:
+    async-limiter "~1.0.0"
+    safe-buffer "~5.1.0"
+    ultron "~1.1.0"
+
+xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.0, xtend@~4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
+  integrity sha1-pcbVMr5lbiPbgg77lDofBJmNY68=
@@ -1,7 +1,7 @@
-FROM node:20
+FROM node:11-stretch

 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
+  && apt-get install -y --no-install-recommends nano ffmpeg xvfb git-core tmux locales mosquitto x11vnc
 RUN apt-get install -yq --no-install-recommends libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 libnss3

 # Generate locales for TMUX
@@ -12,5 +12,6 @@ ENV LC_ALL en_US.UTF-8

 CMD /bin/bash

+COPY cloneBuildAndTest.sh ./
 VOLUME /app
 EXPOSE 5900
@@ -1,7 +1,11 @@
 #!/bin/bash
 set -e

-yarn install --frozen-lockfile
+git clone https://github.com/thomasnordquist/MQTT-Explorer.git /app
+cd /app
+git checkout travis-ui-tests
+
+yarn
 yarn build

 yarn ui-test
@@ -1,8 +1,21 @@
-import { IpcMain } from 'electron'
-import { Event } from '../Events'
-import { EventBusInterface } from './EventBusInterface'
+import { IpcMain, ipcMain, ipcRenderer } from 'electron'

-export class IpcMainEventBus implements EventBusInterface {
+import { Event } from './Events'
+import { IpcRendererEventBus } from './IpcRendererEventBus'
+
+export interface EventBusInterface {
+  subscribe<MessageType>(event: Event<MessageType>, callback: (msg: MessageType) => void): void
+  unsubscribeAll<MessageType>(event: Event<MessageType>): void
+  emit<MessageType>(event: Event<MessageType>, msg: MessageType): void
+  unsubscribe<MessageType>(event: Event<MessageType>, callback: any): void
+}
+
+export interface CallbackStore {
+  wrappedCallback: any
+  callback: any
+}
+
+class IpcMainEventBus implements EventBusInterface {
  private ipc: IpcMain
  private client: any
  constructor(ipc: IpcMain) {
@@ -32,3 +45,6 @@ export class IpcMainEventBus implements EventBusInterface {
    }
  }
 }
+
+export const rendererEvents = new IpcRendererEventBus(ipcRenderer)
+export const backendEvents = new IpcMainEventBus(ipcMain)
@@ -1,4 +0,0 @@
-export interface CallbackStore {
-  wrappedCallback: any
-  callback: any
-}
@@ -1,12 +0,0 @@
-import { ipcMain, ipcRenderer } from 'electron'
-
-import { IpcMainEventBus } from './IpcMainEventBus'
-import { IpcRendererEventBus } from './IpcRendererEventBus'
-import { Rpc } from './Rpc'
-
-export const rendererEvents = new IpcRendererEventBus(ipcRenderer)
-export const backendEvents = new IpcMainEventBus(ipcMain)
-
-// Preferred way to communicate typesafe
-export const rendererRpc = new Rpc(rendererEvents)
-export const backendRpc = new Rpc(backendEvents)
@@ -1,8 +0,0 @@
-import { Event } from '../Events'
-
-export interface EventBusInterface {
-  subscribe<MessageType>(event: Event<MessageType>, callback: (msg: MessageType) => void): void
-  unsubscribeAll<MessageType>(event: Event<MessageType>): void
-  emit<MessageType>(event: Event<MessageType>, msg: MessageType): void
-  unsubscribe<MessageType>(event: Event<MessageType>, callback: any): void
-}
@@ -1,62 +0,0 @@
-import { Event } from '../Events'
-import { EventBusInterface } from './EventBusInterface'
-import { v4 } from 'uuid'
-
-export type RpcEvent<RequestType, ResponseType> = {
-  topic: string
-}
-
-export class Rpc {
-  constructor(private participant: EventBusInterface) {}
-
-  // tslint:disable-next-line:member-access
-  async call<RpcRequest, RpcResponse>(
-    event: RpcEvent<RpcRequest, RpcResponse>,
-    request: RpcRequest,
-    timeout: number = 0
-  ): Promise<RpcResponse> {
-    return new Promise((resolve, reject) => {
-      const id = v4()
-
-      const responseEvent: Event<any> = { topic: `${event.topic}/response/${id}` }
-      const requestEvent: Event<any> = { topic: `${event.topic}/request` }
-      const callback = (result: { id: string; payload: RpcResponse; error: unknown }) => {
-        this.participant.unsubscribe(responseEvent as any, callback)
-        if (result.error) {
-          reject(result.error)
-        } else {
-          resolve(result.payload)
-        }
-        console.log('received', result)
-      }
-      this.participant.subscribe(responseEvent, callback)
-      this.participant.emit(requestEvent, { id, payload: request })
-
-      if (timeout > 0) {
-        setTimeout(() => {
-          reject(new Error(`Did not respond to ${event.topic} within ${timeout}ms`))
-          this.participant.unsubscribe(responseEvent as any, callback)
-        }, 10000)
-      }
-    })
-  }
-
-  // tslint:disable-next-line:member-access
-  async on<RpcRequest, RpcResponse>(
-    event: RpcEvent<RpcRequest, RpcResponse>,
-    handler: (request: RpcRequest) => Promise<RpcResponse>
-  ) {
-    this.participant.subscribe<RpcRequest>({ topic: `${event.topic}/request` }, async request => {
-      let payload
-      let error
-      try {
-        payload = await handler((request as any).payload)
-      } catch (e) {
-        error = e
-      }
-      const id = (request as any).id
-      console.log(`${event.topic}/response/${id}`, payload, error)
-      this.participant.emit({ topic: `${event.topic}/response/${id}` }, { id, payload, error })
-    })
-  }
-}
@@ -1,9 +1,8 @@
-import { Base64MessageDTO } from '../backend/src/Model/Base64Message'
+import { Base64Message } from '../backend/src/Model/Base64Message'
 import { DataSourceState, MqttOptions } from '../backend/src/DataSource'
 import { UpdateInfo } from 'builder-util-runtime'
-import { RpcEvent } from './EventSystem/Rpc'

-export type Event<MessageType> = {
+export interface Event<MessageType> {
  topic: string
 }

@@ -32,7 +31,7 @@ export const updateAvailable: Event<UpdateInfo> = {

 export interface MqttMessage {
  topic: string
-  payload: Base64MessageDTO | null
+  payload: Base64Message | null
  qos: 0 | 1 | 2
  retain: boolean
  // Set if QoS is > 0 on received messages
@@ -50,15 +49,3 @@ export function makeConnectionMessageEvent(connectionId: string): Event<MqttMess
    topic: `conn/${connectionId}`,
  }
 }
-
-export const getAppVersion: RpcEvent<void, string> = {
-  topic: 'getAppVersion',
-}
-
-export const writeToFile: RpcEvent<{ filePath: string, data: string, encoding?: string }, void> = {
-  topic: 'writeFile',
-}
-
-export const readFromFile: RpcEvent<{ filePath: string, encoding?: string }, Buffer> = {
-  topic: 'readFromFile',
-}
@@ -1,32 +1,26 @@
-import { CallbackStore } from './CallbackStore'
-import { EventBusInterface } from './EventBusInterface'
-import { Event } from '../Events'
+import { CallbackStore, EventBusInterface } from './EventBus'
+import { Event } from './Events'
 import { IpcRenderer } from 'electron'

 export class IpcRendererEventBus implements EventBusInterface {
  private ipc: IpcRenderer
  private callbacks: Array<CallbackStore> = []
-
  constructor(ipc: IpcRenderer) {
    this.ipc = ipc
  }
-
  public subscribe<MessageType>(event: Event<MessageType>, callback: (msg: MessageType) => void) {
    const wrappedCallback = (_: any, arg: any) => {
      callback(arg)
    }
-    console.log('subscribing', event.topic)
    this.ipc.on(event.topic, wrappedCallback)
    this.callbacks.push({
      callback,
      wrappedCallback,
    })
  }
-
  public unsubscribeAll<MessageType>(event: Event<MessageType>) {
    this.ipc.removeAllListeners(event.topic)
  }
-
  public unsubscribe<MessageType>(event: Event<MessageType>, callback: any) {
    const item = this.callbacks.find(store => store.callback === callback)
    if (!item) {
@@ -35,7 +29,6 @@ export class IpcRendererEventBus implements EventBusInterface {
    this.ipc.removeListener(event.topic, item.wrappedCallback)
    this.callbacks = this.callbacks.filter(a => a !== item)
  }
-
  public emit<MessageType>(event: Event<MessageType>, msg: MessageType) {
    this.ipc.send(event.topic, msg)
  }
@@ -1,14 +0,0 @@
-import { OpenDialogOptions, OpenDialogReturnValue, SaveDialogOptions, SaveDialogReturnValue } from 'electron'
-import { RpcEvent } from './EventSystem/Rpc'
-
-export function makeOpenDialogRpc(): RpcEvent<OpenDialogOptions, OpenDialogReturnValue> {
-  return {
-    topic: 'openDialog',
-  }
-}
-
-export function makeSaveDialogRpc(): RpcEvent<SaveDialogOptions, SaveDialogReturnValue> {
-  return {
-    topic: 'saveDialog',
-  }
-}
--- a/Show More
+++ b/Show More