Prepare release

Hotfix certificates selection
Update electron-builder
2026-09-12 01:23:31 +00:00 · 2019-07-02 15:32:04 +02:00 · 2019-07-02 15:27:38 +02:00 · 2019-07-02 15:20:33 +02:00 · 2019-07-02 15:20:16 +02:00 · 2019-07-02 15:10:46 +02:00
185 changed files with 8623 additions and 6878 deletions
@@ -0,0 +1,46 @@
+{
+  "language": "en",
+  "words": [
+    "subheader",
+    "basepath",
+    "webdriverio",
+    "repo",
+    "hexagonalize",
+    "pixelize",
+    "Transistions",
+    "squashfs",
+    "squashfs",
+    "provisionprofile",
+    "Nsis",
+    "Appx",
+    "Hashable",
+    "clickaway",
+    "Resizer",
+    "Subnodes",
+    "Unmount",
+    "Monokai",
+    "plottable",
+    "snackbar",
+    "webdriverio",
+    "prismjs",
+    "Nordquist",
+    "debounced",
+    "mosquitto",
+    "snapcraft",
+    "unsquashfs",
+    "armv",
+    "livingroom",
+    "selectall",
+    "toggledevtools",
+    "Octo",
+    "zigbee",
+    "memoization",
+    "submenu",
+    "AGPL",
+    "Oooooops",
+    "DEVTOOLS",
+    "mixins",
+    "Explorerdmg",
+    "heapsnapshot"
+  ]
+}
@@ -0,0 +1,2 @@
+node_modules
+build
@@ -28,6 +28,7 @@ install:

 script:
  - yarn run build
+  - yarn lint
  - yarn test
  - export TRAVIS_BUILD_NUMBER="" # Override travis build number since it is uses for tagging the binary version https://github.com/electron-userland/electron-builder/issues/3730
  - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then docker run -e GH_TOKEN=$GH_TOKEN -e GIT_TAG=$TRAVIS_TAG --rm -v `pwd`:/app thomasnordquist/ui-test-recording-env sh -c "cd app && docker/testMounted.sh"; fi
@@ -0,0 +1,7 @@
+{
+  "editor.formatOnSave": true,
+  "files.exclude": {
+    "**/node_modules": true,
+    "build/": true
+  }
+}
@@ -8,7 +8,7 @@

 |   |   |   |
 |:---:|:---:|:---:|
