Apply automatic changes

.gitignore

@@ -1,9 +1,4 @@
 node_modules
-backend/coverage
-backend/.nyc_output
 build
-/dist
-.DS_Store
-test.dot
-test.png
-.awcache
+.bundle
+_site

.travis.yml

@@ -1,36 +0,0 @@
-language: node_js
-
-services:
-  - xvfb
-
-cache:
-  directories:
-  - node_modules
-  - $HOME/.cache/electron
-  - $HOME/.cache/electron-builder
-  - $HOME/.npm/_prebuilds
-
-node_js:
-  - "10"
-
-os:
-  - linux
-  - osx
-
-dist: xenial
-
-services:
-  - docker
-
-install:
-  - yarn install
-  - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then docker build docker --tag uitest; fi;
-
-script:
-  - 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

CNAME

@@ -0,0 +1 @@
+mqtt-explorer.com

Changelog.md

@@ -0,0 +1,150 @@
+[back](./)
+
+# 0.4.0-beta1
+
+  - Fix Copy & Paste
+  - Allow setting QoS for subscriptions
+  - Show Meassge ID (for QoS > 0)
+  - Improve JSON editor
+  - Allow multiple connections to the same broker from MQTT Explorer (random client ids)
+  - Remove recursive topic removal limit
+  - Retain focus on publish input fields when publishing
+  - Fix editor layout issue
+  - Fix password input
+  - Fix charts where json properties contain periods
+  - Fix publish sidebar width
+  - Fix plot range selection
+  - Update Electron
+
+A downgrade to a version prior to 0.4.0 is due to a new configuration format not possible.
+
+
+# 0.3.5
+  - Add keyboard support
+    - Navigate with arrow keys and tab return and escape
+    - Delete topic topics with the delete key
+  - Add time range options to chart panel
+  - Add "Clear Data" option to charts
+  - Add support for client certificates
+  - Add support for SNI (encryption-related)
+  - Make connection profile list scrollable
+  - Improve the browsability of previous messages
+  - various small fixes
+
+# 0.3.2
+  - Ubuntu performance fix
+
+# 0.3.1
+  - Ubuntu bugfix release
+  - Add wayland support (for snap builds)
+
+# 0.3.0
+
+  - Add functionality to plot JSON data
+  - Add chart panel, containing multiple plots (bottom panel)
+  - Chart panel and settings will be restored on restart
+  - Charts can be paused
+  - Panels can be hidden/overlap others completely
+  - Plot range can be customized
+  - Plot interpolation can be customized
+  - Migrated public broker from iot.eclipse.org to mqtt.eclipse.org
+  - Fix unrounded time intervals in the message history
+  - Fix weird plot curve interpolations
+
+# 0.2.6
+
+  - Add a pause function
+  - Add light / dark themes
+  - Add localized date formatting
+  - Allow pinning self-signed-certificates
+  - Allow copying values from the message history
+  - Buffer changes while in pause mode
+  - Improve layout
+  - Improve numeric plot layout and smooth curves
+  - Improve scroll behavior message history
+  - Improve performance and memory footprint by ~30%
+  - Improve text selection behavior (Ctrl+A) for value preview and history
+  - Immediately apply changed settings
+  - Fix memory leak on search and disconnect
- Deactivate auto-update for Windows portable releases.
+  - Fix OSX code-signing and auto-update
+
+# 0.2.3
+
+  - Highlight differences in the last received message with a "diff" view
+  - Magnify app content with "Ctrl +", "Ctrl -", "Ctrl 0"
+  - Make user interactions more predictable by removing "select topic on mouse over"
+  - Add "Quick Preview" setting, to enable topic selection on mouse over
+  - Add JSON formatter
+  - Show error when connection to the mqtt broker is lost
+  - Fix bug where mqtt explorer resets the tree after a reconnect
+  - Fix MQTT-Client id
+
+# 0.2.1, 0.2.2
+  - Release for Mac App Store
+  - Release for Microsoft Store
+
+# 0.2.0
+
+  - Support multiple connection profiles
+  - Support custom subscriptions
+  - Delete Topics recursively
+  - Add option to disable activity indicator
+  - Add connection health indicator
+  - Remember settings after exiting the app
+  - Fixed ws:// connections
+  - Fixed exception after failed connection
+  - Rework topic selection indicator
+  - Fix scrollbar (draggable scroll handle)
+  - Improve look & feel
+  - Reduce binary size by ~60%
+
+# 0.1.3
+
+  - Add search function
+  - Fix a crash on windows
+  - Greatly increase performance
+  - Show broker statistics (Settings sidebar)
+  - Show more content in topic preview
+  - Make right sidebar resizable
+  - Fixed minor visual imperfections.
+
+# 0.1.0
+
+  - Improved error handling


+  - Fix plot
+
+# 0.0.9
+
+  - Plot topics in a graph

+  - Delete retained topics with click

+  - Show message retention and QoS
+  - Set message retain and QoS
+  - Subscribed to broker statistics: $SYS topic
+  - Improved error handling


+  - Fixed Copy&Paste

+  - Crash on launch

+
+# 0.0.7
+
+  - Fix auto-updater fallback
+  - Add debugging capability
+  - Show receive date next to message value
+  - Fix certificate validation switch
+
+# 0.0.6
+
+  - Fix issue with mqtt authentication
+
+# 0.0.5
+  - Fix performance bottleneck
+  - Fix missing icons
+
+# 0.0.3
+  - Add splash screen
+
+# 0.0.2
+  - Fixed bugs
+  - Added bugs
+
+# 0.0.1
+  - Initial Release

Gemfile

@@ -0,0 +1,2 @@
+source 'https://rubygems.org'
+gem 'github-pages', group: :jekyll_plugins

Gemfile.lock

@@ -0,0 +1,248 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    activesupport (4.2.10)
+      i18n (~> 0.7)
+      minitest (~> 5.1)
+      thread_safe (~> 0.3, >= 0.3.4)
+      tzinfo (~> 1.1)
+    addressable (2.5.2)
+      public_suffix (>= 2.0.2, < 4.0)
+    coffee-script (2.4.1)
+      coffee-script-source
+      execjs
+    coffee-script-source (1.11.1)
+    colorator (1.1.0)
+    commonmarker (0.17.13)
+      ruby-enum (~> 0.5)
+    concurrent-ruby (1.1.5)
+    dnsruby (1.61.2)
+      addressable (~> 2.5)
+    em-websocket (0.5.1)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.6.0)
+    ethon (0.12.0)
+      ffi (>= 1.3.0)
+    eventmachine (1.2.7)
+    execjs (2.7.0)
+    faraday (0.15.4)
+      multipart-post (>= 1.2, < 3)
+    ffi (1.10.0)
+    forwardable-extended (2.6.0)
+    gemoji (3.0.0)
+    github-pages (197)
+      activesupport (= 4.2.10)
+      github-pages-health-check (= 1.16.1)
+      jekyll (= 3.7.4)
+      jekyll-avatar (= 0.6.0)
+      jekyll-coffeescript (= 1.1.1)
+      jekyll-commonmark-ghpages (= 0.1.5)
+      jekyll-default-layout (= 0.1.4)
+      jekyll-feed (= 0.11.0)
+      jekyll-gist (= 1.5.0)
+      jekyll-github-metadata (= 2.12.1)
+      jekyll-mentions (= 1.4.1)
+      jekyll-optional-front-matter (= 0.3.0)
+      jekyll-paginate (= 1.1.0)
+      jekyll-readme-index (= 0.2.0)
+      jekyll-redirect-from (= 0.14.0)
+      jekyll-relative-links (= 0.6.0)
+      jekyll-remote-theme (= 0.3.1)
+      jekyll-sass-converter (= 1.5.2)
+      jekyll-seo-tag (= 2.5.0)
+      jekyll-sitemap (= 1.2.0)
+      jekyll-swiss (= 0.4.0)
+      jekyll-theme-architect (= 0.1.1)
+      jekyll-theme-cayman (= 0.1.1)
+      jekyll-theme-dinky (= 0.1.1)
+      jekyll-theme-hacker (= 0.1.1)
+      jekyll-theme-leap-day (= 0.1.1)
+      jekyll-theme-merlot (= 0.1.1)
+      jekyll-theme-midnight (= 0.1.1)
+      jekyll-theme-minimal (= 0.1.1)
+      jekyll-theme-modernist (= 0.1.1)
+      jekyll-theme-primer (= 0.5.3)
+      jekyll-theme-slate (= 0.1.1)
+      jekyll-theme-tactile (= 0.1.1)
+      jekyll-theme-time-machine (= 0.1.1)
+      jekyll-titles-from-headings (= 0.5.1)
+      jemoji (= 0.10.2)
+      kramdown (= 1.17.0)
+      liquid (= 4.0.0)
+      listen (= 3.1.5)
+      mercenary (~> 0.3)
+      minima (= 2.5.0)
+      nokogiri (>= 1.8.5, < 2.0)
+      rouge (= 2.2.1)
+      terminal-table (~> 1.4)
+    github-pages-health-check (1.16.1)
+      addressable (~> 2.3)
+      dnsruby (~> 1.60)
+      octokit (~> 4.0)
+      public_suffix (~> 3.0)
+      typhoeus (~> 1.3)
+    html-pipeline (2.11.0)
+      activesupport (>= 2)
+      nokogiri (>= 1.4)
+    http_parser.rb (0.6.0)
+    i18n (0.9.5)
+      concurrent-ruby (~> 1.0)
+    jekyll (3.7.4)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 0.7)
+      jekyll-sass-converter (~> 1.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 1.14)
+      liquid (~> 4.0)
+      mercenary (~> 0.3.3)
+      pathutil (~> 0.9)
+      rouge (>= 1.7, < 4)
+      safe_yaml (~> 1.0)
+    jekyll-avatar (0.6.0)
+      jekyll (~> 3.0)
+    jekyll-coffeescript (1.1.1)
+      coffee-script (~> 2.2)
+      coffee-script-source (~> 1.11.1)
+    jekyll-commonmark (1.3.1)
+      commonmarker (~> 0.14)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-commonmark-ghpages (0.1.5)
+      commonmarker (~> 0.17.6)
+      jekyll-commonmark (~> 1)
+      rouge (~> 2)
+    jekyll-default-layout (0.1.4)
+      jekyll (~> 3.0)
+    jekyll-feed (0.11.0)
+      jekyll (~> 3.3)
+    jekyll-gist (1.5.0)
+      octokit (~> 4.2)
+    jekyll-github-metadata (2.12.1)
+      jekyll (~> 3.4)
+      octokit (~> 4.0, != 4.4.0)
+    jekyll-mentions (1.4.1)
+      html-pipeline (~> 2.3)
+      jekyll (~> 3.0)
+    jekyll-optional-front-matter (0.3.0)
+      jekyll (~> 3.0)
+    jekyll-paginate (1.1.0)
+    jekyll-readme-index (0.2.0)
+      jekyll (~> 3.0)
+    jekyll-redirect-from (0.14.0)
+      jekyll (~> 3.3)
+    jekyll-relative-links (0.6.0)
+      jekyll (~> 3.3)
+    jekyll-remote-theme (0.3.1)
+      jekyll (~> 3.5)
+      rubyzip (>= 1.2.1, < 3.0)
+    jekyll-sass-converter (1.5.2)
+      sass (~> 3.4)
+    jekyll-seo-tag (2.5.0)
+      jekyll (~> 3.3)
+    jekyll-sitemap (1.2.0)
+      jekyll (~> 3.3)
+    jekyll-swiss (0.4.0)
+    jekyll-theme-architect (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-cayman (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-dinky (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-hacker (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-leap-day (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-merlot (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-midnight (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-minimal (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-modernist (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-primer (0.5.3)
+      jekyll (~> 3.5)
+      jekyll-github-metadata (~> 2.9)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-slate (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-tactile (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-time-machine (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-titles-from-headings (0.5.1)
+      jekyll (~> 3.3)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    jemoji (0.10.2)
+      gemoji (~> 3.0)
+      html-pipeline (~> 2.2)
+      jekyll (~> 3.0)
+    kramdown (1.17.0)
+    liquid (4.0.0)
+    listen (3.1.5)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+      ruby_dep (~> 1.2)
+    mercenary (0.3.6)
+    mini_portile2 (2.4.0)
+    minima (2.5.0)
+      jekyll (~> 3.5)
+      jekyll-feed (~> 0.9)
+      jekyll-seo-tag (~> 2.1)
+    minitest (5.11.3)
+    multipart-post (2.0.0)
+    nokogiri (1.10.2)
+      mini_portile2 (~> 2.4.0)
+    octokit (4.14.0)
+      sawyer (~> 0.8.0, >= 0.5.3)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (3.0.3)
+    rb-fsevent (0.10.3)
+    rb-inotify (0.10.0)
+      ffi (~> 1.0)
+    rouge (2.2.1)
+    ruby-enum (0.7.2)
+      i18n
+    ruby_dep (1.5.0)
+    rubyzip (1.2.2)
+    safe_yaml (1.0.5)
+    sass (3.7.4)
+      sass-listen (~> 4.0.0)
+    sass-listen (4.0.0)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+    sawyer (0.8.1)
+      addressable (>= 2.3.5, < 2.6)
+      faraday (~> 0.8, < 1.0)
+    terminal-table (1.8.0)
+      unicode-display_width (~> 1.1, >= 1.1.1)
+    thread_safe (0.3.6)
+    typhoeus (1.3.1)
+      ethon (>= 0.9.0)
+    tzinfo (1.2.5)
+      thread_safe (~> 0.1)
+    unicode-display_width (1.5.0)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  github-pages
+
+BUNDLED WITH
+   2.0.1

LICENSE

@@ -1,661 +0,0 @@
-                    GNU AFFERO GENERAL PUBLIC LICENSE
-                       Version 3, 19 November 2007
-
- Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
- Everyone is permitted to copy and distribute verbatim copies
- of this license document, but changing it is not allowed.
-
-                            Preamble
-
-  The GNU Affero General Public License is a free, copyleft license for
-software and other kinds of works, specifically designed to ensure
-cooperation with the community in the case of network server software.
-
-  The licenses for most software and other practical works are designed
-to take away your freedom to share and change the works.  By contrast,
-our General Public Licenses are intended to guarantee your freedom to
-share and change all versions of a program--to make sure it remains free
-software for all its users.
-
-  When we speak of free software, we are referring to freedom, not
-price.  Our General Public Licenses are designed to make sure that you
-have the freedom to distribute copies of free software (and charge for
-them if you wish), that you receive source code or can get it if you
-want it, that you can change the software or use pieces of it in new
-free programs, and that you know you can do these things.
-
-  Developers that use our General Public Licenses protect your rights
-with two steps: (1) assert copyright on the software, and (2) offer
-you this License which gives you legal permission to copy, distribute
-and/or modify the software.
-
-  A secondary benefit of defending all users' freedom is that
-improvements made in alternate versions of the program, if they
-receive widespread use, become available for other developers to
-incorporate.  Many developers of free software are heartened and
-encouraged by the resulting cooperation.  However, in the case of
-software used on network servers, this result may fail to come about.
-The GNU General Public License permits making a modified version and
-letting the public access it on a server without ever releasing its
-source code to the public.
-
-  The GNU Affero General Public License is designed specifically to
-ensure that, in such cases, the modified source code becomes available
-to the community.  It requires the operator of a network server to
-provide the source code of the modified version running there to the
-users of that server.  Therefore, public use of a modified version, on
-a publicly accessible server, gives the public access to the source
-code of the modified version.
-
-  An older license, called the Affero General Public License and
-published by Affero, was designed to accomplish similar goals.  This is
-a different license, not a version of the Affero GPL, but Affero has
-released a new version of the Affero GPL which permits relicensing under
-this license.
-
-  The precise terms and conditions for copying, distribution and
-modification follow.
-
-                       TERMS AND CONDITIONS
-
-  0. Definitions.
-
-  "This License" refers to version 3 of the GNU Affero General Public License.
-
-  "Copyright" also means copyright-like laws that apply to other kinds of
-works, such as semiconductor masks.
-
-  "The Program" refers to any copyrightable work licensed under this
-License.  Each licensee is addressed as "you".  "Licensees" and
-"recipients" may be individuals or organizations.
-
-  To "modify" a work means to copy from or adapt all or part of the work
-in a fashion requiring copyright permission, other than the making of an
-exact copy.  The resulting work is called a "modified version" of the
-earlier work or a work "based on" the earlier work.
-
-  A "covered work" means either the unmodified Program or a work based
-on the Program.
-
-  To "propagate" a work means to do anything with it that, without
-permission, would make you directly or secondarily liable for
-infringement under applicable copyright law, except executing it on a
-computer or modifying a private copy.  Propagation includes copying,
-distribution (with or without modification), making available to the
-public, and in some countries other activities as well.
-
-  To "convey" a work means any kind of propagation that enables other
-parties to make or receive copies.  Mere interaction with a user through
-a computer network, with no transfer of a copy, is not conveying.
-
-  An interactive user interface displays "Appropriate Legal Notices"
-to the extent that it includes a convenient and prominently visible
-feature that (1) displays an appropriate copyright notice, and (2)
-tells the user that there is no warranty for the work (except to the
-extent that warranties are provided), that licensees may convey the
-work under this License, and how to view a copy of this License.  If
-the interface presents a list of user commands or options, such as a
-menu, a prominent item in the list meets this criterion.
-
-  1. Source Code.
-
-  The "source code" for a work means the preferred form of the work
-for making modifications to it.  "Object code" means any non-source
-form of a work.
-
-  A "Standard Interface" means an interface that either is an official
-standard defined by a recognized standards body, or, in the case of
-interfaces specified for a particular programming language, one that
-is widely used among developers working in that language.
-
-  The "System Libraries" of an executable work include anything, other
-than the work as a whole, that (a) is included in the normal form of
-packaging a Major Component, but which is not part of that Major
-Component, and (b) serves only to enable use of the work with that
-Major Component, or to implement a Standard Interface for which an
-implementation is available to the public in source code form.  A
-"Major Component", in this context, means a major essential component
-(kernel, window system, and so on) of the specific operating system
-(if any) on which the executable work runs, or a compiler used to
-produce the work, or an object code interpreter used to run it.
-
-  The "Corresponding Source" for a work in object code form means all
-the source code needed to generate, install, and (for an executable
-work) run the object code and to modify the work, including scripts to
-control those activities.  However, it does not include the work's
-System Libraries, or general-purpose tools or generally available free
-programs which are used unmodified in performing those activities but
-which are not part of the work.  For example, Corresponding Source
-includes interface definition files associated with source files for
-the work, and the source code for shared libraries and dynamically
-linked subprograms that the work is specifically designed to require,
-such as by intimate data communication or control flow between those
-subprograms and other parts of the work.
-
-  The Corresponding Source need not include anything that users
-can regenerate automatically from other parts of the Corresponding
-Source.
-
-  The Corresponding Source for a work in source code form is that
-same work.
-
-  2. Basic Permissions.
-
-  All rights granted under this License are granted for the term of
-copyright on the Program, and are irrevocable provided the stated
-conditions are met.  This License explicitly affirms your unlimited
-permission to run the unmodified Program.  The output from running a
-covered work is covered by this License only if the output, given its
-content, constitutes a covered work.  This License acknowledges your
-rights of fair use or other equivalent, as provided by copyright law.
-
-  You may make, run and propagate covered works that you do not
-convey, without conditions so long as your license otherwise remains
-in force.  You may convey covered works to others for the sole purpose
-of having them make modifications exclusively for you, or provide you
-with facilities for running those works, provided that you comply with
-the terms of this License in conveying all material for which you do
-not control copyright.  Those thus making or running the covered works
-for you must do so exclusively on your behalf, under your direction
-and control, on terms that prohibit them from making any copies of
-your copyrighted material outside their relationship with you.
-
-  Conveying under any other circumstances is permitted solely under
-the conditions stated below.  Sublicensing is not allowed; section 10
-makes it unnecessary.
-
-  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
-
-  No covered work shall be deemed part of an effective technological
-measure under any applicable law fulfilling obligations under article
-11 of the WIPO copyright treaty adopted on 20 December 1996, or
-similar laws prohibiting or restricting circumvention of such
-measures.
-
-  When you convey a covered work, you waive any legal power to forbid
-circumvention of technological measures to the extent such circumvention
-is effected by exercising rights under this License with respect to
-the covered work, and you disclaim any intention to limit operation or
-modification of the work as a means of enforcing, against the work's
-users, your or third parties' legal rights to forbid circumvention of
-technological measures.
-
-  4. Conveying Verbatim Copies.
-
-  You may convey verbatim copies of the Program's source code as you
-receive it, in any medium, provided that you conspicuously and
-appropriately publish on each copy an appropriate copyright notice;
-keep intact all notices stating that this License and any
-non-permissive terms added in accord with section 7 apply to the code;
-keep intact all notices of the absence of any warranty; and give all
-recipients a copy of this License along with the Program.
-
-  You may charge any price or no price for each copy that you convey,
-and you may offer support or warranty protection for a fee.
-
-  5. Conveying Modified Source Versions.
-
-  You may convey a work based on the Program, or the modifications to
-produce it from the Program, in the form of source code under the
-terms of section 4, provided that you also meet all of these conditions:
-
-    a) The work must carry prominent notices stating that you modified
-    it, and giving a relevant date.
-
-    b) The work must carry prominent notices stating that it is
-    released under this License and any conditions added under section
-    7.  This requirement modifies the requirement in section 4 to
-    "keep intact all notices".
-
-    c) You must license the entire work, as a whole, under this
-    License to anyone who comes into possession of a copy.  This
-    License will therefore apply, along with any applicable section 7
-    additional terms, to the whole of the work, and all its parts,
-    regardless of how they are packaged.  This License gives no
-    permission to license the work in any other way, but it does not
-    invalidate such permission if you have separately received it.
-
-    d) If the work has interactive user interfaces, each must display
-    Appropriate Legal Notices; however, if the Program has interactive
-    interfaces that do not display Appropriate Legal Notices, your
-    work need not make them do so.
-
-  A compilation of a covered work with other separate and independent
-works, which are not by their nature extensions of the covered work,
-and which are not combined with it such as to form a larger program,
-in or on a volume of a storage or distribution medium, is called an
-"aggregate" if the compilation and its resulting copyright are not
-used to limit the access or legal rights of the compilation's users
-beyond what the individual works permit.  Inclusion of a covered work
-in an aggregate does not cause this License to apply to the other
-parts of the aggregate.
-
-  6. Conveying Non-Source Forms.
-
-  You may convey a covered work in object code form under the terms
-of sections 4 and 5, provided that you also convey the
-machine-readable Corresponding Source under the terms of this License,
-in one of these ways:
-
-    a) Convey the object code in, or embodied in, a physical product
-    (including a physical distribution medium), accompanied by the
-    Corresponding Source fixed on a durable physical medium
-    customarily used for software interchange.
-
-    b) Convey the object code in, or embodied in, a physical product
-    (including a physical distribution medium), accompanied by a
-    written offer, valid for at least three years and valid for as
-    long as you offer spare parts or customer support for that product
-    model, to give anyone who possesses the object code either (1) a
-    copy of the Corresponding Source for all the software in the
-    product that is covered by this License, on a durable physical
-    medium customarily used for software interchange, for a price no
-    more than your reasonable cost of physically performing this
-    conveying of source, or (2) access to copy the
-    Corresponding Source from a network server at no charge.
-
-    c) Convey individual copies of the object code with a copy of the
-    written offer to provide the Corresponding Source.  This
-    alternative is allowed only occasionally and noncommercially, and
-    only if you received the object code with such an offer, in accord
-    with subsection 6b.
-
-    d) Convey the object code by offering access from a designated
-    place (gratis or for a charge), and offer equivalent access to the
-    Corresponding Source in the same way through the same place at no
-    further charge.  You need not require recipients to copy the
-    Corresponding Source along with the object code.  If the place to
-    copy the object code is a network server, the Corresponding Source
-    may be on a different server (operated by you or a third party)
-    that supports equivalent copying facilities, provided you maintain
-    clear directions next to the object code saying where to find the
-    Corresponding Source.  Regardless of what server hosts the
-    Corresponding Source, you remain obligated to ensure that it is
-    available for as long as needed to satisfy these requirements.
-
-    e) Convey the object code using peer-to-peer transmission, provided
-    you inform other peers where the object code and Corresponding
-    Source of the work are being offered to the general public at no
-    charge under subsection 6d.
-
-  A separable portion of the object code, whose source code is excluded
-from the Corresponding Source as a System Library, need not be
-included in conveying the object code work.
-
-  A "User Product" is either (1) a "consumer product", which means any
-tangible personal property which is normally used for personal, family,
-or household purposes, or (2) anything designed or sold for incorporation
-into a dwelling.  In determining whether a product is a consumer product,
-doubtful cases shall be resolved in favor of coverage.  For a particular
-product received by a particular user, "normally used" refers to a
-typical or common use of that class of product, regardless of the status
-of the particular user or of the way in which the particular user
-actually uses, or expects or is expected to use, the product.  A product
-is a consumer product regardless of whether the product has substantial
-commercial, industrial or non-consumer uses, unless such uses represent
-the only significant mode of use of the product.
-
-  "Installation Information" for a User Product means any methods,
-procedures, authorization keys, or other information required to install
-and execute modified versions of a covered work in that User Product from
-a modified version of its Corresponding Source.  The information must
-suffice to ensure that the continued functioning of the modified object
-code is in no case prevented or interfered with solely because
-modification has been made.
-
-  If you convey an object code work under this section in, or with, or
-specifically for use in, a User Product, and the conveying occurs as
-part of a transaction in which the right of possession and use of the
-User Product is transferred to the recipient in perpetuity or for a
-fixed term (regardless of how the transaction is characterized), the
-Corresponding Source conveyed under this section must be accompanied
-by the Installation Information.  But this requirement does not apply
-if neither you nor any third party retains the ability to install
-modified object code on the User Product (for example, the work has
-been installed in ROM).
-
-  The requirement to provide Installation Information does not include a
-requirement to continue to provide support service, warranty, or updates
-for a work that has been modified or installed by the recipient, or for
-the User Product in which it has been modified or installed.  Access to a
-network may be denied when the modification itself materially and
-adversely affects the operation of the network or violates the rules and
-protocols for communication across the network.
-
-  Corresponding Source conveyed, and Installation Information provided,
-in accord with this section must be in a format that is publicly
-documented (and with an implementation available to the public in
-source code form), and must require no special password or key for
-unpacking, reading or copying.
-
-  7. Additional Terms.
-
-  "Additional permissions" are terms that supplement the terms of this
-License by making exceptions from one or more of its conditions.
-Additional permissions that are applicable to the entire Program shall
-be treated as though they were included in this License, to the extent
-that they are valid under applicable law.  If additional permissions
-apply only to part of the Program, that part may be used separately
-under those permissions, but the entire Program remains governed by
-this License without regard to the additional permissions.
-
-  When you convey a copy of a covered work, you may at your option
-remove any additional permissions from that copy, or from any part of
-it.  (Additional permissions may be written to require their own
-removal in certain cases when you modify the work.)  You may place
-additional permissions on material, added by you to a covered work,
-for which you have or can give appropriate copyright permission.
-
-  Notwithstanding any other provision of this License, for material you
-add to a covered work, you may (if authorized by the copyright holders of
-that material) supplement the terms of this License with terms:
-
-    a) Disclaiming warranty or limiting liability differently from the
-    terms of sections 15 and 16 of this License; or
-
-    b) Requiring preservation of specified reasonable legal notices or
-    author attributions in that material or in the Appropriate Legal
-    Notices displayed by works containing it; or
-
-    c) Prohibiting misrepresentation of the origin of that material, or
-    requiring that modified versions of such material be marked in
-    reasonable ways as different from the original version; or
-
-    d) Limiting the use for publicity purposes of names of licensors or
-    authors of the material; or
-
-    e) Declining to grant rights under trademark law for use of some
-    trade names, trademarks, or service marks; or
-
-    f) Requiring indemnification of licensors and authors of that
-    material by anyone who conveys the material (or modified versions of
-    it) with contractual assumptions of liability to the recipient, for
-    any liability that these contractual assumptions directly impose on
-    those licensors and authors.
-
-  All other non-permissive additional terms are considered "further
-restrictions" within the meaning of section 10.  If the Program as you
-received it, or any part of it, contains a notice stating that it is
-governed by this License along with a term that is a further
-restriction, you may remove that term.  If a license document contains
-a further restriction but permits relicensing or conveying under this
-License, you may add to a covered work material governed by the terms
-of that license document, provided that the further restriction does
-not survive such relicensing or conveying.
-
-  If you add terms to a covered work in accord with this section, you
-must place, in the relevant source files, a statement of the
-additional terms that apply to those files, or a notice indicating
-where to find the applicable terms.
-
-  Additional terms, permissive or non-permissive, may be stated in the
-form of a separately written license, or stated as exceptions;
-the above requirements apply either way.
-
-  8. Termination.
-
-  You may not propagate or modify a covered work except as expressly
-provided under this License.  Any attempt otherwise to propagate or
-modify it is void, and will automatically terminate your rights under
-this License (including any patent licenses granted under the third
-paragraph of section 11).
-
-  However, if you cease all violation of this License, then your
-license from a particular copyright holder is reinstated (a)
-provisionally, unless and until the copyright holder explicitly and
-finally terminates your license, and (b) permanently, if the copyright
-holder fails to notify you of the violation by some reasonable means
-prior to 60 days after the cessation.
-
-  Moreover, your license from a particular copyright holder is
-reinstated permanently if the copyright holder notifies you of the
-violation by some reasonable means, this is the first time you have
-received notice of violation of this License (for any work) from that
-copyright holder, and you cure the violation prior to 30 days after
-your receipt of the notice.
-
-  Termination of your rights under this section does not terminate the
-licenses of parties who have received copies or rights from you under
-this License.  If your rights have been terminated and not permanently
-reinstated, you do not qualify to receive new licenses for the same
-material under section 10.
-
-  9. Acceptance Not Required for Having Copies.
-
-  You are not required to accept this License in order to receive or
-run a copy of the Program.  Ancillary propagation of a covered work
-occurring solely as a consequence of using peer-to-peer transmission
-to receive a copy likewise does not require acceptance.  However,
-nothing other than this License grants you permission to propagate or
-modify any covered work.  These actions infringe copyright if you do
-not accept this License.  Therefore, by modifying or propagating a
-covered work, you indicate your acceptance of this License to do so.
-
-  10. Automatic Licensing of Downstream Recipients.
-
-  Each time you convey a covered work, the recipient automatically
-receives a license from the original licensors, to run, modify and
-propagate that work, subject to this License.  You are not responsible
-for enforcing compliance by third parties with this License.
-
-  An "entity transaction" is a transaction transferring control of an
-organization, or substantially all assets of one, or subdividing an
-organization, or merging organizations.  If propagation of a covered
-work results from an entity transaction, each party to that
-transaction who receives a copy of the work also receives whatever
-licenses to the work the party's predecessor in interest had or could
-give under the previous paragraph, plus a right to possession of the
-Corresponding Source of the work from the predecessor in interest, if
-the predecessor has it or can get it with reasonable efforts.
-
-  You may not impose any further restrictions on the exercise of the
-rights granted or affirmed under this License.  For example, you may
-not impose a license fee, royalty, or other charge for exercise of
-rights granted under this License, and you may not initiate litigation
-(including a cross-claim or counterclaim in a lawsuit) alleging that
-any patent claim is infringed by making, using, selling, offering for
-sale, or importing the Program or any portion of it.
-
-  11. Patents.
-
-  A "contributor" is a copyright holder who authorizes use under this
-License of the Program or a work on which the Program is based.  The
-work thus licensed is called the contributor's "contributor version".
-
-  A contributor's "essential patent claims" are all patent claims
-owned or controlled by the contributor, whether already acquired or
-hereafter acquired, that would be infringed by some manner, permitted
-by this License, of making, using, or selling its contributor version,
-but do not include claims that would be infringed only as a
-consequence of further modification of the contributor version.  For
-purposes of this definition, "control" includes the right to grant
-patent sublicenses in a manner consistent with the requirements of
-this License.
-
-  Each contributor grants you a non-exclusive, worldwide, royalty-free
-patent license under the contributor's essential patent claims, to
-make, use, sell, offer for sale, import and otherwise run, modify and
-propagate the contents of its contributor version.
-
-  In the following three paragraphs, a "patent license" is any express
-agreement or commitment, however denominated, not to enforce a patent
-(such as an express permission to practice a patent or covenant not to
-sue for patent infringement).  To "grant" such a patent license to a
-party means to make such an agreement or commitment not to enforce a
-patent against the party.
-
-  If you convey a covered work, knowingly relying on a patent license,
-and the Corresponding Source of the work is not available for anyone
-to copy, free of charge and under the terms of this License, through a
-publicly available network server or other readily accessible means,
-then you must either (1) cause the Corresponding Source to be so
-available, or (2) arrange to deprive yourself of the benefit of the
-patent license for this particular work, or (3) arrange, in a manner
-consistent with the requirements of this License, to extend the patent
-license to downstream recipients.  "Knowingly relying" means you have
-actual knowledge that, but for the patent license, your conveying the
-covered work in a country, or your recipient's use of the covered work
-in a country, would infringe one or more identifiable patents in that
-country that you have reason to believe are valid.
-
-  If, pursuant to or in connection with a single transaction or
-arrangement, you convey, or propagate by procuring conveyance of, a
-covered work, and grant a patent license to some of the parties
-receiving the covered work authorizing them to use, propagate, modify
-or convey a specific copy of the covered work, then the patent license
-you grant is automatically extended to all recipients of the covered
-work and works based on it.
-
-  A patent license is "discriminatory" if it does not include within
-the scope of its coverage, prohibits the exercise of, or is
-conditioned on the non-exercise of one or more of the rights that are
-specifically granted under this License.  You may not convey a covered
-work if you are a party to an arrangement with a third party that is
-in the business of distributing software, under which you make payment
-to the third party based on the extent of your activity of conveying
-the work, and under which the third party grants, to any of the
-parties who would receive the covered work from you, a discriminatory
-patent license (a) in connection with copies of the covered work
-conveyed by you (or copies made from those copies), or (b) primarily
-for and in connection with specific products or compilations that
-contain the covered work, unless you entered into that arrangement,
-or that patent license was granted, prior to 28 March 2007.
-
-  Nothing in this License shall be construed as excluding or limiting
-any implied license or other defenses to infringement that may
-otherwise be available to you under applicable patent law.
-
-  12. No Surrender of Others' Freedom.
-
-  If conditions are imposed on you (whether by court order, agreement or
-otherwise) that contradict the conditions of this License, they do not
-excuse you from the conditions of this License.  If you cannot convey a
-covered work so as to satisfy simultaneously your obligations under this
-License and any other pertinent obligations, then as a consequence you may
-not convey it at all.  For example, if you agree to terms that obligate you
-to collect a royalty for further conveying from those to whom you convey
-the Program, the only way you could satisfy both those terms and this
-License would be to refrain entirely from conveying the Program.
-
-  13. Remote Network Interaction; Use with the GNU General Public License.
-
-  Notwithstanding any other provision of this License, if you modify the
-Program, your modified version must prominently offer all users
-interacting with it remotely through a computer network (if your version
-supports such interaction) an opportunity to receive the Corresponding
-Source of your version by providing access to the Corresponding Source
-from a network server at no charge, through some standard or customary
-means of facilitating copying of software.  This Corresponding Source
-shall include the Corresponding Source for any work covered by version 3
-of the GNU General Public License that is incorporated pursuant to the
-following paragraph.
-
-  Notwithstanding any other provision of this License, you have
-permission to link or combine any covered work with a work licensed
-under version 3 of the GNU General Public License into a single
-combined work, and to convey the resulting work.  The terms of this
-License will continue to apply to the part which is the covered work,
-but the work with which it is combined will remain governed by version
-3 of the GNU General Public License.
-
-  14. Revised Versions of this License.
-
-  The Free Software Foundation may publish revised and/or new versions of
-the GNU Affero General Public License from time to time.  Such new versions
-will be similar in spirit to the present version, but may differ in detail to
-address new problems or concerns.
-
-  Each version is given a distinguishing version number.  If the
-Program specifies that a certain numbered version of the GNU Affero General
-Public License "or any later version" applies to it, you have the
-option of following the terms and conditions either of that numbered
-version or of any later version published by the Free Software
-Foundation.  If the Program does not specify a version number of the
-GNU Affero General Public License, you may choose any version ever published
-by the Free Software Foundation.
-
-  If the Program specifies that a proxy can decide which future
-versions of the GNU Affero General Public License can be used, that proxy's
-public statement of acceptance of a version permanently authorizes you
-to choose that version for the Program.
-
-  Later license versions may give you additional or different
-permissions.  However, no additional obligations are imposed on any
-author or copyright holder as a result of your choosing to follow a
-later version.
-
-  15. Disclaimer of Warranty.
-
-  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
-APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
-HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
-OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
-THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
-PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
-IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
-ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
-
-  16. Limitation of Liability.
-
-  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
-WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
-THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
-GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
-USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
-DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
-PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
-EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
-SUCH DAMAGES.
-
-  17. Interpretation of Sections 15 and 16.
-
-  If the disclaimer of warranty and limitation of liability provided
-above cannot be given local legal effect according to their terms,
-reviewing courts shall apply local law that most closely approximates
-an absolute waiver of all civil liability in connection with the
-Program, unless a warranty or assumption of liability accompanies a
-copy of the Program in return for a fee.
-
-                     END OF TERMS AND CONDITIONS
-
-            How to Apply These Terms to Your New Programs
-
-  If you develop a new program, and you want it to be of the greatest
-possible use to the public, the best way to achieve this is to make it
-free software which everyone can redistribute and change under these terms.
-
-  To do so, attach the following notices to the program.  It is safest
-to attach them to the start of each source file to most effectively
-state the exclusion of warranty; and each file should have at least
-the "copyright" line and a pointer to where the full notice is found.
-
-    <one line to give the program's name and a brief idea of what it does.>
-    Copyright (C) <year>  <name of author>
-
-    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU Affero General Public License as published
-    by the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU Affero General Public License for more details.
-
-    You should have received a copy of the GNU Affero General Public License
-    along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-Also add information on how to contact you by electronic and paper mail.
-
-  If your software can interact with users remotely through a computer
-network, you should also make sure that it provides a way for users to
-get its source.  For example, if your program is a web application, its
-interface could display a "Source" link that leads users to an archive
-of the code.  There are many ways you could offer source, and different
-solutions will be better for different programs; see section 13 for the
-specific requirements.
-
-  You should also get your employer (if you work as a programmer) or school,
-if any, to sign a "copyright disclaimer" for the program, if necessary.
-For more information on this, and how to apply and follow the GNU AGPL, see
-<https://www.gnu.org/licenses/>.

