Enable vnc and change mqtt host

Error report: b6ef904c-b670-41e8-b586-fab52a31006d

.travis.yml

@@ -1,7 +1,7 @@
 language: node_js
 
 services:
-  - docker
+  - xvfb
 
 cache:
   directories:
@@ -17,13 +17,20 @@ os:
   - linux
   - osx
 
+dist: xenial
+
+services:
+  - docker
+
 install:
-  - npm install
+  - yarn install
+  - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then docker build docker --tag uitest; fi;
 
 script:
-  - npm run build
-  - npm run test
-  - if [[ "$TRAVIS_TAG" != "" ]]; then npm run prepare-release; fi
-  - if [[ "$TRAVIS_OS_NAME" == "linux" ]] && [[ "$TRAVIS_TAG" != "" ]]; then npm run package -- linux; fi
-  - if [[ "$TRAVIS_OS_NAME" == "osx" ]] && [[ "$TRAVIS_TAG" != "" ]]; then npm run package -- mac; fi
-  - if [[ "$TRAVIS_OS_NAME" == "osx" ]] && [[ "$TRAVIS_TAG" != "" ]]; then npm run package -- win; fi
+  - yarn run build
+  - yarn test
+  - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then docker run -e GH_TOKEN=$GH_TOKEN -e GIT_TAG=$TRAVIS_TAG --rm -v `pwd`:/app uitest sh -c "cd app && docker/testMounted.sh"; fi
+  - if [[ "$TRAVIS_TAG" != "" ]]; then yarn run prepare-release; fi
+  - if [[ "$TRAVIS_OS_NAME" == "linux" ]] && [[ "$TRAVIS_TAG" != "" ]]; then yarn run package -- linux; fi
+  - if [[ "$TRAVIS_OS_NAME" == "osx" ]] && [[ "$TRAVIS_TAG" != "" ]]; then yarn run package -- mac; fi
+  - if [[ "$TRAVIS_OS_NAME" == "osx" ]] && [[ "$TRAVIS_TAG" != "" ]]; then yarn run package -- win; fi

Readme.md

@@ -1,21 +1,27 @@
 # MQTT-Explorer
