Clean up

app/src/App.tsx

@@ -1,17 +1,14 @@
 import * as React from 'react'
 import { connect } from 'react-redux'
-import { AppState } from './reducers'
-
-import { withStyles, Theme } from '@material-ui/core/styles'
-import CssBaseline from '@material-ui/core/CssBaseline'
-
 import * as q from '../../backend/src/Model'
-
+import CssBaseline from '@material-ui/core/CssBaseline'
+import { withStyles, Theme } from '@material-ui/core/styles'
 import Tree from './components/Tree/Tree'
 import TitleBar from './components/TitleBar'
 import Sidebar from './components/Sidebar/Sidebar'
 import Connection from './components/ConnectionSetup/Connection'
 import Settings from './components/Settings'
+import { AppState } from './reducers'
 
 interface State {
   selectedNode?: q.TreeNode,
@@ -81,7 +78,7 @@ class App extends React.Component<Props, State> {
 
   public render() {
     const { settingsVisible } = this.props
-    const { content, contentShift, settings, centerContent } = this.getStyles()
+    const { content, contentShift, centerContent } = this.getStyles()
     return <div style={centerContent}>
       <CssBaseline />
       <Settings />

app/src/actions/Settings.ts

@@ -1,4 +1,3 @@
-import { Action } from 'redux'
 import { ActionTypes } from '../reducers'
 
 export const setAutoExpandLimit = (autoExpandLimit: number = 0) => {

app/src/components/ConnectionSetup/Connection.tsx

@@ -121,7 +121,7 @@ class Connection extends React.Component<Props, State> {
         minWidth: 550,
         maxWidth: 650,
         backgroundColor: theme.palette.background.default,
-        margin: '20vh auto auto auto',
+        margin: '14vh auto auto auto',
         padding: `${2 * theme.spacing.unit}px`,
         outline: 'none',
       },

app/src/components/Copy.tsx

@@ -4,6 +4,7 @@ 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 {
@@ -16,19 +17,19 @@ interface State {
   snackBarOpen: boolean
 }
 
-class Copy extends React.Component<Props, State> {
+const styles = (theme: Theme) => ({
-  constructor(props: Props) {
-    super(props)
-    this.state = { didCopy: false, snackBarOpen: false }
-  }
-
-  public static 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} />
@@ -66,4 +67,4 @@ class Copy extends React.Component<Props, State> {
   }
 }
 
-export default withStyles(Copy.styles)(Copy)
+export default withStyles(styles)(Copy)

app/src/components/Settings.tsx

@@ -33,7 +33,8 @@ const styles: StyleRulesCallback = theme => ({
     ...theme.mixins.toolbar,
   },
   input: {
-    margin: `auto ${theme.spacing.unit}px auto ${theme.spacing.unit}px`,
+    minWidth: '150px',
+    margin: `auto ${theme.spacing.unit}px auto ${2 * theme.spacing.unit}px`,
   },
 })
 
@@ -86,7 +87,7 @@ class Settings extends React.Component<Props, State> {
   private renderAutoExpand() {
     const { classes, actions, autoExpandLimit } = this.props
 
-    return <span>
+    return <div style={{ padding: '8px' }}>
       <InputLabel htmlFor="auto-expand">Auto Expand</InputLabel>
       <Select
           value = { autoExpandLimit }
@@ -97,11 +98,12 @@ class Settings extends React.Component<Props, State> {
           className = {classes.input}
       >
         <MenuItem value = {0}><em>Disabled</em></MenuItem>
+        <MenuItem value = {2}>Few</MenuItem>
         <MenuItem value = {3}>Some</MenuItem>
         <MenuItem value = {10}>Most</MenuItem>
         <MenuItem value = {1E6}>All</MenuItem>
       </Select>
-    </span>
+    </div>
   }
 }
 

app/src/components/Sidebar/NodeStats.tsx

@@ -2,28 +2,16 @@ import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
 // import Drawer from '@material-ui/core/Drawer'
 import { Typography } from '@material-ui/core'
-import { withStyles, Theme, StyleRulesCallback } from '@material-ui/core/styles'
 
 interface Props {
-  node: q.TreeNode,
+  node: q.TreeNode
-  classes: any,
-  theme: Theme
 }
 
-interface State {
+class NodeStats extends React.Component<Props, {}> {
-  node?: q.TreeNode | undefined
-}
-
-class NodeStats extends React.Component<Props, State> {
   constructor(props: any) {
     super(props)
   }
 
-  public static styles: StyleRulesCallback<string> = (theme: Theme) => {
-    return {
-    }
-  }
-
   public render() {
     const { node } = this.props
 
@@ -35,4 +23,4 @@ class NodeStats extends React.Component<Props, State> {
   }
 }
 
-export default withStyles(NodeStats.styles, { withTheme: true })(NodeStats)
+export default NodeStats

app/src/components/Sidebar/Sidebar.tsx

@@ -1,16 +1,13 @@
 import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
-// import Drawer from '@material-ui/core/Drawer'
+import { ExpansionPanel, ExpansionPanelDetails, ExpansionPanelSummary, Typography } from '@material-ui/core'
-import ExpansionPanel from '@material-ui/core/ExpansionPanel'
+import { withStyles, Theme, StyleRulesCallback } from '@material-ui/core/styles'
-import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'
-import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'
 import ExpandMore from '@material-ui/icons/ExpandMore'
+
+import Copy from '../Copy'
 import ValueRenderer from './ValueRenderer'
 import NodeStats from './NodeStats'
 import Topic from './Topic'
-import { Typography } from '@material-ui/core'
-import { withStyles, Theme, StyleRulesCallback } from '@material-ui/core/styles'
-import Copy from '../Copy'
 
 interface Props {
   node?: q.TreeNode,
@@ -19,7 +16,7 @@ interface Props {
 }
 
 interface State {
-  node?: q.TreeNode
+  node: q.TreeNode
 }
 
 class Sidebar extends React.Component<Props, State> {
@@ -29,6 +26,7 @@ class Sidebar extends React.Component<Props, State> {
 
   constructor(props: any) {
     super(props)
+    console.warn('Find and fix me #state')
     this.state = { node: new q.Tree() }
   }
 

app/src/components/Sidebar/Topic.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
-import { withStyles, Theme, StyleRulesCallback } from '@material-ui/core/styles'
 import Button from '@material-ui/core/Button'
+import { withStyles, Theme, StyleRulesCallback } from '@material-ui/core/styles'
 
 interface Props {
   classes: any
@@ -11,8 +11,7 @@ interface Props {
   didSelectNode: (node: q.TreeNode) => void
 }
 
-class Topic extends React.Component<Props, {}> {
+const styles: StyleRulesCallback<string> = (theme: Theme) => ({
-  public static styles: StyleRulesCallback<string> = (theme: Theme) => ({
   button: {
     textTransform: 'none',
     padding: '3px 5px 3px 5px',
@@ -20,6 +19,7 @@ class Topic extends React.Component<Props, {}> {
   },
 })
 
+class Topic extends React.Component<Props, {}> {
   public render() {
     const { node } = this.props
     if (!node) {
@@ -54,4 +54,4 @@ class Topic extends React.Component<Props, {}> {
   }
 }
 
-export default withStyles(Topic.styles, { withTheme: true })(Topic)
+export default withStyles(styles, { withTheme: true })(Topic)

app/src/components/Sidebar/ValueRenderer.tsx

@@ -27,10 +27,6 @@ class ValueRenderer extends React.Component<Props, State> {
     nextProps.node && nextProps.node.onMessage.subscribe(this.updateNode)
   }
 
-  private style = (theme: Theme) => {
-
-  }
-
   public render() {
     const node = this.props.node
     if (!node || !node.message) {

app/src/components/TitleBar.tsx

@@ -1,28 +1,16 @@
 import * as React from 'react'
-import * as q from '../../../backend/src/Model'
-
-import Search from '@material-ui/icons/Search'
-import Drawer from '@material-ui/core/Drawer'
-import IconButton from '@material-ui/core/IconButton'
-import Menu from '@material-ui/icons/Menu'
-
-import List from '@material-ui/core/List'
-import Divider from '@material-ui/core/Divider'
-import ListItem from '@material-ui/core/ListItem'
-import ListItemIcon from '@material-ui/core/ListItemIcon'
-import ListItemText from '@material-ui/core/ListItemText'
-import Slider from '@material-ui/lab/Slider'
-
-import { settingsActions } from '../actions'
-import { AppState, SettingsModel } from '../reducers'
-
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
+import * as q from '../../../backend/src/Model'
 
-import { AppBar, Toolbar, Typography, InputBase } from '@material-ui/core'
+import { AppBar, IconButton, InputBase, Toolbar, Typography } from '@material-ui/core'
+import Search from '@material-ui/icons/Search'
+import Menu from '@material-ui/icons/Menu'
 import { withStyles, StyleRulesCallback } from '@material-ui/core/styles'
 import { fade } from '@material-ui/core/styles/colorManipulator'
 
+import { settingsActions } from '../actions'
+
 const styles: StyleRulesCallback = theme => ({
   title: {
     display: 'none',
@@ -105,7 +93,14 @@ class TitleBar extends React.Component<Props, State> {
             <Menu />
           </IconButton>
           <Typography className={classes.title} variant="h6" color="inherit">MQTT-Xplorer</Typography>
-          <div className={classes.search}>
+        </Toolbar>
+      </AppBar>
+  }
+
+  private renderSearch() {
+    const { classes } = this.props
+
+    return <div className={classes.search}>
       <div className={classes.searchIcon}>
         <Search />
       </div>
@@ -117,8 +112,6 @@ class TitleBar extends React.Component<Props, State> {
         }}
       />
     </div>
-        </Toolbar>
-      </AppBar>
   }
 }
 

app/src/components/Tree/Tree.tsx

@@ -1,17 +1,17 @@
 import * as React from 'react'
-import * as q from '../../../../backend/src/Model'
-import TreeNode from './TreeNode'
-import { Typography } from '@material-ui/core'
-import { makeConnectionMessageEvent, rendererEvents } from '../../../../events'
-import {  } from '../../../../events/Events'
-const MovingAvaerage = require('moving-average')
 import { connect } from 'react-redux'
+import * as q from '../../../../backend/src/Model'
+import { Typography } from '@material-ui/core'
+import TreeNode from './TreeNode'
+import { makeConnectionMessageEvent, rendererEvents } from '../../../../events'
 import { AppState } from '../../reducers'
 
+const MovingAverage = require('moving-average')
+
 declare const performance: any
 
 const timeInterval = 10 * 1000
-const average = MovingAvaerage(timeInterval)
+const average = MovingAverage(timeInterval)
 
 interface Props {
   autoExpandLimit: number
@@ -25,7 +25,6 @@ interface TreeState {
 }
 
 class Tree extends React.Component<Props, TreeState> {
-  private renderDuration: number = 300
   private updateTimer?: any
   private lastUpdate: number = 0
   private perf: number = 0
@@ -111,7 +110,6 @@ class Tree extends React.Component<Props, TreeState> {
           key="rootNode"
           performanceCallback={(ms: number) => {
             average.push(Date.now(), ms)
-            this.renderDuration = ms
           }}
         />
     </Typography>

app/src/components/Tree/TreeNode.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
 import { withStyles, Theme } from '@material-ui/core/styles'
+
 import { isElementInViewport } from '../helper/isElementInViewport'
 import TreeNodeTitle from './TreeNodeTitle'
 import TreeNodeSubnodes from './TreeNodeSubnodes'

app/src/components/Tree/TreeNodeSubnodes.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
 import { withTheme, Theme } from '@material-ui/core/styles'
-import { List, ListItem, Collapse } from '@material-ui/core'
+
 import TreeNode from './TreeNode'
 
 export interface Props {
@@ -21,10 +21,6 @@ class TreeNodeSubnodes extends React.Component<Props, {}> {
       padding: '3px 8px 0px 8px',
     }
 
-    const listStyle = {
-      padding: '3px 8px 0px 8px',
-    }
-
     if (edges.length > 0 && !this.props.collapsed) {
       const listItems = edges
         .map(edge => edge.target)

app/src/index.tsx

@@ -1,21 +1,13 @@
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
-
 import { Provider } from 'react-redux'
 import { createStore } from 'redux'
-import reducers, { AppState } from './reducers'
-import App from './App'
 import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'
 
-const theme = createMuiTheme({
+import reducers from './reducers'
-  palette: {
+import App from './App'
-    type: 'dark', // Switching the dark mode on is a single property value change.
-  },
-  typography: { useNextVariants: true },
-})
 
 declare var document: any
-declare var window: any
 
 const initialAppState = {
   settings: {
@@ -23,9 +15,14 @@ const initialAppState = {
     visible: false,
   },
 }
-
 const store = createStore(reducers, initialAppState)
-window.reduxStore = store
+
+const theme = createMuiTheme({
+  palette: {
+    type: 'dark',
+  },
+  typography: { useNextVariants: true },
+})
 
 ReactDOM.render(
     <MuiThemeProvider theme={theme}>

backend/src/index.ts

@@ -1,7 +1,7 @@
 import {
   addMqttConnectionEvent, backendEvents,
   makeConnectionStateEvent, removeConnection,
-  makeConnectionMessageEvent, AddMqttConnection
+  makeConnectionMessageEvent, AddMqttConnection,
 } from '../../events'
 import { MqttSource, DataSource } from './DataSource'
 
@@ -10,7 +10,7 @@ class ConnectionManager {
 
   public manageConnections() {
     backendEvents.subscribe(addMqttConnectionEvent, this.handleConnectionRequest)
-    backendEvents.subscribe(removeConnection, (connectionId) => this.removeConnection(connectionId))
+    backendEvents.subscribe(removeConnection, (connectionId: string) => this.removeConnection(connectionId))
   }
 
   private handleConnectionRequest = (event: AddMqttConnection) => {

electron.js

@@ -1,6 +1,10 @@
 // Modules to control application life and create native browser window
 const {app, BrowserWindow} = require('electron')
+try {
   require('./backend/build/backend/src/index.js')
+} catch (err) {
+  console.error(err)
+}
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let mainWindow

events/Events.ts

@@ -13,10 +13,6 @@ export const addMqttConnectionEvent: Event<AddMqttConnection> = {
   topic: 'connection/add/mqtt',
 }
 
-interface RemoveConnection {
-  connectionId: string,
-}
-
 export const removeConnection: Event<string> = {
   topic: 'connection/remove',
 }