-|[![screen1_small](https://user-images.githubusercontent.com/7721625/53954800-84b34c00-40d7-11e9-842d-bf655c569600.jpg)](https://user-images.githubusercontent.com/7721625/53954364-52551f00-40d6-11e9-93cf-d5a9601897ea.png)|[![screen2_small](https://user-images.githubusercontent.com/7721625/53954801-84b34c00-40d7-11e9-913a-42572e675620.jpg)](https://user-images.githubusercontent.com/7721625/53954365-52551f00-40d6-11e9-823f-afd66f19ed01.png)|[![screen3_small](https://user-images.githubusercontent.com/7721625/53954802-854be280-40d7-11e9-973c-08f23c8dbf89.jpg)](https://user-images.githubusercontent.com/7721625/53954366-52551f00-40d6-11e9-9738-74db830d03ac.png)|
+|[![screen_composite](https://mqtt-explorer.com/img/screen-composite_small.png)](https://mqtt-explorer.com/img/screen-composite.png)|[![screen2_small](https://mqtt-explorer.com/img/screen2_small.png)](https://mqtt-explorer.com/img/screen2.png)|[![screen3_small](https://mqtt-explorer.com/img/screen3_small.png)](https://mqtt-explorer.com/img/screen3.png)|

 # The App has moved to [mqtt-explorer.com](https://mqtt-explorer.com)
 MQTT Explorer is a comprehensive and easy-to-use MQTT Client.  
@@ -1,125 +1,182 @@
 <!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;
-        }
+    <style>
+      body,
+      html {
+        margin: 0;
+        padding: 0;
+      }

-        [tabindex] {
-          outline: none;
-        }
+      [tabindex] {
+        outline: none;
+      }

-        @keyframes updateDark {
-          0%   {background-color: none;}
-          25%  {background-color: #3f51b5;}
-          50%  {background-color: #3f51b5;}
-          100% {background-color: none;}
+      @keyframes updateDark {
+        0% {
+          background-color: none;
        }
+        25% {
+          background-color: #4f5781;
+        }
+        50% {
+          background-color: #4f5781;
+        }
+        100% {
+          background-color: none;
+        }
+      }

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

-        ::-webkit-scrollbar {
-          width: 8px;
-          height: 8px;
-        }
+      ::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+      }

-        ::-webkit-scrollbar-corner {
-          background-color: rgba(0, 0, 0, 0.0);
-        }
+      ::-webkit-scrollbar-corner {
+        background-color: rgba(0, 0, 0, 0);
+      }

-        ::-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-track {
+        -webkit-box-shadow: inset 0 0 6px rgba(60, 60, 60, 0.5);
+        background-color: rgba(140, 140, 140, 0.1);
+      }

-        ::-webkit-scrollbar-thumb {
-          background-color: rgba(140,140,140,0.8);
-        }
-      </style>
-      <style>
-        .Resizer {
-            background: #eee;
-            opacity: .2;
-            z-index: 1;
-            -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-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:hover {
-            -webkit-transition: all 0.3s ease-out;
-            transition: all 0.3s ease-out;
-        }
+      .Resizer:hover {
+        -webkit-transition: all 0.3s ease-out;
+        transition: all 0.3s ease-out;
+      }

-        .Resizer.horizontal {
-            height: 11px;
-            margin: -5px 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.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.horizontal:hover {
-            border-top: 5px solid rgba(120, 120, 120, 0.5);
-            border-bottom: 5px solid rgba(120, 120, 120, 0.5);
-        }
+      .Resizer.horizontal::before {
+        content: '•••';
+        display: inline-block;
+        vertical-align: middle;
+        text-align: center;
+        width: 100%;
+        margin-top: -22px;
+        color: #aaa;
+        opacity: 1;
+      }

-        .Resizer.vertical {
-            width: 2px;
-            margin: 0px -8px 0px 0px;
-            border-left: 4px solid rgba(128, 128, 128, 0);
-            border-right: 4px solid rgba(128, 128, 128, 0);
-            cursor: col-resize;
-        }
+      .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: 4px solid rgba(130, 130, 130, 1);
-            border-right: 4px solid rgba(140, 140, 140, 1);
-        }
+      .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;
+      }

-      </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);
-            }
-    
-            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>
+      .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>
+  </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>
@@ -6,21 +6,26 @@
  "scripts": {
    "build": "yarn rebuild && webpack --mode production",
    "dev": "node_modules/.bin/webpack-dev-server --mode development --progress",
-    "rebuild": "cd node_modules/heapdump && node-gyp rebuild --target=5.0.0 --arch=x64 --dist-url=https://atom.io/download/electron || echo Could not build heapdump; cd -"
+    "rebuild": "cd node_modules/heapdump && node-gyp rebuild --target=5.0.4 --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.0.0-alpha.6",
-    "@material-ui/icons": "^4.0.0-alpha.1",
-    "@material-ui/lab": "^4.0.0-alpha.6",
-    "@material-ui/styles": "^4.0.0-alpha.6",
+    "@material-ui/core": "^4",
+    "@material-ui/icons": "^4",
+    "@material-ui/lab": "^4.0.0-alpha",
+    "@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": "^1.0.4",
+    "copy-text-to-clipboard": "^2.1.0",
+    "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": "^3.0.1",
+    "file-loader": "^4.0.0",
    "get-value": "^3.0.1",
    "immutable": "^4.0.0-rc.12",
    "js-base64": "^2.5.1",
@@ -32,11 +37,12 @@
    "number-abbreviate": "^2.0.0",
    "prismjs": "^1.15.0",
    "react": "16.8",
-    "react-ace": "^6.3.2",
+    "react-ace": "^7.0.1",
    "react-dom": "^16.7.0",
-    "react-redux": "^6.0.0",
-    "react-resize-detector": "^3.4.0",
+    "react-redux": "^7.0.3",
+    "react-resize-detector": "^4.1.4",
    "react-split-pane": "^0.1.85",
+    "react-transition-group": "^4.1.1",
    "react-vis": "^1.11.6",
    "redux": "^4.0.1",
    "redux-batched-actions": "^0.4.1",
@@ -46,20 +52,21 @@
    "uuid": "^3.3.2"
  },
  "devDependencies": {
+    "@types/d3": "^5.7.2",
    "@types/diff": "^4.0.1",
    "@types/get-value": "^3.0.1",
-    "@types/node": "^10.12.18",
+    "@types/node": "^12.0.4",
    "@types/prismjs": "^1.9.1",
    "@types/react": "^16.7.18",
    "@types/react-dom": "^16.0.11",
-    "@types/react-redux": "^6.0.12",
-    "@types/react-resize-detector": "^3.1.0",
+    "@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": "^3.4.4",
    "@types/vis": "^4.21.9",
    "awesome-typescript-loader": "^5.2.1",
-    "css-loader": "^2.1.0",
+    "css-loader": "^3.0.0",
    "hard-source-webpack-plugin": "^0.13.1",
    "heapdump": "^0.3.12",
    "html-webpack-plugin": "^4.0.0-beta.5",
@@ -71,5 +78,8 @@
    "webpack-bundle-analyzer": "^3.0.3",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.14"
+  },
+  "peerDependencies": {
+    "electron": "^5.0.5"
  }
 }
@@ -0,0 +1,128 @@
+import { Action, ActionTypes, ChartParameters } from '../reducers/Charts'
+import { AppState } from '../reducers'
+import { default as persistentStorage, StorageIdentifier } from '../utils/PersistentStorage'
+import { Dispatch } from 'redux'
+import { showError, showNotification } from './Global'
+
+interface ConnectionViewState {
+  charts: Array<ChartParameters>
+}
+
+interface ConnectionViewStateDictionary {
+  [s: string]: ConnectionViewState
+}
+const connectionViewStateIdentifier: StorageIdentifier<ConnectionViewStateDictionary> = {
+  id: 'connection_view_state',
+}
+
+export const loadCharts = () => async (dispatch: Dispatch<any>, getState: () => AppState) => {
+  const connectionId = getState().connection.connectionId
+  if (!connectionId) {
+    return
+  }
+
+  let viewStates: ConnectionViewStateDictionary | undefined
+  try {
+    viewStates = await persistentStorage.load(connectionViewStateIdentifier)
+  } catch (error) {
+    dispatch(showError(error))
+  }
+
+  if (!viewStates || !viewStates[connectionId]) {
+    dispatch(setCharts([]))
+    return
+  }
+
+  const viewState = viewStates[connectionId]
+  if (viewState) {
+    dispatch(setCharts(viewState.charts))
+  }
+}
+
+export const saveCharts = () => async (dispatch: Dispatch<any>, getState: () => AppState) => {
+  const connectionId = getState().connection.connectionId
+  if (!connectionId) {
+    return
+  }
+
+  const charts = getState()
+    .charts.get('charts')
+    .toArray()
+
+  let viewStates: ConnectionViewStateDictionary | undefined
+  try {
+    viewStates = (await persistentStorage.load(connectionViewStateIdentifier)) || {}
+    const state: ConnectionViewState = viewStates[connectionId] || { charts: [] }
+    state.charts = charts
+
+    viewStates[connectionId] = state
+    await persistentStorage.store(connectionViewStateIdentifier, viewStates)
+  } catch (error) {
+    dispatch(showError(error))
+  }
+}
+
+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 updateChart = (chartParameters: ChartParameters) => async (
+  dispatch: Dispatch<any>,
+  getState: () => AppState
+) => {
+  dispatch({
+    type: ActionTypes.CHARTS_UPDATE,
+    topic: chartParameters.topic,
+    dotPath: chartParameters.dotPath,
+    parameters: chartParameters,
+  })
+  dispatch(saveCharts())
+}
+
+export const removeChart = (chartParameters: ChartParameters) => async (
+  dispatch: Dispatch<any>,
+  getState: () => AppState
+) => {
+  dispatch({
+    chart: chartParameters,
+    type: ActionTypes.CHARTS_REMOVE,
+  })
+  dispatch(saveCharts())
+}
+
+export const 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 {
+    charts,
+    type: ActionTypes.CHARTS_SET,
+  }
+}
@@ -9,21 +9,18 @@ import { globalActions } from '.'
 import { resetStore as resetTreeStore, showTree } from './Tree'
 import { showError } from './Global'
 import { TopicViewModel } from '../model/TopicViewModel'
-import {
-  addMqttConnectionEvent,
-  makeConnectionStateEvent,
-  removeConnection,
-  rendererEvents,
-} from '../../../events'
+import { addMqttConnectionEvent, makeConnectionStateEvent, removeConnection, rendererEvents } from '../../../events'

-export const connect = (options: MqttOptions, connectionId: string) => (dispatch: Dispatch<any>, getState: () => AppState) => {
+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) => {
-    console.log(dataSourceState)
+  rendererEvents.subscribe(event, dataSourceState => {
    if (dataSourceState.connected) {
      const didReconnect = Boolean(getState().connection.tree)
      if (!didReconnect) {
@@ -59,7 +56,10 @@ const updateHealth = (dataSourceState: DataSourceState) => (dispatch: Dispatch<a
  })
 }

-export const connected: (tree: q.Tree<TopicViewModel>, host: string) => Action = (tree: q.Tree<TopicViewModel>, host: string) => ({
+export const connected: (tree: q.Tree<TopicViewModel>, host: string) => Action = (
+  tree: q.Tree<TopicViewModel>,
+  host: string
+) => ({
  tree,
  host,
  type: ActionTypes.CONNECTION_SET_CONNECTED,
@@ -1,6 +1,11 @@
 import { AppState } from '../reducers'
 import { clearLegacyConnectionOptions, loadLegacyConnectionOptions } from '../model/LegacyConnectionSettings'
-import { ConnectionOptions, createEmptyConnection, makeDefaultConnections, CertificateParameters } from '../model/ConnectionOptions'
+import {
+  ConnectionOptions,
+  createEmptyConnection,
+  makeDefaultConnections,
+  CertificateParameters,
+} from '../model/ConnectionOptions'
 import { default as persistentStorage, StorageIdentifier } from '../utils/PersistentStorage'
 import { Dispatch } from 'redux'
 import { showError } from './Global'
@@ -8,12 +13,12 @@ import { remote } from 'electron'
 import * as fs from 'fs'
 import * as path from 'path'

-import {
-  ActionTypes,
-  Action,
-} from '../reducers/ConnectionManager'
+import { ActionTypes, Action } from '../reducers/ConnectionManager'

-const storedConnectionsIdentifier: StorageIdentifier<{[s: string]: ConnectionOptions}> = {
+interface ConnectionDictionary {
+  [s: string]: ConnectionOptions
+}
+const storedConnectionsIdentifier: StorageIdentifier<ConnectionDictionary> = {
  id: 'ConnectionManager_connections',
 }

@@ -37,15 +42,19 @@ export const loadConnectionSettings = () => async (dispatch: Dispatch<any>, getS
  }
 }

-export const selectCertificate = (connectionId: string) => async (dispatch: Dispatch<any>, getState: () => AppState) => {
+export type CertificateTypes = 'selfSignedCertificate' | 'clientCertificate' | 'clientKey'
+export const selectCertificate = (type: CertificateTypes, connectionId: string) => async (
+  dispatch: Dispatch<any>,
+  getState: () => AppState
+) => {
  try {
    const certificate = await openCertificate()
-    console.log(certificate)
-    dispatch(updateConnection(connectionId, {
-      selfSignedCertificate: certificate,
-    }))
+    dispatch(
+      updateConnection(connectionId, {
+        [type]: certificate,
+      })
+    )
  } catch (error) {
-    console.log(error)
    dispatch(showError(error))
  }
 }
@@ -57,30 +66,33 @@ async function openCertificate(): Promise<CertificateParameters> {
  }

  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)
+    remote.dialog.showOpenDialog(
+      { properties: ['openFile'], securityScopedBookmarks: true },
+      (filePaths?: Array<string>) => {
+        const selectedFile = filePaths && filePaths[0]
+        if (!selectedFile) {
+          reject(rejectReasons.noCertificateSelected)
          return
        }

-        if (data.length > 16_384 || data.length < 128) {
-          reject(rejectReasons.certificateSizeDoesNotMatch)
-          return
-        }
+        fs.readFile(selectedFile, (error, data) => {
+          if (error) {
+            reject(error)
+            return
+          }

-        resolve({
-          data: data.toString('base64'),
-          name: path.basename(selectedFile),
+          if (data.length > 16_384 || data.length < 128) {
+            reject(rejectReasons.certificateSizeDoesNotMatch)
+            return
+          }
+
+          resolve({
+            data: data.toString('base64'),
+            name: path.basename(selectedFile),
+          })
        })
-      })
-    })
+      }
+    )
  })
 }

@@ -117,7 +129,7 @@ export const createConnection = () => (dispatch: Dispatch<any>) => {
  dispatch(selectConnection(newConnection.id))
 }

-export const setConnections = (connections: {[s: string]: ConnectionOptions}): Action => ({
+export const setConnections = (connections: { [s: string]: ConnectionOptions }): Action => ({
  connections,
  type: ActionTypes.CONNECTION_MANAGER_SET_CONNECTIONS,
 })
@@ -132,10 +144,14 @@ export const addConnection = (connection: ConnectionOptions): Action => ({
  type: ActionTypes.CONNECTION_MANAGER_ADD_CONNECTION,
 })

-export const toggleAdvancedSettings = (): Action  => ({
+export const toggleAdvancedSettings = (): Action => ({
  type: ActionTypes.CONNECTION_MANAGER_TOGGLE_ADVANCED_SETTINGS,
 })

+export const toggleCertificateSettings = (): Action => ({
+  type: ActionTypes.CONNECTION_MANAGER_TOGGLE_CERTIFICATE_SETTINGS,
+})
+
 export const deleteConnection = (connectionId: string) => (dispatch: Dispatch<any>, getState: () => AppState) => {
  const connectionIds = Object.keys(getState().connectionManager.connections)
  const connectionIdLocation = connectionIds.indexOf(connectionId)
@@ -155,16 +171,44 @@ export const deleteConnection = (connectionId: string) => (dispatch: Dispatch<an
 }

 async function ensureConnectionsHaveBeenInitialized() {
-  const connections = await persistentStorage.load(storedConnectionsIdentifier)
+  let connections = await persistentStorage.load(storedConnectionsIdentifier)
  const requiresInitialization = !connections
  if (requiresInitialization) {
    const migratedConnection = loadLegacyConnectionOptions()
    const defaultConnections = makeDefaultConnections()
-    persistentStorage.store(storedConnectionsIdentifier, {
+    connections = {
      ...migratedConnection,
      ...defaultConnections,
-    })
+    }
+    await persistentStorage.store(storedConnectionsIdentifier, connections)

    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
 }
@@ -32,7 +32,7 @@ export const setEditorMode = (editorMode: string): Action => {
  }
 }

-export const publish = (connectionId: string) => (dispatch: Dispatch<Action>, getState: () => AppState)  => {
+export const publish = (connectionId: string) => (dispatch: Dispatch<Action>, getState: () => AppState) => {
  const state = getState()
  const topic = state.publish.topic

@@ -1,27 +1,23 @@
 import * as q from '../../../backend/src/Model'
+import { ActionTypes, SettingsStateModel, TopicOrder } from '../reducers/Settings'
 import { AppState } from '../reducers'
 import { autoExpandLimitSet } from '../components/SettingsDrawer/Settings'
+import { Base64Message } from '../../../backend/src/Model/Base64Message'
 import { batchActions } from 'redux-batched-actions'
 import { default as persistentStorage, StorageIdentifier } from '../utils/PersistentStorage'
 import { Dispatch } from 'redux'
+import { globalActions } from './'
 import { showError } from './Global'
 import { showTree } from './Tree'
 import { TopicViewModel } from '../model/TopicViewModel'
-import {
-  ActionTypes,
-  SettingsState,
-  TopicOrder,
-} from '../reducers/Settings'
-import { Base64Message } from '../../../backend/src/Model/Base64Message'
-import { globalActions } from '.'

-const settingsIdentifier: StorageIdentifier<Partial<SettingsState>> = {
+const settingsIdentifier: StorageIdentifier<Partial<SettingsStateModel>> = {
  id: 'Settings',
 }

 export const loadSettings = () => async (dispatch: Dispatch<any>, getState: () => AppState) => {
  try {
-    const settings = await persistentStorage.load(settingsIdentifier) || {}
+    const settings = (await persistentStorage.load(settingsIdentifier)) || {}
    dispatch({
      settings: getState().settings.merge(settings),
      type: ActionTypes.SETTINGS_DID_LOAD_SETTINGS,
@@ -102,26 +98,34 @@ export const filterTopics = (filterStr: string) => (dispatch: Dispatch<any>, get
  })

  if (!filterStr || !tree) {
-    dispatch(batchActions([setAutoExpandLimit(0), (showTree(tree) as any)]))
+    dispatch(batchActions([setAutoExpandLimit(0), showTree(tree) as any]))
    return
  }

  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.value
-      && Base64Message.toUnicodeString(node.message.value).toLowerCase().indexOf(filterStr) !== -1
+    const messageMatches =
+      node.message &&
+      node.message.value &&
+      Base64Message.toUnicodeString(node.message.value)
+        .toLowerCase()
+        .indexOf(filterStr) !== -1

    return Boolean(messageMatches)
  }

-  const resultTree = tree.childTopics()
+  const resultTree = tree
+    .childTopics()
    .filter(nodeFilter)
    .map((node: q.TreeNode<TopicViewModel>) => {
      const clone = node.unconnectedClone()
@@ -138,16 +142,17 @@ export const filterTopics = (filterStr: string) => (dispatch: Dispatch<any>, get
    nextTree.updateWithConnection(tree.updateSource, tree.connectionId, nodeFilter)
  }

-  dispatch(batchActions([setAutoExpandLimit(autoExpandLimitForTree(nextTree)), (showTree(nextTree) as any)]))
+  dispatch(batchActions([setAutoExpandLimit(autoExpandLimitForTree(nextTree)), showTree(nextTree) as any]))
 }

 function autoExpandLimitForTree(tree: q.Tree<TopicViewModel>) {
  if (!tree) {
    return 0
  }
+
  function closestExistingLimit(i: number): number {
-    const sorted = autoExpandLimitSet.sort((a, b) => Math.abs(a.limit - i) - Math.abs(b.limit - i))
-    return sorted[0]!.limit
+    const sorted = [...autoExpandLimitSet].sort((a, b) => Math.abs(a.limit - i) - Math.abs(b.limit - i))
+    return sorted[0].limit
  }

  const count = tree.childTopicCount()
@@ -158,7 +163,10 @@ function autoExpandLimitForTree(tree: q.Tree<TopicViewModel>) {

 export const toggleTheme = () => (dispatch: Dispatch<any>, getState: () => AppState) => {
  dispatch({
-    type: getState().settings.get('theme') === 'light' ? ActionTypes.SETTINGS_SET_THEME_DARK : ActionTypes.SETTINGS_SET_THEME_LIGHT,
+    type:
+      getState().settings.get('theme') === 'light'
+        ? ActionTypes.SETTINGS_SET_THEME_DARK
+        : ActionTypes.SETTINGS_SET_THEME_LIGHT,
  })
  dispatch(storeSettings())
 }
@@ -2,7 +2,9 @@ import * as q from '../../../backend/src/Model'
 import { ActionTypes } from '../reducers/Sidebar'
 import { AppState } from '../reducers'
 import { Dispatch } from 'redux'
-import { makePublishEvent, rendererEvents } from '../../../events'
+import { clearTopic } from './clearTopic'
+
+export { clearTopic } from './clearTopic'

 export const clearRetainedTopic = () => (dispatch: Dispatch<any>, getState: () => AppState) => {
  const selectedTopic = getState().tree.get('selectedTopic')
@@ -19,35 +21,3 @@ export const setCompareMessage = (message?: q.Message) => (dispatch: Dispatch<an
    type: ActionTypes.SIDEBAR_SET_COMPARE_MESSAGE,
  })
 }
-
-export const clearTopic = (topic: q.TreeNode<any>, recursive: boolean, subtopicClearLimit = 50) => (dispatch: Dispatch<any>, getState: () => AppState)  => {
-  const { connectionId } = getState().connection
-  if (!connectionId) {
-    return
-  }
-
-  const publishEvent = makePublishEvent(connectionId)
-  const mqttMessage = {
-    topic: topic.path(),
-    payload: null,
-    retain: true,
-    qos: 0 as 0,
-  }
-  rendererEvents.emit(publishEvent, mqttMessage)
-
-  if (recursive) {
-    topic.childTopics()
-      .filter(topic => Boolean(topic.message && topic.message.value))
-      .slice(0, subtopicClearLimit)
-      .forEach((topic) => {
-        console.log('deleting', topic.path())
-        const mqttMessage = {
-          topic: topic.path(),
-          payload: null,
-          retain: true,
-          qos: 0 as 0,
-        }
-        rendererEvents.emit(publishEvent, mqttMessage)
-      })
-  }
-}
@@ -4,54 +4,64 @@ import { ActionTypes as SidebarActionTypes } from '../reducers/Sidebar'
 import { AnyAction, Dispatch } from 'redux'
 import { AppState } from '../reducers'
 import { batchActions } from 'redux-batched-actions'
+import { globalActions } from './'
 import { setTopic } from './Publish'
 import { TopicViewModel } from '../model/TopicViewModel'
-import { globalActions } from '.'
 const debounce = require('lodash.debounce')
+export { clearTopic } from './clearTopic'

-export const selectTopic = (topic: q.TreeNode<TopicViewModel>) => (dispatch: Dispatch<any>, getState: () => AppState) => {
+export { moveSelectionUpOrDownwards, moveInward, moveOutward } from './visibleTreeTraversal'
+import { moveSelectionUpOrDownwards } from './visibleTreeTraversal'
+
+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) => {
-  const previouslySelectedTopic = getState().tree.get('selectedTopic')
+const debouncedSelectTopic = debounce(
+  (topic: q.TreeNode<TopicViewModel>, dispatch: Dispatch<any>, getState: () => AppState) => {
+    const previouslySelectedTopic = getState().tree.get('selectedTopic')

-  if (previouslySelectedTopic === topic) {
-    return
-  }
+    if (previouslySelectedTopic === topic) {
+      return
+    }

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

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

-  if (topic.viewModel) {
-    topic.viewModel.setSelected(true)
-  }
+    if (topic.viewModel) {
+      topic.viewModel.setSelected(true)
+    }

-  const selectTreeTopicDispatch = {
-    selectedTopic: topic,
-    type: ActionTypes.TREE_SELECT_TOPIC,
-  }
+    const selectTreeTopicDispatch = {
+      selectedTopic: topic,
+      type: ActionTypes.TREE_SELECT_TOPIC,
+    }

-  dispatch({
-    type: SidebarActionTypes.SIDEBAR_SET_COMPARE_MESSAGE,
-    message: undefined,
-  })
+    dispatch({
+      type: SidebarActionTypes.SIDEBAR_SET_COMPARE_MESSAGE,
+      message: undefined,
+    })

-  if (setTopicDispatch) {
-    dispatch(batchActions([selectTreeTopicDispatch, setTopicDispatch]))
-  } else {
-    dispatch(selectTreeTopicDispatch)
-  }
-}, 70)
+    if (setTopicDispatch) {
+      dispatch(batchActions([selectTreeTopicDispatch, setTopicDispatch]))
+    } else {
+      dispatch(selectTreeTopicDispatch)
+    }
+  },
+  70
+)

 function destroyUnreferencedTree(state: AppState) {
  const visibleTree = state.tree.get('tree')
@@ -73,7 +83,10 @@ export const resetStore = () => (dispatch: Dispatch<any>, getState: () => AppSta
  })
 }

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

  return dispatch({
@@ -95,7 +108,7 @@ export const togglePause = (tree?: q.Tree<TopicViewModel>) => (dispatch: Dispatc
  setTimeout(() => {
    tree && tree.applyUnmergedChanges()
    if (paused && changes > 0) {
-      dispatch(globalActions.showNotification(`Sucessfully applied ${changes} changes.`))
+      dispatch(globalActions.showNotification(`Successfully applied ${changes} changes.`))
    }
  }, 50)

@@ -0,0 +1,41 @@
+import * as q from '../../../backend/src/Model'
+import { AppState } from '../reducers'
+import { Dispatch } from 'redux'
+import { makePublishEvent, rendererEvents } from '../../../events'
+import { moveSelectionUpOrDownwards } from './visibleTreeTraversal'
+
+export const clearTopic = (topic: q.TreeNode<any>, recursive: boolean, subtopicClearLimit = 50) => (
+  dispatch: Dispatch<any>,
+  getState: () => AppState
+) => {
+  dispatch(moveSelectionUpOrDownwards('next'))
+
+  const { connectionId } = getState().connection
+  if (!connectionId) {
+    return
+  }
+  const publishEvent = makePublishEvent(connectionId)
+  const mqttMessage = {
+    topic: topic.path(),
+    payload: null,
+    retain: true,
+    qos: 0 as 0,
+  }
+  rendererEvents.emit(publishEvent, mqttMessage)
+  if (recursive) {
+    topic
+      .childTopics()
+      .filter(topic => Boolean(topic.message && topic.message.value))
+      .slice(0, subtopicClearLimit)
+      .forEach((topic, idx) => {
+        const mqttMessage = {
+          topic: topic.path(),
+          payload: null,
+          retain: true,
+          qos: 0 as 0,
+        }
+        // Rate limit deletion
+        setTimeout(() => rendererEvents.emit(publishEvent, mqttMessage), 20 * idx)
+      })
+  }
+}
@@ -1,3 +1,4 @@
+import * as chartActions from './Charts'
 import * as connectionActions from './Connection'
 import * as connectionManagerActions from './ConnectionManager'
 import * as globalActions from './Global'
@@ -7,4 +8,14 @@ import * as sidebarActions from './Sidebar'
 import * as treeActions from './Tree'
 import * as updateNotifierActions from './UpdateNotifier'

-export { settingsActions, treeActions, publishActions, updateNotifierActions, connectionActions, sidebarActions, connectionManagerActions, globalActions }
+export {
+  settingsActions,
+  treeActions,
+  chartActions,
+  publishActions,
+  updateNotifierActions,
+  connectionActions,
+  sidebarActions,
+  connectionManagerActions,
+  globalActions,
+}
@@ -0,0 +1,135 @@
+import * as q from '../../../backend/src/Model'
+import { AppState } from '../reducers'
+import { Dispatch } from 'redux'
+import { selectTopic } from './Tree'
+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')
+
+  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
+  }
+
+  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
+  }
+
+  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)
+}
+
+function nextVisibleElementInTree(
+  settings: SettingsState,
+  tree: q.Tree<TopicViewModel>,
+  node: q.TreeNode<TopicViewModel>,
+  direction: 'next' | 'previous'
+): q.TreeNode<TopicViewModel> | undefined {
+  if (direction === 'next') {
+    return findNextNodeDownward(settings, node)
+  } else {
+    return findNextNodeUpward(settings, node)
+  }
+}
+
+/** Not very efficient but easy to implement, complexity should not be an issue here  */
+function findNextNodeUpward(
+  settings: SettingsState,
+  treeNode: q.TreeNode<TopicViewModel>
+): q.TreeNode<TopicViewModel> | undefined {
+  const parent = treeNode.sourceEdge && treeNode.sourceEdge.source
+  if (!parent) {
+    return undefined
+  }
+
+  const neighborNodes = sortedNodes(settings, parent)
+  const nodeIdx = neighborNodes.findIndex(n => n.path() === treeNode.path())
+  if (nodeIdx === 0) {
+    return parent
+  }
+  const upwardNeighbor = neighborNodes[nodeIdx - 1]
+  if (upwardNeighbor) {
+    return lastVisibleChild(settings, upwardNeighbor)
+  } else {
+    return findNextNodeUpward(settings, parent)
+  }
+}
+
+function lastVisibleChild(settings: SettingsState, treeNode: q.TreeNode<TopicViewModel>): q.TreeNode<TopicViewModel> {
+  const nodes = sortedNodes(settings, treeNode).filter(isTreeNodeVisible)
+  if (nodes.length === 0) {
+    return treeNode
+  }
+  return lastVisibleChild(settings, nodes[nodes.length - 1])
+}
+
+function findNextNodeDownward(
+  settings: SettingsState,
+  treeNode: q.TreeNode<TopicViewModel>
+): q.TreeNode<TopicViewModel> | undefined {
+  const children = sortedNodes(settings, treeNode).filter(isTreeNodeVisible)
+  const firstChild = children[0]
+  if (firstChild) {
+    return firstChild
+  }
+
+  return findNextNodeDownwardNeighbor(settings, treeNode)
+}
+
+function findNextNodeDownwardNeighbor(
+  settings: SettingsState,
+  treeNode: q.TreeNode<TopicViewModel>
+): q.TreeNode<TopicViewModel> | undefined {
+  const parent = treeNode.sourceEdge && treeNode.sourceEdge.source
+  if (!parent) {
+    return undefined
+  }
+
+  const neighborNodes = sortedNodes(settings, parent).filter(isTreeNodeVisible)
+  const nodeIdx = neighborNodes.findIndex(n => n.path() === treeNode.path())
+  const downwardNeighbor = neighborNodes[nodeIdx + 1]
+  if (downwardNeighbor) {
+    return downwardNeighbor
+  } else {
+    return findNextNodeDownwardNeighbor(settings, parent)
+  }
+}
@@ -28,7 +28,7 @@ interface Props {
 class App extends React.PureComponent<Props, {}> {
  constructor(props: any) {
    super(props)
-    this.state = { }
+    this.state = {}
  }

  private renderNotification() {
@@ -41,7 +41,9 @@ class App extends React.PureComponent<Props, {}> {
        <Notification
          message={str}
          type={isError ? 'error' : 'notification'}
-          onClose={() => { isError ? this.props.actions.showError(undefined) : this.props.actions.showNotification(undefined) }}
+          onClose={() => {
+            isError ? this.props.actions.showError(undefined) : this.props.actions.showNotification(undefined)
+          }}
        />
      )
    }
@@ -65,7 +67,7 @@ class App extends React.PureComponent<Props, {}> {
      <div className={centerContent}>
        <CssBaseline />
        <ErrorBoundary>
-        {this.renderNotification()}
+          {this.renderNotification()}
          <React.Suspense fallback={<div></div>}>
            <Settings />
          </React.Suspense>
@@ -75,7 +77,11 @@ class App extends React.PureComponent<Props, {}> {
            </div>
            <div className={settingsVisible ? contentShift : content}>
              <React.Suspense fallback={<div></div>}>
-                <ContentView heightProperty={heightProperty} connectionId={this.props.connectionId} paneDefaults={paneDefaults} />
+                <ContentView
+                  heightProperty={heightProperty}
+                  connectionId={this.props.connectionId}
+                  paneDefaults={paneDefaults}
+                />
              </React.Suspense>
            </div>
          </div>
@@ -91,19 +97,16 @@ const styles = (theme: Theme) => {
  const drawerWidth = 300
  const contentBaseStyle = {
    width: '100vw',
-    overflow: 'hidden' as 'hidden',
    backgroundColor: theme.palette.background.default,
  }

  return {
    heightProperty: {
-      height: 'calc(100vh - 64px) !important',
+      height: '100%', // 'calc(100vh - 64px) !important',
    },
    paneDefaults: {
      backgroundColor: theme.palette.background.default,
      color: theme.palette.text.primary,
-      overflowY: 'scroll' as 'scroll',
-      overflowX: 'hidden' as 'hidden',
      display: 'block' as 'block',
      height: 'calc(100vh - 64px)',
    },
@@ -149,4 +152,9 @@ const mapStateToProps = (state: AppState) => {
  }
 }

-export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(App))
+export default withStyles(styles)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(App)
+)
@@ -0,0 +1,97 @@
+import * as q from '../../../../backend/src/Model'
+import * as React from 'react'
+import TopicPlot from '../TopicPlot'
+import { AppState } from '../../reducers'
+import { bindActionCreators } from 'redux'
+import { chartActions } from '../../actions'
+import { ChartParameters } from '../../reducers/Charts'
+import { connect } from 'react-redux'
+import { Paper } from '@material-ui/core'
+import ChartTitle from './ChartTitle'
+import { ChartActions } from './ChartActions'
+const throttle = require('lodash.throttle')
+
+interface Props {
+  parameters: ChartParameters
+  treeNode?: q.TreeNode<any>
+  actions: {
+    chart: typeof chartActions
+  }
+}
+
+/**
+ * Subscribes to onMessage of treeNode
+ */
+function useMessageSubscriptionToUpdate(treeNode?: q.TreeNode<any>) {
+  const [lastUpdated, setLastUpdate] = React.useState(0)
+  function subscribeToMessageUpdates() {
+    const onUpdateCallback = throttle(() => setLastUpdate(treeNode ? treeNode.lastUpdate : 0), 300)
+    treeNode && treeNode.onMessage.subscribe(onUpdateCallback)
+
+    return function cleanup() {
+      treeNode && treeNode.onMessage.unsubscribe(onUpdateCallback)
+    }
+  }
+  React.useEffect(subscribeToMessageUpdates, [treeNode])
+}
+
+function Chart(props: Props) {
+  const { parameters, treeNode } = props
+  const [freezedHistory, setHistory] = React.useState<q.MessageHistory | undefined>()
+  useMessageSubscriptionToUpdate(treeNode)
+
+  const togglePause = React.useCallback(() => {
+    if (!props.treeNode) {
+      return
+    }
+    setHistory(freezedHistory ? undefined : props.treeNode.messageHistory.clone())
+  }, [props.treeNode, freezedHistory])
+
+  const onRemove = React.useCallback(() => {
+    props.actions.chart.removeChart(props.parameters)
+  }, [props.parameters])
+
+  return (
+    <Paper
+      style={{ padding: '8px' }}
+      data-test-type="ChartPaper"
+      data-test={`${props.parameters.topic}-${props.parameters.dotPath || ''}`}
+    >
+      <div style={{ display: 'flex' }}>
+        <div style={{ display: 'flex', flexGrow: 1, overflow: 'hidden' }}>
+          <ChartTitle parameters={parameters} />
+          <ChartActions
+            parameters={parameters}
+            onRemove={onRemove}
+            paused={Boolean(freezedHistory)}
+            togglePause={togglePause}
+          />
+        </div>
+      </div>
+      {props.treeNode ? (
+        <TopicPlot
+          color={props.parameters.color}
+          interpolation={props.parameters.interpolation}
+          range={props.parameters.range ? [props.parameters.range.from, props.parameters.range.to] : undefined}
+          history={freezedHistory ? freezedHistory : props.treeNode.messageHistory}
+          dotPath={parameters.dotPath}
+        />
+      ) : (
+        <span>No data</span>
+      )}
+    </Paper>
+  )
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: {
+      chart: bindActionCreators(chartActions, dispatch),
+    },
+  }
+}
+
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(Chart)
@@ -0,0 +1,26 @@
+import * as React from 'react'
+import Play from '@material-ui/icons/PlayArrow'
+import Pause from '@material-ui/icons/PauseCircleFilled'
+import Clear from '@material-ui/icons/Clear'
+import CustomIconButton from '../helper/CustomIconButton'
+import { ChartParameters } from '../../reducers/Charts'
+import { SettingsButton } from './ChartSettings/SettingsButton'
+
+export function ChartActions(props: {
+  paused: boolean
+  togglePause: () => void
+  parameters: ChartParameters
+  onRemove: () => void
+}) {
+  return (
+    <div style={{ display: 'flex' }}>
+      <CustomIconButton tooltip={props.paused ? 'Resume chart' : 'Pause chart'} onClick={props.togglePause}>
+        {props.paused ? <Play /> : <Pause />}
+      </CustomIconButton>
+      <SettingsButton parameters={props.parameters} />
+      <CustomIconButton tooltip="Remove chart" onClick={props.onRemove}>
+        <Clear data-test-type="RemoveChart" data-test={`${props.parameters.topic}-${props.parameters.dotPath || ''}`} />
+      </CustomIconButton>
+    </div>
+  )
+}
@@ -0,0 +1,71 @@
+import * as React from 'react'
+import { bindActionCreators } from 'redux'
+import { chartActions } from '../../../actions'
+import { ChartParameters } from '../../../reducers/Charts'
+import { connect } from 'react-redux'
+import { Menu, MenuItem } from '@material-ui/core'
+import { colors as createColors } from './colors'
+
+function chartParametersForColor(chart: ChartParameters, color?: string) {
+  return {
+    color,
+    topic: chart.topic,
+    dotPath: chart.dotPath,
+  }
+}
+
+const colors: Array<string> = createColors()
+
+function ColorSettings(props: {
+  chart: ChartParameters
+  actions: {
+    chart: typeof chartActions
+  }
+  anchorEl?: Element
+  open: boolean
+  close: () => void
+}) {
+  const setColor = React.useCallback(
+    (color?: string) => props.actions.chart.updateChart(chartParametersForColor(props.chart, color)),
+    [props.chart]
+  )
+
+  const menuItems = React.useMemo(() => {
+    return colors.map(color => (
+      <MenuItem
+        style={{ minWidth: '8em', minHeight: '36px', backgroundColor: color, textAlign: 'center' }}
+        key={color}
+        onClick={() => setColor(color)}
+      >
+        {props.chart.color === color ? 'X' : ''}
+      </MenuItem>
+    ))
+  }, [colors, props.chart])
+
+  return (
+    <Menu anchorEl={props.anchorEl} open={props.open} onClose={props.close}>
+      <MenuItem
+        style={{ minWidth: '8em', minHeight: '36px', textAlign: 'center' }}
+        key="none"
+        onClick={() => setColor()}
+        selected={props.chart.color === undefined}
+      >
+        default
+      </MenuItem>
+      {menuItems}
+    </Menu>
+  )
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: {
+      chart: bindActionCreators(chartActions, dispatch),
+    },
+  }
+}
+
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(ColorSettings)
@@ -0,0 +1,66 @@
+import * as React from 'react'
+import { AppState } from '../../../reducers'
+import { bindActionCreators } from 'redux'
+import { chartActions } from '../../../actions'
+import { ChartParameters, PlotCurveTypes } from '../../../reducers/Charts'
+import { connect } from 'react-redux'
+import { Menu, MenuItem } from '@material-ui/core'
+
+function chartParametersForAction(chart: ChartParameters, action: string) {
+  return {
+    topic: chart.topic,
+    dotPath: chart.dotPath,
+    interpolation: action as any,
+  }
+}
+
+const curves: Array<PlotCurveTypes> = ['curve', 'linear', 'step_after', 'step_before', 'cubic_basis_spline']
+
+function InterpolationSettings(props: {
+  chart: ChartParameters
+  actions: {
+    chart: typeof chartActions
+  }
+  anchorEl?: Element
+  open: boolean
+  close: () => void
+}) {
+  const callbacks = React.useMemo(() => {
+    const createCurveCallback = (curve: PlotCurveTypes) => () => {
+      props.actions.chart.updateChart(chartParametersForAction(props.chart, curve))
+    }
+
+    const callbacks: { [key: string]: () => void } = {}
+    for (const curve of curves) {
+      callbacks[curve] = createCurveCallback(curve)
+    }
+    return callbacks
+  }, [curves])
+
+  const menuItems = React.useMemo(() => {
+    return curves.map(curve => (
+      <MenuItem key={curve} onClick={callbacks[curve]} selected={props.chart.interpolation === curve}>
+        {curve.replace(/_/g, ' ')}
+      </MenuItem>
+    ))
+  }, [curves, props.chart])
+
+  return (
+    <Menu anchorEl={props.anchorEl} open={props.open} onClose={props.close}>
+      {menuItems}
+    </Menu>
+  )
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: {
+      chart: bindActionCreators(chartActions, dispatch),
+    },
+  }
+}
+
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(InterpolationSettings)
@@ -0,0 +1,35 @@
+import * as React from 'react'
+import { ChartParameters } from '../../../reducers/Charts'
+import { Menu, MenuItem, TextField, Typography } from '@material-ui/core'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import { chartActions } from '../../../actions'
+
+function MoveUp(props: { actions: { chart: typeof chartActions }; chart: ChartParameters; close: () => void }) {
+  const moveUp = React.useCallback(() => {
+    props.actions.chart.moveChartUp({
+      topic: props.chart.topic,
+      dotPath: props.chart.dotPath,
+    })
+    props.close()
+  }, [props.chart])
+
+  return (
+    <MenuItem key="size" onClick={moveUp}>
+      Move up
+    </MenuItem>
+  )
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: {
+      chart: bindActionCreators(chartActions, dispatch),
+    },
+  }
+}
+
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(MoveUp)
@@ -0,0 +1,120 @@
+import React, { useCallback, useState, ChangeEvent, MouseEvent, useRef, useEffect, useMemo } from 'react'
+import { ChartParameters } from '../../../reducers/Charts'
+import { Menu, TextField, Typography } from '@material-ui/core'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import { chartActions } from '../../../actions'
+import { KeyCodes } from '../../../utils/KeyCodes'
+
+interface Props {
+  actions: { chart: typeof chartActions }
+  chart: ChartParameters
+  anchorEl?: Element
+  open: boolean
+  onClose: () => void
+}
+
+function RangeSettings(props: Props) {
+  const dismissClick = useCallback((e: MouseEvent) => e.stopPropagation(), [])
+  const [rangeFrom, setRangeFrom] = useState<string | number | undefined>(props.chart.range && props.chart.range.from)
+  const [rangeTo, setRangeTo] = useState<string | number | undefined>(props.chart.range && props.chart.range.to)
+  useRangeStateToFireUpdateAction(rangeFrom, rangeTo, props)
+  const rangeFromRef = useRef<HTMLInputElement>()
+  const rangeToRef = useRef<HTMLInputElement>()
+
+  useEffect(() => {
+    rangeFromRef.current && rangeFromRef.current.focus()
+  }, [props.open])
+
+  const handleKeyEvents = (e: React.KeyboardEvent<any>) => {
+    if (e.keyCode === KeyCodes.tab) {
+      // Switch focus between those two
+      if (document.activeElement === rangeFromRef.current) {
+        rangeToRef.current && rangeToRef.current.focus()
+      } else {
+        rangeFromRef.current && rangeFromRef.current.focus()
+      }
+
+      // Prevent closing the menu
+      e.stopPropagation()
+      // Prevent default tab behavior (focus/blur)
+      e.preventDefault()
+    } else if (e.keyCode === KeyCodes.enter) {
+      props.onClose()
+    }
+  }
+
+  const setFromHandler = useCallback((e: ChangeEvent<HTMLInputElement>) => setRangeFrom(e.target.value), [])
+  const setToHandler = useCallback((e: ChangeEvent<HTMLInputElement>) => setRangeTo(e.target.value), [])
+  return useMemo(
+    () => (
+      <Menu
+        style={{ textAlign: 'center' }}
+        keepMounted={true}
+        anchorEl={props.anchorEl}
+        open={props.open}
+        onClose={props.onClose}
+        onKeyDownCapture={handleKeyEvents}
+      >
+        <Typography>Define custom ranges for the Y-Axis</Typography>
+        <div style={{ padding: '0 16px' }}>
+          <TextField
+            inputProps={{
+              ref: rangeFromRef,
+            }}
+            autoFocus={true}
+            style={{ marginTop: '0' }}
+            label="from"
+            value={rangeFrom}
+            onChange={setFromHandler}
+            margin="normal"
+          />
+          <TextField
+            inputProps={{
+              ref: rangeToRef,
+            }}
+            style={{ marginLeft: '8px', marginTop: '0' }}
+            onClick={dismissClick}
+            label="to"
+            value={rangeTo}
+            onChange={setToHandler}
+            margin="normal"
+          />
+        </div>
+      </Menu>
+    ),
+    [rangeFrom, rangeTo, props.open]
+  )
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: {
+      chart: bindActionCreators(chartActions, dispatch),
+    },
+  }
+}
+
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(RangeSettings)
+
+function useRangeStateToFireUpdateAction(
+  rangeFrom: string | number | undefined,
+  rangeTo: string | number | undefined,
+  props: Props
+) {
+  React.useEffect(() => {
+    const from = parseFloat(rangeFrom as any)
+    const to = parseFloat(rangeTo as any)
+    props.actions.chart.updateChart({
+      topic: props.chart.topic,
+      dotPath: props.chart.dotPath,
+      range: {
+        from: isNaN(from) ? undefined : from,
+        to: isNaN(to) ? undefined : to,
+      },
+    })
+  }, [rangeFrom, rangeTo])
+}
@@ -0,0 +1,30 @@
+import * as React from 'react'
+import ChartSettings from '.'
+import CustomIconButton from '../../helper/CustomIconButton'
+import MoreVertIcon from '@material-ui/icons/Settings'
+import { ChartParameters } from '../../../reducers/Charts'
+
+export function SettingsButton(props: { parameters: ChartParameters }) {
+  const [visible, setVisible] = React.useState(false)
+  const settingsRef = React.useRef()
+  const toggleSettings = React.useCallback(() => {
+    setVisible(!visible)
+  }, [visible])
+
+  const close = React.useCallback(() => {
+    setVisible(false)
+  }, [])
+
+  return (
+    <span>
+      <ChartSettings open={visible} close={close} anchorEl={settingsRef} chart={props.parameters} />
+      <CustomIconButton tooltip="Chart settings" onClick={toggleSettings}>
+        <MoreVertIcon
+          ref={settingsRef as any}
+          data-test-type="ChartSettings"
+          data-test={`${props.parameters.topic}-${props.parameters.dotPath || ''}`}
+        />
+      </CustomIconButton>
+    </span>
+  )
+}
@@ -0,0 +1,53 @@
+import * as React from 'react'
+import { ChartParameters } from '../../../reducers/Charts'
+import { Menu, MenuItem, TextField, Typography } from '@material-ui/core'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import { chartActions } from '../../../actions'
+
+function Size(props: {
+  actions: { chart: typeof chartActions }
+  chart: ChartParameters
+  anchorEl?: Element
+  open: boolean
+  close: () => void
+}) {
+  const setChartWidth = (width?: 'big' | 'medium' | 'small') => () => {
+    props.actions.chart.updateChart({
+      width,
+      topic: props.chart.topic,
+      dotPath: props.chart.dotPath,
+    })
+    props.close()
+  }
+
+  return (
+    <Menu anchorEl={props.anchorEl} open={props.open} onClose={props.close}>
+      <MenuItem selected={props.chart.width === undefined} onClick={setChartWidth()}>
+        auto
+      </MenuItem>
+      <MenuItem selected={props.chart.width === 'big'} onClick={setChartWidth('big')}>
+        100% width
+      </MenuItem>
+      <MenuItem selected={props.chart.width === 'medium'} onClick={setChartWidth('medium')}>
+        50% width
+      </MenuItem>
+      <MenuItem selected={props.chart.width === 'small'} onClick={setChartWidth('small')}>
+        33% width
+      </MenuItem>
+    </Menu>
+  )
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: {
+      chart: bindActionCreators(chartActions, dispatch),
+    },
+  }
+}
+
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(Size)
@@ -0,0 +1,46 @@
+import {
+  amber,
+  orange,
+  pink,
+  purple,
+  deepPurple,
+  teal,
+  red,
+  green,
+  lime,
+  indigo,
+  yellow,
+  brown,
+  blueGrey,
+} from '@material-ui/core/colors'
+
+export function colors() {
+  function colorToInt(color: string): [number, number, number] {
+    const str = color.replace('#', '')
+    return [parseInt(str.slice(0, 2), 16), parseInt(str.slice(2, 4), 16), parseInt(str.slice(4, 6), 16)]
+  }
+  function colorCompare(colorA: string, colorB: string) {
+    const a = colorToInt(colorA)
+    const b = colorToInt(colorB)
+    return Math.sqrt(Math.pow(a[0] - b[0], 2) + Math.pow(a[1] - b[1], 2) + Math.pow(a[2] - b[2], 2))
+  }
+  const colors: Array<string> = [
+    brown,
+    blueGrey,
+    amber,
+    orange,
+    pink,
+    purple,
+    deepPurple,
+    teal,
+    red,
+    green,
+    lime,
+    indigo,
+    yellow,
+  ]
+    .map(color => [color[200], color[500], color[700]])
+    .reduce((a, b) => a.concat(b), [])
+    .sort((a, b) => colorCompare(a, b))
+  return colors
+}
@@ -0,0 +1,79 @@
+import * as React from 'react'
+import InterpolationSettings from './InterpolationSettings'
+import { ChartParameters } from '../../../reducers/Charts'
+import { Menu, MenuItem } from '@material-ui/core'
+import RangeSettings from './RangeSettings'
+import Size from './Size'
+import MoveUp from './MoveUp'
+import ColorSettings from './ColorSettings'
+
+function ChartSettings(props: {
+  open: boolean
+  close: () => void
+  chart: ChartParameters
+  anchorEl: React.MutableRefObject<undefined>
+}) {
+  const [rangeVisible, setRangeVisible] = React.useState(false)
+  const [interpolationVisible, setInterpolationVisible] = React.useState(false)
+  const [sizeVisible, setSizeVisible] = React.useState(false)
+  const [colorVisible, setColorVisible] = React.useState(false)
+
+  const toggleRange = React.useCallback(() => {
+    if (open) {
+      props.close()
+    }
+    setRangeVisible(!rangeVisible)
+  }, [rangeVisible, open])
+
+  const toggleInterpolation = React.useCallback(() => {
+    if (open) {
+      props.close()
+    }
+    setInterpolationVisible(!interpolationVisible)
+  }, [interpolationVisible, open])
+
+  const toggleSize = React.useCallback(() => {
+    if (open) {
+      props.close()
+    }
+    setSizeVisible(!sizeVisible)
+  }, [sizeVisible, open])
+
+  const toggleColor = React.useCallback(() => {
+    if (open) {
+      props.close()
+    }
+    setColorVisible(!colorVisible)
+  }, [colorVisible, open])
+
+  return (
+    <span>
+      <Menu id="long-menu" anchorEl={props.anchorEl.current} open={props.open} onClose={props.close}>
+        <MenuItem key="range" onClick={toggleRange}>
+          Set range
+        </MenuItem>
+        <MenuItem key="interpolation" onClick={toggleInterpolation}>
+          Curve interpolation
+        </MenuItem>
+        <MenuItem key="size" onClick={toggleSize}>
+          Size
+        </MenuItem>
+        <MenuItem key="color" onClick={toggleColor}>
+          Color
+        </MenuItem>
+        <MoveUp chart={props.chart} close={props.close} />
+      </Menu>
+      <RangeSettings chart={props.chart} anchorEl={props.anchorEl.current} open={rangeVisible} onClose={toggleRange} />
+      <InterpolationSettings
+        chart={props.chart}
+        anchorEl={props.anchorEl.current}
+        open={interpolationVisible}
+        close={toggleInterpolation}
+      />
+      <Size chart={props.chart} anchorEl={props.anchorEl.current} open={sizeVisible} close={toggleSize} />
+      <ColorSettings chart={props.chart} anchorEl={props.anchorEl.current} open={colorVisible} close={toggleColor} />
+    </span>
+  )
+}
+
+export default ChartSettings
@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { ChartParameters } from '../../reducers/Charts'
+import { Typography, Theme, withStyles } from '@material-ui/core'
+
+function ChartTitle(props: { parameters: ChartParameters; classes: any }) {
+  const { classes, parameters } = props
+  return (
+    <div style={{ flexGrow: 1, overflow: 'hidden', textOverflow: 'ellipsis' }}>
+      <Typography variant="caption" className={classes.topic}>
+        {parameters.dotPath ? parameters.dotPath : parameters.topic}
+      </Typography>
+      <br />
+      <Typography variant="caption" className={classes.topic}>
+        {parameters.dotPath ? parameters.topic : <span dangerouslySetInnerHTML={{ __html: '&nbsp;' }}></span>}
+      </Typography>
+    </div>
+  )
+}
+
+const styles = (theme: Theme) => ({
+  topic: {
+    wordBreak: 'break-all' as 'break-all',
+    whiteSpace: 'nowrap' as 'nowrap',
+    overflow: 'hidden' as 'hidden',
+    textOverflow: 'ellipsis' as 'ellipsis',
+  },
+})
+
+export default withStyles(styles)(ChartTitle)
@@ -0,0 +1,50 @@
+import * as q from '../../../../backend/src/Model'
+import * as React from 'react'
+import Chart from './Chart'
+import { ChartParameters } from '../../reducers/Charts'
+
+interface Props {
+  tree?: q.Tree<any>
+  parameters: ChartParameters
+}
+
+export function ChartWithTreeNode(props: Props) {
+  const { tree, parameters } = props
+  if (!tree) {
+    return null
+  }
+
+  const initialTreeNode = tree.findNode(parameters.topic)
+  const [treeNode, setTreeNode] = React.useState<q.TreeNode<any> | undefined>(initialTreeNode)
+
+  usePollingToFetchTreeNode(treeNode, tree, parameters.topic, setTreeNode)
+  return <Chart treeNode={treeNode} parameters={parameters} />
+}
+
+/**
+ * If a node is not available when the plot is shown, keep polling until it has been created
+ */
+function usePollingToFetchTreeNode(
+  treeNode: q.TreeNode<any> | undefined,
+  tree: q.Tree<any>,
+  path: string,
+  setTreeNode: React.Dispatch<React.SetStateAction<q.TreeNode<any> | undefined>>
+) {
+  function pollUntilTreeNodeHasBeenFound() {
+    let intervalTimer: any
+    if (!treeNode) {
+      intervalTimer = setInterval(() => {
+        const node = tree.findNode(path)
+        if (node) {
+          setTreeNode(node)
+          clearInterval(intervalTimer)
+        }
+      }, 500)
+    }
+    return function cleanup() {
+      intervalTimer && clearInterval(intervalTimer)
+    }
+  }
+
+  React.useEffect(pollUntilTreeNodeHasBeenFound, [])
+}
@@ -0,0 +1,132 @@
+import * as q from '../../../../backend/src/Model'
+import * as React from 'react'
+import ShowChart from '@material-ui/icons/ShowChart'
+import { AppState } from '../../reducers'
+import { bindActionCreators } from 'redux'
+import { chartActions } from '../../actions'
+import { ChartParameters } from '../../reducers/Charts'
+import { ChartWithTreeNode } from './ChartWithTreeNode'
+import { connect } from 'react-redux'
+import { Grid, Theme, Typography, withStyles } from '@material-ui/core'
+import { List } from 'immutable'
+const { TransitionGroup, CSSTransition } = require('react-transition-group/esm')
+
+interface Props {
+  charts: List<ChartParameters>
+  connectionId?: string
+  tree?: q.Tree<any>
+  actions: {
+    chart: typeof chartActions
+  }
+  classes: any
+}
+
+function spacingForChartCount(count: number): 4 | 6 | 12 {
+  if (count >= 5) {
+    return 4
+  } else if (count >= 2) {
+    return 6
+  } else {
+    return 12
+  }
+}
+
+function mapWidth(width: 'big' | 'medium' | 'small' | undefined, calculatedSpacing: 4 | 6 | 12): 4 | 6 | 12 {
+  switch (width) {
+    case 'big':
+      return 12
+    case 'medium':
+      return 6
+    case 'small':
+      return 4
+    default:
+      return calculatedSpacing
+  }
+}
+
+function ChartPanel(props: Props) {
+  const chartsInView = props.charts.count()
+
+  const [spacing, setSpacing] = React.useState(spacingForChartCount(chartsInView))
+
+  React.useEffect(() => {
+    props.actions.chart.loadCharts()
+  }, [props.connectionId])
+
+  // Update spacing after animations have completed
+  React.useEffect(() => {
+    const newSpacing = spacingForChartCount(chartsInView)
+    if (newSpacing > spacing) {
+      setTimeout(() => setSpacing(newSpacing), 500)
+    } else {
+      setSpacing(newSpacing)
+    }
+  }, [chartsInView])
+
+  const charts = props.charts.map(chartParameters => (
+    <CSSTransition
+      key={`${chartParameters.topic}-${chartParameters.dotPath || ''}`}
+      timeout={{ enter: 500, exit: 500 }}
+      classNames="example"
+    >
+      <Grid item xs={mapWidth(chartParameters.width, spacing)}>
+        <ChartWithTreeNode tree={props.tree} parameters={chartParameters} />
+      </Grid>
+    </CSSTransition>
+  ))
+
+  return (
+    <div className={props.classes.container}>
+      <Grid container spacing={1}>
+        <TransitionGroup component={null} className="example">
+          {charts}
+        </TransitionGroup>
+        {chartsInView === 0 ? <NoCharts key="noCharts" /> : null}
+      </Grid>
+    </div>
+  )
+}
+
+function NoCharts() {
+  return (
+    <div style={{ width: '100%', textAlign: 'center' }}>
+      <Typography variant="h2">No charts selected</Typography>
+      <Typography>Select a numeric values from the value preview.</Typography>
+      <Typography>
+        Click on <ShowChart /> to add a topic / value to this panel.
+      </Typography>
+    </div>
+  )
+}
+
+const mapStateToProps = (state: AppState) => {
+  return {
+    charts: state.charts.get('charts'),
+    connectionId: state.connection.connectionId,
+    tree: state.connection.tree,
+  }
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: {
+      chart: bindActionCreators(chartActions, dispatch),
+    },
+  }
+}
+
+const styles = (theme: Theme) => ({
+  container: {
+    backgroundColor: theme.palette.background.default,
+    width: '100%',
+    height: '100%',
+    padding: '8px',
+    flex: 1,
+    overflow: 'hidden scroll',
+  },
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withStyles(styles)(ChartPanel))
@@ -8,7 +8,7 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { connectionManagerActions } from '../../actions'
 import { ConnectionOptions } from '../../model/ConnectionOptions'
-import { StyleRulesCallback, Theme, withStyles } from '@material-ui/core/styles'
+import { Theme, withStyles } from '@material-ui/core/styles'

 import {
  Button,
@@ -44,29 +44,6 @@ class ConnectionSettings extends React.Component<Props, State> {
    })
  }

-  private renderCertificateInfo() {
-    if (!this.props.connection.selfSignedCertificate) {
-      return null
-    }
-
-    return (
-      <span>
-        <Tooltip title={this.props.connection.selfSignedCertificate.name}>
-          <Typography className={this.props.classes.certificateName}>
-            <ClearAdornment action={this.clearCertificate} value={this.props.connection.selfSignedCertificate.name} />
-            {this.props.connection.selfSignedCertificate.name}
-          </Typography>
-      </Tooltip>
-     </span>
-    )
-  }
-
-  private clearCertificate = () => {
-    this.props.managerActions.updateConnection(this.props.connection.id, {
-      selfSignedCertificate: undefined,
-    })
-  }
-
  private renderSubscriptions() {
    const connection = this.props.connection
    return connection.subscriptions.map(subscription => (
@@ -89,27 +66,26 @@ class ConnectionSettings extends React.Component<Props, State> {
                className={classes.fullWidth}
                label="Subscription"
                margin="normal"
-                onChange={(event: React.ChangeEvent<HTMLInputElement>) => this.setState({ subscription: event.target.value })}
+                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)}
+                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 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}>
@@ -123,16 +99,15 @@ class ConnectionSettings extends React.Component<Props, State> {
            </Grid>
            <Grid item={true} xs={3} className={classes.gridPadding}>
              <div>
-                <Tooltip title="Select certificate to verify authenticity of a self-signed certificate" placement="top">
+                <Tooltip title="Manage tls connection certificates" placement="top">
                  <Button
                    variant="contained"
                    className={classes.button}
-                    onClick={() => this.props.managerActions.selectCertificate(this.props.connection.id)}
+                    onClick={() => this.props.managerActions.toggleCertificateSettings()}
                  >
-                    <Lock /> Certificate
+                    <Lock /> Certificates
                  </Button>
                </Tooltip>
-                {this.renderCertificateInfo()}
              </div>
            </Grid>
            <Grid item={true} xs={2} className={classes.gridPadding}>
@@ -151,17 +126,15 @@ class ConnectionSettings extends React.Component<Props, State> {
  }
 }

-const Subscription = (props: {
-  subscription: string,
-  deleteAction: any,
-}) => {
+const Subscription = (props: { subscription: string; deleteAction: any }) => {
  return (
    <ListItem style={{ padding: '0 0 0 8px' }}>
      <ListItemText>
        <IconButton onClick={props.deleteAction} style={{ padding: '6px' }}>
          <Delete />
        </IconButton>
-        {props.subscription}</ListItemText>
+        {props.subscription}
+      </ListItemText>
    </ListItem>
  )
 }
@@ -172,33 +145,26 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-const styles: StyleRulesCallback<string> = (theme: Theme) => {
-  return {
-    fullWidth: {
-      width: '100%',
-    },
-    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',
-    },
-    certificateName: {
-      width: '100%',
-      height: 'calc(1em + 4px)',
-      overflow: 'hidden' as 'hidden',
-      whiteSpace: 'nowrap' as 'nowrap',
-      textOverflow: 'ellipsis' as 'ellipsis',
-      color: theme.palette.text.hint,
-    },
-  }
-}
+const styles = (theme: Theme) => ({
+  fullWidth: {
+    width: '100%',
+  },
+  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',
+  },
+})

-export default connect(undefined, mapDispatchToProps)(withStyles(styles)(ConnectionSettings))
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(withStyles(styles)(ConnectionSettings))
@@ -0,0 +1,87 @@
+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'
+import { CertificateParameters, ConnectionOptions } from '../../model/ConnectionOptions'
+import { CertificateTypes } from '../../actions/ConnectionManager'
+import { connect } from 'react-redux'
+import { connectionManagerActions } from '../../actions'
+import { withStyles } from '@material-ui/styles'
+
+function CertificateFileSelection(props: {
+  certificateType: CertificateTypes
+  title: string
+  certificate?: CertificateParameters
+  classes: any
+  actions: {
+    connectionManager: typeof connectionManagerActions
+  }
+  connection: ConnectionOptions
+}) {
+  const clearCertificate = React.useCallback(() => {
+    props.actions.connectionManager.updateConnection(props.connection.id, {
+      [props.certificateType]: undefined,
+    })
+  }, [props.connection, props.certificateType])
+
+  return (
+    <span>
+      <Tooltip title="Select certificate" placement="top">
+        <Button
+          variant="contained"
+          className={props.classes.button}
+          onClick={() => props.actions.connectionManager.selectCertificate(props.certificateType, props.connection.id)}
+        >
+          <Lock /> {props.title}
+        </Button>
+      </Tooltip>
+      <ClearCertificate classes={props.classes} certificate={props.certificate} action={clearCertificate} />
+    </span>
+  )
+}
+
+function ClearCertificate(props: { classes: any; certificate?: CertificateParameters; action: () => void }) {
+  if (!props.certificate) {
+    return null
+  }
+
+  return (
+    <Tooltip title={props.certificate.name}>
+      <Typography className={props.classes.certificateName}>
+        <ClearAdornment action={props.action} value={props.certificate.name} />
+        {props.certificate.name}
+      </Typography>
+    </Tooltip>
+  )
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: {
+      connectionManager: bindActionCreators(connectionManagerActions, dispatch),
+    },
+  }
+}
+
+const styles = (theme: Theme) => ({
+  certificateName: {
+    width: '100%',
+    height: 'calc(1em + 4px)',
+    overflow: 'hidden' as 'hidden',
+    whiteSpace: 'nowrap' as 'nowrap',
+    textOverflow: 'ellipsis' as 'ellipsis',
+    color: theme.palette.text.hint,
+  },
+  button: {
+    marginTop: theme.spacing(3),
+    marginRight: theme.spacing(2),
+  },
+})
+
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(withStyles(styles)(CertificateFileSelection))
@@ -0,0 +1,110 @@
+import * as React from 'react'
+import CertificateFileSelection from './CertificateFileSelection'
+import Undo from '@material-ui/icons/Undo'
+import { bindActionCreators } from 'redux'
+import { Button, Grid } from '@material-ui/core'
+import { connect } from 'react-redux'
+import { connectionManagerActions } from '../../actions'
+import { ConnectionOptions } from '../../model/ConnectionOptions'
+import { Theme, withStyles } from '@material-ui/core/styles'
+
+interface Props {
+  connection: ConnectionOptions
+  classes: any
+  managerActions: typeof connectionManagerActions
+}
+
+interface State {
+  subscription: string
+}
+
+class Certificates extends React.Component<Props, State> {
+  constructor(props: any) {
+    super(props)
+    this.state = { subscription: '' }
+  }
+
+  private handleChange = (name: string) => (event: any) => {
+    this.props.managerActions.updateConnection(this.props.connection.id, {
+      [name]: event.target.value,
+    })
+  }
+
+  private renderCertificateInfo() {
+    if (!this.props.connection.selfSignedCertificate) {
+      return null
+    }
+
+    return <span />
+  }
+
+  public render() {
+    const { classes } = this.props
+    return (
+      <div>
+        <form noValidate={true} autoComplete="off">
+          <Grid container={true} spacing={3}>
+            <Grid item={true} xs={12} className={classes.gridPadding}>
+              <CertificateFileSelection
+                connection={this.props.connection}
+                certificate={this.props.connection.selfSignedCertificate}
+                title="Server Certificate (CA)"
+                certificateType="selfSignedCertificate"
+              />
+            </Grid>
+            <Grid item={true} xs={12} className={classes.gridPadding}>
+              <CertificateFileSelection
+                connection={this.props.connection}
+                certificate={this.props.connection.clientCertificate}
+                title="Client Certificate"
+                certificateType="clientCertificate"
+              />
+            </Grid>
+            <Grid item={true} xs={12} className={classes.gridPadding}>
+              <CertificateFileSelection
+                connection={this.props.connection}
+                certificate={this.props.connection.clientKey}
+                title="Client Key"
+                certificateType="clientKey"
+              />
+            </Grid>
+            <Grid item={true} xs={2} className={classes.gridPadding}>
+              <br />
+              <Button
+                variant="contained"
+                className={classes.button}
+                onClick={this.props.managerActions.toggleCertificateSettings}
+              >
+                <Undo /> Back
+              </Button>
+            </Grid>
+          </Grid>
+        </form>
+      </div>
+    )
+  }
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    managerActions: bindActionCreators(connectionManagerActions, dispatch),
+  }
+}
+
+const styles = (theme: Theme) => ({
+  fullWidth: {
+    width: '100%',
+  },
+  gridPadding: {
+    padding: '0 12px !important',
+  },
+  button: {
+    marginTop: theme.spacing(3),
+    marginRight: theme.spacing(2),
+  },
+})
+
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(withStyles(styles)(Certificates))
@@ -0,0 +1,25 @@
+import ConnectionHealthIndicator from '../helper/ConnectionHealthIndicator'
+import PowerSettingsNew from '@material-ui/icons/PowerSettingsNew'
+import React from 'react'
+import { Button } from '@material-ui/core'
+
+function ConnectButton(props: { connecting: boolean; classes: any; toggle: () => void }) {
+  const { classes, toggle, connecting } = props
+
+  if (connecting) {
+    return (
+      <Button variant="contained" color="primary" className={classes.button} onClick={toggle}>
+        <ConnectionHealthIndicator />
+        &nbsp;&nbsp;Abort
+      </Button>
+    )
+  }
+
+  return (
+    <Button variant="contained" color="primary" className={classes.button} onClick={toggle}>
+      <PowerSettingsNew /> Connect
+    </Button>
+  )
+}
+
+export default ConnectButton
@@ -1,8 +1,8 @@
-import * as React from 'react'
+import ConnectButton from './ConnectButton'
 import Delete from '@material-ui/icons/Delete'
-import Settings from '@material-ui/icons/Settings'
-import PowerSettingsNew from '@material-ui/icons/PowerSettingsNew'
+import React, { useCallback, useState } from 'react'
 import Save from '@material-ui/icons/Save'
+import Settings from '@material-ui/icons/Settings'
 import Visibility from '@material-ui/icons/Visibility'
 import VisibilityOff from '@material-ui/icons/VisibilityOff'
 import { AppState } from '../../reducers'
@@ -10,88 +10,93 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { connectionActions, connectionManagerActions } from '../../actions'
 import { ConnectionOptions, toMqttConnection } from '../../model/ConnectionOptions'
-import { StyleRulesCallback, Theme, withStyles } from '@material-ui/core/styles'
-
+import { KeyCodes } from '../../utils/KeyCodes'
+import { Theme, withStyles } from '@material-ui/core/styles'
+import { ToggleSwitch } from './ToggleSwitch'
+import { useGlobalKeyEventHandler } from '../../effects/useGlobalKeyEventHandler'
 import {
  Button,
  FormControl,
-  FormControlLabel,
  Grid,
  IconButton,
  Input,
  InputAdornment,
  InputLabel,
  MenuItem,
-  Switch,
  TextField,
 } from '@material-ui/core'
-import ConnectionHealthIndicator from '../helper/ConnectionHealthIndicator'

 interface Props {
  connection: ConnectionOptions
-  classes: {[s: string]: string}
-  actions: typeof connectionActions,
+  classes: { [s: string]: string }
+  actions: typeof connectionActions
  managerActions: typeof connectionManagerActions
  connected: boolean
  connecting: boolean
 }

-const protocols = [
-  'mqtt',
-  'ws',
-]
+const protocols = ['mqtt', 'ws']

-interface State {
-  showPassword: boolean
-}
+function ConnectionSettings(props: Props) {
+  const [showPassword, setShowPassword] = useState(false)

-class ConnectionSettings extends React.Component<Props, State> {
-  constructor(props: any) {
-    super(props)
-
-    this.state = {
-      showPassword: false,
+  const toggleConnect = useCallback(() => {
+    if (props.connecting) {
+      props.actions.disconnect()
+      return
    }
+
+    if (!props.connection) {
+      return
+    }
+
+    const mqttOptions = toMqttConnection(props.connection)
+    if (mqttOptions) {
+      props.actions.connect(mqttOptions, props.connection.id)
+    }
+  }, [props.connection, props.connecting])
+
+  useGlobalKeyEventHandler(KeyCodes.escape, props.actions.disconnect)
+  useGlobalKeyEventHandler(KeyCodes.enter, toggleConnect, [props.connecting])
+
+  const handleClickShowPassword = useCallback(() => {
+    setShowPassword(!showPassword)
+  }, [showPassword])
+
+  function requiresBasePath() {
+    return props.connection.protocol !== 'mqtt'
  }

-  private handleClickShowPassword = () => {
-    this.setState({ showPassword: !this.state.showPassword })
-  }
-
-  private requiresBasePath() {
-    return this.props.connection.protocol !== 'mqtt'
-  }
-
-  private renderBasePathInput() {
+  function renderBasePathInput() {
    return (
      <Grid item={true} xs={4}>
        <TextField
          label="Basepath"
-          className={this.props.classes.textField}
-          value={this.props.connection.basePath}
-          onChange={this.handleChange('basePath')}
+          className={props.classes.textField}
+          value={props.connection.basePath}
+          onChange={handleChange('basePath')}
          margin="normal"
        />
      </Grid>
    )
  }

-  private handleChange = (name: string) => (event: any) => {
-    if (!this.props.connection) {
+  const handleChange = (name: string) => (event: any) => {
+    if (!props.connection) {
      return
    }

-    this.updateConnection(name, event.target.value)
+    updateConnection(name, event.target.value)
  }

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

-  private renderProtocols() {
-    const { classes, connection } = this.props
+  const renderProtocols = () => {
+    const { classes, connection } = props

    const protocolItems = protocols.map((value: string) => (
      <MenuItem key={value} value={value}>
@@ -105,7 +110,7 @@ class ConnectionSettings extends React.Component<Props, State> {
        label="Protocol"
        className={classes.textField}
        value={connection.protocol}
-        onChange={this.updateProtocol}
+        onChange={updateProtocol}
        margin="normal"
      >
        {protocolItems}
@@ -113,198 +118,142 @@ class ConnectionSettings extends React.Component<Props, State> {
    )
  }

-  private updateProtocol = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const updateProtocol = (event: React.ChangeEvent<HTMLInputElement>) => {
    const value = event.target.value
-    this.updateConnection('protocol', value)
+    updateConnection('protocol', value)
    if (event.target.value === 'mqtt') {
-      this.updateConnection('basePath', undefined)
+      updateConnection('basePath', undefined)
    } else {
-      this.updateConnection('basePath', 'ws')
+      updateConnection('basePath', 'ws')
    }
  }

-  private renderCertValidationSwitch() {
-    const { classes, connection } = this.props
-
-    const certSwitch = (
-      <Switch
-        checked={connection.certValidation}
-        onChange={this.toggleCertValidation}
-        color="primary"
-      />
-    )
-
-    return (
-      <div className={classes.switch}>
-        <FormControlLabel
-          control={certSwitch}
-          label="Validate certificate"
-          labelPlacement="bottom"
-        />
-      </div>
-    )
-  }
-
-  private toggleCertValidation = () => {
-    this.props.managerActions.updateConnection(this.props.connection.id, {
-      certValidation: !this.props.connection.certValidation,
+  const toggleCertValidation = () => {
+    props.managerActions.updateConnection(props.connection.id, {
+      certValidation: !props.connection.certValidation,
    })
  }

-  private renderTlsSwitch() {
-    const { classes, connection } = this.props
-
-    const tlsSwitch = (
-      <Switch
-        checked={connection.encryption}
-        onChange={this.toggleTls}
-        color="primary"
-      />
-    )
-
-    return (
-      <div className={classes.switch}>
-        <FormControlLabel
-          control={tlsSwitch}
-          label="Encryption (tls)"
-          labelPlacement="bottom"
-        />
-      </div>
-    )
-  }
-
-  private toggleTls = () => {
-    this.props.managerActions.updateConnection(this.props.connection.id, {
-      encryption: !this.props.connection.encryption,
+  const toggleTls = () => {
+    props.managerActions.updateConnection(props.connection.id, {
+      encryption: !props.connection.encryption,
    })
  }

-  private renderConnectButton() {
-    const { classes, actions } = this.props
-
-    if (this.props.connecting) {
-      return (
-        <Button variant="contained" color="primary" className={classes.button} onClick={actions.disconnect}>
-          <ConnectionHealthIndicator />&nbsp;&nbsp;Abort
-        </Button>
-      )
-    }
+  function PasswordVisibilityButton(props: { showPassword: boolean; toggle: () => void }) {
    return (
-       <Button variant="contained" color="primary" className={classes.button} onClick={this.onClickConnect}>
-        <PowerSettingsNew /> Connect
-      </Button>
-    )
-  }
-
-  private onClickConnect = () => {
-    if (!this.props.connection) {
-      return
-    }
-
-    const mqttOptions = toMqttConnection(this.props.connection)
-    if (mqttOptions) {
-      this.props.actions.connect(mqttOptions, this.props.connection.id)
-    }
-  }
-
-  public render() {
-    const { classes, connection } = this.props
-
-    const passwordVisibilityButton = (
      <InputAdornment position="end">
-        <IconButton
-          aria-label="Toggle password visibility"
-          onClick={this.handleClickShowPassword}
-        >
-          {this.state.showPassword ? <Visibility /> : <VisibilityOff />}
+        <IconButton aria-label="Toggle password visibility" onClick={props.toggle}>
+          {props.showPassword ? <Visibility /> : <VisibilityOff />}
        </IconButton>
      </InputAdornment>
    )
-
-    return (
-      <div>
-        <form className={classes.container} noValidate={true} autoComplete="off">
-          <Grid container={true} spacing={3}>
-            <Grid item={true} xs={5}>
-              <TextField
-                label="Name"
-                className={classes.textField}
-                value={connection.name}
-                onChange={this.handleChange('name')}
-                margin="normal"
-              />
-            </Grid>
-            <Grid item={true} xs={4}>
-              {this.renderCertValidationSwitch()}
-            </Grid>
-            <Grid item={true} xs={3}>
-              {this.renderTlsSwitch()}
-            </Grid>
-            <Grid item={true} xs={2}>
-              {this.renderProtocols()}
-            </Grid>
-            <Grid item={true} xs={7}>
-              <TextField
-                label="Host"
-                className={classes.textField}
-                value={connection.host}
-                onChange={this.handleChange('host')}
-                margin="normal"
-              />
-            </Grid>
-            <Grid item={true} xs={3}>
-              <TextField
-                label="Port"
-                className={classes.textField}
-                value={connection.port}
-                onChange={this.handleChange('port')}
-                margin="normal"
-              />
-            </Grid>
-            {this.requiresBasePath() ? this.renderBasePathInput() : null}
-            <Grid item={true} xs={this.requiresBasePath() ? 4 : 6}>
-              <TextField
-                label="Username"
-                className={classes.textField}
-                value={connection.username}
-                onChange={this.handleChange('username')}
-                margin="normal"
-              />
-            </Grid>
-            <Grid item={true} xs={this.requiresBasePath() ? 4 : 6}>
-              <FormControl className={`${classes.textField} ${classes.inputFormControl}`}>
-                <InputLabel htmlFor="adornment-password">Password</InputLabel>
-                <Input
-                  id="adornment-password"
-                  type={this.state.showPassword ? 'text' : 'password'}
-                  value={connection.password}
-                  onChange={this.handleChange('password')}
-                  endAdornment={passwordVisibilityButton}
-                />
-              </FormControl>
-            </Grid>
-          </Grid>
-          <br />
-          <div>
-            <div style={{ float: 'left' }}>
-              <Button variant="contained" className={classes.button} onClick={() => this.props.managerActions.deleteConnection(this.props.connection.id)}>
-                Delete <Delete />
-              </Button>
-              <Button variant="contained" className={classes.button} onClick={this.props.managerActions.toggleAdvancedSettings}>
-                <Settings /> Advanced
-              </Button>
-            </div>
-            <div style={{ float : 'right' }}>
-              <Button variant="contained" color="secondary" className={classes.button} onClick={this.props.managerActions.saveConnectionSettings}>
-                <Save /> Save
-              </Button>
-              {this.renderConnectButton()}
-            </div>
-          </div>
-        </form>
-      </div>
-    )
  }
+
+  const { classes, connection } = props
+
+  return (
+    <div>
+      <form className={classes.container} noValidate={true} autoComplete="off">
+        <Grid container={true} spacing={3}>
+          <Grid item={true} xs={5}>
+            <TextField
+              autoFocus={true}
+              label="Name"
+              className={classes.textField}
+              value={connection.name}
+              onChange={handleChange('name')}
+              margin="normal"
+            />
+          </Grid>
+          <Grid item={true} xs={4}>
+            <ToggleSwitch
+              label="Validate certificate"
+              classes={classes}
+              value={connection.certValidation}
+              toggle={toggleCertValidation}
+            />
+          </Grid>
+          <Grid item={true} xs={3}>
+            <ToggleSwitch label="Encryption (tls)" classes={classes} value={connection.encryption} toggle={toggleTls} />
+          </Grid>
+          <Grid item={true} xs={2}>
+            {renderProtocols()}
+          </Grid>
+          <Grid item={true} xs={7}>
+            <TextField
+              label="Host"
+              className={classes.textField}
+              value={connection.host}
+              onChange={handleChange('host')}
+              margin="normal"
+            />
+          </Grid>
+          <Grid item={true} xs={3}>
+            <TextField
+              label="Port"
+              className={classes.textField}
+              value={connection.port}
+              onChange={handleChange('port')}
+              margin="normal"
+            />
+          </Grid>
+          {requiresBasePath() ? renderBasePathInput() : null}
+          <Grid item={true} xs={requiresBasePath() ? 4 : 6}>
+            <TextField
+              label="Username"
+              className={classes.textField}
+              value={connection.username}
+              onChange={handleChange('username')}
+              margin="normal"
+            />
+          </Grid>
+          <Grid item={true} xs={requiresBasePath() ? 4 : 6}>
+            <FormControl className={`${classes.textField} ${classes.inputFormControl}`}>
+              <InputLabel htmlFor="adornment-password">Password</InputLabel>
+              <Input
+                id="adornment-password"
+                type={showPassword ? 'text' : 'password'}
+                value={connection.password}
+                onChange={handleChange('password')}
+                endAdornment={<PasswordVisibilityButton showPassword={showPassword} toggle={handleClickShowPassword} />}
+              />
+            </FormControl>
+          </Grid>
+        </Grid>
+        <br />
+        <div>
+          <div style={{ float: 'left' }}>
+            <Button
+              variant="contained"
+              className={classes.button}
+              onClick={() => props.managerActions.deleteConnection(props.connection.id)}
+            >
+              Delete <Delete />
+            </Button>
+            <Button
+              variant="contained"
+              className={classes.button}
+              onClick={props.managerActions.toggleAdvancedSettings}
+            >
+              <Settings /> Advanced
+            </Button>
+          </div>
+          <div style={{ float: 'right' }}>
+            <Button
+              variant="contained"
+              color="secondary"
+              className={classes.button}
+              onClick={props.managerActions.saveConnectionSettings}
+            >
+              <Save /> Save
+            </Button>
+            <ConnectButton toggle={toggleConnect} connecting={props.connecting} classes={classes} />
+          </div>
+        </div>
+      </form>
+    </div>
+  )
 }

 const mapStateToProps = (state: AppState) => {
@@ -321,21 +270,22 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-const styles: StyleRulesCallback<string> = (theme: Theme) => {
-  return {
-    textField: {
-      width: '100%',
-    },
-    switch: {
-      marginTop: 0,
-    },
-    button: {
-      margin: theme.spacing(1),
-    },
-    inputFormControl: {
-      marginTop: '16px',
-    },
-  }
-}
+const styles = (theme: Theme) => ({
+  textField: {
+    width: '100%',
+  },
+  switch: {
+    marginTop: 0,
+  },
+  button: {
+    margin: theme.spacing(1),
+  },
+  inputFormControl: {
+    marginTop: '16px',
+  },
+})

-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ConnectionSettings))
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withStyles(styles)(ConnectionSettings))
@@ -7,14 +7,9 @@ import { connect } from 'react-redux'
 import { connectionManagerActions } from '../../actions'
 import { ConnectionOptions, toMqttConnection } from '../../model/ConnectionOptions'
 import { Theme, withStyles } from '@material-ui/core/styles'
-import {
-  Modal,
-  Paper,
-  Toolbar,
-  Typography,
-  Collapse,
-} from '@material-ui/core'
+import { Modal, Paper, Toolbar, Typography, Collapse } from '@material-ui/core'
 import AdvancedConnectionSettings from './AdvancedConnectionSettings'
+import Certificates from './Certificates'

 interface Props {
  actions: any
@@ -22,6 +17,7 @@ interface Props {
  connection?: ConnectionOptions
  visible: boolean
  showAdvancedSettings: boolean
+  showCertificateSettings: boolean
 }

 class ConnectionSetup extends React.Component<Props, {}> {
@@ -30,15 +26,22 @@ class ConnectionSetup extends React.Component<Props, {}> {
  }

  private renderSettings() {
-    const { connection, showAdvancedSettings } = this.props
+    const { connection, showAdvancedSettings, showCertificateSettings } = this.props
    if (!connection) {
      return null
    }

    return (
      <div>
-        <Collapse in={!showAdvancedSettings}><ConnectionSettings connection={connection} /></Collapse>
-        <Collapse in={showAdvancedSettings}><AdvancedConnectionSettings connection={connection} /></Collapse>
+        <Collapse in={!showAdvancedSettings && !showCertificateSettings}>
+          <ConnectionSettings connection={connection} />
+        </Collapse>
+        <Collapse in={showAdvancedSettings && !showCertificateSettings}>
+          <AdvancedConnectionSettings connection={connection} />
+        </Collapse>
+        <Collapse in={showCertificateSettings}>
+          <Certificates connection={connection} />
+        </Collapse>
      </div>
    )
  }
@@ -54,13 +57,15 @@ class ConnectionSetup extends React.Component<Props, {}> {
      <div>
        <Modal open={visible} disableAutoFocus={true}>
          <Paper className={classes.root}>
-            <div className={classes.left}><ProfileList /></div>
+            <div className={classes.left}>
+              <ProfileList />
+            </div>
            <div className={classes.right} key={connection && connection.id}>
              <Toolbar>
-                <Typography className={classes.title} variant="h6" color="inherit">MQTT Connection</Typography>
-                <Typography className={classes.connectionUri}>
-                  {mqttConnection && mqttConnection.url}
+                <Typography className={classes.title} variant="h6" color="inherit">
+                  MQTT Connection
                </Typography>
+                <Typography className={classes.connectionUri}>{mqttConnection && mqttConnection.url}</Typography>
              </Toolbar>
              {this.renderSettings()}
            </div>
@@ -115,7 +120,10 @@ const mapStateToProps = (state: AppState) => {
  return {
    visible: !state.connection.connected,
    showAdvancedSettings: state.connectionManager.showAdvancedSettings,
-    connection: state.connectionManager.selected ? state.connectionManager.connections[state.connectionManager.selected] : undefined,
+    showCertificateSettings: state.connectionManager.showCertificateSettings,
+    connection: state.connectionManager.selected
+      ? state.connectionManager.connections[state.connectionManager.selected]
+      : undefined,
  }
 }

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

-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ConnectionSetup))
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withStyles(styles)(ConnectionSetup))
@@ -1,113 +0,0 @@
-import * as React from 'react'
-import { AddButton } from './AddButton'
-import { AppState } from '../../reducers'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-import { connectionManagerActions } from '../../actions'
-import { ConnectionOptions, toMqttConnection } from '../../model/ConnectionOptions'
-import { Theme, withStyles } from '@material-ui/core/styles'
-import {
-  List,
-  ListItem,
-  ListSubheader,
-  Typography,
-} from '@material-ui/core'
-
-interface Props {
-  classes: any
-  selected?: string
-  connections: {[s: string]: ConnectionOptions}
-  actions: any
-}
-
-class ProfileList extends React.Component<Props, {}> {
-  constructor(props: Props) {
-    super(props)
-  }
-
-  private addConnectionButton() {
-    return <span id="addProfileButton" style={{ marginRight: '12px' }}><AddButton action={this.props.actions.createConnection} /></span>
-  }
-
-  public render() {
-    return (
-      <List
-        style={{ height: '100%' }}
-        component="nav"
-        subheader={<ListSubheader component="div">{this.addConnectionButton()}Connections</ListSubheader>}
-      >
-        <div className={this.props.classes.list}>
-          {Object.values(this.props.connections).map(connection => <ConnectionItem connection={connection} key={connection.id} selected={this.props.selected === connection.id} />)}
-        </div>
-      </List>
-    )
-  }
-}
-
-const styles = (theme: Theme) => ({
-  list: {
-    marginTop: theme.spacing(1),
-    height: `calc(100% - ${theme.spacing(6)})`,
-    overflowY: 'auto' as 'auto',
-  },
-})
-
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    actions: bindActionCreators(connectionManagerActions, dispatch),
-  }
-}
-
-interface ConnectionItemProps {
-  connection: ConnectionOptions,
-  actions: any,
-  selected: boolean,
-  classes: any
-}
-
-const connectionItemStyle = (theme: Theme) => ({
-  name: {
-    width: '100%',
-    textOverflow: 'ellipsis' as 'ellipsis',
-    whiteSpace: 'nowrap' as 'nowrap',
-    overflow: 'hidden' as 'hidden',
-  },
-  details: {
-    width: '100%',
-    textOverflow: 'ellipsis' as 'ellipsis',
-    whiteSpace: 'nowrap' as 'nowrap',
-    overflow: 'hidden' as 'hidden',
-    color: theme.palette.text.hint,
-    fontSize: '0.7em',
-  },
-})
-
-const connectionItemRenderer = withStyles(connectionItemStyle)((props: ConnectionItemProps) => {
-  const connection = props.connection.host && toMqttConnection(props.connection)
-  return (
-    <ListItem
-      button={true}
-      selected={props.selected}
-      style={{ display: 'block' }}
-      onClick={() => props.actions.selectConnection(props.connection.id)}
-    >
-      <Typography className={props.classes.name}>
-        {props.connection.name || 'mqtt broker'}
-      </Typography>
-      <Typography className={props.classes.details}>
-        {connection && connection.url}
-      </Typography>
-    </ListItem>
-  )
-})
-
-const ConnectionItem = connect(null, mapDispatchToProps)(connectionItemRenderer)
-
-const mapStateToProps = (state: AppState) => {
-  return {
-    connections: state.connectionManager.connections,
-    selected: state.connectionManager.selected,
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ProfileList))
@@ -14,19 +14,12 @@ const styles = (theme: Theme) => ({
  },
 })

-export const AddButton = withStyles(styles)((props: {
-  classes: any,
-  action: any,
-}) => {
+export const AddButton = withStyles(styles)((props: { classes: any; action: any }) => {
  return (
-    <Fab
-      size="small"
-      color="secondary"
-      aria-label="Add"
-      className={props.classes.addButton}
-      onClick={props.action}
-    >
-      <Add className={props.classes.addIcon} />
-    </Fab>
+    <span id="addProfileButton" style={{ marginRight: '12px' }}>
+      <Fab size="small" color="secondary" aria-label="Add" className={props.classes.addButton} onClick={props.action}>
+        <Add className={props.classes.addIcon} />
+      </Fab>
+    </span>
  )
 })
@@ -0,0 +1,57 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import { ListItem, Typography } from '@material-ui/core'
+import { toMqttConnection, ConnectionOptions } from '../../../model/ConnectionOptions'
+import { withStyles, Theme } from '@material-ui/core/styles'
+import { bindActionCreators } from 'redux'
+import { connectionManagerActions } from '../../../actions'
+
+export interface Props {
+  connection: ConnectionOptions
+  actions: any
+  selected: boolean
+  classes: any
+}
+
+const ConnectionItem = (props: Props) => {
+  const connection = props.connection.host && toMqttConnection(props.connection)
+  return (
+    <ListItem
+      button={true}
+      selected={props.selected}
+      style={{ display: 'block' }}
+      onClick={() => props.actions.selectConnection(props.connection.id)}
+    >
+      <Typography className={props.classes.name}>{props.connection.name || 'mqtt broker'}</Typography>
+      <Typography className={props.classes.details}>{connection && connection.url}</Typography>
+    </ListItem>
+  )
+}
+
+export const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: bindActionCreators(connectionManagerActions, dispatch),
+  }
+}
+
+export const connectionItemStyle = (theme: Theme) => ({
+  name: {
+    width: '100%',
+    textOverflow: 'ellipsis' as 'ellipsis',
+    whiteSpace: 'nowrap' as 'nowrap',
+    overflow: 'hidden' as 'hidden',
+  },
+  details: {
+    width: '100%',
+    textOverflow: 'ellipsis' as 'ellipsis',
+    whiteSpace: 'nowrap' as 'nowrap',
+    overflow: 'hidden' as 'hidden',
+    color: theme.palette.text.hint,
+    fontSize: '0.7em',
+  },
+})
+
+export default connect(
+  null,
+  mapDispatchToProps
+)(withStyles(connectionItemStyle)(ConnectionItem))
@@ -0,0 +1,83 @@
+import ConnectionItem from './ConnectionItem'
+import React from 'react'
+import { AddButton } from './AddButton'
+import { AppState } from '../../../reducers'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { connectionManagerActions } from '../../../actions'
+import { ConnectionOptions } from '../../../model/ConnectionOptions'
+import { List, ListSubheader } from '@material-ui/core'
+import { Theme, withStyles } from '@material-ui/core/styles'
+import { useGlobalKeyEventHandler } from '../../../effects/useGlobalKeyEventHandler'
+import { KeyCodes } from '../../../utils/KeyCodes'
+
+interface Props {
+  classes: any
+  selected?: string
+  connections: { [s: string]: ConnectionOptions }
+  actions: typeof connectionManagerActions
+}
+
+function ProfileList(props: Props) {
+  const { actions, classes, connections, selected } = props
+
+  const selectConnection = (dir: 'next' | 'previous') => (event: KeyboardEvent) => {
+    if (!selected) {
+      return
+    }
+    const indexDirection = dir === 'next' ? 1 : -1
+    const connectionArray = Object.values(connections)
+    const selectedIndex = connectionArray.map(connection => connection.id).indexOf(selected)
+    const nextConnection = connectionArray[selectedIndex + indexDirection]
+    if (nextConnection) {
+      actions.selectConnection(nextConnection.id)
+    }
+    event.preventDefault()
+  }
+
+  useGlobalKeyEventHandler(KeyCodes.arrow_down, selectConnection('next'))
+  useGlobalKeyEventHandler(KeyCodes.arrow_up, selectConnection('previous'))
+
+  const createConnectionButton = (
+    <ListSubheader component="div">
+      <AddButton action={actions.createConnection} />
+      Connections
+    </ListSubheader>
+  )
+
+  return (
+    <List style={{ height: '100%' }} component="nav" subheader={createConnectionButton}>
+      <div className={classes.list}>
+        {Object.values(connections).map(connection => (
+          <ConnectionItem connection={connection} key={connection.id} selected={selected === connection.id} />
+        ))}
+      </div>
+    </List>
+  )
+}
+
+const styles = (theme: Theme) => ({
+  list: {
+    marginTop: theme.spacing(1),
+    height: `calc(100% - ${theme.spacing(6)})`,
+    overflowY: 'auto' as 'auto',
+  },
+})
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: bindActionCreators(connectionManagerActions, dispatch),
+  }
+}
+
+const mapStateToProps = (state: AppState) => {
+  return {
+    connections: state.connectionManager.connections,
+    selected: state.connectionManager.selected,
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withStyles(styles)(ProfileList))
@@ -0,0 +1,12 @@
+import React from 'react'
+import { FormControlLabel, Switch } from '@material-ui/core'
+
+export function ToggleSwitch(props: { value: boolean; classes: any; toggle: () => void; label: string }) {
+  const { classes, value, toggle, label } = props
+  const toggleSwitch = <Switch checked={value} onChange={toggle} color="primary" />
+  return (
+    <div className={classes.switch}>
+      <FormControlLabel control={toggleSwitch} label={label} labelPlacement="bottom" />
+    </div>
+  )
+}
@@ -13,7 +13,6 @@ class Key extends React.Component<Props, {}> {
  }

  public render() {
-
    return (
      <div className={this.props.classes.keyStyle}>
        <div className={this.props.classes.keyTextStyle}>{this.props.keyboardKey}</div>
@@ -4,13 +4,13 @@ const cursor = require('./cursor.png')

 interface State {
  enabled: boolean
-  target: {x: number, y: number}
-  position: {x: number, y: number}
-  stepSizeX: number,
-  stepSizeY: number,
+  target: { x: number; y: number }
+  position: { x: number; y: number }
+  stepSizeX: number
+  stepSizeY: number
 }

-class Demo extends React.Component<{classes: any}, State> {
+class Demo extends React.Component<{ classes: any }, State> {
  private timer: any
  private frameInterval = 20

@@ -32,8 +32,8 @@ class Demo extends React.Component<{classes: any}, State> {

    this.setState({
      position: {
-        x: this.state.position.x + (dirX * steSizeX),
-        y: this.state.position.y + (dirY * steSizeY),
+        x: this.state.position.x + dirX * steSizeX,
+        y: this.state.position.y + dirY * steSizeY,
      },
    })

@@ -43,10 +43,10 @@ class Demo extends React.Component<{classes: any}, State> {
  }

  public componentDidMount() {
-    (window as any).demo.enableMouse = () => {
+    ;(window as any).demo.enableMouse = () => {
      this.setState({ enabled: true })
    }
-    (window as any).demo.moveMouse = (x: number, y: number, animationTime: number) => {
+    ;(window as any).demo.moveMouse = (x: number, y: number, animationTime: number) => {
      const stepSizeX = Math.abs(this.state.position.x - x) / (animationTime / this.frameInterval)
      const stepSizeY = Math.abs(this.state.position.y - y) / (animationTime / this.frameInterval)
      this.setState({ stepSizeX, stepSizeY, enabled: true, target: { x, y } })
@@ -64,9 +64,7 @@ class Demo extends React.Component<{classes: any}, State> {
      top: this.state.position.y + 2,
    }

-    return (
-      <img src={cursor} style={cursorStyle} className={this.props.classes.cursor} />
-    )
+    return <img src={cursor} style={cursorStyle} className={this.props.classes.cursor} />
  }
 }

@@ -8,7 +8,7 @@ interface State {
  location: string
 }

-class Demo extends React.Component<{classes: any}, State> {
+class Demo extends React.Component<{ classes: any }, State> {
  private timer: any
  constructor(props: any) {
    super(props)
@@ -20,20 +20,24 @@ class Demo extends React.Component<{classes: any}, State> {
  }

  public componentDidMount() {
-    (window as any).demo.showMessage = (message: string, location: string, duration: number, keys: Array<string> = []) => {
+    ;(window as any).demo.showMessage = (
+      message: string,
+      location: string,
+      duration: number,
+      keys: Array<string> = []
+    ) => {
      this.clearTimer()
      this.setState({ message, location, keys })
      this.timer = setTimeout(() => this.setState({ message: undefined }), duration)
    }
-
-    (window as any).demo.hideMessage = () => {
+    ;(window as any).demo.hideMessage = () => {
      this.clearTimer()
      this.setState({ message: undefined })
    }
  }

  public render() {
-    const positions: {[s: string]: number} = {
+    const positions: { [s: string]: number } = {
      top: 0,
      bottom: -65,
      middle: -32,
@@ -52,7 +56,6 @@ class Demo extends React.Component<{classes: any}, State> {
      color: 'white',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderRadius: '16px',
-
    }

    if (!this.state.message) {
@@ -61,7 +64,8 @@ class Demo extends React.Component<{classes: any}, State> {

    let keys: Array<any> = []
    if (this.state.keys.length > 0) {
-      keys = this.state.keys.map(key => [<Key key={key} keyboardKey={key} />])
+      keys = this.state.keys
+        .map(key => [<Key key={key} keyboardKey={key} />])
        .reduce((prev, current) => {
          return [prev, '+' as any, current]
        })
@@ -12,7 +12,7 @@ function writeHeapdump(path?: string) {
  return path
 }

-(window as any).demo = {
+;(window as any).demo = {
  writeHeapdump,
 }

@@ -2,15 +2,9 @@ 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 { electronRendererTelementry } from 'electron-telemetry'
+import { electronRendererTelemetry } from 'electron-telemetry'
 import { Theme, withStyles } from '@material-ui/core/styles'
-import {
-  Button,
-  Modal,
-  Paper,
-  Toolbar,
-  Typography,
-} from '@material-ui/core'
+import { Button, Modal, Paper, Toolbar, Typography } from '@material-ui/core'

 interface State {
  error?: Error
@@ -21,7 +15,6 @@ interface Props {
 }

 class ErrorBoundary extends React.Component<Props, State> {
-
  public static getDerivedStateFromError(error: Error) {
    return { error }
  }
@@ -40,7 +33,7 @@ class ErrorBoundary extends React.Component<Props, State> {
  }

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

@@ -54,23 +47,36 @@ class ErrorBoundary extends React.Component<Props, State> {
      <Modal open={true} disableAutoFocus={true}>
        <Paper className={classes.root}>
          <Toolbar style={{ padding: '0' }}>
-            <Typography className={classes.title} variant="h6" color="inherit"><Warning /> Oooooops!</Typography>
+            <Typography className={classes.title} variant="h6" color="inherit">
+              <Warning /> Oooooops!
+            </Typography>
          </Toolbar>
-          <Typography className={classes.centered}>I hoped that you would never see this window, but MQTT-Explorer had an unexpected error.</Typography>
-          <Typography className={classes.centered}><SentimentDissatisfied /></Typography>
+          <Typography className={classes.centered}>
+            I hoped that you would never see this window, but MQTT-Explorer had an unexpected error.
+          </Typography>
+          <Typography className={classes.centered}>
+            <SentimentDissatisfied />
+          </Typography>
          <pre className={classes.textColor} style={{ maxHeight: '35vh', overflow: 'scroll' }}>
-            <code className={classes.textColor}>
-              {this.state.error.stack}
-            </code>
+            <code className={classes.textColor}>{this.state.error.stack}</code>
          </pre>
          <Typography>
            Please report this issue with a short description of what happened to
-            <span> <a className={classes.textColor} href="https://github.com/thomasnordquist/MQTT-Explorer/issues">https://github.com/thomasnordquist/MQTT-Explorer/issues</a></span>
+            <span>
+              {' '}
+              <a className={classes.textColor} href="https://github.com/thomasnordquist/MQTT-Explorer/issues">
+                https://github.com/thomasnordquist/MQTT-Explorer/issues
+              </a>
+            </span>
          </Typography>
          <div>
            <div className={classes.buttonPositioning}>
-              <Button className={classes.button} variant="contained" color="secondary" onClick={this.clearStorage}>Start Fresh</Button>
-              <Button className={classes.button} variant="contained" color="primary" onClick={this.restart}>Restart</Button>
+              <Button className={classes.button} variant="contained" color="secondary" onClick={this.clearStorage}>
+                Start Fresh
+              </Button>
+              <Button className={classes.button} variant="contained" color="primary" onClick={this.restart}>
+                Restart
+              </Button>
            </div>
          </div>
        </Paper>
@@ -98,6 +104,7 @@ const styles = (theme: Theme) => ({
  },
  textColor: {
    color: theme.palette.text.primary,
+    userSelect: 'all' as 'all',
  },
  centered: {
    textAlign: 'center' as 'center',
@@ -1,27 +1,116 @@
 import * as React from 'react'
+import ChartPanel from '../ChartPanel'
 import ReactSplitPane from 'react-split-pane'
+import Tree from '../Tree'
+import { AppState } from '../../reducers'
+import { ChartParameters } from '../../reducers/Charts'
+import { connect } from 'react-redux'
+import { List } from 'immutable'
 import { Sidebar } from '../Sidebar'
-import Tree from '../Tree/Tree'
+import ReactResizeDetector from 'react-resize-detector'
+
+interface Props {
+  heightProperty: any
+  paneDefaults: any
+  connectionId?: string
+  chartPanelItems: List<ChartParameters>
+}
+
+function ContentView(props: Props) {
+  const [height, setHeight] = React.useState<string | number>('100%')
+  const [sidebarWidth, setSidebarWidth] = React.useState<string | number>('40%')
+  const [detectedHeight, setDetectedHeight] = React.useState(0)
+  const [detectedSidebarWidth, setDetectedSidebarWidth] = React.useState(0)
+  const detectSize = React.useCallback((width, newHeight) => {
+    setDetectedHeight(newHeight)
+  }, [])
+
+  const detectSidebarSize = React.useCallback(width => {
+    setDetectedSidebarWidth(width)
+  }, [])
+
+  const closeDrawerCompletelyIfItSitsOnTheEdge = React.useCallback(() => {
+    if (detectedHeight < 30) {
+      setHeight('100%')
+    }
+  }, [detectedHeight])
+
+  const closeSidebarCompletelyIfItSitsOnTheEdge = React.useCallback(() => {
+    if (detectedSidebarWidth < 30) {
+      setSidebarWidth('0%')
+    }
+  }, [detectedSidebarWidth])
+
+  // Open chart panel on start and when a new chart is added but the panel is closed
+  React.useEffect(() => {
+    const almostClosed = !isNaN(height as any) && detectedHeight < 30
+    if ((!height || height === '100%' || almostClosed) && props.chartPanelItems.count() > 0) {
+      setHeight('calc(100% - 250px)')
+    }
+
+    if (props.chartPanelItems.count() === 0) {
+      setHeight('100%')
+    }
+  }, [props.chartPanelItems])

-export default function ContentView(props: {heightProperty: any, paneDefaults: any, connectionId: any}) {
  return (
-    <ReactSplitPane
-      step={20}
-      primary="second"
-      className={props.heightProperty}
-      split="vertical"
-      minSize={250}
-      defaultSize={500}
-      allowResize={true}
-      style={{ position: 'relative' }}
-      pane1Style={{ overflow: 'hidden' }}
-    >
-      <div className={props.paneDefaults}>
-        <Tree />
-      </div>
-      <div className={props.paneDefaults}>
-        <Sidebar connectionId={props.connectionId} />
-      </div>
-    </ReactSplitPane>
+    <div className={props.paneDefaults}>
+      <span>
+        <ReactSplitPane
+          step={20}
+          primary="second"
+          className={props.heightProperty}
+          split="vertical"
+          minSize={0}
+          size={sidebarWidth}
+          onChange={setSidebarWidth}
+          onDragFinished={closeSidebarCompletelyIfItSitsOnTheEdge}
+          allowResize={true}
+          style={{ height: '100%' }}
+          pane1Style={{ overflowX: 'hidden' }}
+          resizerStyle={{ height: '100%' }}
+        >
+          <span>
+            <ReactSplitPane
+              step={10}
+              split="horizontal"
+              minSize={0}
+              size={height}
+              allowResize={true}
+              style={{ height: 'calc(100vh - 64px)' }}
+              pane1Style={{ maxHeight: '100%' }}
+              pane2Style={{ borderTop: '1px solid #999', display: 'flex' }}
+              onChange={setHeight}
+              onDragFinished={closeDrawerCompletelyIfItSitsOnTheEdge}
+            >
+              <Tree />
+              {/** Passing height constraints via flex options down */}
+              <div style={{ flex: 1, display: 'flex', height: '100%', width: '100%' }}>
+                {/** Resize detector must not be in the scroll zone, it needs to detect actual available size */}
+                <ReactResizeDetector handleHeight={true} onResize={detectSize} />
+                <ChartPanel />
+              </div>
+            </ReactSplitPane>
+          </span>
+          <div style={{ height: '100%' }}>
+            <ReactResizeDetector handleWidth={true} onResize={detectSidebarSize} />
+            <div
+              className={props.paneDefaults}
+              style={{ minWidth: '250px', height: '100%', overflowY: 'auto', overflowX: 'hidden' }}
+            >
+              <Sidebar connectionId={props.connectionId} />
+            </div>
+          </div>
+        </ReactSplitPane>
+      </span>
+    </div>
  )
 }
+
+const mapStateToProps = (state: AppState) => {
+  return {
+    chartPanelItems: state.charts.get('charts'),
+  }
+}
+
+export default connect(mapStateToProps)(ContentView)
@@ -2,15 +2,14 @@ import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
 import CustomIconButton from '../helper/CustomIconButton'
 import Pause from '@material-ui/icons/PauseCircleFilled'
-import Resume from '@material-ui/icons/PlayCircleFilled'
+import Resume from '@material-ui/icons/PlayArrow'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { treeActions } from '../../actions'
-import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
-import { Tooltip } from '@material-ui/core'
+import { withStyles, Theme } from '@material-ui/core/styles'

-const styles: StyleRulesCallback = theme => ({
+const styles = (theme: Theme) => ({
  icon: {
    color: theme.palette.primary.contrastText,
    verticalAlign: 'middle' as 'middle',
@@ -23,13 +22,13 @@ const styles: StyleRulesCallback = theme => ({
 interface Props {
  classes: any
  actions: {
-    tree: typeof treeActions,
+    tree: typeof treeActions
  }
  paused: boolean
  tree?: q.Tree<any>
 }

-class PauseButton extends React.Component<Props, {changes: number}> {
+class PauseButton extends React.Component<Props, { changes: number }> {
  private timer?: any
  constructor(props: Props) {
    super(props)
@@ -43,7 +42,8 @@ class PauseButton extends React.Component<Props, {changes: number}> {

    return (
      <span className={this.props.classes.bufferStats}>
-        {this.state.changes} changes<br />
+        {this.state.changes} changes
+        <br />
        buffer at {Math.round(this.props.tree.unmergedChanges().fillState() * 10000) / 100}%
      </span>
    )
@@ -67,12 +67,18 @@ class PauseButton extends React.Component<Props, {changes: number}> {
  }

  public render() {
-    const message = this.props.paused ? 'Resumes updating the tree, after applying all recorded changes' : 'Stops all updates, records changes until the buffer is full.'
+    const message = this.props.paused
+      ? 'Resumes updating the tree, after applying all recorded changes'
+      : 'Stops all updates, records changes until the buffer is full.'
    return (
      <div style={{ display: 'inline-flex' }}>
        <span>
          <CustomIconButton onClick={this.props.actions.tree.togglePause} tooltip={message}>
-            {this.props.paused ? <Resume className={this.props.classes.icon} /> : <Pause className={this.props.classes.icon} />}
+            {this.props.paused ? (
+              <Resume className={this.props.classes.icon} />
+            ) : (
+              <Pause className={this.props.classes.icon} />
+            )}
          </CustomIconButton>
        </span>
        {this.props.paused ? this.renderBufferStats() : null}
@@ -96,4 +102,7 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(PauseButton))
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withStyles(styles)(PauseButton))
@@ -0,0 +1,146 @@
+import React, { useCallback, useState, useRef } from 'react'
+import ClearAdornment from '../helper/ClearAdornment'
+import Search from '@material-ui/icons/Search'
+import { AppState } from '../../reducers'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { InputBase } from '@material-ui/core'
+import { settingsActions } from '../../actions'
+import { fade, Theme, withStyles } from '@material-ui/core/styles'
+import { useGlobalKeyEventHandler } from '../../effects/useGlobalKeyEventHandler'
+import { KeyCodes } from '../../utils/KeyCodes'
+
+function SearchBar(props: {
+  classes: any
+  topicFilter?: string
+  hasConnection: boolean
+  actions: {
+    settings: typeof settingsActions
+  }
+}) {
+  const { actions, classes, hasConnection, topicFilter } = props
+
+  const [hasFocus, setHasFocus] = useState(false)
+  const inputRef = useRef<HTMLInputElement>()
+  const onFocus = useCallback(() => setHasFocus(true), [])
+  const onBlur = useCallback(() => setHasFocus(false), [])
+
+  const clearFilter = useCallback(() => {
+    actions.settings.filterTopics('')
+  }, [])
+
+  const onFilterChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    actions.settings.filterTopics(event.target.value)
+  }, [])
+
+  useGlobalKeyEventHandler(undefined, event => {
+    const isCharacter = event.key.length === 1
+    const isAllowedControlCharacter = event.keyCode === KeyCodes.backspace || event.keyCode === KeyCodes.delete
+    const tagNameBlacklist = ['INPUT', 'TEXTAREA', 'RADIO', 'CHECKBOX', 'OPTION', 'FORM']
+
+    const tagElementIsNotBlacklisted =
+      document.activeElement && tagNameBlacklist.indexOf(document.activeElement.tagName) === -1
+
+    if (
+      (isCharacter || isAllowedControlCharacter) &&
+      !event.defaultPrevented &&
+      !hasFocus &&
+      tagElementIsNotBlacklisted &&
+      hasConnection
+    ) {
+      // Focus input field, no preventDefault the event will reach the input element after it has been focussed
+      inputRef.current && inputRef.current.focus()
+    }
+  })
+
+  return (
+    <div className={classes.search}>
+      <div className={classes.searchIcon}>
+        <Search />
+      </div>
+      <InputBase
+        value={topicFilter}
+        inputProps={{
+          onFocus,
+          onBlur,
+          ref: inputRef,
+        }}
+        onChange={onFilterChange}
+        placeholder="Search…"
+        endAdornment={
+          <div style={{ width: '24px', paddingRight: '8px' }}>
+            <ClearAdornment variant="primary" action={clearFilter} value={topicFilter} />
+          </div>
+        }
+        classes={{ root: classes.inputRoot, input: classes.inputInput }}
+      />
+    </div>
+  )
+}
+
+const mapStateToProps = (state: AppState) => {
+  return {
+    topicFilter: state.settings.get('topicFilter'),
+    hasConnection: Boolean(state.connection.connectionId),
+  }
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: {
+      settings: bindActionCreators(settingsActions, dispatch),
+    },
+  }
+}
+
+const styles = (theme: Theme) => ({
+  search: {
+    position: 'relative' as 'relative',
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: fade(theme.palette.common.white, 0.15),
+    '&:hover': {
+      backgroundColor: fade(theme.palette.common.white, 0.25),
+    },
+    marginRight: theme.spacing(2),
+    marginLeft: 0,
+    flexGrow: 1,
+    maxWidth: '60%',
+
+    [theme.breakpoints.up('md')]: {
+      maxWidth: '30%',
+
+      marginLeft: theme.spacing(4),
+      width: 'auto' as 'auto',
+    },
+    [theme.breakpoints.up(750)]: {
+      marginLeft: theme.spacing(4),
+      width: 'auto' as 'auto',
+    },
+  },
+  searchIcon: {
+    width: theme.spacing(6),
+    height: '100%',
+    position: 'absolute' as 'absolute',
+    pointerEvents: 'none' as 'none',
+    display: 'flex' as 'flex',
+    alignItems: 'center' as 'center',
+    justifyContent: 'center' as 'center',
+  },
+  inputRoot: {
+    color: 'inherit' as 'inherit',
+    width: '100%',
+  },
+  inputInput: {
+    paddingTop: theme.spacing(1),
+    paddingRight: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    paddingLeft: theme.spacing(6),
+    transition: theme.transitions.create('width'),
+    width: '100%',
+  },
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withStyles(styles)(SearchBar))
@@ -1,56 +1,24 @@
 import * as React from 'react'
-import ClearAdornment from '../helper/ClearAdornment'
 import CloudOff from '@material-ui/icons/CloudOff'
 import ConnectionHealthIndicator from '../helper/ConnectionHealthIndicator'
 import Menu from '@material-ui/icons/Menu'
-import Search from '@material-ui/icons/Search'
+import PauseButton from './PauseButton'
+import SearchBar from './SearchBar'
+import { AppBar, Button, IconButton, Toolbar, Typography } from '@material-ui/core'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { connectionActions, settingsActions, globalActions } from '../../actions'
-import { fade } from '@material-ui/core/styles/colorManipulator'
-import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
-import {
-  AppBar,
-  Button,
-  IconButton,
-  InputBase,
-  Toolbar,
-  Typography,
-} from '@material-ui/core'
-import PauseButton from './PauseButton'
+import { connectionActions, globalActions, settingsActions } from '../../actions'
+import { Theme, withStyles } from '@material-ui/core/styles'

-const styles: StyleRulesCallback = theme => ({
+const styles = (theme: Theme) => ({
  title: {
-    display: 'none',
+    display: 'none' as 'none',
    [theme.breakpoints.up(750)]: {
-      display: 'block',
+      display: 'block' as 'block',
    },
    whiteSpace: 'nowrap' as 'nowrap',
  },
-  search: {
-    position: 'relative',
-    borderRadius: theme.shape.borderRadius,
-    backgroundColor: fade(theme.palette.common.white, 0.15),
-    '&:hover': {
-      backgroundColor: fade(theme.palette.common.white, 0.25),
-    },
-    marginRight: theme.spacing(2),
-    marginLeft: 0,
-    flexGrow: 1,
-    maxWidth: '60%',
-
-    [theme.breakpoints.up('md')]: {
-      maxWidth: '30%',
-
-      marginLeft: theme.spacing(4),
-      width: 'auto',
-    },
-    [theme.breakpoints.up(750)]: {
-      marginLeft: theme.spacing(4),
-      width: 'auto',
-    },
-  },
  disconnectIcon: {
    [theme.breakpoints.down('xs')]: {
      display: 'none' as 'none',
@@ -58,27 +26,6 @@ const styles: StyleRulesCallback = theme => ({
    marginRight: '8px',
    paddingLeft: '8px',
  },
-  searchIcon: {
-    width: theme.spacing(6),
-    height: '100%',
-    position: 'absolute',
-    pointerEvents: 'none',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  inputRoot: {
-    color: 'inherit',
-    width: '100%',
-  },
-  inputInput: {
-    paddingTop: theme.spacing(1),
-    paddingRight: theme.spacing(1),
-    paddingBottom: theme.spacing(1),
-    paddingLeft: theme.spacing(6),
-    transition: theme.transitions.create('width'),
-    width: '100%',
-  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20,
@@ -92,9 +39,9 @@ const styles: StyleRulesCallback = theme => ({
 interface Props {
  classes: any
  actions: {
-    settings: typeof settingsActions,
-    connection: typeof connectionActions,
-    global: typeof globalActions,
+    settings: typeof settingsActions
+    connection: typeof connectionActions
+    global: typeof globalActions
  }
  topicFilter?: string
 }
@@ -102,34 +49,7 @@ interface Props {
 class TitleBar extends React.Component<Props, {}> {
  constructor(props: any) {
    super(props)
-    this.state = { }
-  }
-
-  private renderSearch() {
-    const { classes, topicFilter } = this.props
-
-    return (
-      <div className={classes.search}>
-        <div className={classes.searchIcon}>
-          <Search />
-        </div>
-        <InputBase
-          value={topicFilter}
-          onChange={this.onFilterChange}
-          placeholder="Search…"
-          endAdornment={<div style={{ width: '24px', paddingRight: '8px' }}><ClearAdornment variant="primary" action={this.clearFilter} value={topicFilter} /></div>}
-          classes={{ root: classes.inputRoot, input: classes.inputInput }}
-        />
-      </div>
-    )
-  }
-
-  private clearFilter = () => {
-    this.props.actions.settings.filterTopics('')
-  }
-
-  private onFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    this.props.actions.settings.filterTopics(event.target.value)
+    this.state = {}
  }

  public render() {
@@ -138,11 +58,18 @@ class TitleBar extends React.Component<Props, {}> {
    return (
      <AppBar position="static">
        <Toolbar>
-          <IconButton className={classes.menuButton} color="inherit" aria-label="Menu" onClick={actions.global.toggleSettingsVisibility}>
+          <IconButton
+            className={classes.menuButton}
+            color="inherit"
+            aria-label="Menu"
+            onClick={actions.global.toggleSettingsVisibility}
+          >
            <Menu />
          </IconButton>
-          <Typography className={classes.title} variant="h6" color="inherit">MQTT Explorer</Typography>
-          {this.renderSearch()}
+          <Typography className={classes.title} variant="h6" color="inherit">
+            MQTT Explorer
+          </Typography>
+          <SearchBar />
          <PauseButton />
          <Button className={classes.disconnect} onClick={actions.connection.disconnect}>
            Disconnect <CloudOff className={classes.disconnectIcon} />
@@ -170,4 +97,7 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(TitleBar))
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withStyles(styles)(TitleBar))
@@ -1,14 +1,9 @@
 import * as React from 'react'
-import {
-  InputLabel,
-  Switch,
-  Theme,
-  Tooltip
-  } from '@material-ui/core'
+import { InputLabel, Switch, Theme, Tooltip } from '@material-ui/core'
 import { withStyles } from '@material-ui/styles'
 const sha1 = require('sha1')

-function BooleanSwitch(props: {title: string, value: boolean, tooltip: string, action: () => void, classes: any}) {
+function BooleanSwitch(props: { title: string; value: boolean; tooltip: string; action: () => void; classes: any }) {
  const { tooltip, value, action, title, classes } = props

  const clickHandler = (e: React.MouseEvent) => {
@@ -20,34 +15,21 @@ function BooleanSwitch(props: {title: string, value: boolean, tooltip: string, a
  return (
    <div style={{ padding: '8px', display: 'flex' }}>
      <Tooltip title={tooltip}>
-        <InputLabel
-          htmlFor={`toggle-${sha1(title)}`}
-          onClick={clickHandler}
-          className={classes.label}
-        >
+        <InputLabel htmlFor={`toggle-${sha1(title)}`} onClick={clickHandler} className={classes.label}>
          {title}
        </InputLabel>
      </Tooltip>
      <Tooltip title={tooltip}>
-        <Switch
-          name={`toggle-${sha1(title)}`}
-          checked={value}
-          onChange={action}
-          color="primary"
-          classes={{ switchBase: classes.switchBase }}
-        />
+        <Switch name={`toggle-${sha1(title)}`} checked={value} onChange={action} color="primary" />
      </Tooltip>
    </div>
  )
 }

 const styles = (theme: Theme) => ({
-  switchBase: {
-    height: theme.spacing(4),
-  },
  label: {
    flex: '1',
-    paddingTop: '8px',
+    paddingTop: theme.spacing(1.5),
  },
 })

@@ -2,7 +2,7 @@ import * as q from '../../../../backend/src/Model'
 import * as React from 'react'
 import { AppState } from '../../reducers'
 import { connect } from 'react-redux'
-import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
+import { StyleRulesCallback, withStyles, Theme } from '@material-ui/core/styles'
 import { TopicViewModel } from '../../model/TopicViewModel'
 import { Typography } from '@material-ui/core'
 import { Base64Message } from '../../../../backend/src/Model/Base64Message'
@@ -15,7 +15,7 @@ interface Stats {
  title: string
 }

-const styles: StyleRulesCallback = theme => ({
+const styles = (theme: Theme) => ({
  flex: {
    display: 'flex',
    width: '100%',
@@ -112,13 +112,17 @@ class BrokerStatistics extends React.Component<Props, {}> {
    }

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

    return (
      <div key={stat.title}>
-        <Typography><b>{stat.title}</b></Typography>
-        <Typography style={{ paddingLeft: '8px' }}><i>{value}</i></Typography>
+        <Typography>
+          <b>{stat.title}</b>
+        </Typography>
+        <Typography style={{ paddingLeft: '8px' }}>
+          <i>{value}</i>
+        </Typography>
      </div>
    )
  }
@@ -2,12 +2,13 @@ import * as React from 'react'
 import BooleanSwitch from './BooleanSwitch'
 import BrokerStatistics from './BrokerStatistics'
 import ChevronRight from '@material-ui/icons/ChevronRight'
+import TimeLocale from './TimeLocale'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { globalActions, settingsActions } from '../../actions'
 import { shell } from 'electron'
-import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
+import { Theme, withStyles } from '@material-ui/core/styles'
 import { TopicOrder } from '../../reducers/Settings'

 import {
@@ -21,29 +22,35 @@ import {
  Typography,
  Tooltip,
 } from '@material-ui/core'
-import TimeLocale from './TimeLocale';

-export const autoExpandLimitSet = [{
-  limit: 0,
-  name: 'Collapsed',
-}, {
-  limit: 2,
-  name: 'Few',
-}, {
-  limit: 5,
-  name: 'Some',
-}, {
-  limit: 15,
-  name: 'Most',
-}, {
-  limit: 30,
-  name: 'Most',
-}, {
-  limit: 1E6,
-  name: 'All',
-}]
+export const autoExpandLimitSet = [
+  {
+    limit: 0,
+    name: 'Collapsed',
+  },
+  {
+    limit: 2,
+    name: 'Few',
+  },
+  {
+    limit: 5,
+    name: 'Some',
+  },
+  {
+    limit: 15,
+    name: 'Most',
+  },
+  {
+    limit: 30,
+    name: 'Most',
+  },
+  {
+    limit: 1e6,
+    name: 'All',
+  },
+]

-const styles: StyleRulesCallback = theme => ({
+const styles = (theme: Theme) => ({
  drawer: {
    backgroundColor: theme.palette.background.default,
    flexShrink: 0,
@@ -70,8 +77,8 @@ const styles: StyleRulesCallback = theme => ({

 interface Props {
  actions: {
-    settings: typeof settingsActions,
-    global: typeof globalActions,
+    settings: typeof settingsActions
+    global: typeof globalActions
  }
  autoExpandLimit: number
  classes: any
@@ -96,29 +103,56 @@ class Settings extends React.Component<Props, {}> {
  private renderHighlightTopicUpdates() {
    const { highlightTopicUpdates, actions } = this.props

-    return <BooleanSwitch title="Show Activity" tooltip="Topics blink when a new message arrives" value={highlightTopicUpdates} action={actions.settings.toggleHighlightTopicUpdates}/>
+    return (
+      <BooleanSwitch
+        title="Show Activity"
+        tooltip="Topics blink when a new message arrives"
+        value={highlightTopicUpdates}
+        action={actions.settings.toggleHighlightTopicUpdates}
+      />
+    )
  }

  private selectTopicsOnMouseOver() {
    const { actions, selectTopicWithMouseOver } = this.props
    const toggle = () => actions.settings.selectTopicWithMouseOver(!selectTopicWithMouseOver)

-    return <BooleanSwitch title="Quick Preview" tooltip="Select topics on mouse over" value={selectTopicWithMouseOver} action={toggle} />
+    return (
+      <BooleanSwitch
+        title="Quick Preview"
+        tooltip="Select topics on mouse over"
+        value={selectTopicWithMouseOver}
+        action={toggle}
+      />
+    )
  }

  private toggleTheme() {
    const { actions, theme } = this.props

-    return <BooleanSwitch title="Dark Mode" tooltip="Enable dark theme" value={theme === 'dark'} action={actions.settings.toggleTheme} />
+    return (
+      <BooleanSwitch
+        title="Dark Mode"
+        tooltip="Enable dark theme"
+        value={theme === 'dark'}
+        action={actions.settings.toggleTheme}
+      />
+    )
  }

  private renderAutoExpand() {
    const { classes, autoExpandLimit } = this.props

-    const limits = autoExpandLimitSet.map(limit => <MenuItem key={limit.limit} value={limit.limit}>{limit.limit < 10000 && limit.limit > 0 ? `≤ ${limit.limit} topics` : limit.name}</MenuItem>)
+    const limits = autoExpandLimitSet.map(limit => (
+      <MenuItem key={limit.limit} value={limit.limit}>
+        {limit.limit < 10000 && limit.limit > 0 ? `≤ ${limit.limit} topics` : limit.name}
+      </MenuItem>
+    ))
    return (
      <div style={{ padding: '8px', display: 'flex' }}>
-        <InputLabel htmlFor="auto-expand" style={{ flex: '1', marginTop: '8px' }}>Auto Expand</InputLabel>
+        <InputLabel htmlFor="auto-expand" style={{ flex: '1', marginTop: '8px' }}>
+          Auto Expand
+        </InputLabel>
        <Select
          value={autoExpandLimit}
          onChange={this.onChangeAutoExpand}
@@ -133,8 +167,8 @@ class Settings extends React.Component<Props, {}> {
    )
  }

-  private onChangeAutoExpand = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    this.props.actions.settings.setAutoExpandLimit(parseInt(e.target.value, 10))
+  private onChangeAutoExpand = (e: React.ChangeEvent<{ value: unknown }>) => {
+    this.props.actions.settings.setAutoExpandLimit(parseInt(String(e.target.value), 10))
  }

  private renderNodeOrder() {
@@ -142,7 +176,9 @@ class Settings extends React.Component<Props, {}> {

    return (
      <div style={{ padding: '8px', display: 'flex' }}>
-        <InputLabel htmlFor="auto-expand" style={{ flex: '1', marginTop: '8px' }}>Topic Order</InputLabel>
+        <InputLabel htmlFor="auto-expand" style={{ flex: '1', marginTop: '8px' }}>
+          Topic Order
+        </InputLabel>
        <Select
          value={topicOrder}
          onChange={this.onChangeSorting}
@@ -152,32 +188,26 @@ class Settings extends React.Component<Props, {}> {
          className={classes.input}
          style={{ flex: '1' }}
        >
-          <MenuItem value={TopicOrder.none}><em>default</em></MenuItem>
+          <MenuItem value={TopicOrder.none}>
+            <em>default</em>
+          </MenuItem>
          <MenuItem value={TopicOrder.abc}>a-z</MenuItem>
          <MenuItem value={TopicOrder.messages}>{TopicOrder.messages}</MenuItem>
          <MenuItem value={TopicOrder.topics}>{TopicOrder.topics}</MenuItem>
        </Select>
-    </div>)
+      </div>
+    )
  }

-  private onChangeSorting = (e: React.ChangeEvent<HTMLSelectElement>) => {
+  private onChangeSorting = (e: React.ChangeEvent<{ value: unknown }>) => {
    this.props.actions.settings.setTopicOrder(e.target.value as TopicOrder)
  }

  public render() {
    const { classes, actions, visible } = this.props
    return (
-      <Drawer
-        anchor="left"
-        className={classes.drawer}
-        open={visible}
-        variant="persistent"
-      >
-        <div
-          className={classes.paper}
-          tabIndex={0}
-          role="button"
-        >
+      <Drawer anchor="left" className={classes.drawer} open={visible} variant="persistent">
+        <div className={classes.paper} tabIndex={0} role="button">
          <Typography className={classes.title} variant="h6" color="inherit">
            <IconButton onClick={actions.global.toggleSettingsVisibility}>
              <ChevronRight />
@@ -225,4 +255,9 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(Settings))
+export default withStyles(styles)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(Settings)
+)
@@ -3,13 +3,7 @@ import DateFormatter from '../helper/DateFormatter'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import {
-  Input,
-  InputLabel,
-  MenuItem,
-  Select,
-  StyleRulesCallback
-  } 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'
 const moment = require('moment/min/moment-with-locales')
@@ -17,7 +11,7 @@ const moment = require('moment/min/moment-with-locales')
 interface Props {
  actions: {
    settings: typeof settingsActions
-  },
+  }
  timeLocale: string
  classes: any
 }
@@ -28,21 +22,33 @@ function TimeLocaleSettings(props: Props) {
  const date = new Date()
  const localeMenuItems = locales.map((l: string) => (
    <MenuItem key={l} value={l}>
-      <div>Locale: <b>{l}</b>, Format: <b><DateFormatter date={date} overrideLocale={l} /></b></div>
+      <div>
+        Locale: <b>{l}</b>, Format:{' '}
+        <b>
+          <DateFormatter date={date} overrideLocale={l} />
+        </b>
+      </div>
    </MenuItem>
  ))

+  function updateLocale(e: React.ChangeEvent<{ value: unknown }>) {
+    const locale = e.target.value ? String(e.target.value) : ''
+    actions.settings.setTimeLocale(locale)
+  }
+
  return (
    <div style={{ padding: '8px', display: 'flex' }}>
-      <InputLabel htmlFor="time-locale" style={{ flex: '1', marginTop: '8px' }}>Time Locale</InputLabel>
+      <InputLabel htmlFor="time-locale" style={{ flex: '1', marginTop: '8px' }}>
+        Time Locale
+      </InputLabel>
      <Select
-          value={timeLocale}
-          onChange={e => actions.settings.setTimeLocale(e.target.value)}
-          input={<Input name="time-locale" id="time-locale-label-placeholder" />}
-          name="time-locale"
-          className={classes.input}
-          renderValue={(v) => <span>{v}</span>}
-          style={{ flex: '1' }}
+        value={timeLocale}
+        onChange={updateLocale}
+        input={<Input name="time-locale" id="time-locale-label-placeholder" />}
+        name="time-locale"
+        className={classes.input}
+        renderValue={v => <span>{String(v)}</span>}
+        style={{ flex: '1' }}
      >
        {localeMenuItems}
      </Select>
@@ -64,16 +70,21 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-const styles: StyleRulesCallback = theme => ({
+const styles = (theme: Theme) => ({
  input: {
    minWidth: '150px',
    margin: `auto ${theme.spacing(1)} auto ${theme.spacing(2)}px`,
  },
  selected: {
    '& div': {
-      display: 'none'
-    }
-  }
+      display: 'none',
+    },
+  },
 })

-export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(TimeLocaleSettings))
+export default withStyles(styles)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(TimeLocaleSettings)
+)
@@ -1,199 +0,0 @@
-import * as diff from 'diff'
-import * as Prism from 'prismjs'
-import * as React from 'react'
-import { CodeBlockColors, CodeBlockColorsBraceMonokai } from './CodeBlockColors'
-import { selectTextWithCtrlA } from '../../utils/handleTextSelectWithCtrlA'
-import { Theme, withStyles } from '@material-ui/core'
-import 'prismjs/components/prism-json'
-
-interface Props {
-  previous: string
-  current: string
-  nameOfCompareMessage: string
-  language?: 'json'
-  classes: any
-}
-
-class CodeDiff extends React.Component<Props, {}> {
-  private handleCtrlA = selectTextWithCtrlA({ targetSelector: 'pre ~ pre' })
-
-  constructor(props: Props) {
-    super(props)
-  }
-
-  private renderChangeAmount(changes: Array<Diff.Change>) {
-    const additions = changes.map(change => (change.added === true) ? (change.count || 0) : 0).reduce((a, b) => a + b)
-    const deletions = changes.map(change => (change.removed === true) ? (change.count || 0) : 0).reduce((a, b) => a + b)
-    if (additions === 0 && deletions === 0) {
-      return null
-    }
-
-    return (
-      <span style={{ display: 'block', marginBottom: '8px', float: 'right' }}>
-        <span>
-          Comparing with <b>{this.props.nameOfCompareMessage}</b> message:&nbsp;
-
-          <span className={this.props.classes.additions}>+ {additions} line{additions === 1 ? '' : 's'}</span>
-          , <span className={this.props.classes.deletions}>- {deletions} line{deletions === 1 ? '' : 's'}</span>
-        </span>
-      </span>
-    )
-  }
-
-  private trimNewlineRight(str: string) {
-    if (str.slice(-1) === '\n') {
-      return str.slice(0, -1)
-    }
-
-    return str
-  }
-
-  private cssClassForChange(change: diff.Change) {
-    if (change.added === true) {
-      return this.props.classes.addition
-    }
-
-    if (change.removed === true) {
-      return this.props.classes.deletion
-    }
-
-    return this.props.classes.noChange
-  }
-
-  public render() {
-    const changes = diff.diffLines(this.props.previous, this.props.current)
-    const styledLines = Prism.highlight(this.props.current, Prism.languages.json, 'json').split('\n')
-
-    let lineNumber = 0
-    const code = changes.map((change, key) => {
-      const hasStyledCode = change.removed !== true
-      const changedLines = change.count || 0
-      if (hasStyledCode && this.props.language === 'json') {
-        const currentLines = styledLines.slice(lineNumber, lineNumber + changedLines)
-        const lines = currentLines.map((html: string, idx: number) => {
-          return <div key={`${key}-${idx}`} className={`${this.props.classes.line} ${this.cssClassForChange(change)}`}><span dangerouslySetInnerHTML={{ __html: html }} /></div>
-        })
-        lineNumber += changedLines
-
-        return <div key={key}>{lines}</div>
-      }
-
-      return this.trimNewlineRight(change.value)
-        .split('\n')
-        .map((line, idx) => {
-          return <div key={`${key}-${idx}`} className={`${this.props.classes.line} ${this.cssClassForChange(change)}`}><span>{line}</span></div>
-        })
-    })
-
-    const gutters = changes.map((change, key) => {
-      return this.trimNewlineRight(change.value)
-        .split('\n')
-        .map((_, idx) => (
-          <div key={`${key}-${idx}`} className={`${this.cssClassForChange(change)} ${this.props.classes.gutterLine}`}>
-            {change.added ? '+' : null}{change.removed ? '-' : null}{!change.added && !change.removed ? ' ' : null}
-          </div>
-        ))
-    })
-
-    return (
-      <div>
-        <div tabIndex={0} onKeyDown={this.handleCtrlA} className={this.props.classes.codeWrapper}>
-          <pre className={this.props.classes.gutters}>{gutters}</pre>
-          <pre className={this.props.classes.codeBlock}>{code}</pre>
-        </div>
-        {this.renderChangeAmount(changes)}
-      </div>
-    )
-  }
-}
-
-const style = (theme: Theme) => {
-  const codeBlockColors = theme.palette.type === 'light' ? CodeBlockColors : CodeBlockColorsBraceMonokai
-  const gutterBaseStyle = {
-    width: '100%',
-  }
-
-  const codeBaseStyle = {
-    font: "12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace",
-    display: 'inline-grid' as 'inline-grid',
-    margin: '0',
-    padding: '1px 0 2px 0',
-  }
-
-  return {
-    additions: {
-      color: 'rgb(10, 255, 10)',
-    },
-    deletions: {
-      color: 'rgb(255, 10, 10)',
-    },
-    line: {
-      lineHeight: 'normal' as 'normal',
-      paddingLeft: '4px',
-    },
-    gutterLine: {
-      textAlign: 'right' as 'right',
-      paddingRight: theme.spacing(0.5),
-    },
-    codeWrapper: {
-      maxHeight: '15em',
-      overflow: 'auto',
-      backgroundColor: `${codeBlockColors.background}`,
-      margin: '8px 0 0 0',
-    },
-    gutters: {
-      ...codeBaseStyle,
-      width: '33px',
-      backgroundColor: codeBlockColors.gutters,
-      userSelect: 'none' as 'none',
-    },
-    codeBlock: {
-      ...codeBaseStyle,
-      width: 'calc(100% - 33px)',
-      backgroundColor: 'inherit !important',
-      '& span': {
-        color: codeBlockColors.text,
-      },
-      '& .token.number': {
-        color: codeBlockColors.numeric,
-      },
-      '& .token.boolean': {
-        color: codeBlockColors.numeric,
-      },
-      '& .token.property': {
-        color: codeBlockColors.variable,
-      },
-      '& .token.string': {
-        color: codeBlockColors.string,
-      },
-      '& .token': {
-        color: codeBlockColors.text,
-      },
-      '& .token.operator': {
-        color: codeBlockColors.text,
-      },
-      '& .token.punctuation': {
-        color: codeBlockColors.text,
-      },
-    },
-    noChange: {
-      ...gutterBaseStyle,
-    },
-    deletion: {
-      ...gutterBaseStyle,
-      backgroundColor: 'rgba(255, 10, 10, 0.3)',
-      // '&:hover': {
-      //   backgroundColor: 'rgba(255, 10, 10, 0.3)',
-      // },
-    },
-    addition: {
-      ...gutterBaseStyle,
-      backgroundColor: 'rgba(10, 255, 10, 0.3)',
-      // '&:hover': {
-      //   backgroundColor: 'rgba(10, 255, 10, 0.5)',
-      // },
-    },
-  }
-}
-
-export default withStyles(style)(CodeDiff)
@@ -0,0 +1,91 @@
+import * as q from '../../../../../backend/src/Model'
+import * as React from 'react'
+import ShowChart from '@material-ui/icons/ShowChart'
+import TopicPlot from '../../TopicPlot'
+import { bindActionCreators } from 'redux'
+import { chartActions } from '../../../actions'
+import { connect } from 'react-redux'
+import { Fade, Paper, Popper, Tooltip } from '@material-ui/core'
+import { JsonPropertyLocation } from '../../../../../backend/src/JsonAstParser'
+
+interface Props {
+  treeNode: q.TreeNode<any>
+  classes: any
+  literal: JsonPropertyLocation
+  actions: {
+    chart: typeof chartActions
+  }
+}
+
+function ChartPreview(props: Props) {
+  const chartIconRef = React.useRef(null)
+  const [open, setOpen] = React.useState(false)
+
+  const onClick = React.useCallback(() => {
+    props.actions.chart.addChart({
+      topic: props.treeNode.path(),
+      dotPath: props.literal.path !== '' ? props.literal.path : undefined,
+    })
+    setOpen(false)
+  }, [props.literal.path, props.treeNode])
+
+  const mouseOver = React.useCallback(() => {
+    setOpen(true)
+  }, [])
+
+  const mouseOut = React.useCallback(() => {
+    setOpen(false)
+  }, [])
+
+  const hasEnoughDataToDisplayDiagrams = props.treeNode.messageHistory.count() > 1
+
+  const addChartToPanelButton = hasEnoughDataToDisplayDiagrams ? (
+    <Tooltip title="Add to chart panel">
+      <ShowChart
+        ref={chartIconRef}
+        className={props.classes.icon}
+        onMouseEnter={mouseOver}
+        onMouseLeave={mouseOut}
+        onClick={onClick}
+        data-test-type="ShowChart"
+        data-test={props.literal.path}
+      />
+    </Tooltip>
+  ) : (
+    <Tooltip title="Add to chart panel, not enough data for preview">
+      <ShowChart
+        onClick={onClick}
+        className={props.classes.icon}
+        style={{ color: '#aaa' }}
+        data-test-type="ShowChart"
+        data-test={props.literal.path}
+      />
+    </Tooltip>
+  )
+
+  return (
+    <span>
+      {addChartToPanelButton}
+      <Popper open={open} anchorEl={chartIconRef.current} placement="left-end">
+        <Fade in={open} timeout={300}>
+          <Paper style={{ width: '300px' }}>
+            {open ? <TopicPlot history={props.treeNode.messageHistory} dotPath={props.literal.path} /> : <span />}
+          </Paper>
+        </Fade>
+      </Popper>
+    </span>
+  )
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: {
+      chart: bindActionCreators(chartActions, dispatch),
+    },
+  }
+}
+
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(ChartPreview)
@@ -0,0 +1,45 @@
+import * as React from 'react'
+import { Theme } from '@material-ui/core'
+import { withStyles } from '@material-ui/styles'
+
+interface Props {
+  changes: Array<Diff.Change>
+  classes: { [s: string]: any }
+  nameOfCompareMessage: string
+}
+
+function changeAmount(props: Props) {
+  const additions = props.changes.map(change => (change.added === true ? change.count || 0 : 0)).reduce((a, b) => a + b)
+  const deletions = props.changes
+    .map(change => (change.removed === true ? change.count || 0 : 0))
+    .reduce((a, b) => a + b)
+  if (additions === 0 && deletions === 0) {
+    return null
+  }
+
+  return (
+    <span style={{ display: 'block', textAlign: 'right' }}>
+      <span>
+        Comparing with <b>{props.nameOfCompareMessage}</b> message:&nbsp;
+        <span className={props.classes.additions}>
+          + {additions} line{additions === 1 ? '' : 's'}
+        </span>
+        ,{' '}
+        <span className={props.classes.deletions}>
+          - {deletions} line{deletions === 1 ? '' : 's'}
+        </span>
+      </span>
+    </span>
+  )
+}
+
+const style = (theme: Theme) => ({
+  additions: {
+    color: 'rgb(10, 255, 10)',
+  },
+  deletions: {
+    color: 'rgb(255, 10, 10)',
+  },
+})
+
+export default withStyles(style)(changeAmount)
@@ -0,0 +1,104 @@
+import * as diff from 'diff'
+import * as q from '../../../../../backend/src/Model'
+import * as React from 'react'
+import Add from '@material-ui/icons/Add'
+import ChartPreview from './ChartPreview'
+import Remove from '@material-ui/icons/Remove'
+import { JsonPropertyLocation } from '../../../../../backend/src/JsonAstParser'
+import { lineChangeStyle, trimNewlineRight } from './util'
+import { Theme } from '@material-ui/core'
+import { withStyles } from '@material-ui/styles'
+
+interface Props {
+  changes: Array<diff.Change>
+  literalPositions: Array<JsonPropertyLocation>
+  classes: any
+  className: string
+  treeNode: q.TreeNode<any>
+}
+
+const style = (theme: Theme) => {
+  const icon = {
+    verticalAlign: 'top',
+    width: '12px',
+    height: '12px',
+    marginTop: '2px',
+    borderRadius: '50%',
+  }
+
+  return {
+    icon,
+    iconButton: {
+      ...icon,
+      marginTop: '0px',
+      width: '16px',
+      height: '16px',
+      padding: '2px',
+      '&:hover': {
+        color: theme.palette.primary.contrastText,
+        backgroundColor: theme.palette.primary.main,
+      },
+    },
+    gutterLine: {
+      textAlign: 'right' as 'right',
+      paddingRight: theme.spacing(0.5),
+      height: '16px',
+      width: '100%',
+    },
+  }
+}
+
+function tokensForLine(change: diff.Change, line: number, props: Props) {
+  const { classes, literalPositions } = props
+  const literal = literalPositions[line]
+
+  const chartPreview = Boolean(literal) ? (
+    <ChartPreview
+      key="chartPreview"
+      treeNode={props.treeNode}
+      classes={{ icon: props.classes.iconButton }}
+      literal={literal}
+    />
+  ) : null
+
+  if (change.added) {
+    return [chartPreview, <Add key="add" className={classes.icon} />]
+  } else if (change.removed) {
+    return [<Remove key="remove" className={classes.icon} />]
+  } else {
+    return [
+      chartPreview,
+      <div
+        key="placeholder"
+        style={{ width: '12px', display: 'inline-block' }}
+        dangerouslySetInnerHTML={{ __html: '&nbsp;' }}
+      />,
+    ]
+  }
+}
+
+function Gutters(props: Props) {
+  let currentLine = -1
+  const gutters = props.changes
+    .map((change, key) => {
+      return trimNewlineRight(change.value)
+        .split('\n')
+        .map((_, idx) => {
+          currentLine = !change.removed ? currentLine + 1 : currentLine
+          return (
+            <div key={`${key}-${idx}`} style={lineChangeStyle(change)} className={props.classes.gutterLine}>
+              {tokensForLine(change, currentLine, props)}
+            </div>
+          )
+        })
+    })
+    .reduce((a, b) => a.concat(b), [])
+
+  return (
+    <span>
+      <pre className={props.className}>{gutters}</pre>
+    </span>
+  )
+}
+
+export default withStyles(style)(Gutters)
@@ -0,0 +1,107 @@
+import * as diff from 'diff'
+import * as Prism from 'prismjs'
+import * as q from '../../../../../backend/src/Model'
+import * as React from 'react'
+import DiffCount from './DiffCount'
+import Gutters from './Gutters'
+import { isPlottable, lineChangeStyle, trimNewlineRight } from './util'
+import { JsonPropertyLocation, literalsMappedByLines } from '../../../../../backend/src/JsonAstParser'
+import { selectTextWithCtrlA } from '../../../utils/handleTextSelectWithCtrlA'
+import { style } from './style'
+import { withStyles } from '@material-ui/core'
+import 'prismjs/components/prism-json'
+
+interface Props {
+  treeNode: q.TreeNode<any>
+  previous: string
+  current: string
+  nameOfCompareMessage: string
+  language?: 'json'
+  classes: any
+}
+
+interface State {}
+
+class CodeDiff extends React.Component<Props, State> {
+  private handleCtrlA = selectTextWithCtrlA({ targetSelector: 'pre ~ pre' })
+
+  constructor(props: Props) {
+    super(props)
+    this.state = {}
+  }
+
+  private isValidJson(str: string) {
+    try {
+      JSON.parse(str)
+      return true
+    } catch (error) {
+      return false
+    }
+  }
+
+  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
+    >
+  }
+
+  private renderStyledCodeLines(changes: Array<Diff.Change>) {
+    const styledLines = Prism.highlight(this.props.current, Prism.languages.json, 'json').split('\n')
+    let lineNumber = 0
+
+    return changes
+      .map((change, key) => {
+        const hasStyledCode = change.removed !== true
+        const changedLines = change.count || 0
+        if (hasStyledCode && this.props.language === 'json') {
+          const currentLines = styledLines.slice(lineNumber, lineNumber + changedLines)
+          const lines = currentLines.map((html: string, idx: number) => {
+            return (
+              <div key={`${key}-${idx}`} style={lineChangeStyle(change)} className={this.props.classes.line}>
+                <span dangerouslySetInnerHTML={{ __html: html }} />
+              </div>
+            )
+          })
+          lineNumber += changedLines
+
+          return [<div key={key}>{lines}</div>]
+        }
+
+        return trimNewlineRight(change.value)
+          .split('\n')
+          .map((line, idx) => {
+            return (
+              <div key={`${key}-${idx}`} style={lineChangeStyle(change)} className={this.props.classes.line}>
+                <span>{line}</span>
+              </div>
+            )
+          })
+      })
+      .reduce((a, b) => a.concat(b), [])
+  }
+
+  public render() {
+    const changes = diff.diffLines(this.props.previous, this.props.current)
+    const literalPositions = this.plottableLiteralsIndexedWithLineNumbers()
+    const code = this.renderStyledCodeLines(changes)
+
+    return (
+      <div>
+        <div tabIndex={0} onKeyDown={this.handleCtrlA} className={this.props.classes.codeWrapper}>
+          <Gutters
+            className={this.props.classes.gutters}
+            changes={changes}
+            treeNode={this.props.treeNode}
+            literalPositions={literalPositions}
+          />
+          <pre className={this.props.classes.codeBlock}>{code}</pre>
+        </div>
+        <DiffCount changes={changes} nameOfCompareMessage={this.props.nameOfCompareMessage} />
+      </div>
+    )
+  }
+}
+
+export default withStyles(style)(CodeDiff)
@@ -0,0 +1,63 @@
+import { CodeBlockColors, CodeBlockColorsBraceMonokai } from '../CodeBlockColors'
+import { Theme } from '@material-ui/core'
+
+export const style = (theme: Theme) => {
+  const codeBlockColors = theme.palette.type === 'light' ? CodeBlockColors : CodeBlockColorsBraceMonokai
+  const codeBaseStyle = {
+    font: "12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace",
+    display: 'inline-grid' as 'inline-grid',
+    margin: '0',
+    padding: '1px 0 0 0',
+  }
+
+  return {
+    line: {
+      lineHeight: 'normal' as 'normal',
+      paddingLeft: '4px',
+      width: '100%',
+      height: '16px',
+    },
+    codeWrapper: {
+      display: 'flex',
+      maxHeight: '15em',
+      overflow: 'auto',
+      backgroundColor: `${codeBlockColors.background}`,
+      margin: '8px 0 0 0',
+    },
+    gutters: {
+      ...codeBaseStyle,
+      width: '33px',
+      backgroundColor: codeBlockColors.gutters,
+      userSelect: 'none' as 'none',
+    },
+    codeBlock: {
+      ...codeBaseStyle,
+      width: 'calc(100% - 33px)',
+      backgroundColor: 'inherit !important',
+      '& span': {
+        color: codeBlockColors.text,
+      },
+      '& .token.number': {
+        color: codeBlockColors.numeric,
+      },
+      '& .token.boolean': {
+        color: codeBlockColors.numeric,
+      },
+      '& .token.property': {
+        color: codeBlockColors.variable,
+      },
+      '& .token.string': {
+        color: codeBlockColors.string,
+      },
+      '& .token': {
+        color: codeBlockColors.text,
+      },
+      '& .token.operator': {
+        color: codeBlockColors.text,
+      },
+      '& .token.punctuation': {
+        color: codeBlockColors.text,
+      },
+    },
+  }
+}
@@ -0,0 +1,69 @@
+export function trimNewlineRight(str: string) {
+  if (str.slice(-1) === '\n') {
+    return str.slice(0, -1)
+  }
+
+  return str
+}
+
+const gutterBaseStyle = {}
+
+const additionStyle = {
+  ...gutterBaseStyle,
+  backgroundColor: 'rgba(10, 255, 10, 0.3)',
+}
+
+const deletionStyle = {
+  ...gutterBaseStyle,
+  backgroundColor: 'rgba(255, 10, 10, 0.3)',
+}
+
+export function lineChangeStyle(change: Diff.Change) {
+  if (change.added === true) {
+    return additionStyle
+  }
+
+  if (change.removed === true) {
+    return deletionStyle
+  }
+
+  return gutterBaseStyle
+}
+
+export function toPlottableValue(value: any): number | undefined {
+  if (typeof value === 'number') {
+    return value
+  }
+
+  if (typeof value === 'boolean') {
+    return value ? 1 : 0
+  }
+
+  const isNumber = !isNaN(value)
+  const floatVal = parseFloat(value)
+  if (isNumber && !isNaN(floatVal)) {
+    return floatVal
+  }
+
+  const intVal = parseInt(value, undefined)
+  if (isNumber && !isNaN(intVal)) {
+    return intVal
+  }
+
+  // Convert "on" / "off" to int 1 / 0
+  if (typeof value === 'string') {
+    if (/^(on$)|(off$)/i.test(value)) {
+      return value.toLowerCase() === 'on' ? 1 : 0
+    }
+    if (/^[0-9]*,[0-9]+$/.test(value)) {
+      let parsedFloat = parseFloat(value.replace(',', '.'))
+      if (!isNaN(parsedFloat)) {
+        return parsedFloat
+      }
+    }
+  }
+}
+
+export function isPlottable(value: any) {
+  return !isNaN(toPlottableValue(value) as any)
+}
@@ -34,11 +34,13 @@ class HistoryDrawer extends React.Component<Props, State> {
    this.setState({ collapsed: !this.state.collapsed })
  }

-  private handleCtrlA = selectTextWithCtrlA({targetSelector: 'pre'})
+  private handleCtrlA = selectTextWithCtrlA({ targetSelector: 'pre' })

  public renderHistory() {
    const style = (element: HistoryItem) => ({
-      backgroundColor: element.selected ? this.props.theme.palette.action.selected : this.props.theme.palette.action.hover,
+      backgroundColor: element.selected
+        ? this.props.theme.palette.action.selected
+        : this.props.theme.palette.action.hover,
      margin: '8px',
      padding: '8px 8px 0 8px',
      cursor: this.props.onClick ? 'pointer' : 'inherit',
@@ -50,11 +52,16 @@ class HistoryDrawer extends React.Component<Props, State> {
        key={element.key}
        style={style(element)}
        onClick={(event: React.MouseEvent) => this.props.onClick && this.props.onClick(index, event.target)}
-        tabIndex={0} onKeyDown={this.handleCtrlA}
+        tabIndex={0}
+        onKeyDown={this.handleCtrlA}
      >
-        <div><i>{element.title}</i></div>
+        <div>
+          <i>{element.title}</i>
+        </div>
        <div style={messageStyle}>
-          <span><pre>{element.value}</pre></span>
+          <span>
+            <pre>{element.value}</pre>
+          </span>
        </div>
      </div>
    ))
@@ -63,11 +70,7 @@ class HistoryDrawer extends React.Component<Props, State> {

    return (
      <div className={this.props.classes.main}>
-        <Typography
-          component={'span'}
-          onClick={this.toggle}
-          style={{ cursor: 'pointer' }}
-        >
+        <Typography component={'span'} onClick={this.toggle} style={{ cursor: 'pointer' }}>
          <Badge
            classes={{ badge: this.props.classes.badge }}
            invisible={!visible}
@@ -78,7 +81,7 @@ class HistoryDrawer extends React.Component<Props, State> {
          </Badge>
          <div style={{ float: 'right' }}>{this.state.collapsed ? this.props.contentTypeIndicator : null}</div>
        </Typography>
-        <div style={{ maxHeight: '230px', overflowY: 'scroll'  }}>
+        <div style={{ maxHeight: '230px', overflowY: 'scroll' }}>
          {this.state.collapsed ? null : this.props.children}
          {this.state.collapsed ? null : elements}
        </div>
@@ -87,13 +90,7 @@ class HistoryDrawer extends React.Component<Props, State> {
  }

  public render() {
-    return (
-      <div
-        style={{ display: 'block', width: '100%' }}
-      >
-        {this.renderHistory()}
-      </div>
-    )
+    return <div style={{ display: 'block', width: '100%' }}>{this.renderHistory()}</div>
  }
 }

@@ -0,0 +1,111 @@
+import * as React from 'react'
+import DateFormatter from '../helper/DateFormatter'
+import { default as ReactResizeDetector } from 'react-resize-detector'
+import { PlotCurveTypes } from '../../reducers/Charts'
+import { Theme, withTheme } from '@material-ui/core'
+import 'react-vis/dist/style.css'
+const { XYPlot, LineMarkSeries, Hint, XAxis, YAxis, HorizontalGridLines } = require('react-vis')
+const abbreviate = require('number-abbreviate')
+
+interface Props {
+  data: Array<{ x: number; y: number }>
+  theme: Theme
+  interpolation?: PlotCurveTypes
+  range?: [number?, number?]
+  color?: string
+}
+
+function mapCurveType(type: PlotCurveTypes | undefined) {
+  switch (type) {
+    case 'curve':
+      return 'curveMonotoneX'
+    case 'linear':
+      return 'curveLinear'
+    case 'cubic_basis_spline':
+      return 'curveBasis'
+    case 'step_after':
+      return 'curveStepAfter'
+    case 'step_before':
+      return 'curveStepBefore'
+    default:
+      return 'curveMonotoneX'
+  }
+}
+
+export default withTheme((props: Props) => {
+  const [width, setWidth] = React.useState(300)
+  const [tooltip, setTooltip] = React.useState({ value: undefined })
+  const detectResize = React.useCallback(newWidth => setWidth(newWidth), [])
+
+  const hintFormatter = React.useCallback((point: any) => {
+    return [
+      { title: <b>Time</b>, value: <DateFormatter date={new Date(point.x)} /> },
+      { title: <b>Value</b>, value: point.y },
+    ]
+  }, [])
+
+  const hideTooltip = React.useCallback(() => {
+    setTooltip({ value: undefined })
+  }, [])
+
+  const showTooltip = React.useCallback((value: any) => {
+    setTooltip({ value })
+  }, [])
+
+  return React.useMemo(() => {
+    const data = props.data
+    const calculatedDomain = domainForData(data)
+    let yDomain: [number, number] = props.range
+      ? [props.range[0] || calculatedDomain[0], props.range[1] || calculatedDomain[1]]
+      : calculatedDomain
+
+    let color: string =
+      props.theme.palette.type === 'light' ? props.theme.palette.secondary.dark : props.theme.palette.primary.light
+    if (props.color) {
+      color = props.color
+    }
+
+    return (
+      <div style={{ height: '150px', overflow: 'hidden' }}>
+        <XYPlot width={width} height={180} yDomain={yDomain}>
+          <HorizontalGridLines />
+          <XAxis />
+          <YAxis width={45} tickFormat={(num: number) => abbreviate(num)} />
+          <LineMarkSeries
+            color={color}
+            onValueMouseOver={showTooltip}
+            onValueMouseOut={hideTooltip}
+            size={3}
+            data={data}
+            curve={mapCurveType(props.interpolation)}
+          />
+          {tooltip.value ? <Hint format={hintFormatter} value={tooltip.value} /> : null}
+        </XYPlot>
+        <ReactResizeDetector handleWidth={true} onResize={detectResize} />
+      </div>
+    )
+  }, [width, props.data, tooltip, props.interpolation, props.range, props.color, props.theme])
+})
+
+function domainForData(data: Array<{ x: number; y: number }>): [number, number] {
+  let max = data[0].y
+  let min = data[0].y
+  data.forEach(d => {
+    if (max < d.y) {
+      max = d.y
+    }
+    if (min > d.y) {
+      min = d.y
+    }
+  })
+
+  if ((max === 1 || max === 0) && (min === 1 || min === 0)) {
+    return [0, 1]
+  }
+
+  if (min === max) {
+    return [min - 0.5 * min, min + 0.5 * min]
+  }
+
+  return [min, max]
+}
@@ -0,0 +1,39 @@
+import * as React from 'react'
+import { default as AceEditor } from 'react-ace'
+import { Theme, withTheme } from '@material-ui/core'
+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: {
+  editorMode: string
+  theme: Theme
+  value: string | undefined
+  onChange: (value: string) => void
+}) {
+  const editorOptions = {
+    showLineNumbers: false,
+    tabSize: 2,
+  }
+
+  return (
+    <AceEditor
+      style={{}}
+      mode={props.editorMode}
+      theme={props.theme.palette.type === 'dark' ? 'monokai' : 'dawn'}
+      name="UNIQUE_ID_OF_DIV"
+      width="100%"
+      height="200px"
+      showGutter={true}
+      value={props.value}
+      onChange={props.onChange}
+      setOptions={editorOptions}
+      editorProps={{ $blockScrolling: true }}
+    />
+  )
+}
+
+export default withTheme(Editor)
@@ -0,0 +1,40 @@
+import * as React from 'react'
+import { FormControlLabel, Radio, RadioGroup } from '@material-ui/core'
+
+interface Props {
+  value: string
+  onChange: (event: React.ChangeEvent<{}>, value: string) => void
+}
+export function EditorModeSelect(props: Props) {
+  const labelStyle = { margin: '0 8px 0 8px' }
+  return (
+    <RadioGroup
+      style={{ display: 'inline-block', float: 'left' }}
+      value={props.value}
+      onChange={props.onChange}
+      row={true}
+    >
+      <FormControlLabel
+        value="text"
+        style={labelStyle}
+        control={<Radio color="primary" />}
+        label="raw"
+        labelPlacement="top"
+      />
+      <FormControlLabel
+        value="xml"
+        style={labelStyle}
+        control={<Radio color="primary" />}
+        label="xml"
+        labelPlacement="top"
+      />
+      <FormControlLabel
+        value="json"
+        style={labelStyle}
+        control={<Radio color="primary" />}
+        label="json"
+        labelPlacement="top"
+      />
+    </RadioGroup>
+  )
+}
@@ -8,32 +8,23 @@ import Navigation from '@material-ui/icons/Navigation'
 import { AppState } from '../../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { default as AceEditor } from 'react-ace'
 import { globalActions, publishActions } from '../../../actions'
-import { TopicViewModel } from '../../../model/TopicViewModel'
-import 'brace/mode/json'
-import 'brace/theme/dawn'
-import 'brace/theme/monokai'
-import 'brace/mode/xml'
-import 'brace/mode/text'
-import 'react-ace'

 import {
  Button,
  FormControlLabel,
-  Radio,
-  RadioGroup,
-  TextField,
  FormControl,
  InputLabel,
  Input,
  Checkbox,
-  MenuItem,
  Tooltip,
  Fab,
  Theme,
  withTheme,
 } from '@material-ui/core'
+import { EditorModeSelect } from './EditorModeSelect'
+import QosSelect from './QosSelect'
+import Editor from './Editor'

 const sha1 = require('sha1')

@@ -45,7 +36,6 @@ interface Props {
  globalActions: typeof globalActions
  retain: boolean
  editorMode: string
-  qos: 0 | 1 | 2
  theme: Theme
 }

@@ -54,17 +44,12 @@ interface State {
 }

 class Publish extends React.Component<Props, State> {
-
-  private editorOptions = {
-    showLineNumbers: false,
-    tabSize: 2,
-  }
  constructor(props: any) {
    super(props)
    this.state = { history: [] }
  }

-  private updatePayload = (payload: string, event?: any) => {
+  private updatePayload = (payload: string) => {
    this.props.actions.setPayload(payload)
  }

@@ -109,18 +94,18 @@ class Publish extends React.Component<Props, State> {
    return (
      <div>
        <FormControl style={{ width: '100%' }}>
-            <InputLabel htmlFor="publish-topic">Topic</InputLabel>
-            <Input
-              id="publish-topic"
-              value={topicStr}
-              startAdornment={<span/>}
-              endAdornment={<ClearAdornment action={this.clearTopic} value={topicStr} />}
-              onBlur={this.onTopicBlur}
-              onChange={this.updateTopic}
-              multiline={true}
-              placeholder="example/topic"
-            />
-          </FormControl>
+          <InputLabel htmlFor="publish-topic">Topic</InputLabel>
+          <Input
+            id="publish-topic"
+            value={topicStr}
+            startAdornment={<span />}
+            endAdornment={<ClearAdornment action={this.clearTopic} value={topicStr} />}
+            onBlur={this.onTopicBlur}
+            onChange={this.updateTopic}
+            multiline={true}
+            placeholder="example/topic"
+          />
+        </FormControl>
      </div>
    )
  }
@@ -133,13 +118,7 @@ class Publish extends React.Component<Props, State> {

  private publishButton() {
    return (
-      <Button
-        variant="contained"
-        size="small"
-        color="primary"
-        onClick={this.publish}
-        id="publish-button"
-      >
+      <Button variant="contained" size="small" color="primary" onClick={this.publish} id="publish-button">
        <Navigation style={{ marginRight: '8px' }} /> Publish
      </Button>
    )
@@ -163,7 +142,11 @@ class Publish extends React.Component<Props, State> {

    return (
      <Tooltip title="Format JSON">
-        <Fab style={{ width: '36px', height: '36px', marginLeft: '8px' }} onClick={this.formatJson} id="sidebar-publish-format-json">
+        <Fab
+          style={{ width: '36px', height: '36px', marginLeft: '8px' }}
+          onClick={this.formatJson}
+          id="sidebar-publish-format-json"
+        >
          <FormatAlignLeft style={{ fontSize: '20px' }} />
        </Fab>
      </Tooltip>
@@ -174,96 +157,31 @@ class Publish extends React.Component<Props, State> {
    return (
      <div style={{ marginTop: '16px' }}>
        <div style={{ width: '100%', lineHeight: '64px' }}>
-          {this.renderEditorModeSelection()}
+          <EditorModeSelect value={this.props.editorMode} onChange={this.updateMode} />
          {this.renderFormatJson()}
-          <div style={{ float: 'right', marginRight: '16px' }}>
-            {this.publishButton()}
-          </div>
+          <div style={{ float: 'right', marginRight: '16px' }}>{this.publishButton()}</div>
        </div>
      </div>
    )
  }

-  private renderEditorModeSelection() {
-    const labelStyle = { margin: '0 8px 0 8px' }
-    return (
-      <RadioGroup
-        style={{ display: 'inline-block', float: 'left' }}
-        value={this.props.editorMode}
-        onChange={this.updateMode}
-        row={true}
-      >
-        <FormControlLabel
-          value="text"
-          style={labelStyle}
-          control={<Radio color="primary" />}
-          label="raw"
-          labelPlacement="top"
-        />
-        <FormControlLabel
-          value="xml"
-          style={labelStyle}
-          control={<Radio color="primary" />}
-          label="xml"
-          labelPlacement="top"
-        />
-        <FormControlLabel
-          value="json"
-          style={labelStyle}
-          control={<Radio color="primary" />}
-          label="json"
-          labelPlacement="top"
-        />
-      </RadioGroup>
-    )
-  }
-
-  private onChangeQoS = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(event.target.value, 10)
-    if (value !== 0 && value !== 1 && value !== 2) {
-      return
-    }
-
-    this.props.actions.setQoS(value)
-  }
-
  private publishMode() {
    const labelStyle = { margin: '0 8px 0 8px' }
-    const itemStyle = { padding: '0' }
-    const tooltipStyle = { textAlign: 'center' as 'center', width: '100%' }
-    const qosSelect = (
-      <TextField
-        select={true}
-        value={this.props.qos}
-        margin="normal"
-        style={{ margin: '8px 0 8px 8px' }}
-        onChange={this.onChangeQoS}
-      >
-        <MenuItem key={0} value={0} style={itemStyle}>
-          <Tooltip title="At most once"><div style={tooltipStyle}>0</div></Tooltip>
-        </MenuItem>
-        <MenuItem key={1} value={1} style={itemStyle}>
-          <Tooltip title="At least once"><div style={tooltipStyle}>1</div></Tooltip>
-        </MenuItem>
-        <MenuItem key={2} value={2} style={itemStyle}>
-          <Tooltip title="Exactly once"><div style={tooltipStyle}>2</div></Tooltip>
-        </MenuItem>
-      </TextField>
-    )
+
    return (
      <div style={{ marginTop: '8px', clear: 'both' }}>
        <div style={{ width: '100%', textAlign: 'right' }}>
-          <FormControlLabel
-            style={labelStyle}
-            control={qosSelect}
-            label="QoS"
-            labelPlacement="start"
-          />
-          <Tooltip title="Retained messages only appear to be retained, when client subscribes after the initial publish." placement="top">
+          <FormControlLabel style={labelStyle} control={<QosSelect />} label="QoS" labelPlacement="start" />
+          <Tooltip
+            title="Retained messages only appear to be retained, when client subscribes after the initial publish."
+            placement="top"
+          >
            <FormControlLabel
              value="retain"
              style={labelStyle}
-              control={<Checkbox color="primary" checked={this.props.retain} onChange={this.props.actions.toggleRetain} />}
+              control={
+                <Checkbox color="primary" checked={this.props.retain} onChange={this.props.actions.toggleRetain} />
+              }
              label="retain"
              labelPlacement="end"
            />
@@ -274,7 +192,7 @@ class Publish extends React.Component<Props, State> {
  }

  private history() {
-    const items = this.state.history.reverse().map(message => ({
+    const items = [...this.state.history].reverse().map(message => ({
      key: sha1(message.topic + message.payload),
      title: message.topic,
      value: message.payload || '',
@@ -288,38 +206,15 @@ class Publish extends React.Component<Props, State> {
    this.props.actions.setPayload(message.payload)
  }

-  private editor() {
-    return (
-      <div style={{ width: '100%', display: 'block' }}>
-        {this.editorMode()}
-        {this.renderEditor()}
-        {this.publishMode()}
-      </div>
-    )
-  }
-
-  private renderEditor() {
-    return (
-      <AceEditor
-        mode={this.props.editorMode}
-        theme={this.props.theme.palette.type === 'dark' ? 'monokai' : 'dawn'}
-        name="UNIQUE_ID_OF_DIV"
-        width="100%"
-        height="200px"
-        showGutter={true}
-        value={this.props.payload}
-        onChange={this.updatePayload}
-        setOptions={this.editorOptions}
-        editorProps={{ $blockScrolling: true }}
-      />
-    )
-  }
-
  public render() {
    return (
      <div style={{ flexGrow: 1, marginLeft: '8px' }}>
        {this.topic()}
-        {this.editor()}
+        <div style={{ width: '100%', display: 'block' }}>
+          {this.editorMode()}
+          <Editor value={this.props.payload} editorMode={this.props.editorMode} onChange={this.updatePayload} />
+          {this.publishMode()}
+        </div>
        {this.history()}
      </div>
    )
@@ -339,8 +234,10 @@ const mapStateToProps = (state: AppState) => {
    payload: state.publish.payload,
    editorMode: state.publish.editorMode,
    retain: state.publish.retain,
-    qos: state.publish.qos,
  }
 }

-export default connect(mapStateToProps, mapDispatchToProps)(withTheme(Publish))
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withTheme(Publish))
@@ -0,0 +1,75 @@
+import * as React from 'react'
+import { TextField, MenuItem, Tooltip } from '@material-ui/core'
+import { connect } from 'react-redux'
+import { AppState } from '../../../reducers'
+import { bindActionCreators } from 'redux'
+import { publishActions } from '../../../actions'
+
+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' }
+
+  const onChangeQos = React.useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const value = parseInt(event.target.value, 10)
+      if (value !== 0 && value !== 1 && value !== 2) {
+        return
+      }
+
+      props.actions.publish.setQoS(value)
+    },
+    [props.actions.publish]
+  )
+
+  return (
+    <TextField
+      select={true}
+      value={props.qos}
+      margin="normal"
+      style={{ margin: '8px 0 8px 8px' }}
+      onChange={onChangeQos}
+    >
+      <MenuItem key={0} value={0} style={itemStyle}>
+        <Tooltip title="At most once">
+          <div style={tooltipStyle}>0</div>
+        </Tooltip>
+      </MenuItem>
+      <MenuItem key={1} value={1} style={itemStyle}>
+        <Tooltip title="At least once">
+          <div style={tooltipStyle}>1</div>
+        </Tooltip>
+      </MenuItem>
+      <MenuItem key={2} value={2} style={itemStyle}>
+        <Tooltip title="Exactly once">
+          <div style={tooltipStyle}>2</div>
+        </Tooltip>
+      </MenuItem>
+    </TextField>
+  )
+}
+
+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)
@@ -8,20 +8,13 @@ import NodeStats from './NodeStats'
 import Topic from './Topic'
 import ValuePanel from './ValueRenderer/ValuePanel'
 import { AppState } from '../../reducers'
+import { Badge, ExpansionPanel, ExpansionPanelDetails, ExpansionPanelSummary, Typography } from '@material-ui/core'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { settingsActions, sidebarActions } from '../../actions'
-import { StyleRulesCallback, Theme, withStyles } from '@material-ui/core/styles'
+import { Theme, withStyles } from '@material-ui/core/styles'
 import { TopicViewModel } from '../../model/TopicViewModel'

-import {
-  ExpansionPanel,
-  ExpansionPanelDetails,
-  ExpansionPanelSummary,
-  Typography,
-  Badge,
-} from '@material-ui/core'
-
 const throttle = require('lodash.throttle')

 const Publish = React.lazy(() => import('./Publish/Publish'))
@@ -76,7 +69,7 @@ class Sidebar extends React.Component<Props, State> {
  private renderRecursiveTopicDeleteButton() {
    const deleteLimit = 50
    const topicCount = this.props.node ? this.props.node.childTopicCount() : 0
-    if ((!this.props.node || topicCount === 0) || (this.props.node.message && topicCount === 1)) {
+    if (!this.props.node || topicCount === 0 || (this.props.node.message && topicCount === 1)) {
      return null
    }

@@ -86,7 +79,10 @@ class Sidebar extends React.Component<Props, State> {
        badgeContent={<span style={{ whiteSpace: 'nowrap' }}>{topicCount >= deleteLimit ? '50+' : topicCount}</span>}
        color="secondary"
      >
-        <CustomIconButton onClick={() => this.deleteTopic(this.props.node, true, deleteLimit)} tooltip={`Deletes up to ${deleteLimit} sub-topics with a single click`}>
+        <CustomIconButton
+          onClick={() => this.deleteTopic(this.props.node, true, deleteLimit)}
+          tooltip={`Deletes up to ${deleteLimit} sub-topics with a single click`}
+        >
          <Delete style={{ marginTop: '-3px' }} color="action" />
        </CustomIconButton>
      </Badge>
@@ -112,7 +108,9 @@ class Sidebar extends React.Component<Props, State> {
      <div>
        <ExpansionPanel key="topic" defaultExpanded={true} disabled={!Boolean(this.props.node)}>
          <ExpansionPanelSummary expandIcon={<ExpandMore />} style={summaryStyle}>
-            <Typography className={classes.heading}>Topic {copyTopic} {deleteTopic} {deleteRecursiveTopic}</Typography>
+            <Typography className={classes.heading}>
+              Topic {copyTopic} {deleteTopic} {deleteRecursiveTopic}
+            </Typography>
          </ExpansionPanelSummary>
          <ExpansionPanelDetails style={this.detailsStyle}>
            <Topic node={this.props.node} didSelectNode={this.updateNode} />
@@ -186,24 +184,26 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-const styles: StyleRulesCallback<string> = (theme: Theme) => {
-  return {
-    drawer: {
-      display: 'block',
-      height: '100%',
-    },
-    badge: {
-      top: '3px',
-      right: '3px',
-    },
-    valuePaper: {
-      margin: theme.spacing(1),
-    },
-    heading: {
-      fontSize: theme.typography.pxToRem(15),
-      fontWeight: theme.typography.fontWeightRegular,
-    },
-  }
-}
+const styles = (theme: Theme) => ({
+  drawer: {
+    display: 'block' as 'block',
+  },
+  badge: {
+    top: '3px',
+    right: '3px',
+  },
+  valuePaper: {
+    margin: theme.spacing(1),
+  },
+  heading: {
+    fontSize: theme.typography.pxToRem(15),
+    fontWeight: theme.typography.fontWeightRegular,
+  },
+})

-export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(Sidebar))
+export default withStyles(styles)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(Sidebar)
+)
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
 import Button from '@material-ui/core/Button'
-import { withStyles, Theme, StyleRulesCallback } from '@material-ui/core/styles'
+import { withStyles, Theme } from '@material-ui/core/styles'
 import { treeActions } from '../../actions'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
@@ -16,9 +16,9 @@ interface Props {
  didSelectNode: (node: q.TreeNode<TopicViewModel>) => void
 }

-const styles: StyleRulesCallback<string> = (theme: Theme) => ({
+const styles = (theme: Theme) => ({
  button: {
-    textTransform: 'none',
+    textTransform: 'none' as 'none',
    padding: '3px 5px 3px 5px',
    minWidth: '30px',
  },
@@ -32,30 +32,29 @@ class Topic extends React.Component<Props, {}> {
    }

    let key = 0
-    const breadCrumps = node.branch()
+    const breadCrumps = node
+      .branch()
      .map(node => node.sourceEdge)
      .filter(edge => Boolean(edge))
-      .map(edge =>
-        [(
-          <Button
-            onClick={() => this.props.actions.selectTopic(edge!.target)}
-            size="small"
-            variant={theme.palette.type === 'light' ? 'contained' : undefined}
-            color={theme.palette.type === 'light' ? 'primary' : 'secondary'}
-            className={this.props.classes.button}
-            key={edge!.hash()}
-          >
-            {edge!.name}
-          </Button>
-        )]
-      )
+      .map(edge => [
+        <Button
+          onClick={() => this.props.actions.selectTopic(edge!.target)}
+          size="small"
+          variant={theme.palette.type === 'light' ? 'contained' : undefined}
+          color={theme.palette.type === 'light' ? 'primary' : 'secondary'}
+          className={this.props.classes.button}
+          key={edge!.hash()}
+        >
+          {edge!.name || <span dangerouslySetInnerHTML={{ __html: '&nbsp;' }} />}
+        </Button>,
+      ])

    if (breadCrumps.length === 0) {
      return null
    }

    const joinedBreadCrumps = breadCrumps.reduce((prev, current) =>
-      prev.concat([<span key={key += 1}> / </span>]).concat(current)
+      prev.concat([<span key={(key += 1)}> / </span>]).concat(current)
    )

    return <span style={{ lineHeight: '2.2em' }}>{joinedBreadCrumps}</span>
@@ -68,4 +67,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))
@@ -1,13 +1,17 @@
 import * as q from '../../../../../backend/src/Model'
 import * as React from 'react'
-import BarChart from '@material-ui/icons/BarChart'
+import ShowChart from '@material-ui/icons/ShowChart'
 import Copy from '../../helper/Copy'
 import DateFormatter from '../../helper/DateFormatter'
 import History from '../HistoryDrawer'
+import TopicPlot from '../../TopicPlot'
 import { Base64Message } from '../../../../../backend/src/Model/Base64Message'
+import { isPlottable } from '../CodeDiff/util'
 import { TopicViewModel } from '../../../model/TopicViewModel'
-
-const PlotHistory = React.lazy(() => import('./PlotHistory'))
+import { bindActionCreators } from 'redux'
+import { chartActions } from '../../../actions'
+import { connect } from 'react-redux'
+import CustomIconButton from '../../helper/CustomIconButton'

 const throttle = require('lodash.throttle')

@@ -15,10 +19,13 @@ interface Props {
  node?: q.TreeNode<TopicViewModel>
  selected?: q.Message
  onSelect: (message: q.Message) => void
+  actions: {
+    charts: typeof chartActions
+  }
 }

 interface State {
-  displayMessage?: q.Message,
+  displayMessage?: q.Message
  anchorEl?: HTMLElement
 }

@@ -32,6 +39,18 @@ class MessageHistory extends React.Component<Props, State> {
    this.state = {}
  }

+  private addNodeToCharts = (event: React.MouseEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+
+    const { node } = this.props
+    if (!node) {
+      return null
+    }
+
+    this.props.actions.charts.addChart({ topic: node.path() })
+  }
+
  private displayMessage = (index: number, eventTarget: EventTarget) => {
    const message = this.props.node && this.props.node.messageHistory.toArray().reverse()[index]
    if (message) {
@@ -60,49 +79,66 @@ class MessageHistory extends React.Component<Props, State> {

    const history = node.messageHistory.toArray()
    let previousMessage: q.Message | undefined = node.message
-    const historyElements = history.reverse().map((message, idx) => {
+    const historyElements = [...history].reverse().map((message, idx) => {
      const value = message.value ? Base64Message.toUnicodeString(message.value) : ''
      const element = {
        value,
        key: `${message.messageNumber}-${message.received}`,
-        title: (<span>
-          <DateFormatter date={message.received} />
-          {previousMessage ? <i>(-<DateFormatter date={message.received} intervalSince={previousMessage.received} />)</i> : null}
-          <div style={{ float: 'right' }}><Copy value={value} /></div>
-        </span>),
+        title: (
+          <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>
+          </span>
+        ),
        selected: message && message === this.props.selected,
      }
      previousMessage = message
      return element
    })

-    const numericMessages = history
-      .map((message: q.Message) => {
-        const value = message.value ? parseFloat(Base64Message.toUnicodeString(message.value)) : NaN
-        return { x: message.received.getTime(), y: value  }
-      }).filter(data => !isNaN(data.y))
-    const showPlot = numericMessages.length >= 2
-
+    const isMessagePlottable =
+      node.message && node.message.value && isPlottable(Base64Message.toUnicodeString(node.message.value))
    return (
      <div>
        <History
          items={historyElements}
-          contentTypeIndicator={showPlot ? <BarChart /> : undefined}
+          contentTypeIndicator={
+            isMessagePlottable ? (
+              <CustomIconButton
+                style={{ height: '22px', width: '22px' }}
+                onClick={this.addNodeToCharts}
+                tooltip="Add to chart panel"
+              >
+                <ShowChart style={{ marginTop: '-5px' }} />
+              </CustomIconButton>
+            ) : (
+              undefined
+            )
+          }
          onClick={this.displayMessage}
        >
-          {showPlot ? this.renderPlot(numericMessages) : null}
+          {isMessagePlottable ? <TopicPlot history={node.messageHistory} /> : null}
        </History>
      </div>
    )
  }
+}

-  public renderPlot(data: Array<{x: number, y: number}>) {
-    return (
-      <React.Suspense fallback={<div>Loading...</div>}>
-        <PlotHistory data={data} />
-      </React.Suspense>
-    )
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: { charts: bindActionCreators(chartActions, dispatch) },
  }
 }

-export default MessageHistory
+export default connect(
+  null,
+  mapDispatchToProps
+)(MessageHistory)
@@ -1,72 +0,0 @@
-import * as q from '../../../../../backend/src/Model'
-import * as React from 'react'
-import DateFormatter from '../../helper/DateFormatter'
-import { default as ReactResizeDetector } from 'react-resize-detector'
-import 'react-vis/dist/style.css'
-import { Base64Message } from '../../../../../backend/src/Model/Base64Message'
-const { XYPlot, LineMarkSeries, Hint, YAxis, HorizontalGridLines } = require('react-vis')
-const abbreviate = require('number-abbreviate')
-
-interface Props {
-  data: Array<{x: number, y: number}>
-}
-
-interface Stats {
-  width: number
-  value?: any
-}
-
-class PlotHistory extends React.Component<Props, Stats> {
-  constructor(props: Props) {
-    super(props)
-    this.state = { width: 300 }
-  }
-
-  private resize = (width: number, height: number) => {
-    this.setState({ width: width - 12 })
-  }
-
-  private hintFormatter = (point: any) => {
-    return [
-      { title: <b>Time</b>, value: <DateFormatter date={new Date(point.x)} /> },
-      { title: <b>Value</b>, value: point.y },
-    ]
-  }
-
-  private _forgetValue = () => {
-    this.setState({
-      value: undefined,
-    })
-  }
-
-  private _rememberValue = (value: any) => {
-    this.setState({ value })
-  }
-
-  public render() {
-    const data = this.props.data
-
-    return (
-      <div>
-        <XYPlot width={this.state.width} height={150}>
-          <HorizontalGridLines />
-          <YAxis
-            width={45}
-            tickFormat={(num: number) => abbreviate(num)}
-          />
-          <LineMarkSeries
-            onValueMouseOver={this._rememberValue}
-            onValueMouseOut={this._forgetValue}
-            size={3}
-            data={data}
-            curve={data.length < 50 ? 'curveCardinal' : undefined}
-          />
-          {this.state.value ? <Hint format={this.hintFormatter} value={this.state.value} /> : null}
-        </XYPlot>
-        <ReactResizeDetector handleWidth={true} onResize={this.resize} />
-      </div>
-    )
-  }
-}
-
-export default PlotHistory
@@ -44,7 +44,7 @@ interface State {}
 class ValuePanel extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props)
-    this.state = { }
+    this.state = {}
  }

  private renderValue() {
@@ -53,13 +53,7 @@ class ValuePanel extends React.Component<Props, State> {
      return null
    }

-    return (
-      <ValueRenderer
-        message={node.message}
-        messageHistory={node.messageHistory}
-        compareWith={this.props.compareMessage}
-      />
-    )
+    return <ValueRenderer treeNode={node} message={node.message} compareWith={this.props.compareMessage} />
  }

  private renderViewOptions() {
@@ -84,9 +78,7 @@ class ValuePanel extends React.Component<Props, State> {
    return (
      <div style={{ width: '100%', display: 'flex', paddingLeft: '8px' }}>
        <span style={{ marginTop: '2px', flexGrow: 1 }}>{this.renderActionButtons()}</span>
-        <div style={{ flex: 6, textAlign: 'right' }}>
-          {this.props.node.mqttMessage.retain ? retainedButton : null}
-        </div>
+        <div style={{ flex: 6, textAlign: 'right' }}>{this.props.node.mqttMessage.retain ? retainedButton : null}</div>
        {this.messageMetaInfo()}
      </div>
    )
@@ -100,7 +92,11 @@ class ValuePanel extends React.Component<Props, State> {
    return (
      <span style={{ width: '100%', paddingLeft: '8px', flex: 6 }}>
        <Typography style={{ textAlign: 'right' }}>QoS: {this.props.node.mqttMessage.qos}</Typography>
-        <Typography style={{ textAlign: 'right' }}><i><DateFormatter date={this.props.node.message.received} /></i></Typography>
+        <Typography style={{ textAlign: 'right' }}>
+          <i>
+            <DateFormatter date={this.props.node.message.received} />
+          </i>
+        </Typography>
      </span>
    )
  }
@@ -114,15 +110,24 @@ class ValuePanel extends React.Component<Props, State> {
    }

    return (
-      <ToggleButtonGroup id="valueRendererDisplayMode" value={this.props.valueRendererDisplayMode} exclusive={true} onChange={handleValue}>
+      <ToggleButtonGroup
+        id="valueRendererDisplayMode"
+        value={this.props.valueRendererDisplayMode}
+        exclusive={true}
+        onChange={handleValue}
+      >
        <ToggleButton className={this.props.classes.toggleButton} value="diff" id="valueRendererDisplayMode-diff">
          <Tooltip title="Show difference between the current and the last message">
-            <span><Code className={this.props.classes.toggleButtonIcon} /></span>
+            <span>
+              <Code className={this.props.classes.toggleButtonIcon} />
+            </span>
          </Tooltip>
        </ToggleButton>
        <ToggleButton className={this.props.classes.toggleButton} value="raw" id="valueRendererDisplayMode-raw">
          <Tooltip title="Raw value">
-            <span><Reorder className={this.props.classes.toggleButtonIcon} /></span>
+            <span>
+              <Reorder className={this.props.classes.toggleButtonIcon} />
+            </span>
          </Tooltip>
        </ToggleButton>
      </ToggleButtonGroup>
@@ -148,7 +153,10 @@ class ValuePanel extends React.Component<Props, State> {
    const { node, classes } = this.props
    const { detailsStyle, summaryStyle } = this.panelStyle()

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

    return (
      <ExpansionPanel key="value" defaultExpanded={true}>
@@ -157,12 +165,16 @@ class ValuePanel extends React.Component<Props, State> {
        </ExpansionPanelSummary>
        <ExpansionPanelDetails style={detailsStyle}>
          {this.renderViewOptions()}
+          <div style={{ marginBottom: '-8px' }}>
+            <React.Suspense fallback={<div>Loading...</div>}>{this.renderValue()}</React.Suspense>
+          </div>
          <div>
-            <React.Suspense fallback={<div>Loading...</div>}>
-              {this.renderValue()}
-            </React.Suspense>
+            <MessageHistory
+              onSelect={this.handleMessageHistorySelect}
+              selected={this.props.compareMessage}
+              node={this.props.node}
+            />
          </div>
-          <div><MessageHistory onSelect={this.handleMessageHistorySelect} selected={this.props.compareMessage} node={this.props.node} /></div>
        </ExpansionPanelDetails>
      </ExpansionPanel>
    )
@@ -184,19 +196,20 @@ const mapStateToProps = (state: AppState) => {
  }
 }

-const styles: StyleRulesCallback<string> = (theme: Theme) => {
-  return {
-    heading: {
-      fontSize: theme.typography.pxToRem(15),
-      fontWeight: theme.typography.fontWeightRegular,
-    },
-    toggleButton: {
-      height: '36px',
-    },
-    toggleButtonIcon: {
-      verticalAlign: 'middle',
-    },
-  }
-}
+const styles = (theme: Theme) => ({
+  heading: {
+    fontSize: theme.typography.pxToRem(15),
+    fontWeight: theme.typography.fontWeightRegular,
+  },
+  toggleButton: {
+    height: '36px',
+  },
+  toggleButtonIcon: {
+    verticalAlign: 'middle',
+  },
+})

-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ValuePanel))
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withStyles(styles)(ValuePanel))
@@ -9,7 +9,7 @@ import { ValueRendererDisplayMode } from '../../../reducers/Settings'

 interface Props {
  message: q.Message
-  messageHistory: q.RingBuffer<q.Message>
+  treeNode: q.TreeNode<any>
  compareWith?: q.Message
  renderMode: ValueRendererDisplayMode
 }
@@ -27,6 +27,7 @@ class ValueRenderer extends React.Component<Props, State> {
  private renderDiff(current: string = '', previous: string = '', language?: 'json') {
    return (
      <CodeDiff
+        treeNode={this.props.treeNode}
        previous={previous}
        current={current}
        language={language}
@@ -64,9 +65,8 @@ class ValueRenderer extends React.Component<Props, State> {
  }

  public renderValue() {
-    const { message, messageHistory, compareWith, renderMode } = this.props
-
-    const previousMessages = messageHistory.toArray()
+    const { message, treeNode, compareWith, renderMode } = this.props
+    const previousMessages = treeNode.messageHistory.toArray()
    const previousMessage = previousMessages[previousMessages.length - 2]
    let compareMessage = compareWith || previousMessage || message
    if (renderMode === 'raw') {
@@ -0,0 +1,48 @@
+import * as dotProp from 'dot-prop'
+import * as q from '../../../backend/src/Model'
+import * as React from 'react'
+import PlotHistory from './Sidebar/PlotHistory'
+import { Base64Message } from '../../../backend/src/Model/Base64Message'
+import { toPlottableValue } from './Sidebar/CodeDiff/util'
+import { PlotCurveTypes } from '../reducers/Charts'
+
+interface Props {
+  history: q.MessageHistory
+  dotPath?: string
+  interpolation?: PlotCurveTypes
+  range?: [number?, number?]
+  color?: string
+}
+
+function nodeToHistory(history: q.MessageHistory) {
+  return history
+    .toArray()
+    .map((message: q.Message) => {
+      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
+}
+
+function nodeDotPathToHistory(history: q.MessageHistory, dotPath: string) {
+  return history
+    .toArray()
+    .map((message: q.Message) => {
+      let json = {}
+      try {
+        json = message.value ? JSON.parse(Base64Message.toUnicodeString(message.value)) : {}
+      } catch (ignore) {}
+
+      let value = dotProp.get(json, dotPath)
+
+      return { x: message.received.getTime(), y: toPlottableValue(value) }
+    })
+    .filter(data => !isNaN(data.y as any)) as any
+}
+
+function render(props: Props) {
+  const data = props.dotPath ? nodeDotPathToHistory(props.history, props.dotPath) : nodeToHistory(props.history)
+  return <PlotHistory color={props.color} range={props.range} interpolation={props.interpolation} data={data} />
+}
+
+export default render
@@ -1,239 +0,0 @@
-import * as q from '../../../../backend/src/Model'
-import * as React from 'react'
-import TreeNodeSubnodes from './TreeNodeSubnodes'
-import TreeNodeTitle from './TreeNodeTitle'
-import { Record } from 'immutable'
-import { SettingsState } from '../../reducers/Settings'
-import { Theme, withStyles } from '@material-ui/core/styles'
-import { TopicViewModel } from '../../model/TopicViewModel'
-
-const debounce = require('lodash.debounce')
-
-declare var performance: any
-
-const styles = (theme: Theme) => {
-  return {
-    collapsedSubnodes: {
-      color: theme.palette.text.secondary,
-    },
-    displayBlock: {
-      display: 'block',
-    },
-    node: {
-      display: 'block',
-      marginLeft: '10px',
-    },
-    topicSelect: {
-      float: 'right' as 'right',
-      opacity: 0,
-      cursor: 'pointer',
-      marginTop: '-1px',
-    },
-    subnodes: {
-      marginLeft: theme.spacing(1.5),
-    },
-    selected: {
-      backgroundColor: theme.palette.type === 'dark' ? 'rgba(170, 170, 170, 0.55)' : 'rgba(170, 170, 170, 0.55)',
-    },
-    hover: {
-      backgroundColor: theme.palette.type === 'dark' ? 'rgba(100, 100, 100, 0.55)' : 'rgba(200, 200, 200, 0.55)',
-    },
-    title: {
-      borderRadius: '4px',
-      lineHeight: '1em',
-      display: 'inline-block' as 'inline-block',
-      whiteSpace: 'nowrap' as 'nowrap',
-      padding: '1px 4px 0px 4px',
-      height: '14px',
-      margin: '1px 0px 2px 0px',
-    },
-  }
-}
-
-interface Props {
-  isRoot?: boolean
-  treeNode: q.TreeNode<TopicViewModel>
-  name?: string | undefined
-  collapsed?: boolean | undefined
-  performanceCallback?: ((ms: number) => void) | undefined
-  classes: any
-  className?: string
-  lastUpdate: number
-  didSelectTopic: any
-  theme: Theme
-  settings: Record<SettingsState>
-}
-
-interface State {
-  collapsedOverride: boolean | undefined
-  mouseOver: boolean
-  selected: boolean
-}
-
-class TreeNodeComponent extends React.Component<Props, State> {
-  private animationDirty: boolean = false
-
-  private cssAnimationWasSetAt?: number
-
-  private willUpdateTime: number = performance.now()
-  private nodeRef?: React.RefObject<HTMLDivElement> = React.createRef<HTMLDivElement>()
-
-  private setHover = debounce((hover: boolean) => {
-    this.setState({ mouseOver: hover })
-  }, 45)
-
-  constructor(props: Props) {
-    super(props)
-
-    this.state = {
-      collapsedOverride: props.collapsed,
-      mouseOver: false,
-      selected: false,
-    }
-  }
-
-  private addSubscriber(treeNode: q.TreeNode<TopicViewModel>) {
-    treeNode.viewModel = new TopicViewModel()
-    treeNode.viewModel.change.subscribe(this.viewStateHasChanged)
-  }
-
-  private viewStateHasChanged = (msg: void) => {
-    this.setState({ selected: this.props.treeNode.viewModel!.isSelected() })
-  }
-
-  private removeSubscriber(treeNode: q.TreeNode<TopicViewModel>) {
-    treeNode.viewModel && treeNode.viewModel.change.unsubscribe(this.viewStateHasChanged)
-    treeNode.viewModel = undefined
-  }
-
-  private stateHasChanged(newState: State) {
-    return this.state.collapsedOverride !== newState.collapsedOverride
-      || this.state.mouseOver !== newState.mouseOver
-      || this.state.selected !== newState.selected
-  }
-
-  private toggle() {
-    this.setState({ collapsedOverride: !this.collapsed() })
-  }
-
-  private collapsed() {
-    if (this.state.collapsedOverride !== undefined) {
-      return this.state.collapsedOverride
-    }
-
-    return this.props.treeNode.edgeCount() > this.props.settings.get('autoExpandLimit')
-  }
-
-  private didSelectTopic = () => {
-    this.props.didSelectTopic(this.props.treeNode)
-  }
-
-  private didClickTitle = (event: React.MouseEvent) => {
-    event.preventDefault()
-    this.props.didSelectTopic(this.props.treeNode)
-    this.toggle()
-  }
-
-  private mouseOver = (event: React.MouseEvent) => {
-    event.stopPropagation()
-    this.setHover(true)
-    if (this.props.settings.get('selectTopicWithMouseOver') && this.props.treeNode && this.props.treeNode.message && this.props.treeNode.message.value) {
-      this.props.didSelectTopic(this.props.treeNode)
-    }
-  }
-
-  private mouseOut = (event: React.MouseEvent) => {
-    event.stopPropagation()
-    this.setHover(false)
-  }
-
-  private toggleCollapsed = (event: React.MouseEvent) => {
-    event.stopPropagation()
-    this.toggle()
-  }
-
-  private renderNodes() {
-    if (this.collapsed()) {
-      return null
-    }
-
-    return (
-      <TreeNodeSubnodes
-        collapsed={this.collapsed()}
-        treeNode={this.props.treeNode}
-        lastUpdate={this.props.treeNode.lastUpdate}
-        didSelectTopic={this.props.didSelectTopic}
-        settings={this.props.settings}
-      />
-    )
-  }
-
-  public componentDidMount() {
-    const { treeNode } = this.props
-    this.addSubscriber(treeNode)
-  }
-
-  public componentWillUnmount() {
-    const { treeNode } = this.props
-    this.removeSubscriber(treeNode)
-    this.nodeRef = undefined
-  }
-
-  public shouldComponentUpdate(nextProps: Props, nextState: State) {
-    const shouldRenderToRemoveCssAnimation = this.cssAnimationWasSetAt !== undefined
-    return this.stateHasChanged(nextState)
-      || this.props.settings !== nextProps.settings
-      || (this.props.lastUpdate !== nextProps.lastUpdate)
-      || this.animationDirty
-      || shouldRenderToRemoveCssAnimation
-  }
-
-  public componentDidUpdate() {
-    if (this.props.performanceCallback) {
-      const renderTime = performance.now() - this.willUpdateTime
-      this.props.performanceCallback(renderTime)
-    }
-  }
-
-  public componentWillUpdate() {
-    if (this.props.performanceCallback) {
-      this.willUpdateTime = performance.now()
-    }
-  }
-
-  public render() {
-    const { classes } = this.props
-
-    const shouldStartAnimation = (!this.animationDirty) && !this.props.isRoot && this.props.settings.get('highlightTopicUpdates')
-    const animationName = this.props.theme.palette.type === 'light' ? 'updateLight' : 'updateDark'
-    const animation = shouldStartAnimation ? { willChange: 'auto', translateZ: 0, animation: `${animationName} 0.5s` } : {}
-    this.animationDirty = shouldStartAnimation
-
-    const highlightClass = this.state.selected ? this.props.classes.selected : (this.state.mouseOver ? this.props.classes.hover : '')
-
-    return (
-      <div>
-        <div
-          key={this.props.treeNode.hash()}
-          className={`${classes.node} ${this.props.className} ${highlightClass} ${classes.title}`}
-          style={animation}
-          onMouseOver={this.mouseOver}
-          onMouseOut={this.mouseOut}
-          onClick={this.didClickTitle}
-          ref={this.nodeRef}
-        >
-          <TreeNodeTitle
-            toggleCollapsed={this.toggleCollapsed}
-            didSelectNode={this.didSelectTopic}
-            collapsed={this.collapsed()}
-            treeNode={this.props.treeNode}
-            name={this.props.name}
-          />
-        </div>
-        {this.renderNodes()}
-      </div>
-    )
-  }
-}
-
-export default withStyles(styles, { withTheme: true })(TreeNodeComponent)
@@ -0,0 +1,77 @@
+import * as q from '../../../../../backend/src/Model'
+import React, { useEffect, useState, useMemo } from 'react'
+import TreeNode from '.'
+import { SettingsState } from '../../../reducers/Settings'
+import { sortedNodes } from '../../../sortedNodes'
+import { Theme, withStyles } from '@material-ui/core'
+import { TopicViewModel } from '../../../model/TopicViewModel'
+import { treeActions } from '../../../actions'
+
+export interface Props {
+  treeNode: q.TreeNode<TopicViewModel>
+  filter?: string
+  classes: any
+  lastUpdate: number
+  selectedTopic?: q.TreeNode<TopicViewModel>
+  selectTopicAction: (treeNode: q.TreeNode<any>) => void
+  settings: SettingsState
+  actions: typeof treeActions
+  theme: Theme
+}
+
+function useStagedRendering(treeNode: q.TreeNode<any>) {
+  const [alreadyAdded, setAlreadyAdded] = useState(10)
+  const edges = treeNode.edgeArray
+
+  useEffect(() => {
+    let renderMoreAnimationFrame: any
+
+    if (alreadyAdded < edges.length) {
+      renderMoreAnimationFrame = (window as any).requestIdleCallback(
+        () => {
+          setAlreadyAdded(alreadyAdded * 1.5)
+        },
+        { timeout: 500 }
+      )
+    }
+
+    return function cleanup() {
+      ;(window as any).cancelIdleCallback(renderMoreAnimationFrame)
+    }
+  }, [alreadyAdded, edges.length])
+
+  return alreadyAdded
+}
+
+function TreeNodeSubnodes(props: Props) {
+  const alreadyAdded = useStagedRendering(props.treeNode)
+
+  return useMemo(() => {
+    const nodes = sortedNodes(props.settings, props.treeNode).slice(0, alreadyAdded)
+    const listItems = nodes.map(node => {
+      return (
+        <TreeNode
+          key={`${node.hash()}-${props.filter}`}
+          treeNode={node}
+          className={props.classes.listItem}
+          lastUpdate={node.lastUpdate}
+          selectTopicAction={props.selectTopicAction}
+          settings={props.settings}
+          actions={props.actions}
+        />
+      )
+    })
+
+    return <span className={props.classes.list}>{listItems}</span>
+  }, [alreadyAdded, props.lastUpdate, props.theme])
+}
+
+const styles = (theme: Theme) => ({
+  list: {
+    display: 'block' as 'block',
+    clear: 'both' as 'both',
+    marginLeft: theme.spacing(1.5),
+  },
+})
+
+export default withStyles(styles, { withTheme: true })(TreeNodeSubnodes)
@@ -1,8 +1,8 @@
 import * as React from 'react'
-import * as q from '../../../../backend/src/Model'
+import * as q from '../../../../../backend/src/Model'
 import { withStyles, Theme } from '@material-ui/core'
-import { TopicViewModel } from '../../model/TopicViewModel'
-import { Base64Message } from '../../../../backend/src/Model/Base64Message'
+import { TopicViewModel } from '../../../model/TopicViewModel'
+import { Base64Message } from '../../../../../backend/src/Model/Base64Message'

 export interface TreeNodeProps extends React.HTMLAttributes<HTMLElement> {
  treeNode: q.TreeNode<TopicViewModel>
@@ -14,17 +14,25 @@ export interface TreeNodeProps extends React.HTMLAttributes<HTMLElement> {
 }

 class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
-
  private renderSourceEdge() {
    const name = this.props.name || (this.props.treeNode.sourceEdge && this.props.treeNode.sourceEdge.name)

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

  private renderValue() {
-    return this.props.treeNode.message && this.props.treeNode.message.value && this.props.treeNode.message.length > 0
-      ? <span key="value" className={this.props.classes.value}> = {Base64Message.toUnicodeString(this.props.treeNode.message.value).slice(0, 120)}</span>
-      : null
+    return this.props.treeNode.message &&
+      this.props.treeNode.message.value &&
+      this.props.treeNode.message.length > 0 ? (
+      <span key="value" className={this.props.classes.value}>
+        {' '}
+        = {Base64Message.toUnicodeString(this.props.treeNode.message.value).slice(0, 120)}
+      </span>
+    ) : null
  }

  private renderExpander() {
@@ -32,7 +40,11 @@ class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
      return null
    }

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

  private renderMetadata() {
@@ -41,16 +53,16 @@ class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
    }

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

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

@@ -0,0 +1,30 @@
+import React, { useEffect } from 'react'
+
+export function useAnimationToIndicateTopicUpdate(
+  ref: React.MutableRefObject<HTMLDivElement | undefined>,
+  lastUpdate: number,
+  className: string,
+  selected: boolean,
+  shouldAnimate: boolean
+) {
+  useEffect(() => {
+    if (ref.current && shouldAnimate && Date.now() - lastUpdate < 3000 && !selected) {
+      let animationFrame = requestAnimationFrame(() => {
+        ref.current && ref.current.classList.add(className)
+      })
+
+      const timeout = setTimeout(
+        () =>
+          (animationFrame = requestAnimationFrame(() => {
+            ref.current && ref.current.classList.remove(className)
+          })),
+        500
+      )
+
+      return function cleanup() {
+        clearTimeout(timeout)
+        animationFrame && cancelAnimationFrame(animationFrame)
+      }
+    }
+  }, [lastUpdate, selected, shouldAnimate, className])
+}
@@ -0,0 +1,18 @@
+import * as q from '../../../../../../backend/src/Model'
+import React, { useCallback } from 'react'
+import { KeyCodes } from '../../../../utils/KeyCodes'
+import { treeActions } from '../../../../actions'
+
+export function useDeleteKeyCallback(topic: q.TreeNode<any>, actions: typeof treeActions) {
+  return useCallback(
+    (event: React.KeyboardEvent) => {
+      return
+      if (event.keyCode === KeyCodes.delete || event.keyCode === KeyCodes.backspace) {
+        event.stopPropagation()
+        event.preventDefault()
+        actions.clearTopic(topic, true, 50)
+      }
+    },
+    [topic]
+  )
+}
@@ -0,0 +1,14 @@
+import { Props } from '..'
+import { useEffect, useState } from 'react'
+
+export function useIsAllowedToAutoExpandState(props: Props): boolean {
+  const { settings, treeNode, isRoot } = props
+  const [isAllowedToAutoExpand, setAllowAutoExpand] = useState(false)
+  useEffect(() => {
+    const newIsAllowedToAutoExpand = isRoot || treeNode.edgeCount() <= settings.get('autoExpandLimit')
+    if (newIsAllowedToAutoExpand !== isAllowedToAutoExpand) {
+      setAllowAutoExpand(newIsAllowedToAutoExpand)
+    }
+  }, [treeNode.edgeCount(), settings.get('autoExpandLimit')])
+  return isAllowedToAutoExpand
+}
@@ -0,0 +1,44 @@
+import * as q from '../../../../../../backend/src/Model'
+import React, { useEffect } from 'react'
+import { TopicViewModel } from '../../../../model/TopicViewModel'
+
+export function useViewModelSubscriptions(
+  treeNode: q.TreeNode<TopicViewModel>,
+  nodeRef: React.MutableRefObject<HTMLDivElement | undefined>,
+  setSelected: (value: boolean) => void,
+  setCollapsedOverride: (value: boolean) => void
+) {
+  const selectionDidChange = () => {
+    const selected = treeNode.viewModel && treeNode.viewModel.isSelected()
+    treeNode.viewModel && setSelected(Boolean(selected))
+
+    if (selected && nodeRef && nodeRef.current) {
+      nodeRef.current.focus({ preventScroll: false })
+    }
+  }
+
+  const expandedDidChange = () => {
+    treeNode.viewModel && setCollapsedOverride(!treeNode.viewModel.isExpanded())
+  }
+
+  useEffect(() => {
+    addSubscriber()
+    return function cleanup() {
+      removeSubscriber()
+    }
+  }, [treeNode])
+
+  function addSubscriber() {
+    treeNode.viewModel = new TopicViewModel()
+    treeNode.viewModel.selectionChange.subscribe(selectionDidChange)
+    treeNode.viewModel.expandedChange.subscribe(expandedDidChange)
+  }
+
+  function removeSubscriber() {
+    if (treeNode.viewModel) {
+      treeNode.viewModel.selectionChange.unsubscribe(selectionDidChange)
+      treeNode.viewModel.expandedChange.unsubscribe(expandedDidChange)
+      treeNode.viewModel = undefined
+    }
+  }
+}
@@ -0,0 +1,139 @@
+import * as q from '../../../../../backend/src/Model'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import TreeNodeSubnodes from './TreeNodeSubnodes'
+import TreeNodeTitle from './TreeNodeTitle'
+import { SettingsState } from '../../../reducers/Settings'
+import { styles } from './styles'
+import { Theme, withStyles } from '@material-ui/core/styles'
+import { TopicViewModel } from '../../../model/TopicViewModel'
+import { treeActions } from '../../../actions'
+import { useAnimationToIndicateTopicUpdate } from './effects/useAnimationToIndicateTopicUpdate'
+import { useDeleteKeyCallback } from './effects/useDeleteKeyCallback'
+import { useIsAllowedToAutoExpandState } from './effects/useIsAllowedToAutoExpandState'
+import { useViewModelSubscriptions } from './effects/useViewModelSubscriptions'
+
+export interface Props {
+  isRoot?: boolean
+  treeNode: q.TreeNode<TopicViewModel>
+  name?: string | undefined
+  collapsed?: boolean | undefined
+  classes: any
+  className?: string
+  lastUpdate: number
+  actions: typeof treeActions
+  selectTopicAction: (treeNode: q.TreeNode<any>) => void
+  theme: Theme
+  settings: SettingsState
+}
+
+function TreeNodeComponent(props: Props) {
+  const { actions, classes, className, settings, theme, treeNode, lastUpdate, name } = props
+  const deleteTopicCallback = useDeleteKeyCallback(treeNode, actions)
+  const [collapsedOverride, setCollapsedOverride] = useState<boolean | undefined>(undefined)
+  const [selected, setSelected] = useState(false)
+  const nodeRef = useRef<HTMLDivElement>()
+  const isAllowedToAutoExpand = useIsAllowedToAutoExpandState(props)
+  useViewModelSubscriptions(treeNode, nodeRef, setSelected, setCollapsedOverride)
+  const animationClass =
+    props.theme.palette.type === 'light' ? props.classes.animationLight : props.classes.animationDark
+
+  useAnimationToIndicateTopicUpdate(
+    nodeRef,
+    lastUpdate,
+    animationClass,
+    selected,
+    settings.get('highlightTopicUpdates')
+  )
+
+  const isCollapsed =
+    Boolean(collapsedOverride) === collapsedOverride ? Boolean(collapsedOverride) : !isAllowedToAutoExpand
+
+  const toggle = useCallback(() => {
+    setCollapsedOverride(!isCollapsed)
+  }, [isCollapsed])
+
+  const didSelectTopic = useCallback(
+    (event?: React.MouseEvent) => {
+      event && event.stopPropagation()
+      props.selectTopicAction(treeNode)
+    },
+    [treeNode]
+  )
+
+  const didClickTitle = React.useCallback(
+    (event: React.MouseEvent) => {
+      event.stopPropagation()
+      didSelectTopic()
+      toggle()
+    },
+    [toggle, didSelectTopic]
+  )
+
+  const toggleCollapsed = useCallback(
+    (event: React.MouseEvent) => {
+      event.stopPropagation()
+      toggle()
+    },
+    [toggle]
+  )
+
+  const didObtainFocus = useCallback(() => {
+    didSelectTopic()
+  }, [didSelectTopic])
+
+  const mouseOver = (event: React.MouseEvent) => {
+    event.stopPropagation()
+    if (settings.get('selectTopicWithMouseOver') && treeNode && treeNode.message && treeNode.message.value) {
+      didSelectTopic()
+    }
+  }
+
+  useEffect(() => {
+    treeNode.viewModel && treeNode.viewModel.setExpanded(!isCollapsed, false)
+  }, [isCollapsed])
+
+  return useMemo(() => {
+    function renderNodes() {
+      if (isCollapsed) {
+        return null
+      }
+
+      return (
+        <TreeNodeSubnodes
+          treeNode={treeNode}
+          lastUpdate={treeNode.lastUpdate}
+          selectTopicAction={props.selectTopicAction}
+          settings={settings}
+          actions={props.actions}
+        />
+      )
+    }
+
+    const highlightClass = selected ? classes.selected : ''
+    return (
+      <div>
+        <div
+          key={treeNode.hash()}
+          className={`${classes.node} ${className} ${highlightClass} ${classes.title}`}
+          onMouseEnter={mouseOver}
+          onFocus={didObtainFocus}
+          onClick={didClickTitle}
+          ref={nodeRef as any}
+          tabIndex={-1}
+          onKeyDown={deleteTopicCallback}
+        >
+          <TreeNodeTitle
+            toggleCollapsed={toggleCollapsed}
+            didSelectNode={didSelectTopic}
+            collapsed={isCollapsed}
+            treeNode={treeNode}
+            name={name}
+          />
+        </div>
+        {renderNodes()}
+      </div>
+    )
+  }, [lastUpdate, treeNode, name, isCollapsed, selected, theme])
+}
+
+export default withStyles(styles, { withTheme: true })(TreeNodeComponent)
@@ -0,0 +1,52 @@
+import { blueGrey } from '@material-ui/core/colors'
+import { Theme } from '@material-ui/core/styles'
+
+export const styles = (theme: Theme) => {
+  return {
+    animationLight: {
+      willChange: 'auto',
+      translateZ: 0,
+      animation: `updateLight 0.5s`,
+    },
+    animationDark: {
+      willChange: 'auto',
+      translateZ: 0,
+      animation: `updateLight 0.5s`,
+    },
+    collapsedSubnodes: {
+      color: theme.palette.text.secondary,
+    },
+    displayBlock: {
+      display: 'block',
+    },
+    node: {
+      display: 'block',
+      marginLeft: '10px',
+      '&:hover': {
+        backgroundColor: theme.palette.type === 'light' ? blueGrey[100] : theme.palette.primary.light,
+      },
+    },
+    topicSelect: {
+      float: 'right' as 'right',
+      opacity: 0,
+      cursor: 'pointer',
+      marginTop: '-1px',
+    },
+    subnodes: {
+      marginLeft: theme.spacing(1.5),
+    },
+    selected: {
+      backgroundColor: (theme.palette.type === 'light' ? blueGrey[300] : theme.palette.primary.main) + ' !important',
+    },
+    hover: {},
+    title: {
+      borderRadius: '4px',
+      lineHeight: '1em',
+      display: 'inline-block' as 'inline-block',
+      whiteSpace: 'nowrap' as 'nowrap',
+      padding: '1px 4px 0px 4px',
+      height: '14px',
+      margin: '1px 0px 2px 0px',
+    },
+  }
+}
@@ -1,101 +0,0 @@
-import * as q from '../../../../backend/src/Model'
-import * as React from 'react'
-import TreeNode from './TreeNode'
-import { Record } from 'immutable'
-import { SettingsState, TopicOrder } from '../../reducers/Settings'
-import { Theme, withStyles } from '@material-ui/core'
-import { TopicViewModel } from '../../model/TopicViewModel'
-
-export interface Props {
-  treeNode: q.TreeNode<TopicViewModel>
-  filter?: string
-  collapsed?: boolean | undefined
-  classes: any
-  lastUpdate: number
-  selectedTopic?: q.TreeNode<TopicViewModel>
-  didSelectTopic: any
-  settings: Record<SettingsState>
-}
-
-interface State {
-  alreadyAdded: number
-}
-
-class TreeNodeSubnodes extends React.Component<Props, State> {
-  private renderMoreAnimationFrame?: any
-  constructor(props: Props) {
-    super(props)
-    this.state = { alreadyAdded: 10 }
-  }
-
-  private sortedNodes(): Array<q.TreeNode<TopicViewModel>> {
-    const { settings, treeNode } = this.props
-    const topicOrder = settings.get('topicOrder')
-
-    let edges = treeNode.edgeArray
-    if (topicOrder === TopicOrder.abc) {
-      edges = edges.sort((a, b) => a.name.localeCompare(b.name))
-    }
-
-    let nodes = edges.map(edge => edge.target)
-    if (topicOrder === TopicOrder.messages) {
-      nodes = nodes.sort((a, b) => b.leafMessageCount() - a.leafMessageCount())
-    }
-    if (topicOrder === TopicOrder.topics) {
-      nodes = nodes.sort((a, b) => b.childTopicCount() - a.childTopicCount())
-    }
-
-    return nodes
-  }
-
-  private renderMore() {
-    this.renderMoreAnimationFrame = (window as any).requestIdleCallback(() => {
-      this.setState({ ...this.state, alreadyAdded: this.state.alreadyAdded * 1.5 })
-    }, { timeout: 500 })
-  }
-
-  public componentWillUnmount() {
-    (window as any).cancelIdleCallback(this.renderMoreAnimationFrame)
-  }
-
-  public render() {
-    const edges = this.props.treeNode.edgeArray
-    if (edges.length === 0 || this.props.collapsed) {
-      return null
-    }
-
-    if (this.state.alreadyAdded < edges.length) {
-      this.renderMore()
-    }
-
-    const nodes = this.sortedNodes().slice(0, this.state.alreadyAdded)
-    const listItems = nodes.map((node) => {
-      return (
-        <TreeNode
-          key={`${node.hash()}-${this.props.filter}`}
-          treeNode={node}
-          className={this.props.classes.listItem}
-          lastUpdate={node.lastUpdate}
-          didSelectTopic={this.props.didSelectTopic}
-          settings={this.props.settings}
-        />
-      )
-    })
-
-    return (
-      <span className={this.props.classes.list}>
-        {listItems}
-      </span>
-    )
-  }
-}
-
-const styles = (theme: Theme) => ({
-  list: {
-    display: 'block' as 'block',
-    clear: 'both' as 'both',
-    marginLeft: theme.spacing(1.5),
-  },
-})
-
-export default withStyles(styles)(TreeNodeSubnodes)
@@ -1,13 +1,13 @@
 import * as q from '../../../../backend/src/Model'
-import * as React from 'react'
+import React, { useCallback } from 'react'
 import TreeNode from './TreeNode'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { Record } from 'immutable'
 import { SettingsState } from '../../reducers/Settings'
 import { TopicViewModel } from '../../model/TopicViewModel'
 import { treeActions } from '../../actions'
+import { KeyCodes } from '../../utils/KeyCodes'

 const MovingAverage = require('moving-average')

@@ -20,16 +20,38 @@ interface Props {
  actions: typeof treeActions
  connectionId?: string
  tree?: q.Tree<TopicViewModel>
-  filter: string
  host?: string
  paused: boolean
-  settings: Record<SettingsState>
+  settings: SettingsState
 }

 interface State {
  lastUpdate: number
 }

+function useArrowKeyEventHandler(actions: typeof treeActions) {
+  return (event: React.KeyboardEvent) => {
+    switch (event.keyCode) {
+      case KeyCodes.arrow_down:
+        actions.moveSelectionUpOrDownwards('next')
+        event.preventDefault()
+        break
+      case KeyCodes.arrow_up:
+        actions.moveSelectionUpOrDownwards('previous')
+        event.preventDefault()
+        break
+      case KeyCodes.arrow_left:
+        actions.moveOutward()
+        event.preventDefault()
+        break
+      case KeyCodes.arrow_right:
+        actions.moveInward()
+        event.preventDefault()
+        break
+    }
+  }
+}
+
 class TreeComponent extends React.PureComponent<Props, State> {
  private updateTimer?: any
  private perf: number = 0
@@ -40,17 +62,11 @@ class TreeComponent extends React.PureComponent<Props, State> {
    this.state = { lastUpdate: 0 }
  }

+  private keyEventHandler = useArrowKeyEventHandler(this.props.actions)
  private performanceCallback = (ms: number) => {
    average.push(Date.now(), ms)
  }

-  public time(): number {
-    const time = performance.now() - this.perf
-    this.perf = performance.now()
-
-    return time
-  }
-
  public componentWillReceiveProps(nextProps: Props) {
    if (this.props.tree !== nextProps.tree) {
      if (this.props.tree) {
@@ -77,23 +93,37 @@ class TreeComponent extends React.PureComponent<Props, State> {
    const timeUntilNextUpdate = updateInterval - (performance.now() - this.renderTime)

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

-        if (!this.props.paused) {
-          this.props.tree && this.props.tree.applyUnmergedChanges()
-        }
-        window.requestIdleCallback(() => {
-          this.setState({ lastUpdate: this.renderTime })
-        }, { timeout: 100 })
-      }, { timeout: 500 })
+          if (!this.props.paused) {
+            this.props.tree && this.props.tree.applyUnmergedChanges()
+          }
+          window.requestIdleCallback(
+            () => {
+              this.setState({ lastUpdate: this.renderTime })
+            },
+            { timeout: 100 }
+          )
+        },
+        { timeout: 500 }
+      )
    }, Math.max(0, timeUntilNextUpdate))
  }

+  public componentWillUpdate() {
+    this.perf = performance.now()
+  }
+
+  public componentDidUpdate() {
+    this.performanceCallback(performance.now() - this.perf)
+  }
+
  public render() {
-    const { tree, filter } = this.props
+    const { tree } = this.props
    if (!tree) {
      return null
    }
@@ -101,20 +131,26 @@ class TreeComponent extends React.PureComponent<Props, State> {
    const style: React.CSSProperties = {
      lineHeight: '1.1',
      cursor: 'default',
+      overflowY: 'scroll',
+      overflowX: 'hidden',
+      height: '100%',
+      width: '100%',
+      outline: '24px black !important',
+      paddingBottom: '16px', // avoid conflict with chart panel Resizer
    }

    return (
-      <div style={style}>
+      <div style={style} tabIndex={0} onKeyDown={this.keyEventHandler}>
        <TreeNode
          key={tree.hash()}
          isRoot={true}
          treeNode={tree}
          name={this.props.host}
          collapsed={false}
-          performanceCallback={this.performanceCallback}
          settings={this.props.settings}
          lastUpdate={tree.lastUpdate}
-          didSelectTopic={this.props.actions.selectTopic}
+          actions={this.props.actions}
+          selectTopicAction={this.props.actions.selectTopic}
        />
      </div>
    )
@@ -137,4 +173,7 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-export default connect(mapStateToProps, mapDispatchToProps)(TreeComponent)
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TreeComponent)
@@ -12,15 +12,7 @@ import { green } from '@material-ui/core/colors'
 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 { Button, IconButton, Modal, Paper, Snackbar, SnackbarContent, Typography } from '@material-ui/core'

 interface Props {
  showUpdateNotification: boolean
@@ -30,7 +22,7 @@ interface Props {
 }

 interface GithubRelease {
-  url: string,
+  url: string
  assets?: Array<GithubAsset>
  published_at: string // "2019-01-25T20:14:39Z"
  body_html: string
@@ -44,6 +36,7 @@ interface GithubAsset {
  id: number
  node_id: string
  url: string
+  browser_download_url: string
  name: string
  label: string
 }
@@ -58,7 +51,7 @@ class UpdateNotifier extends React.Component<Props, State> {
    this.state = { newerVersions: [] }

    const ownVersion = electron.remote.app.getVersion()
-    this.fetchReleases().then((releases) => {
+    this.fetchReleases().then(releases => {
      const newerVersions = releases
        .filter(release => this.allowPrereleaseIfOwnVersionIsBeta(release, ownVersion))
        .filter(release => compareVersions(release.tag_name, ownVersion) > 0)
@@ -130,21 +123,19 @@ class UpdateNotifier extends React.Component<Props, State> {
  }

  private notificationActions() {
-    return [(
-        <Button key="undo" size="small" onClick={this.showDetails}>
-          Details
-        </Button>
-      ), (
-        <IconButton
-          key="close"
-          aria-label="Close"
-          color="inherit"
-          className={this.props.classes.close}
-          onClick={this.closeNotification}
-        >
-          <Close />
-        </IconButton>
-      ),
+    return [
+      <Button key="undo" size="small" onClick={this.showDetails}>
+        Details
+      </Button>,
+      <IconButton
+        key="close"
+        aria-label="Close"
+        color="inherit"
+        className={this.props.classes.close}
+        onClick={this.closeNotification}
+      >
+        <Close />
+      </IconButton>,
    ]
  }

@@ -158,30 +149,27 @@ class UpdateNotifier extends React.Component<Props, State> {
      .join('<hr />')

    return (
-      <Modal
-        open={this.props.showUpdateDetails}
-        disableAutoFocus={true}
-        onClose={this.hideDetails}
-      >
+      <Modal open={this.props.showUpdateDetails} disableAutoFocus={true} onClose={this.hideDetails}>
        <Paper className={this.props.classes.root}>
-          <Typography variant="h6" className={this.props.classes.title}>Version {latestUpdate.tag_name}</Typography>
+          <Typography variant="h6" className={this.props.classes.title}>
+            Version {latestUpdate.tag_name}
+          </Typography>
          <Typography className={this.props.classes.title}>Changelog</Typography>
          <div className={this.props.classes.releaseNotes} dangerouslySetInnerHTML={{ __html: releaseNotes }} />
          {this.renderDownloads()}
-          <Button
-            className={this.props.classes.download}
-            onClick={this.openGithub}
-          >
+          <Button className={this.props.classes.download} onClick={this.openHomePage}>
            Github Page
          </Button>
-          <Button className={this.props.classes.closeButton} color="secondary" onClick={this.hideDetails}>Close</Button>
+          <Button className={this.props.classes.closeButton} color="secondary" onClick={this.hideDetails}>
+            Close
+          </Button>
        </Paper>
      </Modal>
    )
  }

-  private openGithub = () => {
-    this.openUrl('https://github.com/thomasnordquist/MQTT-Explorer')
+  private openHomePage = () => {
+    this.openUrl('https://mqtt-explorer.com')
  }

  private openUrl = (url: string) => {
@@ -192,7 +180,7 @@ class UpdateNotifier extends React.Component<Props, State> {
    let regex: RegExp
    if (os.platform() === 'darwin') {
      regex = /\.dmg$/
-    } else if (os.platform() === 'darwin') {
+    } else if (os.platform() === 'win32') {
      regex = /\.exe$/
    } else {
      regex = /\.AppImage$/
@@ -207,18 +195,14 @@ class UpdateNotifier extends React.Component<Props, State> {
      return null
    }

-    return latestUpdate.assets
-      .filter(this.assetForCurrentPlatform)
-      .map(asset => (
-        <div>
-          <Button
-            className={this.props.classes.download}
-            onClick={() => this.openUrl(asset.url)}
-          >
-            <CloudDownload />&nbsp;{asset.name}
-          </Button>
-        </div>
-      ))
+    return latestUpdate.assets.filter(this.assetForCurrentPlatform).map(asset => (
+      <div>
+        <Button className={this.props.classes.download} onClick={() => this.openUrl(asset.browser_download_url)}>
+          <CloudDownload />
+          &nbsp;{asset.name}
+        </Button>
+      </div>
+    ))
  }

  public render() {
@@ -282,4 +266,9 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(UpdateNotifier))
+export default withStyles(styles)(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(UpdateNotifier)
+)
@@ -4,10 +4,10 @@ import { AppState } from '../../reducers'
 import { connect } from 'react-redux'
 import { ConnectionHealth } from '../../reducers/Connection'
 import { green, orange, red } from '@material-ui/core/colors'
-import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
+import { withStyles, Theme } from '@material-ui/core/styles'
 import { Tooltip } from '@material-ui/core'

-const styles: StyleRulesCallback = theme => ({
+const styles = (theme: Theme) => ({
  offline: {
    color: red[700],
  },
@@ -18,7 +18,10 @@ const styles: StyleRulesCallback = theme => ({
    color: orange[600],
  },
  icon: {
-    boxShadow: theme.shadows[2].split('),').map(s => `inset ${s}`).join('),'),
+    boxShadow: theme.shadows[2]
+      .split('),')
+      .map(s => `inset ${s}`)
+      .join('),'),
    padding: '6px',
    borderRadius: '50%',
    backgroundColor: '#eee',
@@ -47,7 +50,7 @@ class ConnectionHealthIndicator extends React.Component<Props, {}> {

    return (
      <Tooltip title={`Connection health "${health}"`}>
-        <div>
+        <div style={{ display: 'inherit' }}>
          <DeviceHubOutlined className={`${[classes[health]]} ${this.props.withBackground ? classes.icon : ''}`} />
        </div>
      </Tooltip>
@@ -37,9 +37,11 @@ class Copy extends React.Component<Props, State> {
  }

  public render() {
-    const icon = !this.state.didCopy
-      ? <FileCopy fontSize="inherit" />
-      : <Check fontSize="inherit" style={{ cursor: 'default' }} />
+    const icon = !this.state.didCopy ? (
+      <FileCopy fontSize="inherit" />
+    ) : (
+      <Check fontSize="inherit" style={{ cursor: 'default' }} />
+    )

    return (
      <span>
@@ -61,4 +63,7 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-export default connect(undefined, mapDispatchToProps)(Copy)
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(Copy)
@@ -6,6 +6,7 @@ interface Props {
  onClick: any
  tooltip: string
  classes: any
+  style?: React.CSSProperties
 }

 const styles = (theme: Theme) => ({
@@ -15,6 +16,9 @@ const styles = (theme: Theme) => ({
    width: '32px',
    height: '32px',
  },
+  label: {
+    marginTop: '-2px',
+  },
 })

 class CustomIconButton extends React.Component<Props, {}> {
@@ -29,8 +33,8 @@ class CustomIconButton extends React.Component<Props, {}> {

  public render() {
    return (
-      <IconButton className={this.props.classes.button} onClick={this.onClick}>
-        <Tooltip title={this.props.tooltip}>
+      <IconButton className={this.props.classes.button} style={this.props.style} onClick={this.onClick}>
+        <Tooltip title={this.props.tooltip} className={this.props.classes.label}>
          <span>{this.props.children}</span>
        </Tooltip>
      </IconButton>
@@ -20,7 +20,7 @@ class DateFormatter extends React.Component<Props, {}> {
  private intervalSince(intervalSince: Date) {
    const interval = intervalSince.getTime() - this.props.date.getTime()
    const unit = this.unitForInterval(interval)
-    return `${moment.duration(interval).as(unit)} ${unitMapping[unit]}`
+    return `${Math.round(moment.duration(interval).as(unit) * 100) / 100} ${unitMapping[unit]}`
  }

  private legacyDate() {
@@ -28,7 +28,9 @@ class DateFormatter extends React.Component<Props, {}> {
  }

  private localizedDate(locale: string) {
-    return moment(this.props.date).locale(locale).format('L LTS')
+    return moment(this.props.date)
+      .locale(locale)
+      .format('L LTS')
  }

  private unitForInterval(milliseconds: number) {
@@ -6,7 +6,7 @@ export function isElementInViewport(el: any) {
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
-    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
+    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) /*or $(window).height() */ &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
  )
 }
@@ -0,0 +1,24 @@
+import { useEffect } from 'react'
+import { KeyCodes } from '../utils/KeyCodes'
+
+export function useGlobalKeyEventHandler(
+  key: KeyCodes | undefined,
+  callback: (event: KeyboardEvent) => void,
+  dependencies?: Array<any>
+) {
+  useEffect(() => {
+    function handleKeyEvent(event: KeyboardEvent) {
+      if (key === undefined) {
+        callback(event)
+      } else if (event.keyCode === key) {
+        callback(event)
+        event.preventDefault()
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyEvent, false)
+    return function cleanup() {
+      document.removeEventListener('keydown', handleKeyEvent, false)
+    }
+  }, dependencies)
+}
@@ -12,17 +12,9 @@ import './utils/tracking'
 import { themes } from './theme'

 const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
-const store = createStore(
-  reducers,
-  composeEnhancers(
-    applyMiddleware(
-      reduxThunk,
-      batchDispatchMiddleware
-    )
-  )
-)
+const store = createStore(reducers, composeEnhancers(applyMiddleware(reduxThunk, batchDispatchMiddleware)))

-function ApplicationRenderer(props: {theme: 'light' | 'dark'}) {
+function ApplicationRenderer(props: { theme: 'light' | 'dark' }) {
  return (
    <ThemeProvider theme={props.theme === 'light' ? themes.lightTheme : themes.darkTheme}>
      <App />
@@ -20,6 +20,8 @@ export interface ConnectionOptions {
  encryption: boolean
  certValidation: boolean
  selfSignedCertificate?: CertificateParameters
+  clientCertificate?: CertificateParameters
+  clientKey?: CertificateParameters
  clientId?: string
  subscriptions: Array<string>
 }
@@ -38,6 +40,8 @@ export function toMqttConnection(options: ConnectionOptions): MqttOptions | unde
    certValidation: options.certValidation,
    subscriptions: options.subscriptions,
    certificateAuthority: options.selfSignedCertificate ? options.selfSignedCertificate.data : undefined,
+    clientCertificate: options.clientCertificate ? options.clientCertificate.data : undefined,
+    clientKey: options.clientKey ? options.clientKey.data : undefined,
  }
 }

@@ -65,11 +69,12 @@ export function createEmptyConnection(): ConnectionOptions {

 export function makeDefaultConnections() {
  return {
-    'iot.eclipse.org': {
+    // remember: there was also iot.eclipse.org once
+    'mqtt.eclipse.org': {
      ...createEmptyConnection(),
-      id: 'iot.eclipse.org',
-      name: 'iot.eclipse.org',
-      host: 'iot.eclipse.org',
+      id: 'mqtt.eclipse.org',
+      name: 'mqtt.eclipse.org',
+      host: 'mqtt.eclipse.org',
    },
    'test.mosquitto.org': {
      ...createEmptyConnection(),
@@ -17,7 +17,7 @@ export function clearLegacyConnectionOptions() {
  window.localStorage.setItem('connectionSettings', '')
 }

-export function loadLegacyConnectionOptions(): {[s: string]: ConnectionOptions} | {} {
+export function loadLegacyConnectionOptions(): { [s: string]: ConnectionOptions } | {} {
  const legacySettingsString = window.localStorage.getItem('connectionSettings')
  if (!legacySettingsString) {
    return {}
@@ -30,7 +30,7 @@ export function loadLegacyConnectionOptions(): {[s: string]: ConnectionOptions}
    return {}
  }

-  const protocolMap: {[s: string]: string} = {
+  const protocolMap: { [s: string]: string } = {
    'tcp://': 'mqtt',
    'ws://': 'ws',
    'mqtt://': 'mqtt',
@@ -1,19 +1,39 @@
+import { Destroyable } from '../../../backend/src/Model/Destroyable'
 import { EventDispatcher } from '../../../events'

-export class TopicViewModel {
+export class TopicViewModel implements Destroyable {
  private selected: boolean
-  public change = new EventDispatcher<void, TopicViewModel>()
+  private expanded: boolean
+  public selectionChange = new EventDispatcher<void>()
+  public expandedChange = new EventDispatcher<void>()

  public constructor() {
    this.selected = false
+    this.expanded = false
+  }
+
+  public destroy() {
+    this.selectionChange.removeAllListeners()
  }

  public isSelected() {
    return this.selected
  }

+  public isExpanded() {
+    return this.expanded
+  }
+
  public setSelected(selected: boolean) {
    this.selected = selected
-    this.change.dispatch()
+    this.selectionChange.dispatch()
+  }
+
+  public setExpanded(expanded: boolean, fireEvent: boolean) {
+    const didChange = this.expanded !== expanded
+    this.expanded = expanded
+    if (didChange && fireEvent) {
+      this.expandedChange.dispatch()
+    }
  }
 }
@@ -0,0 +1,109 @@
+import { Action } from 'redux'
+import { createReducer } from './lib'
+import { Record, List } from 'immutable'
+import MoveUp from '../components/ChartPanel/ChartSettings/MoveUp'
+
+export type PlotCurveTypes = 'curve' | 'linear' | 'cubic_basis_spline' | 'step_after' | 'step_before'
+
+export interface ChartParameters {
+  topic: string
+  dotPath?: string
+  interpolation?: PlotCurveTypes
+  range?: {
+    from?: number
+    to?: number
+  }
+  width?: 'big' | 'medium' | 'small'
+  color?: string
+}
+
+export interface ChartsStateModel {
+  charts: List<ChartParameters>
+}
+
+export type ChartsState = Record<ChartsStateModel>
+
+export type Action = AddChart | RemoveChart | SetCharts | UpdateChart | MoveUp
+
+export enum ActionTypes {
+  CHARTS_ADD = 'CHARTS_ADD',
+  CHARTS_REMOVE = 'CHARTS_REMOVE',
+  CHARTS_SET = 'CHARTS_SET',
+  CHARTS_UPDATE = 'CHARTS_UPDATE',
+  CHARTS_MOVE_UP = 'CHARTS_MOVE_UP',
+}
+
+export interface AddChart {
+  type: ActionTypes.CHARTS_ADD
+  chart: ChartParameters
+}
+
+export interface MoveUp {
+  type: ActionTypes.CHARTS_ADD
+  topic: string
+  dotPath?: string
+}
+
+export interface UpdateChart {
+  type: ActionTypes.CHARTS_ADD
+  topic: string
+  dotPath?: string
+  parameters: Partial<ChartParameters>
+}
+
+export interface RemoveChart {
+  type: ActionTypes.CHARTS_REMOVE
+  chart: ChartParameters
+}
+
+export interface SetCharts {
+  type: ActionTypes.CHARTS_SET
+  charts: Array<ChartParameters>
+}
+
+const initialState = Record<ChartsStateModel>({
+  charts: List<ChartParameters>(),
+})
+
+export const chartsReducer = createReducer(initialState(), {
+  CHARTS_ADD: addChart,
+  CHARTS_REMOVE: removeChart,
+  CHARTS_SET: setCharts,
+  CHARTS_UPDATE: updateChart,
+  CHARTS_MOVE_UP: moveUp,
+})
+
+function addChart(state: ChartsState, action: AddChart) {
+  return state.set('charts', state.get('charts').push(action.chart))
+}
+
+function moveUp(state: ChartsState, action: MoveUp) {
+  const charts = state.get('charts')
+  const idx = charts.findIndex(chart => chart.topic === action.topic && chart.dotPath === action.dotPath)
+  const item = charts.get(idx)
+  const previousItem = charts.get(idx - 1)
+
+  if (idx === 0 || !item || !previousItem) {
+    return
+  }
+  const newlyOrderedCharts = charts.set(idx - 1, item).set(idx, previousItem)
+  return state.set('charts', newlyOrderedCharts)
+}
+
+function updateChart(state: ChartsState, action: UpdateChart) {
+  const charts = state.get('charts')
+  const chartIdx = charts.findIndex(chart => chart.topic === action.topic && chart.dotPath === action.dotPath)
+  const chart = charts.get(chartIdx)
+
+  return state.set('charts', chart ? charts.set(chartIdx, { ...chart, ...action.parameters }) : charts)
+}
+
+function removeChart(state: ChartsState, action: RemoveChart) {
+  const charts = state.get('charts')
+  const newCharts = charts.filter(chart => chart.topic !== action.chart.topic || chart.dotPath !== action.chart.dotPath)
+  return state.set('charts', newCharts)
+}
+
+function setCharts(state: ChartsState, action: SetCharts) {
+  return state.set('charts', List(action.charts))
+}
@@ -27,7 +27,7 @@ export enum ActionTypes {
 }

 export interface SetConnecting {
-  type: ActionTypes.CONNECTION_SET_CONNECTING,
+  type: ActionTypes.CONNECTION_SET_CONNECTING
  connectionId: string
 }

@@ -3,18 +3,29 @@ import { ConnectionOptions } from '../model/ConnectionOptions'
 import { createReducer } from './lib'

 export interface ConnectionManagerState {
-  connections: {[s: string]: ConnectionOptions},
+  connections: { [s: string]: ConnectionOptions }
  selected?: string
  showAdvancedSettings: boolean
+  showCertificateSettings: boolean
 }

 const initialState: ConnectionManagerState = {
  connections: {},
  selected: undefined,
  showAdvancedSettings: false,
+  showCertificateSettings: false,
 }

-export type Action = SetConnections | SelectConnection | UpdateConnection | AddConnection | DeleteConnection | ToggleAdvancedSettings | DeleteSubscription | AddSubscription
+export type Action =
+  | SetConnections
+  | SelectConnection
+  | UpdateConnection
+  | AddConnection
+  | DeleteConnection
+  | ToggleAdvancedSettings
+  | ToggleCertificateSettings
+  | DeleteSubscription
+  | AddSubscription

 export enum ActionTypes {
  CONNECTION_MANAGER_SET_CONNECTIONS = 'CONNECTION_MANAGER_SET_CONNECTIONS',
@@ -23,13 +34,14 @@ export enum ActionTypes {
  CONNECTION_MANAGER_ADD_CONNECTION = 'CONNECTION_MANAGER_ADD_CONNECTION',
  CONNECTION_MANAGER_DELETE_CONNECTION = 'CONNECTION_MANAGER_DELETE_CONNECTION',
  CONNECTION_MANAGER_TOGGLE_ADVANCED_SETTINGS = 'CONNECTION_MANAGER_TOGGLE_ADVANCED_SETTINGS',
+  CONNECTION_MANAGER_TOGGLE_CERTIFICATE_SETTINGS = 'CONNECTION_MANAGER_TOGGLE_CERTIFICATE_SETTINGS',
  CONNECTION_MANAGER_ADD_SUBSCRIPTION = 'CONNECTION_MANAGER_ADD_SUBSCRIPTION',
  CONNECTION_MANAGER_DELETE_SUBSCRIPTION = 'CONNECTION_MANAGER_DELETE_SUBSCRIPTION',
 }

 export interface SetConnections {
  type: ActionTypes.CONNECTION_MANAGER_SET_CONNECTIONS
-  connections: {[s: string]: ConnectionOptions}
+  connections: { [s: string]: ConnectionOptions }
 }

 export interface SelectConnection {
@@ -69,6 +81,10 @@ export interface ToggleAdvancedSettings {
  type: ActionTypes.CONNECTION_MANAGER_TOGGLE_ADVANCED_SETTINGS
 }

+export interface ToggleCertificateSettings {
+  type: ActionTypes.CONNECTION_MANAGER_TOGGLE_CERTIFICATE_SETTINGS
+}
+
 export const connectionManagerReducer = createReducer(initialState, {
  CONNECTION_MANAGER_SET_CONNECTIONS: setConnections,
  CONNECTION_MANAGER_SELECT_CONNECTION: selectConnection,
@@ -76,6 +92,7 @@ export const connectionManagerReducer = createReducer(initialState, {
  CONNECTION_MANAGER_ADD_CONNECTION: addConnection,
  CONNECTION_MANAGER_DELETE_CONNECTION: deleteConnection,
  CONNECTION_MANAGER_TOGGLE_ADVANCED_SETTINGS: toggleAdvancedSettings,
+  CONNECTION_MANAGER_TOGGLE_CERTIFICATE_SETTINGS: toggleCertificateSettings,
  CONNECTION_MANAGER_DELETE_SUBSCRIPTION: deleteSubscription,
  CONNECTION_MANAGER_ADD_SUBSCRIPTION: addSubscription,
 })
@@ -101,6 +118,16 @@ function toggleAdvancedSettings(state: ConnectionManagerState, action: ToggleAdv
  }
 }

+function toggleCertificateSettings(
+  state: ConnectionManagerState,
+  action: ToggleCertificateSettings
+): ConnectionManagerState {
+  return {
+    ...state,
+    showCertificateSettings: !state.showCertificateSettings,
+  }
+}
+
 function addConnection(state: ConnectionManagerState, action: AddConnection): ConnectionManagerState {
  return {
    ...state,
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Thomas Nordquist	410bc6a39b	Prepare release	2019-07-02 15:32:04 +02:00
Thomas Nordquist	a56c00aeb3	Hotfix certificates selection	2019-07-02 15:27:38 +02:00
Thomas Nordquist	c3d7d653fb	Update electron-builder	2019-07-02 15:20:33 +02:00
Thomas Nordquist	9d72ef0122	Disable delete key	2019-07-02 15:20:16 +02:00
Thomas Nordquist	b5aa22a6d8	Improve render performance	2019-07-02 15:10:46 +02:00
Thomas Nordquist	aa05c16651	Report crashes	2019-07-02 13:38:34 +02:00
Thomas Nordquist	c543d0fb85	Disable waylanf for snap builds	2019-07-02 11:11:32 +02:00
Thomas Nordquist	de7fa2dd9c	Fix tests	2019-06-27 10:04:56 +02:00
Thomas Nordquist	f9829c2d5c	Refactor	2019-06-26 17:41:21 +02:00
Thomas Nordquist	e02091f645	Expose model interface	2019-06-26 17:41:21 +02:00
Thomas Nordquist	8d15018986	Refactor TreeNodeComponent	2019-06-26 17:41:21 +02:00
Thomas Nordquist	76c63d38cd	Fix type mismatch	2019-06-26 17:41:21 +02:00
Thomas Nordquist	188b5c6c16	Fix typical bugs	2019-06-26 17:41:21 +02:00
greenkeeper[bot]	fc5a5d2035	Update electron in group default to the latest version 🚀 (#136 ) * chore(package): update electron to version 5.0.5 * chore(package): update electron to version 5.0.5 * chore(package): update lockfile yarn.lock	2019-06-25 21:29:50 +02:00
greenkeeper[bot]	838d106b62	Update spectron to the latest version 🚀 (#131 ) * chore(package): update spectron to version 6.0.0 * chore(package): update lockfile yarn.lock	2019-06-25 21:29:09 +02:00
Thomas Nordquist	d59a1af5d4	Refactor TreeNodeComponent	2019-06-25 17:44:34 +02:00
Thomas Nordquist	1638080e85	Improve keyboard arrow navigation	2019-06-25 14:30:47 +02:00
Thomas Nordquist	f4051b4cdf	Add tree navigation via arrow keys	2019-06-25 01:39:31 +02:00
Thomas Nordquist	d054e64568	Focus on first input element of connection settings	2019-06-24 15:59:02 +02:00
Thomas Nordquist	759176c4fc	Improve RangeSettings keyboard compatibility	2019-06-24 15:58:43 +02:00
Thomas Nordquist	c2a9b7b1c6	Fix faulty electron version detection	2019-06-24 14:07:32 +02:00
Thomas Nordquist	2536b9fff7	Fix ui glitch	2019-06-24 14:07:15 +02:00
Thomas Nordquist	b714547928	Fix typo	2019-06-24 12:58:05 +02:00
Thomas Nordquist	005fba5ca3	Prevent tab-event closing the chart range settings	2019-06-24 12:47:22 +02:00
Thomas Nordquist	b27df0c0d8	Allow to select connection profile with arrow keys	2019-06-24 12:27:15 +02:00
Thomas Nordquist	341ab44f9e	Refactor ProfileList	2019-06-24 12:10:02 +02:00
Thomas Nordquist	e0d35548c5	Improve "search as you type" feature	2019-06-24 11:39:24 +02:00
Thomas Nordquist	ba91730f43	Add support for keyboard events	2019-06-24 11:22:50 +02:00
Thomas Nordquist	f691a7a0ae	Add keycodes enum	2019-06-23 12:31:08 +02:00
Thomas Nordquist	5a43ecd8d2	Add dramatic pause to video	2019-06-23 12:30:53 +02:00
Thomas Nordquist	73f33c31bb	Remove wrapper script from snaps	2019-06-23 12:30:35 +02:00
Thomas Nordquist	ffdce6f825	Add keyboard events enter/escape to connect/disconnect	2019-06-23 12:29:52 +02:00
Thomas Nordquist	38b16daf51	Add client certificates	2019-06-21 01:59:38 +02:00
Thomas Nordquist	bed5c74150	Prepare SNI test release	2019-06-20 18:34:34 +02:00
Thomas Nordquist	261454986e	Add SNI support	2019-06-20 18:18:44 +02:00
Thomas Nordquist	03784601ea	Remove snap repackaging	2019-06-20 14:01:33 +02:00
Thomas Nordquist	b060861657	Increase test resiliance	2019-06-20 12:44:02 +02:00
Thomas Nordquist	34a117b74c	Update dependencies	2019-06-19 12:15:40 +02:00
Thomas Nordquist	9e341afdcc	Add cspell	2019-06-19 12:06:23 +02:00
Thomas Nordquist	0d585eef8f	Fix typos	2019-06-19 11:59:14 +02:00
Thomas Nordquist	7e99c18410	Update cspell dictionary	2019-06-18 23:19:29 +02:00
Thomas Nordquist	68118248c9	Improve ui-test video	2019-06-18 17:26:10 +02:00
Thomas Nordquist	f1a2ae16c1	Fix plot theme switch	2019-06-18 17:05:22 +02:00
Thomas Nordquist	7904cb22cf	Update @types/node	2019-06-18 16:25:17 +02:00
Thomas Nordquist	0e0fbae8bb	Freeze electron package version in package.json	2019-06-18 15:48:50 +02:00
Thomas Nordquist	3b72048b67	Fix linting error	2019-06-18 15:13:44 +02:00
Thomas Nordquist	caa54809b4	Show app name on windows tiles	2019-06-18 15:04:39 +02:00
Thomas Nordquist	23f5846122	Prepare release v0.3.0	2019-06-18 14:53:55 +02:00
Thomas Nordquist	de7b461b4e	Update ui-test video	2019-06-18 14:49:48 +02:00
Thomas Nordquist	d92ea0bad7	Remove scene from ui-test video	2019-06-18 14:49:24 +02:00
Thomas Nordquist	d7bb4bb55f	Fix layout default sizes	2019-06-18 14:48:52 +02:00
Thomas Nordquist	9ed8a3b91e	Add ui-test accessibility	2019-06-18 14:48:39 +02:00
Thomas Nordquist	dd78b43058	Fix sidebar scroll behavior	2019-06-18 14:48:16 +02:00
Thomas Nordquist	cd68e966ab	Fix test text input	2019-06-18 10:27:58 +02:00
Thomas Nordquist	6baeafce39	Fix typo	2019-06-18 10:27:42 +02:00
Thomas Nordquist	1d8900d6eb	Move chart panel below tree	2019-06-17 23:27:16 +02:00
Thomas Nordquist	e82c8c4eb0	Refactor	2019-06-17 21:31:54 +02:00
Thomas Nordquist	449d046ce3	Avoid dotPath confusions	2019-06-17 19:11:58 +02:00
Thomas Nordquist	06ab52bb6b	Fix chart panel auto-open	2019-06-17 19:08:40 +02:00
Thomas Nordquist	181575f71f	Prepare release v0.3.0-alpha2	2019-06-17 18:29:46 +02:00
Thomas Nordquist	3d5a4af705	Tidy up ui	2019-06-17 18:27:19 +02:00
Thomas Nordquist	4e982be613	Show notification when adding charts	2019-06-17 18:19:26 +02:00
Thomas Nordquist	8c1c6387c9	Add colors and move capability to charts	2019-06-17 18:08:35 +02:00
Thomas Nordquist	0f9c2cd36f	Allow custom options for charts	2019-06-17 16:37:13 +02:00
Thomas Nordquist	2296143883	Set fixed border for bottom panel	2019-06-17 16:36:40 +02:00
Thomas Nordquist	fcb61b563c	Refactor	2019-06-17 12:12:22 +02:00
Thomas Nordquist	90e5336c5c	Filter tracking	2019-06-17 12:11:24 +02:00
Thomas Nordquist	37d56e24ac	Fix chart tree source	2019-06-16 23:06:32 +02:00
Thomas Nordquist	57f979e1bb	Prepare release v0.3.0-alpha	2019-06-16 22:43:37 +02:00
Thomas Nordquist	00cbb63181	Add ShowPlot icon/action to MessageHistory	2019-06-16 22:43:13 +02:00
Thomas Nordquist	eaafb68117	Throttle chart updates	2019-06-16 22:42:17 +02:00
Thomas Nordquist	486a3568e9	Allow plotting edge-case values	2019-06-16 22:31:21 +02:00
Thomas Nordquist	acff7ea631	Refactor	2019-06-16 22:30:56 +02:00
Thomas Nordquist	6829046d8c	Disable reducer tracking	2019-06-16 22:30:38 +02:00
Thomas Nordquist	182285d8a5	Fix ui glitch in topic breadcrumbs	2019-06-16 21:56:30 +02:00
Thomas Nordquist	1af799789d	Only migrate eclipse mqtt server when not using ssl	2019-06-16 21:29:37 +02:00
Thomas Nordquist	7036d6c8fe	Migrate from iot.eclipse.org to mqtt.eclipse.org	2019-06-16 21:23:22 +02:00
Thomas Nordquist	0b067bd964	Update electron to 5.0.4	2019-06-16 21:01:08 +02:00
Thomas Nordquist	9fe5133ef1	Improve plot performance with memoization	2019-06-16 20:55:55 +02:00
Thomas Nordquist	c9aae4287c	Fix chart panel auto-open	2019-06-16 20:50:18 +02:00
Thomas Nordquist	97846e01a7	Use mui-theme to color plots	2019-06-16 20:18:48 +02:00
Thomas Nordquist	b4b6c214cb	Open/close chart panel automatically	2019-06-16 20:18:26 +02:00
Thomas Nordquist	1d77af5e22	Improve message receive time accuracy	2019-06-16 19:39:40 +02:00
Thomas Nordquist	1884f3baae	Fix code style	2019-06-16 19:25:50 +02:00
Thomas Nordquist	0ebb6f4424	Round time intervals	2019-06-16 19:23:24 +02:00
Thomas Nordquist	209899c3b8	Add numeric chart panel	2019-06-16 19:10:37 +02:00
Thomas Nordquist	4ec8cdf0ff	Fix linting on windows	2019-06-15 20:27:30 +02:00
Thomas Nordquist	53326b6de4	Fix linter error	2019-06-15 20:11:35 +02:00
Thomas Nordquist	8c13282a55	Fix axios dependecy	2019-06-15 17:23:14 +02:00
Thomas Nordquist	0e3d94bf06	Remove ffmpreg-concat from build	2019-06-15 16:37:24 +02:00
Thomas Nordquist	af8613096d	Add automatic linting	2019-06-15 15:04:15 +02:00
Thomas Nordquist	92e045297e	Update code formatting	2019-06-15 14:56:57 +02:00
Thomas Nordquist	6176859c7c	Update MaterialUI	2019-06-14 11:58:46 +02:00
Thomas Nordquist	3935b1d614	Fix flaky diagram	2019-06-14 10:41:52 +02:00
greenkeeper[bot]	c9d3e552ae	Update css-loader in group default to the latest version 🚀 (#125 ) * chore(package): update css-loader to version 3.0.0 * chore(package): update lockfile app/yarn.lock	2019-06-12 18:34:49 +02:00
Thomas Nordquist	d62305303a	Refactor	2019-06-06 23:20:20 +02:00
Thomas Nordquist	34c81f7f69	Extract style	2019-06-06 23:16:40 +02:00
Thomas Nordquist	bd1f6b6d82	Resolve error when trying to decode faulty json	2019-06-06 23:16:40 +02:00
Thomas Nordquist	e728a721aa	Prevent unneccessary re-renders	2019-06-06 23:16:40 +02:00
greenkeeper[bot]	15a0c8a5c5	Update file-loader in group default to the latest version 🚀 (#122 ) * fix(package): update file-loader to version 4.0.0 * chore(package): update lockfile app/yarn.lock	2019-06-06 09:36:12 +02:00
Thomas Nordquist	173f662fa7	Fix readme	2019-06-05 13:49:35 +02:00
Thomas Nordquist	15c4dc2df3	Fix binary switches for settings drawer	2019-06-05 13:28:07 +02:00
Thomas Nordquist	b9dcc4a9a8	Fix diagram mouse event handlers	2019-06-05 13:22:12 +02:00
greenkeeper[bot]	f8648b92a1	Update dependencies to enable Greenkeeper 🌴 (#121 ) * chore: add Greenkeeper config file * chore(package): update dependencies * chore(package): update dependencies * docs(readme): add Greenkeeper badge * chore(package): update lockfile app/yarn.lock * chore(package): update lockfile yarn.lock * Fix update specific issues * Fix AceEditor	2019-06-05 11:48:15 +02:00
Thomas Nordquist	4f0b13bdc7	Clean up	2019-06-04 23:03:53 +02:00
Thomas Nordquist	1f9215a19f	Fix ui-tests	2019-06-04 23:00:42 +02:00
Thomas Nordquist	9e15e28147	Add JSON based plots	2019-06-04 21:51:23 +02:00
Thomas Nordquist	09151d14a9	Handle invalid json - fix style	2019-06-04 14:36:28 +02:00
Thomas Nordquist	e66f6d098a	Refactor CodeDiff	2019-06-04 11:32:59 +02:00
Thomas Nordquist	8cc3d416b8	Update axios	2019-06-04 10:48:13 +02:00
Thomas Nordquist	348b72ea69	Fix type error	2019-06-04 10:45:02 +02:00
Thomas Nordquist	050ba81760	Prepare json literal inpsection	2019-05-28 17:49:44 +02:00
Thomas Nordquist	fe16eabb6b	Adapt to newer webdriver api	2019-05-28 11:00:06 +02:00
Thomas Nordquist	3c58164539	Fix heapdump rebuild script	2019-05-28 10:57:57 +02:00
Thomas Nordquist	5a9d6aa4dd	Remove depreacted lockfile	2019-05-28 10:57:35 +02:00
Thomas Nordquist	5c413a9ebb	Update dependencies of web-app	2019-05-28 10:47:17 +02:00
Thomas Nordquist	d0ddec746a	Update dependecies	2019-05-28 10:42:33 +02:00
Thomas Nordquist	6e4754f475	Disable auto-updater for appx/snap/mas builds	2019-05-07 17:44:42 +02:00
Thomas Nordquist	63f89d628e	Destroy view-models when destroying trees	2019-05-07 17:43:31 +02:00
Thomas Nordquist	dfaae34cf5	Add bigger microsoft store icon	2019-05-07 13:16:19 +02:00
Thomas Nordquist	77654c7136	Bump version	2019-05-04 13:05:12 +02:00
Thomas Nordquist	3bfc59d89a	Fix silent error in treenode	2019-05-04 13:03:36 +02:00
Thomas Nordquist	6bf84055d9	Update images in readme	2019-05-03 12:11:03 +02:00
Thomas Nordquist	12d7d3ab64	Fix download location	2019-05-03 12:07:58 +02:00
Thomas Nordquist	b2913c7e0e	Disable auto update for osx only	2019-05-03 12:07:58 +02:00
Thomas Nordquist	352948f212	Fix update notifier url	2019-05-03 12:07:58 +02:00
Thomas Nordquist	9a4dbe92a0	Fix connection health indicator in connection manager	2019-05-03 12:07:58 +02:00
Thomas Nordquist	397b95f9e5	Disable auto update Auto update is buggy https://github.com/electron-userland/electron-builder/issues/3681	2019-05-03 12:07:58 +02:00
Thomas Nordquist	a411d21133	Fix auto update	2019-05-03 12:07:58 +02:00
Thomas Nordquist	4f624cc130	Fix download url	2019-05-03 12:07:58 +02:00
Thomas Nordquist	f10bfafa1d	Delete me	2019-05-03 12:07:58 +02:00
Thomas Nordquist	10e37624a5	Improve demo video	2019-05-03 12:07:58 +02:00
Thomas Nordquist	ebdfac39eb	Fix copy to clipboard layout glitch	2019-05-03 12:07:58 +02:00
Thomas Nordquist	7cc032cdf4	Add afterPack script	2019-05-03 02:07:34 +02:00
Thomas Nordquist	4bc9039386	Fix sed command	2019-05-03 00:59:29 +02:00
Thomas Nordquist	43b997fb18	Add wrapper script to disable sandbox	2019-05-03 00:59:08 +02:00
Thomas Nordquist	6c883aa226	Disable sandbox for snap builds	2019-05-03 00:16:30 +02:00
Thomas Nordquist	20cde3e2a4	Merge branch 'master' of https://github.com/thomasnordquist/MQTT-Explorer	2019-05-01 02:46:06 +02:00
Thomas Nordquist	2a541a80dc	Fix ui tests	2019-04-30 15:54:53 +02:00