Readme.md

@@ -1,83 +1,135 @@
-# [MQTT Explorer](https://thomasnordquist.github.io/MQTT-Explorer/)
-[![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)](https://travis-ci.org/thomasnordquist/MQTT-Explorer)
+[![Downloads](https://img.shields.io/github/release/thomasnordquist/mqtt-explorer.svg)](https://github.com/thomasnordquist/MQTT-Explorer/releases)
+[![Downloads](https://img.shields.io/github/downloads/thomasnordquist/mqtt-explorer/total.svg)](https://github.com/thomasnordquist/MQTT-Explorer/releases)
+[![Build_Status](https://travis-ci.org/thomasnordquist/MQTT-Explorer.svg?branch=master)](https://travis-ci.org/thomasnordquist/MQTT-Explorer)
+[![Build status](https://ci.appveyor.com/api/projects/status/c35tkm29rm4m5364/branch/master?svg=true)](https://ci.appveyor.com/project/thomasnordquist/mqtt-explorer/branch/master)
+[![Codacy Badge](https://api.codacy.com/project/badge/Grade/47b26e03fce543ceac7914214482334a)](https://app.codacy.com/app/thomasnordquist/MQTT-Explorer?utm_source=github.com&utm_medium=referral&utm_content=thomasnordquist/MQTT-Explorer&utm_campaign=Badge_Grade_Dashboard)
+<a href="#" onClick="a=window;a.location='ht'+'tps:'+'/'+'/pay'+'pal.me/'+'ThomasNordquist'"><img src="https://img.shields.io/badge/Sponsor-PayPal-Flat.svg?color=0070ba&logo=data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgICB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIKICAgIHZlcnNpb249IjEuMSIgYmFzZVByb2ZpbGU9ImZ1bGwiIHZpZXdCb3g9IjAgMCAyNCAzMiIgd2lkdGg9IjI0IiBoZWlnaHQ9IjMyIiA+CiAgICA8cGF0aCB0cmFuc2Zvcm09InNjYWxlKDIpIiBmaWxsPSIjZWE0YWFhIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05IDJjLS45NyAwLTEuNjkuNDItMi4yIDEtLjUxLjU4LS43OC45Mi0uOCAxLS4wMi0uMDgtLjI4LS40Mi0uOC0xLS41Mi0uNTgtMS4xNy0xLTIuMi0xLTEuNjMyLjA4Ni0yLjk1NCAxLjMzMy0zIDMgMCAuNTIuMDkgMS41Mi42NyAyLjY3QzEuMjUgOC44MiAzLjAxIDEwLjYxIDYgMTNjMi45OC0yLjM5IDQuNzctNC4xNyA1LjM0LTUuMzNDMTEuOTEgNi41MSAxMiA1LjUgMTIgNWMtLjA0Ny0xLjY5LTEuMzQyLTIuOTEzLTMtM3oiPjwvcGF0aD4KPC9zdmc+Cgo=" /></a>
 
-### Version 0.1.3
+<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="2500">
+<ol class="carousel-indicators">
+<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
+<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
+<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
+</ol>
+<div class="carousel-inner">
+<div class="carousel-item active">
+<a href="./img/screen2.png"><img src="./img/screen2_small.png" /></a>
+</div>
+<div class="carousel-item">
+<a href="./img/screen3.png"><img src="./img/screen3_small.png" /></a>
+</div>
+<div class="carousel-item">
+<a href="./img/screen-composite.png"><img src="./img/screen-composite_small.png" /></a>
+</div>
+</div>
+<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
+<span class="carousel-control-prev-icon" aria-hidden="true"></span>
+<span class="sr-only">Previous</span>
+</a>
+<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
+<span class="carousel-control-next-icon" aria-hidden="true"></span>
+<span class="sr-only">Next</span>
+</a>
+</div>
 
-See the whole picture of your broker.
-- What topics are active? 
-- Which retained topics are abandoned?
-- Where is this new device / service I connected to the broker?
+<span class="slider">
+  <a href="./img/screen2.png"><img src="./img/screen2_small.png" /></a>
+  <a href="./img/screen3.png"><img src="./img/screen3_small.png" /></a>
+  <a href="./img/screen-composite.png"><img src="./img/screen-composite_small.png" /></a>
+</span>
 
-MQTT-Explorer strives to be THE swiss-army-knife tool.
-The perfect tool to integrate new services, IoT devices in your network.
-The hierarchical view allows for a quick understanding what is going on on your broker.
+## Version 0.4.0-beta.6
 
-The app is available for Windows ([portable](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.1.3&#x2F;MQTT-Explorer-0.1.3.exe), [installer](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.1.3&#x2F;MQTT-Explorer-Setup-0.1.3.exe)), 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)) and 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)).
+MQTT Explorer is a comprehensive MQTT client that provides a structured overview of your MQTT topics and makes working with devices/services on your broker dead-simple.
 
-## Demo
-![screencast](https://user-images.githubusercontent.com/7721625/51978075-5bc0eb00-2489-11e9-953a-0965b154557b.gif)
+### Features
+
+- Visualize topics and topic activity
+- Delete retained topics
+- Search/filter topics
+- Delete topics recursively
+- Diff view of current and previous received messages
+- Publish topics
+- Plot numeric topics
+- Retain a history of each topic
+- Dark/Light Themes
+- ... [See Changelog to see all features](./Changelog)
+
+The hierarchical view makes this tool so easy to use and differentiates the **MQTT Explorer** from other great MQTT clients like [MQTTLens](https://chrome.google.com/webstore/detail/mqttlens/hemojaaeigabkbcookmlgmdigohjobjm), [MQTTBox](http://workswithweb.com/mqttbox.html) and [MQTT.fx](https://mqttfx.jensd.de/).  
+This MQTT Client strives to be a MQTT swiss-army-knife, the perfect tool to integrate new services and IoT devices on your network.
 
 ## Download
 
-| Platform | | Downloads | 
+Developing this tool takes a lot of effort, sweat and time, please consider rating the App on the Windows or Mac app store <img src="./res/star.svg" width="16" /><img src="./res/star.svg" width="16" /><img src="./res/star.svg" width="16" /><img src="./res/star.svg" width="16" /><img src="./res/star.svg" width="16" />.  
+If you feel like a feature is missing or you found a bug, please leave me a [comment / issue](https://github.com/thomasnordquist/MQTT-Explorer/issues) and I'll see what I can do.
+
+| Platform | | Downloads |
 |:----------:|:-------------:|:------:|
-| ![windows](https://user-images.githubusercontent.com/7721625/51445407-b4172080-1d04-11e9-8c70-d8413d1d6d8b.png) | Windows | [portable](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.1.3&#x2F;MQTT-Explorer-0.1.3.exe), [installer](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.1.3&#x2F;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) | 
+| ![windows](https://user-images.githubusercontent.com/7721625/51445407-b4172080-1d04-11e9-8c70-d8413d1d6d8b.png) | **Windows** | <a href="https://www.microsoft.com/store/apps/9PP8SFM082WD?ocid=badge"><img src="https://get.microsoft.com/images/en-us%20dark.svg" width="165" /></a><br />**[portable](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.4.0-beta.6&#x2F;MQTT-Explorer-0.4.0-beta.6.exe), [installer](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.4.0-beta.6&#x2F;MQTT-Explorer-Setup-0.4.0-beta.6.exe)** |
+| ![mac](https://user-images.githubusercontent.com/7721625/51445390-921d9e00-1d04-11e9-8339-351469ef20ae.png) | **Mac** | <a href="https://itunes.apple.com/app/apple-store/id1455214828?pt=118225860&ct=mqtt-explorer.com&mt=8"><img src="https://developer.apple.com/app-store/marketing/guidelines/images/badge-download-on-the-mac-app-store.svg" height="40"/></a><br />**[Intel](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.4.0-beta.6&#x2F;MQTT-Explorer-0.4.0-beta.6.dmg), [ARM](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.4.0-beta.6&#x2F;MQTT-Explorer-0.4.0-beta.6-arm64.dmg)** <br /> *[How to start untrusted apps](https://support.apple.com/guide/mac-help/open-a-mac-app-from-an-unidentified-developer-mh40616/mac)*|
+| ![ubuntu](https://user-images.githubusercontent.com/7721625/51445401-a5306e00-1d04-11e9-9b9b-20e196b82142.png) | **Ubuntu**<br />*debian, mint, neon, fedora, etc...* | <a href="https://snapcraft.io/mqtt-explorer" title="Get it from the Snap Store"><img src="https://snapcraft.io/static/images/badges/en/snap-store-black.svg" width="165" /></a><br />`snap install mqtt-explorer`<br />[Ubuntu Store](snap://mqtt-explorer) |
+| ![linux](https://user-images.githubusercontent.com/7721625/51445392-947ff800-1d04-11e9-8c7f-a30efb755651.png) | **Linux**<br />*almost every linux* | **[AppImage](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.4.0-beta.6&#x2F;MQTT-Explorer-0.4.0-beta.6.AppImage), [deb](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.4.0-beta.6&#x2F;MQTT-Explorer_0.4.0-beta.6_amd64.deb)**<br />*Run AppImage:<br />Make it executable and double-click it.* |
 
 [More Downloads](https://github.com/thomasnordquist/MQTT-Explorer/releases)
 
-## Screenshots
-![screen1](https://user-images.githubusercontent.com/7721625/51770198-6c6a0d80-20e5-11e9-94d5-a0174634253c.png)
+## Video
+
+<div class="osx-frame">
+<div class="titlebar">
+<div class="buttons">
+<div class="close"></div>
+<div class="minimize"></div>
+<div class="zoom"></div>
+</div>
+MQTT Explorer
+</div>
+<div class="content">
+<video style="width: 100%" autoplay muted loop>
+<source type="video/mp4" src="./video.mp4">
+![screencast](https://user-images.githubusercontent.com/7721625/53954172-b7f4db80-40d5-11e9-852c-f8d85e511a00.gif)
+</video></div>
+</div>
+<br>
 
 ## Performance
-This App is optimized to handle thousands of topics and at least hundreds of thousands messages per minute.
-So don't worry if you got >=10k topics and >=100k messages per minute.
 
-Future releases will allow for a more granular selection of subscribed topics to handle
+This MQTT Client is optimized to handle thousands of topics and at hundreds of thousands messages per minute.
 
-## Develop
-PRs and issues are welcome
+Custom subscriptions can limit the amount of messages **MQTT Explorer** needs to process, subscriptions can be managed in the advanced connection settings.  
+In very large productive environments brokers may handle an extreme load of topics, subscribing with a wildcard topic is in this scenario not advised.
 
-Install with `npm run install`, build with `npm run build`
+## IoT Applications
 
-Start with `npm run start`
+List of useful IoT applications using MQTT to integrate devices / services
 
-The `app` directory contains all the rendering logic, the `backend` directory currently contains the models, tests, connection management.
+- [Home Assistant](https://www.home-assistant.io/) - Open source home automation gateway
+- [OpenHAB](https://www.openhab.org/) - Smart Home Gateway
+- [Node-RED](https://nodered.org/) - Flow-based programming for the Internet of Things
+- [zigbee2mqtt](https://github.com/Koenkk/zigbee2mqtt) - A ZigBee to MQTT bridge
+- [Tasmota](https://github.com/arendst/Sonoff-Tasmota) - ESP8266 firmware with MQTT support
 
-## Automated Tests
-To achieve a reliable product automated tests run regulary on travis.
-- Data model
-- MQTT integration
-- UI-Tests (The demo is a recorded ui test)
+## Feedback
+<form onsubmit="if(!this.elements.noshow.value){ this.action='https://docs.google.com/forms/d/e/1FAIpQLSePeIHoZxpbB_-ku4H97go8JPhfdrlxNc-nHPGQuWB6g-U3HQ/formResponse?embedded=true' }">
+
+### What do you like?
+<textarea style="width: 100%; border-radius: 5px; box-shadow: 5px 5px;" name="entry.1944371594"></textarea>
+
+### What can be improved?
+<textarea style="width: 100%; border-radius: 5px; box-shadow: 5px 5px;" name="entry.22814098"></textarea>
+
+### Email (optional)
+
+<span style="display: flex"><input style="padding: 8px; flex: 2; border-radius: 5px; box-shadow: 5px 5px; border: 1px solid" type="email" name="entry.2055444782" /><button type="submit" style="padding: 8px; margin-left: 16px; border: 1px solid #2879d0; border-radius: 5px; background-color: #eee; box-shadow: 5px 5px #ccc; text-align: right; color: #2879d0;">Submit</button></span>
+
+<input class="noshow" name="noshow" value="">
+
+</form>
+
+
+<div style="text-align: center; width: 100%">
+Ideas and bugs can also be reported on [github](https://github.com/thomasnordquist/MQTT-Explorer/issues).
+</div>
 
 ## 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."
+App telemetry has been removed, we rely on your bug reports to [GitHub issues](https://github.com/thomasnordquist/MQTT-Explorer/issues)

Readme.tpl.md

@@ -1,83 +1,135 @@
-# [MQTT Explorer](https://thomasnordquist.github.io/MQTT-Explorer/)
-[![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)](https://travis-ci.org/thomasnordquist/MQTT-Explorer)
+[![Downloads](https://img.shields.io/github/release/thomasnordquist/mqtt-explorer.svg)](https://github.com/thomasnordquist/MQTT-Explorer/releases)
+[![Downloads](https://img.shields.io/github/downloads/thomasnordquist/mqtt-explorer/total.svg)](https://github.com/thomasnordquist/MQTT-Explorer/releases)
+[![Build_Status](https://travis-ci.org/thomasnordquist/MQTT-Explorer.svg?branch=master)](https://travis-ci.org/thomasnordquist/MQTT-Explorer)
+[![Build status](https://ci.appveyor.com/api/projects/status/c35tkm29rm4m5364/branch/master?svg=true)](https://ci.appveyor.com/project/thomasnordquist/mqtt-explorer/branch/master)
+[![Codacy Badge](https://api.codacy.com/project/badge/Grade/47b26e03fce543ceac7914214482334a)](https://app.codacy.com/app/thomasnordquist/MQTT-Explorer?utm_source=github.com&utm_medium=referral&utm_content=thomasnordquist/MQTT-Explorer&utm_campaign=Badge_Grade_Dashboard)
+<a href="#" onClick="a=window;a.location='ht'+'tps:'+'/'+'/pay'+'pal.me/'+'ThomasNordquist'"><img src="https://img.shields.io/badge/Sponsor-PayPal-Flat.svg?color=0070ba&logo=data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgICB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIKICAgIHZlcnNpb249IjEuMSIgYmFzZVByb2ZpbGU9ImZ1bGwiIHZpZXdCb3g9IjAgMCAyNCAzMiIgd2lkdGg9IjI0IiBoZWlnaHQ9IjMyIiA+CiAgICA8cGF0aCB0cmFuc2Zvcm09InNjYWxlKDIpIiBmaWxsPSIjZWE0YWFhIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05IDJjLS45NyAwLTEuNjkuNDItMi4yIDEtLjUxLjU4LS43OC45Mi0uOCAxLS4wMi0uMDgtLjI4LS40Mi0uOC0xLS41Mi0uNTgtMS4xNy0xLTIuMi0xLTEuNjMyLjA4Ni0yLjk1NCAxLjMzMy0zIDMgMCAuNTIuMDkgMS41Mi42NyAyLjY3QzEuMjUgOC44MiAzLjAxIDEwLjYxIDYgMTNjMi45OC0yLjM5IDQuNzctNC4xNyA1LjM0LTUuMzNDMTEuOTEgNi41MSAxMiA1LjUgMTIgNWMtLjA0Ny0xLjY5LTEuMzQyLTIuOTEzLTMtM3oiPjwvcGF0aD4KPC9zdmc+Cgo=" /></a>
 
-### Version {{ version }}
+<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="2500">
+<ol class="carousel-indicators">
+<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
+<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
+<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
+</ol>
+<div class="carousel-inner">
+<div class="carousel-item active">
+<a href="./img/screen2.png"><img src="./img/screen2_small.png" /></a>
+</div>
+<div class="carousel-item">
+<a href="./img/screen3.png"><img src="./img/screen3_small.png" /></a>
+</div>
+<div class="carousel-item">
+<a href="./img/screen-composite.png"><img src="./img/screen-composite_small.png" /></a>
+</div>
+</div>
+<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
+<span class="carousel-control-prev-icon" aria-hidden="true"></span>
+<span class="sr-only">Previous</span>
+</a>
+<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
+<span class="carousel-control-next-icon" aria-hidden="true"></span>
+<span class="sr-only">Next</span>
+</a>
+</div>
 
-See the whole picture of your broker.
-- What topics are active? 
-- Which retained topics are abandoned?
-- Where is this new device / service I connected to the broker?
+<span class="slider">
+  <a href="./img/screen2.png"><img src="./img/screen2_small.png" /></a>
+  <a href="./img/screen3.png"><img src="./img/screen3_small.png" /></a>
+  <a href="./img/screen-composite.png"><img src="./img/screen-composite_small.png" /></a>
+</span>
 
-MQTT-Explorer strives to be THE swiss-army-knife tool.
-The perfect tool to integrate new services, IoT devices in your network.
-The hierarchical view allows for a quick understanding what is going on on your broker.
+## Version {{ version }}
 
-The app is available for Windows ({{windowsTargets}}), Linux ({{linuxTargets}}) and Mac ({{macTargets}}).
+MQTT Explorer is a comprehensive MQTT client that provides a structured overview of your MQTT topics and makes working with devices/services on your broker dead-simple.
 
-## Demo
-![screencast](https://user-images.githubusercontent.com/7721625/51978075-5bc0eb00-2489-11e9-953a-0965b154557b.gif)
+### Features
+
+- Visualize topics and topic activity
+- Delete retained topics
+- Search/filter topics
+- Delete topics recursively
+- Diff view of current and previous received messages
+- Publish topics
+- Plot numeric topics
+- Retain a history of each topic
+- Dark/Light Themes
+- ... [See Changelog to see all features](./Changelog)
+
+The hierarchical view makes this tool so easy to use and differentiates the **MQTT Explorer** from other great MQTT clients like [MQTTLens](https://chrome.google.com/webstore/detail/mqttlens/hemojaaeigabkbcookmlgmdigohjobjm), [MQTTBox](http://workswithweb.com/mqttbox.html) and [MQTT.fx](https://mqttfx.jensd.de/).  
+This MQTT Client strives to be a MQTT swiss-army-knife, the perfect tool to integrate new services and IoT devices on your network.
 
 ## Download
 
-| Platform | | Downloads | 
+Developing this tool takes a lot of effort, sweat and time, please consider rating the App on the Windows or Mac app store <img src="./res/star.svg" width="16" /><img src="./res/star.svg" width="16" /><img src="./res/star.svg" width="16" /><img src="./res/star.svg" width="16" /><img src="./res/star.svg" width="16" />.  
+If you feel like a feature is missing or you found a bug, please leave me a [comment / issue](https://github.com/thomasnordquist/MQTT-Explorer/issues) and I'll see what I can do.
+
+| 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}} | 
+| ![windows](https://user-images.githubusercontent.com/7721625/51445407-b4172080-1d04-11e9-8c70-d8413d1d6d8b.png) | **Windows** | <a href="https://www.microsoft.com/store/apps/9PP8SFM082WD?ocid=badge"><img src="https://get.microsoft.com/images/en-us%20dark.svg" width="165" /></a><br />**{{windowsTargets}}** |
+| ![mac](https://user-images.githubusercontent.com/7721625/51445390-921d9e00-1d04-11e9-8339-351469ef20ae.png) | **Mac** | <a href="https://itunes.apple.com/app/apple-store/id1455214828?pt=118225860&ct=mqtt-explorer.com&mt=8"><img src="https://developer.apple.com/app-store/marketing/guidelines/images/badge-download-on-the-mac-app-store.svg" height="40"/></a><br />**{{macTargets}}** <br /> *[How to start untrusted apps](https://support.apple.com/guide/mac-help/open-a-mac-app-from-an-unidentified-developer-mh40616/mac)*|
+| ![ubuntu](https://user-images.githubusercontent.com/7721625/51445401-a5306e00-1d04-11e9-9b9b-20e196b82142.png) | **Ubuntu**<br />*debian, mint, neon, fedora, etc...* | <a href="https://snapcraft.io/mqtt-explorer" title="Get it from the Snap Store"><img src="https://snapcraft.io/static/images/badges/en/snap-store-black.svg" width="165" /></a><br />`snap install mqtt-explorer`<br />[Ubuntu Store](snap://mqtt-explorer) |
+| ![linux](https://user-images.githubusercontent.com/7721625/51445392-947ff800-1d04-11e9-8c7f-a30efb755651.png) | **Linux**<br />*almost every linux* | **{{linuxTargets}}**<br />*Run AppImage:<br />Make it executable and double-click it.* |
 
 [More Downloads](https://github.com/thomasnordquist/MQTT-Explorer/releases)
 
-## Screenshots
-![screen1](https://user-images.githubusercontent.com/7721625/51770198-6c6a0d80-20e5-11e9-94d5-a0174634253c.png)
+## Video
+
+<div class="osx-frame">
+<div class="titlebar">
+<div class="buttons">
+<div class="close"></div>
+<div class="minimize"></div>
+<div class="zoom"></div>
+</div>
+MQTT Explorer
+</div>
+<div class="content">
+<video style="width: 100%" autoplay muted loop>
+<source type="video/mp4" src="./video.mp4">
+![screencast](https://user-images.githubusercontent.com/7721625/53954172-b7f4db80-40d5-11e9-852c-f8d85e511a00.gif)
+</video></div>
+</div>
+<br>
 
 ## Performance
-This App is optimized to handle thousands of topics and at least hundreds of thousands messages per minute.
-So don't worry if you got >=10k topics and >=100k messages per minute.
 
-Future releases will allow for a more granular selection of subscribed topics to handle
+This MQTT Client is optimized to handle thousands of topics and at hundreds of thousands messages per minute.
 
-## Develop
-PRs and issues are welcome
+Custom subscriptions can limit the amount of messages **MQTT Explorer** needs to process, subscriptions can be managed in the advanced connection settings.  
+In very large productive environments brokers may handle an extreme load of topics, subscribing with a wildcard topic is in this scenario not advised.
 
-Install with `npm run install`, build with `npm run build`
+## IoT Applications
 
-Start with `npm run start`
+List of useful IoT applications using MQTT to integrate devices / services
 
-The `app` directory contains all the rendering logic, the `backend` directory currently contains the models, tests, connection management.
+- [Home Assistant](https://www.home-assistant.io/) - Open source home automation gateway
+- [OpenHAB](https://www.openhab.org/) - Smart Home Gateway
+- [Node-RED](https://nodered.org/) - Flow-based programming for the Internet of Things
+- [zigbee2mqtt](https://github.com/Koenkk/zigbee2mqtt) - A ZigBee to MQTT bridge
+- [Tasmota](https://github.com/arendst/Sonoff-Tasmota) - ESP8266 firmware with MQTT support
 
-## Automated Tests
-To achieve a reliable product automated tests run regulary on travis.
-- Data model
-- MQTT integration
-- UI-Tests (The demo is a recorded ui test)
+## Feedback
+<form onsubmit="if(!this.elements.noshow.value){ this.action='https://docs.google.com/forms/d/e/1FAIpQLSePeIHoZxpbB_-ku4H97go8JPhfdrlxNc-nHPGQuWB6g-U3HQ/formResponse?embedded=true' }">
+
+### What do you like?
+<textarea style="width: 100%; border-radius: 5px; box-shadow: 5px 5px;" name="entry.1944371594"></textarea>
+
+### What can be improved?
+<textarea style="width: 100%; border-radius: 5px; box-shadow: 5px 5px;" name="entry.22814098"></textarea>
+
+### Email (optional)
+
+<span style="display: flex"><input style="padding: 8px; flex: 2; border-radius: 5px; box-shadow: 5px 5px; border: 1px solid" type="email" name="entry.2055444782" /><button type="submit" style="padding: 8px; margin-left: 16px; border: 1px solid #2879d0; border-radius: 5px; background-color: #eee; box-shadow: 5px 5px #ccc; text-align: right; color: #2879d0;">Submit</button></span>
+
+<input class="noshow" name="noshow" value="">
+
+</form>
+
+
+<div style="text-align: center; width: 100%">
+Ideas and bugs can also be reported on [github](https://github.com/thomasnordquist/MQTT-Explorer/issues).
+</div>
 
 ## 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."
+App telemetry has been removed, we rely on your bug reports to [GitHub issues](https://github.com/thomasnordquist/MQTT-Explorer/issues)

_config.yml

@@ -1,6 +1,6 @@
 theme: jekyll-theme-architect
 title: MQTT Explorer
-description: Tool to visualize your MQTT topics, a MQTT swiss-army knife
+description: An all-round MQTT client that provides a structured topic overview
 author:
   name: Thomas Nordquist
   picture: https://avatars1.githubusercontent.com/u/7721625?s=460&v=4 
@@ -9,3 +9,7 @@ logo: https://user-images.githubusercontent.com/7721625/52227945-5280b580-28b1-1
 plugins:
   - jekyll-seo-tag
 google_analytics: UA-133696837-1
+
+markdown: kramdown
+kramdown:
+  parse_block_html: true

_layouts/_default.html

@@ -1,6 +0,0 @@
-<html>
-  <head>
-    {% include head.html %}
-    {% seo %}
-  </head>
-</html>

_layouts/default.html

@@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<html lang="{{ site.lang | default: "en-US" }}">
+  <head>
+    <meta charset='utf-8'>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <script
+    src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
+    integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
+    crossorigin="anonymous"></script>
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+
+    <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}" media="screen" type="text/css">
+    <link rel="stylesheet" href="{{ '/assets/css/print.css' | relative_url }}" media="print" type="text/css">
+    <link rel="stylesheet" href="./osx-frame.css">
+
+    <!--[if lt IE 9]>
+    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
+    <![endif]-->
+
+    <style>
+      .noshow {display: none}
+
+      @media (min-width: 768px) { 
+        .slider {
+          display: flex;
+        }
+        .carousel {
+          display: none;
+        }
+      }
+
+      @media (max-width: 768px) { 
+        .slider {
+          display: none;
+        }
+        .carousel {
+          display: block;
+        }
+      }
+
+      form>h3::before {
+        content: '' !important;
+        margin-left: 0 !important;
+      }
+
+      .carousel-control-next-icon, .carousel-control-prev-icon {
+        display: inline-block;
+        width: 32px;
+        height: 32px;
+        background-size: 70%;
+        background-repeat: no-repeat;
+        background-color: grey;
+        border-radius: 5px;
+      }
+
+      .inner img {
+        border-radius: 8px;
+      }
+
+      .slider a {
+        padding: 4px;
+      }
+      .carousel-item, .slider img {
+        box-shadow: 0px 0px 5px #6b6b6b;
+      }
+    </style>
+
+    {% seo %}
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-TRN5K6H');</script>
+    <!-- End Google Tag Manager -->
+    <script>
+      function trackConversion(url) {
+        const conversions = {
+          'snap://mqtt-explorer': 'snap',
+          'https://snapcraft.io/mqtt-explorer': 'snap',
+          'https://geo.itunes.apple.com/us/app/mqtt-explorer/id1455214828?mt=12&app=apps': 'Mac App Store',
+          'https://www.microsoft.com/store/apps/9PP8SFM082WD?ocid=badge': 'Microsoft Store',
+          'https://github.com/thomasnordquist/MQTT-Explorer/releases/download/': 'binary download'
+        }
+        const conversion = Object.keys(conversions).find(function(conversionUrlPrefix) { return url.startsWith(conversionUrlPrefix) })
+        if (conversion) {
+          ga('send', 'event', 'outbound', 'download', conversions[conversion], {
+            'transport': 'beacon',
+            'hitCallback': function(){ document.location = url; }
+          });
+        } else {
+          ga('send', 'event', 'outbound', 'click', url, {
+            'transport': 'beacon',
+            'hitCallback': function(){ document.location = url; }
+          });
+        }
+      }
+
+    function didLoad() {
+      if (!Array.prototype.filter || !Array.prototype.find || !String.prototype.startsWith) {
+        return
+      }
+
+      Object.values(document.getElementsByTagName('a'))
+        .filter(function(a) { return !a.href.startsWith(a.baseURI)})
+        .forEach(function(a) { a.onclick = function() { trackConversion(a.href) }})
+    }
+    </script>
+  </head>
+
+  <body onload="didLoad()">
+    <header>
+      <div class="inner">
+        <a href="{{ '/' | absolute_url }}">
+          <h1 style="display: inline">
+            <img src="./icon.png" style="
+              height: 1em;
+              display: inline;
+              vertical-align: top;
+              margin-top: -0.04em;
+            "></img>
+            {{ site.title | default: site.github.repository_name }}
+          </h1>
+        </a>
+        <h2>{{ site.description | default: site.github.project_tagline }}</h2>
+        {% if site.github.is_project_page %}
+          <a href="{{ site.github.repository_url }}" style="box-sizing: initial" class="button"><small>View project on</small> GitHub</a>
+        {% endif %}
+        {% if site.github.is_user_page %}
+          <a href="{{ site.github.owner_url }}" class="button"><small>Follow me on</small> GitHub</a>
+        {% endif %}
+      </div>
+    </header>
+
+    <div id="content-wrapper">
+      <div class="inner clearfix">
+        <section id="main-content">
+          {{ content }}
+        </section>
+
+        <aside id="sidebar">
+          {% if site.show_downloads %}
+            <a href="{{ site.github.zip_url }}" class="button">
+              <small>Download</small>
+              .zip file
+            </a>
+            <a href="{{ site.github.tar_url }}" class="button">
+              <small>Download</small>
+              .tar.gz file
+            </a>
+          {% endif %}
+
+          {% if site.github.is_project_page %}
+            <h2>Author</h2>
+            <img src="{{ site.author.picture }}" width="200" />
+            <h3>{{ site.author.name }}</h3>
+            <p class="repo-owner"><a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a></p>
+          {% endif %}
+
+          <br />
+          <h3>In the media</h3>
+          <blockquote class="twitter-tweet" data-width="200">
+          <p lang="en" dir="ltr">If you’re seeking a comprehensive and easy to use 
+          <a href="https://twitter.com/hashtag/MQTT?src=hash&amp;ref_src=twsrc%5Etfw">#MQTT</a> client for 
+          <a href="https://twitter.com/hashtag/Ubuntu?src=hash&amp;ref_src=twsrc%5Etfw">#Ubuntu</a> then look no further than MQTT Explorer.
+          <br>
+          <br>snap install mqtt-explorer
+          <a href="https://t.co/1nd0Z8VQeR">https://t.co/1nd0Z8VQeR</a> 
+          <a href="https://t.co/8XKenpQu0p">pic.twitter.com/8XKenpQu0p</a>
+          </p>
+          &mdash; Ubuntu (@ubuntu) 
+          <a href="https://twitter.com/ubuntu/status/1125747632910077953?ref_src=twsrc%5Etfw">May 7, 2019</a>
+          </blockquote>
+          <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+            
+        </aside>
+      </div>
+    </div>
+
+    {% if site.google_analytics %}
+      <script>
+        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+        ga('create', '{{ site.google_analytics }}', 'auto');
+        ga('send', 'pageview');
+      </script>
+    {% endif %}
+  </body>
+</html>

_plugins/server-mp4

@@ -0,0 +1,3 @@
+require 'webrick'
+include WEBrick
+WEBrick::HTTPUtils::DefaultMimeTypes.store 'mp4', 'video/mpeg'

app/index.html

@@ -1,134 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="UTF-8" />
-        <title>MQTT-Explorer</title>
-        <script src="./bugtracking.bundle.js"></script>
-
-        <style>
-          body, html {
-            margin: 0;
-            padding: 0;
-          }
-
-          @keyframes example {
-            0%   {background-color: none;}
-            25%  {background-color: #3f51b5;}
-            50%  {background-color: #3f51b5;}
-            100% {background-color: none;}
-          }
-
-          ::-webkit-scrollbar {
-            width: 8px;
-            height: 8px;
-          }
-
-          ::-webkit-scrollbar-corner {
-            background-color: rgba(0, 0, 0, 0.0);
-          }
-
-          ::-webkit-scrollbar-track {
-              -webkit-box-shadow: inset 0 0 6px rgba(30,30,30,0.3);
-          }
-
-          ::-webkit-scrollbar-thumb {
-              background-color: rgba(140,140,140,0.8);
-          }
-        </style>
-        <style>
-          #splash {
-            z-index: 1000000;
-            background-color: #303030;
-            display: block;
-            width: 100vw;
-            height: 100vh;
-            position: fixed;
-            opacity: 1;
-          }
-          #splash1 {
-            margin: 37vh auto 0 auto;
-            height: 25vh;
-            width: 25vh;
-            /* background-image:url('../rings.svg'); */
-            background-size: cover;
-          }
-          #splash2 {
-            margin: 0 auto;
-          }
-          @keyframes unsplash {
-            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 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

@@ -1,57 +0,0 @@
-{
-  "name": "mqtt-explorer-app",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "build": "webpack --mode production"
-  },
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "@material-ui/core": "^3.9.0",
-    "@material-ui/icons": "^3.0.1",
-    "@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",
-    "@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-livereload-plugin": "^2.2.0"
-  }
-}

app/rings.svg

@@ -1,42 +0,0 @@
-<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
-<svg width="45" height="45" viewBox="0 0 45 45" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
-    <g fill="none" fill-rule="evenodd" transform="translate(1 1)" stroke-width="2">
-        <circle cx="22" cy="22" r="6" stroke-opacity="0">
-            <animate attributeName="r"
-                 begin="1.5s" dur="3s"
-                 values="6;22"
-                 calcMode="linear"
-                 repeatCount="indefinite" />
-            <animate attributeName="stroke-opacity"
-                 begin="1.5s" dur="3s"
-                 values="1;0" calcMode="linear"
-                 repeatCount="indefinite" />
-            <animate attributeName="stroke-width"
-                 begin="1.5s" dur="3s"
-                 values="2;0" calcMode="linear"
-                 repeatCount="indefinite" />
-        </circle>
-        <circle cx="22" cy="22" r="6" stroke-opacity="0">
-            <animate attributeName="r"
-                 begin="3s" dur="3s"
-                 values="6;22"
-                 calcMode="linear"
-                 repeatCount="indefinite" />
-            <animate attributeName="stroke-opacity"
-                 begin="3s" dur="3s"
-                 values="1;0" calcMode="linear"
-                 repeatCount="indefinite" />
-            <animate attributeName="stroke-width"
-                 begin="3s" dur="3s"
-                 values="2;0" calcMode="linear"
-                 repeatCount="indefinite" />
-        </circle>
-        <circle cx="22" cy="22" r="8">
-            <animate attributeName="r"
-                 begin="0s" dur="1.5s"
-                 values="6;1;2;3;4;5;6"
-                 calcMode="linear"
-                 repeatCount="indefinite" />
-        </circle>
-    </g>
-</svg>

app/src/App.tsx

@@ -1,125 +0,0 @@
-import * as React from 'react'
-import * as q from '../../backend/src/Model'
-
-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'
-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
-  classes: any
-  settingsVisible: boolean
-}
-
-class App extends React.PureComponent<Props, {}> {
-  constructor(props: any) {
-    super(props)
-    this.state = { }
-  }
-
-  public render() {
-    const { settingsVisible } = this.props
-    const { content, contentShift, centerContent, paneDefaults, heightProperty } = this.props.classes
-
-    return (
-      <div className={centerContent}>
-        <CssBaseline />
-        <ErrorBoundary>
-          <React.Suspense fallback={<div>Loading...</div>}>
-            <Settings />
-          </React.Suspense>
-          <div className={centerContent}>
-            <div className={`${settingsVisible ? contentShift : content}`}>
-                <TitleBar />
-            </div>
-            <div>
-              <SplitPane
-                step={20}
-                primary="second"
-                className={`${settingsVisible ? contentShift : content} ${heightProperty}`}
-                split="vertical"
-                minSize={250}
-                defaultSize={500}
-                resizerStyle={{ width: '2px', margin: '0 -10px 0 0px' }}
-                allowResize={true}
-                style={{ position: 'relative' }}
-                pane1Style={{ overflow: 'hidden' }}
-              >
-                <div className={paneDefaults}>
-                  <Tree />
-                </div>
-                <div className={paneDefaults}>
-                  <Sidebar connectionId={this.props.connectionId} />
-                </div>
-              </SplitPane>
-            </div>
-          </div>
-          <UpdateNotifier />
-          <Connection />
-        </ErrorBoundary>
-      </div >
-    )
-  }
-}
-
-const mapStateToProps = (state: AppState) => {
-  return {
-    settingsVisible: state.settings.visible,
-    connectionId: state.connection.connectionId,
-  }
-}
-
-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/ErrorBoundary.tsx

@@ -1,112 +0,0 @@
-import * as React from 'react'
-import { electronRendererTelementry } from 'electron-telemetry'
-import {
-  Button,
-  Modal,
-  Paper,
-  Toolbar,
-  Typography,
-} from '@material-ui/core'
-
-import Warning from '@material-ui/icons/Warning'
-import SentimentDissatisfied from '@material-ui/icons/SentimentDissatisfied'
-
-import { Theme, withStyles } from '@material-ui/core/styles'
-
-interface State {
-  error?: Error
-}
-
-interface Props {
-  classes: any
-}
-
-class ErrorBoundary extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props)
-    this.state = {}
-  }
-
-  public componentDidCatch(error: Error, errorInfo: any) {
-    electronRendererTelementry.trackError(error)
-    console.log('did catch', error)
-  }
-
-  public static getDerivedStateFromError(error: Error) {
-    return { error }
-  }
-
-  private restart = () => {
-    window.location = window.location
-  }
-
-  private clearStorage = () => {
-    localStorage.clear()
-    window.location = window.location
-  }
-
-  public render() {
-    if (!this.state.error) {
-      return this.props.children
-    }
-
-    const { classes } = this.props
-    return (
-      <Modal open={true} disableAutoFocus={true}>
-        <Paper className={classes.root}>
-          <Toolbar style={{ padding: '0' }}>
-            <Typography className={classes.title} variant="h6" color="inherit"><Warning /> Oooooops!</Typography>
-          </Toolbar>
-          <Typography className={classes.centered}>I hoped that you would never see this window, but MQTT-Explorer had an unexpected error.</Typography>
-          <Typography className={classes.centered}><SentimentDissatisfied /></Typography>
-          <pre className={classes.textColor} style={{ maxHeight: '35vh', overflow: 'scroll' }}>
-            <code className={classes.textColor}>
-              {this.state.error.stack}
-            </code>
-          </pre>
-          <Typography>
-            Please report this issue with a short description of what happened to
-            <span> <a className={classes.textColor} href="https://github.com/thomasnordquist/MQTT-Explorer/issues">https://github.com/thomasnordquist/MQTT-Explorer/issues</a></span>
-          </Typography>
-          <div>
-            <div className={classes.buttonPositioning}>
-              <Button className={classes.button} variant="contained" color="secondary" onClick={this.clearStorage}>Start Fresh</Button>
-              <Button className={classes.button} variant="contained" color="primary" onClick={this.restart}>Restart</Button>
-            </div>
-          </div>
-        </Paper>
-      </Modal>
-    )
-  }
-}
-
-const styles = (theme: Theme) => ({
-  button: {
-    margin: '0 8px 0 8px',
-  },
-  root: {
-    minWidth: 550,
-    maxWidth: 650,
-    backgroundColor: theme.palette.background.default,
-    margin: '10vh auto auto auto',
-    padding: `${2 * theme.spacing.unit}px`,
-    outline: 'none',
-  },
-  title: {
-    color: theme.palette.text.primary,
-    margin: '0',
-    textAlign: 'center' as 'center',
-  },
-  textColor: {
-    color: theme.palette.text.primary,
-  },
-  centered: {
-    textAlign: 'center' as 'center',
-  },
-  buttonPositioning: {
-    textAlign: 'center' as 'center',
-    marginTop: `${theme.spacing.unit * 2}px`,
-  },
-})
-
-export default withStyles(styles)(ErrorBoundary)

app/src/TopicViewModel.ts

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

@@ -1,280 +0,0 @@
-import * as React from 'react'
-
-import {
-   Button,
-   IconButton,
-   Modal,
-   Paper,
-   Snackbar,
-   SnackbarContent,
-   Typography,
-} from '@material-ui/core'
-import { Theme, withStyles } from '@material-ui/core/styles'
-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 { 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
-  showUpdateDetails: boolean
-  classes: any
-  actions: any
-}
-
-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 = { 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)
-      }
-    })
-  }
-
-  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) => {
-    if (reason === 'clickaway') {
-      return
-    }
-    this.props.actions.showUpdateNotification(false)
-  }
-
-  private closeNotification = () => {
-    this.props.actions.showUpdateNotification(false)
-  }
-
-  private showDetails = () => {
-    this.props.actions.showUpdateNotification(false)
-    this.props.actions.showUpdateDetails(true)
-  }
-
-  private hideDetails = () => {
-    this.props.actions.showUpdateDetails(false)
-  }
-
-  public render() {
-    return (
-      <div>
-        {this.renderUpdateNotification()}
-        {this.renderUpdateDetails()}
-      </div>
-    )
-  }
-
-  private renderUpdateNotification() {
-    const snackbarAnchor: any = {
-      vertical: 'top',
-      horizontal: 'right',
-    }
-    console.log(this.state.newerVersions)
-
-    return (
-      <Snackbar
-        anchorOrigin={snackbarAnchor}
-        open={this.props.showUpdateNotification}
-        autoHideDuration={12000}
-        onClose={this.onCloseNotification}
-      >
-        <SnackbarContent
-          className={this.props.classes.success}
-          message={`${this.state.newerVersions.length} Update(s) available`}
-          action={this.notificationActions()}
-        />
-      </Snackbar>
-    )
-  }
-
-  private notificationActions() {
-    return [(
-        <Button key="undo" size="small" onClick={this.showDetails}>
-          Details
-        </Button>
-      ), (
-        <IconButton
-          key="close"
-          aria-label="Close"
-          color="inherit"
-          className={this.props.classes.close}
-          onClick={this.closeNotification}
-        >
-          <Close />
-        </IconButton>
-      ),
-    ]
-  }
-
-  private renderUpdateDetails() {
-    const latestUpdate = this.state.newerVersions[0]
-    if (!latestUpdate) {
-      return null
-    }
-    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}
-        disableAutoFocus={true}
-        onClose={this.hideDetails}
-      >
-        <Paper className={this.props.classes.root}>
-          <Typography variant="h6" className={this.props.classes.title}>Version {latestUpdate.tag_name}</Typography>
-          <Typography className={this.props.classes.title}>Changelog</Typography>
-          <div className={this.props.classes.releaseNotes} dangerouslySetInnerHTML={{ __html: releaseNotes }} />
-          {this.renderDownloads()}
-          <Button
-            className={this.props.classes.download}
-            onClick={this.openGithub}
-          >
-            Github Page
-          </Button>
-          <Button className={this.props.classes.closeButton} color="secondary" onClick={this.hideDetails}>Close</Button>
-        </Paper>
-      </Modal>
-    )
-  }
-
-  private openGithub = () => {
-    this.openUrl('https://github.com/thomasnordquist/MQTT-Explorer')
-  }
-
-  private 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}
-            onClick={() => this.openUrl(asset.url)}
-          >
-            <CloudDownload />&nbsp;{asset.name}
-          </Button>
-        </div>
-      ))
-  }
-}
-
-const styles = (theme: Theme) => ({
-  success: {
-    backgroundColor: green[600],
-    color: theme.typography.button.color,
-  },
-  close: {
-    padding: theme.spacing.unit / 2,
-  },
-  root: {
-    minWidth: '350px',
-    maxWidth: '500px',
-    backgroundColor: theme.palette.background.default,
-    margin: '20vh auto auto auto',
-    padding: `${2 * theme.spacing.unit}px`,
-    outline: 'none',
-  },
-  title: {
-    color: theme.palette.text.primary,
-  },
-  releaseNotes: {
-    overflow: 'auto scroll',
-    color: theme.palette.text.secondary,
-    backgroundColor: 'rgba(60, 60, 60, 0.6)',
-    maxHeight: '28vh',
-  },
-  paper: {
-    padding: `${theme.spacing.unit * 2}px`,
-    color: theme.palette.text.secondary,
-  },
-  download: {
-    width: '100%',
-  },
-  closeButton: {
-    display: 'block',
-    margin: '0 0 0 auto',
-  },
-})
-
-const mapStateToProps = (state: AppState) => {
-  return {
-    showUpdateNotification: state.tooBigReducer.showUpdateNotification,
-    showUpdateDetails: state.tooBigReducer.showUpdateDetails,
-  }
-}
-
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    actions: bindActionCreators(updateNotifierActions, dispatch),
-  }
-}
-
-export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(UpdateNotifier))

app/src/actions/Connection.ts

@@ -1,55 +0,0 @@
-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) {
-      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())
-    }
-  })
-}
-
-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) => Action = (connectionId: string)  => ({
-  connectionId,
-  type: ActionTypes.CONNECTION_SET_CONNECTING,
-})
-
-export const showError = (error?: string) => ({
-  error,
-  type: ActionTypes.CONNECTION_SET_SHOW_ERROR,
-})
-
-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.CONNECTION_SET_DISCONNECTED,
-  })
-}

app/src/actions/Publish.ts

@@ -1,56 +0,0 @@
-import { ActionTypes, Action } from '../reducers/Publish'
-import { AppState } from '../reducers'
-import { Dispatch } from 'redux'
-import { rendererEvents, makePublishEvent } from '../../../events'
-
-export const setTopic = (topic?: string): Action  => {
-  return {
-    topic,
-    type: ActionTypes.PUBLISH_SET_TOPIC,
-  }
-}
-
-export const setPayload = (payload?: string): Action => {
-  return {
-    payload,
-    type: ActionTypes.PUBLISH_SET_PAYLOAD,
-  }
-}
-
-export const setQoS = (qos: 0 | 1 | 2): Action => {
-  return {
-    qos,
-    type: ActionTypes.PUBLISH_SET_QOS,
-  }
-}
-
-export const setEditorMode = (editorMode: string): Action => {
-  return {
-    editorMode,
-    type: ActionTypes.PUBLISH_SET_EDITOR_MODE,
-  }
-}
-
-export const publish = (connectionId: string) => (dispatch: Dispatch<Action>, getState: () => AppState)  => {
-  const state = getState()
-  const topic = state.publish.topic
-
-  if (!topic) {
-    return
-  }
-
-  const publishEvent = makePublishEvent(connectionId)
-  const mqttMessage = {
-    topic,
-    payload: state.publish.payload,
-    retain: state.publish.retain,
-    qos: state.publish.qos,
-  }
-  rendererEvents.emit(publishEvent, mqttMessage)
-}
-
-export const toggleRetain = (): Action => {
-  return {
-    type: ActionTypes.PUBLISH_TOGGLE_RETAIN,
-  }
-}

app/src/actions/Settings.ts

@@ -1,89 +0,0 @@
-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): Action => {
-  return {
-    autoExpandLimit,
-    type: ActionTypes.SETTINGS_SET_AUTO_EXPAND_LIMIT,
-  }
-}
-
-export const toggleSettingsVisibility = (): Action => {
-  return {
-    type: ActionTypes.SETTINGS_TOGGLE_VISIBILITY,
-  }
-}
-
-export const setTopicOrder = (topicOrder: TopicOrder = TopicOrder.none): Action => {
-  return {
-    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

@@ -1,21 +0,0 @@
-import { Dispatch, Action } from 'redux'
-import { AppState } from '../reducers'
-import { makePublishEvent, rendererEvents } from '../../../events'
-
-export const clearRetainedTopic = () => (dispatch: Dispatch<Action>, getState: () => AppState)  => {
-  const { selectedTopic } = getState().tree
-  const { connectionId } = getState().connection
-
-  if (!selectedTopic || !connectionId) {
-    return
-  }
-
-  const publishEvent = makePublishEvent(connectionId)
-  const mqttMessage = {
-    topic: selectedTopic.path(),
-    payload: null,
-    retain: true,
-    qos: 0 as 0,
-  }
-  rendererEvents.emit(publishEvent, mqttMessage)
-}

app/src/actions/Tree.ts

@@ -1,59 +0,0 @@
-import { AppState } from '../reducers'
-import { ActionTypes } from '../reducers/Tree'
-import * as q from '../../../backend/src/Model'
-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<TopicViewModel>) => (dispatch: Dispatch<any>, getState: () => AppState)  => {
-  debouncedSelectTopic(topic, dispatch, getState)
-}
-
-const debouncedSelectTopic = debounce((topic: q.TreeNode<TopicViewModel>, dispatch: Dispatch<any>, getState: () => AppState)  => {
-  const { selectedTopic } = getState().tree
-  if (selectedTopic === topic) {
-    return
-  }
-
-  // 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.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/actions/UpdateNotifier.ts

@@ -1,15 +0,0 @@
-import { ActionTypes, CustomAction } from '../reducers'
-
-export const showUpdateNotification = (show: boolean): CustomAction => {
-  return {
-    type: ActionTypes.showUpdateNotification,
-    showUpdateNotification: show,
-  }
-}
-
-export const showUpdateDetails = (show: boolean): CustomAction => {
-  return {
-    type: ActionTypes.showUpdateDetails,
-    showUpdateDetails: show,
-  }
-}

app/src/actions/index.ts

@@ -1,8 +0,0 @@
-import * as settingsActions from './Settings'
-import * as publishActions from './Publish'
-import * as treeActions from './Tree'
-import * as updateNotifierActions from './UpdateNotifier'
-import * as connectionActions from './Connection'
-import * as sidebarActons from './Sidebar'
-
-export { settingsActions, treeActions, publishActions, updateNotifierActions, connectionActions, sidebarActons }

app/src/bugtracking.ts

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

app/src/components/BrokerStatistics.tsx

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

@@ -1,395 +0,0 @@
-import * as React from 'react'
-
-import {
-  Button,
-  CircularProgress,
-  FormControl,
-  FormControlLabel,
-  Grid,
-  IconButton,
-  Input,
-  InputAdornment,
-  InputLabel,
-  MenuItem,
-  Modal,
-  Paper,
-  Switch,
-  TextField,
-  Toolbar,
-  Typography,
-} from '@material-ui/core'
-import { connect } from 'react-redux'
-import { MqttOptions } from '../../../../backend/src/DataSource'
-import { StyleRulesCallback, Theme, withStyles } from '@material-ui/core/styles'
-
-import Notification from './Notification'
-import Visibility from '@material-ui/icons/Visibility'
-import VisibilityOff from '@material-ui/icons/VisibilityOff'
-
-const sha1 = require('sha1')
-import { AppState } from '../../reducers'
-import { bindActionCreators } from 'redux'
-import { connectionActions } from '../../actions'
-
-interface Props {
-  classes: {[s: string]: string}
-  actions: typeof connectionActions,
-  visible: boolean
-  connected: boolean
-  connecting: boolean
-  error?: string
-}
-
-const protocols = [
-  'mqtt://',
-  'ws://',
-]
-
-interface State {
-  showPassword: boolean
-  connectionSettings: ConnectionSettings
-}
-
-interface ConnectionSettings {
-  host: string
-  protocol: string
-  port: number
-  tls: boolean
-  certValidation: boolean
-  clientId: string
-  connectionId?: string
-  username: string
-  password: string
-}
-
-declare var window: any
-
-class Connection extends React.Component<Props, State> {
-  private randomClientId: string
-  private defaultConnectionSettings: ConnectionSettings = {
-    host: 'iot.eclipse.org',
-    protocol: protocols[0],
-    port: 1883,
-    tls: false,
-    certValidation: true,
-    clientId: '',
-    username: '',
-    password: '',
-    connectionId: undefined,
-  }
-
-  constructor(props: any) {
-    super(props)
-
-    const clientIdSha = sha1(`${Math.random()}`).slice(0, 8)
-    this.randomClientId = `mqtt-explorer-${clientIdSha}`
-    this.state = {
-      connectionSettings: this.loadConnectionSettings(),
-      showPassword: false,
-    }
-  }
-
-  private loadConnectionSettings(): ConnectionSettings {
-    let storedSettings: ConnectionSettings | undefined
-
-    const storedSettingsString = window.localStorage.getItem('connectionSettings')
-    try {
-      storedSettings = storedSettingsString ? JSON.parse(storedSettingsString) : undefined
-    } catch {
-      window.localStorage.setItem('connectionSettings', undefined)
-    }
-
-    return storedSettings || this.defaultConnectionSettings
-  }
-
-  private saveConnectionSettings() {
-    window.localStorage.setItem('connectionSettings', JSON.stringify(this.state.connectionSettings))
-  }
-
-  private handleClickShowPassword = () => {
-    this.setState({ showPassword: !this.state.showPassword })
-  }
-
-  private optionsFromState(): MqttOptions {
-    const protocol = this.state.connectionSettings.protocol === 'tcp://' ? 'mqtt://' : this.state.connectionSettings.protocol
-    const url = `${protocol}${this.state.connectionSettings.host}:${this.state.connectionSettings.port}`
-
-    return {
-      url,
-      username: this.state.connectionSettings.username || undefined,
-      password: this.state.connectionSettings.password || undefined,
-      clientId: this.state.connectionSettings.clientId || this.randomClientId,
-      tls: this.state.connectionSettings.tls,
-      certValidation: this.state.connectionSettings.certValidation,
-    }
-  }
-
-  public static styles: StyleRulesCallback<string> = (theme: Theme) => {
-    return {
-      root: {
-        minWidth: 550,
-        maxWidth: 650,
-        backgroundColor: theme.palette.background.default,
-        margin: '14vh auto auto auto',
-        padding: `${2 * theme.spacing.unit}px`,
-        outline: 'none',
-      },
-      title: {
-        color: theme.palette.text.primary,
-      },
-      paper: {
-        padding: theme.spacing.unit * 2,
-        textAlign: 'center',
-        color: theme.palette.text.secondary,
-      },
-      textField: {
-        width: '100%',
-      },
-      switch: {
-        marginTop: `${1 * theme.spacing.unit}px`,
-      },
-      button: {
-        margin: theme.spacing.unit,
-      },
-      inputFormControl: {
-        marginTop: '16px',
-      },
-    }
-  }
-
-  private handleChange = (name: string) => (event: any) => {
-    this.setState({
-      connectionSettings: {
-        ...this.state.connectionSettings,
-        [name]: event.target.value,
-      },
-    })
-  }
-
-  public render() {
-    const { classes } = this.props
-
-    const passwordVisibilityButton = (
-      <InputAdornment position="end">
-        <IconButton
-          aria-label="Toggle password visibility"
-          onClick={this.handleClickShowPassword}
-        >
-          {this.state.showPassword ? <Visibility /> : <VisibilityOff />}
-        </IconButton>
-      </InputAdornment>
-    )
-
-    let renderError = null
-    if (this.props.error) {
-      renderError = (
-        <Notification
-          message={this.props.error}
-          onClose={() => { this.props.actions.showError(undefined) }}
-        />
-      )
-    }
-
-    return (
-      <div>
-        {renderError}
-        <Modal open={this.props.visible} disableAutoFocus={true}>
-            <Paper className={classes.root}>
-              <Toolbar>
-                <Typography className={classes.title} variant="h6" color="inherit">MQTT Connection</Typography>
-              </Toolbar>
-              <form className={classes.container} noValidate={true} autoComplete="off">
-                <Grid container={true} spacing={24}>
-                  <Grid item={true} xs={2}>
-                    {this.renderProtocols()}
-                  </Grid>
-                  <Grid item={true} xs={7}>
-                    <TextField
-                      label="Host"
-                      className={classes.textField}
-                      value={this.state.connectionSettings.host}
-                      onChange={this.handleChange('host')}
-                      margin="normal"
-                    />
-                  </Grid>
-                  <Grid item={true} xs={3}>
-                    <TextField
-                      label="Port"
-                      className={classes.textField}
-                      value={this.state.connectionSettings.port}
-                      onChange={this.handleChange('port')}
-                      margin="normal"
-                    />
-                  </Grid>
-                  <Grid item={true} xs={5}>
-                    <TextField
-                      label="Username"
-                      className={classes.textField}
-                      value={this.state.connectionSettings.username}
-                      onChange={this.handleChange('username')}
-                      margin="normal"
-                    />
-                  </Grid>
-                  <Grid item={true} xs={5}>
-                    <FormControl className={`${classes.textField} ${classes.inputFormControl}`}>
-                      <InputLabel htmlFor="adornment-password">Password</InputLabel>
-                      <Input
-                        id="adornment-password"
-                        type={this.state.showPassword ? 'text' : 'password'}
-                        value={this.state.connectionSettings.password}
-                        onChange={this.handleChange('password')}
-                        endAdornment={passwordVisibilityButton}
-                      />
-                    </FormControl>
-                  </Grid>
-                  <Grid item={true} xs={5}>
-                    <FormControl className={`${classes.textField} ${classes.inputFormControl}`}>
-                      <InputLabel htmlFor="client-id">Client ID</InputLabel>
-                      <Input
-                        placeholder={this.randomClientId}
-                        className={classes.textField}
-                        value={this.state.connectionSettings.clientId || ''}
-                        onChange={this.handleChange('clientId')}
-                        startAdornment={<span />}
-                      />
-                    </FormControl>
-                  </Grid>
-                  <Grid item={true} xs={4}>
-                    {this.renderCertValidationSwitch()}
-                  </Grid>
-                  <Grid item={true} xs={3}>
-                    {this.renderTlsSwitch()}
-                  </Grid>
-                </Grid>
-                <br />
-                <div style={{ textAlign: 'right' }}>
-                  <Button variant="contained" color="secondary" className={classes.button} onClick={() => this.saveConnectionSettings()}>
-                    Save
-                  </Button>
-                  {this.renderConnectButton()}
-                </div>
-              </form>
-            </Paper>
-        </Modal>
-      </div>
-    )
-  }
-
-  private renderProtocols() {
-    const { classes } = this.props
-    const protocolItems = protocols.map((value: string) => (
-      <MenuItem key={value} value={value}>
-        {value}
-      </MenuItem>
-    ))
-
-    return (
-      <TextField
-        select={true}
-        label="Protocol"
-        className={classes.textField}
-        value={this.state.connectionSettings.protocol}
-        onChange={this.handleChange('protocol')}
-        margin="normal"
-      >
-        {protocolItems}
-      </TextField>
-    )
-  }
-
-  private renderCertValidationSwitch() {
-    const { classes } = this.props
-    const certSwitch = (
-      <Switch
-        checked={this.state.connectionSettings.certValidation}
-        onChange={this.toggleCertValidation}
-        color="primary"
-      />
-    )
-
-    return (
-      <div className={classes.switch}>
-        <FormControlLabel
-          control={certSwitch}
-          label="Validate certificate"
-          labelPlacement="bottom"
-        />
-      </div>
-    )
-  }
-
-  private toggleCertValidation = () => this.setState({
-    connectionSettings: {
-      ...this.state.connectionSettings,
-      certValidation: !this.state.connectionSettings.certValidation,
-    },
-  })
-
-  private renderTlsSwitch() {
-    const { classes } = this.props
-    const tlsSwitch = (
-      <Switch
-        checked={this.state.connectionSettings.tls}
-        onChange={this.toggleTls}
-        color="primary"
-      />
-    )
-
-    return (
-      <div className={classes.switch}>
-        <FormControlLabel
-          control={tlsSwitch}
-          label="Encryption (tls)"
-          labelPlacement="bottom"
-        />
-      </div>
-    )
-  }
-
-  private toggleTls = () => this.setState({
-    connectionSettings: {
-      ...this.state.connectionSettings,
-      tls: !this.state.connectionSettings.tls,
-    },
-  })
-
-  private renderConnectButton() {
-    const { classes, actions } = this.props
-
-    if (this.props.connecting) {
-      return (
-        <Button variant="contained" color="primary" className={classes.button} onClick={actions.disconnect}>
-          <CircularProgress size={22} style={{ marginRight: '10px' }} color="secondary" /> Abort
-        </Button>
-      )
-    }
-    return (
-       <Button variant="contained" color="primary" className={classes.button} onClick={this.onClickConnect}>
-        Connect
-      </Button>
-    )
-  }
-
-  private onClickConnect = () => {
-    const connectionId = String(sha1(String(Math.random())).slice(0, 8))
-    const options = this.optionsFromState()
-    this.props.actions.connect(options, connectionId)
-  }
-}
-
-const mapStateToProps = (state: AppState) => {
-  return {
-    visible: !state.connection.connected,
-    connected: state.connection.connected,
-    connecting: state.connection.connecting,
-    error: state.connection.error,
-  }
-}
-
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    actions: bindActionCreators(connectionActions, dispatch),
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(Connection.styles)(Connection))

app/src/components/ConnectionSetup/Notification.tsx

@@ -1,51 +0,0 @@
-import * as React from 'react'
-
-import { Snackbar, SnackbarContent } from '@material-ui/core'
-import { Theme, withStyles } from '@material-ui/core/styles'
-import { green, red } from '@material-ui/core/colors'
-
-interface Props {
-  message?: string
-  onClose: () => void
-  classes: any
-}
-
-class Notification extends React.Component<Props, {}> {
-  constructor(props: Props) {
-    super(props)
-  }
-
-  public static styles = (theme: Theme) => ({
-    success: {
-      backgroundColor: green[600],
-      color: theme.typography.button.color,
-    },
-    error: {
-      backgroundColor: red[600],
-      color: theme.typography.button.color,
-    },
-  })
-
-  public render() {
-    const snackbarAnchor = {
-      vertical: 'bottom' as 'bottom',
-      horizontal: 'left' as 'left',
-    }
-
-    return (
-      <Snackbar
-        anchorOrigin={snackbarAnchor}
-        open={Boolean(this.props.message)}
-        autoHideDuration={10000}
-        onClose={this.props.onClose}
-      >
-        <SnackbarContent
-          className={this.props.classes.error}
-          message={this.props.message}
-        />
-      </Snackbar>
-    )
-  }
-}
-
-export default withStyles(Notification.styles)(Notification)

app/src/components/Copy.tsx

@@ -1,70 +0,0 @@
-import * as React from 'react'
-import { Snackbar, SnackbarContent } from '@material-ui/core'
-import FileCopy from '@material-ui/icons/FileCopy'
-import Check from '@material-ui/icons/Check'
-import green from '@material-ui/core/colors/green'
-import { withStyles, Theme } from '@material-ui/core/styles'
-
-const copy = require('copy-text-to-clipboard')
-
-interface Props {
-  value: string
-  classes: any
-}
-
-interface State {
-  didCopy: boolean
-  snackBarOpen: boolean
-}
-
-const styles = (theme: Theme) => ({
-  snackbar: {
-    backgroundColor: green[600],
-    color: theme.typography.button.color,
-  },
-})
-
-class Copy extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props)
-    this.state = { didCopy: false, snackBarOpen: false }
-  }
-
-  public render() {
-    const icon = !this.state.didCopy
-      ? <FileCopy fontSize="inherit" style={{ cursor: 'pointer' }} onClick={this.handleClick} />
-      : <Check fontSize="inherit" style={{ cursor: 'default' }} />
-
-    return <span>
-      <span style={{ fontSize: '16px' }}>{icon}</span>
-      <span>
-        <Snackbar
-          anchorOrigin={{
-            vertical: 'bottom',
-            horizontal: 'left',
-          }}
-          open={this.state.snackBarOpen}
-          autoHideDuration={2000}
-          onClose={() => { this.setState({ snackBarOpen: false }) }}
-        >
-          <SnackbarContent
-            className={this.props.classes.snackbar}
-            message="Copied to clipboard"
-          />
-        </Snackbar>
-      </span>
-    </span>
-  }
-
-  private handleClick = (event: React.MouseEvent) => {
-    event.stopPropagation()
-
-    copy(this.props.value)
-    this.setState({ didCopy: true, snackBarOpen: true })
-    setTimeout(() => {
-      this.setState({ didCopy: false })
-    }, 1500)
-  }
-}
-
-export default withStyles(styles)(Copy)

app/src/components/Settings.tsx

@@ -1,172 +0,0 @@
-import * as React from 'react'
-
-import { AppState } from '../reducers'
-import {
-  Divider,
-  Drawer,
-  IconButton,
-  Input,
-  InputLabel,
-  MenuItem,
-  Select,
-  Typography,
-} from '@material-ui/core'
-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, 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: {
-    backgroundColor: theme.palette.background.default,
-    flexShrink: 0,
-  },
-  paper: {
-    width: '300px',
-  },
-  title: {
-    color: theme.palette.text.primary,
-    paddingTop: `${theme.spacing.unit}px`,
-    ...theme.mixins.toolbar,
-  },
-  input: {
-    minWidth: '150px',
-    margin: `auto ${theme.spacing.unit}px auto ${2 * theme.spacing.unit}px`,
-  },
-})
-
-interface Props {
-  autoExpandLimit: number
-  visible: boolean
-  store?: any
-  topicOrder: TopicOrder
-  classes: any
-  actions: typeof settingsActions
-}
-
-class Settings extends React.Component<Props, {}> {
-  constructor(props: any) {
-    super(props)
-    this.state = {}
-  }
-
-  public render() {
-    const { classes, actions, visible } = this.props
-    return (
-      <Drawer
-        anchor="left"
-        className={classes.drawer}
-        open={visible}
-        variant="persistent"
-      >
-        <div
-          className={classes.paper}
-          tabIndex={0}
-          role="button"
-        >
-
-          <Typography className={classes.title} variant="h6" color="inherit">
-            <IconButton onClick={actions.toggleSettingsVisibility}>
-              <ChevronRight />
-            </IconButton>
-            Settings
-          </Typography>
-          <Divider />
-
-          {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', 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' }}
-        >
-          {limits}
-        </Select>
-      </div>
-    )
-  }
-
-  private onChangeAutoExpand = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    this.props.actions.setAutoExpandLimit(parseInt(e.target.value, 10))
-  }
-
-  private renderNodeOrder() {
-    const { classes, topicOrder } = this.props
-
-    return (
-      <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}
-          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.setTopicOrder(e.target.value as TopicOrder)
-  }
-}
-
-const mapStateToProps = (state: AppState) => {
-  return {
-    autoExpandLimit: state.settings.autoExpandLimit,
-    topicOrder: state.settings.topicOrder,
-    visible: state.settings.visible,
-  }
-}
-
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    actions: bindActionCreators(settingsActions, dispatch),
-  }
-}
-
-export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(Settings))

app/src/components/Sidebar/History.tsx

@@ -1,98 +0,0 @@
-import * as React from 'react'
-
-import { Badge, Typography } from '@material-ui/core'
-import { Theme, withStyles } from '@material-ui/core/styles'
-
-interface HistoryItem {
-  title: string
-  value: string
-}
-
-interface Props {
-  items: HistoryItem[]
-  onClick?: (index: number, element: EventTarget) => void
-  classes: any
-  contentTypeIndicator?: String
-}
-
-interface State {
-  collapsed: boolean
-}
-
-class MessageHistory extends React.Component<Props, State> {
-  constructor(props: any) {
-    super(props)
-    this.state = {
-      collapsed: true,
-    }
-  }
-
-  public renderHistory() {
-    const style = {
-      backgroundColor: 'rgba(80, 80, 80, 0.6)',
-      margin: '8px',
-      padding: '8px 8px 0 8px',
-      cursor: this.props.onClick ? 'pointer' : 'inherit',
-    }
-
-    const messageStyle: React.CSSProperties = { textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }
-    const elements = this.props.items.map((element, index) => (
-      <div
-        key={index}
-        style={style}
-        onClick={(event: React.MouseEvent) => this.props.onClick && this.props.onClick(index, event.target)}
-      >
-        <div><i>{element.title}</i></div>
-        <div style={messageStyle}>
-          <span><pre>{element.value}</pre></span>
-        </div>
-      </div>
-    ))
-
-    const visible = this.props.items.length > 0 && this.state.collapsed
-
-    return (
-      <div style={{ backgroundColor: 'rgba(60, 60, 60, 0.6)', marginTop: '16px' }}>
-        <Typography
-          component={'span'}
-          onClick={this.toggle}
-          style={{ cursor: 'pointer' }}
-        >
-          <Badge
-            classes={{ badge: this.props.classes.badge }}
-            invisible={!visible}
-            badgeContent={this.props.items.length}
-            color="primary"
-          >
-            {this.state.collapsed ? '▶ History' : '▼ History'}
-          </Badge>
-          <div style={{ float: 'right' }}>{this.state.collapsed ? this.props.contentTypeIndicator : null}</div>
-        </Typography>
-        <div style={{ maxHeight: '230px', overflowY: 'scroll'  }}>
-          {this.state.collapsed ? null : this.props.children}
-          {this.state.collapsed ? null : elements}
-        </div>
-      </div>
-    )
-  }
-
-  public render() {
-    return (
-      <div
-        style={{ display: 'block', width: '100%' }}
-      >
-        {this.renderHistory()}
-      </div>
-    )
-  }
-
-  private toggle = () => {
-    this.setState({ collapsed: !this.state.collapsed })
-  }
-}
-
-const styles = (theme: Theme) => ({
-  badge: { right:'-25px' },
-})
-
-export default withStyles(styles)(MessageHistory)

app/src/components/Sidebar/MessageHistory.tsx

@@ -1,87 +0,0 @@
-import * as React from 'react'
-import * as q from '../../../../backend/src/Model'
-
-import BarChart from '@material-ui/icons/BarChart'
-import DateFormatter from '../helper/DateFormatter'
-import History from './History'
-import { TopicViewModel } from '../../TopicViewModel'
-const PlotHistory = React.lazy(() => import('./PlotHistory'))
-
-const throttle = require('lodash.throttle')
-
-interface Props {
-  node?: q.TreeNode<TopicViewModel>
-  onSelect: (message: q.Message) => void
-}
-
-interface State {
-  displayMessage?: q.Message,
-  anchorEl?: HTMLElement
-}
-
-class MessageHistory extends React.Component<Props, State> {
-  constructor(props: any) {
-    super(props)
-    this.state = { }
-  }
-
-  private updateNode = throttle(() => {
-    this.setState(this.state)
-  }, 300)
-
-  public componentWillReceiveProps(nextProps: Props) {
-    this.props.node && this.props.node.onMessage.unsubscribe(this.updateNode)
-    nextProps.node && nextProps.node.onMessage.subscribe(this.updateNode)
-  }
-
-  public componentDidMount() {
-    this.props.node && this.props.node.onMessage.subscribe(this.updateNode)
-  }
-
-  public componentWillUnMount() {
-    this.props.node && this.props.node.onMessage.unsubscribe(this.updateNode)
-  }
-
-  public render() {
-    const { node } = this.props
-    if (!node) {
-      return null
-    }
-
-    const history = node.messageHistory.toArray()
-    const historyElements = history.reverse().map(message => ({
-      title: <DateFormatter date={message.received} />,
-      value: message.value,
-    }))
-
-    const numericMessages = history.filter(message => !isNaN(parseFloat(message.value)))
-    const showPlot = numericMessages.length >= 2
-
-    return (
-      <div>
-        <History
-          items={historyElements}
-          contentTypeIndicator={showPlot ? <BarChart /> : null}
-          onClick={this.displayMessage}
-        >
-          {showPlot ? this.renderPlot(numericMessages) : null}
-        </History>
-      </div>
-    )
-  }
-
-  public renderPlot(numericMessages: q.Message[]) {
-    return (
-      <React.Suspense fallback={<div>Loading...</div>}>
-        <PlotHistory messages={numericMessages} />
-      </React.Suspense>
-    )
-  }
-
-  private displayMessage = (index: number, eventTarget: EventTarget) => {
-    const message = this.props.node && this.props.node.messageHistory.toArray()[index]
-    this.props.onSelect(message)
-  }
-}
-
-export default MessageHistory

app/src/components/Sidebar/NodeStats.tsx

@@ -1,29 +0,0 @@
-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<TopicViewModel>
-}
-
-class NodeStats extends React.Component<Props, {}> {
-  constructor(props: any) {
-    super(props)
-  }
-
-  public render() {
-    const { node } = this.props
-
-    return (
-      <div>
-        <Typography>Messages: #{node.messages}</Typography>
-        <Typography>Subtopics: {node.childTopicCount()}</Typography>
-        <Typography>Messages Subtopics: #{node.leafMessageCount()}</Typography>
-      </div>
-    )
-  }
-}
-
-export default NodeStats

app/src/components/Sidebar/PlotHistory.tsx

@@ -1,73 +0,0 @@
-const { XYPlot, XAxis, LineMarkSeries, Hint, YAxis, HorizontalGridLines, LineSeries } = require('react-vis')
-import { default as ReactResizeDetector } from 'react-resize-detector'
-
-import DateFormatter from '../helper/DateFormatter'
-import * as React from 'react'
-import * as q from '../../../../backend/src/Model'
-import 'react-vis/dist/style.css'
-
-interface Props {
-  messages: q.Message[]
-}
-
-interface Stats {
-  width: number
-  value?: any
-}
-
-class PlotHistory extends React.Component<Props, Stats> {
-  constructor(props: Props) {
-    super(props)
-    this.state = { width: 300 }
-  }
-
-  private resize = (width: number, height: number) => {
-    this.setState({ width: width - 12 })
-  }
-
-  public render() {
-    const data = this.props.messages.map((message) => {
-      return {
-        x: message.received.getTime(),
-        y: parseFloat(message.value),
-      }
-    })
-
-    return (
-      <div>
-        <XYPlot width={this.state.width} height={150}>
-          <HorizontalGridLines />
-          <YAxis />
-          <LineMarkSeries
-            onValueMouseOver={this._rememberValue}
-            onValueMouseOut={this._forgetValue}
-            size={3}
-            data={data}
-            curve="curveCardinal"
-          />
-          {this.state.value ? <Hint format={this.hintFormatter} value={this.state.value} /> : null}
-        </XYPlot>
-        <ReactResizeDetector handleWidth={true} onResize={this.resize} />
-      </div>
-    )
-  }
-
-  private hintFormatter = (point: any) => {
-    return [
-      { title: <b>Time</b>, value: <DateFormatter date={new Date(point.x)} /> },
-      { title: <b>Value</b>, value: point.y },
-    ]
-  }
-
-  private _forgetValue = () => {
-    this.setState({
-      value: undefined,
-    })
-  }
-
-  private _rememberValue = (value: any) => {
-    this.setState({ value })
-  }
-}
-
-export default PlotHistory

app/src/components/Sidebar/Publish/Model/Message.ts

@@ -1,7 +0,0 @@
-interface Message {
-  topic: string
-  payload?: string
-  sent: Date
-}
-
-export default Message

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

@@ -1,315 +0,0 @@
-import 'react-ace'
-import 'brace/mode/json'
-import 'brace/mode/text'
-import 'brace/mode/xml'
-import 'brace/theme/monokai'
-
-import * as React from 'react'
-import * as q from '../../../../../backend/src/Model'
-
-import {
-  Button,
-  FormControlLabel,
-  Radio,
-  RadioGroup,
-  TextField,
-  FormControl,
-  InputLabel,
-  Input,
-  Checkbox,
-  MenuItem,
-  Tooltip,
-} from '@material-ui/core'
-
-// tslint:disable-next-line
-import { default as AceEditor } from 'react-ace'
-import { AppState } from '../../../reducers'
-import History from '../History'
-import Message from './Model/Message'
-import Navigation from '@material-ui/icons/Navigation'
-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<TopicViewModel>
-  connectionId?: string
-  topic?: string
-  payload?: string
-  actions: typeof publishActions
-  retain: boolean
-  editorMode: string
-  qos: 0 | 1 | 2
-}
-
-interface State {
-  history: Message[]
-}
-
-class Publish extends React.Component<Props, State> {
-  constructor(props: any) {
-    super(props)
-    this.state = { history: [] }
-  }
-
-  private updatePayload = (payload: string, event?: any) => {
-    this.props.actions.setPayload(payload)
-  }
-
-  private updateTopic = (e: React.ChangeEvent<HTMLInputElement>) => {
-    this.props.actions.setTopic(e.target.value)
-  }
-
-  private updateMode = (e: React.ChangeEvent<{}>, value: string) => {
-    this.props.actions.setEditorMode(value)
-  }
-
-  private publish = (e: React.MouseEvent) => {
-    e.stopPropagation()
-    if (!this.props.connectionId) {
-      return
-    }
-
-    this.props.actions.publish(this.props.connectionId)
-
-    const topic = this.props.topic || ''
-    const payload = this.props.payload
-    if (this.props.connectionId && topic) {
-      this.addMessageToHistory(topic, payload)
-    }
-  }
-
-  private addMessageToHistory(topic: string, payload?: string) {
-    // Remove duplicates
-    let filteredHistory = this.state.history.filter(e => e.payload !== payload || e.topic !== topic)
-    filteredHistory = filteredHistory.slice(-7)
-    const history: Message[] = [...filteredHistory, { topic, payload, sent: new Date() }]
-    this.setState({ history })
-  }
-
-  public render() {
-    return (
-      <div style={{ flexGrow: 1, marginLeft: '8px' }}>
-        {this.topic()}
-        {this.editor()}
-        {this.history()}
-      </div>
-    )
-  }
-
-  private clearTopic = () => {
-    this.props.actions.setTopic('')
-  }
-
-  private topic() {
-    const topicStr = this.props.topic || ''
-
-    return (
-      <div>
-        <FormControl style={{ width: '100%' }}>
-            <InputLabel htmlFor="publish-topic">Topic</InputLabel>
-            <Input
-              id="publish-topic"
-              value={topicStr}
-              startAdornment={<span/>}
-              endAdornment={<ClearAdornment action={this.clearTopic} value={topicStr} />}
-              onBlur={this.onTopicBlur}
-              onChange={this.updateTopic}
-              multiline={true}
-              placeholder="example/topic"
-            />
-          </FormControl>
-      </div>
-    )
-  }
-
-  private onTopicBlur = (e: React.FocusEvent<HTMLInputElement>) => {
-    if (!e.target.value) {
-      this.props.actions.setTopic(undefined)
-    }
-  }
-
-  private editorOptions = {
-    showLineNumbers: false,
-    tabSize: 2,
-  }
-
-  private publishButton() {
-    return (
-      <Button
-        variant="contained"
-        size="small"
-        color="primary"
-        onClick={this.publish}
-        id="publish-button"
-      >
-        <Navigation style={{ marginRight: '8px' }} /> Publish
-      </Button>
-    )
-  }
-
-  private editorMode() {
-    return (
-      <div style={{ marginTop: '16px' }}>
-        <div style={{ width: '100%', lineHeight: '64px' }}>
-          {this.renderEditorModeSelection()}
-          <div style={{ float: 'right', marginRight: '16px' }}>
-            {this.publishButton()}
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  private renderEditorModeSelection() {
-    const labelStyle = { margin: '0 8px 0 8px' }
-    return (
-      <RadioGroup
-        style={{ display: 'inline-block', float: 'left' }}
-        value={this.props.editorMode}
-        onChange={this.updateMode}
-        row={true}
-      >
-        <FormControlLabel
-          value="text"
-          style={labelStyle}
-          control={<Radio color="primary" />}
-          label="raw"
-          labelPlacement="top"
-        />
-        <FormControlLabel
-          value="xml"
-          style={labelStyle}
-          control={<Radio color="primary" />}
-          label="xml"
-          labelPlacement="top"
-        />
-        <FormControlLabel
-          value="json"
-          style={labelStyle}
-          control={<Radio color="primary" />}
-          label="json"
-          labelPlacement="top"
-        />
-      </RadioGroup>
-    )
-  }
-
-  private onChangeQoS = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(event.target.value, 10)
-    if (value !== 0 && value !== 1 && value !== 2) {
-      return
-    }
-
-    this.props.actions.setQoS(value)
-  }
-
-  private publishMode() {
-    const labelStyle = { margin: '0 8px 0 8px' }
-    const itemStyle = { padding: '0' }
-    const tooltipStyle = { textAlign: 'center' as 'center', width: '100%' }
-    const qosSelect = (
-      <TextField
-        select={true}
-        value={this.props.qos}
-        margin="normal"
-        style={{ margin: '8px 0 8px 8px' }}
-        onChange={this.onChangeQoS}
-      >
-        <MenuItem key={0} value={0} style={itemStyle}>
-          <Tooltip title="At most once"><div style={tooltipStyle}>0</div></Tooltip>
-        </MenuItem>
-        <MenuItem key={1} value={1} style={itemStyle}>
-          <Tooltip title="At least once"><div style={tooltipStyle}>1</div></Tooltip>
-        </MenuItem>
-        <MenuItem key={2} value={2} style={itemStyle}>
-          <Tooltip title="Exactly once"><div style={tooltipStyle}>2</div></Tooltip>
-        </MenuItem>
-      </TextField>
-    )
-    return (
-      <div style={{ marginTop: '8px', clear: 'both' }}>
-        <div style={{ width: '100%', textAlign: 'right' }}>
-          <FormControlLabel
-            style={labelStyle}
-            control={qosSelect}
-            label="QoS"
-            labelPlacement="start"
-          />
-          <Tooltip title="Retained messages only appear to be retained, when client subscribes after the initial publish." placement="top">
-            <FormControlLabel
-              value="retain"
-              style={labelStyle}
-              control={<Checkbox color="primary" checked={this.props.retain} onChange={this.props.actions.toggleRetain} />}
-              label="retain"
-              labelPlacement="end"
-            />
-          </Tooltip>
-        </div>
-      </div>
-    )
-  }
-
-  private history() {
-    const items = this.state.history.reverse().map(message => ({
-      title: message.topic,
-      value: message.payload,
-    }))
-
-    return <History items={items} onClick={this.didSelectHistoryEntry} />
-  }
-
-  private didSelectHistoryEntry = (index: number) => {
-    const message = this.state.history[index]
-    this.props.actions.setTopic(message.topic)
-    this.props.actions.setPayload(message.payload)
-  }
-
-  private editor() {
-    return (
-      <div style={{ width: '100%', display: 'block' }}>
-        {this.editorMode()}
-        {this.renderEditor()}
-        {this.publishMode()}
-      </div>
-    )
-  }
-
-  private renderEditor() {
-    return (
-      <AceEditor
-        mode={this.props.editorMode}
-        theme="monokai"
-        name="UNIQUE_ID_OF_DIV"
-        width="100%"
-        height="200px"
-        showGutter={true}
-        value={this.props.payload}
-        onChange={this.updatePayload}
-        setOptions={this.editorOptions}
-        editorProps={{ $blockScrolling: true }}
-      />
-    )
-  }
-}
-
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    actions: bindActionCreators(publishActions, dispatch),
-  }
-}
-
-const mapStateToProps = (state: AppState) => {
-  return {
-    topic: state.publish.topic,
-    payload: state.publish.payload,
-    editorMode: state.publish.editorMode,
-    retain: state.publish.retain,
-    qos: state.publish.qos,
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(Publish)

app/src/components/Sidebar/Sidebar.tsx

@@ -1,242 +0,0 @@
-import * as React from 'react'
-import * as q from '../../../../backend/src/Model'
-
-import {
-  Button,
-  ExpansionPanel,
-  ExpansionPanelDetails,
-  ExpansionPanelSummary,
-  Fade,
-  Paper,
-  Popper,
-  Typography,
-  Tooltip,
-} from '@material-ui/core'
-import { StyleRulesCallback, Theme, withStyles } from '@material-ui/core/styles'
-
-import { sidebarActons } from '../../actions'
-
-import { AppState } from '../../reducers'
-import Copy from '../Copy'
-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 Topic from './Topic'
-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<TopicViewModel>,
-  actions: typeof sidebarActons,
-  classes: any,
-  connectionId?: string,
-}
-
-interface State {
-  node: q.TreeNode<TopicViewModel>
-  compareMessage?: q.Message
-  valueRenderWidth: number
-}
-
-class Sidebar extends React.Component<Props, State> {
-  private valueRef: any = React.createRef<HTMLDivElement>()
-  private updateNode = throttle(() => {
-    this.setState(this.state)
-  }, 300)
-
-  constructor(props: any) {
-    super(props)
-    console.error('Find and fix me #state')
-    this.state = { node: new q.Tree(), valueRenderWidth: 300 }
-  }
-
-  public componentWillReceiveProps(nextProps: Props) {
-    this.props.node && this.removeUpdateListener(this.props.node)
-    nextProps.node && this.registerUpdateListener(nextProps.node)
-    this.props.node && this.setState({ node: this.props.node })
-
-    if (this.props.node !== nextProps.node) {
-      this.setState({ compareMessage: undefined })
-    }
-  }
-
-  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<TopicViewModel>) {
-    node.onMerge.unsubscribe(this.updateNode)
-    node.onMessage.unsubscribe(this.updateNode)
-  }
-
-  public render() {
-    return (
-      <div className={this.props.classes.drawer}>
-        {this.renderNode()}
-      </div>
-    )
-  }
-
-  private detailsStyle = { padding: '0px 16px 8px 8px', display: 'block' }
-
-  private renderNode() {
-    const { classes, node } = this.props
-
-    const copyTopic = node ? <Copy value={node.path()} /> : null
-    const copyValue = node && node.message ? <Copy value={node.message.value} /> : null
-    const summeryStyle = { minHeight: '0' }
-    return (
-      <div>
-        <ExpansionPanel key="topic" defaultExpanded={true} disabled={!Boolean(this.props.node)}>
-          <ExpansionPanelSummary expandIcon={<ExpandMore />} style={summeryStyle}>
-            <Typography className={classes.heading}>Topic {copyTopic}</Typography>
-          </ExpansionPanelSummary>
-          <ExpansionPanelDetails style={this.detailsStyle}>
-            <Topic node={this.props.node} didSelectNode={this.updateNode} />
-          </ExpansionPanelDetails>
-        </ExpansionPanel>
-        <ExpansionPanel key="value" defaultExpanded={true}>
-          <ExpansionPanelSummary expandIcon={<ExpandMore />} style={summeryStyle}>
-            <Typography className={classes.heading}>Value {copyValue}</Typography>
-          </ExpansionPanelSummary>
-          <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}>
-              {this.showValueComparison}
-            </Popper>
-          </ExpansionPanelDetails>
-        </ExpansionPanel>
-        <ExpansionPanel defaultExpanded={true}>
-          <ExpansionPanelSummary expandIcon={<ExpandMore />} style={summeryStyle}>
-            <Typography className={classes.heading}>Publish</Typography>
-          </ExpansionPanelSummary>
-          <ExpansionPanelDetails style={this.detailsStyle}>
-            <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)}>
-          <ExpansionPanelSummary expandIcon={<ExpandMore />} style={summeryStyle}>
-            <Typography className={classes.heading}>Stats</Typography>
-          </ExpansionPanelSummary>
-          {this.renderNodeStats()}
-        </ExpansionPanel>
-      </div>
-    )
-  }
-
-  private valueRenderWidthChange = (width: number) => {
-    console.log(width)
-    this.setState({ valueRenderWidth: width })
-  }
-
-  private showValueComparison = (a: any) => (
-    <Fade {...a.TransitionProps} timeout={350}>
-      <Paper style={{ maxWidth: this.state.valueRenderWidth }}>
-        <ValueRenderer message={this.state.compareMessage} />
-      </Paper>
-    </Fade>
-  )
-
-  private messageMetaInfo() {
-    if (!this.props.node || !this.props.node.message || !this.props.node.mqttMessage) {
-      return null
-    }
-
-    const retainedButton = (
-      <Tooltip title="Delete retained topic" placement="top">
-        <Button
-          size="small"
-          color="secondary"
-          variant="contained"
-          mini={true}
-          style={{ marginTop: '-3px', padding: '0px 4px', minHeight: '24px' }}
-          onClick={this.props.actions.clearRetainedTopic}
-        >
-          retained <Clear style={{ fontSize: '16px', marginLeft: '2px' }} />
-        </Button>
-      </Tooltip>
-    )
-
-    return (
-      <div style={{ width: '100%', display: 'flex' }}>
-        <div style={{ flex: 6 }}><Typography>QoS: {this.props.node.mqttMessage.qos}</Typography></div>
-        <div style={{ flex: 8, textAlign: 'center' }}>
-          {this.props.node.mqttMessage.retain ? retainedButton : null}
-        </div>
-        <div style={{ flex: 8, textAlign: 'right' }}><Typography><i><DateFormatter date={this.props.node.message.received} /></i></Typography></div>
-      </div>
-    )
-  }
-
-  private handleMessageHistorySelect = (message: q.Message) => {
-    if (message !== this.state.compareMessage) {
-      this.setState({ compareMessage: message })
-    } else {
-      this.setState({ compareMessage: undefined })
-    }
-  }
-
-  private renderNodeStats() {
-    if (!this.props.node) {
-      return null
-    }
-
-    return (
-      <ExpansionPanelDetails style={this.detailsStyle}>
-        <NodeStats node={this.props.node} />
-      </ExpansionPanelDetails>
-    )
-  }
-}
-
-const mapStateToProps = (state: AppState) => {
-  return {
-    node: state.tree.selectedTopic,
-  }
-}
-
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    actions: bindActionCreators(sidebarActons, dispatch),
-  }
-}
-
-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

@@ -1,70 +0,0 @@
-import * as React from 'react'
-import * as q from '../../../../backend/src/Model'
-import Button from '@material-ui/core/Button'
-import { withStyles, Theme, StyleRulesCallback } from '@material-ui/core/styles'
-import { 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<TopicViewModel>
-  selected?: q.TreeNode<TopicViewModel>
-  actions: typeof treeActions
-  didSelectNode: (node: q.TreeNode<TopicViewModel>) => void
-}
-
-const styles: StyleRulesCallback<string> = (theme: Theme) => ({
-  button: {
-    textTransform: 'none',
-    padding: '3px 5px 3px 5px',
-    minWidth: '30px',
-  },
-})
-
-class Topic extends React.Component<Props, {}> {
-  public render() {
-    const { node } = this.props
-    if (!node) {
-      return null
-    }
-
-    let key = 0
-    const breadCrumps = node.branch()
-      .map(node => node.sourceEdge)
-      .filter(edge => Boolean(edge))
-      .map(edge =>
-        [(
-          <Button
-            onClick={() => this.props.actions.selectTopic(edge!.target)}
-            size="small"
-            color="secondary"
-            className={this.props.classes.button}
-            key={edge!.hash()}
-          >
-            {edge!.name}
-          </Button>
-        )],
-      )
-
-    if (breadCrumps.length === 0) {
-      return null
-    }
-
-    const joinedBreadCrumps = breadCrumps.reduce((prev, current) =>
-      prev.concat([<span key={key += 1}>/</span>]).concat(current),
-    )
-
-    return <span style={{ lineHeight: '2.2em' }}>{joinedBreadCrumps}</span>
-  }
-}
-
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    actions: bindActionCreators(treeActions, dispatch),
-  }
-}
-
-export default connect(null, mapDispatchToProps)(withStyles(styles, { withTheme: true })(Topic))

app/src/components/Sidebar/ValueRenderer.tsx

@@ -1,66 +0,0 @@
-import * as React from 'react'
-import * as q from '../../../../backend/src/Model'
-
-import { Theme, withTheme } from '@material-ui/core/styles'
-
-import { default as ReactJson } from 'react-json-view'
-
-interface Props {
-  message?: q.Message
-  theme: Theme
-}
-
-class ValueRenderer extends React.Component<Props, {}> {
-  public render() {
-    return <div style={{ padding: '8px 0px 8px 8px' }}>{this.renderValue()}</div>
-  }
-
-  public renderValue() {
-    const { message } = this.props
-    if (!message) {
-      return null
-    }
-
-    let json
-    try {
-      json = JSON.parse(message.value)
-    } catch (error) {
-      return this.renderRawValue(message.value)
-    }
-
-    if (typeof json === 'string') {
-      return this.renderRawValue(message.value)
-    } else if (typeof json === 'number') {
-      return this.renderRawValue(message.value)
-    } else if (typeof json === 'boolean') {
-      return this.renderRawValue(message.value)
-    } else {
-      const theme = (this.props.theme.palette.type === 'dark') ? 'monokai' : 'bright:inverted'
-      return (
-        <ReactJson
-          style={{ width: '100%', overflowY: 'scroll', wordBreak: 'break-all' }}
-          src={json}
-          name={null}
-          theme={theme}
-        />
-      )
-    }
-  }
-
-  private renderRawValue(value: string) {
-    const style: React.CSSProperties = {
-      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',
-      color: this.props.theme.palette.text.primary,
-    }
-
-    return <pre style={style}><code>{value}</code></pre>
-  }
-}
-
-export default withTheme()(ValueRenderer)

app/src/components/Sidebar/index.ts

@@ -1,3 +0,0 @@
-import Sidebar from './Sidebar'
-
-export { Sidebar }

app/src/components/TitleBar.tsx

@@ -1,145 +0,0 @@
-import * as React from 'react'
-
-import { AppBar, Button, IconButton, InputBase, Toolbar, Typography } from '@material-ui/core'
-import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
-
-import CloudOff from '@material-ui/icons/CloudOff'
-import Menu from '@material-ui/icons/Menu'
-import Search from '@material-ui/icons/Search'
-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: {
-    display: 'none',
-    [theme.breakpoints.up('sm')]: {
-      display: 'block',
-    },
-  },
-  search: {
-    position: 'relative',
-    borderRadius: theme.shape.borderRadius,
-    backgroundColor: fade(theme.palette.common.white, 0.15),
-    '&:hover': {
-      backgroundColor: fade(theme.palette.common.white, 0.25),
-    },
-    marginRight: theme.spacing.unit * 2,
-    marginLeft: 0,
-    width: '100%',
-    [theme.breakpoints.up('sm')]: {
-      marginLeft: theme.spacing.unit * 3,
-      width: 'auto',
-    },
-  },
-  searchIcon: {
-    width: theme.spacing.unit * 8,
-    height: '100%',
-    position: 'absolute',
-    pointerEvents: 'none',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  inputRoot: {
-    color: 'inherit',
-    width: '100%',
-  },
-  inputInput: {
-    paddingTop: theme.spacing.unit,
-    paddingRight: theme.spacing.unit,
-    paddingBottom: theme.spacing.unit,
-    paddingLeft: theme.spacing.unit * 10,
-    transition: theme.transitions.create('width'),
-    width: '100%',
-    [theme.breakpoints.up('md')]: {
-      width: 200,
-    },
-  },
-  menuButton: {
-    marginLeft: -12,
-    marginRight: 20,
-  },
-})
-
-interface Props {
-  classes: any
-  actions: {
-    settings: typeof settingsActions,
-    connection: typeof connectionActions,
-  }
-  topicFilter?: string
-}
-
-class TitleBar extends React.Component<Props, {}> {
-  constructor(props: any) {
-    super(props)
-    this.state = { }
-  }
-
-  public render() {
-    const { actions, classes } = this.props
-
-    return (
-      <AppBar position="static">
-        <Toolbar>
-          <IconButton className={classes.menuButton} color="inherit" aria-label="Menu" onClick={actions.settings.toggleSettingsVisibility}>
-            <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>
-        </Toolbar>
-      </AppBar>
-    )
-  }
-
-  private renderSearch() {
-    const { classes, topicFilter } = this.props
-
-    return (
-      <div className={classes.search}>
-        <div className={classes.searchIcon}>
-          <Search />
-        </div>
-        <InputBase
-          value={topicFilter}
-          onChange={this.onFilterChange}
-          placeholder="Search…"
-          endAdornment={<div style={{ width: '24px', paddingRight: '8px' }}><ClearAdornment 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) => {
-  return {
-    actions: {
-      settings: bindActionCreators(settingsActions, dispatch),
-      connection: bindActionCreators(connectionActions, dispatch),
-    },
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(TitleBar))

app/src/components/Tree/Tree.tsx

@@ -1,140 +0,0 @@
-import * as React from 'react'
-import * as q from '../../../../backend/src/Model'
-
-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 averagingTimeInterval = 10 * 1000
-const average = MovingAverage(averagingTimeInterval)
-
-declare var window: any
-
-interface Props {
-  actions: typeof treeActions
-  connectionId?: string
-  tree?: q.Tree<TopicViewModel>
-  filter: string
-  host?: string
-
-  topicOrder: TopicOrder
-  autoExpandLimit: number
-}
-
-interface State {
-  lastUpdate: number
-}
-
-class Tree extends React.PureComponent<Props, State> {
-  private updateTimer?: any
-  private perf: number = 0
-  private renderTime = 0
-
-  constructor(props: any) {
-    super(props)
-    this.state = { lastUpdate: 0 }
-  }
-
-  public time(): number {
-    const time = performance.now() - this.perf
-    this.perf = performance.now()
-
-    return time
-  }
-
-  public componentWillReceiveProps(nextProps: Props) {
-    if (this.props.tree !== nextProps.tree) {
-      if (this.props.tree) {
-        this.props.tree.didReceive.unsubscribe(this.throttledTreeUpdate)
-      }
-      if (nextProps.tree) {
-        nextProps.tree.didReceive.subscribe(this.throttledTreeUpdate)
-      }
-      this.setState(this.state)
-    }
-  }
-
-  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.renderTime)
-
-    this.updateTimer = setTimeout(() => {
-      window.requestIdleCallback(() => {
-        this.updateTimer && clearTimeout(this.updateTimer)
-        this.updateTimer = undefined
-        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 render() {
-    const { tree, filter } = this.props
-    if (!tree) {
-      return null
-    }
-
-    const style: React.CSSProperties = {
-      lineHeight: '1.1',
-      cursor: 'default',
-    }
-
-    return (
-      <div style={style}>
-        <TreeNode
-          key={tree.hash()}
-          animateChages={true}
-          isRoot={true}
-          treeNode={tree}
-          name={this.props.host}
-          collapsed={false}
-          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 {
-    tree: state.tree.tree,
-    filter: state.tree.filter,
-    host: state.connection.host,
-    autoExpandLimit: state.settings.autoExpandLimit,
-    topicOrder: state.settings.topicOrder,
-  }
-}
-
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    actions: bindActionCreators(treeActions, dispatch),
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(Tree)

app/src/components/Tree/TreeNode.tsx

@@ -1,251 +0,0 @@
-import * as React from 'react'
-import * as q from '../../../../backend/src/Model'
-
-import { Theme, withStyles } from '@material-ui/core/styles'
-
-import TreeNodeSubnodes from './TreeNodeSubnodes'
-import TreeNodeTitle from './TreeNodeTitle'
-import { TopicOrder } from '../../reducers/Settings'
-import { TopicViewModel } from '../../TopicViewModel'
-const debounce = require('lodash.debounce')
-
-declare var performance: any
-
-const styles = (theme: Theme) => {
-  return {
-    collapsedSubnodes: {
-      color: theme.palette.text.secondary,
-    },
-    displayBlock: {
-      display: 'block',
-    },
-    node: {
-      display: 'block',
-      marginLeft: '10px',
-    },
-    topicSelect: {
-      float: 'right' as 'right',
-      opacity: 0,
-      cursor: 'pointer',
-      marginTop: '-1px',
-    },
-    selected: {
-      backgroundColor: 'rgba(120, 120, 120, 0.55)',
-    },
-    hover: {
-      backgroundColor: 'rgba(80, 80, 80, 0.55)',
-    },
-  }
-}
-
-interface Props {
-  animateChages: boolean
-  isRoot?: boolean
-  treeNode: q.TreeNode<TopicViewModel>
-  name?: string | undefined
-  collapsed?: boolean | undefined
-  performanceCallback?: ((ms: number) => void) | undefined
-  classes: any
-  className?: string
-  topicOrder: TopicOrder
-  autoExpandLimit: number
-  lastUpdate: number
-  didSelectTopic: any
-}
-
-interface State {
-  collapsedOverride: boolean | undefined
-  mouseOver: boolean
-  selected: boolean
-}
-
-class TreeNode extends React.Component<Props, State> {
-  private dirtySubnodes: boolean = true
-  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.RefObject<HTMLDivElement> = React.createRef<HTMLDivElement>()
-  private nodeRef?: React.RefObject<HTMLDivElement> = React.createRef<HTMLDivElement>()
-
-  private subnodesDidchange = () => {
-    this.dirtySubnodes = true
-  }
-
-  private messageDidChange = () => {
-    this.dirtyMessage = true
-  }
-
-  private edgesDidChange = () => {
-    this.dirtyMessage = true
-  }
-
-  constructor(props: Props) {
-    super(props)
-
-    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)
-  }
-
-  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) {
-    return this.props.autoExpandLimit !== newProps.autoExpandLimit
-  }
-
-  public shouldComponentUpdate(nextProps: Props, nextState: State) {
-    const shouldRenderToRemoveCssAnimation = this.cssAnimationWasSetAt !== undefined
-    return this.stateHasChanged(nextState)
-      || this.propsHasChanged(nextProps)
-      || (this.dirtyEdges || this.dirtyMessage || this.dirtySubnodes)
-      || this.animationDirty
-      || shouldRenderToRemoveCssAnimation
-  }
-
-  public componentDidUpdate() {
-    if (this.props.performanceCallback) {
-      const renderTime = performance.now() - this.willUpdateTime
-      this.props.performanceCallback(renderTime)
-    }
-  }
-
-  public componentWillUpdate() {
-    if (this.props.performanceCallback) {
-      this.willUpdateTime = performance.now()
-    }
-  }
-
-  private toggle() {
-    this.setState({ collapsedOverride: !this.collapsed() })
-  }
-
-  private collapsed() {
-    if (this.state.collapsedOverride !== undefined) {
-      return this.state.collapsedOverride
-    }
-
-    return this.props.treeNode.edgeCount() > this.props.autoExpandLimit
-  }
-
-  public render() {
-    const { classes } = this.props
-    const isDirty = this.dirtyEdges || this.dirtyMessage || this.dirtySubnodes
-    this.dirtyEdges = this.dirtyMessage = this.dirtySubnodes = false
-
-    const shouldStartAnimation = (isDirty && !this.animationDirty) && !this.props.isRoot
-    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.className} ${highlightClass}`}
-        onClick={this.didClickNode}
-        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}
-            didSelectNode={this.didSelectTopic}
-          />
-        </span>
-        {this.renderNodes()}
-      </div>
-    )
-  }
-
-  private didSelectTopic = () => {
-    this.props.didSelectTopic(this.props.treeNode)
-  }
-
-  private mouseOver = (event: React.MouseEvent) => {
-    event.stopPropagation()
-    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.didSelectTopic()
-  }
-
-  private renderNodes() {
-    return (
-      <TreeNodeSubnodes
-        animateChanges={this.props.animateChages}
-        collapsed={this.collapsed()}
-        treeNode={this.props.treeNode}
-        autoExpandLimit={this.props.autoExpandLimit}
-        topicOrder={this.props.topicOrder}
-        lastUpdate={this.props.treeNode.lastUpdate}
-        didSelectTopic={this.props.didSelectTopic}
-      />
-    )
-  }
-}
-
-export default withStyles(styles)(TreeNode)

app/src/components/Tree/TreeNodeSubnodes.tsx

@@ -1,112 +0,0 @@
-import * as React from 'react'
-import * as q from '../../../../backend/src/Model'
-
-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 {
-  animateChanges: boolean
-  treeNode: q.TreeNode<TopicViewModel>
-  filter?: string
-  collapsed?: boolean | undefined
-  classes: any
-
-  lastUpdate: number
-
-  topicOrder: TopicOrder
-  selectedTopic?: q.TreeNode<TopicViewModel>
-  autoExpandLimit: number
-  didSelectTopic: any
-}
-
-interface State {
-  alreadyAdded: number
-}
-
-class TreeNodeSubnodes extends React.Component<Props, State> {
-  private renderMoreAnimationFrame?: any
-  constructor(props: Props) {
-    super(props)
-    this.state = { alreadyAdded: 10 }
-  }
-
-  private sortedNodes(): 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 (topicOrder === TopicOrder.messages) {
-      nodes = nodes.sort((a, b) => b.leafMessageCount() - a.leafMessageCount())
-    }
-    if (topicOrder === TopicOrder.topics) {
-      nodes = nodes.sort((a, b) => b.childTopicCount() - a.childTopicCount())
-    }
-
-    return nodes
-  }
-
-  private renderMore() {
-    this.renderMoreAnimationFrame = window.requestAnimationFrame(() => {
-      this.setState({ ...this.state, alreadyAdded: this.state.alreadyAdded * 1.5 })
-    })
-  }
-
-  public componentWillUnmount() {
-    window.cancelAnimationFrame(this.renderMoreAnimationFrame)
-  }
-
-  public render() {
-    const edges = this.props.treeNode.edgeArray
-    if (edges.length === 0 || this.props.collapsed) {
-      return null
-    }
-
-    if (this.state.alreadyAdded < edges.length) {
-      const delta = Math.min(this.state.alreadyAdded, edges.length - this.state.alreadyAdded)
-      this.renderMore()
-    }
-
-    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 className={this.props.classes.list}>
-        {listItems}
-      </span>
-    )
-  }
-}
-
-const styles = (theme: Theme) => ({
-  list: {
-    display: 'block' as 'block',
-    clear: 'both' as 'both',
-  },
-  listItem: {
-    padding: '3px 0px 0px 8px',
-  },
-})
-
-export default withStyles(styles)(TreeNodeSubnodes)

app/src/components/Tree/TreeNodeTitle.tsx

@@ -1,89 +0,0 @@
-import * as React from 'react'
-import { connect } from 'react-redux'
-import * as q from '../../../../backend/src/Model'
-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<TopicViewModel>
-  name?: string | undefined
-  collapsed?: boolean | undefined
-  classes: any
-  didSelectNode: any
-}
-
-class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
-  private mouseOver = (event: React.MouseEvent) => {
-    event.preventDefault()
-    this.selectTopic()
-  }
-
-  private selectTopic = debounce(() => {
-    if (this.props.treeNode.message) {
-      this.props.didSelectNode(this.props.treeNode)
-    }
-  }, 5)
-
-  public render() {
-    return (
-      <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 name = this.props.name || (this.props.treeNode.sourceEdge && this.props.treeNode.sourceEdge.name)
-
-    return <span className={this.props.classes.sourceEdge}>{name}</span>
-  }
-
-  private renderValue() {
-    return this.props.treeNode.message && this.props.treeNode.message.length > 0
-      ? <span className={this.props.classes.value}> = {this.props.treeNode.message.value.toString().slice(0, 120)}</span>
-      : null
-  }
-
-  private renderExpander() {
-    if (this.props.treeNode.edgeCount() === 0) {
-      return null
-    }
-
-    return this.props.collapsed ? '▶' : '▼'
-  }
-
-  private renderCollapsedSubnodes() {
-    if (this.props.treeNode.edgeCount() === 0 || !this.props.collapsed) {
-      return null
-    }
-
-    const messages = this.props.treeNode.leafMessageCount()
-    return <span className={this.props.classes.collapsedSubnodes}>({this.props.treeNode.childTopicCount()} topics, {messages} messages)</span>
-  }
-}
-
-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 withStyles(styles)(TreeNodeTitle)

app/src/components/helper/ClearAdornment.tsx

@@ -1,25 +0,0 @@
-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/components/helper/DateFormatter.tsx

@@ -1,14 +0,0 @@
-import * as React from 'react'
-
-interface Props {
-  date: Date
-}
-
-class DateFormatter extends React.Component<Props, {}> {
-
-  public render() {
-    return <span>{this.props.date.toLocaleDateString()} {this.props.date.toLocaleTimeString()}</span>
-  }
-}
-
-export default DateFormatter

app/src/components/helper/isElementInViewport.ts

@@ -1,12 +0,0 @@
-declare const window: any
-declare const document: any
-
-export function isElementInViewport(el: any) {
-  const rect = el.getBoundingClientRect()
-  return (
-        rect.top >= 0 &&
-        rect.left >= 0 &&
-        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
-        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
-  )
-}

app/src/index.tsx

@@ -1,48 +0,0 @@
-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 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 store = createStore(
-  reducers,
-  composeEnhancers(
-    applyMiddleware(
-      reduxThunk,
-      batchDispatchMiddleware,
-    ),
-  ),
-)
-
-const theme = createMuiTheme({
-  palette: {
-    type: 'dark',
-  },
-  typography: { useNextVariants: true },
-})
-
-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}>
-      <Provider store={store}>
-        <App name="" />
-      </Provider>
-    </MuiThemeProvider>,
-    document.getElementById('app'),
-)

app/src/reducers/Connection.ts

@@ -1,93 +0,0 @@
-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/Publish.ts

@@ -1,93 +0,0 @@
-import { Action } from 'redux'
-import { createReducer } from './lib'
-
-export interface PublishState {
-  topic?: string
-  payload?: string
-  retain: boolean
-  editorMode: string
-  qos: 0 | 1 | 2
-}
-
-export type Action = SetPayload | SetTopic | ToggleRetain | SetEditorMode | SetQoS
-
-export enum ActionTypes {
-  PUBLISH_SET_TOPIC = 'PUBLISH_SET_TOPIC',
-  PUBLISH_SET_PAYLOAD = 'PUBLISH_SET_PAYLOAD',
-  PUBLISH_TOGGLE_RETAIN = 'PUBLISH_TOGGLE_RETAIN',
-  PUBLISH_SET_EDITOR_MODE = 'PUBLISH_SET_EDITOR_MODE',
-  PUBLISH_SET_QOS = 'PUBLISH_SET_QOS',
-}
-
-export interface SetPayload {
-  type: ActionTypes.PUBLISH_SET_PAYLOAD
-  payload?: string
-}
-
-export interface SetTopic {
-  type: ActionTypes.PUBLISH_SET_TOPIC
-  topic?: string
-}
-
-export interface SetQoS {
-  type: ActionTypes.PUBLISH_SET_QOS
-  qos: 0 | 1 | 2
-}
-
-export interface SetEditorMode {
-  type: ActionTypes.PUBLISH_SET_EDITOR_MODE
-  editorMode: string
-}
-
-export interface ToggleRetain {
-  type: ActionTypes.PUBLISH_TOGGLE_RETAIN
-}
-
-const initialState: PublishState = {
-  editorMode: 'text',
-  retain: false,
-  qos: 0,
-}
-
-export const publishReducer = createReducer(initialState, {
-  PUBLISH_SET_TOPIC: setTopic,
-  PUBLISH_SET_PAYLOAD: setPayload,
-  PUBLISH_TOGGLE_RETAIN: toggleRetain,
-  PUBLISH_SET_EDITOR_MODE: setEditorMode,
-  PUBLISH_SET_QOS: setQoS,
-})
-
-function setTopic(state: PublishState, action: SetTopic) {
-  return {
-    ...state,
-    topic: action.topic,
-  }
-}
-
-function setPayload(state: PublishState, action: SetPayload) {
-  return {
-    ...state,
-    payload: action.payload,
-  }
-}
-
-function setQoS(state: PublishState, action: SetQoS) {
-  return {
-    ...state,
-    qos: action.qos,
-  }
-}
-
-function setEditorMode(state: PublishState, action: SetEditorMode) {
-  return {
-    ...state,
-    editorMode: action.editorMode,
-  }
-}
-
-function toggleRetain(state: PublishState) {
-  return {
-    ...state,
-    retain: !state.retain,
-  }
-}

app/src/reducers/Settings.ts

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

@@ -1,50 +0,0 @@
-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,72 +0,0 @@
-import { Action, Reducer, combineReducers } from 'redux'
-
-import { trackEvent } from '../tracking'
-import { PublishState, publishReducer } from './Publish'
-import { ConnectionState, connectionReducer } from './Connection'
-import { SettingsState, settingsReducer } from './Settings'
-import { TreeState, treeReducer } from './Tree'
-
-export enum ActionTypes {
-  showUpdateNotification = 'SHOW_UPDATE_NOTIFICATION',
-  showUpdateDetails = 'SHOW_UPDATE_DETAILS',
-}
-
-export interface CustomAction extends Action {
-  type: ActionTypes,
-  showUpdateNotification?: boolean
-  showUpdateDetails?: boolean
-}
-
-export interface AppState {
-  tooBigReducer: TooBigOfState
-  tree: TreeState
-  settings: SettingsState,
-  publish: PublishState
-  connection: ConnectionState
-}
-
-export interface TooBigOfState {
-  showUpdateNotification?: boolean
-  showUpdateDetails: boolean
-}
-
-const initialBigState: TooBigOfState = {
-  showUpdateDetails: false,
-}
-
-const tooBigReducer: Reducer<TooBigOfState | undefined, CustomAction> = (state = initialBigState, action) => {
-  if (!state) {
-    throw Error('No initial state')
-  }
-  trackEvent(action.type)
-
-  switch (action.type) {
-    case ActionTypes.showUpdateNotification:
-      return {
-        ...state,
-        showUpdateNotification: action.showUpdateNotification,
-      }
-
-    case ActionTypes.showUpdateDetails:
-      if (action.showUpdateDetails === undefined) {
-        return state
-      }
-      return {
-        ...state,
-        showUpdateDetails: action.showUpdateDetails,
-      }
-
-    default:
-      return state
-  }
-}
-
-const reducer = combineReducers({
-  tooBigReducer,
-  publish: publishReducer,
-  connection: connectionReducer,
-  settings: settingsReducer,
-  tree: treeReducer,
-})
-
-export default reducer

app/src/reducers/lib.ts

@@ -1,9 +0,0 @@
-export const createReducer = (initialState: any, handlers: any) => {
-  return (state = initialState, action: any) => {
-    if (handlers.hasOwnProperty(action.type)) {
-      return handlers[action.type](state, action)
-    } else {
-      return state
-    }
-  }
-}

app/src/tracking.ts

@@ -1,25 +0,0 @@
-let userId = window.localStorage.getItem('userId')
-const sha1 = require('sha1')
-import { electronRendererTelementry } from 'electron-telemetry'
-
-if (!userId) {
-  userId = sha1(sha1(Math.random()) + sha1(performance.now()) + sha1(Date.now())).slice(0, 8) as string
-  window.localStorage.setItem('userId', userId)
-}
-
-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
-  }
-  electronRendererTelementry.trackEvent(name)
-}

app/tsconfig.json

@@ -1,26 +0,0 @@
-{
-  "compileOnSave": true,
-  "compilerOptions": {
-    "noImplicitAny": true,
-    "strictNullChecks": true,
-    "strict": true,
-    "lib": ["es2017", "dom"],
-    "moduleResolution": "node",
-    "outDir": "./build/",
-    "sourceMap": true,
-    "module": "esnext",
-    "target": "es2017",
-    "jsx": "react"
-  },
-  "include": [
-    "./src/**/*"
-  ],
-  "exclude": [
-    "**/*.d.ts"
-  ],
-  "awesomeTypescriptLoaderOptions": {
-    "useCache": true,
-    "transpileModule": true,
-    "errorsAsWarnings": true
-  }
-}

app/webpack.config.js

@@ -1,80 +0,0 @@
-const LiveReloadPlugin = require('webpack-livereload-plugin');
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-
-module.exports = {
-    entry: {
-        app: "./src/index.tsx",
-        bugtracking: "./src/bugtracking.ts",
-    },
-    output: {
-        chunkFilename: '[name].bundle.js',
-        filename: "[name].bundle.js",
-        path: __dirname + "/build"
-    },
-    optimization: {
-        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',
-
-    mode: 'production',
-
-    // Enable sourcemaps for debugging webpack's output.
-    devtool: "source-map",
-
-    resolve: {
-        // Add '.ts' and '.tsx' as resolvable extensions.
-        extensions: [".ts", ".tsx", ".js", ".json"]
-    },
-
-    module: {
-        rules: [
-            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
-            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
-
-            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
-            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
-
-            {
-                test: /\.css$/,
-                use: ['style-loader', 'css-loader'],
-            },
-        ]
-    },
-
-    plugins: [
-      new LiveReloadPlugin({}),
-      new HtmlWebpackPlugin({ template: './index.html', file: './build/index.html', inject: false }),
-    //   new BundleAnalyzerPlugin(),
-    ],
-
-    // When importing a module whose path matches one of the following, just
-    // assume a corresponding global variable exists and use that instead.
-    // This is important because it allows us to avoid bundling all of our
-    // dependencies, which allows browsers to cache those libraries between builds.
-    externals: {
-        // "react": "React",
-        // "react-dom": "ReactDOM"
-    }
-};

backend/package.json

@@ -1,38 +0,0 @@
-{
-  "name": "mqtt-explorer-backend",
-  "version": "1.0.0",
-  "description": "",
-  "main": "build/index.js",
-  "scripts": {
-    "test": "mocha",
-    "build": "tsc",
-    "test-inspect": "mocha --inspect-brk",
-    "coverage": "nyc mocha",
-    "debug": "ts-node --inspect ./src/index.ts",
-    "postinstall": "yarn build"
-  },
-  "author": "",
-  "license": "ISC",
-  "nyc": {
-    "include": [
-      "src/**/*.ts",
-      "src/**/*.tsx"
-    ],
-    "exclude": [
-      "src/**/spec/*.spec.ts"
-    ],
-    "extension": [
-      ".ts",
-      ".tsx"
-    ],
-    "require": [
-      "ts-node/register"
-    ],
-    "reporter": [
-      "text-summary",
-      "html"
-    ],
-    "sourceMap": true,
-    "instrument": true
-  }
-}

backend/src/DataSource/DataSource.ts

@@ -1,16 +0,0 @@
-import { DataSourceStateMachine } from './'
-import { MqttMessage } from '../../../events'
-
-type MessageCallback = (topic: string, payload: Buffer) => void
-
-// A DataSource should automatically reconnect if connection was broken
-interface DataSource<DataSourceOptions> {
-  connect(options: DataSourceOptions): DataSourceStateMachine
-  disconnect(): void
-  onMessage(messageCallback: MessageCallback): void
-  publish(msg: MqttMessage): void
-  topicSeparator: string
-  stateMachine: DataSourceStateMachine
-}
-
-export { DataSource, MessageCallback }

backend/src/DataSource/DataSourceState.ts

@@ -1,47 +0,0 @@
-import { EventDispatcher } from '../../../events'
-
-export interface DataSourceState {
-  connecting: boolean
-  connected: boolean
-  error?: string
-}
-
-export class DataSourceStateMachine {
-  public onUpdate = new EventDispatcher<DataSourceState, DataSourceStateMachine>(this)
-  private state: DataSourceState = {
-    error: undefined,
-    connected: false,
-    connecting: false,
-  }
-
-  public setConnected(connected: boolean) {
-    this.state = {
-      connected,
-      error: undefined,
-      connecting: false,
-    }
-    this.onUpdate.dispatch(this.state)
-  }
-
-  public setError(error: Error) {
-    this.state = {
-      error: error.message,
-      connected: false,
-      connecting: false,
-    }
-    this.onUpdate.dispatch(this.state)
-  }
-
-  public setConnecting() {
-    this.state = {
-      error: undefined,
-      connected: false,
-      connecting: true,
-    }
-    this.onUpdate.dispatch(this.state)
-  }
-
-  public toJSON() {
-    return this.state
-  }
-}

backend/src/DataSource/MqttSource.ts

@@ -1,90 +0,0 @@
-import * as Url from 'url'
-
-import { Client, connect as mqttConnect } from 'mqtt'
-import { DataSource, DataSourceStateMachine } from './'
-import { MqttMessage } from '../../../events'
-
-export interface MqttOptions {
-  url: string
-  username?: string
-  password?: string
-  tls: boolean
-  certValidation: boolean
-  clientId?: string
-}
-
-export class MqttSource implements DataSource<MqttOptions> {
-  public stateMachine: DataSourceStateMachine = new DataSourceStateMachine()
-  private client: Client | undefined
-  private messageCallback?: (topic: string, message: Buffer, packet: any) => void
-  private rootSubscription = '#'
-  public topicSeparator = '/'
-
-  public onMessage(messageCallback: (topic: string, message: Buffer, packet: any) => void) {
-    this.messageCallback = messageCallback
-  }
-
-  public connect(options: MqttOptions): DataSourceStateMachine {
-    this.stateMachine.setConnecting()
-
-    const urlStr = options.tls ? options.url.replace(/^(mqtt|ws):/, '$1s:') : options.url
-    let url
-    try {
-      url = Url.parse(urlStr)
-    } catch (error) {
-      this.stateMachine.setError(error)
-      throw error
-    }
-
-    const client = mqttConnect(url, {
-      resubscribe: false,
-      rejectUnauthorized: options.certValidation,
-      username: options.username,
-      password: options.password,
-      clientId: options.clientId,
-    })
-
-    this.client = client
-
-    client.on('error', (error: Error) => {
-      console.log(error)
-      this.stateMachine.setError(error)
-    })
-
-    client.on('close', () => {
-      this.stateMachine.setConnected(false)
-    })
-
-    client.on('reconnect', () => {
-      this.stateMachine.setConnecting()
-    })
-
-    client.on('connect', () => {
-      this.stateMachine.setConnected(true)
-      client.subscribe(this.rootSubscription, (err: Error) => {
-        if (err) {
-          this.stateMachine.setError(err)
-        }
-      })
-      client.subscribe('$SYS/#', (err: Error) => {
-        if (err) {
-          console.error('failed to subscribe to sys topic', err)
-        }
-      })
-    })
-
-    client.on('message', (topic, message, packet) => {
-      this.messageCallback && this.messageCallback(topic, message, packet)
-    })
-
-    return this.stateMachine
-  }
-
-  public publish(msg: MqttMessage) {
-    this.client && this.client.publish(msg.topic, msg.payload, { qos: msg.qos, retain: msg.retain })
-  }
-
-  public disconnect() {
-    this.client && this.client.end()
-  }
-}

backend/src/DataSource/index.ts

@@ -1,3 +0,0 @@
-export { DataSource } from './DataSource'
-export { DataSourceState, DataSourceStateMachine } from './DataSourceState'
-export { MqttOptions, MqttSource } from './MqttSource'

backend/src/Model/Edge.ts

@@ -1,42 +0,0 @@
-import { Hashable, TreeNode } from './'
-const sha1 = require('sha1')
-
-export class Edge<ViewModel> implements Hashable {
-  public name: string
-
-  public target!: TreeNode<ViewModel>
-  public source?: TreeNode<ViewModel> | undefined
-  private cachedHash?: string
-
-  constructor(name: string) {
-    this.name = name
-  }
-
-  public edges() {
-    return this.target ? this.target.edgeArray : []
-  }
-
-  public hash(): string {
-    if (!this.cachedHash) {
-      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<ViewModel> {
-    if (this.source && this.source.sourceEdge) {
-      return this.source.sourceEdge.firstEdge()
-    }
-
-    return this
-  }
-}

backend/src/Model/Hashable.ts

@@ -1,3 +0,0 @@
-export interface Hashable {
-  hash(): string
-}

backend/src/Model/Message.ts

@@ -1,5 +0,0 @@
-export interface Message {
-  value?: any | undefined
-  length: number
-  received: Date
-}

backend/src/Model/RingBuffer.ts

@@ -1,70 +0,0 @@
-interface Lengthwise {
-  length: number
-}
-
-export class RingBuffer<T extends Lengthwise> {
-  private capacity: number
-  private maxItems: number
-  private usage: number = 0
-  private items: (any)[] = []
-  private start: number = 0
-  private end: number = 0
-
-  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() {
-    return this.items.slice(this.start, this.end)
-  }
-
-  public add(item: T) {
-    const size = item.length
-    this.enforceCapacityConstraints(size)
-    this.usage += size
-    this.items[this.end] = item
-    this.end += 1
-  }
-
-  private enforceCapacityConstraints(addedItemSize: number) {
-    const remainingSize = this.capacity - (this.usage + addedItemSize)
-    if (remainingSize < 0) {
-      this.freeSomeSpace(Math.abs(remainingSize))
-    }
-    while ((this.end - this.start) >= this.maxItems) {
-      this.dropFirst()
-    }
-  }
-
-  private freeSpace(): number {
-    return this.capacity - this.usage
-  }
-
-  private isEmpty(): boolean {
-    return this.usage === 0
-  }
-
-  private freeSomeSpace(requiredSpace: number) {
-    while (this.freeSpace() < requiredSpace && !this.isEmpty()) {
-      this.dropFirst()
-    }
-  }
-
-  private dropFirst() {
-    const freedSpace = this.items[this.start].length
-    this.usage -= freedSpace
-    delete this.items[this.start]
-    this.start += 1
-  }
-}

backend/src/Model/Tree.ts

@@ -1,55 +0,0 @@
-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)
-
-  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,189 +0,0 @@
-import { Edge, Message, RingBuffer } from './'
-import { EventDispatcher, MqttMessage } from '../../../events'
-
-export class TreeNode<ViewModel> {
-  public sourceEdge?: Edge<ViewModel>
-  public message?: Message
-  public mqttMessage?: MqttMessage
-  public messageHistory: RingBuffer<Message> = new RingBuffer<Message>(3000, 100)
-  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<ViewModel>>(this)
-  public onEdgesChange = new EventDispatcher<void, TreeNode<ViewModel>>(this)
-  public onMessage = new EventDispatcher<Message, TreeNode<ViewModel>>(this)
-  public isTree = false
-
-  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
-    }
-
-    message && this.setMessage(message)
-    this.onMerge.subscribe(() => {
-      this.cachedChildTopics = undefined
-      this.cachedChildTopicCount = undefined
-      this.cachedLeafMessageCount = undefined
-      this.lastUpdate = Date.now()
-    })
-    this.onEdgesChange.subscribe(() => {
-      this.lastUpdate = Date.now()
-    })
-    this.onMessage.subscribe(() => {
-      this.lastUpdate = Date.now()
-    })
-  }
-
-  public setMessage(message: Message) {
-    this.messageHistory.add(message)
-    this.message = message
-    this.messages += 1
-  }
-
-  public hash(): string {
-    return `N${(this.sourceEdge ? this.sourceEdge.hash() : '')}`
-  }
-
-  public firstNode(): TreeNode<ViewModel> {
-    return this.sourceEdge && this.sourceEdge.source ? this.sourceEdge.source.firstNode() : this
-  }
-
-  public path(): string {
-    if (!this.cachedPath) {
-      return this.branch()
-        .map(node => (node.sourceEdge && node.sourceEdge.name))
-        .filter(name => name !== undefined)
-        .join('/')
-    }
-
-    return this.cachedPath
-  }
-
-  private previous(): TreeNode<ViewModel> | undefined {
-    return this.sourceEdge ? this.sourceEdge.source || undefined : undefined
-  }
-
-  public addEdge(edge: Edge<ViewModel>, emitUpdate: boolean = false) {
-    this.edges[edge.name] = edge
-    this.edgeArray.push(edge)
-    edge.source = this
-
-    if (emitUpdate) {
-      this.onEdgesChange.dispatch()
-    }
-  }
-
-  public branch(): TreeNode<ViewModel>[] {
-    const previous = this.previous()
-    if (!previous) {
-      return [this]
-    }
-
-    return previous.branch().concat([this])
-  }
-
-  public updateWithNode(node: TreeNode<ViewModel>) {
-    if (node.message) {
-      this.setMessage(node.message)
-      this.onMessage.dispatch(node.message)
-      this.mqttMessage = node.mqttMessage
-    }
-
-    this.mergeEdges(node)
-    this.onMerge.dispatch()
-  }
-
-  public leafMessageCount(): number {
-    if (this.cachedLeafMessageCount === undefined) {
-      this.cachedLeafMessageCount = this.edgeArray
-        .map(edge => edge.target.leafMessageCount())
-        .reduce((a, b) => a + b, 0) + this.messages
-    }
-
-    return this.cachedLeafMessageCount as number
-  }
-
-  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 this.edgeArray.length
-  }
-
-  public childTopics(): TreeNode<ViewModel>[] {
-    if (this.cachedChildTopics === undefined) {
-      const initialValue = this.message && this.message.value ? [this] : []
-
-      this.cachedChildTopics = this.edgeArray
-        .map(e => e.target.childTopics())
-        .reduce((a, b) => a.concat(b), initialValue)
-    }
-
-    return this.cachedChildTopics as TreeNode<ViewModel>[]
-  }
-
-  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
-
-    for (const edgeKey of edgeKeys) {
-      const matchingEdge = this.edges[edgeKey]
-      if (matchingEdge) {
-        matchingEdge.target.updateWithNode(node.edges[edgeKey].target)
-      } else {
-        this.addEdge(node.edges[edgeKey], false)
-        edgesDidUpdate = true
-      }
-    }
-
-    if (edgesDidUpdate) {
-      this.onEdgesChange.dispatch()
-    }
-  }
-}

backend/src/Model/TreeNodeFactory.ts

@@ -1,33 +0,0 @@
-import { Edge, Tree, TreeNode } from './'
-
-interface HasLength {
-  length: number
-}
-
-export abstract class TreeNodeFactory {
-  public static insertNodeAtPosition<ViewModel>(edgeNames: string[], node: TreeNode<ViewModel>) {
-    let currentNode: TreeNode<ViewModel> = new Tree()
-    let edge
-    for (const edgeName of edgeNames) {
-      edge = new Edge<ViewModel>(edgeName)
-      currentNode.addEdge(edge)
-      currentNode = new TreeNode(edge)
-      edge.target = currentNode
-    }
-    node.sourceEdge = edge
-    node.sourceEdge!.target = node
-  }
-
-  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(),
-    })
-
-    this.insertNodeAtPosition<ViewModel>(edgeNames, node)
-
-    return node
-  }
-}

backend/src/Model/index.ts

@@ -1,7 +0,0 @@
-export { Edge } from './Edge'
-export { TreeNode } from './TreeNode'
-export { Message } from './Message'
-export { TreeNodeFactory } from './TreeNodeFactory'
-export { Tree } from './Tree'
-export { Hashable } from './Hashable'
-export * from './RingBuffer'

backend/src/Model/spec/Edge.spec.ts

@@ -1,51 +0,0 @@
-import 'mocha'
-
-import { Edge, TreeNode, TreeNodeFactory } from '../'
-
-import { expect } from 'chai'
-
-describe('Edge', () => {
-  it('should contain a name', () => {
-    const e = new Edge('foo')
-    expect(e.name).to.equal('foo')
-  })
-
-  it('firstEdge should retireve the first edge', () => {
-    const topics = 'foo/bar/baz'.split('/')
-    const leaf = TreeNodeFactory.fromEdgesAndValue(topics, undefined)
-    const bazEdge = leaf.sourceEdge
-
-    if (!bazEdge) {
-      expect.fail('should not be undefined')
-      return
-    }
-
-    expect(bazEdge.name).to.eq('baz')
-    expect(bazEdge.firstEdge().name).to.eq('foo')
-  })
-
-  it('hash should not be empty', () => {
-    const e = new Edge('bar')
-    expect(e.hash().length).to.be.gt(0)
-  })
-
-  it('hash should be stable', () => {
-    const e = new Edge('bar')
-    const previousHash = e.hash()
-    expect(e.hash()).to.eq(previousHash)
-  })
-
-  it('hash should include change if parents are different', () => {
-    const topics1 = 'foo/bar/baz'.split('/')
-    const bazEdge1 = TreeNodeFactory.fromEdgesAndValue(topics1, undefined).sourceEdge
-
-    const topics2 = 'foo/foo/baz'.split('/')
-    const bazEdge2 = TreeNodeFactory.fromEdgesAndValue(topics2, undefined).sourceEdge
-
-    if (!bazEdge1 || !bazEdge2) {
-      throw Error('should not happen')
-    }
-
-    expect(bazEdge1.hash()).to.not.eq(bazEdge2.hash())
-  })
-})

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

@@ -1,42 +0,0 @@
-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/RingBuffer.spec.ts

@@ -1,46 +0,0 @@
-import { RingBuffer } from '../'
-import { expect } from 'chai'
-import 'mocha'
-
-describe('RingBuffer', () => {
-  it('should add a new value', () => {
-    const b = new RingBuffer(30)
-    b.add('hello')
-    expect(b.toArray()[0]).to.eq('hello')
-  })
-
-  it('should add a new value after the first', () => {
-    const b = new RingBuffer(30)
-    b.add('hello')
-    b.add('world')
-    expect(b.toArray()[1]).to.eq('world')
-  })
-
-  it('should remove old values if buffer size is reached', () => {
-    const b = new RingBuffer(6)
-    b.add('hello')
-    b.add('world')
-    expect(b.toArray()[0]).to.eq('world')
-  })
-
-  it('items bigger then the buffer should be stored anyway', () => {
-    const b = new RingBuffer(3)
-    b.add('hello')
-    expect(b.toArray()[0]).to.eq('hello')
-    b.add('world')
-    expect(b.toArray()[0]).to.eq('world')
-  })
-
-  it('max item count should be respected', () => {
-    const b = new RingBuffer(100, 3)
-    b.add('a')
-    b.add('b')
-    b.add('c')
-    b.add('d')
-    b.add('e')
-    expect(b.toArray().length).to.eq(3)
-    expect(b.toArray()[0]).to.eq('c')
-    expect(b.toArray()[1]).to.eq('d')
-    expect(b.toArray()[2]).to.eq('e')
-  })
-})

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

@@ -1,18 +0,0 @@
-import 'mocha'
-
-import { Tree, TreeNodeFactory } from '../'
-
-import { expect } from 'chai'
-
-describe('Tree', () => {
-  it('node can be merged into a tree', () => {
-    const tree = new Tree()
-
-    const topics = 'foo/bar'.split('/')
-    const leaf = TreeNodeFactory.fromEdgesAndValue(topics, undefined)
-
-    tree.updateWithNode(leaf.firstNode())
-    const expectedNode = tree.findNode('foo/bar')
-    expect(expectedNode).to.eq(leaf)
-  })
-})

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

@@ -1,28 +0,0 @@
-import 'mocha'
-
-import { TreeNodeFactory } from '../'
-import { expect } from 'chai'
-
-describe('TreeNode.findNode', () => {
-  it('findNode should retrieve node', () => {
-    const topics = 'foo/bar/baz'.split('/')
-    const leaf = TreeNodeFactory.fromEdgesAndValue(topics, undefined)
-
-    const root = leaf.firstNode()
-    expect(root.sourceEdge).to.eq(undefined)
-
-    const barNode = root.findNode('foo/bar')
-    if (!barNode) {
-      expect.fail('did not find node')
-      return
-    }
-    expect(barNode.sourceEdge && barNode.sourceEdge.name).to.eq('bar')
-
-    const bazNode = root.findNode('foo/bar/baz')
-    if (!bazNode) {
-      expect.fail('did not find node')
-      return
-    }
-    expect(bazNode.sourceEdge && bazNode.sourceEdge.name).to.eq('baz')
-  })
-})

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

@@ -1,59 +0,0 @@
-import 'mocha'
-
-import { TreeNodeFactory } from  '../'
-import { expect } from 'chai'
-
-describe('TreeNode', () => {
-  it('firstNode should retrieve first node', () => {
-    const topics = 'foo/bar'.split('/')
-    const leaf = TreeNodeFactory.fromEdgesAndValue(topics, undefined)
-
-    expect(leaf.firstNode().edges['foo']).to.not.eq(undefined)
-  })
-
-  it('updateWithNode should update value', () => {
-    const topics = 'foo/bar'.split('/')
-    const leaf = TreeNodeFactory.fromEdgesAndValue(topics, '3')
-    expect(leaf.message && leaf.message.value).to.eq('3')
-    const updateLeave = TreeNodeFactory.fromEdgesAndValue(topics, '5')
-
-    const root = leaf.firstNode()
-    root.updateWithNode(updateLeave.firstNode())
-
-    expect(root.sourceEdge).to.eq(undefined)
-    expect(leaf.message && leaf.message.value).to.eq('5')
-  })
-
-  it('updateWithNode should update intermediate nodes', () => {
-    const topics1 = 'foo/bar/baz'.split('/')
-    const leaf = TreeNodeFactory.fromEdgesAndValue(topics1, '3')
-    expect(leaf.message && leaf.message.value).to.eq('3')
-
-    const topics2 = 'foo/bar'.split('/')
-    const updateLeave = TreeNodeFactory.fromEdgesAndValue(topics2, '5')
-    leaf.firstNode().updateWithNode(updateLeave.firstNode())
-
-    const barNode = leaf.firstNode().findNode('foo/bar')
-    expect(barNode && barNode.sourceEdge && barNode.sourceEdge.name).to.eq('bar')
-    expect(barNode && barNode.message && barNode.message.value).to.eq('5')
-
-    expect(leaf.sourceEdge && leaf.sourceEdge.name).to.eq('baz')
-    expect(leaf.message && leaf.message.value).to.eq('3')
-  })
-
-  it('updateWithNode should add nodes to the tree', () => {
-    const topics1 = 'foo/bar'.split('/')
-    const leaf1 = TreeNodeFactory.fromEdgesAndValue(topics1, undefined)
-
-    const topics2 = 'foo/bar/baz'.split('/')
-    const leaf2 = TreeNodeFactory.fromEdgesAndValue(topics2, undefined)
-
-    leaf1.firstNode().updateWithNode(leaf2.firstNode())
-
-    const expectedNode = leaf1.firstNode().findNode('foo/bar/baz')
-    if (!expectedNode) {
-      expect.fail('merge seems to have failed')
-      return
-    }
-  })
-})

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

@@ -1,60 +0,0 @@
-import 'mocha'
-
-import { TreeNodeFactory } from '../'
-import { expect } from 'chai'
-
-describe('TreeNodeFactory', () => {
-  it('root node must not have a sourceEdge', () => {
-    const topic = 'foo/bar'
-    const edges = topic.split('/')
-    const leaf = TreeNodeFactory.fromEdgesAndValue(edges, undefined)
-
-    expect(leaf.firstNode().sourceEdge).to.eq(undefined)
-  })
-
-  it('should create node', () => {
-    const topic = 'foo/bar'
-    const edges = topic.split('/')
-    const node = TreeNodeFactory.fromEdgesAndValue(edges, '5')
-
-    if (!node.sourceEdge || !node.sourceEdge.source || !node.message) {
-      expect.fail('should not happen')
-      return
-    }
-
-    expect(node).to.not.eq(undefined)
-    expect(node.sourceEdge.name).to.eq('bar')
-    expect(node.message.value).to.eq('5')
-
-    const foo = node.firstNode().findNode('foo')
-    expect(foo && foo.sourceEdge && foo.sourceEdge.name).to.eq('foo')
-  })
-
-  it('node should contain edges in order', () => {
-    const topic = 'foo/bar/baz'
-    const edges = topic.split('/')
-    const node = TreeNodeFactory.fromEdgesAndValue(edges, '5')
-
-    if (!node.sourceEdge || !node.sourceEdge.source || !node.message) {
-      expect.fail('should not happen')
-      return
-    }
-
-    expect(node.message.value).to.eq('5')
-    expect(node.sourceEdge.name).to.eq('baz')
-
-    const barNode = node.sourceEdge.source
-    if (!barNode || !barNode.sourceEdge) {
-      expect.fail('should not fail')
-      return
-    }
-    expect(barNode.sourceEdge.name).to.eq('bar')
-
-    const fooNode = barNode.sourceEdge.source
-    if (!fooNode || !fooNode.sourceEdge) {
-      expect.fail('should not fail')
-      return
-    }
-    expect(fooNode.sourceEdge.name).to.eq('foo')
-  })
-})

backend/src/index.ts

@@ -1,82 +0,0 @@
-import {
-  AddMqttConnection,
-  EventDispatcher,
-  MqttMessage,
-  addMqttConnectionEvent,
-  backendEvents,
-  checkForUpdates,
-  makeConnectionMessageEvent,
-  makeConnectionStateEvent,
-  makePublishEvent,
-  removeConnection,
-  updateAvailable,
-} from '../../events'
-import { DataSource, MqttSource } from './DataSource'
-
-import { UpdateInfo } from 'builder-util-runtime'
-
-export class ConnectionManager {
-  private connections: {[s: string]: DataSource<any>} = {}
-
-  public manageConnections() {
-    backendEvents.subscribe(addMqttConnectionEvent, this.handleConnectionRequest)
-    backendEvents.subscribe(removeConnection, (connectionId: string) => this.removeConnection(connectionId))
-  }
-
-  private handleConnectionRequest = (event: AddMqttConnection) => {
-    const connectionId = event.id
-    const options = event.options
-    const connection = new MqttSource()
-    this.connections[connectionId] = connection
-
-    const connectionStateEvent = makeConnectionStateEvent(connectionId)
-    connection.stateMachine.onUpdate.subscribe((state) => {
-      backendEvents.emit(connectionStateEvent, state)
-    })
-
-    connection.connect(options)
-    this.handleNewMessagesForConnection(connectionId, connection)
-    backendEvents.subscribe(makePublishEvent(connectionId), (msg: MqttMessage) => {
-      this.connections[connectionId].publish(msg)
-    })
-  }
-
-  private handleNewMessagesForConnection(connectionId: string, connection: MqttSource) {
-    const messageEvent = makeConnectionMessageEvent(connectionId)
-    connection.onMessage((topic: string, payload: Buffer, packet: any) => {
-      let buffer = payload
-      if (buffer.length > 10000) {
-        buffer = buffer.slice(0, 10000)
-      }
-
-      backendEvents.emit(messageEvent, { topic, payload: buffer.toString(), qos: packet.qos, retain: packet.retain })
-    })
-  }
-
-  public removeConnection(hash: string) {
-    const connection = this.connections[hash]
-    if (connection) {
-      connection.disconnect()
-      delete this.connections[hash]
-    }
-  }
-
-  public closeAllConnections() {
-    Object.keys(this.connections)
-      .forEach(hash => this.removeConnection(hash))
-  }
-}
-
-class UpdateNotifier {
-  public onCheckUpdateRequest = new EventDispatcher<void, UpdateNotifier>(this)
-  constructor() {
-    backendEvents.subscribe(checkForUpdates, () => {
-      this.onCheckUpdateRequest.dispatch()
-    })
-  }
-  public notify(updateInfo: UpdateInfo) {
-    backendEvents.emit(updateAvailable, updateInfo)
-  }
-}
-
-export const updateNotifier = new UpdateNotifier()

backend/test/mocha.opts

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

backend/tsconfig.json

@@ -1,21 +0,0 @@
-{
-  "compileOnSave": true,
-  "compilerOptions": {
-    "noImplicitAny": true,
-    "strictNullChecks": true,
-    "outDir": "./build",
-    "strict": true,
-    "lib": ["es2017", "dom"],
-    "sourceMap": true
-  },
-  "includes": [
-    "src/**/*.ts"
-  ],
-  "exclude": [
-    "app",
-    "node_modules",
-    "src/**/*.spec.ts",
-    "**/*.d.ts",
-    "typings"
-  ]
-}

docker/Dockerfile

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

@@ -1,12 +0,0 @@
-#!/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

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

events/EventBus.ts

@@ -1,88 +0,0 @@
-import { IpcMain, IpcRenderer, ipcMain, ipcRenderer } from 'electron'
-
-import { Event } from './Events'
-
-export interface EventBusInterface {
-  subscribe<MessageType>(event: Event<MessageType>, callback:(msg: MessageType) => void): void
-  unsubscribeAll<MessageType>(event: Event<MessageType>): void
-  emit<MessageType>(event: Event<MessageType>, msg: MessageType): void
-  unsubscribe<MessageType>(event: Event<MessageType>, callback: any): void
-}
-
-interface CallbackStore {
-  wrappedCallback: any
-  callback: any
-}
-
-class IpcMainEventBus implements EventBusInterface {
-  private ipc: IpcMain
-  private client: any
-  constructor(ipc: IpcMain) {
-    this.ipc = ipc
-  }
-
-  public subscribe<MessageType>(event: Event<MessageType>, callback:(msg: MessageType) => void) {
-    console.log('subscribing', event.topic)
-    this.ipc.on(event.topic, (event: any, arg: any) => {
-      this.client = event.sender
-      callback(arg)
-    })
-  }
-
-  public unsubscribeAll<MessageType>(event: Event<MessageType>) {
-    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)
-    }
-  }
-}
-
-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) {
-    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)
-  }
-}
-
-export const rendererEvents = new IpcRendererEventBus(ipcRenderer)
-export const backendEvents = new IpcMainEventBus(ipcMain)

events/EventDispatcher.ts

@@ -1,47 +0,0 @@
-import { EventEmitter } from 'events'
-
-interface CallbackStore {
-  wrappedCallback: any
-  callback: any
-}
-
-export class EventDispatcher<Message, Dispatcher> {
-  private emitter = new EventEmitter()
-  private dispatcher: Dispatcher
-  private callbacks: CallbackStore[] = []
-
-  constructor(dispatcher: Dispatcher) {
-    this.dispatcher = dispatcher
-  }
-
-  public dispatch(msg: Message) {
-    this.emitter.emit('event', msg)
-  }
-
-  public subscribe(callback: (msg: Message, dispatcher: Dispatcher) => void) {
-    const wrappedCallback = (msg: Message) => {
-      callback(msg, this.dispatcher)
-    }
-    this.emitter.on('event', wrappedCallback)
-
-    this.callbacks.push({
-      callback,
-      wrappedCallback,
-    })
-  }
-
-  public unsubscribe(callback: (msg: Message, dispatcher: Dispatcher) => void) {
-    const item = this.callbacks.find(store => store.callback === callback)
-    if (!item) {
-      return
-    }
-
-    this.emitter.removeListener('event', item.wrappedCallback)
-    this.callbacks = this.callbacks.filter(a => a !== item)
-  }
-
-  public removeAllListeners() {
-    this.emitter.removeAllListeners()
-    this.callbacks = []
-  }
-}

events/Events.ts

@@ -1,55 +0,0 @@
-import { DataSourceState, MqttOptions } from '../backend/src/DataSource'
-
-import { UpdateInfo } from 'builder-util-runtime'
-
-export { UpdateInfo } from 'builder-util-runtime'
-
-export interface Event<MessageType> {
-  topic: string
-}
-
-export interface AddMqttConnection {
-  id: string,
-  options: MqttOptions
-}
-
-export const addMqttConnectionEvent: Event<AddMqttConnection> = {
-  topic: 'connection/add/mqtt',
-}
-
-export const removeConnection: Event<string> = {
-  topic: 'connection/remove',
-}
-
-export function makeConnectionStateEvent(connectionId: string): Event<DataSourceState> {
-  return {
-    topic: `conn/state/${connectionId}`,
-  }
-}
-
-export const checkForUpdates: Event<void> = {
-  topic: 'app/update/check',
-}
-
-export const updateAvailable: Event<UpdateInfo> = {
-  topic: 'app/update/available',
-}
-
-export interface MqttMessage {
-  topic: string,
-  payload: any,
-  qos: 0 | 1 | 2,
-  retain: boolean
-}
-
-export function makePublishEvent(connectionId: string): Event<MqttMessage> {
-  return {
-    topic: `conn/publish/${connectionId}`,
-  }
-}
-
-export function makeConnectionMessageEvent(connectionId: string): Event<MqttMessage> {
-  return {
-    topic: `conn/${connectionId}`,
-  }
-}

events/index.ts

@@ -1,3 +0,0 @@
-export * from './Events'
-export * from './EventDispatcher'
-export * from './EventBus'

img/makeThumbs.sh

@@ -0,0 +1,14 @@
+convert screen1.png -resize 33% screen1_small.png
+convert screen2.png -resize 33% screen2_small.png
+convert screen3.png -resize 33% screen3_small.png
+convert screen_dark_mode.png -resize 33% screen_dark_mode_small.png
+
+convert -size 2560x1600 xc:black -fill white -draw "polygon 0,0 0,2560 2200,0" framemask.png
+convert screen_dark_mode.png framemask.png -alpha off -compose copy_opacity -composite first_half.png
+convert -respect-parenthesis screen4.png \( framemask.png -negate \) -alpha off -compose copy_opacity -composite second_half.png
+convert *_half.png -compose over -composite screen-composite.png
+
+convert screen-composite.png -resize 33% screen-composite_small.png
+rm framemask.png *_half.png
+
+optipng *.png