Work in progress

2026-09-12 01:23:31 +00:00 · 2019-02-17 22:34:46 +01:00
39 changed files with 148 additions and 505 deletions
@@ -30,7 +30,7 @@ The app is available for Windows ([portable](https:&#x2F;&#x2F;github.com&#x2F;t
 [More Downloads](https://github.com/thomasnordquist/MQTT-Explorer/releases)

 ## Demo
-![screencast](https://user-images.githubusercontent.com/7721625/52979302-3f073b80-33d5-11e9-9953-b70ebb349439.gif)
+![screencast](https://user-images.githubusercontent.com/7721625/51978075-5bc0eb00-2489-11e9-953a-0965b154557b.gif)

 ## Performance
 This App is optimized to handle thousands of topics and at least hundreds of thousands messages per minute.
@@ -30,7 +30,7 @@ The app is available for Windows ({{windowsTargets}}), Linux ({{linuxTargets}})
 [More Downloads](https://github.com/thomasnordquist/MQTT-Explorer/releases)

 ## Demo
-![screencast](https://user-images.githubusercontent.com/7721625/52979302-3f073b80-33d5-11e9-9953-b70ebb349439.gif)
+![screencast](https://user-images.githubusercontent.com/7721625/51978075-5bc0eb00-2489-11e9-953a-0965b154557b.gif)

 ## Performance
 This App is optimized to handle thousands of topics and at least hundreds of thousands messages per minute.
@@ -2,7 +2,7 @@
 <html>
    <head>
        <meta charset="UTF-8" />
-        <title>MQTT Explorer</title>
+        <title>MQTT-Explorer</title>
        <script src="./bugtracking.bundle.js"></script>

        <style>
@@ -38,6 +38,7 @@
    "react-ace": "^6.3.2",
    "react-dom": "^16.7.0",
    "react-json-view": "^1.19.1",
+    "react-keyboard-event-handler": "^1.4.1",
    "react-redux": "^6.0.0",
    "react-resize-detector": "^3.4.0",
    "react-split-pane": "^0.1.85",
@@ -11,7 +11,7 @@ import { AppState } from './reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { default as SplitPane } from 'react-split-pane'
-import { globalActions, settingsActions } from './actions'
+import { globalActions } from './actions'
 import { Theme, withStyles } from '@material-ui/core/styles'

 const Settings = React.lazy(() => import('./components/Settings'))
@@ -22,8 +22,7 @@ interface Props {
  classes: any
  settingsVisible: boolean
  error?: string
-  actions: typeof globalActions
-  settingsActions: typeof settingsActions
+  actions: any
 }

 class App extends React.PureComponent<Props, {}> {
@@ -32,10 +31,6 @@ class App extends React.PureComponent<Props, {}> {
    this.state = { }
  }

-  public componentDidMount() {
-    this.props.settingsActions.loadSettings()
-  }
-
  private renderError() {
    if (this.props.error) {
      const error = typeof this.props.error === 'string' ? this.props.error : JSON.stringify(this.props.error)
@@ -99,7 +94,6 @@ const mapStateToProps = (state: AppState) => {
    settingsVisible: state.settings.visible,
    connectionId: state.connection.connectionId,
    error: state.globalState.error,
-    highlightTopicUpdates: state.settings.highlightTopicUpdates,
  }
 }

@@ -148,7 +142,6 @@ const styles = (theme: Theme) => {
 const mapDispatchToProps = (dispatch: any) => {
  return {
    actions: bindActionCreators(globalActions, dispatch),
-    settingsActions: bindActionCreators(settingsActions, dispatch),
  }
 }

@@ -31,6 +31,7 @@ class RemoteStorage implements PersistantStorage {
    const ack = makeStorageAcknoledgementEvent(transactionId)
    return new Promise<void>((resolve, reject) => {
      const callback = (msg: any) => {
+        console.log(msg)
        if (msg && msg.error) {
          reject(msg.error)
        } else {
@@ -43,7 +44,7 @@ class RemoteStorage implements PersistantStorage {
    })
  }

-  public store<Model>(identifier: StorageIdentifier<Model>, data: Model): Promise<void> {
+  public store<Model>(identifier: StorageIdentifier<Model>,  data: Model): Promise<void> {
    const transactionId = v4()
    const expectation = this.expectAck(transactionId)
    rendererEvents.emit(storageStoreEvent, { data, transactionId, store: identifier.id })
@@ -56,6 +57,8 @@ class RemoteStorage implements PersistantStorage {

    const promise = new Promise<Model>((resolve, reject) => {
      const callback = (msg: any) => {
+        console.log(msg)
+
        if (msg.error) {
          reject(msg.error)
        } else {
@@ -3,6 +3,7 @@ import { EventDispatcher } from '../../events'
 export class TopicViewModel {
  private selected: boolean
  public change = new EventDispatcher<void, TopicViewModel>(this)
+  public attached = true // When the viewmodel is attached it's always visible

  public constructor() {
    this.selected = false
@@ -9,7 +9,7 @@ import {
 } from '../../../events'
 import { AppState } from '../reducers'
 import { Dispatch } from 'redux'
-import { MqttOptions, DataSourceState } from '../../../backend/src/DataSource'
+import { MqttOptions } from '../../../backend/src/DataSource'
 import { showTree } from './Tree'
 import { TopicViewModel } from '../TopicViewModel'
 import { showError } from './Global'
@@ -31,27 +31,6 @@ export const connect = (options: MqttOptions, connectionId: string) => (dispatch
      dispatch(showError(dataSourceState.error))
      dispatch(disconnect())
    }
-    dispatch(updateHealth(dataSourceState))
-  })
-}
-
-const updateHealth = (dataSourceState: DataSourceState) => (dispatch: Dispatch<any>, getState: () => AppState) => {
-  let state
-  if (dataSourceState.connecting) {
-    state = 'connecting'
-  } else if (!dataSourceState.connected) {
-    state = 'offline'
-  } else if (dataSourceState.connected) {
-    state = 'online'
-  } else {
-    state = undefined
-  }
-
-  console.log(state)
-
-  dispatch({
-    type: ActionTypes.CONNECTION_SET_HEALTH,
-    health: state,
  })
 }

@@ -35,7 +35,6 @@ export const loadConnectionSettings = () => async (dispatch: Dispatch<any>, getS

 export const saveConnectionSettings = () => async (dispatch: Dispatch<any>, getState: () => AppState) => {
  try {
-    console.log('store settings')
    await persistantStorage.store(storedConnectionsIdentifier, getState().connectionManager.connections)
  } catch (error) {
    dispatch(showError(error))
@@ -1,76 +1,30 @@
-import * as q from '../../../backend/src/Model'
-import { AppState } from '../reducers'
-import { autoExpandLimitSet } from '../components/Settings'
-import { batchActions } from 'redux-batched-actions'
-import { default as persistantStorage, StorageIdentifier } from '../PersistantStorage'
+import { Action, ActionTypes, TopicOrder } from '../reducers/Settings'
 import { Dispatch } from 'redux'
-import { showError } from './Global'
 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'
-import {
-  ActionTypes,
-  SettingsState,
-  TopicOrder,
-} from '../reducers/Settings'

-const settingsIdentifier: StorageIdentifier<Partial<SettingsState>> = {
-  id: 'Settings',
-}
-
-export const loadSettings = () => async (dispatch: Dispatch<any>, _getState: () => AppState)  => {
-  try {
-    const settings = await persistantStorage.load(settingsIdentifier)
-    dispatch({
-      settings,
-      type: ActionTypes.SETTINGS_DID_LOAD_SETTINGS,
-    })
-  } catch (error) {
-    dispatch(showError(error))
-  }
-}
-
-export const storeSettings = () => async (dispatch: Dispatch<any>, getState: () => AppState)  => {
-  const settings = {
-    ...getState().settings,
-    topicFilter: undefined,
-    visible: undefined,
-  }
-
-  try {
-    await persistantStorage.store(settingsIdentifier, settings)
-  } catch (error) {
-    dispatch(showError(error))
-  }
-}
-
-export const setAutoExpandLimit = (autoExpandLimit: number = 0) => (dispatch: Dispatch<any>, getState: () => AppState) => {
-  dispatch({
+export const setAutoExpandLimit = (autoExpandLimit: number = 0): Action => {
+  return {
    autoExpandLimit,
    type: ActionTypes.SETTINGS_SET_AUTO_EXPAND_LIMIT,
-  })
-  dispatch(storeSettings())
+  }
 }

-export const toggleSettingsVisibility = () => (dispatch: Dispatch<any>, _getState: () => AppState) => {
-  dispatch({
+export const toggleSettingsVisibility = (): Action => {
+  return {
    type: ActionTypes.SETTINGS_TOGGLE_VISIBILITY,
-  })
-  dispatch(storeSettings())
+  }
 }

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

 export const filterTopics = (filterStr: string) => (dispatch: Dispatch<any>, getState: () => AppState)  => {
@@ -1,46 +1,21 @@
 import { Dispatch, Action } from 'redux'
 import { AppState } from '../reducers'
 import { makePublishEvent, rendererEvents } from '../../../events'
-import * as q from '../../../backend/src/Model'

-export const clearRetainedTopic = () => (dispatch: Dispatch<any>, getState: () => AppState) => {
+export const clearRetainedTopic = () => (dispatch: Dispatch<Action>, getState: () => AppState)  => {
  const { selectedTopic } = getState().tree
-  if (!selectedTopic) {
-    return
-  }
-
-  dispatch(clearTopic(selectedTopic, false))
-}
-
-export const clearTopic = (topic: q.TreeNode<any>, recursive: boolean, subtopicClearLimit = 50) => (dispatch: Dispatch<any>, getState: () => AppState)  => {
  const { connectionId } = getState().connection
-  if (!connectionId) {
+
+  if (!selectedTopic || !connectionId) {
    return
  }

  const publishEvent = makePublishEvent(connectionId)
  const mqttMessage = {
-    topic: topic.path(),
+    topic: selectedTopic.path(),
    payload: null,
    retain: true,
    qos: 0 as 0,
  }
-  console.log('deleting', topic.path())
  rendererEvents.emit(publishEvent, mqttMessage)
-
-  if (recursive) {
-    topic.childTopics()
-      .filter(topic => Boolean(topic.message && topic.message.value))
-      .slice(0, subtopicClearLimit)
-      .forEach((topic) => {
-        console.log('deleting', topic.path())
-        const mqttMessage = {
-          topic: topic.path(),
-          payload: null,
-          retain: true,
-          qos: 0 as 0,
-        }
-        rendererEvents.emit(publishEvent, mqttMessage)
-      })
-  }
 }
@@ -5,6 +5,7 @@ import { Dispatch, AnyAction } from 'redux'
 import { setTopic } from './Publish'
 import { TopicViewModel } from '../TopicViewModel'
 import { batchActions } from 'redux-batched-actions'
+import { treeActions } from '.';
 const debounce = require('lodash.debounce')

 export const selectTopic = (topic: q.TreeNode<TopicViewModel>) => (dispatch: Dispatch<any>, getState: () => AppState)  => {
@@ -43,6 +44,26 @@ const debouncedSelectTopic = debounce((topic: q.TreeNode<TopicViewModel>, dispat
  }
 }, 70)

+export const handleKeyEvent = (key: string) => (dispatch: Dispatch<any>, getState: () => AppState) => {
+  const state = getState()
+  const { tree, selectedTopic } = state.tree
+  if (!tree) {
+    return
+  }
+
+  if (!selectedTopic) {
+    return dispatch(selectTopic(tree.firstNode()))
+  }
+
+  const visibleTopics: q.TreeNode<TopicViewModel>[] = tree.childTopics().filter(topic => topic.viewModel && topic.viewModel.attached)
+  if (key === 'down') {
+    debugger
+    const selectedIndex = visibleTopics.indexOf(selectedTopic)
+    const nextIndex = (visibleTopics.length - 1) % (selectedIndex + 1)
+    return dispatch(selectTopic(visibleTopics[nextIndex]))
+  }
+}
+
 export const showTree = (tree?: q.Tree<TopicViewModel>) => (dispatch: Dispatch<any>, getState: () => AppState): AnyAction  => {
  const visibleTree = getState().tree.tree
  const connectionTree = getState().connection.tree
@@ -24,6 +24,7 @@ const styles: StyleRulesCallback = theme => ({
    height: '224px',
    backgroundColor: 'rebeccapurple',
    marginBottom: 0,
+    marginTop: 'auto',
    padding: '8px',
  },
 })
@@ -1,54 +0,0 @@
-import * as React from 'react'
-import DeviceHubOutlined from '@material-ui/icons/DeviceHubOutlined'
-import { AppState } from '../reducers'
-import { connect } from 'react-redux'
-import { ConnectionHealth } from '../reducers/Connection'
-import { green, orange, red } from '@material-ui/core/colors'
-import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
-import { Tooltip } from '@material-ui/core'
-
-const styles: StyleRulesCallback = theme => ({
-  offline: {
-    color: red[700],
-  },
-  online: {
-    color: green[500],
-  },
-  connecting: {
-    color: orange[600],
-  },
-})
-
-interface Props {
-  classes: any
-  connected: boolean
-  health?: ConnectionHealth
-}
-
-class ConnectionHealthIndicator extends React.Component<Props, {}> {
-  constructor(props: any) {
-    super(props)
-  }
-
-  public render() {
-    const { classes, health, connected } = this.props
-    if (!health || !connected) {
-      return null
-    }
-
-    return (
-      <Tooltip title={`Connection health "${health}"`}>
-        <DeviceHubOutlined className={classes[health]} />
-      </Tooltip>
-    )
-  }
-}
-
-const mapStateToProps = (state: AppState) => {
-  return {
-    health: state.connection.health,
-    connected: state.connection.connected || state.connection.connecting,
-  }
-}
-
-export default connect(mapStateToProps)(withStyles(styles)(ConnectionHealthIndicator))
@@ -14,6 +14,7 @@ import { StyleRulesCallback, Theme, withStyles } from '@material-ui/core/styles'

 import {
  Button,
+  CircularProgress,
  FormControl,
  FormControlLabel,
  Grid,
@@ -25,7 +26,6 @@ import {
  Switch,
  TextField,
 } from '@material-ui/core'
-import ConnectionHealthIndicator from '../ConnectionHealthIndicator'

 interface Props {
  connection: ConnectionOptions
@@ -284,7 +284,7 @@ class ConnectionSettings extends React.Component<Props, State> {
    if (this.props.connecting) {
      return (
        <Button variant="contained" color="primary" className={classes.button} onClick={actions.disconnect}>
-          <ConnectionHealthIndicator />&nbsp;&nbsp;Abort
+          <CircularProgress size={22} style={{ marginRight: '10px' }} color="secondary" /> Abort
        </Button>
      )
    }
@@ -1,10 +1,9 @@
 import * as React from 'react'
-import { Snackbar, SnackbarContent, Tooltip } from '@material-ui/core'
+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'
-import CustomIconButton from './CustomIconButton';

 const copy = require('copy-text-to-clipboard')

@@ -33,36 +32,28 @@ class Copy extends React.Component<Props, State> {

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

-    return (
+    return <span>
+      <span style={{ fontSize: '16px' }}>{icon}</span>
      <span>
-        <Tooltip placement="top" title="Copy to clipboard">
-          <span style={{ fontSize: '16px' }}>
-          <CustomIconButton onClick={this.handleClick} >
-            {icon}
-          </CustomIconButton>
-          </span>
-        </Tooltip>
-        <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>
+        <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) => {
@@ -1,34 +0,0 @@
-import * as React from 'react'
-import { IconButton } from '@material-ui/core'
-import { withStyles, Theme } from '@material-ui/core/styles'
-
-interface Props {
-  onClick: any,
-  classes: any
-}
-
-const styles = (theme: Theme) => ({
-  button: {
-    padding: '6px',
-    fontSize: '1.2em',
-  },
-})
-
-class CustomIconButton extends React.Component<Props, {}> {
-  constructor(props: Props) {
-    super(props)
-  }
-
-  public render() {
-    return (
-      <IconButton className={this.props.classes.button} onClick={this.onClick}>{this.props.children}</IconButton>
-    )
-  }
-
-  private onClick = (event: React.MouseEvent) => {
-    event.stopPropagation()
-    this.props.onClick(event)
-  }
-}
-
-export default withStyles(styles)(CustomIconButton)
@@ -10,18 +10,15 @@ import {
  MenuItem,
  Select,
  Typography,
-  Switch,
-  Tooltip,
 } 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 } from '../actions'
+import { settingsActions, treeActions } from '../actions'
 import { TopicOrder } from '../reducers/Settings'
 import BrokerStatistics from './BrokerStatistics'
-import { shell } from 'electron';

 export const autoExpandLimitSet = [{
  limit: 0,
@@ -57,16 +54,10 @@ const styles: StyleRulesCallback = theme => ({
    minWidth: '150px',
    margin: `auto ${theme.spacing(1)} auto ${theme.spacing(2)}px`,
  },
-  author: {
-    margin: 'auto 8px 8px auto',
-    color: theme.palette.text.hint,
-    cursor: 'pointer' as 'pointer',
-  },
 })

 interface Props {
  autoExpandLimit: number
-  highlightTopicUpdates: boolean
  visible: boolean
  store?: any
  topicOrder: TopicOrder
@@ -105,38 +96,12 @@ class Settings extends React.Component<Props, {}> {

          {this.renderAutoExpand()}
          {this.renderNodeOrder()}
-          {this.renderhighlightTopicUpdates()}
        </div>
-        <Tooltip placement="top" title="App Author">
-          <Typography className={classes.author} onClick={this.openGithubPage}>
-            by Thomas Nordquist
-          </Typography>
-        </Tooltip>
        <BrokerStatistics />
      </Drawer>
    )
  }

-  private openGithubPage = () => {
-    shell.openExternal('https://github.com/thomasnordquist')
-  }
-
-  private renderhighlightTopicUpdates() {
-    const { highlightTopicUpdates, actions } = this.props
-
-    return (
-      <div style={{ padding: '8px', display: 'flex' }}>
-        <InputLabel htmlFor="toggle-highlight-activity" style={{ flex: '1', marginTop: '8px' }}>Show Activity</InputLabel>
-        <Switch
-          name="toggle-highlight-activity"
-          checked={highlightTopicUpdates}
-          onChange={actions.togglehighlightTopicUpdates}
-          color="primary"
-        />
-      </div>
-    )
-  }
-
  private renderAutoExpand() {
    const { classes, autoExpandLimit } = this.props

@@ -167,7 +132,7 @@ class Settings extends React.Component<Props, {}> {

    return (
      <div style={{ padding: '8px', display: 'flex' }}>
-        <InputLabel htmlFor="auto-expand" style={{ flex: '1', marginTop: '8px' }}>Topic Order</InputLabel>
+        <InputLabel htmlFor="auto-expand" style={{ flex: '1', marginTop: '8px' }}>Topic order</InputLabel>
        <Select
          value={topicOrder}
          onChange={this.onChangeSorting}
@@ -195,7 +160,6 @@ const mapStateToProps = (state: AppState) => {
    autoExpandLimit: state.settings.autoExpandLimit,
    topicOrder: state.settings.topicOrder,
    visible: state.settings.visible,
-    highlightTopicUpdates: state.settings.highlightTopicUpdates,
  }
 }

@@ -1,22 +1,5 @@
-import * as q from '../../../../backend/src/Model'
 import * as React from 'react'
-import Clear from '@material-ui/icons/Clear'
-import Copy from '../Copy'
-import CustomIconButton from '../CustomIconButton'
-import DateFormatter from '../helper/DateFormatter'
-import Delete from '@material-ui/icons/Delete'
-import DeleteForever from '@material-ui/icons/DeleteForever'
-import ExpandMore from '@material-ui/icons/ExpandMore'
-import MessageHistory from './MessageHistory'
-import NodeStats from './NodeStats'
-import Topic from './Topic'
-import { AppState } from '../../reducers'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-import { default as ReactResizeDetector } from 'react-resize-detector'
-import { sidebarActons } from '../../actions'
-import { StyleRulesCallback, Theme, withStyles } from '@material-ui/core/styles'
-import { TopicViewModel } from '../../TopicViewModel'
+import * as q from '../../../../backend/src/Model'

 import {
  Button,
@@ -28,9 +11,23 @@ import {
  Popper,
  Typography,
  Tooltip,
-  Badge,
 } 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'))
@@ -95,63 +92,17 @@ class Sidebar extends React.Component<Props, State> {

  private detailsStyle = { padding: '0px 16px 8px 8px', display: 'block' }

-  private renderTopicDeleteButton() {
-    if (!this.props.node) {
-      return null
-    }
-
-    return (
-      <CustomIconButton onClick={() => this.deleteTopic(this.props.node)}>
-        <Tooltip title="Clear this topic">
-          <Delete />
-        </Tooltip>
-      </CustomIconButton>
-    )
-  }
-
-  private renderRecursiveTopicDeleteButton() {
-    const deleteLimit = 50
-    const topicCount = this.props.node ? this.props.node.childTopicCount() : 0
-    if (!this.props.node || topicCount === 0) {
-      return null
-    }
-
-    return (
-      <CustomIconButton onClick={() => this.deleteTopic(this.props.node, true, deleteLimit)}>
-        <Tooltip title={`Deletes up to ${deleteLimit} sub-topics with a single click`}>
-          <Badge
-            classes={{ badge: this.props.classes.badge }}
-            badgeContent={<span style={{ whiteSpace: 'nowrap' }}>{topicCount >= deleteLimit ? '50+' : topicCount}</span>}
-            color="secondary"
-          >
-            <DeleteForever color="action" />
-          </Badge>
-        </Tooltip>
-      </CustomIconButton>
-    )
-  }
-
-  private deleteTopic = (topic?: q.TreeNode<TopicViewModel>, recursive: boolean = false, maxCount = 50) => {
-    if (!topic) {
-      return
-    }
-
-    this.props.actions.clearTopic(topic, recursive, maxCount)
-  }
-
  private renderNode() {
    const { classes, node } = this.props

    const copyTopic = node ? <Copy value={node.path()} /> : null
-    const deleteTopic = this.renderTopicDeleteButton()
-    const deleteRecursiveTopic = this.renderRecursiveTopicDeleteButton()
    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} {deleteTopic} {deleteRecursiveTopic}</Typography>
+            <Typography className={classes.heading}>Topic {copyTopic}</Typography>
          </ExpansionPanelSummary>
          <ExpansionPanelDetails style={this.detailsStyle}>
            <Topic node={this.props.node} didSelectNode={this.updateNode} />
@@ -17,7 +17,6 @@ import { connect } from 'react-redux'
 import { connectionActions, settingsActions } from '../actions'
 import { fade } from '@material-ui/core/styles/colorManipulator'
 import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
-import ConnectionHealthIndicator from './ConnectionHealthIndicator';

 const styles: StyleRulesCallback = theme => ({
  title: {
@@ -95,12 +94,11 @@ class TitleBar extends React.Component<Props, {}> {
          <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>
+          <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>
-          <ConnectionHealthIndicator />
        </Toolbar>
      </AppBar>
    )
@@ -8,6 +8,7 @@ import { TopicOrder } from '../../reducers/Settings'
 import { TopicViewModel } from '../../TopicViewModel'
 import { treeActions } from '../../actions'
 import { bindActionCreators } from 'redux'
+const ReactKeyboardEventHandler = require('react-keyboard-event-handler')

 const MovingAverage = require('moving-average')

@@ -22,9 +23,9 @@ interface Props {
  tree?: q.Tree<TopicViewModel>
  filter: string
  host?: string
+
  topicOrder: TopicOrder
  autoExpandLimit: number
-  highlightTopicUpdates: boolean
 }

 interface State {
@@ -86,6 +87,12 @@ class Tree extends React.PureComponent<Props, State> {
    }, Math.max(0, timeUntilNextUpdate))
  }

+  private handleKeyEvent = (key: string, event: any) => {
+    event.stopPropagation()
+    event.preventDefault()
+    this.props.actions.handleKeyEvent(key)
+  }
+
  public render() {
    const { tree, filter } = this.props
    if (!tree) {
@@ -99,6 +106,11 @@ class Tree extends React.PureComponent<Props, State> {

    return (
      <div style={style}>
+        <ReactKeyboardEventHandler
+          isExclusive={true}
+          handleKeys={['space', 'enter', 'delete', 'backspace', 'left', 'up', 'down', 'right']}
+          onKeyEvent={this.handleKeyEvent}
+        />
        <TreeNode
          key={tree.hash()}
          animateChages={true}
@@ -111,7 +123,6 @@ class Tree extends React.PureComponent<Props, State> {
          topicOrder={this.props.topicOrder}
          lastUpdate={tree.lastUpdate}
          didSelectTopic={this.props.actions.selectTopic}
-          highlightTopicUpdates={this.props.highlightTopicUpdates}
        />
      </div>
    )
@@ -129,7 +140,6 @@ const mapStateToProps = (state: AppState) => {
    host: state.connection.host,
    autoExpandLimit: state.settings.autoExpandLimit,
    topicOrder: state.settings.topicOrder,
-    highlightTopicUpdates: state.settings.highlightTopicUpdates,
  }
 }

@@ -30,7 +30,7 @@ const styles = (theme: Theme) => {
      marginTop: '-1px',
    },
    selected: {
-      backgroundColor: 'rgba(170, 170, 170, 0.55)',
+      backgroundColor: 'rgba(200, 200, 200, 0.55)',
    },
    hover: {
      backgroundColor: 'rgba(100, 100, 100, 0.55)',
@@ -51,7 +51,6 @@ interface Props {
  autoExpandLimit: number
  lastUpdate: number
  didSelectTopic: any
-  highlightTopicUpdates: boolean
 }

 interface State {
@@ -65,10 +64,12 @@ class TreeNode extends React.Component<Props, State> {
  private dirtyEdges: boolean = true
  private dirtyMessage: boolean = true
  private animationDirty: boolean = false
+  private lastRenderTime = 0

  private cssAnimationWasSetAt?: number

  private willUpdateTime: number = performance.now()
+  private titleRef?: React.RefObject<HTMLDivElement> = React.createRef<HTMLDivElement>()
  private nodeRef?: React.RefObject<HTMLDivElement> = React.createRef<HTMLDivElement>()

  private subnodesDidchange = () => {
@@ -128,6 +129,7 @@ class TreeNode extends React.Component<Props, State> {
  public componentWillUnmount() {
    const { treeNode } = this.props
    this.removeSubscriber(treeNode)
+    this.titleRef = undefined
    this.nodeRef = undefined
  }

@@ -180,7 +182,7 @@ class TreeNode extends React.Component<Props, State> {
    const isDirty = this.dirtyEdges || this.dirtyMessage || this.dirtySubnodes
    this.dirtyEdges = this.dirtyMessage = this.dirtySubnodes = false

-    const shouldStartAnimation = (isDirty && !this.animationDirty) && !this.props.isRoot && this.props.highlightTopicUpdates
+    const shouldStartAnimation = (isDirty && !this.animationDirty) && !this.props.isRoot
    const animation = shouldStartAnimation ? { willChange: 'auto', translateZ: 0, animation: 'example 0.5s' } : {}
    this.animationDirty = shouldStartAnimation

@@ -233,10 +235,6 @@ class TreeNode extends React.Component<Props, State> {
  }

  private renderNodes() {
-    if (this.collapsed()) {
-      return null
-    }
-
    return (
      <TreeNodeSubnodes
        animateChanges={this.props.animateChages}
@@ -246,7 +244,6 @@ class TreeNode extends React.Component<Props, State> {
        topicOrder={this.props.topicOrder}
        lastUpdate={this.props.treeNode.lastUpdate}
        didSelectTopic={this.props.didSelectTopic}
-        highlightTopicUpdates={this.props.highlightTopicUpdates}
      />
    )
  }
@@ -12,12 +12,13 @@ export interface Props {
  filter?: string
  collapsed?: boolean | undefined
  classes: any
+
  lastUpdate: number
+
  topicOrder: TopicOrder
  selectedTopic?: q.TreeNode<TopicViewModel>
  autoExpandLimit: number
  didSelectTopic: any
-  highlightTopicUpdates: boolean
 }

 interface State {
@@ -82,7 +83,6 @@ class TreeNodeSubnodes extends React.Component<Props, State> {
          autoExpandLimit={this.props.autoExpandLimit}
          lastUpdate={node.lastUpdate}
          didSelectTopic={this.props.didSelectTopic}
-          highlightTopicUpdates={this.props.highlightTopicUpdates}
        />
      )
    })
@@ -4,7 +4,6 @@ import * as q from '../../../backend/src/Model'
 import { MqttOptions } from '../../../backend/src/DataSource'
 import { TopicViewModel } from '../TopicViewModel'

-export type ConnectionHealth = 'offline' | 'online' | 'connecting'
 export interface ConnectionState {
  host?: string
  tree?: q.Tree<TopicViewModel>
@@ -13,7 +12,6 @@ export interface ConnectionState {
  error?: string
  connected: boolean
  connecting: boolean
-  health?: ConnectionHealth
 }

 export type Action = SetConnecting | SetConnected | SetDisconnected | ShowError
@@ -23,7 +21,6 @@ export enum ActionTypes {
  CONNECTION_SET_CONNECTED = 'CONNECTION_SET_CONNECTED',
  CONNECTION_SET_DISCONNECTED = 'CONNECTION_SET_DISCONNECTED',
  CONNECTION_SET_SHOW_ERROR = 'CONNECTION_SET_SHOW_ERROR',
-  CONNECTION_SET_HEALTH = 'CONNECTION_SET_HEALTH',
 }

 export interface SetConnecting {
@@ -41,11 +38,6 @@ export interface SetDisconnected {
  type: ActionTypes.CONNECTION_SET_DISCONNECTED
 }

-export interface SetHealth {
-  health: ConnectionHealth
-  type: ActionTypes.CONNECTION_SET_DISCONNECTED
-}
-
 export interface ShowError {
  type: ActionTypes.CONNECTION_SET_SHOW_ERROR
  error?: Error
@@ -54,7 +46,6 @@ export interface ShowError {
 const initialState: ConnectionState = {
  connected: false,
  connecting: false,
-  health: undefined,
 }

 export const connectionReducer = createReducer(initialState, {
@@ -62,7 +53,6 @@ export const connectionReducer = createReducer(initialState, {
  CONNECTION_SET_CONNECTED: setConnected,
  CONNECTION_SET_DISCONNECTED: setDisconnected,
  CONNECTION_SET_SHOW_ERROR: showError,
-  CONNECTION_SET_HEALTH: setHealth,
 })

 function setConnecting(state: ConnectionState, action: SetConnecting): ConnectionState {
@@ -74,13 +64,6 @@ function setConnecting(state: ConnectionState, action: SetConnecting): Connectio
  }
 }

-function setHealth(state: ConnectionState, action: SetHealth): ConnectionState {
-  return {
-    ...state,
-    health: action.health,
-  }
-}
-
 function setConnected(state: ConnectionState, action: SetConnected): ConnectionState {
  return {
    ...state,
@@ -13,24 +13,20 @@ export interface SettingsState {
  visible: boolean
  topicOrder: TopicOrder
  topicFilter?: string
-  highlightTopicUpdates: boolean
 }
-export type Action = SetAutoExpandLimit | ToggleVisibility | SetTopicOrder | FilterTopics | TogglehighlightTopicUpdates
+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',
-  SETTINGS_TOGGLE_HIGHLIGHT_ACTIVITY = 'SETTINGS_TOGGLE_HIGHLIGHT_ACTIVITY',
-  SETTINGS_DID_LOAD_SETTINGS = 'SETTINGS_DID_LOAD_SETTINGS',
 }

 const initialState: SettingsState = {
  autoExpandLimit: 0,
  topicOrder: TopicOrder.none,
  visible: false,
-  highlightTopicUpdates: true,
 }

 export const settingsReducer = createReducer(initialState, {
@@ -38,27 +34,8 @@ export const settingsReducer = createReducer(initialState, {
  SETTINGS_TOGGLE_VISIBILITY: toggleVisibility,
  SETTINGS_SET_TOPIC_ORDER: setTopicOrder,
  SETTINGS_FILTER_TOPICS: filterTopics,
-  SETTINGS_TOGGLE_HIGHLIGHT_ACTIVITY: togglehighlightTopicUpdates,
-  SETTINGS_DID_LOAD_SETTINGS: didLoadSettings,
 })

-export interface DidLoadSettings {
-  type: ActionTypes.SETTINGS_DID_LOAD_SETTINGS
-  settings: Partial<SettingsState>
-}
-
-function didLoadSettings(state: SettingsState, action: DidLoadSettings) {
-  return {
-    ...state,
-    ...action.settings,
-  }
-}
-
-export interface SetAutoExpandLimit {
-  type: ActionTypes.SETTINGS_SET_AUTO_EXPAND_LIMIT
-  autoExpandLimit: number
-}
-
 function setAutoExpandLimit(state: SettingsState, action: SetAutoExpandLimit) {
  return {
    ...state,
@@ -66,19 +43,9 @@ function setAutoExpandLimit(state: SettingsState, action: SetAutoExpandLimit) {
  }
 }

-export interface TogglehighlightTopicUpdates {
-  type: ActionTypes.SETTINGS_TOGGLE_HIGHLIGHT_ACTIVITY
-}
-
-function togglehighlightTopicUpdates(state: SettingsState, _action: TogglehighlightTopicUpdates) {
-  return {
-    ...state,
-    highlightTopicUpdates: !state.highlightTopicUpdates,
-  }
-}
-
-export interface ToggleVisibility {
-  type: ActionTypes.SETTINGS_TOGGLE_VISIBILITY
+export interface SetAutoExpandLimit {
+  type: ActionTypes.SETTINGS_SET_AUTO_EXPAND_LIMIT
+  autoExpandLimit: number
 }

 function toggleVisibility(state: SettingsState, action: ToggleVisibility) {
@@ -88,6 +55,10 @@ function toggleVisibility(state: SettingsState, action: ToggleVisibility) {
  }
 }

+export interface ToggleVisibility {
+  type: ActionTypes.SETTINGS_TOGGLE_VISIBILITY
+}
+
 function setTopicOrder(state: SettingsState, action: SetTopicOrder) {
  return {
    ...state,
@@ -4520,6 +4520,11 @@ react-json-view@^1.19.1:
    react-lifecycles-compat "^3.0.4"
    react-textarea-autosize "^6.1.0"

+react-keyboard-event-handler@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/react-keyboard-event-handler/-/react-keyboard-event-handler-1.4.1.tgz#3122ab3ceab3df0414a8afb58aa07e93fc34f30e"
+  integrity sha512-F7e/nHXyfY8Szle1lxTf7iJ7Vnnq9xGV5Jcu1nB1+lmLRkLiLFhMk4Kc1iOJWdxuhj9pg5xsB8IuAAVpawkTwg==
+
 react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4:
  version "3.0.4"
  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -33,8 +33,8 @@ export default class ConfigStorage {
        await db.set(event.store, event.data).write()
        backendEvents.emit(ack, undefined)
      } catch (error) {
+        console.error(error)
        backendEvents.emit(ack, { error, transactionId: event.transactionId, store: event.store })
-        throw error
      }
    })

@@ -45,8 +45,8 @@ export default class ConfigStorage {
        const data = await db.get(event.store).value()
        backendEvents.emit(responseEvent, { data, transactionId: event.transactionId, store: event.store })
      } catch (error) {
+        console.error(error)
        backendEvents.emit(responseEvent, { error, transactionId: event.transactionId, store: event.store })
-        throw error
      }
    })

@@ -60,8 +60,8 @@ export default class ConfigStorage {
        backendEvents.emit(makeStorageAcknoledgementEvent(event.transactionId), undefined)
      } catch (error) {
        backendEvents.emit(makeStorageAcknoledgementEvent(event.transactionId), { error, transactionId: event.transactionId })
-        throw error
      }
+
    })
  }
 }
@@ -25,17 +25,16 @@ export class DataSourceStateMachine {

  public setError(error: Error) {
    this.state = {
-      ...this.state,
      error: error.message,
-      // connected: false,
-      // connecting: false,
+      connected: false,
+      connecting: false,
    }
    this.onUpdate.dispatch(this.state)
  }

  public setConnecting() {
    this.state = {
-      ...this.state,
+      error: undefined,
      connected: false,
      connecting: true,
    }
@@ -55,10 +55,6 @@ export class MqttSource implements DataSource<MqttOptions> {
      this.stateMachine.setConnected(false)
    })

-    client.on('end', () => {
-      this.stateMachine.setConnected(false)
-    })
-
    client.on('reconnect', () => {
      this.stateMachine.setConnecting()
    })
@@ -47,9 +47,6 @@ export class TreeNode<ViewModel> {
      this.lastUpdate = Date.now()
    })
    this.onEdgesChange.subscribe(() => {
-      this.cachedChildTopics = undefined
-      this.cachedChildTopicCount = undefined
-      this.cachedLeafMessageCount = undefined
      this.lastUpdate = Date.now()
    })
    this.onMessage.subscribe(() => {
@@ -105,34 +102,6 @@ export class TreeNode<ViewModel> {
    return previous.branch().concat([this])
  }

-  private isTopicEmptyLeaf() {
-    const hasNoMessage = (!this.message || !this.message.value)
-    return hasNoMessage && this.isLeaf()
-  }
-
-  private isLeaf() {
-    return this.edgeArray.length === 0
-  }
-
-  private removeFromParent() {
-    const previous = this.previous()
-    if (!previous || !this.sourceEdge) {
-      return
-    }
-    previous.removeEdge(this.sourceEdge)
-  }
-
-  public removeEdge(edge: Edge<any>) {
-    delete this.edges[edge.name]
-    this.edgeArray = Object.values(this.edges)
-    this.onMerge.dispatch()
-
-    if (this.isTopicEmptyLeaf()) {
-      debugger
-      this.removeFromParent()
-    }
-  }
-
  public updateWithNode(node: TreeNode<ViewModel>) {
    if (node.message) {
      this.setMessage(node.message)
@@ -140,10 +109,6 @@ export class TreeNode<ViewModel> {
      this.mqttMessage = node.mqttMessage
    }

-    if (this.isTopicEmptyLeaf()) {
-      this.removeFromParent()
-    }
-
    this.mergeEdges(node)
    this.onMerge.dispatch()
  }
@@ -43,10 +43,10 @@ describe('TreeNode', () => {

  it('updateWithNode should add nodes to the tree', () => {
    const topics1 = 'foo/bar'.split('/')
-    const leaf1 = TreeNodeFactory.fromEdgesAndValue(topics1, 'foo')
+    const leaf1 = TreeNodeFactory.fromEdgesAndValue(topics1, undefined)

    const topics2 = 'foo/bar/baz'.split('/')
-    const leaf2 = TreeNodeFactory.fromEdgesAndValue(topics2, 'bar')
+    const leaf2 = TreeNodeFactory.fromEdgesAndValue(topics2, undefined)

    leaf1.firstNode().updateWithNode(leaf2.firstNode())

@@ -20,10 +20,7 @@ export class ConnectionManager {

  public manageConnections() {
    backendEvents.subscribe(addMqttConnectionEvent, this.handleConnectionRequest)
-    backendEvents.subscribe(removeConnection, (connectionId: string) => {
-      backendEvents.unsubscribeAll(makePublishEvent(connectionId))
-      this.removeConnection(connectionId)
-    })
+    backendEvents.subscribe(removeConnection, (connectionId: string) => this.removeConnection(connectionId))
  }

  private handleConnectionRequest = (event: AddMqttConnection) => {
@@ -61,7 +58,6 @@ export class ConnectionManager {
    if (connection) {
      connection.disconnect()
      delete this.connections[hash]
-      connection.stateMachine.onUpdate.removeAllListeners()
    }
  }

@@ -30,7 +30,6 @@ class IpcMainEventBus implements EventBusInterface {
  }

  public unsubscribeAll<MessageType>(event: Event<MessageType>) {
-    console.log('unsubscribeAll', event.topic)
    this.ipc.removeAllListeners(event.topic)
  }

@@ -1,6 +1,6 @@
 {
  "name": "MQTT-Explorer",
-  "version": "0.2.0",
+  "version": "0.1.3",
  "description": "Explore your message queues",
  "main": "dist/src/electron.js",
  "scripts": {
@@ -71,7 +71,6 @@
    "webdriverio": "5.4"
  },
  "dependencies": {
-    "about-window": "^1.12.1",
    "electron-debug": "^2.0.0",
    "electron-is-dev": "^1.0.1",
    "electron-log": "^2.2.17",
@@ -1,24 +1,21 @@
 #!/bin/bash
-ffmpeg -s:v 1024x700 -r 20 -f rawvideo -pix_fmt yuv420p -i qrawvideorgb24.yuv app2.mp4
-
+cp app.mp4 original.mp4
 # The video starts with a few blank frames, we want to know when the stop
-ffprobe -f lavfi -i "movie=app2.mp4,blackdetect[out0]" -show_entries tags=lavfi.black_start,lavfi.black_end -of default=nw=1 -v quiet > ffmpeg_info
+ffprobe -f lavfi -i "movie=app.mp4,blackdetect[out0]" -show_entries tags=lavfi.black_start,lavfi.black_end -of default=nw=1 -v quiet > ffmpeg_info
 END_OF_BLACK=`cat ffmpeg_info | grep end | head -n1 | cut -d'=' -f2`

-# Remove grey frames at the beginning (app start and splash screen)
-END_OF_BLACK=`awk "BEGIN {print $END_OF_BLACK+0.8; exit}"`
-
 # Trim black frames at start
-ffmpeg -s:v 1024x700 -r 20 -f rawvideo -pix_fmt yuv420p -i qrawvideorgb24.yuv -ss $END_OF_BLACK  app.mp4
+ffmpeg -ss $END_OF_BLACK -i app.mp4 app2.mp4
+mv app2.mp4 app.mp4

 # Generate gif palette
-ffmpeg -y -s:v 1024x700 -r 20 -f rawvideo -pix_fmt yuv420p -i qrawvideorgb24.yuv -vf fps=10,scale=1024:-1:flags=lanczos,palettegen palette1024.png
+ffmpeg -y -i app.mp4 -vf fps=10,scale=720:-1:flags=lanczos,palettegen palette.png

 # Create gif
-ffmpeg -s:v 1024x700 -r 20 -f rawvideo -pix_fmt yuv420p -i qrawvideorgb24.yuv -i palette1024.png -ss $END_OF_BLACK -filter_complex "fps=10,scale=1024:-1:flags=lanczos[x];[x][1:v]paletteuse" app1024.gif
+ffmpeg -i app.mp4 -i palette.png -filter_complex "fps=10,scale=720:-1:flags=lanczos[x];[x][1:v]paletteuse" app.gif

 # Clean up
-rm ffmpeg_info palette*.png qrawvideorgb24.yuv
+rm ffmpeg_info palette.png

 mv app.mp4 ui-test.mp4
-mv app1024.gif ui-test.gif
+mv app.gif ui-test.gif
@@ -17,7 +17,7 @@ export PID_XVFB=$!
 sleep 2

 # Debug with VNC
-while [ "$TEST_EXIT_CODE" = "" ]; do x11vnc -localhost -passwd "bierbier" -display :$SCR; done &
+while [ "$TEST_EXIT_CODE" = "" ]; do x11vnc -passwd "bierbier" -display :$SCR; done &
 export PID_VNC=$!

 # Start mqtt broker
@@ -32,8 +32,7 @@ sleep 2
 rm ./app.mp4 || echo no need to delete ./app.mp4

 # Start recoring in tmux
-#tmux new-session -d -s record ffmpeg -f x11grab -draw_mouse 0 -video_size $DIMENSIONS -i :$SCR -codec:v libx264 -r 20 ./app.mp4
-tmux new-session -d -s record ffmpeg -f x11grab -draw_mouse 0 -video_size $DIMENSIONS -i :$SCR -r 20 -vcodec rawvideo -pix_fmt yuv420p qrawvideorgb24.yuv
+tmux new-session -d -s record ffmpeg -f x11grab -draw_mouse 0 -video_size $DIMENSIONS -i :$SCR -codec:v libx264 -r 20 ./app.mp4

 # Start tests
 node dist/src/spec/webdriverio.js
@@ -1,22 +1,11 @@
 import { Menu, app, BrowserWindow, webContents } from 'electron'
-import openAboutWindow from 'about-window'
-import * as path from 'path'

 const applicationMenu = {
  label: 'Application',
  submenu: [
    {
      label: 'About Application',
-      click: () => {
-        console.log(path.join(__dirname, 'icon.png'))
-        openAboutWindow({
-          icon_path: path.join(__dirname, '..', '..', 'icon.png'),
-          license: 'AGPL-3.0',
-          homepage: 'https://thomasnordquist.github.io/MQTT-Explorer/',
-          bug_report_url: 'https://github.com/thomasnordquist/MQTT-Explorer/issues',
-          description: 'Author: Thomas Nordquist',
-        })
-      },
+      selector: 'orderFrontStandardAboutPanel:',
    },
    {
      type: 'separator' as 'separator',
@@ -24,6 +24,6 @@ async function topicMatches(topics: string[], browser: Browser<void>) {
 }

 function topicSelector(topics: string[]) {
-  const suffix = topics.map(topic => `*[contains(text(), "${topic}")]`).join('/../..//')
+  const suffix = topics.map(topic => `*[contains(text(), "${topic}")]`).join('/../../..//')
  return `//${suffix}`
 }
@@ -189,11 +189,6 @@
  dependencies:
    "@wdio/config" "^5.4.6"

-about-window@^1.12.1:
-  version "1.12.1"
-  resolved "https://registry.yarnpkg.com/about-window/-/about-window-1.12.1.tgz#b81c10f6de58d38bce2aa5f31f61a82e6c3d6c2b"
-  integrity sha512-P/fJACq7RBFpv5Ql0kIqpOYgFqQ8WdoZoB7wrKmDvwTSKVOMbUZMYnQYtnOW6dHmMCYuNrmQFf+MxvuhE+KrzQ==
-
 ajv-keywords@^3.2.0:
  version "3.2.0"
  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.2.0.tgz#e86b819c602cf8821ad637413698f1dec021847a"