Add bad examples

2026-09-13 18:13:02 +00:00 · 2019-10-10 10:42:09 +02:00
163 changed files with 9439 additions and 9147 deletions
@@ -1,9 +1,6 @@
 {
  "language": "en",
  "words": [
-    "Bbreak",
-    "nodered",
-    "goog",
    "thomasnordquist",
    "nowrap",
    "subheader",
@@ -46,7 +43,6 @@
    "DEVTOOLS",
    "mixins",
    "Explorerdmg",
-    "heapsnapshot",
-    "noconflict"
+    "heapsnapshot"
  ]
 }
@@ -1 +0,0 @@
-engine-strict=true
@@ -19,7 +19,7 @@ os:

 osx_image: xcode10.2

-dist: bionic
+dist: xenial

 services:
  - docker
@@ -35,12 +35,6 @@ script:
  - 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" == "linux" ]] && [[ "$TRAVIS_TAG" != "" ]]; then 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
@@ -20,7 +20,6 @@ Pull-Requests and error reports are welcome.
 ## Run from sources

 ```bash
-npm install -g yarn
 yarn
 yarn build
 yarn start
@@ -30,7 +29,6 @@ yarn start

 Launch Application
 ```bash
-npm install -g yarn
 yarn
 yarn dev
 ```
@@ -41,51 +39,25 @@ The `app` directory contains all the rendering logic, the `backend` directory cu

 To achieve a reliable product automated tests run regularly on travis.

- Data model
- MQTT integration
- UI-Tests (The demo is a recorded ui test)
+  - Data model
+  - MQTT integration
+  - UI-Tests (The demo is a recorded ui test)

 ## Run UI-tests
-
 A [mosquitto](https://mosquitto.org/) MQTT broker is required to run the ui-tests.

 Run tests with
-
 ```bash
 # Run chromedriver in a separate terminal session
 ./node_modules/.bin/chromedriver --url-base=wd/hub --port=9515 --verbose
 ```

 Compile and execute tests
-
 ```bash
 npm run build
 node dist/src/spec/webdriverio.js
 ```

-## Write docs
-
-```
-git clone --single-branch -b gh-pages https://github.com/thomasnordquist/MQTT-Explorer.git mqtt-explorer-pages
-cd mqtt-explorer-pages
-bundle install
-bundle exec jekyll serve --incremental
-```
-
-Readme file: `Readme.tpl.md`
-
-Preview is available at
-http://localhost:4000/Readme.tpl
-
-## Update docs
-
-```
-npm install
-./updateReadme.ts
-```
-
-The readme will be generated from the docs.
-
 ## License

 ![CC-BY-ND 4.0](https://img.shields.io/badge/License-CC%20BY--ND%204.0-blue.svg)  
@@ -1,197 +1,180 @@
 <!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
+    <title>MQTT Explorer</title>
+    <script src="./bugtracking.bundle.js"></script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

-    .Resizer.vertical:hover {
-      border-left: 0px solid rgba(130, 130, 130, 0.3);
-      border-right: 8px solid rgba(140, 140, 140, 0.3);
-    }
-
-    .Resizer.disabled {
-      cursor: not-allowed;
-    }
-
-    .Resizer.disabled:hover {
-      border-color: transparent;
-    }
-
-    .example-enter {
-      opacity: 0;
-    }
-
-    .example-enter-active {
-      opacity: 1;
-      transition: opacity 300ms ease-in;
-    }
-
-    .example-exit {
-      opacity: 1;
-    }
-
-    .example-exit-active {
-      opacity: 0;
-      transition: opacity 300ms ease-in;
-    }
-  </style>
-  <script>
-    global = globalThis //<- this should be enough
-  </script>
-</head>
-
-<body>
-  <div id="app" style="font: -webkit-control;"></div>
-  <script>
-    function loadScript(path) {
-      var script = document.createElement('script')
-      script.src = path
-      document.head.appendChild(script)
-    }
-
-    document.addEventListener('DOMContentLoaded', onLoad(), false)
-    function onLoad() {
-      // <% _.forEach(htmlWebpackPlugin.files.js, function(file) { %>loadScript("<%- file %>");<% }); %>
-      // loadScript("<%= JSON.stringify(htmlWebpackPlugin) %>")
-    }
-  </script>
-  <% _.forEach(htmlWebpackPlugin.files.js, function(file) { %>
-    <script src="<%- file %>"></script>
-    <% }); %>
-</body>
-
-</html>
+      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>
@@ -4,30 +4,28 @@
  "description": "",
  "main": "index.js",
  "scripts": {
-    "build": "webpack --mode production",
+    "build": "yarn rebuild && webpack --mode production",
    "dev": "node_modules/.bin/webpack-dev-server --mode development --progress",
-    "test": "cross-env TS_NODE_PROJECT=test/tsconfig.json yarn mochatest",
-    "mochatest": "mocha --require ts-node/register src/**/*.spec.ts"
-  },
-  "engines": {
-    "node": "19"
+    "rebuild": "cd node_modules/heapdump && node-gyp rebuild --target=5.0.7 --arch=x64 --dist-url=https://atom.io/download/electron || echo Could not build heapdump; cd -"
  },
  "author": "",
  "license": "CC-BY-ND-4.0",
  "dependencies": {
-    "@material-ui/core": "4.12",
+    "@material-ui/core": "^4",
    "@material-ui/icons": "^4",
    "@material-ui/lab": "^4.0.0-alpha",
-    "@material-ui/styles": "4.11",
-    "@types/react-transition-group": "^4",
-    "ace-builds": "^1.4.11",
-    "axios": "^0.26.0",
-    "compare-versions": "^3.5.0",
+    "@material-ui/styles": "^4",
+    "@types/react-transition-group": "^2.9.2",
+    "axios": "^0.19.0",
+    "brace": "^0.11.1",
+    "compare-versions": "^3.4.0",
    "copy-text-to-clipboard": "^2.1.0",
-    "d3": "^5.9.7",
+    "d3": "^5.9.2",
    "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": "^4.0.0",
    "get-value": "^3.0.1",
    "immutable": "^4.0.0-rc.12",
    "in-viewport": "^3.6.0",
@@ -35,59 +33,55 @@
    "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",
    "prismjs": "^1.15.0",
-    "react": "^16.11",
-    "react-ace": "^8",
+    "react": "16.8",
+    "react-ace": "^7.0.1",
    "react-dom": "^16.7.0",
    "react-redux": "^7.0.3",
    "react-resize-detector": "^4.1.4",
    "react-split-pane": "^0.1.85",
-    "react-transition-group": "^4",
+    "react-transition-group": "^4.1.1",
    "react-vis": "^1.11.6",
    "redux": "^4.0.1",
-    "redux-batched-actions": "0.5",
+    "redux-batched-actions": "^0.4.1",
    "redux-thunk": "^2.3.0",
    "sha1": "^1.1.1",
    "socket.io-client": "^2.2.0",
-    "uuid": "7"
+    "uuid": "^3.3.2"
  },
  "devDependencies": {
-    "@babel/runtime": "^7.17.2",
    "@types/d3": "^5.7.2",
    "@types/diff": "^4.0.1",
    "@types/get-value": "^3.0.1",
-    "@types/node": "^12.7.8",
+    "@types/node": "^12.0.4",
    "@types/prismjs": "^1.9.1",
-    "@types/react": "^16.9.4",
+    "@types/react": "^16.7.18",
    "@types/react-dom": "^16.0.11",
    "@types/react-redux": "^7.0.9",
    "@types/react-resize-detector": "^4.0.1",
    "@types/sha1": "^1.1.1",
    "@types/socket.io-client": "^1.4.32",
-    "@types/uuid": "^7.0.2",
+    "@types/uuid": "^3.4.4",
    "@types/vis": "^4.21.9",
-    "chai": "^4.2.0",
-    "cross-env": "^7.0.2",
+    "awesome-typescript-loader": "^5.2.1",
    "css-loader": "^3.0.0",
-    "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.5.0",
-    "lodash": "^4.17.21",
-    "mocha": "^9.2.1",
-    "moment": "^2.29.1",
+    "hard-source-webpack-plugin": "^0.13.1",
+    "heapdump": "^0.3.12",
+    "html-webpack-plugin": "^4.0.0-beta.5",
    "node-loader": "^0.6.0",
    "source-map-loader": "^0.2.4",
-    "style-loader": "^1",
-    "ts-loader": "^9.2.6",
-    "typescript": "^4.5.5",
-    "webpack": "^5.69.1",
-    "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.4"
+    "style-loader": "^0.23.1",
+    "typescript": "^3.2.2",
+    "webpack": "^4.28.2",
+    "webpack-bundle-analyzer": "^3.0.3",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.14"
  },
  "peerDependencies": {
-    "electron": "^29"
+    "electron": "^5.0.5"
  }
 }
@@ -45,7 +45,9 @@ export const saveCharts = () => async (dispatch: Dispatch<any>, getState: () =>
    return
  }

-  const charts = getState().charts.get('charts').toArray()
+  const charts = getState()
+    .charts.get('charts')
+    .toArray()

  let viewStates: ConnectionViewStateDictionary | undefined
  try {
@@ -60,55 +62,63 @@ export const saveCharts = () => async (dispatch: Dispatch<any>, getState: () =>
  }
 }

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

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

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

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

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

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

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

 const updateHealth = (dataSourceState: DataSourceState) => (dispatch: Dispatch<any>, getState: () => AppState) => {
  let state
@@ -9,15 +9,13 @@ import {
 import { default as persistentStorage, StorageIdentifier } from '../utils/PersistentStorage'
 import { Dispatch } from 'redux'
 import { showError } from './Global'
-import { promises as fsPromise } from 'fs'
+import { remote } from 'electron'
+import * as fs 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 {
+import { ActionTypes, Action } from '../reducers/ConnectionManager'
+
+interface ConnectionDictionary {
  [s: string]: ConnectionOptions
 }
 const storedConnectionsIdentifier: StorageIdentifier<ConnectionDictionary> = {
@@ -29,12 +27,6 @@ export const loadConnectionSettings = () => async (dispatch: Dispatch<any>, getS
  try {
    await ensureConnectionsHaveBeenInitialized()
    connections = await persistentStorage.load(storedConnectionsIdentifier)
-
-    // Apply migrations
-    if (connections && connectionsMigrator.isMigrationNecessary(connections)) {
-      connections = connectionsMigrator.applyMigrations(connections)
-      await persistentStorage.store(storedConnectionsIdentifier, connections)
-    }
  } catch (error) {
    dispatch(showError(error))
  }
@@ -51,19 +43,21 @@ export const loadConnectionSettings = () => async (dispatch: Dispatch<any>, getS
 }

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

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

-  const openDialogReturnValue = await rendererRpc.call(makeOpenDialogRpc(), {
-    properties: ['openFile'],
-    securityScopedBookmarks: true,
+  return new Promise((resolve, reject) => {
+    remote.dialog.showOpenDialog(
+      { properties: ['openFile'], securityScopedBookmarks: true },
+      (filePaths?: Array<string>) => {
+        const selectedFile = filePaths && filePaths[0]
+        if (!selectedFile) {
+          reject(rejectReasons.noCertificateSelected)
+          return
+        }
+
+        fs.readFile(selectedFile, (error, data) => {
+          if (error) {
+            reject(error)
+            return
+          }
+
+          if (data.length > 16_384 || data.length < 128) {
+            reject(rejectReasons.certificateSizeDoesNotMatch)
+            return
+          }
+
+          resolve({
+            data: data.toString('base64'),
+            name: path.basename(selectedFile),
+          })
+        })
+      }
+    )
  })
-
-  const selectedFile = openDialogReturnValue.filePaths && openDialogReturnValue.filePaths[0]
-  if (!selectedFile) {
-    throw rejectReasons.noCertificateSelected
-  }
-
-  const data = await fsPromise.readFile(selectedFile)
-  if (data.length > 16_384 || data.length < 64) {
-    throw rejectReasons.certificateSizeDoesNotMatch
-  }
-
-  return {
-    data: data.toString('base64'),
-    name: path.basename(selectedFile),
-  }
 }

 export const saveConnectionSettings = () => async (dispatch: Dispatch<any>, getState: () => AppState) => {
@@ -107,13 +111,13 @@ export const updateConnection = (connectionId: string, changeSet: Partial<Connec
  type: ActionTypes.CONNECTION_MANAGER_UPDATE_CONNECTION,
 })

-export const addSubscription = (subscription: Subscription, connectionId: string): Action => ({
+export const addSubscription = (subscription: string, connectionId: string): Action => ({
  connectionId,
  subscription,
  type: ActionTypes.CONNECTION_MANAGER_ADD_SUBSCRIPTION,
 })

-export const deleteSubscription = (subscription: Subscription, connectionId: string): Action => ({
+export const deleteSubscription = (subscription: string, connectionId: string): Action => ({
  connectionId,
  subscription,
  type: ActionTypes.CONNECTION_MANAGER_DELETE_SUBSCRIPTION,
@@ -180,4 +184,31 @@ async function ensureConnectionsHaveBeenInitialized() {

    clearLegacyConnectionOptions()
  }
+
+  // Migrate connections, rewrite dictionary to "keep" it "ordered" (dictionaries do not have a guaranteed order)
+  const mayNeedMigrations = connections && connections['iot.eclipse.org']
+  if (connections && mayNeedMigrations) {
+    let newConnections = {}
+    for (const connection of Object.values(connections)) {
+      addMigratedConnection(newConnections, connection)
+    }
+
+    await persistentStorage.store(storedConnectionsIdentifier, newConnections)
+  }
+}
+
+function addMigratedConnection(newConnections: { [key: string]: ConnectionOptions }, connection: ConnectionOptions) {
+  // The host has been renamed, only change the host if it has not been changed
+  // Also check for ssl since SSL is not yet working
+  if (
+    connection.id === 'iot.eclipse.org' &&
+    connection.host === 'iot.eclipse.org' &&
+    connection.port === 1883 &&
+    !connection.encryption
+  ) {
+    connection.id = 'mqtt.eclipse.org'
+    connection.host = 'mqtt.eclipse.org'
+    connection.name = 'mqtt.eclipse.org'
+  }
+  newConnections[connection.id] = connection
 }
@@ -1,7 +1,7 @@
 import { ActionTypes, ConfirmationRequest } from '../reducers/Global'
 import { Dispatch } from 'redux'

-export const showError = (error?: string | unknown) => ({
+export const showError = (error?: string) => ({
  error,
  type: ActionTypes.showError,
 })
@@ -34,7 +34,7 @@ export const setEditorMode = (editorMode: string): Action => {

 export const publish = (connectionId: string) => (dispatch: Dispatch<Action>, getState: () => AppState) => {
  const state = getState()
-  const topic = state.publish.manualTopic ?? state.tree.get('selectedTopic')?.path()
+  const topic = state.publish.topic

  if (!topic) {
    return
@@ -43,14 +43,12 @@ export const storeSettings = () => async (dispatch: Dispatch<any>, getState: ()
  }
 }

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

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

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

 export const filterTopics = (filterStr: string) => (dispatch: Dispatch<any>, getState: () => AppState) => {
  const { tree } = getState().connection
@@ -109,15 +105,21 @@ export const filterTopics = (filterStr: string) => (dispatch: Dispatch<any>, get
  const topicFilter = filterStr.toLowerCase()

  const nodeFilter = (node: q.TreeNode<TopicViewModel>): boolean => {
-    const topicMatches = node.path().toLowerCase().indexOf(topicFilter) !== -1
+    const topicMatches =
+      node
+        .path()
+        .toLowerCase()
+        .indexOf(topicFilter) !== -1
    if (topicMatches) {
      return true
    }

    const messageMatches =
      node.message &&
-      node.message.payload &&
-      Base64Message.toUnicodeString(node.message.payload).toLowerCase().indexOf(filterStr) !== -1
+      node.message.value &&
+      Base64Message.toUnicodeString(node.message.value)
+        .toLowerCase()
+        .indexOf(filterStr) !== -1

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

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

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

 const debouncedSelectTopic = debounce(
  (topic: q.TreeNode<TopicViewModel>, dispatch: Dispatch<any>, getState: () => AppState) => {
@@ -27,9 +29,9 @@ const debouncedSelectTopic = debounce(

    // Update publish topic
    let setTopicDispatch: any | undefined
-    if (!getState().publish.manualTopic) {
+    if (!getState().publish.topic) {
      setTopicDispatch = setTopic(topic.path())
-    } else if (previouslySelectedTopic && previouslySelectedTopic.path() === getState().publish.manualTopic) {
+    } else if (previouslySelectedTopic && previouslySelectedTopic.path() === getState().publish.topic) {
      setTopicDispatch = setTopic(topic.path())
    }

@@ -72,26 +74,25 @@ function destroyUnreferencedTree(state: AppState) {
  }
 }

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

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

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

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

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

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

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

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

-      const confirmed = await dispatch(
-        globalActions.requestConfirmation(
-          'Confirm delete',
-          `Do you want to clear "${topic.path()}"${childTopicsMessage}?\n\nThis function will send an empty payload (QoS 0, retain) to this and every subtopic, clearing retained topics in the process. Only use this function if you know what you are doing.`
-        )
+    const confirmed = await dispatch(
+      globalActions.requestConfirmation(
+        'Confirm delete',
+        `Do you want to clear "${topic.path()}"${childTopicsMessage}?\n\nThis function will send an empty payload (QoS 0, retain) to this and every subtopic, clearing retained topics in the process. Only use this function if you know what you are doing.`
      )
-      if (!confirmed) {
-        return
-      }
-    }
-
-    dispatch(moveSelectionUpOrDownwards('next'))
-
-    const { connectionId } = getState().connection
-    if (!connectionId) {
+    )
+    if (!confirmed) {
      return
    }
-    const publishEvent = makePublishEvent(connectionId)
-
-    topicsForPurging
-      .filter(t => t.path() !== '' && t.hasMessage())
-      .map(t => t.path())
-      .forEach((path, idx) => {
-        const mqttMessage = {
-          topic: path,
-          payload: null,
-          retain: true,
-          qos: 0 as 0,
-          messageId: undefined,
-        }
-        // Rate limit deletion
-        setTimeout(() => rendererEvents.emit(publishEvent, mqttMessage), 20 * idx)
-      })
  }
+
+  dispatch(moveSelectionUpOrDownwards('next'))
+
+  const { connectionId } = getState().connection
+  if (!connectionId) {
+    return
+  }
+  const publishEvent = makePublishEvent(connectionId)
+
+  topicsForPurging
+    .filter(t => t.path() !== '' && t.hasMessage())
+    .map(t => t.path())
+    .forEach((path, idx) => {
+      const mqttMessage = {
+        topic: path,
+        payload: null,
+        retain: true,
+        qos: 0 as 0,
+      }
+      // Rate limit deletion
+      setTimeout(() => rendererEvents.emit(publishEvent, mqttMessage), 20 * idx)
+    })
+}
@@ -1,94 +0,0 @@
-import { ConfigMigrator, Migration } from '../../utils/ConfigMigrator'
-import { ConnectionDictionary } from '../ConnectionManager'
-import { ConnectionOptions } from '../../model/ConnectionOptions'
-
-export interface ConnectionOptionsV0 {
-  type: 'mqtt'
-  id: string
-  host: string
-  protocol: 'mqtt' | 'ws'
-  basePath?: string
-  port: number
-  name: string
-  username?: string
-  password?: string
-  encryption: boolean
-  certValidation: boolean
-  // selfSignedCertificate?: CertificateParameters
-  // clientCertificate?: CertificateParameters
-  // clientKey?: CertificateParameters
-  clientId?: string
-  subscriptions: Array<string>
-}
-
-let migrations: Migration[] = [
-  // iot.eclipse.org ha moved to mqtt.eclipse.org
-  {
-    from: undefined,
-    apply: (connection: ConnectionOptionsV0): ConnectionOptionsV0 => {
-      if (connection.id == 'iot.eclipse.org' && connection.host == 'iot.eclipse.org' && connection.port == 1883) {
-        return {
-          ...connection,
-          id: 'mqtt.eclipse.org',
-          host: 'mqtt.eclipse.org',
-          name: 'mqtt.eclipse.org',
-        }
-      }
-
-      return {
-        ...connection,
-      }
-    },
-  },
-  // Remove stored clientId if it is the default generated client id. This allows to connect multiple instances of mqtt explorer to the same broker.
-  // A randomly generated clientId will be used if no clientId is set.
-  {
-    from: undefined,
-    apply: (connection: ConnectionOptionsV0): ConnectionOptionsV0 => {
-      if (connection.clientId && /mqtt-explorer-[0-9a-f]{8}/.test(connection.clientId)) {
-        return {
-          ...connection,
-          clientId: undefined,
-        }
-      }
-
-      return {
-        ...connection,
-      }
-    },
-  },
-  // Added QoS level to subscription options
-  {
-    from: undefined,
-    apply: (connection: ConnectionOptionsV0): ConnectionOptions => {
-      return {
-        ...connection,
-        configVersion: 1,
-        subscriptions: connection.subscriptions.map(topic => ({ topic, qos: 0 })),
-      }
-    },
-  },
-]
-
-const connectionMigrator = new ConfigMigrator(migrations)
-
-function isMigrationNecessary(connections: ConnectionDictionary): boolean {
-  return Object.values(connections)
-    .map(connection => connectionMigrator.isMigrationNecessary(connection))
-    .reduce((a, b) => a || b, false)
-}
-
-function applyMigrations(connections: ConnectionDictionary): ConnectionDictionary {
-  let newConnectionDictionary: ConnectionDictionary = {}
-  Object.keys(connections).forEach(key => {
-    let newConnection = connectionMigrator.applyMigrations(connections[key]) as any
-    newConnectionDictionary[newConnection.id] = newConnection
-  })
-
-  return newConnectionDictionary
-}
-
-export const connectionsMigrator = {
-  isMigrationNecessary,
-  applyMigrations,
-}
@@ -6,56 +6,53 @@ import { SettingsState } from '../reducers/Settings'
 import { sortedNodes } from '../sortedNodes'
 import { TopicViewModel } from '../model/TopicViewModel'

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

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

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

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

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

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

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

-    const anyProps: any = {}
-
    return (
      <div className={centerContent}>
        <CssBaseline />
@@ -76,7 +73,7 @@ class App extends React.PureComponent<Props, {}> {
          <ConfirmationDialog confirmationRequests={this.props.confirmationRequests} />
          {this.renderNotification()}
          <React.Suspense fallback={<div></div>}>
-            <Settings {...anyProps} />
+            <Settings />
          </React.Suspense>
          <div className={centerContent}>
            <div className={`${settingsVisible ? contentShift : content}`}>
@@ -160,4 +157,9 @@ const mapStateToProps = (state: AppState) => {
  }
 }

-export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(App))
+export default withStyles(styles)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(App)
+)
@@ -2,20 +2,16 @@ import { Props } from '../Chart'
 import { useMemo } from 'react'
 import { Point } from '../Model'

-function defaultFor(a: number | undefined, b: number) {
-  return a === undefined ? b : a
-}
-
 export function useCustomYDomain(props: Props) {
  return useMemo(() => {
    const data = props.data
    const calculatedDomain = domainForData(data)
    const yDomain: [number, number] = props.range
-      ? [defaultFor(props.range[0], calculatedDomain[0]), defaultFor(props.range[1], calculatedDomain[1])]
+      ? [props.range[0] || calculatedDomain[0], props.range[1] || calculatedDomain[1]]
      : calculatedDomain

    return yDomain
-  }, [props.data, props.range])
+  }, [props.data])
 }

 function domainForData(data: Array<Point>): [number, number] {
@@ -23,10 +19,8 @@ function domainForData(data: Array<Point>): [number, number] {
    const defaultDomain: [number, number] = [-1, 1]
    return defaultDomain
  }
-
  let max = data[0].y
  let min = data[0].y
-
  data.forEach(d => {
    if (max < d.y) {
      max = d.y
@@ -65,4 +65,7 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-export default connect(undefined, mapDispatchToProps)(memo(ColorSettings))
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(memo(ColorSettings))
@@ -60,4 +60,7 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-export default connect(undefined, mapDispatchToProps)(InterpolationSettings)
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(InterpolationSettings)
@@ -33,4 +33,7 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-export default connect(undefined, mapDispatchToProps)(MoveUp)
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(MoveUp)
@@ -95,7 +95,10 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-export default connect(undefined, mapDispatchToProps)(RangeSettings)
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(RangeSettings)

 function useRangeStateToFireUpdateAction(
  rangeFrom: string | number | undefined,
@@ -47,4 +47,7 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-export default connect(undefined, mapDispatchToProps)(memo(Size))
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(memo(Size))
@@ -96,4 +96,7 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-export default connect(undefined, mapDispatchToProps)(TimeRangeSettings)
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(TimeRangeSettings)
@@ -25,7 +25,6 @@ function ChartSettings(props: {
  const [interpolationVisible, setInterpolationVisible] = React.useState(false)
  const [sizeVisible, setSizeVisible] = React.useState(false)
  const [colorVisible, setColorVisible] = React.useState(false)
-  const open = props.open

  const toggleRange = React.useCallback(() => {
    if (open) {
@@ -133,4 +133,7 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-export default connect(undefined, mapDispatchToProps)(memo(TopicChart))
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(memo(TopicChart))
@@ -126,4 +126,7 @@ const styles = (theme: Theme) => ({
  },
 })

-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ChartPanel))
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withStyles(styles)(ChartPanel))
@@ -1,6 +1,7 @@
 import * as React from 'react'
-import { useState, useCallback, memo } 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 Undo from '@material-ui/icons/Undo'
 import { bindActionCreators } from 'redux'
@@ -8,10 +9,8 @@ import { connect } from 'react-redux'
 import { connectionManagerActions } from '../../actions'
 import { ConnectionOptions } from '../../model/ConnectionOptions'
 import { Theme, withStyles } from '@material-ui/core/styles'
-import { Button, Grid, TextField, Tooltip } from '@material-ui/core'
-import { QosSelect } from '../QosSelect'
-import { QoS } from '../../../../backend/src/DataSource/MqttSource'
-import Subscriptions from './Subscriptions'
+
+import { Button, Grid, IconButton, TextField, List, ListItem, ListItemText, Tooltip } from '@material-ui/core'

 interface Props {
  connection: ConnectionOptions
@@ -19,93 +18,116 @@ interface Props {
  managerActions: typeof connectionManagerActions
 }

-const ConnectionSettings = memo(function ConnectionSettings(props: Props) {
-  const [qos, setQos] = useState<QoS>(0)
-  const [topic, setTopic] = useState('')
-  const { classes } = props
+interface State {
+  subscription: string
+}

-  const updateSubscription = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => setTopic(event.target.value),
-    []
-  )
+class ConnectionSettings extends React.Component<Props, State> {
+  constructor(props: any) {
+    super(props)
+    this.state = { subscription: '' }
+  }

-  const handleChange = useCallback(
-    (name: string) => (event: any) => {
-      props.managerActions.updateConnection(props.connection.id, {
-        [name]: event.target.value,
-      })
-    },
-    []
-  )
+  private handleChange = (name: string) => (event: any) => {
+    this.props.managerActions.updateConnection(this.props.connection.id, {
+      [name]: event.target.value,
+    })
+  }

+  private renderSubscriptions() {
+    const connection = this.props.connection
+    return connection.subscriptions.map(subscription => (
+      <Subscription
+        deleteAction={() => this.props.managerActions.deleteSubscription(subscription, connection.id)}
+        subscription={subscription}
+        key={subscription}
+      />
+    ))
+  }
+
+  public render() {
+    const { classes } = this.props
+    return (
+      <div>
+        <form className={classes.container} noValidate={true} autoComplete="off">
+          <Grid container={true} spacing={3}>
+            <Grid item={true} xs={10} className={classes.gridPadding}>
+              <TextField
+                className={classes.fullWidth}
+                label="Subscription"
+                margin="normal"
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                  this.setState({ subscription: event.target.value })
+                }
+              />
+            </Grid>
+            <Grid item={true} xs={2} className={classes.gridPadding}>
+              <Button
+                className={classes.button}
+                color="secondary"
+                onClick={() =>
+                  this.props.managerActions.addSubscription(this.state.subscription, this.props.connection.id)
+                }
+                variant="contained"
+              >
+                <Add /> Add
+              </Button>
+            </Grid>
+            <Grid item={true} xs={12} style={{ padding: 0 }}>
+              <List className={`${classes.topicList} advanced-connection-settings-topic-list`} component="nav">
+                <div className={classes.list}>{this.renderSubscriptions()}</div>
+              </List>
+            </Grid>
+            <Grid item={true} xs={7} className={classes.gridPadding}>
+              <TextField
+                className={classes.fullWidth}
+                label="MQTT Client ID"
+                margin="normal"
+                value={this.props.connection.clientId}
+                onChange={this.handleChange('clientId')}
+              />
+            </Grid>
+            <Grid item={true} xs={3} className={classes.gridPadding}>
+              <div>
+                <Tooltip title="Manage tls connection certificates" placement="top">
+                  <Button
+                    variant="contained"
+                    className={classes.button}
+                    onClick={() => this.props.managerActions.toggleCertificateSettings()}
+                  >
+                    <Lock /> Certificates
+                  </Button>
+                </Tooltip>
+              </div>
+            </Grid>
+            <Grid item={true} xs={2} className={classes.gridPadding}>
+              <Button
+                variant="contained"
+                className={classes.button}
+                onClick={this.props.managerActions.toggleAdvancedSettings}
+              >
+                <Undo /> Back
+              </Button>
+            </Grid>
+          </Grid>
+        </form>
+      </div>
+    )
+  }
+}
+
+const Subscription = (props: { subscription: string; deleteAction: any }) => {
  return (
-    <div>
-      <form className={classes.container} noValidate={true} autoComplete="off">
-        <Grid container={true} spacing={3}>
-          <Grid item={true} xs={8} className={classes.gridPadding}>
-            <TextField
-              className={`${classes.fullWidth} advanced-connection-settings-topic-input`}
-              label="Topic"
-              placeholder="example/topic"
-              margin="normal"
-              value={topic}
-              onChange={updateSubscription}
-            />
-          </Grid>
-          <Grid item={true} xs={2} className={classes.gridPadding}>
-            <div className={classes.qos}>
-              <QosSelect label="QoS" selected={qos} onChange={setQos} />
-            </div>
-          </Grid>
-          <Grid item={true} xs={2} className={classes.gridPadding}>
-            <Button
-              className={classes.button}
-              color="secondary"
-              onClick={() => props.managerActions.addSubscription({ topic, qos }, props.connection.id)}
-              variant="contained"
-            >
-              <Add /> Add
-            </Button>
-          </Grid>
-          <Grid item={true} xs={12} style={{ padding: 0 }}>
-            <Subscriptions connection={props.connection} />
-          </Grid>
-          <Grid item={true} xs={7} className={classes.gridPadding}>
-            <TextField
-              className={classes.fullWidth}
-              label="MQTT Client ID"
-              margin="normal"
-              value={props.connection.clientId}
-              onChange={handleChange('clientId')}
-            />
-          </Grid>
-          <Grid item={true} xs={3} className={classes.gridPadding}>
-            <div>
-              <Tooltip title="Manage tls connection certificates" placement="top">
-                <Button
-                  variant="contained"
-                  className={classes.button}
-                  onClick={() => props.managerActions.toggleCertificateSettings()}
-                >
-                  <Lock /> Certificates
-                </Button>
-              </Tooltip>
-            </div>
-          </Grid>
-          <Grid item={true} xs={2} className={classes.gridPadding}>
-            <Button
-              variant="contained"
-              className={classes.button}
-              onClick={props.managerActions.toggleAdvancedSettings}
-            >
-              <Undo /> Back
-            </Button>
-          </Grid>
-        </Grid>
-      </form>
-    </div>
+    <ListItem style={{ padding: '0 0 0 8px' }}>
+      <ListItemText>
+        <IconButton onClick={props.deleteAction} style={{ padding: '6px' }}>
+          <Delete />
+        </IconButton>
+        {props.subscription}
+      </ListItemText>
+    </ListItem>
  )
-})
+}

 const mapDispatchToProps = (dispatch: any) => {
  return {
@@ -120,13 +142,19 @@ const styles = (theme: Theme) => ({
  gridPadding: {
    padding: '0 12px !important',
  },
+  topicList: {
+    height: '180px',
+    overflowY: 'scroll' as 'scroll',
+    margin: '8px 16px',
+    backgroundColor: theme.palette.background.default,
+  },
  button: {
    marginTop: theme.spacing(3),
    float: 'right' as 'right',
  },
-  qos: {
-    marginTop: theme.spacing(1),
-  },
 })

-export default connect(undefined, mapDispatchToProps)(withStyles(styles)(ConnectionSettings))
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(withStyles(styles)(ConnectionSettings))
@@ -1,5 +1,7 @@
 import * as React from 'react'
+import Add from '@material-ui/icons/Add'
 import ClearAdornment from '../helper/ClearAdornment'
+import Delete from '@material-ui/icons/Delete'
 import Lock from '@material-ui/icons/Lock'
 import { bindActionCreators } from 'redux'
 import { Button, Theme, Tooltip, Typography } from '@material-ui/core'
@@ -79,4 +81,7 @@ const styles = (theme: Theme) => ({
  },
 })

-export default connect(undefined, mapDispatchToProps)(withStyles(styles)(CertificateFileSelection))
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(withStyles(styles)(CertificateFileSelection))
@@ -104,4 +104,7 @@ const styles = (theme: Theme) => ({
  },
 })

-export default connect(undefined, mapDispatchToProps)(withStyles(styles)(Certificates))
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(withStyles(styles)(Certificates))
@@ -1,7 +1,7 @@
 import ConnectButton from './ConnectButton'
+import Delete from '@material-ui/icons/Delete'
 import React, { useCallback, useState } from 'react'
 import Save from '@material-ui/icons/Save'
-import Delete from '@material-ui/icons/Delete'
 import Settings from '@material-ui/icons/Settings'
 import Visibility from '@material-ui/icons/Visibility'
 import VisibilityOff from '@material-ui/icons/VisibilityOff'
@@ -285,4 +285,7 @@ const styles = (theme: Theme) => ({
  },
 })

-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ConnectionSettings))
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withStyles(styles)(ConnectionSettings))
@@ -134,4 +134,7 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ConnectionSetup))
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withStyles(styles)(ConnectionSetup))
@@ -51,4 +51,7 @@ export const connectionItemStyle = (theme: Theme) => ({
  },
 })

-export default connect(null, mapDispatchToProps)(withStyles(connectionItemStyle)(ConnectionItem))
+export default connect(
+  null,
+  mapDispatchToProps
+)(withStyles(connectionItemStyle)(ConnectionItem))
@@ -77,4 +77,7 @@ const mapStateToProps = (state: AppState) => {
  }
 }

-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ProfileList))
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withStyles(styles)(ProfileList))
@@ -1,90 +0,0 @@
-import React, { useCallback, useState } from 'react'
-import Delete from '@material-ui/icons/Delete'
-import { connectionManagerActions } from '../../actions'
-import { ConnectionOptions } from '../../model/ConnectionOptions'
-import {
-  IconButton,
-  TableContainer,
-  Table,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableBody,
-  Paper,
-  Theme,
-} from '@material-ui/core'
-import { bindActionCreators } from 'redux'
-import { withStyles } from '@material-ui/styles'
-import { connect } from 'react-redux'
-
-function Subscriptions(props: {
-  classes: any
-  connection: ConnectionOptions
-  managerActions: typeof connectionManagerActions
-}) {
-  const { classes, connection, managerActions } = props
-
-  return (
-    <TableContainer component={Paper} className={`${classes.topicList} advanced-connection-settings-topic-list`}>
-      <Table size="small">
-        <TableHead>
-          <TableRow>
-            <TableCell align="left" padding="checkbox" className={classes.tableTitleCell}></TableCell>
-            <TableCell className={classes.tableTitleCell}>Topic</TableCell>
-            <TableCell align="right" className={classes.tableTitleCell}>
-              QoS
-            </TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {connection.subscriptions.map(subscription => (
-            <TableRow key={subscription.topic + '_qos_' + subscription.qos}>
-              <TableCell align="right" className={classes.tableCell}>
-                <IconButton
-                  onClick={() => managerActions.deleteSubscription(subscription, connection.id)}
-                  style={{ padding: '6px' }}
-                >
-                  <Delete />
-                </IconButton>
-              </TableCell>
-
-              <TableCell component="th" scope="row" className={classes.tableCell}>
-                {subscription.topic}
-              </TableCell>
-              <TableCell align="right" className={classes.tableCell}>
-                {subscription.qos}
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  )
-}
-
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    managerActions: bindActionCreators(connectionManagerActions, dispatch),
-  }
-}
-
-const styles = (theme: Theme) => ({
-  tableCell: {
-    paddingTop: 0,
-    paddingBottom: 0,
-    wordBbreak: 'break-word',
-  },
-  tableTitleCell: {
-    paddingTop: `${theme.spacing(0.5)}px`,
-    paddingBottom: `${theme.spacing(0.5)}px`,
-  },
-  topicList: {
-    height: '196px',
-    overflowY: 'scroll' as 'scroll',
-    margin: `${theme.spacing(1)}px ${theme.spacing(1)}px 0 ${theme.spacing(1)}px`,
-    backgroundColor: theme.palette.background.default,
-    width: 'auto',
-  },
-})
-
-export default connect(undefined, mapDispatchToProps)(withStyles(styles)(Subscriptions))
@@ -5,7 +5,7 @@ let heapdump: any

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

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

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

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

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

-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(PauseButton))
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withStyles(styles)(PauseButton))
@@ -35,7 +35,6 @@ function SearchBar(props: {

  useGlobalKeyEventHandler(undefined, event => {
    const isCharacter = event.key.length === 1
-    const isModifierKey = event.metaKey || event.ctrlKey
    const isAllowedControlCharacter = event.keyCode === KeyCodes.backspace || event.keyCode === KeyCodes.delete
    const tagNameBlacklist = ['INPUT', 'TEXTAREA', 'RADIO', 'CHECKBOX', 'OPTION', 'FORM']

@@ -44,7 +43,6 @@ function SearchBar(props: {

    if (
      (isCharacter || isAllowedControlCharacter) &&
-      !isModifierKey &&
      !event.defaultPrevented &&
      !hasFocus &&
      tagElementIsNotBlacklisted &&
@@ -142,4 +140,7 @@ const styles = (theme: Theme) => ({
  },
 })

-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(SearchBar))
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withStyles(styles)(SearchBar))
@@ -103,4 +103,7 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(TitleBar))
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withStyles(styles)(TitleBar))
@@ -123,8 +123,8 @@ function renderStat(tree: q.Tree<TopicViewModel>, stat: Stats) {
    return null
  }

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

  return (
@@ -255,4 +255,9 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

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

 interface Props {
  actions: {
@@ -89,4 +82,9 @@ const styles = (theme: Theme) => ({
  },
 })

-export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(TimeLocaleSettings))
+export default withStyles(styles)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(TimeLocaleSettings)
+)
@@ -85,4 +85,7 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-export default connect(undefined, mapDispatchToProps)(ChartPreview)
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(ChartPreview)
@@ -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>) {
@@ -1,20 +0,0 @@
-import React, { memo } from 'react'
-import { Message } from '../../../../backend/src/Model'
-import { Tooltip } from '@material-ui/core'
-
-export const MessageId = memo(function MessageId(props: { message: Message; addComma?: boolean }) {
-  const { message, addComma } = props
-
-  if (!message.messageId) {
-    return null
-  }
-
-  return (
-    <Tooltip title="MessageIds are used to signal a successful transmission of a message.">
-      <span>
-        #msg: {message.messageId}
-        {addComma ? ', ' : ''}
-      </span>
-    </Tooltip>
-  )
-})
@@ -30,5 +30,4 @@ const Panel = (props: {
  )
 }

-// @ts-ignore
 export default withStyles(styles)(Panel)
@@ -1,14 +1,11 @@
 import * as React from 'react'
 import { default as AceEditor } from 'react-ace'
 import { Theme, withTheme } from '@material-ui/core'
-import 'ace-builds'
-import 'ace-builds/webpack-resolver'
-import 'ace-builds/src-noconflict/mode-json'
-import 'ace-builds/src-noconflict/mode-xml'
-import 'ace-builds/src-noconflict/snippets/json'
-import 'ace-builds/src-noconflict/snippets/xml'
-import 'ace-builds/src-noconflict/mode-text'
-import 'ace-builds/src-noconflict/theme-monokai'
+import 'brace/mode/json'
+import 'brace/theme/dawn'
+import 'brace/theme/monokai'
+import 'brace/mode/xml'
+import 'brace/mode/text'
 import 'react-ace'

 function Editor(props: {
@@ -16,7 +13,6 @@ function Editor(props: {
  theme: Theme
  value: string | undefined
  onChange: (value: string) => void
-  editorRef: React.Ref<AceEditor>
 }) {
  const editorOptions = {
    showLineNumbers: false,
@@ -25,17 +21,12 @@ function Editor(props: {

  return (
    <AceEditor
-      ref={props.editorRef}
      style={{}}
      mode={props.editorMode}
      theme={props.theme.palette.type === 'dark' ? 'monokai' : 'dawn'}
      name="UNIQUE_ID_OF_DIV"
      width="100%"
      height="200px"
-      enableSnippets={true}
-      enableBasicAutocompletion={true}
-      enableLiveAutocompletion={true}
-      showPrintMargin={false}
      showGutter={true}
      value={props.value}
      onChange={props.onChange}
@@ -4,7 +4,6 @@ import { FormControlLabel, Radio, RadioGroup } from '@material-ui/core'
 interface Props {
  value: string
  onChange: (event: React.ChangeEvent<{}>, value: string) => void
-  focusEditor: () => void
 }
 export function EditorModeSelect(props: Props) {
  const labelStyle = { margin: '0 8px 0 8px' }
@@ -12,7 +11,6 @@ export function EditorModeSelect(props: Props) {
    <RadioGroup
      style={{ display: 'inline-block', float: 'left' }}
      value={props.value}
-      onFocus={props.focusEditor}
      onChange={props.onChange}
      row={true}
    >
@@ -3,7 +3,7 @@ import FormatAlignLeft from '@material-ui/icons/FormatAlignLeft'
 import Message from './Model/Message'
 import Navigation from '@material-ui/icons/Navigation'
 import PublishHistory from './PublishHistory'
-import React, { useCallback, useMemo, useState, useRef, memo } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import RetainSwitch from './RetainSwitch'
 import TopicInput from './TopicInput'
 import { AppState } from '../../../reducers'
@@ -13,7 +13,6 @@ import { connect } from 'react-redux'
 import { EditorModeSelect } from './EditorModeSelect'
 import { globalActions, publishActions } from '../../../actions'
 import { KeyCodes } from '../../../utils/KeyCodes'
-import { default as AceEditor } from 'react-ace'

 interface Props {
  connectionId?: string
@@ -42,13 +41,8 @@ function useHistory(): [Array<Message>, (topic: string, payload?: string) => voi
 }

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

-  const focusEditor = useCallback(() => {
-    editorRef.current?.editor.focus()
-  }, [editorRef])
-
  const publish = useCallback(() => {
    if (!props.connectionId) {
      return
@@ -76,23 +70,17 @@ function Publish(props: Props) {

  return useMemo(
    () => (
-      <div style={{ flexGrow: 1, width: '100%' }} onKeyDown={handleSubmit}>
+      <div style={{ flexGrow: 1 }} onKeyDown={handleSubmit}>
        <TopicInput />
        <div style={{ width: '100%', display: 'block' }}>
          <EditorMode
-            focusEditor={focusEditor}
            actions={props.actions}
            globalActions={props.globalActions}
            payload={props.payload}
            editorMode={props.editorMode}
            publish={publish}
          />
-          <Editor
-            value={props.payload}
-            editorMode={props.editorMode}
-            onChange={props.actions.setPayload}
-            editorRef={editorRef as any}
-          />
+          <Editor value={props.payload} editorMode={props.editorMode} onChange={props.actions.setPayload} />
          <RetainSwitch />
        </div>
        <PublishHistory history={history} />
@@ -102,10 +90,9 @@ function Publish(props: Props) {
  )
 }

-const EditorMode = memo(function EditorMode(props: {
+function EditorMode(props: {
  payload?: string
  editorMode: string
-  focusEditor: () => void
  actions: typeof publishActions
  globalActions: typeof globalActions
  publish: () => void
@@ -122,48 +109,46 @@ 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 as Error)?.message}`)
+        props.globalActions.showError(`Format error: ${error.message}`)
      }
    }
  }, [props.payload])

