Fix animations update dependencies

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={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}
@@ -59,7 +61,7 @@ class App extends React.PureComponent<Props, {}> {
                   <Sidebar connectionId={this.props.connectionId} />
                 </div>
               </SplitPane>
-              </div>
+            </div>
           </div>
           <UpdateNotifier />
           <Connection />
@@ -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/bugtracking.ts

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

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) => {
-  return {
-    actions: bindActionCreators(treeActions, dispatch),
-  }
-}
-
-export default withStyles(styles)(connect(null, mapDispatchToProps)(TreeNode))
+export default withStyles(styles)(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