chore: coerce ui-test to end

Feat/use tahu for sparkplug decoding

.cspell.json

@@ -1,4 +1,11 @@
 {
+  "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",
@@ -8,15 +15,13 @@
     "nowrap",
     "subheader",
     "basepath",
-    "webdriverio",
     "repo",
     "hexagonalize",
     "pixelize",
     "Transistions",
-    "squashfs",
-    "squashfs",
     "provisionprofile",
     "Nsis",
+    "webdriverio",
     "Appx",
     "Hashable",
     "clickaway",
@@ -26,8 +31,6 @@
     "Monokai",
     "plottable",
     "snackbar",
-    "webdriverio",
-    "prismjs",
     "Nordquist",
     "debounced",
     "mosquitto",
@@ -47,6 +50,9 @@
     "mixins",
     "Explorerdmg",
     "heapsnapshot",
-    "noconflict"
+    "noconflict",
+    "sparkplugb",
+    "protojson",
+    "typesafe"
   ]
-}
+}

.github/CODEOWNERS

@@ -0,0 +1,3 @@
+package.ts @thomasnordquist
+.github @thomasnordquist
+scripts @thomasnordquist

.github/workflows/build-dockerfile.yml

@@ -0,0 +1,29 @@
+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

.github/workflows/platform-builds.yml

@@ -0,0 +1,53 @@
+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 }}
+  

.github/workflows/tests.yml

@@ -0,0 +1,38 @@
+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 '![test](${{ steps.upload.outputs.file-url }})' >> $GITHUB_STEP_SUMMARY

.github/workflows/update-website.yml

@@ -0,0 +1,17 @@
+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

.releaserc

@@ -0,0 +1,30 @@
+{
+  "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"
+        ]
+      }
+    ]
+  ]
+}

.travis.yml

@@ -1,46 +0,0 @@
-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

Dockerfile

@@ -1,7 +1,7 @@
-FROM node:11-stretch
+FROM node:20
 
 RUN DEBIAN_FRONTEND="noninteractive" apt-get update \
-  && apt-get install -y --no-install-recommends nano ffmpeg xvfb git-core tmux locales mosquitto x11vnc
+  && apt-get install -y --no-install-recommends ca-certificates 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,6 +12,5 @@ ENV LC_ALL en_US.UTF-8
 
 CMD /bin/bash
 
-COPY cloneBuildAndTest.sh ./
 VOLUME /app
 EXPOSE 5900

Readme.md

@@ -6,11 +6,12 @@
 [![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.
 
@@ -29,6 +30,7 @@ yarn start
 ## Develop
 
 Launch Application
+
 ```bash
 npm install -g yarn
 yarn
@@ -63,12 +65,20 @@ 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 https://github.com/thomasnordquist/MQTT-Explorer.git mqtt-explorer-pages
+git clone --single-branch -b gh-pages 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
 ```

app/index.html

@@ -1,181 +1,197 @@
 <!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>
 
-    <style>
-      body,
-      html {
-        margin: 0;
-        padding: 0;
+<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;
       }
 
-      [tabindex] {
-        outline: none;
+      25% {
+        background-color: #595585;
       }
 
-      @keyframes updateDark {
-        0% {
-          background-color: none;
-        }
-        25% {
-          background-color: #595585;
-        }
-        50% {
-          background-color: #595585;
-        }
-        100% {
-          background-color: none;
-        }
+      50% {
+        background-color: #595585;
       }
 
-      @keyframes updateLight {
-        0% {
-          background-color: none;
-          color: inherit;
-        }
-        25% {
-          background-color: #c0c8c0;
-        }
-        50% {
-          background-color: #c0c8c0;
-        }
-        100% {
-          background-color: none;
-          color: inherit;
-        }
+      100% {
+        background-color: none;
+      }
+    }
+
+    @keyframes updateLight {
+      0% {
+        background-color: none;
+        color: inherit;
       }
 
-      ::-webkit-scrollbar {
-        width: 8px;
-        height: 8px;
+      25% {
+        background-color: #c0c8c0;
       }
 
-      ::-webkit-scrollbar-corner {
-        background-color: rgba(0, 0, 0, 0);
+      50% {
+        background-color: #c0c8c0;
       }
 
-      ::-webkit-scrollbar-track {
-        -webkit-box-shadow: inset 0 0 6px rgba(60, 60, 60, 0.5);
-        background-color: rgba(140, 140, 140, 0.1);
+      100% {
+        background-color: none;
+        color: inherit;
       }
+    }
 
-      ::-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 {
+      width: 8px;
+      height: 8px;
+    }
 
-      .Resizer:hover {
-        -webkit-transition: all 0.3s ease-out;
-        transition: all 0.3s ease-out;
-      }
+    ::-webkit-scrollbar-corner {
+      background-color: rgba(0, 0, 0, 0);
+    }
 
-      .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-track {
+      -webkit-box-shadow: inset 0 0 6px rgba(60, 60, 60, 0.5);
+      background-color: rgba(140, 140, 140, 0.1);
+    }
 
-      .Resizer.horizontal::before {
-        content: '•••';
-        display: inline-block;
-        vertical-align: middle;
-        text-align: center;
-        width: 100%;
-        margin-top: -22px;
-        color: #aaa;
-        opacity: 1;
-      }
+    ::-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:hover {
-        border-top: 5px solid rgba(120, 120, 120, 0.3);
-        border-bottom: 5px solid rgba(120, 120, 120, 0.3);
-      }
+    .Resizer:hover {
+      -webkit-transition: all 0.3s ease-out;
+      transition: all 0.3s ease-out;
+    }
 
-      .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 {
+      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::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::before {
+      content: '•••';
+      display: inline-block;
+      vertical-align: middle;
+      text-align: center;
+      width: 100%;
+      margin-top: -22px;
+      color: #aaa;
+      opacity: 1;
+    }
 
-      .Resizer.vertical:hover {
-        border-left: 0px solid rgba(130, 130, 130, 0.3);
-        border-right: 8px solid rgba(140, 140, 140, 0.3);
-      }
+    .Resizer.horizontal:hover {
+      border-top: 5px solid rgba(120, 120, 120, 0.3);
+      border-bottom: 5px solid rgba(120, 120, 120, 0.3);
+    }
 
-      .Resizer.disabled {
-        cursor: not-allowed;
-      }
-      .Resizer.disabled:hover {
-        border-color: transparent;
-      }
+    .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;
+    }
 
-      .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::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;
+    }
 
-      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) { %>
+    .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) { %>
     <script src="<%- file %>"></script>
     <% }); %>
-  </body>
-</html>
+</body>
+
+</html>

app/package.json

@@ -4,30 +4,30 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "yarn rebuild && webpack --mode production",
+    "build": "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 src/**/*.spec.ts"
+    "mochatest": "mocha --require ts-node/register --require source-map-support/register --recursive src/*/**/*.spec.ts"
+  },
+  "engines": {
+    "node": ">=18"
   },
   "author": "",
   "license": "CC-BY-ND-4.0",
   "dependencies": {
-    "@material-ui/core": "^4",
+    "@material-ui/core": "4.12",
     "@material-ui/icons": "^4",
     "@material-ui/lab": "^4.0.0-alpha",
-    "@material-ui/styles": "^4",
+    "@material-ui/styles": "4.11",
     "@types/react-transition-group": "^4",
     "ace-builds": "^1.4.11",
-    "axios": "^0.19.0",
+    "axios": "^0.28.0",
     "compare-versions": "^3.5.0",
     "copy-text-to-clipboard": "^2.1.0",
     "d3": "^5.9.7",
     "d3-shape": "^1.3.5",
     "diff": "^4.0.1",
     "dot-prop": "^5.0.0",
-    "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,7 +35,6 @@
     "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",
@@ -48,6 +47,7 @@
     "react-split-pane": "^0.1.85",
     "react-transition-group": "^4",
     "react-vis": "^1.11.6",
+    "react-window": "^1.8.10",
     "redux": "^4.0.1",
     "redux-batched-actions": "0.5",
     "redux-thunk": "^2.3.0",
@@ -56,6 +56,7 @@
     "uuid": "7"
   },
   "devDependencies": {
+    "@babel/runtime": "^7.17.2",
     "@types/d3": "^5.7.2",
     "@types/diff": "^4.0.1",
     "@types/get-value": "^3.0.1",
@@ -65,28 +66,31 @@
     "@types/react-dom": "^16.0.11",
     "@types/react-redux": "^7.0.9",
     "@types/react-resize-detector": "^4.0.1",
+    "@types/react-virtualized": "^9.21.30",
+    "@types/react-window": "^1.8.8",
     "@types/sha1": "^1.1.1",
     "@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",
-    "hard-source-webpack-plugin": "^0.13.1",
-    "heapdump": "^0.3.12",
-    "html-webpack-plugin": "^4.0.0-beta.5",
-    "mocha": "^7.1.1",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.5.0",
+    "lodash": "^4.17.21",
+    "mocha": "^10.4.0",
+    "moment": "^2.29.1",
     "node-loader": "^0.6.0",
     "source-map-loader": "^0.2.4",
     "style-loader": "^1",
-    "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"
+    "ts-loader": "^9.2.6",
+    "typescript": "^4.5.5",
+    "webpack": "^5.91.0",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4"
   },
   "peerDependencies": {
-    "electron": "^5.0.5"
+    "electron": "^29"
   }
 }

app/src/actions/Charts.ts

@@ -60,63 +60,55 @@ 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
+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'))
   }
 
-  dispatch({
-    type: ActionTypes.CHARTS_ADD,
-    chart: chartParameters,
-  })
-  dispatch(saveCharts())
-  dispatch(showNotification('Added to chart panel'))
-}
+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 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 removeChart =
+  (chartParameters: ChartParameters) => async (dispatch: Dispatch<any>, getState: () => AppState) => {
+    dispatch({
+      chart: chartParameters,
+      type: ActionTypes.CHARTS_REMOVE,
+    })
+    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 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 {

app/src/actions/Connection.ts

@@ -11,31 +11,29 @@ 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!))
+    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())
       }
