Fix animations update dependencies

app/package-lock.json

@@ -2224,9 +2224,9 @@
       "dev": true
     },
     "electron": {
-      "version": "4.0.1",
+      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-4.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-4.0.2.tgz",
-      "integrity": "sha512-kBWDLn1Vq8Tm6+/HpQc8gkjX7wJyQI8v/lf2kAirfi0Q4cXh6vBjozFvV1U/9gGCbyKnIDM+m8/wpyJIjg4w7g==",
+      "integrity": "sha512-H0pmSvOVuC+Mq/+cYNXbCDBmqq5d1xYUVdBOjqGJuwuwJeP7qDHF35JA3cq+ARzq/CbwlXq98zdW6i6+x3U24g==",
       "dev": true,
       "requires": {
         "@types/node": "^10.12.18",
@@ -2301,7 +2301,7 @@
       }
     },
     "electron-telemetry": {
-      "version": "git+https://github.com/thomasnordquist/electron-telemetry.git#cafe92ff8197589bc5c2f9cfdef00a1195204ba3",
+      "version": "git+https://github.com/thomasnordquist/electron-telemetry.git#d5610659860aa248998226e1498920932eb570ed",
       "from": "git+https://github.com/thomasnordquist/electron-telemetry.git",
       "dev": true,
       "requires": {
@@ -6516,9 +6516,9 @@
       "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
     },
     "resolve": {
-      "version": "1.9.0",
+      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.9.0.tgz",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.10.0.tgz",
-      "integrity": "sha512-TZNye00tI67lwYvzxCxHGjwTNlUV70io54/Ed4j6PscB8xVfuBJpRenI/o6dVk0cY0PYTY27AgCoGGxRnYuItQ==",
+      "integrity": "sha512-3sUr9aq5OfSg2S9pNtPA9hL1FVEAjvfOC4leW0SNf/mpnaakz2a9femSd6LqAww2RaFctwyf1lCqnTHuF1rxDg==",
       "dev": true,
       "requires": {
         "path-parse": "^1.0.6"

app/src/App.tsx

@@ -39,13 +39,15 @@ class App extends React.PureComponent<Props, {}> {
           <React.Suspense fallback={<div>Loading...</div>}>
             <Settings />
           </React.Suspense>
-          <div className={`${settingsVisible ? contentShift : content} ${heightProperty}`}>
-              <TitleBar />
           <div className={centerContent}>
+            <div className={`${settingsVisible ? contentShift : content}`}>
+                <TitleBar />
+            </div>
+            <div>
               <SplitPane
                 step={48}
                 primary="second"
-                className={heightProperty}
+                className={`${settingsVisible ? contentShift : content} ${heightProperty}`}
                 split="vertical"
                 minSize={250}
                 defaultSize={500}
@@ -95,21 +97,25 @@ const styles = (theme: Theme) => {
       overflow: 'hidden' as 'hidden',
     },
     content: {
+      width: '100vw',
+      overflowX: 'hidden',
       backgroundColor: theme.palette.background.default,
-      transition: theme.transitions.create('margin', {
+      transition: theme.transitions.create('transform', {
         easing: theme.transitions.easing.sharp,
         duration: theme.transitions.duration.leavingScreen,
       }),
-      marginLeft: 0,
+      transform: 'translateX(0px)',
     },
     contentShift: {
+      overflowX: 'hidden',
+      width: '100vw',
       padding: 0,
       backgroundColor: theme.palette.background.default,
-      transition: theme.transitions.create('margin', {
+      transition: theme.transitions.create('transform', {
         easing: theme.transitions.easing.easeOut,
         duration: theme.transitions.duration.enteringScreen,
       }),
-      marginLeft: drawerWidth,
+      transform: `translateX(${drawerWidth}px)`,
     },
   }
 }

app/src/components/Sidebar/Sidebar.tsx

@@ -163,7 +163,7 @@ class Sidebar extends React.Component<Props, State> {
           color="secondary"
           variant="contained"
           mini={true}
-          style={{ marginTop: '-2px', padding: '0px 4px', minHeight: '24px' }}
+          style={{ marginTop: '-3px', padding: '0px 4px', minHeight: '24px' }}
           onClick={this.props.actions.clearRetainedTopic}
         >
           retained <Clear style={{ fontSize: '16px', marginLeft: '2px' }} />

app/src/components/Tree/Tree.tsx

@@ -6,6 +6,8 @@ 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')
 
@@ -15,6 +17,7 @@ const average = MovingAverage(averagingTimeInterval)
 declare var window: any
 
 interface Props {
+  actions: typeof treeActions
   connectionId?: string
   tree?: q.Tree<TopicViewModel>
   filter: string
@@ -107,6 +110,7 @@ class Tree extends React.PureComponent<Props, State> {
           autoExpandLimit={this.props.autoExpandLimit}
           topicOrder={this.props.topicOrder}
           lastUpdate={tree.lastUpdate}
+          didSelectTopic={this.props.actions.selectTopic}
         />
       </div>
     )
@@ -127,4 +131,10 @@ const mapStateToProps = (state: AppState) => {
   }
 }
 
-export default connect(mapStateToProps)(Tree)
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: bindActionCreators(treeActions, dispatch),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Tree)

app/src/components/Tree/TreeNode.tsx

@@ -5,11 +5,6 @@ import { Theme, withStyles } from '@material-ui/core/styles'
 
 import TreeNodeSubnodes from './TreeNodeSubnodes'
 import TreeNodeTitle from './TreeNodeTitle'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-import { isElementInViewport } from '../helper/isElementInViewport'
-import { treeActions } from '../../actions'
-import { AppState } from '../../reducers'
 import { TopicOrder } from '../../reducers/Settings'
 import { TopicViewModel } from '../../TopicViewModel'
 const debounce = require('lodash.debounce')
@@ -44,7 +39,6 @@ const styles = (theme: Theme) => {
 }
 
 interface Props {
-  actions: typeof treeActions
   animateChages: boolean
   isRoot?: boolean
   treeNode: q.TreeNode<TopicViewModel>
@@ -56,6 +50,7 @@ interface Props {
   topicOrder: TopicOrder
   autoExpandLimit: number
   lastUpdate: number
+  didSelectTopic: any
 }
 
 interface State {
@@ -215,7 +210,7 @@ class TreeNode extends React.Component<Props, State> {
   }
 
   private didSelectTopic = () => {
-    this.props.actions.selectTopic(this.props.treeNode)
+    this.props.didSelectTopic(this.props.treeNode)
   }
 
   private mouseOver = (event: React.MouseEvent) => {
@@ -232,15 +227,10 @@ class TreeNode extends React.Component<Props, State> {
     this.setState({ mouseOver: hover })
   }, 5)
 
-  private didSelectNode = (event: React.MouseEvent) => {
-    event.stopPropagation()
-    this.didSelectTopic()
-  }
-
   private didClickNode = (event: React.MouseEvent) => {
     event.stopPropagation()
     this.toggle()
-    this.props.actions.selectTopic(this.props.treeNode)
+    this.didSelectTopic()
   }
 
   private renderNodes() {
@@ -252,15 +242,10 @@ class TreeNode extends React.Component<Props, State> {
         autoExpandLimit={this.props.autoExpandLimit}
         topicOrder={this.props.topicOrder}
         lastUpdate={this.props.treeNode.lastUpdate}
+        didSelectTopic={this.props.didSelectTopic}
       />
     )
   }
 }
 
-const mapDispatchToProps = (dispatch: any) => {
+export default withStyles(styles)(TreeNode)
-  return {
-    actions: bindActionCreators(treeActions, dispatch),
-  }
-}
-
-export default withStyles(styles)(connect(null, mapDispatchToProps)(TreeNode))

app/src/components/Tree/TreeNodeSubnodes.tsx

@@ -21,6 +21,7 @@ export interface Props {
   topicOrder: TopicOrder
   selectedTopic?: q.TreeNode<TopicViewModel>
   autoExpandLimit: number
+  didSelectTopic: any
 }
 
 interface State {
@@ -85,6 +86,7 @@ class TreeNodeSubnodes extends React.Component<Props, State> {
           topicOrder={this.props.topicOrder}
           autoExpandLimit={this.props.autoExpandLimit}
           lastUpdate={node.lastUpdate}
+          didSelectTopic={this.props.didSelectTopic}
         />
       )
     })

app/src/tracking.ts

@@ -7,6 +7,15 @@ if (!userId) {
   window.localStorage.setItem('userId', userId)
 }
 
+setInterval(() => {
+  try {
+    electronRendererTelementry.trackCustomEvent({ name: 'heapStatistics', payload: process.getHeapStatistics() })
+    electronRendererTelementry.trackCustomEvent({ name: 'cpuUsage', payload: process.getCPUUsage() })
+  } catch (error) {
+    console.error(error)
+  }
+}, 30 * 1000)
+
 export function trackEvent(name: string) {
   if (name.match(/^@@redux/)) {
     return

package.json

@@ -65,9 +65,9 @@
     "typescript": "^3.2.2"
   },
   "dependencies": {
-    "electron-telemetry": "git+https://github.com/thomasnordquist/electron-telemetry.git",
     "electron-debug": "^2.0.0",
     "electron-log": "^2.2.17",
+    "electron-telemetry": "git+https://github.com/thomasnordquist/electron-telemetry.git",
     "electron-updater": "^4.0.6",
     "mqtt": "^2.18.8",
     "sha1": "^1.1.1"