-[![Downloads](https://github-basic-badges.herokuapp.com/release/thomasnordquist/MQTT-Explorer.svg)](https://travis-ci.org/thomasnordquist/MQTT-Explorer/releases)
+[![Downloads](https://img.shields.io/github/release/thomasnordquist/mqtt-explorer.svg)](https://travis-ci.org/thomasnordquist/MQTT-Explorer/releases)
 [![Downloads](https://img.shields.io/github/downloads/thomasnordquist/mqtt-explorer/total.svg)](https://travis-ci.org/thomasnordquist/MQTT-Explorer/releases)
 [![Build Status](https://travis-ci.org/thomasnordquist/MQTT-Explorer.svg?branch=master)](https://travis-ci.org/thomasnordquist/MQTT-Explorer)
 
-### Version 0.0.9
+### Version 0.1.3
 See the whole picture of your message queue.
 The perfect tool to integrate new services, IoT devices in your network.
 This application subscribes to all topics on your MQTT-Server and displays your message queue hierarchy, allowing you to drill-down to the topics that are of interest.
 
 ## Download
-The app is prebuilt for Windows ([portable](https://github.com/thomasnordquist/MQTT-Explorer/releases/download/v0.0.9/MQTT-Explorer-0.0.9.exe), [installer](https://github.com/thomasnordquist/MQTT-Explorer/releases/download/v0.0.9/MQTT-Explorer-Setup-0.0.9.exe)), Linux ([AppImage](https://github.com/thomasnordquist/MQTT-Explorer/releases/download/v0.0.9/MQTT-Explorer-0.0.9-x86_64.AppImage)) and Mac ([dmg](https://github.com/thomasnordquist/MQTT-Explorer/releases/download/v0.0.9/MQTT-Explorer-0.0.9.dmg)).
+The app is prebuilt for Windows ([portable](https://github.com/thomasnordquist/MQTT-Explorer/releases/download/v0.1.3/MQTT-Explorer-0.1.3.exe), [installer](https://github.com/thomasnordquist/MQTT-Explorer/releases/download/v0.1.3/MQTT-Explorer-Setup-0.1.3.exe)), Linux ([AppImage](https://github.com/thomasnordquist/MQTT-Explorer/releases/download/v0.1.3/MQTT-Explorer-0.1.3-x86_64.AppImage)) and Mac ([dmg](https://github.com/thomasnordquist/MQTT-Explorer/releases/download/v0.1.3/MQTT-Explorer-0.1.3.dmg)).
+
+| Platform | | Downloads | 
+|:----------|:-------------:|:------:|
+| ![windows](https://user-images.githubusercontent.com/7721625/51445407-b4172080-1d04-11e9-8c70-d8413d1d6d8b.png) | Windows | [portable](https://github.com/thomasnordquist/MQTT-Explorer/releases/download/v0.1.3/MQTT-Explorer-0.1.3.exe), [installer](https://github.com/thomasnordquist/MQTT-Explorer/releases/download/v0.1.3/MQTT-Explorer-Setup-0.1.3.exe) |
+| ![linux](https://user-images.githubusercontent.com/7721625/51445392-947ff800-1d04-11e9-8c7f-a30efb755651.png) | Linux | [AppImage](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.1.3&#x2F;MQTT-Explorer-0.1.3-x86_64.AppImage)<br>*Run AppImage:<br>Make it executable and double-click it.* | 
+| ![mac](https://user-images.githubusercontent.com/7721625/51445390-921d9e00-1d04-11e9-8339-351469ef20ae.png) | Mac | [dmg](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.1.3&#x2F;MQTT-Explorer-0.1.3.dmg) | 
 
 More architectures and package types: [Downloads](https://github.com/thomasnordquist/MQTT-Explorer/releases)
 
-![screen1](https://user-images.githubusercontent.com/7721625/51441563-41418180-1cd3-11e9-893b-c22f6a6c3695.png)
+![screen1](https://user-images.githubusercontent.com/7721625/51770198-6c6a0d80-20e5-11e9-94d5-a0174634253c.png)
 
-![screen2](https://user-images.githubusercontent.com/7721625/51441470-59fd6780-1cd2-11e9-925f-bc491027300c.png)
+![screen2](https://user-images.githubusercontent.com/7721625/51770345-c7036980-20e5-11e9-94dc-5d6fa9dbf86b.png)
 
 
 ## Develop
@@ -27,5 +33,31 @@ Start with `npm run start`
 
 The `app` directory contains all the rendering logic, the `backend` directory currently contains the models, tests, connection management.
 
+## Telemetry
+The App sends telemetry and error reports, this enables me to quickly react on bugs/errors I produced.
+This is a difficutlt task since this App runs on three different operating systems and architectures.
+
+It basically sends: app version, processor architecture, operating system, used memory, user interactions and error stacks.
+
+This greatly helps to improve the software quality and reliability.
+No data about you or your data is send or stored.
+Even thoug the data is purely technical, an option to disable telemetry is planned. [#52](https://github.com/thomasnordquist/MQTT-Explorer/issues/52)
+
+Example telemetry:
+```javascript
+{ system: { arch: 'x64', platform: 'darwin' },
+  appVersion: '0.0.7',
+  events: { HELLO_EVENT: [ 1547714886134 ] },
+  now: 1547714886135,
+  transactionId: '1767d251-f492-4f2c-aa62-88add3acc26b' }
+{ errors:
+   [ { time: 1547714887921,
+       message: 'He\'s dead Jim!',
+       stack:
+        'Error: He\'s dead Jim!\n    at ./src/tracking.ts.exports.default (./mqtt-explorer/app/build/bundle.js:142765:11)\n    at new Promise (<anonymous>)\n    at Object../src/tracking.ts (./mqtt-explorer/app/build/bundle.js:142764:1)\n    at __webpack_require__ (./mqtt-explorer/app/build/bundle.js:20:30)\n    at Object../src/index.tsx (./mqtt-explorer/app/build/bundle.js:142618:1)\n    at __webpack_require__ (./mqtt-explorer/app/build/bundle.js:20:30)\n    at ../backend/node_modules/charenc/charenc.js.charenc.utf8.stringToBytes (./mqtt-explorer/app/build/bundle.js:84:18)\n    at ./mqtt-explorer/app/build/bundle.js:87:10' } ],
+  now: 1547714887921,
+  transactionId: '53bf9aac-e695-40cc-9a81-b1cf3398843d' }
+```
+
 ## License
 Not yet decided which license exactly, but the basic idea is: "You may do whatever you want with this tool, except sell it."

Readme.tpl.md

@@ -1,6 +1,6 @@
 # MQTT-Explorer
-[![Downloads](https://github-basic-badges.herokuapp.com/release/thomasnordquist/MQTT-Explorer.svg)](https://travis-ci.org/thomasnordquist/MQTT-Explorer/releases)
-[![Downloads](https://github-basic-badges.herokuapp.com/downloads/thomasnordquist/MQTT-Explorer/total.svg)](https://travis-ci.org/thomasnordquist/MQTT-Explorer/releases)
+[![Downloads](https://img.shields.io/github/release/thomasnordquist/mqtt-explorer.svg)](https://travis-ci.org/thomasnordquist/MQTT-Explorer/releases)
+[![Downloads](https://img.shields.io/github/downloads/thomasnordquist/mqtt-explorer/total.svg)](https://travis-ci.org/thomasnordquist/MQTT-Explorer/releases)
 [![Build Status](https://travis-ci.org/thomasnordquist/MQTT-Explorer.svg?branch=master)](https://travis-ci.org/thomasnordquist/MQTT-Explorer)
 
 ### Version {{ version }}
@@ -11,9 +11,18 @@ This application subscribes to all topics on your MQTT-Server and displays your
 ## Download
 The app is prebuilt for Windows ({{windowsTargets}}), Linux ({{linuxTargets}}) and Mac ({{macTargets}}).
 
+| Platform | | Downloads | 
+|:----------|:-------------:|:------:|
+| ![windows](https://user-images.githubusercontent.com/7721625/51445407-b4172080-1d04-11e9-8c70-d8413d1d6d8b.png) | Windows | {{windowsTargets}} |
+| ![linux](https://user-images.githubusercontent.com/7721625/51445392-947ff800-1d04-11e9-8c7f-a30efb755651.png) | Linux | {{linuxTargets}}<br>*Run AppImage:<br>Make it executable and double-click it.* | 
+| ![mac](https://user-images.githubusercontent.com/7721625/51445390-921d9e00-1d04-11e9-8339-351469ef20ae.png) | Mac | {{macTargets}} | 
+
 More architectures and package types: [Downloads](https://github.com/thomasnordquist/MQTT-Explorer/releases)
 
-![screen2](https://user-images.githubusercontent.com/7721625/51109225-dbe22200-17f4-11e9-8f6b-c6a27c07c90e.png)
+![screen1](https://user-images.githubusercontent.com/7721625/51770198-6c6a0d80-20e5-11e9-94d5-a0174634253c.png)
+
+![screen2](https://user-images.githubusercontent.com/7721625/51770345-c7036980-20e5-11e9-94dc-5d6fa9dbf86b.png)
+
 
 ## Develop
 PRs and issues are welcome
@@ -24,5 +33,31 @@ Start with `npm run start`
 
 The `app` directory contains all the rendering logic, the `backend` directory currently contains the models, tests, connection management.
 
+## Telemetry
+The App sends telemetry and error reports, this enables me to quickly react on bugs/errors I produced.
+This is a difficutlt task since this App runs on three different operating systems and architectures.
+
+It basically sends: app version, processor architecture, operating system, used memory, user interactions and error stacks.
+
+This greatly helps to improve the software quality and reliability.
+No data about you or your data is send or stored.
+Even thoug the data is purely technical, an option to disable telemetry is planned. [#52](https://github.com/thomasnordquist/MQTT-Explorer/issues/52)
+
+Example telemetry:
+```javascript
+{ system: { arch: 'x64', platform: 'darwin' },
+  appVersion: '0.0.7',
+  events: { HELLO_EVENT: [ 1547714886134 ] },
+  now: 1547714886135,
+  transactionId: '1767d251-f492-4f2c-aa62-88add3acc26b' }
+{ errors:
+   [ { time: 1547714887921,
+       message: 'He\'s dead Jim!',
+       stack:
+        'Error: He\'s dead Jim!\n    at ./src/tracking.ts.exports.default (./mqtt-explorer/app/build/bundle.js:142765:11)\n    at new Promise (<anonymous>)\n    at Object../src/tracking.ts (./mqtt-explorer/app/build/bundle.js:142764:1)\n    at __webpack_require__ (./mqtt-explorer/app/build/bundle.js:20:30)\n    at Object../src/index.tsx (./mqtt-explorer/app/build/bundle.js:142618:1)\n    at __webpack_require__ (./mqtt-explorer/app/build/bundle.js:20:30)\n    at ../backend/node_modules/charenc/charenc.js.charenc.utf8.stringToBytes (./mqtt-explorer/app/build/bundle.js:84:18)\n    at ./mqtt-explorer/app/build/bundle.js:87:10' } ],
+  now: 1547714887921,
+  transactionId: '53bf9aac-e695-40cc-9a81-b1cf3398843d' }
+```
+
 ## License
 Not yet decided which license exactly, but the basic idea is: "You may do whatever you want with this tool, except sell it."

_config.yml

@@ -0,0 +1 @@
+theme: jekyll-theme-architect

app/index.html

@@ -3,18 +3,19 @@
     <head>
         <meta charset="UTF-8" />
         <title>MQTT-Explorer</title>
-        <script src="./build/bugtracking.bundle.js"></script>
+        <script src="./bugtracking.bundle.js"></script>
 
         <style>
           body, html {
             margin: 0;
             padding: 0;
           }
+
           @keyframes example {
-            0%   {background-color: inherit;}
+            0%   {background-color: none;}
             25%  {background-color: #3f51b5;}
             50%  {background-color: #3f51b5;}
-            100% {background-color: inherit;}
+            100% {background-color: none;}
           }
 
           ::-webkit-scrollbar {
@@ -48,7 +49,7 @@
             margin: 37vh auto 0 auto;
             height: 25vh;
             width: 25vh;
-            background-image:url('./rings.svg');
+            /* background-image:url('../rings.svg'); */
             background-size: cover;
           }
           #splash2 {
@@ -58,20 +59,76 @@
             0%   {opacity: 1;}
             100% {opacity: 0;}
           }
+
+          .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;
+          }
+
+          .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:hover {
+              border-top: 5px solid rgba(0, 0, 0, 0.5);
+              border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+          }
+
+          .Resizer.vertical {
+              width: 11px;
+              margin: 0 -5px;
+              border-left: 5px solid rgba(255, 255, 255, 0);
+              border-right: 5px solid rgba(255, 255, 255, 0);
+              cursor: col-resize;
+          }
+
+          .Resizer.vertical:hover {
+              border-left: 5px solid rgba(255, 255, 255, 0.5);
+              border-right: 5px solid rgba(255, 255, 255, 0.5);
+          }
+          .Resizer.disabled {
+            cursor: not-allowed;
+          }
+          .Resizer.disabled:hover {
+            border-color: transparent;
+          }
+
         </style>
         <script src="http://localhost:35729/livereload.js"></script>
-
     </head>
     <body>
         <div id="splash"><div id="splash1"></div></div>
         <div id="app" style="font:-webkit-control"></div>
         <script>
-          function onLoad() {
-            var script = document.createElement("script");
-            script.src = "./build/app.bundle.js"
-            document.head.appendChild(script);
-          }
-          document.addEventListener('DOMContentLoaded', onLoad(), false);
-        </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>

app/package.json

@@ -9,44 +9,49 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@material-ui/core": "^3.9.0",
     "@material-ui/icons": "^3.0.1",
-    "@material-ui/lab": "^3.0.0-alpha.27",
+    "@material-ui/styles": "^3.0.0-alpha.8",
+    "@types/node": "^10.12.18",
     "@types/react": "^16.7.18",
     "@types/react-dom": "^16.0.11",
     "@types/react-redux": "^6.0.12",
-    "css-loader": "^2.1.0",
-    "electron-nucleus": "^1.11.0",
-    "electron-telemetry": "git+https://github.com/thomasnordquist/electron-telemetry.git",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
-    "react-redux": "^6.0.0",
-    "react-vis": "^1.11.6",
-    "redux": "^4.0.1",
-    "style-loader": "^0.23.1",
-    "webpack-bundle-analyzer": "^3.0.3",
-    "webpack-livereload-plugin": "^2.2.0"
-  },
-  "dependencies": {
-    "@material-ui/core": "^3.7.1",
-    "@types/node": "^10.12.18",
     "@types/react-resize-detector": "^3.1.0",
+    "@types/react-split-pane": "^0.1.67",
     "@types/sha1": "^1.1.1",
     "@types/socket.io-client": "^1.4.32",
     "@types/vis": "^4.21.9",
     "awesome-typescript-loader": "^5.2.1",
+    "compare-versions": "^3.4.0",
     "copy-text-to-clipboard": "^1.0.4",
+    "css-loader": "^2.1.0",
+    "electron-nucleus": "^1.11.0",
+    "electron-telemetry": "git+https://github.com/thomasnordquist/electron-telemetry.git#dist",
+    "html-webpack-plugin": "^4.0.0-beta.5",
     "jquery": "^3.3.1",
+    "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
     "moving-average": "^1.0.0",
+    "number-abbreviate": "^2.0.0",
+    "react": "^16.8.0-alpha.1",
     "react-ace": "^6.3.2",
+    "react-dom": "^16.7.0",
     "react-json-view": "^1.19.1",
+    "react-redux": "^6.0.0",
     "react-resize-detector": "^3.4.0",
+    "react-split-pane": "^0.1.85",
+    "react-vis": "^1.11.6",
+    "redux": "^4.0.1",
+    "redux-batched-actions": "^0.4.1",
     "sha1": "^1.1.1",
     "socket.io-client": "^2.2.0",
     "source-map-loader": "^0.2.4",
+    "style-loader": "^0.23.1",
     "typescript": "^3.2.2",
     "webpack": "^4.28.2",
+    "webpack-bundle-analyzer": "^3.0.3",
     "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.14"
+    "webpack-dev-server": "^3.1.14",
+    "webpack-livereload-plugin": "^2.2.0"
   }
 }

app/src/App.tsx

@@ -6,93 +6,63 @@ import { Theme, withStyles } from '@material-ui/core/styles'
 import { AppState } from './reducers'
 import Connection from './components/ConnectionSetup/Connection'
 import CssBaseline from '@material-ui/core/CssBaseline'
-import Settings from './components/Settings'
+const Settings = React.lazy(() => import('./components/Settings'))
 import Sidebar from './components/Sidebar/Sidebar'
 import TitleBar from './components/TitleBar'
 import Tree from './components/Tree/Tree'
 import UpdateNotifier from './UpdateNotifier'
 import { connect } from 'react-redux'
 import ErrorBoundary from './ErrorBoundary'
+import { default as SplitPane } from 'react-split-pane'
 
 interface Props {
   name: string
   connectionId: string
-  theme: Theme
+  classes: any
   settingsVisible: boolean
 }
 
-class App extends React.Component<Props, {}> {
+class App extends React.PureComponent<Props, {}> {
   constructor(props: any) {
     super(props)
     this.state = { }
   }
 
-  private getStyles(): {[s: string]: React.CSSProperties} {
-    const { theme } = this.props
-    const drawerWidth = 300
-    return {
-      left: {
-        backgroundColor: theme.palette.background.default,
-        color: theme.palette.text.primary,
-        height: 'calc(100vh - 64px)',
-        float: 'left',
-        overflowY: 'scroll',
-        overflowX: 'hidden',
-        display: 'block',
-        width: '60vw',
-      },
-      right: {
-        height: 'calc(100vh - 64px)',
-        color: theme.palette.text.primary,
-        float: 'left',
-        width: '40vw',
-        overflowY: 'scroll',
-        overflowX: 'hidden',
-        display: 'block',
-      },
-      centerContent: {
-        width: '100vw',
-        overflow: 'hidden',
-      },
-      content: {
-        backgroundColor: theme.palette.background.default,
-        transition: theme.transitions.create('margin', {
-          easing: theme.transitions.easing.sharp,
-          duration: theme.transitions.duration.leavingScreen,
-        }),
-        marginLeft: 0,
-      },
-      contentShift: {
-        padding: 0,
-        backgroundColor: theme.palette.background.default,
-        transition: theme.transitions.create('margin', {
-          easing: theme.transitions.easing.easeOut,
-          duration: theme.transitions.duration.enteringScreen,
-        }),
-        marginLeft: drawerWidth,
-      },
-    }
-  }
-
   public render() {
     const { settingsVisible } = this.props
-    const { content, contentShift, centerContent } = this.getStyles()
+    const { content, contentShift, centerContent, paneDefaults, heightProperty } = this.props.classes
 
     return (
-      <div style={centerContent}>
+      <div className={centerContent}>
         <CssBaseline />
         <ErrorBoundary>
-          <Settings />
-          <div style={settingsVisible ? contentShift : content}>
-              <TitleBar />
-              <div style={centerContent}>
-                <div style={this.getStyles().left}>
-                  <Tree connectionId={this.props.connectionId} />
+          <React.Suspense fallback={<div>Loading...</div>}>
+            <Settings />
+          </React.Suspense>
+          <div className={centerContent}>
+            <div className={`${settingsVisible ? contentShift : content}`}>
+                <TitleBar />
+            </div>
+            <div>
+              <SplitPane
+                step={48}
+                primary="second"
+                className={`${settingsVisible ? contentShift : content} ${heightProperty}`}
+                split="vertical"
+                minSize={250}
+                defaultSize={500}
+                allowResize={true}
+                style={{ position: 'relative' }}
+                pane1Style={{ overflow: 'hidden' }}
+              >
+                <div className={paneDefaults}>
+                  <Tree />
                 </div>
-                <div style={this.getStyles().right}>
+                <div className={paneDefaults}>
                   <Sidebar connectionId={this.props.connectionId} />
                 </div>
-              </div>
+              </SplitPane>
+            </div>
           </div>
           <UpdateNotifier />
           <Connection />
@@ -104,9 +74,51 @@ class App extends React.Component<Props, {}> {
 
 const mapStateToProps = (state: AppState) => {
   return {
-    settingsVisible: state.tooBigReducer.settings.visible,
-    connectionId: state.tooBigReducer.connectionId,
+    settingsVisible: state.settings.visible,
+    connectionId: state.connection.connectionId,
   }
 }
 
-export default withStyles({}, { withTheme: true })(connect(mapStateToProps)(App))
+const styles = (theme: Theme) => {
+  const drawerWidth = 300
+  return {
+    heightProperty: {
+      height: '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)',
+    },
+    centerContent: {
+      width: '100vw',
+      overflow: 'hidden' as 'hidden',
+    },
+    content: {
+      width: '100vw',
+      overflowX: 'hidden' as 'hidden',
+      backgroundColor: theme.palette.background.default,
+      transition: theme.transitions.create('transform', {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen,
+      }),
+      transform: 'translateX(0px)',
+    },
+    contentShift: {
+      overflowX: 'hidden' as 'hidden',
+      width: '100vw',
+      padding: 0,
+      backgroundColor: theme.palette.background.default,
+      transition: theme.transitions.create('transform', {
+        easing: theme.transitions.easing.easeOut,
+        duration: theme.transitions.duration.enteringScreen,
+      }),
+      transform: `translateX(${drawerWidth}px)`,
+    },
+  }
+}
+
+export default withStyles(styles)(connect(mapStateToProps)(App))

app/src/TopicViewModel.ts

@@ -0,0 +1,19 @@
+import { EventDispatcher } from '../../events'
+
+export class TopicViewModel {
+  private selected: boolean
+  public change = new EventDispatcher<void, TopicViewModel>(this)
+
+  public constructor() {
+    this.selected = false
+  }
+
+  public isSelected() {
+    return this.selected
+  }
+
+  public setSelected(selected: boolean) {
+    this.selected = selected
+    this.change.dispatch()
+  }
+}

app/src/UpdateNotifier.tsx

@@ -10,16 +10,18 @@ import {
    Typography,
 } from '@material-ui/core'
 import { Theme, withStyles } from '@material-ui/core/styles'
-import { UpdateInfo, checkForUpdates, rendererEvents, updateAvailable } from '../../events'
-import { green, red } from '@material-ui/core/colors'
+import { green } from '@material-ui/core/colors'
 
 import { AppState } from './reducers'
 import Close from '@material-ui/icons/Close'
 import CloudDownload from '@material-ui/icons/CloudDownload'
-import { UpdateFileInfo } from 'builder-util-runtime'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { updateNotifierActions } from './actions'
+import axios from 'axios'
+import * as compareVersions from 'compare-versions'
+import * as electron from 'electron'
+import * as os from 'os'
 
 interface Props {
   showUpdateNotification: boolean
@@ -28,34 +30,55 @@ interface Props {
   actions: any
 }
 
-class UpdateNotifier extends React.Component<Props, {}> {
-  private updateInfo?: UpdateInfo
+interface GithubRelease {
+  url: string,
+  assets?: GithubAsset[]
+  published_at: string // "2019-01-25T20:14:39Z"
+  body_html: string
+  body: string
+  body_text: string
+  tag_name: string
+}
+
+interface GithubAsset {
+  id: number
+  node_id: string
+  url: string
+  name: string
+  label: string
+}
+
+interface State {
+  newerVersions: GithubRelease[]
+}
+
+class UpdateNotifier extends React.Component<Props, State> {
   constructor(props: any) {
     super(props)
-    this.state = {
-      selectedNode: undefined,
-    }
+    this.state = { newerVersions: [] }
+
+    // window.compare = compareVersions
+    const ownVersion = electron.remote.app.getVersion()
+    this.fetchReleases().then((releases) => {
+      const newerVersions = releases
+        .filter(release => compareVersions(release.tag_name, ownVersion) > 0)
+        .sort((a, b) => compareVersions(b.tag_name, a.tag_name))
+
+      if (newerVersions.length > 0) {
+        this.setState({ newerVersions })
+        this.props.actions.showUpdateNotification(true)
+      }
+    })
   }
 
-  public componentDidMount() {
-    rendererEvents.emit(checkForUpdates, undefined)
-    rendererEvents.subscribe(updateAvailable, this.handleUpdate)
-  }
-
-  private fixUrl(url: string, version: string) {
-    if (!/^http/.test(url)) {
-      return `https://github.com/thomasnordquist/MQTT-Explorer/releases/download/v${version}/${url}`
-    }
-
-    return url
-  }
-  public componentWillUnmount() {
-    rendererEvents.unsubscribeAll(updateAvailable)
-  }
-
-  private handleUpdate = (updateInfo: UpdateInfo) => {
-    this.updateInfo = updateInfo
-    this.props.actions.showUpdateNotification(true)
+  private fetchReleases(): Promise<GithubRelease[]> {
+    return axios.get('https://api.github.com/repos/thomasnordquist/mqtt-explorer/releases', {
+      headers: {
+        accept: 'application/vnd.github.v3.full+json',
+      },
+    }).then((res) => {
+      return res.data
+    })
   }
 
   private onCloseNotification = (event: React.SyntheticEvent<any>, reason: string) => {
@@ -92,17 +115,18 @@ class UpdateNotifier extends React.Component<Props, {}> {
       vertical: 'top',
       horizontal: 'right',
     }
+    console.log(this.state.newerVersions)
 
     return (
       <Snackbar
         anchorOrigin={snackbarAnchor}
         open={this.props.showUpdateNotification}
-        autoHideDuration={7000}
+        autoHideDuration={12000}
         onClose={this.onCloseNotification}
       >
         <SnackbarContent
           className={this.props.classes.success}
-          message="Update available"
+          message={`${this.state.newerVersions.length} Update(s) available`}
           action={this.notificationActions()}
         />
       </Snackbar>
@@ -112,7 +136,7 @@ class UpdateNotifier extends React.Component<Props, {}> {
   private notificationActions() {
     return [(
         <Button key="undo" size="small" onClick={this.showDetails}>
-          Download
+          Details
         </Button>
       ), (
         <IconButton
@@ -129,10 +153,14 @@ class UpdateNotifier extends React.Component<Props, {}> {
   }
 
   private renderUpdateDetails() {
-    if (!this.updateInfo) {
+    const latestUpdate = this.state.newerVersions[0]
+    if (!latestUpdate) {
       return null
     }
-    const releaseNotes = (this.updateInfo.releaseNotes as string) || ''
+    const releaseNotes = this.state.newerVersions
+      .map(release => `<p><h3>${release.tag_name}</h3><p/><p>${release.body_html}</p>`)
+      .join('<hr />')
+
     return (
       <Modal
         open={this.props.showUpdateDetails}
@@ -140,32 +168,58 @@ class UpdateNotifier extends React.Component<Props, {}> {
         onClose={this.hideDetails}
       >
         <Paper className={this.props.classes.root}>
-          <Typography variant="h6" className={this.props.classes.title}>Version {this.updateInfo.version}</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(this.updateInfo)}
+          {this.renderDownloads()}
+          <Button
+            className={this.props.classes.download}
+            onClick={this.openGithub}
+          >
+            Github Page
+          </Button>
           <Button className={this.props.classes.closeButton} color="secondary" onClick={this.hideDetails}>Close</Button>
         </Paper>
       </Modal>
     )
   }
 
-  private urlToFilename(url: string) {
-    const parts = url.split('/')
-
-    return parts[parts.length - 1]
+  private openGithub = () => {
+    this.openUrl('https://github.com/thomasnordquist/MQTT-Explorer')
   }
 
-  private renderDownloads(updateInfo: UpdateInfo) {
-    console.log(updateInfo)
-    return updateInfo.files
-      .map((file: UpdateFileInfo, index: number) => (
-        <div key={index}>
+  private openUrl = (url: string) => {
+    electron.shell.openExternal(url)
+  }
+
+  private assetForCurrentPlatform(asset: GithubAsset) {
+    let regex: RegExp
+    if (os.platform() === 'darwin') {
+      regex = /\.dmg$/
+    } else if (os.platform() === 'darwin') {
+      regex = /\.exe$/
+    } else {
+      regex = /\.AppImage$/
+    }
+
+    return regex.test(asset.name)
+  }
+
+  private renderDownloads() {
+    const latestUpdate = this.state.newerVersions[0]
+    if (!latestUpdate || !latestUpdate.assets) {
+      return null
+    }
+
+    return latestUpdate.assets
+      .filter(this.assetForCurrentPlatform)
+      .map(asset => (
+        <div>
           <Button
             className={this.props.classes.download}
-            href={this.fixUrl(file.url, updateInfo.version)}
+            onClick={() => this.openUrl(asset.url)}
           >
-            <IconButton><CloudDownload /></IconButton>{this.urlToFilename(file.url)}
+            <CloudDownload />&nbsp;{asset.name}
           </Button>
         </div>
       ))
@@ -223,4 +277,4 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default withStyles(styles, { withTheme: true })(connect(mapStateToProps, mapDispatchToProps)(UpdateNotifier))
+export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(UpdateNotifier))

app/src/actions/Connection.ts

@@ -1,15 +1,25 @@
-import { ActionTypes, NodeOrder, CustomAction, AppState } from '../reducers'
+import { ActionTypes, Action, ConnectionState } from '../reducers/Connection'
 import { MqttOptions } from '../../../backend/src/DataSource'
 import { Dispatch } from 'redux'
 import { rendererEvents, addMqttConnectionEvent, makeConnectionStateEvent, removeConnection } from '../../../events'
+import { AppState } from '../reducers'
+import * as q from '../../../backend/src/Model'
+import { showTree } from './Tree'
+import * as url from 'url'
+import { TopicViewModel } from '../TopicViewModel'
 
 export const connect = (options: MqttOptions, connectionId: string) => (dispatch: Dispatch<any>, getState: () => AppState) => {
   dispatch(connecting(connectionId))
   rendererEvents.emit(addMqttConnectionEvent, { options, id: connectionId })
   const event = makeConnectionStateEvent(connectionId)
+  const host = url.parse(options.url).hostname
+
   rendererEvents.subscribe(event, (dataSourceState) => {
     if (dataSourceState.connected) {
-      dispatch(connected())
+      const tree = new q.Tree<TopicViewModel>()
+      tree.updateWithConnection(rendererEvents, connectionId)
+      dispatch(connected(tree, host!))
+      dispatch(showTree(tree))
     } else if (dataSourceState.error) {
       dispatch(showError(dataSourceState.error))
       dispatch(disconnect())
@@ -17,24 +27,29 @@ export const connect = (options: MqttOptions, connectionId: string) => (dispatch
   })
 }
 
-export const connected: () => CustomAction = ()  => ({
-  type: ActionTypes.connected,
+export const connected: (tree: q.Tree<TopicViewModel>, host: string) => Action = (tree: q.Tree<TopicViewModel>, host: string)  => ({
+  tree,
+  host,
+  type: ActionTypes.CONNECTION_SET_CONNECTED,
 })
 
-export const connecting: (connectionId: string) => CustomAction = (connectionId: string)  => ({
+export const connecting: (connectionId: string) => Action = (connectionId: string)  => ({
   connectionId,
-  type: ActionTypes.connecting,
+  type: ActionTypes.CONNECTION_SET_CONNECTING,
 })
 
 export const showError = (error?: string) => ({
   error,
-  type: ActionTypes.showError,
+  type: ActionTypes.CONNECTION_SET_SHOW_ERROR,
 })
 
-export const disconnect = () => (dispatch: Dispatch<CustomAction>, getState: () => AppState)  => {
-  rendererEvents.emit(removeConnection, getState().tooBigReducer.connectionId)
+export const disconnect = () => (dispatch: Dispatch<any>, getState: () => AppState)  => {
+  const { connectionId, tree } = getState().connection
+  rendererEvents.emit(removeConnection, connectionId)
+  tree && tree.stopUpdating()
 
+  dispatch(showTree(undefined))
   dispatch({
-    type: ActionTypes.disconnect,
+    type: ActionTypes.CONNECTION_SET_DISCONNECTED,
   })
 }

app/src/actions/Settings.ts

@@ -1,21 +1,89 @@
-import { ActionTypes, NodeOrder, CustomAction } from '../reducers'
+import { Action, ActionTypes, TopicOrder } from '../reducers/Settings'
+import { ActionTypes as TreeActionTypes } from '../reducers/Tree'
+import { Dispatch } from 'redux'
+import { showTree } from './Tree'
+import { AppState } from '../reducers'
+import * as q from '../../../backend/src/Model'
+import { batchActions } from 'redux-batched-actions'
+import { autoExpandLimitSet } from '../components/Settings'
+import { TopicViewModel } from '../TopicViewModel'
 
-export const setAutoExpandLimit = (autoExpandLimit: number = 0): CustomAction => {
+export const setAutoExpandLimit = (autoExpandLimit: number = 0): Action => {
   return {
     autoExpandLimit,
-    type: ActionTypes.setAutoExpandLimit,
+    type: ActionTypes.SETTINGS_SET_AUTO_EXPAND_LIMIT,
   }
 }
 
-export const toggleSettingsVisibility = (): CustomAction => {
+export const toggleSettingsVisibility = (): Action => {
   return {
-    type: ActionTypes.toggleSettingsVisibility,
+    type: ActionTypes.SETTINGS_TOGGLE_VISIBILITY,
   }
 }
 
-export const setNodeOrder = (nodeOrder: NodeOrder = NodeOrder.none): CustomAction => {
+export const setTopicOrder = (topicOrder: TopicOrder = TopicOrder.none): Action => {
   return {
-    nodeOrder,
-    type: ActionTypes.setNodeOrder,
+    topicOrder,
+    type: ActionTypes.SETTINGS_SET_TOPIC_ORDER,
   }
 }
+
+export const filterTopics = (filterStr: string) => (dispatch: Dispatch<any>, getState: () => AppState)  => {
+  const { tree } = getState().connection
+
+  dispatch({
+    topicFilter: filterStr,
+    type: ActionTypes.SETTINGS_FILTER_TOPICS,
+  })
+
+  if (!filterStr || !tree) {
+    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
+    if (topicMatches) {
+      return true
+    }
+
+    const messageMatches = (node.message && typeof node.message.value === 'string' && node.message.value.toLowerCase().indexOf(filterStr) !== -1)
+    return Boolean(messageMatches)
+  }
+
+  const resultTree = tree.childTopics()
+    .filter(nodeFilter)
+    .map((node: q.TreeNode<TopicViewModel>) => {
+      const clone = node.unconnectedClone()
+      q.TreeNodeFactory.insertNodeAtPosition(node.path().split('/'), clone)
+      return clone.firstNode()
+    })
+    .reduce((a: q.TreeNode<TopicViewModel>, b: q.TreeNode<TopicViewModel>) => {
+      a.updateWithNode(b)
+      return a
+    }, new q.Tree<TopicViewModel>())
+
+  const nextTree: q.Tree<TopicViewModel> = resultTree as q.Tree<TopicViewModel>
+  if (tree.updateSource && tree.connectionId) {
+    nextTree.updateWithConnection(tree.updateSource, tree.connectionId, nodeFilter)
+  }
+
+  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 count = tree.childTopicCount()
+  const calculatedLimit = Math.max(7 - Math.log(count), 0) * 2
+
+  return closestExistingLimit(calculatedLimit)
+}

app/src/actions/Sidebar.ts

@@ -3,7 +3,9 @@ import { AppState } from '../reducers'
 import { makePublishEvent, rendererEvents } from '../../../events'
 
 export const clearRetainedTopic = () => (dispatch: Dispatch<Action>, getState: () => AppState)  => {
-  const { selectedTopic, connectionId } = getState().tooBigReducer
+  const { selectedTopic } = getState().tree
+  const { connectionId } = getState().connection
+
   if (!selectedTopic || !connectionId) {
     return
   }

app/src/actions/Tree.ts

@@ -1,18 +1,59 @@
-import { ActionTypes, CustomAction, AppState } from '../reducers'
+import { AppState } from '../reducers'
+import { ActionTypes } from '../reducers/Tree'
 import * as q from '../../../backend/src/Model'
-import { Dispatch } from 'redux'
+import { Dispatch, AnyAction } from 'redux'
 import { setTopic } from './Publish'
+import { TopicViewModel } from '../TopicViewModel'
+import { batchActions } from 'redux-batched-actions'
+const debounce = require('lodash.debounce')
 
-export const selectTopic = (topic: q.TreeNode) => (dispatch: Dispatch<any>, getState: () => AppState)  => {
-  const { selectedTopic } = getState().tooBigReducer
+export const selectTopic = (topic: q.TreeNode<TopicViewModel>) => (dispatch: Dispatch<any>, getState: () => AppState)  => {
+  debouncedSelectTopic(topic, dispatch, getState)
+}
 
-  // Update publish topic
-  if (selectedTopic && (selectedTopic.path() === getState().publish.topic || !getState().publish.topic)) {
-    dispatch(setTopic(topic.path()))
+const debouncedSelectTopic = debounce((topic: q.TreeNode<TopicViewModel>, dispatch: Dispatch<any>, getState: () => AppState)  => {
+  const { selectedTopic } = getState().tree
+  if (selectedTopic === topic) {
+    return
   }
 
-  dispatch({
+  // Update publish topic
+  let setTopicDispatch: any | undefined
+  if (selectedTopic && (selectedTopic.path() === getState().publish.topic || !getState().publish.topic)) {
+    setTopicDispatch = setTopic(topic.path())
+  }
+
+  if (selectedTopic && selectedTopic.viewModel) {
+    selectedTopic.viewModel.setSelected(false)
+  }
+
+  if (topic.viewModel) {
+    topic.viewModel.setSelected(true)
+  }
+
+  const selectTreeTopicDispatch = {
     selectedTopic: topic,
-    type: ActionTypes.selectTopic,
+    type: ActionTypes.TREE_SELECT_TOPIC,
+  }
+
+  if (setTopicDispatch) {
+    dispatch(batchActions([selectTreeTopicDispatch, setTopicDispatch]))
+  } else {
+    dispatch(selectTreeTopicDispatch)
+  }
+}, 70)
+
+export const showTree = (tree?: q.Tree<TopicViewModel>) => (dispatch: Dispatch<any>, getState: () => AppState): AnyAction  => {
+  const visibleTree = getState().tree.tree
+  const connectionTree = getState().connection.tree
+
+  // Stop updates of old tree
+  if (visibleTree !== connectionTree && visibleTree) {
+    visibleTree.stopUpdating()
+  }
+
+  return dispatch({
+    tree,
+    type: ActionTypes.TREE_SHOW_TREE,
   })
 }

app/src/bugtracking.ts

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

app/src/components/BrokerStatistics.tsx

@@ -0,0 +1,132 @@
+import * as React from 'react'
+import * as q from '../../../backend/src/Model'
+
+import { AppState } from '../reducers'
+import { Typography } from '@material-ui/core'
+import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
+
+import { connect } from 'react-redux'
+import { TopicViewModel } from '../TopicViewModel'
+const abbreviate = require('number-abbreviate')
+
+interface Stats {
+  topic: string
+  title: string
+}
+
+const styles: StyleRulesCallback = theme => ({
+  flex: {
+    display: 'flex',
+    width: '100%',
+  },
+  container: {
+    width: '100%',
+    height: '224px',
+    backgroundColor: 'rebeccapurple',
+    marginBottom: 0,
+    marginTop: 'auto',
+    padding: '8px',
+  },
+})
+
+interface Props {
+  classes: any
+  tree?: q.Tree<TopicViewModel>
+}
+
+class BrokerStatistics extends React.Component<Props, {}> {
+  constructor(props: any) {
+    super(props)
+    this.state = {}
+  }
+
+  public render() {
+    const { tree, classes } = this.props
+    if (!tree || !tree.findNode('$SYS')) {
+      return null
+    }
+
+    const stats: any = {
+      broker: {
+        topic: '$SYS/broker/version',
+        title: 'Broker',
+      },
+      clients: {
+        topic: '$SYS/broker/clients/total',
+        title: 'Clients',
+      },
+      subscriptions: {
+        topic: '$SYS/broker/subscriptions/count',
+        title: 'Subscriptions',
+      },
+      received: {
+        topic: '$SYS/broker/messages/received',
+        title: 'Received',
+      },
+      sent: {
+        topic: '$SYS/broker/messages/sent',
+        title: 'Sent',
+      },
+      received5m: {
+        topic: '$SYS/broker/load/messages/received/5min',
+        title: 'Received last 5min',
+      },
+      sent5m: {
+        topic: '$SYS/broker/load/messages/sent/5min',
+        title: 'Sent 5m',
+      },
+      heap: {
+        topic: '$SYS/broker/heap/current',
+        title: 'Memory',
+      },
+      heapMax: {
+        topic: '$SYS/broker/heap/maximum',
+        title: 'Memory (max)',
+      },
+    }
+
+    return (
+      <div className={classes.container}>
+        {this.renderStat(tree, stats.broker)}
+        {this.renderPair(tree, stats.sent, stats.received)}
+        {this.renderPair(tree, stats.clients, stats.subscriptions)}
+        {this.renderPair(tree, stats.sent5m, stats.received5m)}
+        {this.renderPair(tree, stats.heap, stats.heapMax)}
+      </div>
+    )
+  }
+
+  private renderPair(tree: q.Tree<TopicViewModel>, a: Stats, b: Stats) {
+    return (
+      <div className={this.props.classes.flex}>
+        <div style={{ flex: 1 }}>{this.renderStat(tree, a)}</div>
+        <div style={{ flex: 1 }}>{this.renderStat(tree, b)}</div>
+      </div>
+    )
+  }
+
+  public renderStat(tree: q.Tree<TopicViewModel>, stat: Stats) {
+    const node = tree.findNode(stat.topic)
+    if (!node) {
+      return null
+    }
+
+    let value = node.message && node.message.value
+    value = !isNaN(value) ? abbreviate(value) : value
+
+    return (
+      <div key={stat.title}>
+        <Typography><b>{stat.title}</b></Typography>
+        <Typography style={{ paddingLeft: '8px' }}><i>{value}</i></Typography>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = (state: AppState) => {
+  return {
+    tree: state.connection.tree,
+  }
+}
+
+export default withStyles(styles)(connect(mapStateToProps)(BrokerStatistics))

app/src/components/ConnectionSetup/Connection.tsx

@@ -26,14 +26,13 @@ import Notification from './Notification'
 import Visibility from '@material-ui/icons/Visibility'
 import VisibilityOff from '@material-ui/icons/VisibilityOff'
 
-import sha1 = require('sha1')
+const sha1 = require('sha1')
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connectionActions } from '../../actions'
 
 interface Props {
   classes: {[s: string]: string}
-  theme: Theme
   actions: typeof connectionActions,
   visible: boolean
   connected: boolean
@@ -380,10 +379,10 @@ class Connection extends React.Component<Props, State> {
 
 const mapStateToProps = (state: AppState) => {
   return {
-    visible: !state.tooBigReducer.connected,
-    connected: state.tooBigReducer.connected,
-    connecting: state.tooBigReducer.connecting,
-    error: state.tooBigReducer.error,
+    visible: !state.connection.connected,
+    connected: state.connection.connected,
+    connecting: state.connection.connecting,
+    error: state.connection.error,
   }
 }
 
@@ -393,4 +392,4 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(Connection.styles, { withTheme: true })(Connection))
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(Connection.styles)(Connection))

app/src/components/Settings.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
-import * as q from '../../../backend/src/Model'
 
-import { AppState, NodeOrder } from '../reducers'
+import { AppState } from '../reducers'
 import {
   Divider,
   Drawer,
@@ -17,7 +16,26 @@ import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
 import ChevronRight from '@material-ui/icons/ChevronRight'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { settingsActions } from '../actions'
+import { settingsActions, treeActions } from '../actions'
+import { TopicOrder } from '../reducers/Settings'
+import BrokerStatistics from './BrokerStatistics'
+
+export const autoExpandLimitSet = [{
+  limit: 0,
+  name: 'Collapsed',
+}, {
+  limit: 2,
+  name: 'Few',
+}, {
+  limit: 3,
+  name: 'Some',
+}, {
+  limit: 10,
+  name: 'Most',
+}, {
+  limit: 1E6,
+  name: 'All',
+}]
 
 const styles: StyleRulesCallback = theme => ({
   drawer: {
@@ -39,12 +57,12 @@ const styles: StyleRulesCallback = theme => ({
 })
 
 interface Props {
-  actions?: any
   autoExpandLimit: number
   visible: boolean
   store?: any
+  topicOrder: TopicOrder
   classes: any
-  nodeOrder: NodeOrder
+  actions: typeof settingsActions
 }
 
 class Settings extends React.Component<Props, {}> {
@@ -79,68 +97,69 @@ class Settings extends React.Component<Props, {}> {
           {this.renderAutoExpand()}
           {this.renderNodeOrder()}
         </div>
+        <BrokerStatistics />
       </Drawer>
     )
   }
 
   private renderAutoExpand() {
     const { classes, autoExpandLimit } = this.props
+
+    const limits = autoExpandLimitSet.map(limit => <MenuItem key={limit.limit} value={limit.limit}>{limit.name}</MenuItem>)
     return (
-        <div style={{ padding: '8px' }}>
-        <InputLabel htmlFor="auto-expand">Auto Expand</InputLabel>
+      <div style={{ padding: '8px', display: 'flex' }}>
+        <InputLabel htmlFor="auto-expand" style={{ flex: '1', marginTop: '8px' }}>Auto Expand</InputLabel>
         <Select
             value={autoExpandLimit}
             onChange={this.onChangeAutoExpand}
             input={<Input name="auto-expand" id="auto-expand-label-placeholder" />}
             name="auto-expand"
             className={classes.input}
+            style={{ flex: '1' }}
         >
-          <MenuItem value={0}><em>Collapsed</em></MenuItem>
-          <MenuItem value={2}>Few</MenuItem>
-          <MenuItem value={3}>Some</MenuItem>
-          <MenuItem value={10}>Most</MenuItem>
-          <MenuItem value={1E6}>All</MenuItem>
+          {limits}
         </Select>
       </div>
     )
   }
 
   private onChangeAutoExpand = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    this.props.actions.setAutoExpandLimit(e.target.value)
+    this.props.actions.setAutoExpandLimit(parseInt(e.target.value, 10))
   }
 
   private renderNodeOrder() {
-    const { classes, nodeOrder } = this.props
+    const { classes, topicOrder } = this.props
 
     return (
-      <div style={{ padding: '8px' }}>
-      <InputLabel htmlFor="auto-expand">Topic order</InputLabel>
-      <Select
-          value={nodeOrder}
+      <div style={{ padding: '8px', display: 'flex' }}>
+        <InputLabel htmlFor="auto-expand" style={{ flex: '1', marginTop: '8px' }}>Topic order</InputLabel>
+        <Select
+          value={topicOrder}
           onChange={this.onChangeSorting}
           input={<Input name="node-order" id="node-order-label-placeholder" />}
           displayEmpty={true}
           name="node-order"
           className={classes.input}
-      >
-        <MenuItem value={NodeOrder.none}><em>default</em></MenuItem>
-        <MenuItem value={NodeOrder.abc}>a-z</MenuItem>
-        <MenuItem value={NodeOrder.messages}>{NodeOrder.messages}</MenuItem>
-        <MenuItem value={NodeOrder.topics}>{NodeOrder.topics}</MenuItem>
-      </Select>
+          style={{ flex: '1' }}
+        >
+          <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>)
   }
 
   private onChangeSorting = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    this.props.actions.setNodeOrder(e.target.value)
+    this.props.actions.setTopicOrder(e.target.value as TopicOrder)
   }
 }
 
 const mapStateToProps = (state: AppState) => {
   return {
-    autoExpandLimit: state.tooBigReducer.settings.autoExpandLimit,
-    nodeOrder: state.tooBigReducer.settings.nodeOrder,
-    visible: state.tooBigReducer.settings.visible,
+    autoExpandLimit: state.settings.autoExpandLimit,
+    topicOrder: state.settings.topicOrder,
+    visible: state.settings.visible,
   }
 }
 

app/src/components/Sidebar/History.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react'
-import * as q from '../../../../backend/src/Model'
 
 import { Badge, Typography } from '@material-ui/core'
 import { Theme, withStyles } from '@material-ui/core/styles'
@@ -55,6 +54,7 @@ class MessageHistory extends React.Component<Props, State> {
     return (
       <div style={{ backgroundColor: 'rgba(60, 60, 60, 0.6)', marginTop: '16px' }}>
         <Typography
+          component={'span'}
           onClick={this.toggle}
           style={{ cursor: 'pointer' }}
         >
@@ -64,7 +64,7 @@ class MessageHistory extends React.Component<Props, State> {
             badgeContent={this.props.items.length}
             color="primary"
           >
-            {this.state.collapsed ? '▶' : '▼'} History
+            {this.state.collapsed ? '▶ History' : '▼ History'}
           </Badge>
           <div style={{ float: 'right' }}>{this.state.collapsed ? this.props.contentTypeIndicator : null}</div>
         </Typography>

app/src/components/Sidebar/MessageHistory.tsx

@@ -1,17 +1,16 @@
 import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
 
-import { Theme, withTheme } from '@material-ui/core/styles'
 import BarChart from '@material-ui/icons/BarChart'
-import DateFormatter from '../DateFormatter'
+import DateFormatter from '../helper/DateFormatter'
 import History from './History'
-import PlotHistory from './PlotHistory'
+import { TopicViewModel } from '../../TopicViewModel'
+const PlotHistory = React.lazy(() => import('./PlotHistory'))
 
 const throttle = require('lodash.throttle')
 
 interface Props {
-  node?: q.TreeNode
-  theme: Theme
+  node?: q.TreeNode<TopicViewModel>
   onSelect: (message: q.Message) => void
 }
 
@@ -35,7 +34,7 @@ class MessageHistory extends React.Component<Props, State> {
     nextProps.node && nextProps.node.onMessage.subscribe(this.updateNode)
   }
 
-  public componentWillMount() {
+  public componentDidMount() {
     this.props.node && this.props.node.onMessage.subscribe(this.updateNode)
   }
 
@@ -72,7 +71,11 @@ class MessageHistory extends React.Component<Props, State> {
   }
 
   public renderPlot(numericMessages: q.Message[]) {
-    return <PlotHistory messages={numericMessages} />
+    return (
+      <React.Suspense fallback={<div>Loading...</div>}>
+        <PlotHistory messages={numericMessages} />
+      </React.Suspense>
+    )
   }
 
   private displayMessage = (index: number, eventTarget: EventTarget) => {
@@ -81,4 +84,4 @@ class MessageHistory extends React.Component<Props, State> {
   }
 }
 
-export default withTheme()(MessageHistory)
+export default MessageHistory

app/src/components/Sidebar/NodeStats.tsx

@@ -2,9 +2,10 @@ import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
 
 import { Typography } from '@material-ui/core'
+import { TopicViewModel } from '../../TopicViewModel'
 
 interface Props {
-  node: q.TreeNode
+  node: q.TreeNode<TopicViewModel>
 }
 
 class NodeStats extends React.Component<Props, {}> {
@@ -18,7 +19,7 @@ class NodeStats extends React.Component<Props, {}> {
     return (
       <div>
         <Typography>Messages: #{node.messages}</Typography>
-        <Typography>Subtopics: {node.leafCount()}</Typography>
+        <Typography>Subtopics: {node.childTopicCount()}</Typography>
         <Typography>Messages Subtopics: #{node.leafMessageCount()}</Typography>
       </div>
     )

app/src/components/Sidebar/PlotHistory.tsx

@@ -1,10 +1,9 @@
 const { XYPlot, XAxis, LineMarkSeries, Hint, YAxis, HorizontalGridLines, LineSeries } = require('react-vis')
 import { default as ReactResizeDetector } from 'react-resize-detector'
 
-import DateFormatter from '../DateFormatter'
+import DateFormatter from '../helper/DateFormatter'
 import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
-import { withStyles, Theme, StyleRulesCallback } from '@material-ui/core/styles'
 import 'react-vis/dist/style.css'
 
 interface Props {
@@ -71,4 +70,4 @@ class PlotHistory extends React.Component<Props, Stats> {
   }
 }
 
-export default withStyles({}, { withTheme: true })(PlotHistory)
+export default PlotHistory

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

@@ -13,7 +13,6 @@ import {
   Radio,
   RadioGroup,
   TextField,
-  IconButton,
   FormControl,
   InputLabel,
   Input,
@@ -32,9 +31,11 @@ import Clear from '@material-ui/icons/Clear'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { publishActions } from '../../../actions'
+import ClearAdornment from '../../helper/ClearAdornment'
+import { TopicViewModel } from '../../../TopicViewModel'
 
 interface Props {
-  node?: q.TreeNode
+  node?: q.TreeNode<TopicViewModel>
   connectionId?: string
   topic?: string
   payload?: string
@@ -114,7 +115,7 @@ class Publish extends React.Component<Props, State> {
               id="publish-topic"
               value={topicStr}
               startAdornment={<span/>}
-              endAdornment={<IconButton style={{ padding: '4px' }} onClick={this.clearTopic}><Clear style={{ fontSize: '14px' }} /></IconButton>}
+              endAdornment={<ClearAdornment action={this.clearTopic} value={topicStr} />}
               onBlur={this.onTopicBlur}
               onChange={this.updateTopic}
               multiline={true}
@@ -143,6 +144,7 @@ class Publish extends React.Component<Props, State> {
         size="small"
         color="primary"
         onClick={this.publish}
+        id="publish-button"
       >
         <Navigation style={{ marginRight: '8px' }} /> Publish
       </Button>

app/src/components/Sidebar/Sidebar.tsx

@@ -7,11 +7,9 @@ import {
   ExpansionPanelDetails,
   ExpansionPanelSummary,
   Fade,
-  Fab,
   Paper,
   Popper,
   Typography,
-  IconButton,
   Tooltip,
 } from '@material-ui/core'
 import { StyleRulesCallback, Theme, withStyles } from '@material-ui/core/styles'
@@ -20,30 +18,32 @@ import { sidebarActons } from '../../actions'
 
 import { AppState } from '../../reducers'
 import Copy from '../Copy'
-import DateFormatter from '../DateFormatter'
+import DateFormatter from '../helper/DateFormatter'
 import ExpandMore from '@material-ui/icons/ExpandMore'
 import Clear from '@material-ui/icons/Clear'
 import MessageHistory from './MessageHistory'
 import NodeStats from './NodeStats'
-import Publish from './Publish/Publish'
 import Topic from './Topic'
-import ValueRenderer from './ValueRenderer'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-
+import { TopicViewModel } from '../../TopicViewModel'
+import { default as ReactResizeDetector } from 'react-resize-detector'
 const throttle = require('lodash.throttle')
 
+const Publish = React.lazy(() => import('./Publish/Publish'))
+const ValueRenderer = React.lazy(() => import('./ValueRenderer'))
+
 interface Props {
-  node?: q.TreeNode,
+  node?: q.TreeNode<TopicViewModel>,
   actions: typeof sidebarActons,
   classes: any,
-  theme: Theme,
   connectionId?: string,
 }
 
 interface State {
-  node: q.TreeNode,
+  node: q.TreeNode<TopicViewModel>
   compareMessage?: q.Message
+  valueRenderWidth: number
 }
 
 class Sidebar extends React.Component<Props, State> {
@@ -55,23 +55,7 @@ class Sidebar extends React.Component<Props, State> {
   constructor(props: any) {
     super(props)
     console.error('Find and fix me #state')
-    this.state = { node: new q.Tree() }
-  }
-
-  public static styles: StyleRulesCallback<string> = (theme: Theme) => {
-    return {
-      drawer: {
-        display: 'block',
-        height: '100%',
-      },
-      valuePaper: {
-        margin: `${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px`,
-      },
-      heading: {
-        fontSize: theme.typography.pxToRem(15),
-        fontWeight: theme.typography.fontWeightRegular,
-      },
-    }
+    this.state = { node: new q.Tree(), valueRenderWidth: 300 }
   }
 
   public componentWillReceiveProps(nextProps: Props) {
@@ -84,12 +68,16 @@ class Sidebar extends React.Component<Props, State> {
     }
   }
 
-  private registerUpdateListener(node: q.TreeNode) {
+  public componentWillUnmount() {
+    this.props.node && this.removeUpdateListener(this.props.node)
+  }
+
+  private registerUpdateListener(node: q.TreeNode<TopicViewModel>) {
     node.onMerge.subscribe(this.updateNode)
     node.onMessage.subscribe(this.updateNode)
   }
 
-  private removeUpdateListener(node: q.TreeNode) {
+  private removeUpdateListener(node: q.TreeNode<TopicViewModel>) {
     node.onMerge.unsubscribe(this.updateNode)
     node.onMessage.unsubscribe(this.updateNode)
   }
@@ -127,7 +115,10 @@ class Sidebar extends React.Component<Props, State> {
           <ExpansionPanelDetails style={this.detailsStyle}>
             {this.messageMetaInfo()}
             <div ref={this.valueRef}>
+            <React.Suspense fallback={<div>Loading...</div>}>
+              <ReactResizeDetector handleWidth={true} onResize={this.valueRenderWidthChange} />
               <ValueRenderer message={this.props.node && this.props.node.message} />
+            </React.Suspense>
             </div>
             <div><MessageHistory onSelect={this.handleMessageHistorySelect} node={this.props.node} /></div>
             <Popper open={Boolean(this.state.compareMessage)} anchorEl={this.valueRef.current} placement="left" transition={true}>
@@ -140,7 +131,9 @@ class Sidebar extends React.Component<Props, State> {
             <Typography className={classes.heading}>Publish</Typography>
           </ExpansionPanelSummary>
           <ExpansionPanelDetails style={this.detailsStyle}>
-            <Publish node={this.props.node} connectionId={this.props.connectionId} />
+            <React.Suspense fallback={<div>Loading...</div>}>
+              <Publish node={this.props.node} connectionId={this.props.connectionId} />
+            </React.Suspense>
           </ExpansionPanelDetails>
         </ExpansionPanel>
         <ExpansionPanel defaultExpanded={Boolean(this.props.node)}>
@@ -153,9 +146,14 @@ class Sidebar extends React.Component<Props, State> {
     )
   }
 
+  private valueRenderWidthChange = (width: number) => {
+    console.log(width)
+    this.setState({ valueRenderWidth: width })
+  }
+
   private showValueComparison = (a: any) => (
     <Fade {...a.TransitionProps} timeout={350}>
-      <Paper>
+      <Paper style={{ maxWidth: this.state.valueRenderWidth }}>
         <ValueRenderer message={this.state.compareMessage} />
       </Paper>
     </Fade>
@@ -173,7 +171,7 @@ class Sidebar extends React.Component<Props, State> {
           color="secondary"
           variant="contained"
           mini={true}
-          style={{ marginTop: '-2px', padding: '0px 4px', minHeight: '24px' }}
+          style={{ marginTop: '-3px', padding: '0px 4px', minHeight: '24px' }}
           onClick={this.props.actions.clearRetainedTopic}
         >
           retained <Clear style={{ fontSize: '16px', marginLeft: '2px' }} />
@@ -215,7 +213,7 @@ class Sidebar extends React.Component<Props, State> {
 
 const mapStateToProps = (state: AppState) => {
   return {
-    node: state.tooBigReducer.selectedTopic,
+    node: state.tree.selectedTopic,
   }
 }
 
@@ -225,4 +223,20 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default withStyles(Sidebar.styles, { withTheme: true })(connect(mapStateToProps, mapDispatchToProps)(Sidebar))
+const styles: StyleRulesCallback<string> = (theme: Theme) => {
+  return {
+    drawer: {
+      display: 'block',
+      height: '100%',
+    },
+    valuePaper: {
+      margin: `${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px`,
+    },
+    heading: {
+      fontSize: theme.typography.pxToRem(15),
+      fontWeight: theme.typography.fontWeightRegular,
+    },
+  }
+}
+
+export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(Sidebar))

app/src/components/Sidebar/Topic.tsx

@@ -5,14 +5,15 @@ import { withStyles, Theme, StyleRulesCallback } from '@material-ui/core/styles'
 import { treeActions } from '../../actions'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
+import { TopicViewModel } from '../../TopicViewModel'
 
 interface Props {
   classes: any
   theme: Theme
-  node?: q.TreeNode
-  selected?: q.TreeNode
+  node?: q.TreeNode<TopicViewModel>
+  selected?: q.TreeNode<TopicViewModel>
   actions: typeof treeActions
-  didSelectNode: (node: q.TreeNode) => void
+  didSelectNode: (node: q.TreeNode<TopicViewModel>) => void
 }
 
 const styles: StyleRulesCallback<string> = (theme: Theme) => ({

app/src/components/Sidebar/ValueRenderer.tsx

@@ -12,7 +12,7 @@ interface Props {
 
 class ValueRenderer extends React.Component<Props, {}> {
   public render() {
-    return <div>{this.renderValue()}</div>
+    return <div style={{ padding: '8px 0px 8px 8px' }}>{this.renderValue()}</div>
   }
 
   public renderValue() {
@@ -38,7 +38,7 @@ class ValueRenderer extends React.Component<Props, {}> {
       const theme = (this.props.theme.palette.type === 'dark') ? 'monokai' : 'bright:inverted'
       return (
         <ReactJson
-          style={{ width: '100%' }}
+          style={{ width: '100%', overflowY: 'scroll', wordBreak: 'break-all' }}
           src={json}
           name={null}
           theme={theme}
@@ -49,14 +49,13 @@ class ValueRenderer extends React.Component<Props, {}> {
 
   private renderRawValue(value: string) {
     const style: React.CSSProperties = {
-      backgroundColor: 'rgba(80, 80, 80, 0.6)',
+      padding: '8px 12px 8px 12px',
+      backgroundColor: 'rgba(100, 100, 100, 0.55)',
       wordBreak: 'break-all',
       width: '100%',
       overflow: 'auto hidden',
       display: 'block',
       lineHeight: '1.2em',
-      padding: '12px 5px 12px 5px',
-      maxWidth: '40vw',
       color: this.props.theme.palette.text.primary,
     }
 

app/src/components/TitleBar.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react'
-import * as q from '../../../backend/src/Model'
 
 import { AppBar, Button, IconButton, InputBase, Toolbar, Typography } from '@material-ui/core'
 import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
@@ -11,6 +10,8 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { fade } from '@material-ui/core/styles/colorManipulator'
 import { settingsActions, connectionActions } from '../actions'
+import { AppState } from '../reducers'
+import ClearAdornment from './helper/ClearAdornment'
 
 const styles: StyleRulesCallback = theme => ({
   title: {
@@ -35,7 +36,7 @@ const styles: StyleRulesCallback = theme => ({
     },
   },
   searchIcon: {
-    width: theme.spacing.unit * 9,
+    width: theme.spacing.unit * 8,
     height: '100%',
     position: 'absolute',
     pointerEvents: 'none',
@@ -70,22 +71,13 @@ interface Props {
     settings: typeof settingsActions,
     connection: typeof connectionActions,
   }
+  topicFilter?: string
 }
 
-interface State {
-  selectedNode?: q.TreeNode
-  settingsVisible: boolean
-  autoExpandLimit: number
-}
-
-class TitleBar extends React.Component<Props, State> {
+class TitleBar extends React.Component<Props, {}> {
   constructor(props: any) {
     super(props)
-    this.state = {
-      selectedNode: undefined,
-      settingsVisible: false,
-      autoExpandLimit: 0,
-    }
+    this.state = { }
   }
 
   public render() {
@@ -98,6 +90,7 @@ class TitleBar extends React.Component<Props, State> {
             <Menu />
           </IconButton>
           <Typography className={classes.title} variant="h6" color="inherit">MQTT-Explorer</Typography>
+          {this.renderSearch()}
           <Button style={{ margin: 'auto 8px auto auto' }} onClick={actions.connection.disconnect}>
             Disconnect <CloudOff style={{ marginRight: '8px', paddingLeft: '8px' }}/>
           </Button>
@@ -107,7 +100,7 @@ class TitleBar extends React.Component<Props, State> {
   }
 
   private renderSearch() {
-    const { classes } = this.props
+    const { classes, topicFilter } = this.props
 
     return (
       <div className={classes.search}>
@@ -115,12 +108,29 @@ class TitleBar extends React.Component<Props, State> {
           <Search />
         </div>
         <InputBase
+          value={topicFilter}
+          onChange={this.onFilterChange}
           placeholder="Search…"
+          endAdornment={<div style={{ width: '24px', paddingRight: '8px' }}><ClearAdornment 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)
+  }
+}
+
+const mapStateToProps = (state: AppState) => {
+  return {
+    topicFilter: state.settings.topicFilter,
+  }
 }
 
 const mapDispatchToProps = (dispatch: any) => {
@@ -132,4 +142,4 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default connect(undefined, mapDispatchToProps)(withStyles(styles)(TitleBar))
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(TitleBar))

app/src/components/Tree/Tree.tsx

@@ -1,39 +1,44 @@
 import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
 
-import { makeConnectionMessageEvent, rendererEvents, MqttMessage } from '../../../../events'
-
 import { AppState } from '../../reducers'
 import TreeNode from './TreeNode'
 import { connect } from 'react-redux'
+import { TopicOrder } from '../../reducers/Settings'
+import { TopicViewModel } from '../../TopicViewModel'
+import { treeActions } from '../../actions'
+import { bindActionCreators } from 'redux'
 
 const MovingAverage = require('moving-average')
 
-const timeInterval = 10 * 1000
-const average = MovingAverage(timeInterval)
+const averagingTimeInterval = 10 * 1000
+const average = MovingAverage(averagingTimeInterval)
 
 declare var window: any
 
 interface Props {
-  autoExpandLimit: number
-  didSelectNode?: (node: q.TreeNode) => void
+  actions: typeof treeActions
   connectionId?: string
-  connected: boolean
+  tree?: q.Tree<TopicViewModel>
+  filter: string
+  host?: string
+
+  topicOrder: TopicOrder
+  autoExpandLimit: number
 }
 
-interface TreeState {
-  tree: q.Tree
-  msg: any
+interface State {
+  lastUpdate: number
 }
 
-class Tree extends React.Component<Props, TreeState> {
+class Tree extends React.PureComponent<Props, State> {
   private updateTimer?: any
-  private lastUpdate: number = 0
   private perf: number = 0
+  private renderTime = 0
 
   constructor(props: any) {
     super(props)
-    this.state = { tree: new q.Tree(), msg: {} }
+    this.state = { lastUpdate: 0 }
   }
 
   public time(): number {
@@ -43,64 +48,47 @@ class Tree extends React.Component<Props, TreeState> {
     return time
   }
 
-  private performanceCallback = (ms: number) => {
-    average.push(Date.now(), ms)
+  public componentWillReceiveProps(nextProps: Props) {
+    if (this.props.tree !== nextProps.tree) {
+      if (this.props.tree) {
+        this.props.tree.didReceive.unsubscribe(this.throttledTreeUpdate)
+      }
+      if (nextProps.tree) {
+        nextProps.tree.didReceive.subscribe(this.throttledTreeUpdate)
+      }
+      this.setState(this.state)
+    }
   }
 
-  public throttledTreeUpdate() {
+  public componentWillUnmount() {
+    this.props.tree && this.props.tree.didReceive.unsubscribe(this.throttledTreeUpdate)
+  }
+
+  public throttledTreeUpdate = () => {
     if (this.updateTimer) {
       return
     }
 
     const expectedRenderTime = average.forecast()
     const updateInterval = Math.max(expectedRenderTime * 7, 300)
-    const timeUntilNextUpdate = updateInterval - (performance.now() - this.lastUpdate)
+    const timeUntilNextUpdate = updateInterval - (performance.now() - this.renderTime)
 
     this.updateTimer = setTimeout(() => {
       window.requestIdleCallback(() => {
-        this.lastUpdate = performance.now()
         this.updateTimer && clearTimeout(this.updateTimer)
         this.updateTimer = undefined
-        this.setState(this.state)
+        this.renderTime = performance.now()
+        this.props.tree && this.props.tree.applyUnmergedChanges()
+        window.requestIdleCallback(() => {
+          this.setState({ lastUpdate: this.renderTime })
+        }, { timeout: 100 })
       }, { timeout: 500 })
     }, Math.max(0, timeUntilNextUpdate))
   }
 
-  public componentWillReceiveProps(nextProps: Props) {
-    this.registerAndUnregisterEventSubscriptionsForNewProps(nextProps)
-  }
-
-  private registerAndUnregisterEventSubscriptionsForNewProps(nextProps: Props) {
-    if (this.props.connectionId !== nextProps.connectionId) {
-      if (this.props.connectionId) {
-        this.setState({ tree: new q.Tree() })
-        rendererEvents.unsubscribeAll(makeConnectionMessageEvent(this.props.connectionId))
-        this.updateTimer && clearTimeout(this.updateTimer)
-      }
-      if (nextProps.connectionId) {
-        rendererEvents.subscribe(makeConnectionMessageEvent(nextProps.connectionId), this.handleNewData)
-      }
-    }
-  }
-
-  public componentWillUnmount() {
-    if (this.props.connectionId) {
-      const event = makeConnectionMessageEvent(this.props.connectionId)
-      rendererEvents.unsubscribeAll(event)
-    }
-  }
-
-  private handleNewData = (msg: MqttMessage) => {
-    const edges = msg.topic.split('/')
-    const node = q.TreeNodeFactory.fromEdgesAndValue(edges, msg.payload)
-    node.mqttMessage = msg
-    this.state.tree.updateWithNode(node.firstNode())
-
-    this.throttledTreeUpdate()
-  }
-
   public render() {
-    if (!this.props.connected) {
+    const { tree, filter } = this.props
+    if (!tree) {
       return null
     }
 
@@ -112,27 +100,41 @@ class Tree extends React.Component<Props, TreeState> {
     return (
       <div style={style}>
         <TreeNode
+          key={tree.hash()}
           animateChages={true}
-          autoExpandLimit={this.props.autoExpandLimit}
           isRoot={true}
-          didSelectNode={this.props.didSelectNode}
-          treeNode={this.state.tree}
-          name="/"
+          treeNode={tree}
+          name={this.props.host}
           collapsed={false}
-          key="rootNode"
-          lastUpdate={this.state.tree.lastUpdate}
           performanceCallback={this.performanceCallback}
+          autoExpandLimit={this.props.autoExpandLimit}
+          topicOrder={this.props.topicOrder}
+          lastUpdate={tree.lastUpdate}
+          didSelectTopic={this.props.actions.selectTopic}
         />
       </div>
     )
   }
+
+  private performanceCallback = (ms: number) => {
+    average.push(Date.now(), ms)
+  }
 }
 
 const mapStateToProps = (state: AppState) => {
   return {
-    autoExpandLimit: state.tooBigReducer.settings.autoExpandLimit,
-    connected: state.tooBigReducer.connected,
+    tree: state.tree.tree,
+    filter: state.tree.filter,
+    host: state.connection.host,
+    autoExpandLimit: state.settings.autoExpandLimit,
+    topicOrder: state.settings.topicOrder,
   }
 }
 
-export default connect(mapStateToProps)(Tree)
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: bindActionCreators(treeActions, dispatch),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Tree)

app/src/components/Tree/TreeNode.tsx

@@ -3,13 +3,11 @@ import * as q from '../../../../backend/src/Model'
 
 import { Theme, withStyles } from '@material-ui/core/styles'
 
-import LabelImportant from '@material-ui/icons/LabelImportant'
 import TreeNodeSubnodes from './TreeNodeSubnodes'
 import TreeNodeTitle from './TreeNodeTitle'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-import { isElementInViewport } from '../helper/isElementInViewport'
-import { treeActions } from '../../actions'
+import { TopicOrder } from '../../reducers/Settings'
+import { TopicViewModel } from '../../TopicViewModel'
+const debounce = require('lodash.debounce')
 
 declare var performance: any
 
@@ -25,37 +23,40 @@ const styles = (theme: Theme) => {
       display: 'block',
       marginLeft: '10px',
     },
-    hover: {
-      '&:hover': {
-        backgroundColor: 'rgba(80, 80, 80, 0.35)',
-      },
-    },
     topicSelect: {
       float: 'right' as 'right',
       opacity: 0,
       cursor: 'pointer',
       marginTop: '-1px',
     },
+    selected: {
+      backgroundColor: 'rgba(120, 120, 120, 0.55)',
+    },
+    hover: {
+      backgroundColor: 'rgba(80, 80, 80, 0.55)',
+    },
   }
 }
 
 interface Props {
-  actions: any
-  lastUpdate: number
   animateChages: boolean
   isRoot?: boolean
-  treeNode: q.TreeNode
+  treeNode: q.TreeNode<TopicViewModel>
   name?: string | undefined
   collapsed?: boolean | undefined
   performanceCallback?: ((ms: number) => void) | undefined
-  didSelectNode?: (node: q.TreeNode) => void
   classes: any
+  className?: string
+  topicOrder: TopicOrder
   autoExpandLimit: number
-  style?: React.CSSProperties
+  lastUpdate: number
+  didSelectTopic: any
 }
 
 interface State {
   collapsedOverride: boolean | undefined
+  mouseOver: boolean
+  selected: boolean
 }
 
 class TreeNode extends React.Component<Props, State> {
@@ -63,12 +64,13 @@ class TreeNode extends React.Component<Props, State> {
   private dirtyEdges: boolean = true
   private dirtyMessage: boolean = true
   private animationDirty: boolean = false
+  private lastRenderTime = 0
 
   private cssAnimationWasSetAt?: number
 
   private willUpdateTime: number = performance.now()
-  private titleRef = React.createRef<HTMLDivElement>()
-  private topicSelectRef = React.createRef<HTMLDivElement>()
+  private titleRef?: React.RefObject<HTMLDivElement> = React.createRef<HTMLDivElement>()
+  private nodeRef?: React.RefObject<HTMLDivElement> = React.createRef<HTMLDivElement>()
 
   private subnodesDidchange = () => {
     this.dirtySubnodes = true
@@ -87,25 +89,54 @@ class TreeNode extends React.Component<Props, State> {
 
     this.state = {
       collapsedOverride: props.collapsed,
+      mouseOver: false,
+      selected: false,
     }
   }
 
   public componentDidMount() {
     const { treeNode } = this.props
+    this.addSubscriber(treeNode)
+  }
+
+  private addSubscriber(treeNode: q.TreeNode<TopicViewModel>) {
+    treeNode.viewModel = new TopicViewModel()
+    treeNode.viewModel.change.subscribe(this.viewStateHasChanged)
     treeNode.onMerge.subscribe(this.subnodesDidchange)
     treeNode.onEdgesChange.subscribe(this.edgesDidChange)
     treeNode.onMessage.subscribe(this.messageDidChange)
   }
 
-  public componentWillUnmount() {
-    const { treeNode } = this.props
+  private viewStateHasChanged = (msg: void, viewModel: TopicViewModel) => {
+    this.setState({ selected: viewModel.isSelected() })
+  }
+
+  private removeSubscriber(treeNode: q.TreeNode<TopicViewModel>) {
+    treeNode.viewModel && treeNode.viewModel.change.unsubscribe(this.viewStateHasChanged)
+    treeNode.viewModel = undefined
     treeNode.onMerge.unsubscribe(this.subnodesDidchange)
     treeNode.onEdgesChange.unsubscribe(this.edgesDidChange)
     treeNode.onMessage.unsubscribe(this.messageDidChange)
   }
 
+  public componentWillReceiveProps(nextProps: Props) {
+    if (nextProps.treeNode !== this.props.treeNode) {
+      this.removeSubscriber(this.props.treeNode)
+      this.addSubscriber(nextProps.treeNode)
+    }
+  }
+
+  public componentWillUnmount() {
+    const { treeNode } = this.props
+    this.removeSubscriber(treeNode)
+    this.titleRef = undefined
+    this.nodeRef = undefined
+  }
+
   private stateHasChanged(newState: State) {
     return this.state.collapsedOverride !== newState.collapsedOverride
+      || this.state.mouseOver !== newState.mouseOver
+      || this.state.selected !== newState.selected
   }
 
   private propsHasChanged(newProps: Props) {
@@ -116,9 +147,7 @@ class TreeNode extends React.Component<Props, State> {
     const shouldRenderToRemoveCssAnimation = this.cssAnimationWasSetAt !== undefined
     return this.stateHasChanged(nextState)
       || this.propsHasChanged(nextProps)
-      || this.dirtyEdges
-      || this.dirtyMessage
-      || this.dirtySubnodes
+      || (this.dirtyEdges || this.dirtyMessage || this.dirtySubnodes)
       || this.animationDirty
       || shouldRenderToRemoveCssAnimation
   }
@@ -154,64 +183,54 @@ class TreeNode extends React.Component<Props, State> {
     this.dirtyEdges = this.dirtyMessage = this.dirtySubnodes = false
 
     const shouldStartAnimation = (isDirty && !this.animationDirty) && !this.props.isRoot
-    const animation = shouldStartAnimation ? { animation: 'example 0.5s' } : {}
+    const animation = shouldStartAnimation ? { willChange: 'auto', translateZ: 0, animation: 'example 0.5s' } : {}
     this.animationDirty = shouldStartAnimation
 
+    const highlightClass = this.state.selected ? this.props.classes.selected : (this.state.mouseOver ? this.props.classes.hover : '')
     return (
       <div
         key={this.props.treeNode.hash()}
-        className={`${classes.node} ${!this.props.isRoot ? classes.hover : ''}`}
+        className={`${classes.node} ${this.props.className} ${highlightClass}`}
         onClick={this.didClickNode}
-        style={this.props.style}
         onMouseOver={this.mouseOver}
         onMouseOut={this.mouseOut}
+        ref={this.nodeRef}
       >
         <span ref={this.titleRef} style={animation}>
           <TreeNodeTitle
             collapsed={this.collapsed()}
             treeNode={this.props.treeNode}
             name={this.props.name}
-            lastUpdate={this.props.treeNode.lastUpdate}
+            didSelectNode={this.didSelectTopic}
           />
         </span>
-        <div
-          className={this.props.classes.topicSelect}
-          ref={this.topicSelectRef}
-          onClick={this.didSelectNode}
-          title="Select topic"
-        >
-          <LabelImportant style={{ fontSize: '14px' }} />
-        </div>
         {this.renderNodes()}
       </div>
     )
   }
 
-  private mouseOver = (event: React.MouseEvent) => {
-    event.stopPropagation()
-    if (this.topicSelectRef.current) {
-      this.topicSelectRef.current.style.opacity = '1'
-    }
-  }
-  private mouseOut = (event: React.MouseEvent) => {
-    event.stopPropagation()
-    if (this.topicSelectRef.current) {
-      this.topicSelectRef.current.style.opacity = '0'
-    }
+  private didSelectTopic = () => {
+    this.props.didSelectTopic(this.props.treeNode)
   }
 
-  private didSelectNode = (event: React.MouseEvent) => {
+  private mouseOver = (event: React.MouseEvent) => {
     event.stopPropagation()
-    if (this.topicSelectRef.current) {
-      this.topicSelectRef.current.style.opacity = '1'
-    }
-    this.props.actions.selectTopic(this.props.treeNode)
+    this.setHover(true)
   }
 
+  private mouseOut = (event: React.MouseEvent) => {
+    event.stopPropagation()
+    this.setHover(false)
+  }
+
+  private setHover = debounce((hover: boolean) => {
+    this.setState({ mouseOver: hover })
+  }, 45)
+
   private didClickNode = (event: React.MouseEvent) => {
     event.stopPropagation()
     this.toggle()
-    this.props.actions.selectTopic(this.props.treeNode)
+    this.didSelectTopic()
   }
 
   private renderNodes() {
@@ -219,19 +238,14 @@ class TreeNode extends React.Component<Props, State> {
       <TreeNodeSubnodes
         animateChanges={this.props.animateChages}
         collapsed={this.collapsed()}
-        autoExpandLimit={this.props.autoExpandLimit}
-        didSelectNode={this.props.didSelectNode}
         treeNode={this.props.treeNode}
+        autoExpandLimit={this.props.autoExpandLimit}
+        topicOrder={this.props.topicOrder}
         lastUpdate={this.props.treeNode.lastUpdate}
+        didSelectTopic={this.props.didSelectTopic}
       />
     )
   }
 }
 
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    actions: bindActionCreators(treeActions, dispatch),
-  }
-}
-
-export default withStyles(styles)(connect(null, mapDispatchToProps)(TreeNode))
+export default withStyles(styles)(TreeNode)

app/src/components/Tree/TreeNodeSubnodes.tsx

@@ -1,79 +1,112 @@
 import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
 
-import { AppState, NodeOrder } from '../../reducers'
-import { Theme, withTheme } from '@material-ui/core/styles'
+import { AppState } from '../../reducers'
 
 import TreeNode from './TreeNode'
 import { connect } from 'react-redux'
+import { TopicOrder } from '../../reducers/Settings'
+import { Theme, withStyles } from '@material-ui/core'
+import { TopicViewModel } from '../../TopicViewModel'
 
 export interface Props {
-  lastUpdate: number
-  nodeOrder?: NodeOrder
   animateChanges: boolean
-  treeNode: q.TreeNode
-  autoExpandLimit: number
+  treeNode: q.TreeNode<TopicViewModel>
+  filter?: string
   collapsed?: boolean | undefined
-  didSelectNode?: (node: q.TreeNode) => void
-  theme: Theme
+  classes: any
+
+  lastUpdate: number
+
+  topicOrder: TopicOrder
+  selectedTopic?: q.TreeNode<TopicViewModel>
+  autoExpandLimit: number
+  didSelectTopic: any
 }
 
-class TreeNodeSubnodes extends React.Component<Props, {}> {
-  private sortedNodes(): q.TreeNode[] {
-    const { nodeOrder, treeNode } = this.props
+interface State {
+  alreadyAdded: number
+}
 
-    let edges = Object.values(treeNode.edges)
-    if (nodeOrder === NodeOrder.abc) {
+class TreeNodeSubnodes extends React.Component<Props, State> {
+  private renderMoreAnimationFrame?: any
+  constructor(props: Props) {
+    super(props)
+    this.state = { alreadyAdded: 10 }
+  }
+
+  private sortedNodes(): q.TreeNode<TopicViewModel>[] {
+    const { topicOrder, treeNode } = this.props
+
+    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 (nodeOrder === NodeOrder.messages) {
+    if (topicOrder === TopicOrder.messages) {
       nodes = nodes.sort((a, b) => b.leafMessageCount() - a.leafMessageCount())
     }
-    if (nodeOrder === NodeOrder.topics) {
-      nodes = nodes.sort((a, b) => b.leafCount() - a.leafCount())
+    if (topicOrder === TopicOrder.topics) {
+      nodes = nodes.sort((a, b) => b.childTopicCount() - a.childTopicCount())
     }
 
     return nodes
   }
 
+  private renderMore() {
+    this.renderMoreAnimationFrame = window.requestAnimationFrame(() => {
+      this.setState({ ...this.state, alreadyAdded: this.state.alreadyAdded * 1.5 })
+    })
+  }
+
+  public componentWillUnmount() {
+    window.cancelAnimationFrame(this.renderMoreAnimationFrame)
+  }
+
   public render() {
-    const edges = Object.values(this.props.treeNode.edges)
+    const edges = this.props.treeNode.edgeArray
     if (edges.length === 0 || this.props.collapsed) {
       return null
     }
 
-    const listItemStyle = {
-      padding: '3px 0px 0px 8px',
+    if (this.state.alreadyAdded < edges.length) {
+      const delta = Math.min(this.state.alreadyAdded, edges.length - this.state.alreadyAdded)
+      this.renderMore()
     }
 
-    const nodes = this.sortedNodes()
-    const listItems = nodes.map(node => (
-        <div key={node.hash()}>
-          <TreeNode
-            animateChages={this.props.animateChanges}
-            treeNode={node}
-            didSelectNode={this.props.didSelectNode}
-            autoExpandLimit={this.props.autoExpandLimit}
-            lastUpdate={node.lastUpdate}
-            style={listItemStyle}
-          />
-        </div>
-      ))
+    const nodes = this.sortedNodes().slice(0, this.state.alreadyAdded)
+    const listItems = nodes.map((node) => {
+      return (
+        <TreeNode
+          key={`${node.hash()}-${this.props.filter}`}
+          animateChages={this.props.animateChanges}
+          treeNode={node}
+          className={this.props.classes.listItem}
+          topicOrder={this.props.topicOrder}
+          autoExpandLimit={this.props.autoExpandLimit}
+          lastUpdate={node.lastUpdate}
+          didSelectTopic={this.props.didSelectTopic}
+        />
+      )
+    })
 
     return (
-      <span style={{ display: 'block', clear: 'both' }} >
+      <span className={this.props.classes.list}>
         {listItems}
       </span>
     )
   }
 }
 
-const mapStateToProps = (state: AppState) => {
-  return {
-    nodeOrder: state.tooBigReducer.settings.nodeOrder,
-  }
-}
+const styles = (theme: Theme) => ({
+  list: {
+    display: 'block' as 'block',
+    clear: 'both' as 'both',
+  },
+  listItem: {
+    padding: '3px 0px 0px 8px',
+  },
+})
 
-export default withTheme()(connect(mapStateToProps)(TreeNodeSubnodes))
+export default withStyles(styles)(TreeNodeSubnodes)

app/src/components/Tree/TreeNodeTitle.tsx

@@ -1,75 +1,47 @@
 import * as React from 'react'
 import { connect } from 'react-redux'
-import { bindActionCreators } from 'redux'
-import { treeActions } from '../../actions'
 import * as q from '../../../../backend/src/Model'
-import { withTheme, Theme } from '@material-ui/core/styles'
+import { withStyles, Theme } from '@material-ui/core'
+import { TopicViewModel } from '../../TopicViewModel'
+const debounce = require('lodash.debounce')
 
 export interface TreeNodeProps extends React.HTMLAttributes<HTMLElement> {
-  treeNode: q.TreeNode
-  actions: any
+  treeNode: q.TreeNode<TopicViewModel>
   name?: string | undefined
   collapsed?: boolean | undefined
-  theme: Theme
-  lastUpdate: number
+  classes: any
+  didSelectNode: any
 }
 
 class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
-  private getStyles() {
-    const { theme } = this.props
-    return {
-      collapsedSubnodes: {
-        color: theme.palette.text.secondary,
-      },
-      container: {
-        display: 'block',
-      },
-    }
+  private mouseOver = (event: React.MouseEvent) => {
+    event.preventDefault()
+    this.selectTopic()
   }
 
-  private didSelectNode = (event: React.MouseEvent) => {
-    event.stopPropagation()
+  private selectTopic = debounce(() => {
     if (this.props.treeNode.message) {
-      this.props.actions.selectTopic(this.props.treeNode)
+      this.props.didSelectNode(this.props.treeNode)
     }
-  }
+  }, 5)
 
   public render() {
-    const style: React.CSSProperties = {
-      lineHeight: '1em',
-      whiteSpace: 'nowrap',
-    }
     return (
-      <span style={style} onMouseOver={this.didSelectNode}>
+      <span className={this.props.classes.title} onMouseOver={this.props.treeNode.message ? this.mouseOver : undefined}>
         {this.renderExpander()} {this.renderSourceEdge()} {this.renderCollapsedSubnodes()} {this.renderValue()}
       </span>
     )
   }
 
   private renderSourceEdge() {
-    const style: React.CSSProperties = {
-      fontWeight: 'bold',
-      overflow: 'hidden',
-      display: 'inline-block',
-    }
     const name = this.props.name || (this.props.treeNode.sourceEdge && this.props.treeNode.sourceEdge.name)
 
-    return <span style={style}>{name}</span>
+    return <span className={this.props.classes.sourceEdge}>{name}</span>
   }
 
   private renderValue() {
-    const style: React.CSSProperties = {
-      maxWidth: '15em',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      padding: '0',
-      marginLeft: '5px',
-      display: 'inline-block',
-    }
-
     return this.props.treeNode.message && this.props.treeNode.message.length > 0
-      ? <span style={style}> = {this.props.treeNode.message.value.toString()}</span>
+      ? <span className={this.props.classes.value}> = {this.props.treeNode.message.value.toString().slice(0, 120)}</span>
       : null
   }
 
@@ -87,14 +59,31 @@ class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
     }
 
     const messages = this.props.treeNode.leafMessageCount()
-    return <span style={this.getStyles().collapsedSubnodes}>({this.props.treeNode.leafCount()} nodes, {messages} messages)</span>
+    return <span className={this.props.classes.collapsedSubnodes}>({this.props.treeNode.childTopicCount()} topics, {messages} messages)</span>
   }
 }
 
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    actions: bindActionCreators(treeActions, dispatch),
-  }
-}
+const styles = (theme: Theme) => ({
+  value: {
+    whiteSpace: 'nowrap' as 'nowrap',
+    overflow: 'hidden' as 'hidden',
+    textOverflow: 'ellipsis' as 'ellipsis',
+    padding: '0',
+    marginLeft: '5px',
+    display: 'inline-block' as 'inline-block',
+  },
+  sourceEdge: {
+    fontWeight: 'bold' as 'bold',
+    overflow: 'hidden' as 'hidden',
+    display: 'inline-block' as 'inline-block',
+  },
+  title: {
+    lineHeight: '1em',
+    whiteSpace: 'nowrap' as 'nowrap',
+  },
+  collapsedSubnodes: {
+    color: theme.palette.text.secondary,
+  },
+})
 
-export default withTheme()(connect(null, mapDispatchToProps)(TreeNodeTitle))
+export default withStyles(styles)(TreeNodeTitle)

app/src/components/helper/ClearAdornment.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { IconButton } from '@material-ui/core'
+import Clear from '@material-ui/icons/Clear'
+
+interface Props {
+  value?: string
+  action: any
+  style?: React.CSSProperties
+}
+
+class ClearAdornment extends React.Component<Props, {}> {
+  public render() {
+    if (this.props.value) {
+      return (
+        <IconButton style={{ ...this.props.style, padding: '1px' }} onClick={this.props.action}>
+          <Clear style={{ fontSize: '16px' }} />
+        </IconButton>
+      )
+    }
+
+    return null
+  }
+}
+
+export default ClearAdornment

app/src/index.tsx

@@ -3,20 +3,22 @@ import './tracking'
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import reduxThunk from 'redux-thunk'
+import { batchDispatchMiddleware } from 'redux-batched-actions'
 
 import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'
-import reducers, { AppState, NodeOrder } from './reducers'
+import reducers from './reducers'
 
 import App from './App'
 import { Provider } from 'react-redux'
 import { createStore, applyMiddleware, compose } from 'redux'
 
-const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
+const composeEnhancers = /*(window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || */ compose
 const store = createStore(
   reducers,
   composeEnhancers(
     applyMiddleware(
       reduxThunk,
+      batchDispatchMiddleware,
     ),
   ),
 )
@@ -28,11 +30,13 @@ const theme = createMuiTheme({
   typography: { useNextVariants: true },
 })
 
-const splash = document.getElementById('splash')
-if (splash) {
-  splash.style.animation = 'unsplash 1s ease-out 0s 1 normal forwards'
-  setTimeout(() => splash.remove(), 1100)
-}
+setTimeout(() => {
+  const splash = document.getElementById('splash')
+  if (splash) {
+    splash.style.animation = 'unsplash 0.5s ease-in 0s 1 normal forwards'
+    setTimeout(() => splash.remove(), 600)
+  }
+}, 300)
 
 ReactDOM.render(
     <MuiThemeProvider theme={theme}>

app/src/reducers/Connection.ts

@@ -0,0 +1,93 @@
+import { Action } from 'redux'
+import { createReducer } from './lib'
+import * as q from '../../../backend/src/Model'
+import { MqttOptions } from '../../../backend/src/DataSource'
+import { TopicViewModel } from '../TopicViewModel'
+
+export interface ConnectionState {
+  host?: string
+  tree?: q.Tree<TopicViewModel>
+  connectionOptions?: MqttOptions
+  connectionId?: string
+  error?: string
+  connected: boolean
+  connecting: boolean
+}
+
+export type Action = SetConnecting | SetConnected | SetDisconnected | ShowError
+
+export enum ActionTypes {
+  CONNECTION_SET_CONNECTING = 'CONNECTION_SET_CONNECTING',
+  CONNECTION_SET_CONNECTED = 'CONNECTION_SET_CONNECTED',
+  CONNECTION_SET_DISCONNECTED = 'CONNECTION_SET_DISCONNECTED',
+  CONNECTION_SET_SHOW_ERROR = 'CONNECTION_SET_SHOW_ERROR',
+}
+
+export interface SetConnecting {
+  type: ActionTypes.CONNECTION_SET_CONNECTING,
+  connectionId: string
+}
+
+export interface SetConnected {
+  type: ActionTypes.CONNECTION_SET_CONNECTED
+  host: string
+  tree: q.Tree<TopicViewModel>
+}
+
+export interface SetDisconnected {
+  type: ActionTypes.CONNECTION_SET_DISCONNECTED
+}
+
+export interface ShowError {
+  type: ActionTypes.CONNECTION_SET_SHOW_ERROR
+  error?: Error
+}
+
+const initialState: ConnectionState = {
+  connected: false,
+  connecting: false,
+}
+
+export const connectionReducer = createReducer(initialState, {
+  CONNECTION_SET_CONNECTING: setConnecting,
+  CONNECTION_SET_CONNECTED: setConnected,
+  CONNECTION_SET_DISCONNECTED: setDisconnected,
+  CONNECTION_SET_SHOW_ERROR: showError,
+})
+
+function setConnecting(state: ConnectionState, action: SetConnecting): ConnectionState {
+  return {
+    ...state,
+    connecting: true,
+    connected: false,
+    connectionId: action.connectionId,
+  }
+}
+
+function setConnected(state: ConnectionState, action: SetConnected): ConnectionState {
+  return {
+    ...state,
+    host: action.host,
+    connecting: false,
+    connected: true,
+    tree: action.tree,
+  }
+}
+
+function setDisconnected(state: ConnectionState, action: SetDisconnected): ConnectionState {
+  return {
+    ...state,
+    host: undefined,
+    connecting: false,
+    connected: false,
+    connectionId: undefined,
+    tree: undefined,
+  }
+}
+
+function showError(state: ConnectionState, action: ShowError) {
+  return {
+    ...state,
+    error: action.error,
+  }
+}

app/src/reducers/Settings.ts

@@ -0,0 +1,84 @@
+import { Action } from 'redux'
+import { createReducer } from './lib'
+
+export enum TopicOrder {
+  none = 'none',
+  messages = '#messages',
+  abc = 'abc',
+  topics = '#topics',
+}
+
+export interface SettingsState {
+  autoExpandLimit: number
+  visible: boolean
+  topicOrder: TopicOrder
+  topicFilter?: string
+}
+export type Action = SetAutoExpandLimit | ToggleVisibility | SetTopicOrder | FilterTopics
+
+export enum ActionTypes {
+  SETTINGS_SET_AUTO_EXPAND_LIMIT = 'SETTINGS_SET_AUTO_EXPAND_LIMIT',
+  SETTINGS_TOGGLE_VISIBILITY = 'SETTINGS_TOGGLE_VISIBILITY',
+  SETTINGS_SET_TOPIC_ORDER = 'SETTINGS_SET_TOPIC_ORDER',
+  SETTINGS_FILTER_TOPICS = 'SETTINGS_FILTER_TOPICS',
+}
+
+const initialState: SettingsState = {
+  autoExpandLimit: 0,
+  topicOrder: TopicOrder.none,
+  visible: false,
+}
+
+export const settingsReducer = createReducer(initialState, {
+  SETTINGS_SET_AUTO_EXPAND_LIMIT: setAutoExpandLimit,
+  SETTINGS_TOGGLE_VISIBILITY: toggleVisibility,
+  SETTINGS_SET_TOPIC_ORDER: setTopicOrder,
+  SETTINGS_FILTER_TOPICS: filterTopics,
+})
+
+function setAutoExpandLimit(state: SettingsState, action: SetAutoExpandLimit) {
+  return {
+    ...state,
+    autoExpandLimit: action.autoExpandLimit,
+  }
+}
+
+export interface SetAutoExpandLimit {
+  type: ActionTypes.SETTINGS_SET_AUTO_EXPAND_LIMIT
+  autoExpandLimit: number
+}
+
+function toggleVisibility(state: SettingsState, action: ToggleVisibility) {
+  return {
+    ...state,
+    visible: !state.visible,
+  }
+}
+
+export interface ToggleVisibility {
+  type: ActionTypes.SETTINGS_TOGGLE_VISIBILITY
+}
+
+function setTopicOrder(state: SettingsState, action: SetTopicOrder) {
+  return {
+    ...state,
+    topicOrder: action.topicOrder,
+  }
+}
+
+export interface SetTopicOrder {
+  type: ActionTypes.SETTINGS_SET_TOPIC_ORDER
+  topicOrder: string
+}
+
+function filterTopics(state: SettingsState, action: FilterTopics) {
+  return {
+    ...state,
+    topicFilter: action.topicFilter,
+  }
+}
+
+export interface FilterTopics {
+  type: ActionTypes.SETTINGS_FILTER_TOPICS
+  topicFilter: string
+}

app/src/reducers/Tree.ts

@@ -0,0 +1,50 @@
+import * as q from '../../../backend/src/Model'
+import { Action } from 'redux'
+import { createReducer } from './lib'
+import { TopicViewModel } from '../TopicViewModel'
+
+export interface TreeState {
+  tree?: q.Tree<TopicViewModel>
+  selectedTopic?: q.TreeNode<TopicViewModel>
+  filter?: string
+}
+
+export type Action = ShowTree | SelectTopic
+
+export enum ActionTypes {
+  TREE_SHOW_TREE = 'TREE_SHOW_TREE',
+  TREE_SELECT_TOPIC = 'TREE_SELECT_TOPIC',
+}
+
+export interface ShowTree {
+  type: ActionTypes.TREE_SHOW_TREE
+  tree?: q.Tree<TopicViewModel>
+  filter?: string
+}
+
+export interface SelectTopic {
+  type: ActionTypes.TREE_SELECT_TOPIC
+  selectedTopic?: q.TreeNode<TopicViewModel>
+}
+
+const initialState: TreeState = { }
+
+export const treeReducer = createReducer(initialState, {
+  TREE_SHOW_TREE: showTree,
+  TREE_SELECT_TOPIC: selectTopic,
+})
+
+function showTree(state: TreeState, action: ShowTree) {
+  return {
+    ...state,
+    tree: action.tree,
+    filter: action.filter,
+  }
+}
+
+function selectTopic(state: TreeState, action: SelectTopic) {
+  return {
+    ...state,
+    selectedTopic: action.selectedTopic,
+  }
+}

app/src/reducers/index.ts

@@ -1,76 +1,37 @@
-import * as q from '../../../backend/src/Model'
-
 import { Action, Reducer, combineReducers } from 'redux'
 
 import { trackEvent } from '../tracking'
-import { MqttOptions } from '../../../backend/src/DataSource'
 import { PublishState, publishReducer } from './Publish'
+import { ConnectionState, connectionReducer } from './Connection'
+import { SettingsState, settingsReducer } from './Settings'
+import { TreeState, treeReducer } from './Tree'
 
 export enum ActionTypes {
-  disconnect = 'DISCONNECT',
-  showError = 'SHOW_ERROR',
-  setAutoExpandLimit = 'SET_AUTO_EXPAND_LIMIT',
-  toggleSettingsVisibility = 'TOGGLE_SETTINGS_VISIBILITY',
-  setNodeOrder = 'SET_NODE_ORDER',
-  selectTopic = 'SELECT_TOPIC',
   showUpdateNotification = 'SHOW_UPDATE_NOTIFICATION',
   showUpdateDetails = 'SHOW_UPDATE_DETAILS',
-  connecting = 'CONNECTING',
-  connected = 'CONNECTED',
 }
 
 export interface CustomAction extends Action {
   type: ActionTypes,
-  autoExpandLimit?: number
-  nodeOrder?: NodeOrder
-  selectedTopic?: q.TreeNode
   showUpdateNotification?: boolean
   showUpdateDetails?: boolean
-  connectionOptions?: MqttOptions
-  connectionId?: string
-  error?: string
 }
 
 export interface AppState {
   tooBigReducer: TooBigOfState
+  tree: TreeState
+  settings: SettingsState,
   publish: PublishState
+  connection: ConnectionState
 }
 
 export interface TooBigOfState {
-  settings: SettingsState,
-  selectedTopic?: q.TreeNode
   showUpdateNotification?: boolean
   showUpdateDetails: boolean
-  connecting: boolean
-  connected: boolean
-  error?: string
-  connectionId?: string
-}
-
-export interface SettingsState {
-  autoExpandLimit: number
-  visible: boolean
-  nodeOrder: NodeOrder
-}
-
-export enum NodeOrder {
-  none = 'none',
-  messages = '#messages',
-  abc = 'abc',
-  topics = '#topics',
 }
 
 const initialBigState: TooBigOfState = {
-  settings: {
-    autoExpandLimit: 0,
-    nodeOrder: NodeOrder.none,
-    visible: false,
-  },
-  selectedTopic: undefined,
   showUpdateDetails: false,
-  connected: false,
-  connecting: false,
-  error: undefined,
 }
 
 const tooBigReducer: Reducer<TooBigOfState | undefined, CustomAction> = (state = initialBigState, action) => {
@@ -78,47 +39,8 @@ const tooBigReducer: Reducer<TooBigOfState | undefined, CustomAction> = (state =
     throw Error('No initial state')
   }
   trackEvent(action.type)
-  console.log(action, state)
+
   switch (action.type) {
-    case ActionTypes.setAutoExpandLimit:
-      if (action.autoExpandLimit === undefined) {
-        return state
-      }
-      return {
-        ...state,
-        settings: {
-          ...state.settings,
-          autoExpandLimit: action.autoExpandLimit,
-        },
-      }
-
-    case ActionTypes.toggleSettingsVisibility:
-      return {
-        ...state,
-        settings: {
-          ...state.settings,
-          visible: !state.settings.visible,
-        },
-      }
-
-    case ActionTypes.selectTopic:
-      if (!action.selectedTopic) {
-        return state
-      }
-      return {
-        ...state,
-        selectedTopic: action.selectedTopic,
-      }
-
-    case ActionTypes.setNodeOrder:
-      if (!action.nodeOrder) {
-        return state
-      }
-      return {
-        ...state,
-        settings: { ...state.settings, nodeOrder: action.nodeOrder },
-      }
-
     case ActionTypes.showUpdateNotification:
       return {
         ...state,
@@ -134,38 +56,6 @@ const tooBigReducer: Reducer<TooBigOfState | undefined, CustomAction> = (state =
         showUpdateDetails: action.showUpdateDetails,
       }
 
-    case ActionTypes.connecting:
-      if (!action.connectionId) {
-        return state
-      }
-      return {
-        ...state,
-        connected: false,
-        connecting: true,
-        connectionId: action.connectionId,
-      }
-
-    case ActionTypes.disconnect:
-      return {
-        ...state,
-        connected: false,
-        connecting: false,
-        connectionId: undefined,
-      }
-
-    case ActionTypes.connected:
-      return {
-        ...state,
-        connected: true,
-        connecting: false,
-      }
-
-    case ActionTypes.showError:
-      return {
-        ...state,
-        error: action.error,
-      }
-
     default:
       return state
   }
@@ -174,6 +64,9 @@ const tooBigReducer: Reducer<TooBigOfState | undefined, CustomAction> = (state =
 const reducer = combineReducers({
   tooBigReducer,
   publish: publishReducer,
+  connection: connectionReducer,
+  settings: settingsReducer,
+  tree: treeReducer,
 })
 
 export default reducer

app/src/tracking.ts

@@ -1,4 +1,3 @@
-import { rendererEvents } from '../../events'
 let userId = window.localStorage.getItem('userId')
 const sha1 = require('sha1')
 import { electronRendererTelementry } from 'electron-telemetry'
@@ -8,17 +7,19 @@ if (!userId) {
   window.localStorage.setItem('userId', userId)
 }
 
-const Nucleus = require('electron-nucleus')('5c3b3e0443b7cc00eec3782b', {
-  userId,
-  disableInDev: true,
-})
-
-export default Nucleus
+setInterval(() => {
+  try {
+    electronRendererTelementry.trackCustomEvent({ name: 'heapStatistics', payload: process.getHeapStatistics() })
+    electronRendererTelementry.trackCustomEvent({ name: 'cpuUsage', payload: process.getCPUUsage() })
+    electronRendererTelementry.trackCustomEvent({ name: 'runningSince', payload: performance.now() })
+  } catch (error) {
+    console.error(error)
+  }
+}, 60 * 1000)
 
 export function trackEvent(name: string) {
   if (name.match(/^@@redux/)) {
     return
   }
-  Nucleus.track(name)
   electronRendererTelementry.trackEvent(name)
 }

app/tsconfig.json

@@ -5,10 +5,11 @@
     "strictNullChecks": true,
     "strict": true,
     "lib": ["es2017", "dom"],
+    "moduleResolution": "node",
     "outDir": "./build/",
     "sourceMap": true,
-    "module": "commonjs",
-    "target": "es5",
+    "module": "esnext",
+    "target": "es2017",
     "jsx": "react"
   },
   "include": [
@@ -18,8 +19,8 @@
     "**/*.d.ts"
   ],
   "awesomeTypescriptLoaderOptions": {
-        "useCache": true,
-        "transpileModule": true,
-        "errorsAsWarnings": true
-    }
+    "useCache": true,
+    "transpileModule": true,
+    "errorsAsWarnings": true
+  }
 }

app/webpack.config.js

@@ -1,5 +1,6 @@
 const LiveReloadPlugin = require('webpack-livereload-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const HtmlWebpackPlugin = require('html-webpack-plugin')
 
 module.exports = {
     entry: {
@@ -7,19 +8,32 @@ module.exports = {
         bugtracking: "./src/bugtracking.ts",
     },
     output: {
+        chunkFilename: '[name].bundle.js',
         filename: "[name].bundle.js",
         path: __dirname + "/build"
     },
     optimization: {
-      removeAvailableModules: false,
-      removeEmptyChunks: false,
-      splitChunks: {
-        cacheGroups: {
-          vendors: {
-            filename: '[name].bundle.js'
+        splitChunks: {
+            chunks: 'async',
+            minSize: 30000,
+            maxSize: 0,
+            minChunks: 1,
+            maxAsyncRequests: 5,
+            maxInitialRequests: 3,
+            automaticNameDelimiter: '~',
+            name: true,
+            cacheGroups: {
+              vendors: {
+                test: /[\\/]node_modules[\\/]/,
+                priority: -10
+              },
+              default: {
+                minChunks: 2,
+                priority: -20,
+                reuseExistingChunk: true
+              }
+            }
           }
-        }
-      }
     },
 
     target: 'electron-renderer',
@@ -51,6 +65,7 @@ module.exports = {
 
     plugins: [
       new LiveReloadPlugin({}),
+      new HtmlWebpackPlugin({ template: './index.html', file: './build/index.html', inject: false }),
     //   new BundleAnalyzerPlugin(),
     ],
 

backend/package.json

@@ -9,7 +9,7 @@
     "test-inspect": "mocha --inspect-brk",
     "coverage": "nyc mocha",
     "debug": "ts-node --inspect ./src/index.ts",
-    "postinstall": "npm run build"
+    "postinstall": "yarn build"
   },
   "author": "",
   "license": "ISC",

backend/src/DataSource/MqttSource.ts

@@ -63,12 +63,12 @@ export class MqttSource implements DataSource<MqttOptions> {
       this.stateMachine.setConnected(true)
       client.subscribe(this.rootSubscription, (err: Error) => {
         if (err) {
-          throw new Error('mqtt subscription failed')
+          this.stateMachine.setError(err)
         }
       })
       client.subscribe('$SYS/#', (err: Error) => {
         if (err) {
-          throw new Error('mqtt subscription failed')
+          console.error('failed to subscribe to sys topic', err)
         }
       })
     })

backend/src/Model/Edge.ts

@@ -1,11 +1,11 @@
 import { Hashable, TreeNode } from './'
 const sha1 = require('sha1')
 
-export class Edge implements Hashable {
+export class Edge<ViewModel> implements Hashable {
   public name: string
 
-  public target!: TreeNode
-  public source?: TreeNode | undefined
+  public target!: TreeNode<ViewModel>
+  public source?: TreeNode<ViewModel> | undefined
   private cachedHash?: string
 
   constructor(name: string) {
@@ -13,19 +13,26 @@ export class Edge implements Hashable {
   }
 
   public edges() {
-    return this.target ? Object.values(this.target.edges) : []
+    return this.target ? this.target.edgeArray : []
   }
 
   public hash(): string {
     if (!this.cachedHash) {
-      const previousHash = (this.source && this.source.sourceEdge) ? this.source.sourceEdge.hash() : ''
+      let previousHash
+      if (this.source && this.source.sourceEdge) {
+        previousHash = this.source.sourceEdge.hash()
+      } else {
+        // Use the tree hash to distinguish between different trees
+        previousHash = this.source && this.source.isTree ? (this.source as any).hash() : ''
+      }
+
       this.cachedHash = `H${sha1(previousHash + this.name)}`
     }
 
     return this.cachedHash
   }
 
-  public firstEdge(): Edge {
+  public firstEdge(): Edge<ViewModel> {
     if (this.source && this.source.sourceEdge) {
       return this.source.sourceEdge.firstEdge()
     }

backend/src/Model/RingBuffer.ts

@@ -10,9 +10,19 @@ export class RingBuffer<T extends Lengthwise> {
   private start: number = 0
   private end: number = 0
 
-  constructor(capacity: number, maxItems = Infinity) {
+  constructor(capacity: number, maxItems = Infinity, ringBuffer?: RingBuffer<T>) {
     this.capacity = capacity
     this.maxItems = maxItems
+
+    if (ringBuffer) {
+      this.items = ringBuffer.toArray()
+      this.end = this.items.length
+      this.usage = this.items.length
+    }
+  }
+
+  public clone(): RingBuffer<T> {
+    return new RingBuffer(this.capacity, this.maxItems, this)
   }
 
   public toArray() {

backend/src/Model/Tree.ts

@@ -1,7 +1,55 @@
-import { Edge, TreeNode } from './'
+import { TreeNode } from './'
+import { EventBusInterface, makeConnectionMessageEvent, MqttMessage, EventDispatcher } from '../../../events'
+import { TreeNodeFactory } from './TreeNodeFactory'
+
+export class Tree<ViewModel> extends TreeNode<ViewModel> {
+  public connectionId?: string
+  public updateSource?: EventBusInterface
+  public nodeFilter?: (node: TreeNode<ViewModel>) => boolean
+  private subscriptionEvent?: any
+  public isTree = true
+  private cachedHash = `${Math.random()}`
+  private unmergedMessages: MqttMessage[] = []
+  public didReceive = new EventDispatcher<void, Tree<ViewModel>>(this)
 
-export class Tree extends TreeNode {
   constructor() {
     super(undefined, undefined)
   }
+
+  public updateWithConnection(emitter: EventBusInterface, connectionId: string, nodeFilter?:(node: TreeNode<ViewModel>) => boolean) {
+    this.updateSource = emitter
+    this.connectionId = connectionId
+    this.nodeFilter = nodeFilter
+
+    this.subscriptionEvent = makeConnectionMessageEvent(connectionId)
+    this.updateSource.subscribe(this.subscriptionEvent, this.handleNewData)
+  }
+
+  public hash() {
+    return this.cachedHash
+  }
+
+  public applyUnmergedChanges() {
+    this.unmergedMessages.forEach((msg) => {
+      const edges = msg.topic.split('/')
+      const node = TreeNodeFactory.fromEdgesAndValue<ViewModel, any>(edges, msg.payload)
+      node.mqttMessage = msg
+
+      if (!this.nodeFilter || this.nodeFilter(node)) {
+        this.updateWithNode(node.firstNode())
+      }
+    })
+    this.unmergedMessages = []
+  }
+
+  private handleNewData = (msg: MqttMessage) => {
+    this.unmergedMessages.push(msg)
+    this.didReceive.dispatch()
+  }
+
+  public stopUpdating() {
+    if (this.subscriptionEvent && this.updateSource) {
+      this.updateSource.unsubscribe(this.subscriptionEvent, this.handleNewData)
+    }
+  }
 }

backend/src/Model/TreeNode.ts

@@ -1,22 +1,39 @@
 import { Edge, Message, RingBuffer } from './'
 import { EventDispatcher, MqttMessage } from '../../../events'
 
-export class TreeNode {
-  public sourceEdge?: Edge
+export class TreeNode<ViewModel> {
+  public sourceEdge?: Edge<ViewModel>
   public message?: Message
   public mqttMessage?: MqttMessage
   public messageHistory: RingBuffer<Message> = new RingBuffer<Message>(3000, 100)
-  public edges: {[s: string]: Edge} = {}
+  public viewModel?: ViewModel
+  public edges: {[s: string]: Edge<ViewModel>} = {}
+  public edgeArray: Edge<ViewModel>[] = []
   public collapsed = false
   public messages: number = 0
   public lastUpdate: number = Date.now()
-  public onMerge = new EventDispatcher<void, TreeNode>(this)
-  public onEdgesChange = new EventDispatcher<void, TreeNode>(this)
-  public onMessage = new EventDispatcher<Message, TreeNode>(this)
-  private cachedLeafes?: TreeNode[]
-  private cachedLeafMessageCount?: number
+  public onMerge = new EventDispatcher<void, TreeNode<ViewModel>>(this)
+  public onEdgesChange = new EventDispatcher<void, TreeNode<ViewModel>>(this)
+  public onMessage = new EventDispatcher<Message, TreeNode<ViewModel>>(this)
+  public isTree = false
 
-  constructor(sourceEdge?: Edge, message?: Message) {
+  private cachedPath?: string
+  private cachedChildTopics?: TreeNode<ViewModel>[]
+  private cachedLeafMessageCount?: number
+  private cachedChildTopicCount?: number
+
+  public unconnectedClone() {
+    const node = new TreeNode<ViewModel>()
+    node.message = this.message
+    node.mqttMessage = this.mqttMessage
+    node.messageHistory = this.messageHistory.clone()
+    node.messages = this.messages
+    node.lastUpdate = this.lastUpdate
+
+    return node
+  }
+
+  constructor(sourceEdge?: Edge<ViewModel>, message?: Message) {
     if (sourceEdge) {
       this.sourceEdge = sourceEdge
       sourceEdge.target = this
@@ -24,7 +41,8 @@ export class TreeNode {
 
     message && this.setMessage(message)
     this.onMerge.subscribe(() => {
-      this.cachedLeafes = undefined
+      this.cachedChildTopics = undefined
+      this.cachedChildTopicCount = undefined
       this.cachedLeafMessageCount = undefined
       this.lastUpdate = Date.now()
     })
@@ -46,23 +64,28 @@ export class TreeNode {
     return `N${(this.sourceEdge ? this.sourceEdge.hash() : '')}`
   }
 
-  public firstNode(): TreeNode {
+  public firstNode(): TreeNode<ViewModel> {
     return this.sourceEdge && this.sourceEdge.source ? this.sourceEdge.source.firstNode() : this
   }
 
   public path(): string {
-    return this.branch()
-      .map(node => (node.sourceEdge && node.sourceEdge.name))
-      .filter(name => name !== undefined)
-      .join('/')
+    if (!this.cachedPath) {
+      return this.branch()
+        .map(node => (node.sourceEdge && node.sourceEdge.name))
+        .filter(name => name !== undefined)
+        .join('/')
+    }
+
+    return this.cachedPath
   }
 
-  private previous(): TreeNode | undefined {
+  private previous(): TreeNode<ViewModel> | undefined {
     return this.sourceEdge ? this.sourceEdge.source || undefined : undefined
   }
 
-  public addEdge(edge: Edge, emitUpdate: boolean = false) {
+  public addEdge(edge: Edge<ViewModel>, emitUpdate: boolean = false) {
     this.edges[edge.name] = edge
+    this.edgeArray.push(edge)
     edge.source = this
 
     if (emitUpdate) {
@@ -70,7 +93,7 @@ export class TreeNode {
     }
   }
 
-  public branch(): TreeNode[] {
+  public branch(): TreeNode<ViewModel>[] {
     const previous = this.previous()
     if (!previous) {
       return [this]
@@ -79,7 +102,7 @@ export class TreeNode {
     return previous.branch().concat([this])
   }
 
-  public updateWithNode(node: TreeNode) {
+  public updateWithNode(node: TreeNode<ViewModel>) {
     if (node.message) {
       this.setMessage(node.message)
       this.onMessage.dispatch(node.message)
@@ -90,39 +113,62 @@ export class TreeNode {
     this.onMerge.dispatch()
   }
 
-  public leafMessageCount() {
+  public leafMessageCount(): number {
     if (this.cachedLeafMessageCount === undefined) {
-      this.cachedLeafMessageCount = this.leafes()
-        .map(leaf => leaf.messages)
-        .reduce((a, b) => a + b)
+      this.cachedLeafMessageCount = this.edgeArray
+        .map(edge => edge.target.leafMessageCount())
+        .reduce((a, b) => a + b, 0) + this.messages
     }
 
-    return this.cachedLeafMessageCount
+    return this.cachedLeafMessageCount as number
   }
 
-  public leafCount(): number {
-    return this.leafes().length
+  public childTopicCount(): number {
+    if (this.cachedChildTopicCount === undefined) {
+      this.cachedChildTopicCount = this.edgeArray
+        .map(e => e.target.childTopicCount())
+        .reduce((a, b) => a + b, this.edgeArray.length === 0 ? 1 : 0)
+    }
+
+    return this.cachedChildTopicCount as number
   }
 
   public edgeCount(): number {
-    return Object.values(this.edges).length
+    return this.edgeArray.length
   }
 
-  public leafes(): TreeNode[] {
-    if (this.cachedLeafes === undefined) {
-      if (Object.values(this.edges).length === 0) {
-        return [this]
-      }
+  public childTopics(): TreeNode<ViewModel>[] {
+    if (this.cachedChildTopics === undefined) {
+      const initialValue = this.message && this.message.value ? [this] : []
 
-      this.cachedLeafes = Object.values(this.edges)
-        .map(e => e.target.leafes())
-        .reduce((a, b) => a.concat(b), [])
+      this.cachedChildTopics = this.edgeArray
+        .map(e => e.target.childTopics())
+        .reduce((a, b) => a.concat(b), initialValue)
     }
 
-    return this.cachedLeafes
+    return this.cachedChildTopics as TreeNode<ViewModel>[]
   }
 
-  private mergeEdges(node: TreeNode) {
+  public findNode (path: String): TreeNode<ViewModel> | undefined {
+    const topics = path.split('/')
+
+    return this.findChild(topics)
+  }
+
+  private findChild(edges: string[]): TreeNode<ViewModel> | undefined {
+    if (edges.length === 0) {
+      return this
+    }
+
+    const nextEdge = this.edges[edges[0]]
+    if (!nextEdge) {
+      return undefined
+    }
+
+    return nextEdge.target.findChild(edges.slice(1))
+  }
+
+  private mergeEdges(node: TreeNode<ViewModel>) {
     const edgeKeys = Object.keys(node.edges)
     let edgesDidUpdate = false
 

backend/src/Model/TreeNodeFactory.ts

@@ -5,21 +5,29 @@ interface HasLength {
 }
 
 export abstract class TreeNodeFactory {
-  public static fromEdgesAndValue<T extends HasLength>(edgeNames: string[], value?: T): TreeNode {
-    let currentNode: TreeNode = new Tree()
+  public static insertNodeAtPosition<ViewModel>(edgeNames: string[], node: TreeNode<ViewModel>) {
+    let currentNode: TreeNode<ViewModel> = new Tree()
+    let edge
     for (const edgeName of edgeNames) {
-      const edge = new Edge(edgeName)
-      const newNode = new TreeNode(edge)
-      edge.target = newNode
+      edge = new Edge<ViewModel>(edgeName)
       currentNode.addEdge(edge)
-      currentNode = newNode
+      currentNode = new TreeNode(edge)
+      edge.target = currentNode
     }
+    node.sourceEdge = edge
+    node.sourceEdge!.target = node
+  }
 
-    currentNode.setMessage({
+  public static fromEdgesAndValue<ViewModel, T extends HasLength>(edgeNames: string[], value?: T): TreeNode<ViewModel> {
+    const node = new TreeNode<ViewModel>()
+    node.setMessage({
       value,
       length: value ? value.length : 0,
       received: new Date(),
     })
-    return currentNode
+
+    this.insertNodeAtPosition<ViewModel>(edgeNames, node)
+
+    return node
   }
 }

backend/src/Model/spec/EventDispatcher.spec.ts

@@ -0,0 +1,42 @@
+import 'mocha'
+import { EventDispatcher } from '../../../../events'
+
+import { expect } from 'chai'
+
+describe('EventDispatcher', async () => {
+  it('should dispatch', async function () {
+    const dispatcher = new EventDispatcher<string, string>('me')
+    this.timeout(300)
+
+    setTimeout(() => dispatcher.dispatch('hello'), 5)
+    const response = await new Promise((resolve) => {
+      dispatcher.subscribe((msg) => {
+        resolve(msg)
+      })
+    })
+
+    expect(response).to.eq('hello')
+  })
+
+  it('should unsubscribe', async function () {
+    const dispatcher = new EventDispatcher<string, string>('me')
+    this.timeout(300)
+    let incrementee = 0
+    const callback = (msg: any) => {
+      incrementee += 1
+    }
+
+    dispatcher.subscribe(callback)
+    dispatcher.subscribe(callback)
+    dispatcher.unsubscribe(callback)
+
+    // Should increment to 1
+    dispatcher.dispatch('hello')
+    dispatcher.unsubscribe(callback)
+
+    // should not cause any increment
+    dispatcher.dispatch('hello')
+
+    expect(incrementee).to.eq(1)
+  })
+})

backend/src/Model/spec/Tree.spec.ts

@@ -1,5 +1,4 @@
 import 'mocha'
-import './TreeNode.findNode'
 
 import { Tree, TreeNodeFactory } from '../'
 

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

@@ -1,5 +1,4 @@
 import 'mocha'
-import './TreeNode.findNode'
 
 import { TreeNodeFactory } from '../'
 import { expect } from 'chai'

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

@@ -1,19 +0,0 @@
-import { TreeNode } from  '../'
-declare module  '../' {
-    interface TreeNode {
-      findNode(path: String): TreeNode | undefined
-    }
-}
-
-TreeNode.prototype.findNode = function (path: String): TreeNode | undefined {
-  const topics = path.split('/')
-  const edge = this.edges[topics[0]]
-  const remainingTopics = topics.slice(1, topics.length)
-  if (edge && remainingTopics.length === 0) {
-    return edge.target
-  } else if (edge) {
-    return edge.target.findNode(remainingTopics.join('/'))
-  }
-
-  return undefined
-}

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

@@ -1,4 +1,3 @@
-import './TreeNode.findNode'
 import 'mocha'
 
 import { TreeNodeFactory } from  '../'

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

@@ -1,5 +1,4 @@
 import 'mocha'
-import './TreeNode.findNode'
 
 import { TreeNodeFactory } from '../'
 import { expect } from 'chai'

backend/src/index.ts

@@ -55,8 +55,10 @@ export class ConnectionManager {
 
   public removeConnection(hash: string) {
     const connection = this.connections[hash]
-    connection.disconnect()
-    delete this.connections[hash]
+    if (connection) {
+      connection.disconnect()
+      delete this.connections[hash]
+    }
   }
 
   public closeAllConnections() {

docker/Dockerfile

@@ -0,0 +1,17 @@
+FROM node:11-stretch
+
+RUN DEBIAN_FRONTEND="noninteractive" apt-get update \
+  && apt-get install -y --no-install-recommends nano ffmpeg xvfb git-core tmux locales mosquitto x11vnc
+RUN apt-get install -yq --no-install-recommends libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 libnss3
+
+# Generate locales for TMUX
+RUN sed -i -e 's/# en_US.UTF-8 UTF-8/en_US.UTF-8 UTF-8/' /etc/locale.gen && locale-gen
+ENV LANG en_US.UTF-8
+ENV LANGUAGE en_US:en
+ENV LC_ALL en_US.UTF-8
+
+CMD /bin/bash
+
+COPY cloneBuildAndTest.sh ./
+VOLUME /app
+EXPOSE 5900

docker/cloneBuildAndTest.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+set -e
+
+git clone https://github.com/thomasnordquist/MQTT-Explorer.git /app
+cd /app
+git checkout travis-ui-tests
+
+yarn
+yarn build
+
+yarn ui-test
+yarn upload-video-artifacts

docker/testMounted.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+set -e
+
+yarn ui-test
+yarn upload-video-artifacts

events/EventBus.ts

@@ -2,10 +2,16 @@ import { IpcMain, IpcRenderer, ipcMain, ipcRenderer } from 'electron'
 
 import { Event } from './Events'
 
-interface EventBusInterface {
+export interface EventBusInterface {
   subscribe<MessageType>(event: Event<MessageType>, callback:(msg: MessageType) => void): void
   unsubscribeAll<MessageType>(event: Event<MessageType>): void
   emit<MessageType>(event: Event<MessageType>, msg: MessageType): void
+  unsubscribe<MessageType>(event: Event<MessageType>, callback: any): void
+}
+
+interface CallbackStore {
+  wrappedCallback: any
+  callback: any
 }
 
 class IpcMainEventBus implements EventBusInterface {
@@ -27,6 +33,10 @@ class IpcMainEventBus implements EventBusInterface {
     this.ipc.removeAllListeners(event.topic)
   }
 
+  public unsubscribe<MessageType>(event: Event<MessageType>, callback: any) {
+    throw new Error('Not implemented') // Todo: implement
+  }
+
   public emit<MessageType>(event: Event<MessageType>, msg: MessageType) {
     if (!this.client.isDestroyed()) {
       this.client.send(event.topic, msg)
@@ -36,18 +46,39 @@ class IpcMainEventBus implements EventBusInterface {
 
 class IpcRendererEventBus implements EventBusInterface {
   private ipc: IpcRenderer
+  private callbacks: CallbackStore[] = []
+
   constructor(ipc: IpcRenderer) {
     this.ipc = ipc
   }
 
   public subscribe<MessageType>(event: Event<MessageType>, callback:(msg: MessageType) => void) {
-    this.ipc.on(event.topic, (_event: any, arg: any) => callback(arg))
+    const wrappedCallback = (_event: any, arg: any) => {
+      callback(arg)
+    }
+
+    this.ipc.on(event.topic, wrappedCallback)
+
+    this.callbacks.push({
+      callback,
+      wrappedCallback,
+    })
   }
 
   public unsubscribeAll<MessageType>(event: Event<MessageType>) {
     this.ipc.removeAllListeners(event.topic)
   }
 
+  public unsubscribe<MessageType>(event: Event<MessageType>, callback: any) {
+    const item = this.callbacks.find(store => store.callback === callback)
+    if (!item) {
+      return
+    }
+
+    this.ipc.removeListener(event.topic, item.wrappedCallback)
+    this.callbacks = this.callbacks.filter(a => a !== item)
+  }
+
   public emit<MessageType>(event: Event<MessageType>, msg: MessageType) {
     this.ipc.send(event.topic, msg)
   }

package.json

@@ -1,17 +1,19 @@
 {
   "name": "MQTT-Explorer",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "description": "Explore your message queues",
   "main": "dist/src/electron.js",
   "scripts": {
     "start": "electron .",
-    "install": "cd app; npm install; cd ..",
-    "test": "npm run test-backend",
-    "build": "tsc && cd app && npm run build && cd ..",
-    "test-backend": "cd backend && npm run test && cd ..",
-    "prepare-release": "./prepare-release.sh",
+    "test": "yarn run test-backend",
+    "install": "cd app; yarn; cd ..",
+    "build": "tsc && cd app && yarn run build && cd ..",
+    "test-backend": "cd backend && yarn run test && cd ..",
+    "prepare-release": "./scripts/prepare-release.sh",
     "package": "ts-node package.ts",
-    "package-with-docker": "./package-with-docker.sh"
+    "ui-test": "./scripts/uiTests.sh",
+    "upload-video-artifacts": "./scripts/uploadVideoAsset.ts ui-test.mp4 ui-test.gif",
+    "package-with-docker": "./scripts/package-with-docker.sh"
   },
   "repository": {
     "type": "git",
@@ -42,32 +44,36 @@
   "license": "ISC",
   "devDependencies": {
     "@types/chai": "^4.1.7",
+    "@types/mime": "^2.0.0",
     "@types/mocha": "^5.2.5",
     "@types/mustache": "^0.8.32",
     "@types/node": "^10.12.18",
     "@types/semver": "^5.5.0",
     "@types/sha1": "^1.1.1",
-    "@types/socket.io": "^2.1.2",
     "axios": "^0.18.0",
     "chai": "^4.2.0",
-    "electron": "^4.0.1",
+    "electron": "^4.0.2",
     "electron-builder": "^20.38.4",
+    "mime": "^2.4.0",
     "mocha": "^5.2.0",
     "mustache": "^3.0.1",
     "nyc": "^13.1.0",
     "redux-thunk": "^2.3.0",
     "source-map-support": "^0.5.9",
+    "spectron": "^5.0.0",
     "ts-node": "^7.0.1",
     "tslint": "^5.12.0",
     "tslint-config-airbnb": "^5.11.1",
     "tslint-react": "^3.6.0",
     "tslint-strict-null-checks": "^1.0.1",
-    "typescript": "^3.2.2"
+    "typescript": "^3.2.2",
+    "webdriverio": "5.4"
   },
   "dependencies": {
-    "electron-telemetry": "git+https://github.com/thomasnordquist/electron-telemetry.git",
     "electron-debug": "^2.0.0",
+    "electron-is-dev": "^1.0.1",
     "electron-log": "^2.2.17",
+    "electron-telemetry": "git+https://github.com/thomasnordquist/electron-telemetry.git#dist",
     "electron-updater": "^4.0.6",
     "mqtt": "^2.18.8",
     "sha1": "^1.1.1"

scripts/prepare-release.sh

@@ -10,19 +10,17 @@ mkdir -p "$DIR"
 git clone .git "$DIR"
 cd $DIR
 
-
 # App
 cd app
-  npm install
-cd ..
-
-# Backend
-cd backend
-  npm install;
-  #npm run test
+  yarn
 cd ..
 
 # Build
-npm run build
+yarn
+yarn build
+rm -rf node_modules
+yarn install --production
+
 rm -rf app/node_modules
+
 cd "$ORIGINAL_DIR"

scripts/prepareVideo.sh

@@ -0,0 +1,21 @@
+#!/bin/bash
+cp app.mp4 original.mp4
+# The video starts with a few blank frames, we want to know when the stop
+ffprobe -f lavfi -i "movie=app.mp4,blackdetect[out0]" -show_entries tags=lavfi.black_start,lavfi.black_end -of default=nw=1 -v quiet > ffmpeg_info
+END_OF_BLACK=`cat ffmpeg_info | grep end | head -n1 | cut -d'=' -f2`
+
+# Trim black frames at start
+ffmpeg -ss $END_OF_BLACK -i app.mp4 app2.mp4
+mv app2.mp4 app.mp4
+
+# Generate gif palette
+ffmpeg -y -i app.mp4 -vf fps=10,scale=720:-1:flags=lanczos,palettegen palette.png
+
+# Create gif
+ffmpeg -i app.mp4 -i palette.png -filter_complex "fps=10,scale=720:-1:flags=lanczos[x];[x][1:v]paletteuse" app.gif
+
+# Clean up
+rm ffmpeg_info palette.png
+
+mv app.mp4 ui-test.mp4
+mv app.gif ui-test.gif

scripts/uiTests.sh

@@ -0,0 +1,51 @@
+#!/bin/bash
+
+function finish {
+  echo "Exiting, cleaning up"
+  tmux send-keys -t record q || echo "No tmux was running"
+  #echo kill $PID_XVFB $PID_CHROMEDRIVER $PID_MOSQUITTO
+  #kill $PID_XVFB $PID_CHROMEDRIVER $PID_MOSQUITTO
+}
+
+trap finish EXIT
+
+DIMENSIONS="1024x700"
+SCR=99
+# Start new window manager
+Xvfb :$SCR -screen 0 "$DIMENSIONS"x24 -ac &
+export PID_XVFB=$!
+sleep 2
+
+# Debug with VNC
+while [ "$TEST_EXIT_CODE" = "" ]; do x11vnc -passwd "bierbier" -display :$SCR; done &
+export PID_VNC=$!
+
+# Start mqtt broker
+mosquitto &
+export PID_MOSQUITTO=$!
+
+DISPLAY=:$SCR ./node_modules/.bin/chromedriver --url-base=wd/hub --port=9515 &
+export PID_CHROMEDRIVER=$!
+sleep 2
+
+# Delete old video
+rm ./app.mp4 || echo no need to delete ./app.mp4
+
+# Start recoring in tmux
+tmux new-session -d -s record ffmpeg -f x11grab -draw_mouse 0 -video_size $DIMENSIONS -i :$SCR -codec:v libx264 -r 20 ./app.mp4
+
+# Start tests
+node dist/src/spec/webdriverio.js
+TEST_EXIT_CODE=$?
+echo "Webriver exitet with $TEST_EXIT_CODE"
+
+# Stop recording
+tmux send-keys -t record q
+
+# Ensure video is written
+sleep 5
+
+# Process the video
+./scripts/prepareVideo.sh
+
+exit $TEST_EXIT_CODE

scripts/uploadVideoAsset.ts

@@ -0,0 +1,86 @@
+#!node_modules/.bin/ts-node
+import axios from 'axios'
+import * as fs from 'fs'
+import * as path from 'path'
+import * as mime from 'mime'
+
+const githubToken = process.env.GH_TOKEN
+
+async function tagUrl(tag: string): Promise<string | undefined> {
+  const response = await axios.get(`https://api.github.com/repos/thomasnordquist/mqtt-explorer/releases?access_token=${githubToken}`)
+  const tagRelease = response.data.find((release: any) => release.tag_name === tag)
+
+  return tagRelease ? cleanUploadUrl(tagRelease.upload_url) : undefined
+}
+
+async function createDraft(tag: string) {
+  console.log('create draft')
+
+  const response = await axios({
+    method: 'post',
+    url: `https://api.github.com/repos/thomasnordquist/mqtt-explorer/releases?access_token=${githubToken}`,
+    data: {
+      tag_name: tag,
+      name: tag.slice(1),
+      draft: true,
+    },
+  })
+
+  return cleanUploadUrl(response.data.upload_url)
+}
+
+function cleanUploadUrl(url: string) {
+  return url.match(/(.*){/)![1]
+}
+
+async function uploadAsset() {
+  const tag: string | undefined = process.env.GIT_TAG
+  const files = process.argv.slice(2)
+
+  if (!tag || files.length === 0) {
+    console.log('Nothing to do')
+    return
+  }
+
+  let uploadUrl: string | undefined
+  try {
+    uploadUrl = await tagUrl(tag)
+    if (!uploadUrl) {
+      console.log('tag does not exist')
+      try {
+        uploadUrl = await createDraft(tag)
+      } catch (error) {
+        console.error('failed to create draft', error.stack)
+        process.exit(1)
+      }
+    }
+  } catch (error) {
+    console.error('failed to find tag release', error.stack)
+    process.exit(1)
+  }
+
+  if (uploadUrl) {
+    console.log(uploadUrl)
+    for (const file of files) {
+      console.log('uploading file', file)
+      await uploadFile(uploadUrl, file)
+      console.log('upload completed')
+    }
+  }
+}
+
+async function uploadFile(uploadUrl: string, file: string) {
+  const data = fs.readFileSync(file)
+  const mimeType = mime.getType(path.extname(file))
+
+  return await axios({
+    data,
+    method: 'post',
+    url: `${uploadUrl}?name=${path.basename(file)}&access_token=${githubToken}`,
+    headers: {
+      'Content-Type': mimeType,
+    },
+  })
+}
+
+uploadAsset()

src/electron.ts

@@ -6,10 +6,16 @@ import { autoUpdater } from 'electron-updater'
 import * as log from 'electron-log'
 import { ConnectionManager, updateNotifier } from '../backend/src/index'
 import { electronTelemetryFactory } from 'electron-telemetry'
+const isDev = require('electron-is-dev')
 
-const electronTelemetry = electronTelemetryFactory('9b0c8ca04a361eb8160d98c5')
+let electronTelemetry: any
+if (!isDev) {
+  electronTelemetry = electronTelemetryFactory('9b0c8ca04a361eb8160d98c5')
+}
 
 const isDebugEnabled = Boolean(process.argv.find(arg => arg === 'debug'))
+const isFullscreen = Boolean(process.argv.find(arg => arg === '--fullscreen'))
+
 require('electron-debug')({ enabled: isDebugEnabled })
 
 autoUpdater.logger = log
@@ -28,6 +34,7 @@ function createWindow() {
   mainWindow = new BrowserWindow({
     width: 1024,
     height: 700,
+    show: false,
     webPreferences: {
       nodeIntegration: true,
       devTools: true,
@@ -35,9 +42,16 @@ function createWindow() {
     icon: iconPath,
   })
 
+  mainWindow.once('ready-to-show', () => {
+    if (mainWindow) {
+      isFullscreen && mainWindow.setFullScreen(true)
+      mainWindow.show()
+    }
+  })
+
   console.log('icon path', iconPath)
   // and load the index.html of the app.
-  mainWindow.loadFile('app/index.html')
+  mainWindow.loadFile('app/build/index.html')
 
   // Emitted when the window is closed.
   mainWindow.on('close', () => {

src/spec/mock-mqtt.ts

@@ -0,0 +1,106 @@
+import * as mqtt from 'mqtt'
+
+const settings = {
+  port: 1883,
+}
+
+let client: mqtt.MqttClient
+function startServer(): Promise<mqtt.MqttClient> {
+  return new Promise(async (resolve) => {
+    // const server = new mosca.Server(settings)
+    // await new Promise(resolve => server.once('ready', resolve))
+    client = await connectMqtt()
+    generateData(client)
+    resolve(client)
+  })
+}
+
+function connectMqtt(): Promise<mqtt.MqttClient> {
+  return new Promise((resolve) => {
+    const client = mqtt.connect('mqtt://127.0.0.1:1883', { username: 'thomas', password: 'bierbier' })
+    client.once('connect', () => {
+      resolve(client)
+    })
+  })
+}
+
+function temperature(base = 18, sineCoefficient = 2, offset = 0) {
+  const temp = base + Math.sin(Date.now() / 1000 / 5 + offset) * sineCoefficient + Math.random()
+
+  return String(Math.round(temp * 100) / 100)
+}
+
+export function stop() {
+  for (const interval of intervals) {
+    clearInterval(interval)
+  }
+  try {
+    client && client.end()
+  } catch {}
+}
+
+const intervals: any = []
+
+function generateData(client: mqtt.MqttClient) {
+  client.publish('livingroom/lamp/state', 'on', { retain: true, qos: 0 })
+  client.publish('livingroom/lamp/brightness', '128', { retain: true, qos: 0 })
+  client.publish('livingroom/thermostat/targetTemperature', '20°C', { retain: true, qos: 0 })
+  intervals.push(setInterval(() => client.publish('livingroom/temperature', temperature()), 1000))
+  intervals.push(setInterval(() => client.publish('livingroom/humidity', temperature(60, -2, 0)), 1000))
+
+  client.publish('livingroom/lamp-1/state', 'on', { retain: true, qos: 0 })
+  client.publish('livingroom/lamp-1/brightness', '48', { retain: true, qos: 0 })
+  client.publish('livingroom/lamp-2/state', 'off', { retain: true, qos: 0 })
+  client.publish('livingroom/lamp-2/brightness', '48', { retain: true, qos: 0 })
+
+  client.publish('kitchen/lamp/state', 'off', { retain: true, qos: 0 })
+  client.subscribe('kitchen/lamp/set')
+  client.on('message', (topic, payload) => {
+    if (topic === 'kitchen/lamp/set') {
+      setTimeout(() => client.publish('kitchen/lamp/state', payload, { retain: true, qos: 0 }), 500)
+    }
+  })
+
+  intervals.push(setInterval(() => client.publish('kitchen/temperature', temperature()), 1500))
+  intervals.push(setInterval(() => client.publish('kitchen/humidity', temperature(60, -5, 0)), 1800))
+
+  client.publish('garden/pump/state', 'off', { retain: true, qos: 0 })
+  client.publish('garden/water/level', '70%', { retain: true, qos: 0 })
+  client.publish('garden/lamps/state', 'off', { retain: true, qos: 0 })
+  client.publish('garden/lamps/state', 'off', { retain: true, qos: 0 })
+
+  client.publish('zigbee2mqtt/bridge/state', 'online', { retain: true, qos: 0 })
+  client.publish('ble2mqtt/bridge/state', 'online', { retain: true, qos: 0 })
+
+  // Used for demonstrating "clean up"
+  client.publish('test 123', 'Hello world', { retain: true, qos: 0 })
+  client.publish('hello', 'sunshine', { retain: true, qos: 0 })
+
+  // Just stuff
+  client.publish('01-80-C2-00-00-0F/LWT', 'offline', { retain: true, qos: 0 })
+
+  intervals.push(setInterval(() => {
+    client.publish('3d-printer/OctoPrint/temperature/bed', '{"_timestamp":1548589083,"actual":25.9,"target":0}')
+    client.publish('3d-printer/OctoPrint/temperature/tool0', '{"_timestamp":1548589093,"actual":26.4,"target":0}')
+  }, 3333))
+
+  let state = true
+  intervals.push(setInterval(() => {
+    state = !state
+    const enitityId = Math.round(Math.random() * 3000)
+    client.publish(
+      'actuality/showcase', `{
+        "tags":{
+          "entityId":${enitityId},
+          "entityType":"person",
+          "host":"d44ad81e10f9",
+          "server":"${state ? 'http://localhost/dataActuality' : 'http://localhost/dataStorage' }",
+          "status":"${state ? 'live' : 'inactive'}"},
+        "timestamp":${Date.now()}
+      }`.replace(/\s/g, ''),
+      { retain: true, qos: 0 },
+    )
+  }, 2102))
+}
+
+export default startServer

src/spec/scenarios/clearOldTopics.ts

@@ -0,0 +1,15 @@
+import { clickOn, sleep, writeText, expandTopic, moveToCenterOfElement } from '../util'
+import { Browser } from 'webdriverio'
+
+export async function clearOldTopics(browser: Browser<void>) {
+  const topics = ['hello', 'test 123']
+  for (const topic of topics) {
+    await expandTopic(topic, browser)
+    await sleep(1000)
+
+    const deleteButton = await browser.$('//button[contains(@title, "Delete retained topic")]')
+    await moveToCenterOfElement(deleteButton, browser)
+    await clickOn(deleteButton, browser)
+    await sleep(700)
+  }
+}

src/spec/scenarios/compareJsonSideBySide.ts

@@ -0,0 +1,14 @@
+import { clickOn, sleep, writeText, expandTopic, hideText } from '../util'
+import { Browser } from 'webdriverio'
+
+// Expects a topic with at least two messages to be selected
+export async function compareJsonSideBySide(browser: Browser<void>) {
+  const firstEntry = await browser.$('//span[contains(text(), "History")]/../../div/div[1]/div')
+  const secondEntry = await browser.$('//span[contains(text(), "History")]/../../div/div[2]/div')
+  await clickOn(secondEntry, browser)
+  await sleep(2000)
+  await clickOn(firstEntry, browser)
+  await sleep(2000)
+  await clickOn(firstEntry, browser)
+  await sleep(1000)
+}

src/spec/scenarios/connect.ts

@@ -0,0 +1,20 @@
+import { clickOn, sleep, writeText } from '../util'
+import { Browser } from 'webdriverio'
+
+export async function connectTo(host: string, browser: Browser<void>) {
+  await writeTextToInput('Host', host, browser)
+  await writeTextToInput('Username', 'thomas', browser, false)
+  await writeTextToInput('Password', 'bierbier', browser, false)
+
+  const connectButton = await browser.$('//button/span[contains(text(),"Connect")]')
+  clickOn(connectButton, browser)
+}
+
+async function writeTextToInput(name: string, text: string, browser: Browser<void>, wait: boolean = true) {
+  const input = await browser.$(`//label[contains(text(), "${name}")]/..//input`)
+  await clickOn(input, browser, 1)
+  wait && await sleep(500)
+  input.clearValue()
+  wait && await sleep(300)
+  await writeText(text, browser)
+}

src/spec/scenarios/copyTopicToClipboard.ts

@@ -0,0 +1,7 @@
+import { clickOn, sleep, writeText, expandTopic } from '../util'
+import { Browser } from 'webdriverio'
+
+export async function copyTopicToClipboard(browser: Browser<void>) {
+  const copyButton = await browser.$('//p[contains(text(), "Topic")]/span')
+  await clickOn(copyButton, browser, 1)
+}

src/spec/scenarios/copyValueToClipboard.ts

@@ -0,0 +1,7 @@
+import { clickOn, sleep, writeText, expandTopic } from '../util'
+import { Browser } from 'webdriverio'
+
+export async function copyValueToClipboard(browser: Browser<void>) {
+  const copyButton = await browser.$('//p[contains(text(), "Value")]/span')
+  await clickOn(copyButton, browser, 1)
+}

src/spec/scenarios/disconnect.ts

@@ -0,0 +1,7 @@
+import { clickOn } from '../util'
+import { Browser } from 'webdriverio'
+
+export async function disconnect(browser: Browser<void>) {
+  const connectButton = await browser.$('//button/span[contains(text(),"Disconnect")]')
+  clickOn(connectButton, browser)
+}

src/spec/scenarios/publishTopic.ts

@@ -0,0 +1,23 @@
+import { clickOn, sleep, writeText, delteTextWithBackspaces, expandTopic, moveToCenterOfElement, showText } from '../util'
+import { Browser } from 'webdriverio'
+
+export async function publishTopic(browser: Browser<void>) {
+  await expandTopic('kitchen/lamp/state', browser)
+  const topicInput = await browser.$('//textarea[contains(text(),"kitchen/lamp/state")][2]')
+  await clickOn(topicInput, browser)
+  await delteTextWithBackspaces(topicInput, browser, 120, 5)
+  await writeText('set', browser, 300)
+
+  const payloadInput = await browser.$('//*[contains(@class, "ace_text-input")]')
+  await payloadInput.setValue('o')
+  await sleep(300)
+  await payloadInput.setValue('n')
+  await sleep(700)
+
+  const publishButton = await browser.$('#publish-button')
+  await moveToCenterOfElement(publishButton, browser)
+  await showText('Lamp turns on', 1000, browser, 'top')
+  await sleep(500)
+
+  await clickOn(publishButton, browser)
+}

src/spec/scenarios/searchTree.ts

@@ -0,0 +1,15 @@
+import { clickOn, sleep, writeText, delteTextWithBackspaces, showText } from '../util'
+import { Browser } from 'webdriverio'
+
+export async function searchTree(text: string, browser: Browser<void>) {
+  const searchField = await browser.$('//input[contains(@placeholder, "Search")]')
+  await clickOn(searchField, browser, 1)
+  await writeText(text, browser, 100)
+  await sleep(1500)
+}
+
+export async function clearSearch(browser: Browser<void>) {
+  const searchField = await browser.$('//input[contains(@placeholder, "Search")]')
+  await clickOn(searchField, browser, 1)
+  await delteTextWithBackspaces(searchField, browser, 100)
+}

src/spec/scenarios/showJsonPreview.ts

@@ -0,0 +1,8 @@
+import { clickOn, sleep, writeText, expandTopic } from '../util'
+import { Browser } from 'webdriverio'
+
+export async function showJsonPreview(browser: Browser<void>) {
+  await expandTopic('actuality/showcase', browser)
+
+  await sleep(1000)
+}

src/spec/scenarios/showMenu.ts

@@ -0,0 +1,21 @@
+import { clickOn, sleep, writeText, expandTopic, moveToCenterOfElement } from '../util'
+import { Browser } from 'webdriverio'
+
+export async function showMenu(browser: Browser<void>) {
+  const menuButton = await browser.$('//button[contains(@aria-label, "Menu")]')
+  await clickOn(menuButton, browser)
+
+  // const brokerStatistics = await browser.$('//div[contains(@class, "BrokerStatistics")]/div[1]')
+  // moveToCenterOfElement(brokerStatistics, browser)
+  await sleep(2000)
+
+  const topicOrder = await browser.$('#select-node-order')
+  await clickOn(topicOrder, browser)
+  await sleep(1000)
+
+  const alphabetically = await browser.$('//li[contains(@data-value, "abc")]')
+  await clickOn(alphabetically, browser)
+  await sleep(2000)
+
+  await clickOn(menuButton, browser)
+}

src/spec/scenarios/showNumericPlot.ts

@@ -0,0 +1,11 @@
+import { clickOn, sleep, writeText, expandTopic, clickOnHistory } from '../util'
+import { Browser } from 'webdriverio'
+
+export async function showNumericPlot(browser: Browser<void>) {
+  await expandTopic('livingroom/temperature', browser)
+
+  await clickOnHistory(browser)
+
+  await sleep(1000)
+  await expandTopic('livingroom/humidity', browser)
+}

src/spec/util/expandTopic.ts

@@ -0,0 +1,29 @@
+import { Browser } from 'webdriverio'
+import { clickOn } from './'
+
+export async function expandTopic(path: string, browser: Browser<void>) {
+  const originalTopics = path.split('/')
+  let topics = path.split('/')
+  while (topics.length > 0 && !await topicMatches(topics, browser)) {
+    topics = topics.slice(0, topics.length - 1)
+  }
+  if (topics.length === 0) {
+    throw Error('could not expand topics, no match found')
+  }
+
+  while (topics.length <= originalTopics.length) {
+    const match = await browser.$(topicSelector(topics))
+    await clickOn(match, browser)
+    topics.push(originalTopics[topics.length])
+  }
+}
+
+async function topicMatches(topics: string[], browser: Browser<void>) {
+  const result = await browser.$(topicSelector(topics))
+  return result.isExisting()
+}
+
+function topicSelector(topics: string[]) {
+  const suffix = topics.map(topic => `*[contains(text(), "${topic}")]`).join('/../../..//')
+  return `//${suffix}`
+}

src/spec/util/index.ts

@@ -0,0 +1,130 @@
+import { Element, Browser } from 'webdriverio'
+export { expandTopic } from './expandTopic'
+
+export function sleep(ms: number, required = false) {
+  return new Promise((resolve) => {
+    if (required) {
+      setTimeout(resolve, ms)
+    } else {
+      setTimeout(resolve, ms)
+    }
+  })
+}
+
+export async function writeText(text: string, browser: Browser<void>, delay = 0) {
+  for (const c of text.split('')) {
+    await browser.keys([c])
+    await sleep(delay)
+  }
+}
+
+export async function delteTextWithBackspaces(element: Element<void>, browser: Browser<void>, delay = 0, count = 0) {
+  const length = count > 0 ? count : (await element.getValue()).length
+  for (let i = 0; i < length; i += 1) {
+    await browser.keys(['Backspace'])
+    await sleep(delay)
+  }
+}
+
+export async function moveToCenterOfElement(element: Element<void>, browser: Browser<void>) {
+  const { x, y } = await element.getLocation()
+  const { width, height } = await element.getSize()
+
+  const js = `{
+    const targetX = ${x + width / 2}
+    const targetY = ${y + height / 2}
+    const duration = 500
+
+    const maxStepSize = 10
+    const e = document.getElementById("bier")
+    const top = parseFloat(e.style.top)
+    const left = parseFloat(e.style.left)
+    const deltaY = targetY - top
+    const deltaX = targetX - left
+
+    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
+    const steps = Math.ceil(distance / maxStepSize)
+
+    const stepX = deltaX / steps
+    const stepY = deltaY / steps
+    let currentStep = 0
+    function getCloser() {
+      e.style.left = String(left + (stepX * currentStep)) + 'px'
+      e.style.top = String(top + (stepY * currentStep)) + 'px'
+      if (currentStep < steps) {
+        setTimeout(() => {
+          currentStep += 1
+          if (currentStep === steps) {
+            e.style.left = String(targetX + 5) + 'px'
+            e.style.top = String(targetY + 1) + 'px'
+          } else {
+            getCloser()
+          }
+        }, duration/steps)
+      }
+    }
+	  getCloser()
+  }`
+  await browser.execute(js)
+  await sleep(550, true)
+  await element.moveTo()
+}
+
+export async function clickOnHistory(browser: Browser<void>) {
+  const messageHistory = await browser.$('//span/*[contains(text(), "History")]')
+  await clickOn(messageHistory, browser)
+}
+
+export async function clickOn(element: Element<void>, browser: Browser<void>, clicks = 1) {
+  await moveToCenterOfElement(element, browser)
+  for (let i = 0; i < clicks; i += 1) {
+    await element.click()
+    await sleep(50)
+  }
+}
+
+export async function createFakeMousePointer(browser: Browser<void>) {
+  const addCursorImage = 'const i=document.createElement("img");'
+  + 'i.src="../cursor.png";'
+  + 'i.width="32";'
+  + 'i.height="32";'
+  + 'i.id="bier";'
+  + 'i.style="position: fixed; z-index:10000000; filter: invert(100%);left: 0px; top: 0px;";'
+  + 'document.body.appendChild(i)'
+
+  await browser.execute(addCursorImage)
+}
+
+export async function showText(text: string, duration: number = 0, browser: Browser<void>, location: 'top' | 'bottom' | 'middle' = 'bottom') {
+  const positions = {
+    top: 0,
+    bottom: -65,
+    middle: -32,
+  }
+  const js = `
+    const postition = "${positions[location]}vh"
+    let previousDiv = document.getElementById('tests-text-overlay')
+    previousDiv && previousDiv.remove()
+    let div = document.createElement('div')
+    div.id = "tests-text-overlay"
+    div.style = "background-color: rgba(0, 0, 0, 0.8);position: fixed;left: 5vw;z-index: 1000000;margin: 30vw auto 50vw;border-radius: 16px;right: 5vw;bottom: "+ postition +";"
+    let div2 = document.createElement('div')
+    div2.style = "text-align: center;font-size: 4em;color: white;"
+    div2.innerHTML = \`${text}\`
+    div.appendChild(div2)
+    document.body.appendChild(div)
+    if (${duration} > 0) {
+      setTimeout(() => div.remove(), ${duration})
+    }
+  `
+  browser.execute(js)
+}
+
+export async function hideText(browser: Browser<void>) {
+  const js = `
+    let previousDiv = document.getElementById('tests-text-overlay')
+    previousDiv && previousDiv.remove()
+  `
+  browser.execute(js)
+  await sleep(600)
+}

src/spec/webdriverio.ts

@@ -0,0 +1,101 @@
+process.on('unhandledRejection', (error: Error) => {
+  console.error('unhandledRejection', error.message, error.stack)
+  process.exit(1)
+})
+
+import * as webdriverio from 'webdriverio'
+import * as os from 'os'
+import mockMqtt, { stop } from './mock-mqtt'
+import { connectTo } from './scenarios/connect'
+import { disconnect } from './scenarios/disconnect'
+import { showNumericPlot } from './scenarios/showNumericPlot'
+import { showJsonPreview } from './scenarios/showJsonPreview'
+import { compareJsonSideBySide } from './scenarios/compareJsonSideBySide'
+import { searchTree, clearSearch } from './scenarios/searchTree'
+import { copyTopicToClipboard } from './scenarios/copyTopicToClipboard'
+import { copyValueToClipboard } from './scenarios/copyValueToClipboard'
+import { publishTopic } from './scenarios/publishTopic'
+import { clearOldTopics } from './scenarios/clearOldTopics'
+import { showMenu } from './scenarios/showMenu'
+
+import { createFakeMousePointer, sleep, showText, hideText, clickOnHistory } from './util'
+
+const binary = os.platform() === 'darwin' ? 'Electron.app/Contents/MacOS/Electron' : 'electron'
+const fullscreen = os.platform() === 'darwin' ? [] : ['--fullscreen']
+
+const options = {
+  host: 'localhost', // Use localhost as chrome driver server
+  port: 9515, // "9515" is the port opened by chrome driver.
+  capabilities: {
+    browserName: 'electron',
+    chromeOptions: {
+      binary: `${__dirname}/../../../node_modules/electron/dist/${binary}`,
+      args: [`--app=${__dirname}/../../..`, '--force-device-scale-factor=1', '--no-sandbox', '--disable-dev-shm-usage', '--disable-extensions'].concat(fullscreen),
+    },
+    windowTypes: ['app', 'webview'],
+  },
+}
+
+async function doStuff() {
+  await mockMqtt()
+  const browser = await webdriverio.remote(options)
+  await createFakeMousePointer(browser)
+
+  await connectTo('127.0.0.1', browser)
+  await sleep(1000)
+
+  await sleep(1000)
+  await showText('Overview of topics', 2000, browser, 'top')
+  await sleep(2000)
+  await showText('Indicates which topics change', 2000, browser, 'bottom')
+  await sleep(3000)
+
+  await showText('Plot topics', 2000, browser)
+  await showNumericPlot(browser)
+  await sleep(2000)
+
+  await showText('Formatted messages', 2000, browser, 'top')
+  await showJsonPreview(browser)
+  await sleep(2000)
+
+  await showText('Compare messages', 2000, browser, 'top')
+  await compareJsonSideBySide(browser)
+  await hideText(browser)
+
+  await showText('Publish topics', 2000, browser, 'top')
+  await clickOnHistory(browser)
+  await publishTopic(browser)
+  await sleep(1000)
+
+  await showText('Copy to Clipboard', 2000, browser)
+  await copyTopicToClipboard(browser)
+  await hideText(browser)
+  await copyValueToClipboard(browser)
+  await sleep(1000)
+
+  await showText('Search topic hierarchy', 0, browser, 'middle')
+  await searchTree('temp', browser)
+  await hideText(browser)
+  await showText('Topics containing "temp"', 1500, browser)
+  await sleep(1500)
+  await clearSearch(browser)
+  await sleep(1000)
+
+  await hideText(browser)
+  await showText('Delete retained topics', 0, browser)
+  await clearOldTopics(browser)
+  await hideText(browser)
+
+  await showText('Display Options', 2000, browser)
+  await showMenu(browser)
+
+  await sleep(2000)
+  await disconnect(browser)
+  await sleep(3000)
+
+  browser.closeWindow()
+
+  stop()
+}
+
+doStuff()

tsconfig.json

@@ -5,9 +5,11 @@
     "strictNullChecks": true,
     "outDir": "./dist",
     "strict": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
     "sourceRoot": "src/",
     "lib": ["es2017", "dom"],
     "sourceMap": true
   },
-  "include": ["src/electron.ts"]
+  "include": ["src/electron.ts", "src/spec/electron.ts", "src/spec/webdriverio.ts"]
 }