-  return (
-    <div style={{ marginTop: '16px' }}>
-      <div style={{ width: '100%', lineHeight: '64px', textAlign: 'center' }}>
-        <EditorModeSelect value={props.editorMode} onChange={updateMode} focusEditor={props.focusEditor} />
-        <FormatJsonButton editorMode={props.editorMode} focusEditor={props.focusEditor} formatJson={formatJson} />
-        <div style={{ float: 'right' }}>
-          <PublishButton publish={props.publish} focusEditor={props.focusEditor} />
+  const renderFormatJson = useCallback(() => {
+    if (props.editorMode !== 'json') {
+      return null
+    }
+
+    return (
+      <Tooltip title="Format JSON">
+        <Fab
+          style={{ width: '36px', height: '36px', margin: '0 8px' }}
+          onClick={formatJson}
+          id="sidebar-publish-format-json"
+        >
+          <FormatAlignLeft style={{ fontSize: '20px' }} />
+        </Fab>
+      </Tooltip>
+    )
+  }, [formatJson, props.editorMode, props.publish])
+
+  return useMemo(
+    () => (
+      <div style={{ marginTop: '16px' }}>
+        <div style={{ width: '100%', lineHeight: '64px', textAlign: 'center' }}>
+          <EditorModeSelect value={props.editorMode} onChange={updateMode} />
+          {renderFormatJson()}
+          <div style={{ float: 'right' }}>
+            <PublishButton publish={props.publish} />
+          </div>
        </div>
      </div>
-    </div>
+    ),
+    [props.editorMode, renderFormatJson]
  )
-})
+}