-    } else if (dataSourceState.error) {
-      dispatch(showError(dataSourceState.error))
-      dispatch(disconnect())
-    }
-    dispatch(updateHealth(dataSourceState))
-  })
-}
+      dispatch(updateHealth(dataSourceState))
+    })
+  }
 
 const updateHealth = (dataSourceState: DataSourceState) => (dispatch: Dispatch<any>, getState: () => AppState) => {
   let state

app/src/actions/ConnectionManager.ts

@@ -9,12 +9,13 @@ 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 } from '../../../events'
+import { makeOpenDialogRpc } from '../../../events/OpenDialogRequest'
 
 export interface ConnectionDictionary {
   [s: string]: ConnectionOptions
@@ -50,21 +51,19 @@ 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 = {
@@ -72,7 +71,7 @@ async function openCertificate(): Promise<CertificateParameters> {
     certificateSizeDoesNotMatch: 'Certificate size larger/smaller then expected.',
   }
 
-  const openDialogReturnValue = await remote.dialog.showOpenDialog(remote.getCurrentWindow(), {
+  const openDialogReturnValue = await rendererRpc.call(makeOpenDialogRpc(), {
     properties: ['openFile'],
     securityScopedBookmarks: true,
   })
@@ -83,7 +82,7 @@ async function openCertificate(): Promise<CertificateParameters> {
   }
 
   const data = await fsPromise.readFile(selectedFile)
-  if (data.length > 16_384 || data.length < 128) {
+  if (data.length > 16_384 || data.length < 64) {
     throw rejectReasons.certificateSizeDoesNotMatch
   }
 

app/src/actions/Global.ts

@@ -1,7 +1,7 @@
 import { ActionTypes, ConfirmationRequest } from '../reducers/Global'
 import { Dispatch } from 'redux'
 
-export const showError = (error?: string) => ({
+export const showError = (error?: string | unknown) => ({
   error,
   type: ActionTypes.showError,
 })

app/src/actions/Publish.ts

@@ -2,7 +2,7 @@ import { Action, ActionTypes } from '../reducers/Publish'
 import { AppState } from '../reducers'
 import { Base64Message } from '../../../backend/src/Model/Base64Message'
 import { Dispatch } from 'redux'
-import { makePublishEvent, rendererEvents } from '../../../events'
+import { MqttMessage, makePublishEvent, rendererEvents } from '../../../events'
 
 export const setTopic = (topic?: string): Action => {
   return {
@@ -41,7 +41,7 @@ export const publish = (connectionId: string) => (dispatch: Dispatch<Action>, ge
   }
 
   const publishEvent = makePublishEvent(connectionId)
-  const mqttMessage = {
+  const mqttMessage: Partial<MqttMessage> = {
     topic,
     payload: state.publish.payload ? Base64Message.fromString(state.publish.payload) : null,
     retain: state.publish.retain,

app/src/actions/Settings.ts

@@ -1,5 +1,5 @@
 import * as q from '../../../backend/src/Model'
-import { ActionTypes, SettingsStateModel, TopicOrder } from '../reducers/Settings'
+import { ActionTypes, SettingsStateModel, TopicOrder, ValueRendererDisplayMode } from '../reducers/Settings'
 import { AppState } from '../reducers'
 import { autoExpandLimitSet } from '../components/SettingsDrawer/Settings'
 import { Base64Message } from '../../../backend/src/Model/Base64Message'
@@ -43,12 +43,14 @@ 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({
@@ -66,13 +68,14 @@ export const selectTopicWithMouseOver = (doSelect: boolean) => (dispatch: Dispat
   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 setValueDisplayMode =
+  (valueRendererDisplayMode: ValueRendererDisplayMode) => (dispatch: Dispatch<any>) => {
+    dispatch({
+      valueRendererDisplayMode,
+      type: ActionTypes.SETTINGS_SET_VALUE_RENDERER_DISPLAY_MODE,
+    })
+    dispatch(storeSettings())
+  }
 
 export const toggleHighlightTopicUpdates = () => (dispatch: Dispatch<any>) => {
   dispatch({
@@ -81,13 +84,15 @@ 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
@@ -113,7 +118,7 @@ export const filterTopics = (filterStr: string) => (dispatch: Dispatch<any>, get
     const messageMatches =
       node.message &&
       node.message.payload &&
-      Base64Message.toUnicodeString(node.message.payload).toLowerCase().indexOf(filterStr) !== -1
+      node.message.payload.toUnicodeString().toLowerCase().indexOf(filterStr) !== -1
 
     return Boolean(messageMatches)
   }

app/src/actions/Tree.ts

@@ -12,12 +12,10 @@ 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) => {
@@ -35,13 +33,8 @@ const debouncedSelectTopic = debounce(
       setTopicDispatch = setTopic(topic.path())
     }
 
-    if (previouslySelectedTopic && previouslySelectedTopic.viewModel) {
-      previouslySelectedTopic.viewModel.setSelected(false)
-    }
-
-    if (topic.viewModel) {
-      topic.viewModel.setSelected(true)
-    }
+    previouslySelectedTopic?.viewModel?.setSelected(false)
+    topic.viewModel?.setSelected(true)
 
     const selectTreeTopicDispatch = {
       selectedTopic: topic,
@@ -74,25 +67,26 @@ 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')

app/src/actions/clearTopic.ts

@@ -5,52 +5,50 @@ 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) {
+      if (!confirmed) {
+        return
+      }
+    }
+
+    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)
+      })
   }
-
-  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)
-    })
-}

app/src/actions/visibleTreeTraversal.ts

@@ -6,53 +6,56 @@ 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))
+    if (!selected || !tree) {
+      if (tree) {
+        dispatch(selectTopic(tree))
+      }
+      return
+    }
+    const nextTreeNode = nextVisibleElementInTree(state.settings, tree, selected, direction)
+    if (nextTreeNode && nextTreeNode.viewModel) {
+      dispatch(selectTopic(nextTreeNode))
     }
-    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
   }
 
-  if (!selected.viewModel.isExpanded() && selected.edgeCount() > 0) {
-    selected.viewModel.setExpanded(true, true)
-  } else {
-    dispatch(moveSelectionUpOrDownwards('next'))
-  }
-}
+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 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(true, true)
+    } else {
+      dispatch(moveSelectionUpOrDownwards('next'))
+    }
   }
 
-  if (selected.viewModel.isExpanded() && selected.edgeCount() > 0) {
-    selected.viewModel.setExpanded(false, true)
-  } else {
-    dispatch(moveSelectionUpOrDownwards('previous'))
+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'))
+    }
   }
-}
 
 function isTreeNodeVisible(treeNode: q.TreeNode<any>) {
   return Boolean(treeNode.viewModel)

app/src/components/App.tsx

@@ -12,6 +12,7 @@ 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'))
@@ -66,6 +67,8 @@ class App extends React.PureComponent<Props, {}> {
       return null
     }
 
+    const anyProps: any = {}
+
     return (
       <div className={centerContent}>
         <CssBaseline />
@@ -73,7 +76,7 @@ class App extends React.PureComponent<Props, {}> {
           <ConfirmationDialog confirmationRequests={this.props.confirmationRequests} />
           {this.renderNotification()}
           <React.Suspense fallback={<div></div>}>
-            <Settings />
+            <Settings {...anyProps} />
           </React.Suspense>
           <div className={centerContent}>
             <div className={`${settingsVisible ? contentShift : content}`}>

app/src/components/ChartPanel/TopicChart.tsx

@@ -114,6 +114,7 @@ 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}

app/src/components/ConnectionSetup/CertificateFileSelection.tsx

@@ -1,7 +1,5 @@
 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'

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

@@ -1,26 +1,40 @@
-import React from 'react'
+import React, { useCallback } 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 { connectionManagerActions } from '../../../actions'
+import { connectionActions, connectionManagerActions } from '../../../actions'
 
 export interface Props {
   connection: ConnectionOptions
-  actions: any
+  actions: {
+    connection: any
+    connectionManager: 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.selectConnection(props.connection.id)}
+      onClick={() => props.actions.connectionManager.selectConnection(props.connection.id)}
+      onDoubleClick={() => {
+        props.actions.connectionManager.selectConnection(props.connection.id)
+        connect()
+      }}
     >
       <Typography className={props.classes.name}>{props.connection.name || 'mqtt broker'}</Typography>
       <Typography className={props.classes.details}>{connection && connection.url}</Typography>
@@ -30,10 +44,12 @@ const ConnectionItem = (props: Props) => {
 
 export const mapDispatchToProps = (dispatch: any) => {
   return {
-    actions: bindActionCreators(connectionManagerActions, dispatch),
+    actions: {
+      connection: bindActionCreators(connectionActions, dispatch),
+      connectionManager: bindActionCreators(connectionManagerActions, dispatch),
+    },
   }
 }
-
 export const connectionItemStyle = (theme: Theme) => ({
   name: {
     width: '100%',

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

@@ -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, ListSubheader } from '@material-ui/core'
+import { List } from '@material-ui/core'
 import { Theme, withStyles } from '@material-ui/core/styles'
 import { useGlobalKeyEventHandler } from '../../../effects/useGlobalKeyEventHandler'
 

app/src/components/Demo/Mouse.tsx

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

app/src/components/Demo/index.tsx

@@ -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`)

app/src/components/ErrorBoundary.tsx

@@ -2,7 +2,6 @@ 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'
 
@@ -33,7 +32,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)
   }
 

app/src/components/SettingsDrawer/BrokerStatistics.tsx

@@ -123,7 +123,7 @@ function renderStat(tree: q.Tree<TopicViewModel>, stat: Stats) {
     return null
   }
 
-  const str = node.message.payload ? Base64Message.toUnicodeString(node.message.payload) : ''
+  const str = node.message.payload ? node.message.payload.toUnicodeString() : ''
   let value = node.message && node.message.payload ? parseFloat(str) : NaN
   value = !isNaN(value) ? abbreviate(value) : str
 

app/src/components/SettingsDrawer/TimeLocale.tsx

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

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

@@ -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 history={props.treeNode.messageHistory} dotPath={props.literal.path} /> : <span />}
+            {open ? <TopicPlot node={props.treeNode} history={props.treeNode.messageHistory} dotPath={props.literal.path} /> : <span />}
           </Paper>
         </Fade>
       </Popper>

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

@@ -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>) {

app/src/components/Sidebar/Panel.tsx

@@ -30,4 +30,5 @@ const Panel = (props: {
   )
 }
 
+// @ts-ignore
 export default withStyles(styles)(Panel)

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

@@ -122,7 +122,7 @@ const EditorMode = memo(function EditorMode(props: {
         const str = JSON.stringify(JSON.parse(props.payload), undefined, '  ')
         updatePayload(str)
       } catch (error) {
-        props.globalActions.showError(`Format error: ${error.message}`)
+        props.globalActions.showError(`Format error: ${(error as Error)?.message}`)
       }
     }
   }, [props.payload])

app/src/components/Sidebar/Sidebar.tsx

@@ -1,10 +1,9 @@
 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 { Badge, ExpansionPanel, ExpansionPanelDetails, ExpansionPanelSummary, Typography } from '@material-ui/core'
+import { ExpansionPanelDetails } from '@material-ui/core'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { settingsActions, sidebarActions } from '../../actions'
@@ -28,7 +27,7 @@ interface Props {
 }
 
 function useUpdateNodeWhenNodeReceivesUpdates(node?: q.TreeNode<any>) {
-  const [lastUpdate, setLastUpdate] = useState(0)
+  const [, setLastUpdate] = useState(0)
   const updateNode = useCallback(
     throttle(() => {
       setLastUpdate(node ? node.lastUpdate : 0)
@@ -52,7 +51,6 @@ 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}>

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

@@ -6,19 +6,19 @@ import Topic from './Topic'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { RecursiveTopicDeleteButton } from './RecursiveTopicDeleteButton'
-import { sidebarActions } from '../../../actions'
 import { TopicDeleteButton } from './TopicDeleteButton'
+import { TopicTypeButton } from './TopicTypeButton'
+import { sidebarActions } from '../../../actions'
 
 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,11 +29,12 @@ 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 && node.childTopicCount()]
+    [node, node?.childTopicCount()]
   )
 }
 

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

@@ -0,0 +1,103 @@
+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}</>
+  )
+}

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

@@ -40,7 +40,7 @@ function ActionButtons(props: {
         </Tooltip>
       </ToggleButton>
       <ToggleButton className={props.classes.toggleButton} value="raw" id="valueRendererDisplayMode-raw">
-        <Tooltip title="Raw / formatted JSON">
+        <Tooltip title="Raw / formatted JSON / formatted sparkplugb protojson">
           <span>
             <Reorder className={props.classes.toggleButtonIcon} />
           </span>

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

@@ -5,7 +5,6 @@ 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'
@@ -13,6 +12,8 @@ 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')
 
@@ -25,117 +26,100 @@ interface Props {
   }
 }
 
-interface State {
-  displayMessage?: q.Message
-  anchorEl?: HTMLElement
-  lastUpdate: number
-}
+export const MessageHistory: React.FC<Props> = props => {
+  const [, setLastUpdate] = React.useState(Date.now())
+  const updateNodeThrottled = React.useCallback(
+    throttle(() => {
+      setLastUpdate
+    }, 300),
+    []
+  )
 
-class MessageHistory extends React.PureComponent<Props, State> {
-  private updateNode = throttle(() => {
-    this.setState({ lastUpdate: Date.now() })
-  }, 300)
+  useSubscription(props.node?.onMessage, updateNodeThrottled)
+  const decodeMessage = useDecoder(props.node)
 
-  constructor(props: any) {
-    super(props)
-    this.state = { lastUpdate: 0 }
-  }
-
-  private addNodeToCharts = (event: React.MouseEvent) => {
+  function addNodeToCharts(event: React.MouseEvent) {
     event.preventDefault()
     event.stopPropagation()
 
-    const { node } = this.props
+    const { node } = props
     if (!node) {
       return null
     }
 
-    this.props.actions.charts.addChart({ topic: node.path() })
+    props.actions.charts.addChart({ topic: node.path() })
   }
 
-  private displayMessage = (index: number, eventTarget: EventTarget) => {
-    const message = this.props.node && this.props.node.messageHistory.toArray().reverse()[index]
+  function displayMessage(index: number, eventTarget: EventTarget) {
+    const message = props.node && props.node.messageHistory.toArray().reverse()[index]
     if (message) {
-      this.props.onSelect(message)
+      props.onSelect(message)
     }
   }
 
-  public componentWillReceiveProps(nextProps: Props) {
-    this.props.node && this.props.node.onMessage.unsubscribe(this.updateNode)
-    nextProps.node && nextProps.node.onMessage.subscribe(this.updateNode)
+  const { node } = props
+  if (!node) {
+    return null
   }
 
-  public componentDidMount() {
-    this.props.node && this.props.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 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: (
+    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>
           <span>
-            <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>
+            &nbsp;
+            <MessageId message={message} />
           </span>
-        ),
-        selected: message && message === this.props.selected,
-      }
-      previousMessage = message
-      return element
-    })
+          <div style={{ float: 'right' }}>
+            <Copy value={value ?? ''} />
+          </div>
+        </span>
+      ),
+      selected: message && message === props.selected,
+    }
+    previousMessage = message
+    return element
+  })
 
-    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 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 mapDispatchToProps = (dispatch: any) => {
@@ -144,4 +128,4 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default connect(null, mapDispatchToProps)(MessageHistory)
+export default connect(null, mapDispatchToProps)(React.memo(MessageHistory))

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

@@ -7,13 +7,13 @@ 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>
@@ -35,6 +35,7 @@ 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) {
@@ -54,6 +55,10 @@ function ValuePanel(props: Props) {
     )
   }
 
+  const getDecodedValue = useCallback(() => {
+    return node?.message && decodeMessage(node.message)?.message?.toUnicodeString()
+  }, [node, decodeMessage])
+
   function messageMetaInfo() {
     if (!props.node || !props.node.message) {
       return null
@@ -85,10 +90,9 @@ function ValuePanel(props: Props) {
     [compareMessage]
   )
 
-  const copyValue =
-    node && node.message && node.message.payload ? (
-      <Copy value={Base64Message.toUnicodeString(node.message.payload)} />
-    ) : null
+  const [value] =
+    node && node.message && node.message.payload ? node.message.payload?.format(node.type) : [null, undefined]
+  const copyValue = value ? <Copy getValue={getDecodedValue} /> : null
 
   return (
     <Panel>
@@ -128,4 +132,5 @@ const styles = (theme: Theme) => ({
   },
 })
 
+// @ts-ignore
 export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ValuePanel))

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

@@ -1,12 +1,13 @@
 import * as q from '../../../../../backend/src/Model'
-import * as React from 'react'
+import React, { useMemo } 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 { Typography, Fade, Grow } from '@material-ui/core'
+import { Fade } from '@material-ui/core'
+import { Decoder } from '../../../../../backend/src/Model/Decoder'
+import { useDecoder } from '../../hooks/useDecoder'
+import { TopicViewModel } from '../../../model/TopicViewModel'
 
 interface Props {
   message: q.Message
@@ -15,98 +16,114 @@ interface Props {
   renderMode: ValueRendererDisplayMode
 }
 
-interface State {
-  width: number
+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'}
+    />
+  )
 }
 
-class ValueRenderer extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props)
-    this.state = { width: 0 }
-  }
+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
 
-  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'}
-      />
-    )
-  }
+  return <div>{renderDiff(treeNode, compareWithPreviousMessage, currentStr, compareStr, undefined, language)}</div>
+}
 
-  private convertMessage(msg?: Base64Message): [string | undefined, 'json' | undefined] {
-    if (!msg) {
-      return [undefined, undefined]
-    }
+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>
+  )
+}
 
-    const str = Base64Message.toUnicodeString(msg)
-    try {
-      JSON.parse(str)
-    } catch (error) {
-      return [str, undefined]
-    }
+export const ValueRenderer: React.FC<Props> = ({ treeNode, compareWith: compare, message, renderMode }) => {
+  const decodeMessage = useDecoder(treeNode)
+  const decodedMessage = useMemo(() => decodeMessage(message), [decodeMessage, message])
 
-    return [this.messageToPrettyJson(str), 'json']
-  }
+  const previousMessages = treeNode.messageHistory.toArray()
+  const previousMessage = previousMessages[previousMessages.length - 2]
+  const compareMessage = compare || previousMessage || message
+  const compareWithPreviousMessage = !!compare
 
-  private messageToPrettyJson(str: string): string | undefined {
-    try {
-      const json = JSON.parse(str)
-      return JSON.stringify(json, undefined, '  ')
-    } catch {
-      return undefined
-    }
-  }
+  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]
+  )
 
-  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>
-        {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) {
+  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
     }
 
-    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)
+    switch (renderMode) {
+      case 'diff':
+        return renderDiffMode(treeNode, currentStr, compareStr, currentType, compareType, compareWithPreviousMessage)
+      default:
+        return renderRawMode(treeNode, currentStr, compareStr, currentType, compareType, compareWithPreviousMessage)
+    }
   }
+
+  const renderedValue = useMemo(
+    () =>
+      renderValue(treeNode, currentStr, compareStr, currentType, compareType, renderMode, compareWithPreviousMessage),
+    [treeNode, currentStr, compareStr, currentType, compareType, renderMode, compareWithPreviousMessage]
+  )
+
+  return (
+    <div style={{ padding: '0px 0px 8px 0px', width: '100%' }}>
+      {decodedMessage?.decoder === Decoder.SPARKPLUG && 'Decoded SparkplugB'}
+      {renderedValue}
+    </div>
+  )
 }
 
 const mapStateToProps = (state: AppState) => {

app/src/components/TopicPlot.tsx

@@ -2,12 +2,14 @@ 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
@@ -25,21 +27,27 @@ function filterUsingTimeRange(startTime: number | undefined, data: Array<q.Messa
   return data
 }
 
-function nodeToHistory(startTime: number | undefined, history: q.MessageHistory) {
+function nodeToHistory(decodeMessage: DecoderFunction, startTime: number | undefined, history: q.MessageHistory) {
   return filterUsingTimeRange(startTime, history.toArray())
     .map((message: q.Message) => {
-      const value = message.payload ? toPlottableValue(Base64Message.toUnicodeString(message.payload)) : NaN
-      return { x: message.received.getTime(), y: toPlottableValue(value) }
+      const decoded = decodeMessage(message)?.message?.toUnicodeString()
+      return { x: message.received.getTime(), y: toPlottableValue(decoded) }
     })
     .filter(data => !isNaN(data.y as any)) as any
 }
 
-function nodeDotPathToHistory(startTime: number | undefined, history: q.MessageHistory, dotPath: string) {
+function nodeDotPathToHistory(
+  decodeMessage: DecoderFunction,
+  startTime: number | undefined,
+  history: q.MessageHistory,
+  dotPath: string
+) {
   return filterUsingTimeRange(startTime, history.toArray())
     .map((message: q.Message) => {
-      let json = {}
+      let json: any = {}
       try {
-        json = message.payload ? JSON.parse(Base64Message.toUnicodeString(message.payload)) : {}
+        const decoded = decodeMessage(message)?.message
+        json = decoded ? JSON.parse(decoded.toUnicodeString()) : {}
       } catch (ignore) {}
 
       const value = dotProp.get(json, dotPath)
@@ -50,14 +58,17 @@ function nodeDotPathToHistory(startTime: number | undefined, history: q.MessageH
 }
 
 function TopicPlot(props: Props) {
+  const decodeMessage = useDecoder(props.node)
   const startOffset = props.timeInterval ? parseDuration(props.timeInterval) : undefined
-  const data = React.useMemo(
-    () =>
-      props.dotPath
-        ? nodeDotPathToHistory(startOffset, props.history, props.dotPath)
-        : nodeToHistory(startOffset, props.history),
-    [props.history.last(), startOffset, props.dotPath]
-  )
+  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])
 
   return (
     <PlotHistory

app/src/components/Tree/Infinitree.tsx

@@ -0,0 +1,117 @@
+import * as q from '../../../../backend/src/Model'
+import React, { MutableRefObject, RefObject, useCallback, useMemo, useRef } from 'react'
+import { FixedSizeList as List, ListOnItemsRenderedProps, ListOnScrollProps } from 'react-window'
+import { AutoSizer } from 'react-virtualized'
+import TreeNode from './TreeNode'
+import { TopicViewModel } from '../../model/TopicViewModel'
+
+class TreeList {
+  tree: q.TreeNode<TopicViewModel>
+
+  constructor(tree: q.TreeNode<TopicViewModel>) {
+    this.tree = tree
+  }
+
+  getVisibleChildAt(index: number): [q.TreeNode<TopicViewModel>, number] | undefined {
+    return this.tree.viewModel?.visibleChildAt(index, 1)
+  }
+
+  get length(): number {
+    return this.tree.viewModel?.visibleChildren() ?? 0
+  }
+}
+
+const InfinitreeComponent: React.FC<{
+  tree: q.TreeNode<TopicViewModel>
+  actions: any
+  selectTopicAction: any
+  settings: any
+  listRef: RefObject<List>
+  lastUpdate: number
+  name: string
+  fixedOnTreeNodeRef: MutableRefObject<q.TreeNode<TopicViewModel> | null>
+}> = ({ tree, actions, settings, listRef, fixedOnTreeNodeRef, name }) => {
+  const list = useMemo(() => new TreeList(tree), [tree])
+  const lastIndex = useRef<number | undefined>(0)
+  const lastScroll = useRef<number>(Date.now())
+  const getKey = useCallback(
+    (index: number) => {
+      let [treeNode] = list.getVisibleChildAt(index) ?? []
+
+      return treeNode?.hash() ?? index.toString()
+    },
+    [list]
+  )
+
+  const afterRender = useCallback(
+    ({ visibleStartIndex }: ListOnItemsRenderedProps) => {
+      if (!visibleStartIndex) {
+        return
+      }
+
+      let [treeNode] = list.getVisibleChildAt(visibleStartIndex) ?? []
+
+      if (treeNode) {
+        fixedOnTreeNodeRef.current = treeNode
+      }
+    },
+    [list]
+  )
+
+  const indexOfItem = fixedOnTreeNodeRef.current?.viewModel?.getIndex()
+
+  if (indexOfItem && lastIndex.current !== indexOfItem && Date.now() - lastScroll.current > 300) {
+    // Kind of dangerous to mutate scroll state directly, useEffect causes glitches
+    indexOfItem && listRef.current?.scrollToItem(indexOfItem, 'start')
+  }
+  lastIndex.current = indexOfItem
+
+  const disableScroll = useCallback((args: ListOnScrollProps) => {
+    if (!args.scrollUpdateWasRequested) {
+      lastScroll.current = Date.now()
+    }
+  }, [])
+
+  return (
+    <AutoSizer>
+      {({ width, height }) => (
+        <List
+          ref={listRef}
+          width={width}
+          height={height}
+          itemSize={20}
+          itemCount={list.length}
+          itemKey={getKey}
+          onItemsRendered={afterRender}
+          onScroll={disableScroll}
+          overscanCount={3}
+        >
+          {({ index, style }) => {
+            let [treeNode, depth = 0] = list.getVisibleChildAt(index) ?? []
+            if (!treeNode) {
+              return null
+            }
+
+            return (
+              <div style={{ ...style, paddingLeft: 12 * (depth - 1) }}>
+                <TreeNode
+                  treeNode={treeNode}
+                  isRoot={index === 0}
+                  doNotRenderSubnodes={true}
+                  name={index === 0 ? name : undefined}
+                  collapsed={false}
+                  settings={settings}
+                  lastUpdate={treeNode.lastUpdate}
+                  actions={actions}
+                  selectTopicAction={actions.selectTopic}
+                />
+              </div>
+            )
+          }}
+        </List>
+      )}
+    </AutoSizer>
+  )
+}
+
+export const Infinitree = InfinitreeComponent

app/src/components/Tree/TreeNode/TreeNodeTitle.tsx

@@ -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,67 +14,72 @@ export interface TreeNodeProps extends React.HTMLAttributes<HTMLElement> {
   classes: any
 }
 
-class TreeNodeTitle extends React.PureComponent<TreeNodeProps, {}> {
-  private renderSourceEdge() {
-    const name = this.props.name || (this.props.treeNode.sourceEdge && this.props.treeNode.sourceEdge.name)
+export const TreeNodeTitle = (props: TreeNodeProps) => {
+  const decodeMessage = useDecoder(props.treeNode)
+
+  function renderSourceEdge() {
+    const name = props.name || (props.treeNode.sourceEdge && props.treeNode.sourceEdge.name)
 
     return (
-      <span key="edge" className={this.props.classes.sourceEdge}>
+      <span key="edge" className={props.classes.sourceEdge} data-test-topic={name}>
         {name}
       </span>
     )
   }
 
-  private truncatedMessage() {
+  function truncatedMessage() {
     const limit = 400
-    if (!this.props.treeNode.message || !this.props.treeNode.message.payload) {
+    if (!props.treeNode.message || !props.treeNode.message.payload) {
       return ''
     }
+    const [value = ''] = decodeMessage(props.treeNode.message)?.message?.format(props.treeNode.type) ?? []
 
-    const str = Base64Message.toUnicodeString(this.props.treeNode.message.payload)
-    return str.length > limit ? `${str.slice(0, limit)}…` : str
+    return value.length > limit ? `${value.slice(0, limit)}…` : 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}>
+  function renderValue() {
+    return props.treeNode.message && props.treeNode.message.payload && props.treeNode.message.length > 0 ? (
+      <span key="value" className={props.classes.value}>
         {' '}
-        = {this.truncatedMessage()}
+        = {truncatedMessage()}
       </span>
     ) : null
   }
 
-  private renderExpander() {
-    if (this.props.treeNode.edgeCount() === 0) {
+  function renderExpander() {
+    if (props.treeNode.edgeCount() === 0) {
       return null
     }
 
     return (
-      <span key="expander" className={this.props.classes.expander} onClick={this.props.toggleCollapsed}>
-        {this.props.collapsed ? '▶' : '▼'}
+      <span key="expander" className={props.classes.expander} onClick={props.toggleCollapsed}>
+        {props.collapsed ? '▶' : '▼'}
       </span>
     )
   }
 
-  private renderMetadata() {
-    if (this.props.treeNode.edgeCount() === 0 || !this.props.collapsed) {
+  function renderMetadata() {
+    if (props.treeNode.edgeCount() === 0 || !props.collapsed) {
       return null
     }
 
-    const messages = this.props.treeNode.leafMessageCount()
-    const topicCount = this.props.treeNode.childTopicCount()
+    const messages = props.treeNode.leafMessageCount()
+    const topicCount = props.treeNode.childTopicCount()
     return (
-      <span key="metadata" className={this.props.classes.collapsedSubnodes}>{` (${topicCount} ${
+      <span key="metadata" className={props.classes.collapsedSubnodes}>{` (${topicCount} ${
         topicCount === 1 ? 'topic' : 'topics'
       }, ${messages} ${messages === 1 ? 'message' : 'messages'})`}</span>
     )
   }
 
-  public render() {
-    return [this.renderExpander(), this.renderSourceEdge(), this.renderMetadata(), this.renderValue()]
-  }
+  return (
+    <>
+      {renderExpander()}
+      {renderSourceEdge()}
+      {renderMetadata()}
+      {renderValue()}
+    </>
+  )
 }
 
 const styles = (theme: Theme) => ({

app/src/components/Tree/TreeNode/effects/useViewModel.tsx

@@ -0,0 +1,18 @@
+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
+}

app/src/components/Tree/TreeNode/effects/useViewModelSubscriptions.tsx

@@ -1,6 +1,8 @@
 import * as q from '../../../../../../backend/src/Model'
-import React, { useEffect } from 'react'
+import React, { useCallback } from 'react'
 import { TopicViewModel } from '../../../../model/TopicViewModel'
+import { useSubscription } from '../../../hooks/useSubscription'
+import { useViewModel } from './useViewModel'
 
 export function useViewModelSubscriptions(
   treeNode: q.TreeNode<TopicViewModel>,
@@ -8,37 +10,21 @@ export function useViewModelSubscriptions(
   setSelected: (value: boolean) => void,
   setCollapsedOverride: (value: boolean) => void
 ) {
-  useEffect(() => {
-    const selectionDidChange = () => {
-      const selected = treeNode.viewModel && treeNode.viewModel.isSelected()
-      treeNode.viewModel && setSelected(Boolean(selected))
+  const viewModel = useViewModel(treeNode)
 
-      if (selected && nodeRef && nodeRef.current) {
-        nodeRef.current.focus({ preventScroll: false })
-      }
-    }
+  const selectionDidChange = useCallback(() => {
+    const selected = viewModel && viewModel.isSelected()
+    viewModel && setSelected(Boolean(selected))
 
-    const expandedDidChange = () => {
-      treeNode.viewModel && setCollapsedOverride(!treeNode.viewModel.isExpanded())
+    if (selected && nodeRef && nodeRef.current) {
+      nodeRef.current.focus({ preventScroll: false })
     }
+  }, [viewModel])
 
-    function addSubscriber() {
-      treeNode.viewModel = new TopicViewModel()
-      treeNode.viewModel.selectionChange.subscribe(selectionDidChange)
-      treeNode.viewModel.expandedChange.subscribe(expandedDidChange)
-    }
+  const expandedDidChange = useCallback(() => {
+    viewModel && setCollapsedOverride(!viewModel.isExpanded())
+  }, [viewModel])
 
-    function removeSubscriber() {
-      if (treeNode.viewModel) {
-        treeNode.viewModel.selectionChange.unsubscribe(selectionDidChange)
-        treeNode.viewModel.expandedChange.unsubscribe(expandedDidChange)
-        treeNode.viewModel = undefined
-      }
-    }
-
-    addSubscriber()
-    return function cleanup() {
-      removeSubscriber()
-    }
-  }, [treeNode])
+  useSubscription(viewModel?.selectionChange, selectionDidChange)
+  useSubscription(viewModel?.expandedChange, expandedDidChange)
 }

app/src/components/Tree/TreeNode/index.tsx

@@ -18,6 +18,7 @@ export interface Props {
   treeNode: q.TreeNode<TopicViewModel>
   name?: string | undefined
   collapsed?: boolean | undefined
+  doNotRenderSubnodes?: boolean
   classes: any
   lastUpdate: number
   actions: typeof treeActions
@@ -27,8 +28,8 @@ export interface Props {
 }
 
 function TreeNodeComponent(props: Props) {
-  const { actions, classes, settings, theme, treeNode, lastUpdate, name } = props
-  const [collapsedOverride, setCollapsedOverride] = useState<boolean | undefined>(undefined)
+  const { actions, classes, settings, theme, treeNode, lastUpdate, name, doNotRenderSubnodes } = props
+  const [collapsedOverride, setCollapsedOverride] = useState<boolean | undefined>(!treeNode.viewModel?.isExpanded())
   const [selected, selectionLastUpdate, setSelected] = useSelectionState(false)
   const nodeRef = useRef<HTMLDivElement>()
   const isAllowedToAutoExpand = useIsAllowedToAutoExpandState(props)
@@ -94,7 +95,7 @@ function TreeNodeComponent(props: Props) {
 
   return useMemo(() => {
     function renderNodes() {
-      if (isCollapsed) {
+      if (isCollapsed || doNotRenderSubnodes) {
         return null
       }
 
@@ -134,7 +135,7 @@ function TreeNodeComponent(props: Props) {
         {renderNodes()}
       </div>
     )
-  }, [treeNode.lastUpdate, treeNode, name, isCollapsed, selected, theme, mouseOver, settings])
+  }, [treeNode.lastUpdate, treeNode, name, isCollapsed, selected, theme, mouseOver, settings, doNotRenderSubnodes])
 }
 
 export default withStyles(styles, { withTheme: true })(React.memo(TreeNodeComponent))

app/src/components/Tree/index.tsx

@@ -1,6 +1,6 @@
 import * as q from '../../../../backend/src/Model'
-import React from 'react'
-import TreeNode from './TreeNode'
+import React, { useCallback, useMemo, useRef } from 'react'
+import { Infinitree } from './Infinitree'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
@@ -8,6 +8,8 @@ import { KeyCodes } from '../../utils/KeyCodes'
 import { SettingsState } from '../../reducers/Settings'
 import { TopicViewModel } from '../../model/TopicViewModel'
 import { treeActions } from '../../actions'
+import { FixedSizeList as List } from 'react-window'
+import { useSubscription } from '../hooks/useSubscription'
 const MovingAverage = require('moving-average')
 
 const averagingTimeInterval = 10 * 1000
@@ -24,133 +26,119 @@ interface Props {
   settings: SettingsState
 }
 
-interface State {
-  lastUpdate: number
-}
-
 function useArrowKeyEventHandler(actions: typeof treeActions) {
-  return (event: React.KeyboardEvent) => {
-    switch (event.keyCode) {
-      case KeyCodes.arrow_down:
-        actions.moveSelectionUpOrDownwards('next')
-        event.preventDefault()
-        break
-      case KeyCodes.arrow_up:
-        actions.moveSelectionUpOrDownwards('previous')
-        event.preventDefault()
-        break
-      case KeyCodes.arrow_left:
-        actions.moveOutward()
-        event.preventDefault()
-        break
-      case KeyCodes.arrow_right:
-        actions.moveInward()
-        event.preventDefault()
-        break
-    }
-  }
+  return useCallback(
+    (event: React.KeyboardEvent) => {
+      switch (event.keyCode) {
+        case KeyCodes.arrow_down:
+          actions.moveSelectionUpOrDownwards('next')
+          event.preventDefault()
+          break
+        case KeyCodes.arrow_up:
+          actions.moveSelectionUpOrDownwards('previous')
+          event.preventDefault()
+          break
+        case KeyCodes.arrow_left:
+          actions.moveOutward()
+          event.preventDefault()
+          break
+        case KeyCodes.arrow_right:
+          actions.moveInward()
+          event.preventDefault()
+          break
+      }
+    },
+    [actions]
+  )
 }
 
-class TreeComponent extends React.PureComponent<Props, State> {
-  private updateTimer?: any
-  private perf: number = 0
-  private renderTime = 0
-
-  constructor(props: any) {
-    super(props)
-    this.state = { lastUpdate: 0 }
-  }
-
-  private keyEventHandler = useArrowKeyEventHandler(this.props.actions)
-  private performanceCallback = (ms: number) => {
+const TreeComponent: React.FC<Props> = props => {
+  const keyEventHandler = useArrowKeyEventHandler(props.actions)
+  const performanceCallback = useCallback((ms: number) => {
     average.push(Date.now(), ms)
-  }
+  }, [])
 
-  public componentWillReceiveProps(nextProps: Props) {
-    if (this.props.tree !== nextProps.tree) {
-      if (this.props.tree) {
-        this.props.tree.didUpdate.unsubscribe(this.throttledTreeUpdate)
-      }
-      if (nextProps.tree) {
-        nextProps.tree.didUpdate.subscribe(this.throttledTreeUpdate)
-      }
-      this.setState(this.state)
-    }
-  }
+  const updateTimer = useRef<NodeJS.Timeout | number>()
+  const perf = useRef<number>(performance.now())
+  const renderTime = useRef<number>(0)
+  const listRef = useRef<List>(null)
+  const [lastUpdate, triggerUpdate] = React.useState(0)
 
-  public componentWillUnmount() {
-    this.props.tree && this.props.tree.didUpdate.unsubscribe(this.throttledTreeUpdate)
-  }
-
-  public throttledTreeUpdate = () => {
-    if (this.updateTimer) {
+  const throttledTreeUpdate = useCallback(() => {
+    if (updateTimer.current) {
       return
     }
 
     const expectedRenderTime = average.forecast()
-    const updateInterval = Math.max(expectedRenderTime * 7, 300)
-    const timeUntilNextUpdate = updateInterval - (performance.now() - this.renderTime)
+    const updateInterval = Math.max(expectedRenderTime * 7, 500)
+    const timeUntilNextUpdate = updateInterval - (performance.now() - renderTime.current)
 
-    this.updateTimer = setTimeout(() => {
-      window.requestIdleCallback(
-        () => {
-          this.updateTimer && clearTimeout(this.updateTimer)
-          this.updateTimer = undefined
-          this.renderTime = performance.now()
+    updateTimer.current = setTimeout(
+      () => {
+        window.requestIdleCallback(
+          () => {
+            updateTimer.current && clearTimeout(updateTimer.current)
+            updateTimer.current = undefined
+            renderTime.current = performance.now()
 
-          window.requestIdleCallback(
-            () => {
-              this.setState({ lastUpdate: this.renderTime })
-            },
-            { timeout: 100 }
-          )
-        },
-        { timeout: 500 }
-      )
-    }, Math.max(0, timeUntilNextUpdate))
-  }
+            window.requestIdleCallback(
+              () => {
+                triggerUpdate(renderTime.current)
+              },
+              { timeout: 100 }
+            )
+          },
+          { timeout: 500 }
+        )
+      },
+      Math.max(0, timeUntilNextUpdate)
+    )
+  }, [])
 
-  public componentWillUpdate() {
-    this.perf = performance.now()
-  }
+  perf.current = performance.now()
+  window.requestIdleCallback(() => {
+    performanceCallback(performance.now() - perf.current)
+  })
+  const fixedOnTreeNodeRef = useRef<q.TreeNode<TopicViewModel> | null>(null)
 
-  public componentDidUpdate() {
-    this.performanceCallback(performance.now() - this.perf)
-  }
+  useSubscription(props.tree?.didUpdate, throttledTreeUpdate)
 
-  public render() {
-    const { tree } = this.props
-    if (!tree) {
-      return null
-    }
-
-    const style: React.CSSProperties = {
+  const style: React.CSSProperties = useMemo(
+    () => ({
       lineHeight: '1.1',
       cursor: 'default',
-      overflowY: 'scroll',
-      overflowX: 'hidden',
+      // overflowY: 'scroll',
+      // overflowX: 'hidden',
       height: '100%',
       width: '100%',
       outline: '24px black !important',
       paddingBottom: '16px', // avoid conflict with chart panel Resizer
-    }
+    }),
+    []
+  )
 
-    return (
-      <div style={style} tabIndex={0} onKeyDown={this.keyEventHandler}>
-        <TreeNode
-          key={tree.hash()}
-          isRoot={true}
-          treeNode={tree}
-          name={this.props.host}
-          collapsed={false}
-          settings={this.props.settings}
-          lastUpdate={tree.lastUpdate}
-          actions={this.props.actions}
-          selectTopicAction={this.props.actions.selectTopic}
-        />
-      </div>
-    )
+  const { tree } = props
+  if (!tree) {
+    return null
   }
+
+  const rendered = (
+    <div style={style} tabIndex={0} onKeyDown={keyEventHandler}>
+      <Infinitree
+        lastUpdate={lastUpdate}
+        listRef={listRef}
+        key={tree.hash()}
+        fixedOnTreeNodeRef={fixedOnTreeNodeRef}
+        tree={tree}
+        name={props.host ?? ''}
+        actions={props.actions}
+        selectTopicAction={props.actions.selectTopic}
+        settings={props.settings}
+      />
+    </div>
+  )
+
+  return rendered
 }
 
 const mapStateToProps = (state: AppState) => {

app/src/components/UpdateNotifier.tsx

@@ -1,7 +1,7 @@
-import * as compareVersions from 'compare-versions'
-import * as electron from 'electron'
-import * as os from 'os'
-import * as React from 'react'
+import compareVersions from 'compare-versions'
+import electron from 'electron'
+import os from 'os'
+import React from 'react'
 import axios from 'axios'
 import Close from '@material-ui/icons/Close'
 import CloudDownload from '@material-ui/icons/CloudDownload'
@@ -13,6 +13,7 @@ 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
@@ -50,18 +51,21 @@ class UpdateNotifier extends React.PureComponent<Props, State> {
     super(props)
     this.state = { newerVersions: [] }
 
-    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))
+    this.checkForUpdates()
+  }
 
-      if (newerVersions.length > 0) {
-        this.setState({ newerVersions })
-        this.props.actions.showUpdateNotification(true)
-      }
-    })
+  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)
+    }
   }
 
   private allowPrereleaseIfOwnVersionIsBeta(release: GithubRelease, ownVersion: string) {

app/src/components/helper/Copy.tsx

@@ -9,7 +9,8 @@ import { globalActions } from '../../actions'
 const copy = require('copy-text-to-clipboard')
 
 interface Props {
-  value: string
+  value?: string
+  getValue?: () => string | undefined
   actions: {
     global: typeof globalActions
   }
@@ -28,7 +29,7 @@ class Copy extends React.PureComponent<Props, State> {
   private handleClick = (event: React.MouseEvent) => {
     event.stopPropagation()
 
-    copy(this.props.value)
+    copy(this.props.value ?? this.props.getValue?.())
     this.props.actions.global.showNotification('Copied to clipboard')
     this.setState({ didCopy: true })
     setTimeout(() => {

app/src/components/helper/DateFormatter.tsx

@@ -1,5 +1,5 @@
-import * as moment from 'moment'
-import * as React from 'react'
+import moment from 'moment'
+import React from 'react'
 import { AppState } from '../../reducers'
 import { connect } from 'react-redux'
 
@@ -12,6 +12,7 @@ interface Props {
 }
 
 const unitMapping = {
+  ms: 'milliseconds',
   s: 'seconds',
   m: 'minutes',
   h: 'hours',
@@ -21,7 +22,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 `${Math.round(moment.duration(interval).as(unit) * 100) / 100} ${unitMapping[unit]}`
+    return `${moment.duration(interval).as(unit).toFixed(3)} ${unitMapping[unit]}`
   }
 
   private legacyDate() {
@@ -31,10 +32,11 @@ class DateFormatter extends React.PureComponent<Props, {}> {
   private localizedDate(locale: string) {
     return moment(this.props.date)
       .locale(locale)
-      .format(this.props.timeFirst ? 'LTS L' : 'L LTS')
+      .format(this.props.timeFirst ? 'LTS.SSS L' : 'L LTS.SSS')
   }
 
   private unitForInterval(milliseconds: number) {
+    const oneSecond = 1000 * 1
     const oneMinute = 1000 * 60
     const oneHour = oneMinute * 60
 
@@ -46,7 +48,11 @@ class DateFormatter extends React.PureComponent<Props, {}> {
       return 'm'
     }
 
-    return 's'
+    if (milliseconds > oneSecond * 0.5) {
+      return 's'
+    }
+
+    return 'ms'
   }
 
   public render() {

app/src/components/hooks/useDecoder.ts

@@ -0,0 +1,31 @@
+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]
+  )
+}

app/src/components/hooks/useSubscription.ts

@@ -0,0 +1,10 @@
+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])
+}

app/src/decoders/BinaryDecoder.ts

@@ -0,0 +1,56 @@
+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,
+    }
+  },
+}

app/src/decoders/DecoderEnvelope.ts

@@ -0,0 +1,8 @@
+import { Base64Message } from '../../../backend/src/Model/Base64Message'
+import { Decoder } from '../../../backend/src/Model/Decoder'
+
+export interface DecoderEnvelope {
+  message?: Base64Message
+  error?: string
+  decoder: Decoder
+}

app/src/decoders/MessageDecoder.ts

@@ -0,0 +1,13 @@
+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
+}

app/src/decoders/SparkplugBDecoder.ts

@@ -0,0 +1,28 @@
+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,
+      }
+    }
+  },
+}

app/src/decoders/StringDecoder.ts

@@ -0,0 +1,10 @@
+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 }
+  },
+}

app/src/decoders/index.ts

@@ -0,0 +1,6 @@
+import { StringDecoder } from './StringDecoder'
+import { BinaryDecoder } from './BinaryDecoder'
+import { SparkplugDecoder } from './SparkplugBDecoder'
+export * from './MessageDecoder'
+
+export const decoders = [SparkplugDecoder, BinaryDecoder, StringDecoder] as const

app/src/model/ConnectionOptions.ts

@@ -77,11 +77,11 @@ export function createEmptyConnection(): ConnectionOptions {
 export function makeDefaultConnections() {
   return {
     // remember: there was also iot.eclipse.org once
-    'mqtt.eclipse.org': {
+    'mqtt.eclipseprojects.io': {
       ...createEmptyConnection(),
-      id: 'mqtt.eclipse.org',
-      name: 'mqtt.eclipse.org',
-      host: 'mqtt.eclipse.org',
+      id: 'mqtt.eclipseprojects.io',
+      name: 'mqtt.eclipseprojects.io',
+      host: 'mqtt.eclipseprojects.io',
     },
     'test.mosquitto.org': {
       ...createEmptyConnection(),

app/src/model/LegacyConnectionSettings.ts

@@ -1,5 +1,4 @@
 import { ConnectionOptions, createEmptyConnection } from './ConnectionOptions'
-import { v4 } from 'uuid'
 
 interface LegacyConnectionSettings {
   host: string

app/src/model/TopicViewModel.ts

@@ -1,19 +1,157 @@
-import { Destroyable } from '../../../backend/src/Model/Destroyable'
+import * as q from '../../../backend/src/Model'
+import { Destroyable, MemoryLifecycle } from '../../../backend/src/Model/Destroyable'
+import { MessageDecoder, decoders } from '../decoders'
 import { EventDispatcher } from '../../../events'
 
-export class TopicViewModel implements Destroyable {
+function findDecoder<T extends Destroyable & MemoryLifecycle>(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, MemoryLifecycle {
   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>()
 
-  public constructor() {
+  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)
+  }
+
+  private clearCache = () => {
+    if (this._cachedChildTopicCount) {
+      this._cachedChildTopicCount = undefined
+      // when child changes, parents are affected as well
+      this.owner?.sourceEdge?.source?.viewModel?.clearCache()
+    }
+  }
+
+  public constructor(treeNode: q.TreeNode<TopicViewModel>) {
+    this.owner = treeNode
     this.selected = false
-    this.expanded = false
+    this.expanded = true
+    treeNode.onMerge.subscribe(this.clearCache)
+  }
+
+  private _cachedChildTopicCount: number | undefined = undefined
+
+  /**
+   * This function only returns valid values if parents are expanded
+   * @returns
+   */
+  public getIndex(): number {
+    if (!this.owner) {
+      throw new Error('integrity error')
+    }
+
+    const source = this.owner.sourceEdge?.source
+
+    const parentIndex = source?.viewModel?.getIndex()
+    // If we have a parent, we have its index + 1 (at least)
+    const parentIndexWithDepth = parentIndex !== undefined ? parentIndex + 1 : 0
+    let position = 0
+    const edgeToMatch = this.owner.sourceEdge
+    for (const edge of source?.edgeArray ?? []) {
+      if (edge === edgeToMatch) {
+        break
+      }
+      position += edge.target.viewModel?.visibleChildren() ?? 1
+    }
+
+    return parentIndexWithDepth + position
+  }
+
+  public visibleChildAt(
+    index: number,
+    depth: number = 0,
+    parentOffset: number = 0
+  ): [q.TreeNode<TopicViewModel>, number] | undefined {
+    if (!this.owner) {
+      throw new Error('integrity error')
+    }
+    const node = this.owner
+
+    if (parentOffset === index) {
+      return [node, depth]
+    }
+
+    let position = parentOffset + 1
+    for (const edge of node.edgeArray) {
+      let viewModel = edge.target.viewModel
+      const nextPosition = position + (viewModel?.visibleChildren() ?? 0)
+      if (nextPosition > index) {
+        return viewModel?.visibleChildAt(index, depth + 1, position)
+      }
+      position = nextPosition
+    }
+  }
+
+  public visibleChildren(): number {
+    if (!this.owner) {
+      throw new Error('integrity error')
+    }
+
+    if (this._cachedChildTopicCount === undefined) {
+      if (!this.expanded) {
+        return 1
+      }
+
+      this._cachedChildTopicCount =
+        1 + this.owner.edgeArray.map(e => e.target.viewModel?.visibleChildren() ?? 1).reduce((a, b) => a + b, 0)
+    }
+
+    return this._cachedChildTopicCount as number
+  }
+
+  public retain() {
+    this.referenceCounter += 1
+  }
+
+  public release() {
+    this.referenceCounter -= 1
+    if (this.referenceCounter <= 0) {
+      this.destroy()
+    }
   }
 
   public destroy() {
+    // console.log('destroy', this.owner?.path(), this.referenceCounter)
+    this.owner?.onMerge.unsubscribe(this.clearCache)
+    if (this.owner) {
+      this.owner.viewModel = undefined
+      this.owner = undefined
+    }
     this.selectionChange.removeAllListeners()
+    this.onDecoderChange.removeAllListeners()
+    this.expandedChange.removeAllListeners()
   }
 
   public isSelected() {
@@ -32,6 +170,8 @@ export class TopicViewModel implements Destroyable {
   public setExpanded(expanded: boolean, fireEvent: boolean) {
     const didChange = this.expanded !== expanded
     this.expanded = expanded
+    this.clearCache()
+
     if (didChange && fireEvent) {
       this.expandedChange.dispatch()
     }

app/src/reducers/Tree.ts

@@ -45,9 +45,11 @@ 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

app/src/utils/PersistentStorage.ts

@@ -1,13 +1,6 @@
-import { rendererEvents } from '../../../events'
-import { v4 } from 'uuid'
+import { rendererRpc } from '../../../events'
 
-import {
-  storageStoreEvent,
-  makeStorageResponseEvent,
-  storageLoadEvent,
-  storageClearEvent,
-  makeStorageAcknowledgementEvent,
-} from '../../../events/StorageEvents'
+import { storageStoreEvent, storageLoadEvent, storageClearEvent } from '../../../events/StorageEvents'
 
 export interface StorageIdentifier<Model> {
   id: string
@@ -20,71 +13,27 @@ export interface PersistentStorage {
 }
 
 class RemoteStorage implements PersistentStorage {
-  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 store<Model>(identifier: StorageIdentifier<Model>, data: Model): Promise<void> {
-    const transactionId = v4()
-    const expectation = this.expectAck(transactionId)
-    rendererEvents.emit(storageStoreEvent, {
+    return rendererRpc.call(storageStoreEvent, {
       data,
-      transactionId,
       store: identifier.id,
     })
-    return expectation
   }
 
-  public load<Model>(identifier: StorageIdentifier<Model>): Promise<Model | undefined> {
-    const transactionId = v4()
-    const responseEvent = makeStorageResponseEvent(transactionId)
+  public async load<Model>(identifier: StorageIdentifier<Model>): Promise<Model | undefined> {
+    const result = await rendererRpc.call(
+      storageLoadEvent,
+      {
+        store: identifier.id,
+      },
+      10000
+    )
 
-    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
+    return (result as any).data
   }
 
   public clear(): Promise<void> {
-    const transactionId = v4()
-    const expectation = this.expectAck(transactionId)
-
-    rendererEvents.emit(storageClearEvent, { transactionId })
-    return expectation
+    return rendererRpc.call(storageClearEvent, undefined, 10000)
   }
 }
 

app/src/utils/bugtracking.ts

@@ -1,4 +1,4 @@
-import { electronRendererTelemetry } from 'electron-telemetry'
+// import { electronRendererTelemetry } from 'electron-telemetry'
 
-const telemetry = electronRendererTelemetry
-electronRendererTelemetry.registerErrorHandler()
+// const telemetry = electronRendererTelemetry
+// electronRendererTelemetry.registerErrorHandler()

app/src/utils/handleTextSelectWithCtrlA.ts

@@ -1,24 +1,23 @@
-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)
+      }
     }
   }
-}

app/src/utils/tracking.ts

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

app/test/mocha.opts

@@ -1,3 +0,0 @@
---require ts-node/register
---require source-map-support/register
---recursive ./src/**/*.spec.ts

app/tsconfig.json

@@ -4,18 +4,23 @@
     "noImplicitAny": true,
     "strictNullChecks": true,
     "strict": true,
-    "lib": ["es2017", "dom"],
+    "lib": ["es2019", "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
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true
   },
   "include": ["./src/**/*"],
-  "exclude": ["**/*.d.ts", ".src/**/*.png"],
+  "exclude": ["**/*.d.ts", ".src/**/*.png", "./node_modules"],
   "awesomeTypescriptLoaderOptions": {
     "useCache": true,
     "transpileModule": true,

app/webpack.config.js

@@ -1,7 +1,6 @@
 // const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const webpack = require('webpack');
-const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const webpack = require('webpack')
 
 module.exports = {
   entry: {
@@ -18,12 +17,11 @@ 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)[\\/]/,
@@ -32,6 +30,7 @@ module.exports = {
           priority: -10,
         },
         default: {
+          name: 'default',
           minChunks: 2,
           priority: -20,
           reuseExistingChunk: true,
@@ -55,13 +54,15 @@ module.exports = {
       // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
       {
         test: /\.tsx?$/,
-        loader: 'awesome-typescript-loader',
-        options: {
-          reportFiles: [
-            "src/**/*.{ts,tsx}",
-            "../backend/src/**/*.{ts,tsx}"
-          ]
-        }
+        use: [
+          {
+            loader: 'ts-loader',
+            // options: {
+            //   configFile: './tsconfig.json',
+            // },
+          },
+        ],
+        exclude: /node_modules/,
       },
       // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
       { enforce: 'pre', test: /\.js$/, loader: 'source-map-loader' },
@@ -70,35 +71,29 @@ module.exports = {
         use: ['style-loader', 'css-loader'],
       },
       {
-        test: /\.(png|jpg|gif)$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {},
-          },
-        ],
-      },
-      {
-        test: /\.node$/,
-        use: {
-          loader: 'node-loader',
-          options: {
-            modules: true,
-          }
-        }
+        test: /\.(png|jpg|gif)$/i,
+        type: 'asset/resource',
       },
+      // {
+      //   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 HardSourceWebpackPlugin(),
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.IgnorePlugin({
-      resourceRegExp: /\.\/build\/Debug\/addon/,
-      contextRegExp: /heapdump$/
-    }),
+    // new webpack.IgnorePlugin({
+    //   resourceRegExp: /\.\/build\/Debug\/addon/,
+    //   contextRegExp: /heapdump$/
+    // }),
   ],
 
   // When importing a module whose path matches one of the following, just
@@ -109,4 +104,7 @@ module.exports = {
     // "react": "React",
     // "react-dom": "ReactDOM"
   },
-};
+  cache: {
+    type: 'filesystem',
+  },
+}

appveyor.yml

@@ -7,10 +7,10 @@ cache:
   - '%LOCALAPPDATA%\electron-builder\cache'
 
 install:
-  - ps: Install-Product node 10
+  - ps: Install-Product node 19
 
 build_script:
-  - yarn
+  - yarn install --frozen-lockfile
   - yarn build
   - yarn prepare-release
   - yarn package appx

backend/package.json

@@ -4,13 +4,16 @@
   "description": "",
   "main": "build/index.js",
   "scripts": {
-    "test": "mocha",
+    "test": "mocha --require ts-node/register --require source-map-support/register --recursive ./src/*/**/*.spec.ts",
     "build": "tsc",
-    "test-inspect": "mocha --inspect-brk",
-    "coverage": "nyc mocha",
+    "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",
     "debug": "ts-node --inspect ./src/index.ts",
     "postinstall": "yarn build"
   },
+  "engines": {
+    "node": ">=18"
+  },
   "author": "",
   "license": "CC-BY-ND-4.0",
   "nyc": {
@@ -38,7 +41,9 @@
   "peerDependencies": {
     "fs-extra": "^8.0.1",
     "js-base64": "^2.5.1",
+    "long": "^4.0.0",
     "lowdb": "^1.0.0",
-    "mqtt": "^3.0.0"
+    "mqtt": "^3.0.0",
+    "protobufjs": "^6.11.4"
   }
-}
+}

backend/src/ConfigStorage.ts

@@ -1,15 +1,9 @@
-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'
+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'
 
 export default class ConfigStorage {
   private file: string
@@ -32,56 +26,26 @@ export default class ConfigStorage {
   }
 
   public async init() {
-    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(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(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
+    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()
       }
     })
   }

backend/src/DataSource/MqttSource.ts

@@ -1,4 +1,4 @@
-import * as Url from 'url'
+import { 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 = Url.parse(urlStr)
+      url = new URL(urlStr)
     } catch (error) {
-      this.stateMachine.setError(error)
+      this.stateMachine.setError(error as Error)
       throw error
     }
 
-    const client = mqttConnect(url, {
+    const client = mqttConnect(url.toString(), {
       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 ? Base64Message.toUnicodeString(msg.payload) : '', {
+      this.client.publish(msg.topic, (msg.payload && new Base64Message(msg.payload))?.toBuffer() ?? '', {
         qos: msg.qos,
         retain: msg.retain,
       })

backend/src/Model/Base64Message.ts

@@ -1,29 +1,93 @@
-const { Base64 } = require('js-base64')
+import { Base64 } from 'js-base64'
+import { TopicDataType } from './TreeNode'
+
+export type Base64MessageDTO = Pick<Base64Message, 'base64Message'>
 
 export class Base64Message {
-  private base64Message: string
-  private unicodeValue: string
+  public base64Message: string
+  private _unicodeValue: string | undefined
 
-  public length: number
-
-  private constructor(base64Str: string) {
-    this.base64Message = base64Str
-    this.unicodeValue = Base64.decode(base64Str)
-    this.length = base64Str.length
+  // Todo: Rename to `encodedLength`
+  public get length(): number {
+    return this.base64Message.length
   }
 
-  public static toUnicodeString(message: Base64Message) {
-    return message.unicodeValue || ''
+  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 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}`
   }

backend/src/Model/ChangeBuffer.ts

@@ -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 ? val.payload.length : 0)
+      this.size += this.estimatedMessageOverhead + (val.payload?.base64Message.length ?? 0)
       this.length += 1
     }
   }

backend/src/Model/Decoder.ts

@@ -0,0 +1,4 @@
+export enum Decoder {
+  NONE,
+  SPARKPLUG,
+}

backend/src/Model/Destroyable.ts

@@ -1,3 +1,8 @@
 export interface Destroyable {
   destroy(): void
 }
+
+export interface MemoryLifecycle {
+  retain(): void
+  release(): void
+}

backend/src/Model/Edge.ts

@@ -1,8 +1,8 @@
-import { Destroyable } from './Destroyable'
+import { Destroyable, MemoryLifecycle } from './Destroyable'
 import { Hashable, TreeNode } from './'
 const sha1 = require('sha1')
 
-export class Edge<ViewModel extends Destroyable> implements Hashable {
+export class Edge<ViewModel extends Destroyable & MemoryLifecycle> implements Hashable {
   public name: string
 
   public target!: TreeNode<ViewModel>

backend/src/Model/Message.ts

@@ -1,7 +1,8 @@
 import { Base64Message } from './Base64Message'
 import { QoS } from '../DataSource/MqttSource'
+import { MemoryConsumptionExpressedByLength } from './RingBuffer'
 
-export interface Message {
+export interface Message extends MemoryConsumptionExpressedByLength {
   // mqtt based info
   payload: Base64Message | null
   messageId?: number

backend/src/Model/Tree.ts

@@ -1,10 +1,10 @@
 import { ChangeBuffer } from './ChangeBuffer'
-import { Destroyable } from './Destroyable'
-import { EventBusInterface, EventDispatcher, makeConnectionMessageEvent, MqttMessage } from '../../../events'
+import { Destroyable, MemoryLifecycle } from './Destroyable'
+import { EventDispatcher, makeConnectionMessageEvent, MqttMessage, EventBusInterface } from '../../../events'
 import { TreeNode } from './'
 import { TreeNodeFactory } from './TreeNodeFactory'
 
-export class Tree<ViewModel extends Destroyable> extends TreeNode<ViewModel> {
+export class Tree<ViewModel extends Destroyable & MemoryLifecycle> extends TreeNode<ViewModel> {
   public connectionId?: string
   public updateSource?: EventBusInterface
   public nodeFilter?: (node: TreeNode<ViewModel>) => boolean

backend/src/Model/TreeNode.ts

@@ -1,8 +1,11 @@
-import { Destroyable } from './Destroyable'
+import { Destroyable, MemoryLifecycle } from './Destroyable'
 import { Edge, Message, RingBuffer, MessageHistory } from './'
 import { EventDispatcher } from '../../../events'
+import { TopicViewModel } from '../../../app/src/model/TopicViewModel'
 
-export class TreeNode<ViewModel extends Destroyable> {
+export type TopicDataType = 'string' | 'json' | 'hex'
+
+export class TreeNode<ViewModel extends Destroyable & MemoryLifecycle> {
   public sourceEdge?: Edge<ViewModel>
   public message?: Message
   public messageHistory: MessageHistory = new RingBuffer<Message>(20000, 100)
@@ -17,6 +20,7 @@ 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>>
@@ -45,6 +49,8 @@ export class TreeNode<ViewModel extends Destroyable> {
     this.onMessage.subscribe(() => {
       this.lastUpdate = Date.now()
     })
+    this.viewModel = new TopicViewModel(this as any) as any
+    this.viewModel?.retain()
   }
 
   private previous(): TreeNode<ViewModel> | undefined {
@@ -114,7 +120,7 @@ export class TreeNode<ViewModel extends Destroyable> {
     for (const edge of this.edgeArray) {
       edge.target.destroy()
     }
-    this.viewModel && this.viewModel.destroy()
+    this.viewModel?.release()
     this.viewModel = undefined
     this.edgeArray = []
     this.edges = {}
@@ -144,7 +150,7 @@ export class TreeNode<ViewModel extends Destroyable> {
   }
 
   public hash(): string {
-    return `N${this.sourceEdge ? this.sourceEdge.hash() : ''}`
+    return `N${this.sourceEdge?.hash() ?? ''}`
   }
 
   public firstNode(): TreeNode<ViewModel> {
@@ -153,7 +159,7 @@ export class TreeNode<ViewModel extends Destroyable> {
 
   public path(): string {
     if (!this.cachedPath) {
-      return this.branch()
+      this.cachedPath = this.branch()
         .map(node => node.sourceEdge && node.sourceEdge.name)
         .filter(name => name !== undefined)
         .join('/')

backend/src/Model/TreeNodeFactory.ts

@@ -1,10 +1,11 @@
-import { Destroyable } from './Destroyable'
+import { Destroyable, MemoryLifecycle } from './Destroyable'
 import { Edge, Tree, TreeNode } from './'
 import { MqttMessage } from '../../../events'
+import { Base64Message } from './Base64Message'
 
 export abstract class TreeNodeFactory {
   private static messageCounter = 0
-  public static insertNodeAtPosition<ViewModel extends Destroyable>(
+  public static insertNodeAtPosition<ViewModel extends Destroyable & MemoryLifecycle>(
     edgeNames: Array<string>,
     node: TreeNode<ViewModel>
   ) {
@@ -20,7 +21,7 @@ export abstract class TreeNodeFactory {
     node.sourceEdge!.target = node
   }
 
-  public static fromMessage<ViewModel extends Destroyable>(
+  public static fromMessage<ViewModel extends Destroyable & MemoryLifecycle>(
     mqttMessage: MqttMessage,
     receiveDate: Date = new Date()
   ): TreeNode<ViewModel> {
@@ -30,7 +31,8 @@ export abstract class TreeNodeFactory {
     mqttMessage.retain
     node.setMessage({
       ...mqttMessage,
-      length: mqttMessage.payload?.length ?? 0,
+      payload: mqttMessage.payload && new Base64Message(mqttMessage.payload?.base64Message),
+      length: mqttMessage.payload?.base64Message.length ?? 0,
       received: receiveDate,
       messageNumber: this.messageCounter,
     })

backend/src/Model/index.ts

@@ -1,5 +1,5 @@
 export { Edge } from './Edge'
-export { TreeNode } from './TreeNode'
+export { TreeNode, TopicDataType } from './TreeNode'
 export { Message } from './Message'
 export { TreeNodeFactory } from './TreeNodeFactory'
 export { Tree } from './Tree'

backend/src/Model/spec/TreeNode.ViewModel.spec.ts

@@ -0,0 +1,67 @@
+import 'mocha'
+
+import { expect } from 'chai'
+import { makeTreeNode } from './makeTreeNode'
+
+describe('TreeNode', () => {
+  const leaf1 = makeTreeNode('foo/bar', 'foo')
+  const leaf2 = makeTreeNode('foo/bar/baz', 'bar')
+  const leaf3 = makeTreeNode('foo/biz/baz', 'bar')
+  const leaf4 = makeTreeNode('bar/biz', 'bar')
+  const root = leaf1.firstNode()
+
+  root.updateWithNode(leaf2.firstNode())
+  root.updateWithNode(leaf3.firstNode())
+  root.updateWithNode(leaf4.firstNode())
+
+  describe('expanding the root should count the children', () => {
+    it('nothing expanded', () => {
+      expect(root?.viewModel?.visibleChildren()).to.eq(1)
+    })
+
+    it('root expanded', () => {
+      root.viewModel?.setExpanded(true)
+      expect(root?.viewModel?.visibleChildren()).to.eq(3)
+    })
+
+    it('root and "foo" expanded', () => {
+      root.viewModel?.setExpanded(true)
+      root.findNode('foo')!.viewModel!.setExpanded(true)
+      expect(root?.viewModel?.visibleChildren()).to.eq(5)
+    })
+  })
+
+  describe('visibleChildAt', () => {
+    it('nothing expanded', () => {
+      expect(root?.viewModel?.visibleChildAt(0)?.[0].path()).to.eq('')
+    })
+
+    it('root expanded', () => {
+      root.viewModel?.setExpanded(true)
+      expect(root?.viewModel?.visibleChildAt(1)?.[0].path()).to.eq('foo')
+    })
+
+    it('root and "foo" expanded', () => {
+      root.viewModel?.setExpanded(true)
+      root.findNode('foo')!.viewModel!.setExpanded(true)
+      expect(root?.viewModel?.visibleChildAt(4)?.[0].path()).to.eq('bar')
+    })
+  })
+
+  describe('getIndex', () => {
+    it('nothing expanded', () => {
+      expect(root?.viewModel?.getIndex()).to.eq(0)
+    })
+
+    it('root expanded', () => {
+      root.viewModel?.setExpanded(true)
+      expect(root?.viewModel?.visibleChildAt(1)?.[0].viewModel?.getIndex()).to.eq(1)
+    })
+
+    it('root and "foo" expanded', () => {
+      root.viewModel?.setExpanded(true)
+      root.findNode('foo')!.viewModel!.setExpanded(true)
+      expect(root?.viewModel?.visibleChildAt(4)?.[0].viewModel?.getIndex()).to.eq(4)
+    })
+  })
+})

backend/src/Model/spec/TreeNode.spec.ts

@@ -1,7 +1,6 @@
 import 'mocha'
 
 import { expect } from 'chai'
-import { Base64Message } from '../Base64Message'
 import { makeTreeNode } from './makeTreeNode'
 
 describe('TreeNode', () => {
@@ -14,7 +13,7 @@ describe('TreeNode', () => {
   it('updateWithNode should update value', () => {
     const topics = 'foo/bar'.split('/')
     const leaf = makeTreeNode('foo/bar', '3')
-    expect(Base64Message.toUnicodeString(leaf.message!.payload!)).to.eq('3')
+    expect(leaf.message!.payload!.toUnicodeString()).to.eq('3')
 
     const updateLeave = makeTreeNode('foo/bar', '5')
 
@@ -22,13 +21,13 @@ describe('TreeNode', () => {
     root.updateWithNode(updateLeave.firstNode())
 
     expect(root.sourceEdge).to.eq(undefined)
-    expect(Base64Message.toUnicodeString(leaf.message!.payload!)).to.eq('5')
+    expect(leaf.message!.payload!.toUnicodeString()).to.eq('5')
   })
 
   it('updateWithNode should update intermediate nodes', () => {
     const topics1 = 'foo/bar/baz'.split('/')
     const leaf = makeTreeNode('foo/bar/baz', '3')
-    expect(Base64Message.toUnicodeString(leaf.message!.payload!)).to.eq('3')
+    expect(leaf.message!.payload!.toUnicodeString()).to.eq('3')
 
     const topics2 = 'foo/bar'.split('/')
     const updateLeave = makeTreeNode('foo/bar', '5')
@@ -37,10 +36,10 @@ describe('TreeNode', () => {
 
     const barNode = leaf.firstNode().findNode('foo/bar')
     expect(barNode && barNode.sourceEdge && barNode.sourceEdge.name).to.eq('bar')
-    expect(Base64Message.toUnicodeString(barNode!.message!.payload!)).to.eq('5')
+    expect(barNode!.message!.payload!.toUnicodeString()).to.eq('5')
 
     expect(leaf.sourceEdge && leaf.sourceEdge.name).to.eq('baz')
-    expect(Base64Message.toUnicodeString(leaf.message!.payload!)).to.eq('3')
+    expect(leaf.message!.payload!.toUnicodeString()).to.eq('3')
   })
 
   it('updateWithNode should add nodes to the tree', () => {

backend/src/Model/spec/TreeNodeFactory.spec.ts

@@ -1,6 +1,5 @@
 import 'mocha'
 import { expect } from 'chai'
-import { Base64Message } from '../Base64Message'
 import { makeTreeNode } from './makeTreeNode'
 
 describe('TreeNodeFactory', () => {
@@ -20,7 +19,7 @@ describe('TreeNodeFactory', () => {
 
     expect(node).to.not.eq(undefined)
     expect(node.sourceEdge.name).to.eq('bar')
-    expect(Base64Message.toUnicodeString(node.message.payload!)).to.eq('5')
+    expect(node.message.payload!.toUnicodeString()).to.eq('5')
 
     const foo = node.firstNode().findNode('foo')
     expect(foo && foo.sourceEdge && foo.sourceEdge.name).to.eq('foo')
@@ -34,7 +33,7 @@ describe('TreeNodeFactory', () => {
       return
     }
 
-    expect(Base64Message.toUnicodeString(node.message.payload!)).to.eq('5')
+    expect(node.message.payload!.toUnicodeString()).to.eq('5')
     expect(node.sourceEdge.name).to.eq('baz')
 
     const barNode = node.sourceEdge.source

backend/src/index.ts

@@ -46,9 +46,12 @@ export class ConnectionManager {
         buffer = buffer.slice(0, 20000)
       }
 
+      let decoded_payload = null
+      decoded_payload = Base64Message.fromBuffer(buffer)
+
       backendEvents.emit(messageEvent, {
         topic,
-        payload: Base64Message.fromBuffer(buffer),
+        payload: decoded_payload,
         qos: packet.qos,
         retain: packet.retain,
         messageId: packet.messageId,

backend/test/mocha.opts

@@ -1,3 +0,0 @@
---require ts-node/register
---require source-map-support/register
---recursive ./src/**/*.spec.ts

backend/tsconfig.json

@@ -1,11 +1,15 @@
 {
   "compileOnSave": true,
   "compilerOptions": {
+    "skipLibCheck": true,
     "noImplicitAny": true,
     "strictNullChecks": true,
     "outDir": "./build",
     "strict": true,
-    "lib": ["es2017", "dom"],
+    "lib": [
+      "es2017",
+      "dom"
+    ],
     "sourceMap": true
   },
   "includes": [
@@ -18,4 +22,4 @@
     "**/*.d.ts",
     "typings"
   ]
-}
+}

backend/yarn.lock

@@ -2,537 +2,96 @@
 # yarn lockfile v1
 
 
-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/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==
 
-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/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==
 
-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/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==
 
-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:
-    readable-stream "^2.3.5"
-    safe-buffer "^5.1.1"
-
-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:
+"@protobufjs/eventemitter@^1.1.0":
   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"
+  resolved "https://registry.yarnpkg.com/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz#355cbc98bafad5978f9ed095f397621f1d066b70"
+  integrity sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==
 
-commist@^1.0.0:
+"@protobufjs/fetch@^1.1.0":
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/commist/-/commist-1.1.0.tgz#17811ec6978f6c15ee4de80c45c9beb77cee35d5"
-  integrity sha512-rraC8NXWOEjhADbZe9QBNzLAN5Q3fsTPQtBV+fEVj6xKIgDgNiEVE6ZNfHpZOqfQ21YUzfVNUXLOEZquYvQPPg==
+  resolved "https://registry.yarnpkg.com/@protobufjs/fetch/-/fetch-1.1.0.tgz#ba99fb598614af65700c1619ff06d454b0d84c45"
+  integrity sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==
   dependencies:
-    leven "^2.1.0"
-    minimist "^1.1.0"
+    "@protobufjs/aspromise" "^1.1.1"
+    "@protobufjs/inquire" "^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:
+"@protobufjs/float@^1.0.2":
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
-  integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
+  resolved "https://registry.yarnpkg.com/@protobufjs/float/-/float-1.0.2.tgz#5e9e1abdcb73fc0a7cb8b291df78c8cbd97b87d1"
+  integrity sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==
 
-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:
-    es5-ext "^0.10.50"
-    type "^1.0.1"
-
-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:
-    end-of-stream "^1.0.0"
-    inherits "^2.0.1"
-    readable-stream "^2.0.0"
-    stream-shift "^1.0.0"
-
-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:
+"@protobufjs/inquire@^1.1.0":
   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"
+  resolved "https://registry.yarnpkg.com/@protobufjs/inquire/-/inquire-1.1.0.tgz#ff200e3e7cf2429e2dcafc1140828e8cc638f089"
+  integrity sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==
 
-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"
+"@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==
 
-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:
+"@protobufjs/pool@^1.1.0":
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/reinterval/-/reinterval-1.1.0.tgz#3361ecfa3ca6c18283380dd0bb9546f390f5ece7"
-  integrity sha1-M2Hs+jymwYKDOA3Qu5VG85D17Oc=
+  resolved "https://registry.yarnpkg.com/@protobufjs/pool/-/pool-1.1.0.tgz#09fd15f2d6d3abfa9b65bc366506d6ad7846ff54"
+  integrity sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==
 
-remove-trailing-separator@^1.0.1:
+"@protobufjs/utf8@^1.1.0":
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
-  integrity sha1-wkvOKig62tW8P1jg1IJJuSN52O8=
+  resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
+  integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==
 
-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==
+"@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==
 
-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==
+"@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==
   dependencies:
-    readable-stream "^3.0.0"
+    undici-types "~5.26.4"
 
-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=
+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==
 
-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==
+protobufjs@^6.11.4:
+  version "6.11.4"
+  resolved "https://registry.yarnpkg.com/protobufjs/-/protobufjs-6.11.4.tgz#29a412c38bf70d89e537b6d02d904a6f448173aa"
+  integrity sha512-5kQWPaJHi1WoCpjTGszzQ32PG2F4+wRY6BmAT4Vfw56Q2FZ4YZzK20xUYQH4YkfehY1e6QSICrJquM6xXZNcrw==
   dependencies:
-    safe-buffer "~5.1.0"
+    "@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"
 
-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=
+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==

docker/cloneBuildAndTest.sh

@@ -1,11 +1,7 @@
 #!/bin/bash
 set -e
 
-git clone https://github.com/thomasnordquist/MQTT-Explorer.git /app
-cd /app
-git checkout travis-ui-tests
-
-yarn
+yarn install --frozen-lockfile
 yarn build
 
 yarn ui-test

eslint.config.js

@@ -0,0 +1,15 @@
+const eslint = require('@eslint/js')
+const hooksPlugin = require('eslint-plugin-react-hooks')
+
+module.export = [
+  // eslint.configs.recommended,
+  {
+    // files: ['app/src/**/*'],
+    plugins: {
+      'react-hooks': hooksPlugin,
+    },
+    ignores: ['build/**/*', 'dist/**/*', 'node_modules/**/*', 'app/build/**/*'],
+    ignorePatterns: ['build/**/*', 'dist/**/*', 'node_modules/**/*', 'app/build/**/*'],
+    rules: hooksPlugin.configs.recommended.rules,
+  },
+]

events/EventSystem/CallbackStore.ts

@@ -0,0 +1,4 @@
+export interface CallbackStore {
+  wrappedCallback: any
+  callback: any
+}

events/EventSystem/EventBus.ts

@@ -0,0 +1,12 @@
+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)

events/EventSystem/EventBusInterface.ts

@@ -0,0 +1,8 @@
+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
+}

events/EventSystem/IpcMainEventBus.ts

@@ -1,21 +1,8 @@
-import { IpcMain, ipcMain, ipcRenderer } from 'electron'
+import { IpcMain } from 'electron'
+import { Event } from '../Events'
+import { EventBusInterface } from './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 {
+export class IpcMainEventBus implements EventBusInterface {
   private ipc: IpcMain
   private client: any
   constructor(ipc: IpcMain) {
@@ -45,6 +32,3 @@ class IpcMainEventBus implements EventBusInterface {
     }
   }
 }
-
-export const rendererEvents = new IpcRendererEventBus(ipcRenderer)
-export const backendEvents = new IpcMainEventBus(ipcMain)