-const FormatJsonButton = React.memo(function FormatJsonButton(props: {
-  editorMode: string
-  focusEditor: () => void
-  formatJson: () => void
-}) {
-  if (props.editorMode !== 'json') {
-    return null
-  }
-
-  return (
-    <Tooltip title="Format JSON">
-      <Fab
-        style={{ width: '36px', height: '36px', margin: '0 8px' }}
-        onClick={props.formatJson}
-        onFocus={props.focusEditor}
-        id="sidebar-publish-format-json"
-      >
-        <FormatAlignLeft style={{ fontSize: '20px' }} />
-      </Fab>
-    </Tooltip>
-  )
-})
-
-const PublishButton = memo(function PublishButton(props: { publish: () => void; focusEditor: () => void }) {
+const PublishButton = (props: { publish: () => void }) => {
  const handleClickPublish = useCallback(
    (e: React.MouseEvent) => {
      e.stopPropagation()
@@ -172,19 +157,15 @@ const PublishButton = memo(function PublishButton(props: { publish: () => void;
    [props.publish]
  )

-  return (
-    <Button
-      variant="contained"
-      size="small"
-      color="primary"
-      onClick={handleClickPublish}
-      onFocus={props.focusEditor}
-      id="publish-button"
-    >
-      <Navigation style={{ marginRight: '8px' }} /> Publish
-    </Button>
+  return useMemo(
+    () => (
+      <Button variant="contained" size="small" color="primary" onClick={handleClickPublish} id="publish-button">
+        <Navigation style={{ marginRight: '8px' }} /> Publish
+      </Button>
+    ),
+    [handleClickPublish]
  )
-})
+}

 const mapDispatchToProps = (dispatch: any) => {
  return {
@@ -195,11 +176,14 @@ const mapDispatchToProps = (dispatch: any) => {

 const mapStateToProps = (state: AppState) => {
  return {
-    topic: state.publish.manualTopic,
+    topic: state.publish.topic,
    payload: state.publish.payload,
    editorMode: state.publish.editorMode,
    retain: state.publish.retain,
  }
 }

-export default connect(mapStateToProps, mapDispatchToProps)(withTheme(Publish))
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withTheme(Publish))
@@ -34,4 +34,7 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-export default connect(undefined, mapDispatchToProps)(PublishHistory)
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(PublishHistory)
@@ -1,34 +0,0 @@
-import * as React from 'react'
-import { connect } from 'react-redux'
-import { AppState } from '../../../reducers'
-import { bindActionCreators } from 'redux'
-import { publishActions } from '../../../actions'
-import { QosSelect } from '../../QosSelect'
-import { QoS } from '../../../../../backend/src/DataSource/MqttSource'
-
-interface Props {
-  qos: QoS
-  actions: {
-    publish: typeof publishActions
-  }
-}
-
-function QosPublishOption(props: Props) {
-  return <QosSelect onChange={props.actions.publish.setQoS} selected={props.qos} />
-}
-
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    actions: {
-      publish: bindActionCreators(publishActions, dispatch),
-    },
-  }
-}
-
-const mapStateToProps = (state: AppState) => {
-  return {
-    qos: state.publish.qos,
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(QosPublishOption)
@@ -1,8 +1,18 @@
 import * as React from 'react'
 import { TextField, MenuItem, Tooltip } from '@material-ui/core'
-import { QoS } from '../../../backend/src/DataSource/MqttSource'
+import { connect } from 'react-redux'
+import { AppState } from '../../../reducers'
+import { bindActionCreators } from 'redux'
+import { publishActions } from '../../../actions'

-export function QosSelect(props: { selected: QoS; onChange: (value: QoS) => void; label?: string }) {
+interface Props {
+  qos: 0 | 1 | 2
+  actions: {
+    publish: typeof publishActions
+  }
+}
+
+function QosSelect(props: Props) {
  const tooltipStyle = { textAlign: 'center' as 'center', width: '100%' }
  const itemStyle = { padding: '0' }

@@ -12,16 +22,16 @@ export function QosSelect(props: { selected: QoS; onChange: (value: QoS) => void
      if (value !== 0 && value !== 1 && value !== 2) {
        return
      }
-      props.onChange(value)
+
+      props.actions.publish.setQoS(value)
    },
-    [props.onChange]
+    [props.actions.publish]
  )

  return (
    <TextField
      select={true}
-      label={props.label}
-      value={props.selected}
+      value={props.qos}
      margin="normal"
      style={{ margin: '8px 0 8px 8px' }}
      onChange={onChangeQos}
@@ -45,4 +55,21 @@ export function QosSelect(props: { selected: QoS; onChange: (value: QoS) => void
  )
 }

-export default React.memo(QosSelect)
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: {
+      publish: bindActionCreators(publishActions, dispatch),
+    },
+  }
+}
+
+const mapStateToProps = (state: AppState) => {
+  return {
+    qos: state.publish.qos,
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(QosSelect)
@@ -1,4 +1,4 @@
-import QosSelect from './QosPublishOption'
+import QosSelect from './QosSelect'
 import React from 'react'
 import { Checkbox, FormControlLabel, Tooltip } from '@material-ui/core'
 import { publishActions } from '../../../actions'
@@ -41,4 +41,7 @@ const mapStateToProps = (state: AppState) => {
  }
 }

-export default connect(mapStateToProps, mapDispatchToProps)(RetainSwitch)
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(RetainSwitch)
@@ -1,21 +1,18 @@
 import ClearAdornment from '../../helper/ClearAdornment'
-import React, { useCallback, useMemo, useRef } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { FormControl, Input, InputLabel } from '@material-ui/core'
 import { publishActions } from '../../../actions'
 import { bindActionCreators } from 'redux'
 import { AppState } from '../../../reducers'
 import { connect } from 'react-redux'

-function TopicInput(props: { actions: typeof publishActions; manualTopic?: string; selectedTopic?: string }) {
-  const inputElement = useRef<HTMLInputElement>(null)
-
+function TopicInput(props: { actions: typeof publishActions; topic?: string }) {
  const updateTopic = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    props.actions.setTopic(e.target.value)
  }, [])

  const clearTopic = useCallback(() => {
    props.actions.setTopic('')
-    inputElement.current?.focus()
  }, [])

  const onTopicBlur = useCallback((e: React.FocusEvent<HTMLInputElement>) => {
@@ -24,7 +21,7 @@ function TopicInput(props: { actions: typeof publishActions; manualTopic?: strin
    }
  }, [])

-  const topicStr = props.manualTopic || ''
+  const topicStr = props.topic || ''

  return useMemo(
    () => (
@@ -32,7 +29,6 @@ function TopicInput(props: { actions: typeof publishActions; manualTopic?: strin
        <FormControl style={{ width: '100%' }}>
          <InputLabel htmlFor="publish-topic">Topic</InputLabel>
          <Input
-            inputRef={inputElement}
            id="publish-topic"
            value={topicStr}
            startAdornment={<span />}
@@ -40,7 +36,7 @@ function TopicInput(props: { actions: typeof publishActions; manualTopic?: strin
            onBlur={onTopicBlur}
            onChange={updateTopic}
            multiline={false}
-            placeholder={props.selectedTopic ?? 'example/topic'}
+            placeholder="example/topic"
          />
        </FormControl>
      </div>
@@ -57,9 +53,11 @@ const mapDispatchToProps = (dispatch: any) => {

 const mapStateToProps = (state: AppState) => {
  return {
-    manualTopic: state.publish.manualTopic,
-    selectedTopic: state.tree.get('selectedTopic')?.path(),
+    topic: state.publish.topic,
  }
 }

-export default connect(mapStateToProps, mapDispatchToProps)(TopicInput)
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TopicInput)
@@ -99,4 +99,9 @@ const styles = (theme: Theme) => ({
  },
 })

-export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(Sidebar))
+export default withStyles(styles)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(Sidebar)
+)
@@ -66,4 +66,7 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-export default connect(null, mapDispatchToProps)(withStyles(styles, { withTheme: true })(Topic))
+export default connect(
+  null,
+  mapDispatchToProps
+)(withStyles(styles, { withTheme: true })(Topic))
@@ -8,7 +8,7 @@ export const TopicDeleteButton = (props: {
  deleteTopicAction: (node: q.TreeNode<any>) => void
 }) => {
  const { node } = props
-  if (!node || !node.message || !node.message.payload) {
+  if (!node || !node.message || !node.message.value) {
    return null
  }
  return (
@@ -43,4 +43,7 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-export default connect(undefined, mapDispatchToProps)(TopicPanel)
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(TopicPanel)
@@ -40,7 +40,7 @@ function ActionButtons(props: {
        </Tooltip>
      </ToggleButton>
      <ToggleButton className={props.classes.toggleButton} value="raw" id="valueRendererDisplayMode-raw">
-        <Tooltip title="Raw / formatted JSON / formatted sparkplugb protojson">
+        <Tooltip title="Raw / formatted JSON">
          <span>
            <Reorder className={props.classes.toggleButtonIcon} />
          </span>
@@ -73,4 +73,7 @@ const mapStateToProps = (state: AppState) => {
  }
 }

-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ActionButtons))
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withStyles(styles)(ActionButtons))
@@ -33,4 +33,7 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-export default connect(undefined, mapDispatchToProps)(DeleteSelectedTopicButton)
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(DeleteSelectedTopicButton)
@@ -12,7 +12,6 @@ import { bindActionCreators } from 'redux'
 import { chartActions } from '../../../actions'
 import { connect } from 'react-redux'
 import CustomIconButton from '../../helper/CustomIconButton'
-import { MessageId } from '../MessageId'

 const throttle = require('lodash.throttle')

@@ -82,25 +81,19 @@ class MessageHistory extends React.PureComponent<Props, State> {
    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 value = message.value ? Base64Message.toUnicodeString(message.value) : ''
      const element = {
        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>
-              &nbsp;
-              <MessageId message={message} />
-            </span>
+            <DateFormatter date={message.received} />
+            {previousMessage && previousMessage !== message ? (
+              <i>
+                (-
+                <DateFormatter date={message.received} intervalSince={previousMessage.received} />)
+              </i>
+            ) : null}
            <div style={{ float: 'right' }}>
              <Copy value={value} />
            </div>
@@ -113,7 +106,7 @@ class MessageHistory extends React.PureComponent<Props, State> {
    })

    const isMessagePlottable =
-      node.message && node.message.payload && isPlottable(Base64Message.toUnicodeString(node.message.payload))
+      node.message && node.message.value && isPlottable(Base64Message.toUnicodeString(node.message.value))
    return (
      <div>
        <History
@@ -127,7 +120,9 @@ class MessageHistory extends React.PureComponent<Props, State> {
              >
                <ShowChart style={{ marginTop: '-5px' }} />
              </CustomIconButton>
-            ) : undefined
+            ) : (
+              undefined
+            )
          }
          onClick={this.displayMessage}
        >
@@ -144,4 +139,7 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-export default connect(null, mapDispatchToProps)(MessageHistory)
+export default connect(
+  null,
+  mapDispatchToProps
+)(MessageHistory)
@@ -13,7 +13,6 @@ 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'

 interface Props {
  node?: q.TreeNode<any>
@@ -37,7 +36,7 @@ function ValuePanel(props: Props) {
  const { node, compareMessage } = props

  function renderViewOptions() {
-    if (!props.node || !props.node.message) {
+    if (!props.node || !props.node.message || !props.node.mqttMessage) {
      return null
    }

@@ -47,7 +46,7 @@ function ValuePanel(props: Props) {
          <ActionButtons />
        </span>
        <span style={{ flex: 6, textAlign: 'right' }}>
-          {props.node.message.retain ? <DeleteSelectedTopicButton /> : null}
+          {props.node.mqttMessage.retain ? <DeleteSelectedTopicButton /> : null}
        </span>
        {messageMetaInfo()}
      </div>
@@ -55,16 +54,13 @@ function ValuePanel(props: Props) {
  }

  function messageMetaInfo() {
-    if (!props.node || !props.node.message) {
+    if (!props.node || !props.node.message || !props.node.mqttMessage) {
      return null
    }

    return (
      <span style={{ width: '100%', paddingLeft: '8px', flex: 6 }}>
-        <Typography style={{ textAlign: 'right' }}>
-          <MessageId message={props.node.message} addComma={true} />
-          {`QoS: ${props.node.message.qos}`}
-        </Typography>
+        <Typography style={{ textAlign: 'right' }}>QoS: {props.node.mqttMessage.qos}</Typography>
        <Typography style={{ textAlign: 'right' }}>
          <i>
            <DateFormatter date={props.node.message.received} />
@@ -86,8 +82,8 @@ function ValuePanel(props: Props) {
  )

  const copyValue =
-    node && node.message && node.message.payload ? (
-      <Copy value={Base64Message.toUnicodeString(node.message.payload)} />
+    node && node.message && node.message.value ? (
+      <Copy value={Base64Message.toUnicodeString(node.message.value)} />
    ) : null

  return (
@@ -128,5 +124,7 @@ const styles = (theme: Theme) => ({
  },
 })

-// @ts-ignore
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ValuePanel))
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withStyles(styles)(ValuePanel))
@@ -4,9 +4,9 @@ import CodeDiff from '../CodeDiff'
 import { AppState } from '../../../reducers'
 import { Base64Message } from '../../../../../backend/src/Model/Base64Message'
 import { connect } from 'react-redux'
+import { default as ReactResizeDetector } from 'react-resize-detector'
 import { ValueRendererDisplayMode } from '../../../reducers/Settings'
-import { Fade } from '@material-ui/core'
-import { Decoder } from '../../../../../backend/src/Model/Decoder'
+import { Typography, Fade, Grow } from '@material-ui/core'

 interface Props {
  message: q.Message
@@ -63,12 +63,12 @@ class ValueRenderer extends React.Component<Props, State> {
  }

  private renderRawMode(message: q.Message, compare?: q.Message) {
-    if (!message.payload) {
+    if (!message.value) {
      return
    }
-    const [value, valueLanguage] = this.convertMessage(message.payload)
+    const [value, valueLanguage] = this.convertMessage(message.value)
    const [compareStr, compareStrLanguage] =
-      compare && compare.payload ? this.convertMessage(compare.payload) : [undefined, undefined]
+      compare && compare.value ? this.convertMessage(compare.value) : [undefined, undefined]

    return (
      <div>
@@ -83,12 +83,7 @@ class ValueRenderer extends React.Component<Props, State> {
  }

  public render() {
-    return (
-      <div style={{ padding: '0px 0px 8px 0px', width: '100%' }}>
-        {this.props.message?.payload?.decoder === Decoder.SPARKPLUG && 'Decoded SparkplugB'}
-        {this.renderValue()}
-      </div>
-    )
+    return <div style={{ padding: '0px 0px 8px 0px', width: '100%' }}>{this.renderValue()}</div>
  }

  public renderValue() {
@@ -100,12 +95,12 @@ class ValueRenderer extends React.Component<Props, State> {
    if (renderMode === 'raw') {
      return this.renderRawMode(message, compareWith)
    }
-    if (!message.payload) {
+    if (!message.value) {
      return null
    }

-    const compareValue = compareMessage.payload || message.payload
-    const [current, currentLanguage] = this.convertMessage(message.payload)
+    const compareValue = compareMessage.value || message.value
+    const [current, currentLanguage] = this.convertMessage(message.value)
    const [compare, compareLanguage] = this.convertMessage(compareValue)

    const language = currentLanguage === compareLanguage && compareLanguage === 'json' ? 'json' : undefined
@@ -28,7 +28,7 @@ function filterUsingTimeRange(startTime: number | undefined, data: Array<q.Messa
 function nodeToHistory(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
+      const value = message.value ? toPlottableValue(Base64Message.toUnicodeString(message.value)) : NaN
      return { x: message.received.getTime(), y: toPlottableValue(value) }
    })
    .filter(data => !isNaN(data.y as any)) as any
@@ -37,9 +37,9 @@ function nodeToHistory(startTime: number | undefined, history: q.MessageHistory)
 function nodeDotPathToHistory(startTime: number | undefined, history: q.MessageHistory, dotPath: string) {
  return filterUsingTimeRange(startTime, history.toArray())
    .map((message: q.Message) => {
-      let json: any = {}
+      let json = {}
      try {
-        json = message.payload ? JSON.parse(Base64Message.toUnicodeString(message.payload)) : {}
+        json = message.value ? JSON.parse(Base64Message.toUnicodeString(message.value)) : {}
      } catch (ignore) {}

      const value = dotProp.get(json, dotPath)
@@ -27,17 +27,17 @@ class TreeNodeTitle extends React.PureComponent<TreeNodeProps, {}> {

  private truncatedMessage() {
    const limit = 400
-    if (!this.props.treeNode.message || !this.props.treeNode.message.payload) {
+    if (!this.props.treeNode.message || !this.props.treeNode.message.value) {
      return ''
    }

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

  private renderValue() {
    return this.props.treeNode.message &&
-      this.props.treeNode.message.payload &&
+      this.props.treeNode.message.value &&
      this.props.treeNode.message.length > 0 ? (
      <span key="value" className={this.props.classes.value}>
        {' '}
@@ -81,7 +81,7 @@ function TreeNodeComponent(props: Props) {
  const mouseOver = useCallback(
    (event: React.MouseEvent) => {
      event.stopPropagation()
-      if (settings.get('selectTopicWithMouseOver') && treeNode && treeNode.message && treeNode.message.payload) {
+      if (settings.get('selectTopicWithMouseOver') && treeNode && treeNode.message && treeNode.message.value) {
        didSelectTopic()
      }
    },
@@ -91,26 +91,23 @@ class TreeComponent extends React.PureComponent<Props, State> {
    const updateInterval = Math.max(expectedRenderTime * 7, 300)
    const timeUntilNextUpdate = updateInterval - (performance.now() - this.renderTime)

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

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

  public componentWillUpdate() {
@@ -172,4 +169,7 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-export default connect(mapStateToProps, mapDispatchToProps)(TreeComponent)
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TreeComponent)
@@ -13,7 +13,6 @@ import { Theme, withStyles } from '@material-ui/core/styles'
 import { updateNotifierActions } from '../actions'

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

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

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

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

  private allowPrereleaseIfOwnVersionIsBeta(release: GithubRelease, ownVersion: string) {
@@ -270,4 +266,9 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(UpdateNotifier))
+export default withStyles(styles)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(UpdateNotifier)
+)
@@ -59,4 +59,7 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-export default connect(undefined, mapDispatchToProps)(Copy)
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(Copy)
@@ -1,6 +1,5 @@
 import { MqttOptions } from '../../../backend/src/DataSource'
 import { v4 } from 'uuid'
-import { Subscription } from '../../../backend/src/DataSource/MqttSource'
 const sha1 = require('sha1')

 export interface CertificateParameters {
@@ -8,9 +7,7 @@ export interface CertificateParameters {
  /** @property data base64 encoded data */
  data: string
 }
-
 export interface ConnectionOptions {
-  configVersion: 1
  type: 'mqtt'
  id: string
  host: string
@@ -26,7 +23,7 @@ export interface ConnectionOptions {
  clientCertificate?: CertificateParameters
  clientKey?: CertificateParameters
  clientId?: string
-  subscriptions: Array<Subscription>
+  subscriptions: Array<string>
 }

 export function toMqttConnection(options: ConnectionOptions): MqttOptions | undefined {
@@ -55,7 +52,6 @@ function generateClientId() {

 export function createEmptyConnection(): ConnectionOptions {
  return {
-    configVersion: 1,
    certValidation: true,
    clientId: generateClientId(),
    id: v4() as string,
@@ -63,10 +59,7 @@ export function createEmptyConnection(): ConnectionOptions {
    encryption: false,
    password: undefined,
    username: undefined,
-    subscriptions: [
-      { topic: '#', qos: 0 },
-      { topic: '$SYS/#', qos: 0 },
-    ],
+    subscriptions: ['#', '$SYS/#'],
    type: 'mqtt',
    host: '',
    port: 1883,
@@ -1,3 +1,4 @@
+import { Action } from 'redux'
 import { createReducer } from './lib'
 import { Record, List } from 'immutable'
 import MoveUp from '../components/ChartPanel/ChartSettings/MoveUp'
@@ -1,4 +1,5 @@
 import * as q from '../../../backend/src/Model'
+import { Action } from 'redux'
 import { createReducer } from './lib'
 import { MqttOptions } from '../../../backend/src/DataSource'
 import { TopicViewModel } from '../model/TopicViewModel'
@@ -1,6 +1,6 @@
+import { Action } from 'redux'
 import { ConnectionOptions } from '../model/ConnectionOptions'
 import { createReducer } from './lib'
-import { Subscription } from '../../../backend/src/DataSource/MqttSource'

 export interface ConnectionManagerState {
  connections: { [s: string]: ConnectionOptions }
@@ -51,13 +51,13 @@ export interface SelectConnection {

 export interface AddSubscription {
  type: ActionTypes.CONNECTION_MANAGER_ADD_SUBSCRIPTION
-  subscription: Subscription
+  subscription: string
  connectionId: string
 }

 export interface DeleteSubscription {
  type: ActionTypes.CONNECTION_MANAGER_DELETE_SUBSCRIPTION
-  subscription: Subscription
+  subscription: string
  connectionId: string
 }

@@ -160,12 +160,8 @@ function addSubscription(state: ConnectionManagerState, action: AddSubscription)
 }

 function deleteSubscription(state: ConnectionManagerState, action: AddSubscription): ConnectionManagerState {
-  function subscriptionsEqual(v1: Subscription, v2: Subscription): boolean {
-    return v1.topic == v2.topic && v1.qos == v2.qos
-  }
-
  const connection = state.connections[action.connectionId]
-  const newSubscriptions = connection.subscriptions.filter(s => !subscriptionsEqual(s, action.subscription))
+  const newSubscriptions = connection.subscriptions.filter(s => s !== action.subscription)

  return {
    ...state,
@@ -191,29 +187,10 @@ function deleteConnection(state: ConnectionManagerState, action: DeleteConnectio

 function updateConnection(state: ConnectionManagerState, action: UpdateConnection): ConnectionManagerState {
  let connection = state.connections[action.connectionId]
-  let changeSet = action.changeSet
-
-  // Reset empty username to undefined
-  if (changeSet.username !== undefined) {
-    changeSet = {
-      changeSet,
-      username: changeSet.username === '' ? undefined : changeSet.username,
-    }
-  }
-
-  // Reset empty password to undefined
-  if (changeSet.password !== undefined) {
-    changeSet = {
-      changeSet,
-      password: changeSet.password === '' ? undefined : changeSet.password,
-    }
-  }
-
  connection = {
    ...connection,
-    ...changeSet,
+    ...action.changeSet,
  }
-
  return {
    ...state,
    connections: {
@@ -1,7 +1,8 @@
+import { Action } from 'redux'
 import { createReducer } from './lib'

 export interface PublishState {
-  manualTopic?: string
+  topic?: string
  payload?: string
  retain: boolean
  editorMode: string
@@ -59,7 +60,7 @@ export const publishReducer = createReducer(initialState, {
 function setTopic(state: PublishState, action: SetTopic) {
  return {
    ...state,
-    manualTopic: action.topic,
+    topic: action.topic,
  }
 }

@@ -1,5 +1,5 @@
 import * as q from '../../../backend/src/Model'
-import { Action as ReduxAction } from 'redux'
+import { Action } from 'redux'
 import { createReducer } from './lib'
 import { Record } from 'immutable'

@@ -11,8 +11,7 @@ const initialStateFactory = Record<SidebarModel>({
  compareMessage: undefined,
 })

-export type Action = SetCompareMessage | ResetStore
-
+export type Action = SetCompareMessage
 export enum ActionTypes {
  SIDEBAR_SET_COMPARE_MESSAGE = 'SIDEBAR_SET_COMPARE_MESSAGE',
  SIDEBAR_RESET_STORE = 'SIDEBAR_RESET_STORE',
@@ -21,7 +20,7 @@ export enum ActionTypes {
 export type SidebarState = Record<SidebarModel>

 const actions: {
-  [s: string]: (state: SidebarState, action: ReduxAction) => SidebarState
+  [s: string]: (state: SidebarState, action: Action) => SidebarState
 } = {
  SIDEBAR_SET_COMPARE_MESSAGE: setCompareMessage,
  SIDEBAR_RESET_STORE: resetStore,
@@ -1,5 +1,5 @@
 import * as q from '../../../backend/src/Model'
-import { Action as ReduxAction } from 'redux'
+import { Action } from 'redux'
 import { createReducer } from './lib'
 import { Record } from 'immutable'
 import { TopicViewModel } from '../model/TopicViewModel'
@@ -45,14 +45,12 @@ 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
+  [s: string]: (state: TreeState, action: Action) => TreeState
 } = {
  TREE_SHOW_TREE: showTree,
  TREE_SELECT_TOPIC: selectTopic,
@@ -1,34 +0,0 @@
-export interface Migration {
-  from: number | undefined
-  apply: (config: any) => any
-}
-
-interface MigrationSubject {
-  configVersion: number | undefined
-}
-
-export class ConfigMigrator {
-  private migrations: Migration[]
-
-  constructor(migrations: Migration[]) {
-    this.migrations = migrations
-  }
-
-  public applyMigrations(subject: MigrationSubject): Partial<MigrationSubject> {
-    while (this.isMigrationNecessary(subject)) {
-      subject = this.applicableMigrations(subject)
-        .filter(migration => migration.from === subject.configVersion)
-        .reduce((currentSubject, migration) => migration.apply(currentSubject as any), subject)
-    }
-
-    return subject
-  }
-
-  public isMigrationNecessary(subject: MigrationSubject): boolean {
-    return this.applicableMigrations(subject).length > 0
-  }
-
-  private applicableMigrations(subject: MigrationSubject): Migration[] {
-    return this.migrations.filter(migration => migration.from === subject.configVersion)
-  }
-}
@@ -1,6 +1,13 @@
-import { rendererRpc } from '../../../events'
+import { rendererEvents } from '../../../events'
+import { v4 } from 'uuid'

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

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

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

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

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

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

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

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

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

-      if (!target) {
-        console.error('Could not find matching target for Ctrl+A Event')
-      }
-      if (selection && target) {
-        range.selectNodeContents(target)
-        selection.removeAllRanges()
-        selection.addRange(range)
-      }
+    if (!target) {
+      console.error('Could not find matching target for Ctrl+A Event')
+    }
+    if (selection && target) {
+      range.selectNodeContents(target)
+      selection.removeAllRanges()
+      selection.addRange(range)
    }
  }
+}
@@ -1,115 +0,0 @@
-import { expect } from 'chai'
-import { ConfigMigrator } from '../ConfigMigrator'
-import 'mocha'
-
-describe('ConfigMigrator', () => {
-  it('applies migrations to a subject with undefined configVersion', () => {
-    let migrator = new ConfigMigrator([
-      {
-        from: undefined,
-        apply: subject => {
-          return {
-            ...subject,
-            configVersion: 1,
-            drink: 'Beer',
-          }
-        },
-      },
-    ])
-
-    let config = {
-      drink: 'water',
-    }
-
-    let migratedConfig = migrator.applyMigrations(config as any) as any
-
-    expect(migratedConfig.drink).to.eq('Beer')
-    expect(migratedConfig.configVersion).to.eq(1)
-  })
-
-  it('applies multiple migrations from the same version', () => {
-    let migrator = new ConfigMigrator([
-      {
-        from: undefined,
-        apply: subject => {
-          return {
-            ...subject,
-            drink: 'Beer',
-          }
-        },
-      },
-      {
-        from: undefined,
-        apply: subject => {
-          return {
-            ...subject,
-            configVersion: 1,
-          }
-        },
-      },
-    ])
-
-    let config = {
-      drink: 'water',
-    }
-
-    let migratedConfig = migrator.applyMigrations(config as any) as any
-
-    expect(migratedConfig.drink).to.eq('Beer')
-    expect(migratedConfig.configVersion).to.eq(1)
-  })
-
-  it('applies multiple migrations with ascending versions', () => {
-    let migrator = new ConfigMigrator([
-      {
-        from: undefined,
-        apply: subject => {
-          return {
-            ...subject,
-            configVersion: 1,
-          }
-        },
-      },
-      {
-        from: 1,
-        apply: subject => {
-          return {
-            ...subject,
-            configVersion: 2,
-          }
-        },
-      },
-    ])
-
-    let config = {
-      drink: 'water',
-    }
-
-    let migratedConfig = migrator.applyMigrations(config as any)
-
-    expect(migratedConfig.configVersion).to.eq(2)
-  })
-
-  it('does not apply non-matching migrations', () => {
-    let migrator = new ConfigMigrator([
-      {
-        from: 2,
-        apply: subject => {
-          return {
-            ...subject,
-            configVersion: 3,
-          }
-        },
-      },
-    ])
-
-    let config = {
-      configVersion: 10,
-      drink: 'water',
-    }
-
-    let migratedConfig = migrator.applyMigrations(config as any)
-
-    expect(migratedConfig.configVersion).to.eq(10)
-  })
-})
@@ -1,71 +0,0 @@
-import 'mocha'
-import { expect } from 'chai'
-import { connectionsMigrator } from '../../actions/migrations/Connection'
-
-describe('ConnectionsMigrator', () => {
-  it('applies migrations', () => {
-    let connections: any = {
-      '763b2e5c-c1ed-4c9b-ac9a-0970b3be29a7': {
-        certValidation: true,
-        clientId: 'mqtt-explorer-2783f48c',
-        encryption: false,
-        host: 'nodered',
-        id: '763b2e5c-c1ed-4c9b-ac9a-0970b3be29a7',
-        name: 'nodered',
-        port: 1883,
-        protocol: 'mqtt',
-        subscriptions: ['#', '$SYS/#'],
-        type: 'mqtt',
-      },
-      'iot.eclipse.org': {
-        certValidation: true,
-        clientId: 'mqtt-explorer-d913aad3',
-        encryption: false,
-        host: 'iot.eclipse.org',
-        id: 'iot.eclipse.org',
-        name: 'iot.eclipse.org',
-        port: 1883,
-        protocol: 'mqtt',
-        subscriptions: ['#', '$SYS/#'],
-        type: 'mqtt',
-      },
-    }
-
-    let migratedConnections: any = {
-      '763b2e5c-c1ed-4c9b-ac9a-0970b3be29a7': {
-        configVersion: 1,
-        certValidation: true,
-        clientId: undefined,
-        encryption: false,
-        host: 'nodered',
-        id: '763b2e5c-c1ed-4c9b-ac9a-0970b3be29a7',
-        name: 'nodered',
-        port: 1883,
-        protocol: 'mqtt',
-        subscriptions: [
-          { topic: '#', qos: 0 },
-          { topic: '$SYS/#', qos: 0 },
-        ],
-        type: 'mqtt',
-      },
-      'mqtt.eclipse.org': {
-        configVersion: 1,
-        certValidation: true,
-        clientId: undefined,
-        encryption: false,
-        host: 'mqtt.eclipse.org',
-        id: 'mqtt.eclipse.org',
-        name: 'mqtt.eclipse.org',
-        port: 1883,
-        protocol: 'mqtt',
-        subscriptions: [
-          { topic: '#', qos: 0 },
-          { topic: '$SYS/#', qos: 0 },
-        ],
-        type: 'mqtt',
-      },
-    }
-
-    expect(connectionsMigrator.applyMigrations(connections)).to.deep.eq(migratedConnections)
-  })
-})
@@ -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)
  }
 }
@@ -1,3 +0,0 @@
--require ts-node/register
--require source-map-support/register
--recursive ./src/**/*.spec.ts
@@ -1,6 +0,0 @@
-{
-  "extends": "../tsconfig",
-  "compilerOptions": {
-    "module": "commonjs"
-  }
-}
@@ -4,38 +4,21 @@
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strict": true,
-    "lib": [
-      "es2017",
-      "dom"
-    ],
+    "lib": ["es2017", "dom"],
    "moduleResolution": "node",
    "outDir": "./build/",
    "sourceMap": true,
    "module": "esnext",
    "target": "es2017",
    "jsx": "react",
-    "paths": {
-      "react": [
-        "./node_modules/@types/react"
-      ]
-    },
-    "types": [
-      "react"
-    ],
-    "allowSyntheticDefaultImports": true,
-    "skipLibCheck": true
+    "types": ["react"],
+    "allowSyntheticDefaultImports": true
  },
-  "include": [
-    "./src/**/*"
-  ],
-  "exclude": [
-    "**/*.d.ts",
-    ".src/**/*.png",
-    "./node_modules"
-  ],
+  "include": ["./src/**/*"],
+  "exclude": ["**/*.d.ts"],
  "awesomeTypescriptLoaderOptions": {
    "useCache": true,
    "transpileModule": true,
    "errorsAsWarnings": true
  }
-}
+}
@@ -1,6 +1,7 @@
 // const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const webpack = require('webpack');
+const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

 module.exports = {
  entry: {
@@ -17,11 +18,12 @@ module.exports = {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
+      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
-      // name: true,
+      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/](react|react-dom|@material-ui|popper\.js|react|react-redux|prop-types|jss|redux|scheduler|react-transition-group)[\\/]/,
@@ -30,7 +32,6 @@ module.exports = {
          priority: -10,
        },
        default: {
-          name: 'default',
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
@@ -54,7 +55,13 @@ module.exports = {
      // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
      {
        test: /\.tsx?$/,
-        loader: 'ts-loader',
+        loader: 'awesome-typescript-loader',
+        options: {
+          reportFiles: [
+            "src/**/*.{ts,tsx}",
+            "../backend/src/**/*.{ts,tsx}"
+          ]
+        }
      },
      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      { enforce: 'pre', test: /\.js$/, loader: 'source-map-loader' },
@@ -71,26 +78,27 @@ module.exports = {
          },
        ],
      },
-      // {
-      //   test: /\.node$/,
-      //   use: {
-      //     loader: 'node-loader',
-      //     options: {
-      //       modules: true,
-      //     }
-      //   }
-      // },
+      {
+        test: /\.node$/,
+        use: {
+          loader: 'node-loader',
+          options: {
+            modules: true,
+          }
+        }
+      },
    ],
  },
-  // node: { global: true },
+
  plugins: [
    new HtmlWebpackPlugin({ template: './index.html', file: './build/index.html', inject: false }),
    // new BundleAnalyzerPlugin(),
+    new 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
@@ -7,15 +7,13 @@ cache:
  - '%LOCALAPPDATA%\electron-builder\cache'

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

 build_script:
  - yarn
  - yarn build
  - yarn prepare-release
  - yarn package appx
-  - yarn prepare-release
-  - yarn package linux

 test_script:
  - yarn lint
@@ -23,3 +21,4 @@ test_script:

 artifacts:
  - path: 'build\clean\build\*.appx'
+
@@ -11,9 +11,6 @@
    "debug": "ts-node --inspect ./src/index.ts",
    "postinstall": "yarn build"
  },
-  "engines": {
-    "node": "19"
-  },
  "author": "",
  "license": "CC-BY-ND-4.0",
  "nyc": {
@@ -42,8 +39,6 @@
    "fs-extra": "^8.0.1",
    "js-base64": "^2.5.1",
    "lowdb": "^1.0.0",
-    "mqtt": "^3.0.0",
-    "protobufjs": "~6.11.2",
-    "long": "^4.0.0"
+    "mqtt": "^3.0.0"
  }
-}
+}
@@ -2,8 +2,14 @@ import * as FileAsync from 'lowdb/adapters/FileAsync'
 import * as fs from 'fs-extra'
 import * as lowdb from 'lowdb'
 import * as path from 'path'
-import { backendRpc } from '../../events'
-import { storageClearEvent, storageLoadEvent, storageStoreEvent } from '../../events/StorageEvents'
+import { backendEvents } from '../../events'
+import {
+  makeStorageAcknowledgementEvent,
+  makeStorageResponseEvent,
+  storageClearEvent,
+  storageLoadEvent,
+  storageStoreEvent,
+} from '../../events/StorageEvents'

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

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

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

-type MessageCallback = (topic: string, payload: Buffer, packet: any) => void
+type MessageCallback = (topic: string, payload: Buffer) => void

 // A DataSource should automatically reconnect if connection was broken
 interface DataSource<DataSourceOptions> {
@@ -11,7 +11,7 @@ export class DataSourceStateMachine {
  private state: DataSourceState = {
    error: undefined,
    connected: false,
-    connecting: false,
+    connecting: false
  }

  public setConnected(connected: boolean) {
@@ -1,4 +1,4 @@
-import { URL } from 'url'
+import * as Url from 'url'

 import { Client, connect as mqttConnect } from 'mqtt'
 import { DataSource, DataSourceStateMachine } from './'
@@ -12,19 +12,12 @@ export interface MqttOptions {
  tls: boolean
  certValidation: boolean
  clientId?: string
-  subscriptions: Array<Subscription>
+  subscriptions: Array<string>
  certificateAuthority?: string
  clientCertificate?: string
  clientKey?: string
 }

-export interface Subscription {
-  topic: string
-  qos: QoS
-}
-
-export type QoS = 0 | 1 | 2
-
 export class MqttSource implements DataSource<MqttOptions> {
  public stateMachine: DataSourceStateMachine = new DataSourceStateMachine()
  private client: Client | undefined
@@ -41,13 +34,13 @@ export class MqttSource implements DataSource<MqttOptions> {
    const urlStr = options.tls ? options.url.replace(/^(mqtt|ws):/, '$1s:') : options.url
    let url
    try {
-      url = new URL(urlStr)
+      url = Url.parse(urlStr)
    } catch (error) {
-      this.stateMachine.setError(error as Error)
+      this.stateMachine.setError(error)
      throw error
    }

-    const client = mqttConnect(url.toString(), {
+    const client = mqttConnect(url, {
      resubscribe: false,
      rejectUnauthorized: options.certValidation,
      username: options.username,
@@ -81,7 +74,7 @@ export class MqttSource implements DataSource<MqttOptions> {
    client.on('connect', () => {
      this.stateMachine.setConnected(true)
      options.subscriptions.forEach(subscription => {
-        client.subscribe(subscription.topic, { qos: subscription.qos }, (err: Error) => {
+        client.subscribe(subscription, (err: Error) => {
          if (err) {
            this.stateMachine.setError(err)
          }
@@ -70,11 +70,9 @@ function jsonToPropertyPaths(ast: JsonAst, previousPath: Array<string> = []): Ar
  } else if (ast.type === 'Array') {
    children = ast.children.map((value, idx) => jsonToPropertyPaths(value, previousPath.slice().concat([String(idx)])))
  } else if (ast.type === 'Object') {
-    children = ast.children.map(property => {
-      const path = property.key.value.replace('.', '\\.')
-
-      return jsonToPropertyPaths(property.value, previousPath.slice().concat([path]))
-    })
+    children = ast.children.map(property =>
+      jsonToPropertyPaths(property.value, previousPath.slice().concat([property.key.value]))
+    )
  }

  return children.reduce((a, b) => a.concat(b), [])
@@ -1,17 +1,15 @@
-import { Base64 } from 'js-base64'
-import { Decoder } from './Decoder'
+const { Base64 } = require('js-base64')

 export class Base64Message {
-  private base64Message: string
-  private unicodeValue: string
-  public decoder: Decoder
+  private base64Message: string;
+  private unicodeValue: string;
+
  public length: number

  private constructor(base64Str: string) {
    this.base64Message = base64Str
    this.unicodeValue = Base64.decode(base64Str)
    this.length = base64Str.length
-    this.decoder = Decoder.NONE
  }

  public static toUnicodeString(message: Base64Message) {
@@ -29,4 +27,8 @@ export class Base64Message {
  public static toDataUri(message: Base64Message, mimeType: string) {
    return `data:${mimeType};base64,${message.base64Message}`
  }
+
+  public static doStuff() {
+
+  }
 }
@@ -32,6 +32,17 @@ export class ChangeBuffer {
    return this.size / this.maxSize
  }

+  public updateSize() {
+    let size
+    if (this.isFull()) {
+      size = this.maxSize
+    } else {
+      size = 0
+    }
+
+    this.size = size
+  }
+
  public popAll(): Array<BufferedMessage> {
    const tmpBuffer = this.buffer
    this.buffer = []
@@ -1,4 +0,0 @@
-export enum Decoder {
-  NONE,
-  SPARKPLUG,
-}
@@ -4,13 +4,15 @@ const sha1 = require('sha1')

 export class Edge<ViewModel extends Destroyable> implements Hashable {
  public name: string
-
+  public color?: Color
  public target!: TreeNode<ViewModel>
  public source?: TreeNode<ViewModel> | undefined
  private cachedHash?: string

  constructor(name: string) {
    this.name = name
+    const hash = this.updateCache()
+    console.log(hash)
  }

  public edges(): Array<Edge<ViewModel>> {
@@ -40,4 +42,20 @@ export class Edge<ViewModel extends Destroyable> implements Hashable {

    return this
  }
+
+  public updateCache(): void {
+    if (this.cachedHash = "") {
+      this.cachedHash = sha1(this.name)
+    }
+  }
+}
+
+class Color implements Hashable {
+  public red: number = 0
+  public green: number = 0
+  public blue: number = 0
+
+  hash(): string {
+    return `${this.red}${this.green}${this.blue}`
+  }
 }
--- a/Show More
+++ b/Show More