Update travis ubuntu dist

Fixes #229

.cspell.json

@@ -1,6 +1,7 @@
 {
   "language": "en",
   "words": [
+    "goog",
     "thomasnordquist",
     "nowrap",
     "subheader",

.github/FUNDING.yml

@@ -0,0 +1,5 @@
+# These are supported funding model platforms
+
+patreon: thomasnordquist
+custom: https://paypal.me/ThomasNordquist
+

.gitignore

@@ -7,3 +7,5 @@ build
 test.dot
 test.png
 .awcache
+.scannerwork
+screen*.png

.travis.yml

@@ -17,7 +17,9 @@ os:
   - linux
   - osx
 
-dist: xenial
+osx_image: xcode10.2
+
+dist: bionic
 
 services:
   - docker
@@ -35,4 +37,4 @@ script:
   - 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 CSC_LINK="" yarn run package -- win; fi
+  - if [[ "$TRAVIS_OS_NAME" == "osx" ]] && [[ "$TRAVIS_TAG" != "" ]]; then unset CSC_LINK; yarn run package -- win; fi

Readme.md

@@ -20,6 +20,7 @@ Pull-Requests and error reports are welcome.
 ## Run from sources
 
 ```bash
+npm install -g yarn
 yarn
 yarn build
 yarn start
@@ -29,6 +30,7 @@ yarn start
 
 Launch Application
 ```bash
+npm install -g yarn
 yarn
 yarn dev
 ```

app/index.html

@@ -22,10 +22,10 @@
           background-color: none;
         }
         25% {
-          background-color: #4f5781;
+          background-color: #595585;
         }
         50% {
-          background-color: #4f5781;
+          background-color: #595585;
         }
         100% {
           background-color: none;
@@ -39,11 +39,9 @@
         }
         25% {
           background-color: #c0c8c0;
-          color: #000;
         }
         50% {
           background-color: #c0c8c0;
-          color: #000;
         }
         100% {
           background-color: none;

app/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "build": "yarn rebuild && webpack --mode production",
     "dev": "node_modules/.bin/webpack-dev-server --mode development --progress",
-    "rebuild": "cd node_modules/heapdump && node-gyp rebuild --target=5.0.4 --arch=x64 --dist-url=https://atom.io/download/electron || echo Could not build heapdump; cd -"
+    "rebuild": "cd node_modules/heapdump && node-gyp rebuild --target=7.1.1 --arch=x64 --dist-url=https://atom.io/download/electron || echo Could not build heapdump; cd -"
   },
   "author": "",
   "license": "CC-BY-ND-4.0",
@@ -15,19 +15,20 @@
     "@material-ui/icons": "^4",
     "@material-ui/lab": "^4.0.0-alpha",
     "@material-ui/styles": "^4",
-    "@types/react-transition-group": "^2.9.2",
+    "@types/react-transition-group": "^4",
     "axios": "^0.19.0",
     "brace": "^0.11.1",
-    "compare-versions": "^3.4.0",
+    "compare-versions": "^3.5.0",
     "copy-text-to-clipboard": "^2.1.0",
-    "d3": "^5.9.2",
+    "d3": "^5.9.7",
     "d3-shape": "^1.3.5",
     "diff": "^4.0.1",
     "dot-prop": "^5.0.0",
     "electron-telemetry": "git+https://github.com/thomasnordquist/electron-telemetry.git#dist",
-    "file-loader": "^4.0.0",
+    "file-loader": "^4.2.0",
     "get-value": "^3.0.1",
     "immutable": "^4.0.0-rc.12",
+    "in-viewport": "^3.6.0",
     "js-base64": "^2.5.1",
     "json-to-ast": "^2.1.0",
     "lodash.debounce": "^4.0.8",
@@ -37,13 +38,13 @@
     "number-abbreviate": "^2.0.0",
     "parse-duration": "^0.1.1",
     "prismjs": "^1.15.0",
-    "react": "16.8",
-    "react-ace": "^7.0.1",
+    "react": "^16.11",
+    "react-ace": "^8",
     "react-dom": "^16.7.0",
     "react-redux": "^7.0.3",
     "react-resize-detector": "^4.1.4",
     "react-split-pane": "^0.1.85",
-    "react-transition-group": "^4.1.1",
+    "react-transition-group": "^4",
     "react-vis": "^1.11.6",
     "redux": "^4.0.1",
     "redux-batched-actions": "^0.4.1",
@@ -56,9 +57,9 @@
     "@types/d3": "^5.7.2",
     "@types/diff": "^4.0.1",
     "@types/get-value": "^3.0.1",
-    "@types/node": "^12.0.4",
+    "@types/node": "^12.7.8",
     "@types/prismjs": "^1.9.1",
-    "@types/react": "^16.7.18",
+    "@types/react": "^16.9.4",
     "@types/react-dom": "^16.0.11",
     "@types/react-redux": "^7.0.9",
     "@types/react-resize-detector": "^4.0.1",
@@ -73,11 +74,11 @@
     "html-webpack-plugin": "^4.0.0-beta.5",
     "node-loader": "^0.6.0",
     "source-map-loader": "^0.2.4",
-    "style-loader": "^0.23.1",
-    "typescript": "^3.2.2",
+    "style-loader": "^1",
+    "typescript": "^3.6.3",
     "webpack": "^4.28.2",
     "webpack-bundle-analyzer": "^3.0.3",
-    "webpack-cli": "^3.1.2",
+    "webpack-cli": "^3.3.6",
     "webpack-dev-server": "^3.1.14"
   },
   "peerDependencies": {

app/src/actions/ConnectionManager.ts

@@ -10,7 +10,7 @@ import { default as persistentStorage, StorageIdentifier } from '../utils/Persis
 import { Dispatch } from 'redux'
 import { showError } from './Global'
 import { remote } from 'electron'
-import * as fs from 'fs'
+import { promises as fsPromise } from 'fs'
 import * as path from 'path'
 
 import { ActionTypes, Action } from '../reducers/ConnectionManager'
@@ -65,35 +65,25 @@ async function openCertificate(): Promise<CertificateParameters> {
     certificateSizeDoesNotMatch: 'Certificate size larger/smaller then expected.',
   }
 
-  return new Promise((resolve, reject) => {
-    remote.dialog.showOpenDialog(
-      { properties: ['openFile'], securityScopedBookmarks: true },
-      (filePaths?: Array<string>) => {
-        const selectedFile = filePaths && filePaths[0]
-        if (!selectedFile) {
-          reject(rejectReasons.noCertificateSelected)
-          return
-        }
-
-        fs.readFile(selectedFile, (error, data) => {
-          if (error) {
-            reject(error)
-            return
-          }
-
-          if (data.length > 16_384 || data.length < 128) {
-            reject(rejectReasons.certificateSizeDoesNotMatch)
-            return
-          }
-
-          resolve({
-            data: data.toString('base64'),
-            name: path.basename(selectedFile),
-          })
-        })
-      }
-    )
+  const openDialogReturnValue = await remote.dialog.showOpenDialog(remote.getCurrentWindow(), {
+    properties: ['openFile'],
+    securityScopedBookmarks: true,
   })
+
+  const selectedFile = openDialogReturnValue.filePaths && openDialogReturnValue.filePaths[0]
+  if (!selectedFile) {
+    throw rejectReasons.noCertificateSelected
+  }
+
+  const data = await fsPromise.readFile(selectedFile)
+  if (data.length > 16_384 || data.length < 128) {
+    throw rejectReasons.certificateSizeDoesNotMatch
+  }
+
+  return {
+    data: data.toString('base64'),
+    name: path.basename(selectedFile),
+  }
 }
 
 export const saveConnectionSettings = () => async (dispatch: Dispatch<any>, getState: () => AppState) => {
@@ -188,7 +178,7 @@ async function ensureConnectionsHaveBeenInitialized() {
   // Migrate connections, rewrite dictionary to "keep" it "ordered" (dictionaries do not have a guaranteed order)
   const mayNeedMigrations = connections && connections['iot.eclipse.org']
   if (connections && mayNeedMigrations) {
-    let newConnections = {}
+    const newConnections = {}
     for (const connection of Object.values(connections)) {
       addMigratedConnection(newConnections, connection)
     }

app/src/actions/Global.ts

@@ -1,4 +1,4 @@
-import { ActionTypes } from '../reducers/Global'
+import { ActionTypes, ConfirmationRequest } from '../reducers/Global'
 import { Dispatch } from 'redux'
 
 export const showError = (error?: string) => ({
@@ -20,3 +20,30 @@ export const toggleSettingsVisibility = () => (dispatch: Dispatch<any>) => {
     type: ActionTypes.toggleSettingsVisibility,
   })
 }
+
+export const requestConfirmation = (title: string, inquiry: string) => (dispatch: Dispatch<any>) => {
+  return new Promise(resolve => {
+    const confirmationRequest = {
+      title,
+      inquiry,
+      callback: (confirmed: boolean) => {
+        resolve(confirmed)
+        dispatch(removeConfirmationRequest(confirmationRequest))
+      },
+    }
+
+    dispatch({
+      confirmationRequest,
+      type: ActionTypes.requestConfirmation,
+    })
+  })
+}
+
+export const removeConfirmationRequest = (confirmationRequest: ConfirmationRequest) => (dispatch: Dispatch<any>) => {
+  return new Promise((resolve, reject) => {
+    dispatch({
+      confirmationRequest,
+      type: ActionTypes.removeConfirmationRequest,
+    })
+  })
+}

app/src/actions/Tree.ts

@@ -99,13 +99,16 @@ export const togglePause = (tree?: q.Tree<TopicViewModel>) => (dispatch: Dispatc
   const tree = getState().tree.get('tree')
   const changes = tree ? tree.unmergedChanges().length : 0
 
+  if (tree) {
+    paused ? tree.resume() : tree.pause()
+  }
+
   if (paused && changes > 0) {
     dispatch(globalActions.showNotification('Applying recorded changes.'))
   }
 
   // Allow for notification to be displayed
   setTimeout(() => {
-    tree && tree.applyUnmergedChanges()
     if (paused && changes > 0) {
       dispatch(globalActions.showNotification(`Successfully applied ${changes} changes.`))
     }

app/src/actions/clearTopic.ts

@@ -3,11 +3,34 @@ import { AppState } from '../reducers'
 import { Dispatch } from 'redux'
 import { makePublishEvent, rendererEvents } from '../../../events'
 import { moveSelectionUpOrDownwards } from './visibleTreeTraversal'
+import { globalActions } from '.'
 
-export const clearTopic = (topic: q.TreeNode<any>, recursive: boolean, subtopicClearLimit = 50) => (
+export const clearTopic = (topic: q.TreeNode<any>, recursive: boolean) => async (
   dispatch: Dispatch<any>,
   getState: () => AppState
 ) => {
+  const topicsForPurging = recursive ? [topic, ...topic.childTopics()] : [topic]
+
+  if (recursive) {
+    const topicCount = topic.childTopicCount()
+
+    const topicDelta = topic.hasMessage() ? -1 : 0
+    const childTopicsMessage =
+      topicCount + topicDelta > 0
+        ? ` and ${topicCount + topicDelta} child ${topicCount + topicDelta === 1 ? 'topic' : 'topics'}`
+        : ''
+
+    const confirmed = await dispatch(
+      globalActions.requestConfirmation(
+        'Confirm delete',
+        `Do you want to clear "${topic.path()}"${childTopicsMessage}?\n\nThis function will send an empty payload (QoS 0, retain) to this and every subtopic, clearing retained topics in the process. Only use this function if you know what you are doing.`
+      )
+    )
+    if (!confirmed) {
+      return
+    }
+  }
+
   dispatch(moveSelectionUpOrDownwards('next'))
 
   const { connectionId } = getState().connection
@@ -15,27 +38,18 @@ export const clearTopic = (topic: q.TreeNode<any>, recursive: boolean, subtopicC
     return
   }
   const publishEvent = makePublishEvent(connectionId)
-  const mqttMessage = {
-    topic: topic.path(),
-    payload: null,
-    retain: true,
-    qos: 0 as 0,
-  }
-  rendererEvents.emit(publishEvent, mqttMessage)
-  if (recursive) {
-    topic
-      .childTopics()
-      .filter(topic => Boolean(topic.message && topic.message.value))
-      .slice(0, subtopicClearLimit)
-      .forEach((topic, idx) => {
-        const mqttMessage = {
-          topic: topic.path(),
-          payload: null,
-          retain: true,
-          qos: 0 as 0,
-        }
-        // Rate limit deletion
-        setTimeout(() => rendererEvents.emit(publishEvent, mqttMessage), 20 * idx)
-      })
-  }
+
+  topicsForPurging
+    .filter(t => t.path() !== '' && t.hasMessage())
+    .map(t => t.path())
+    .forEach((path, idx) => {
+      const mqttMessage = {
+        topic: path,
+        payload: null,
+        retain: true,
+        qos: 0 as 0,
+      }
+      // Rate limit deletion
+      setTimeout(() => rendererEvents.emit(publishEvent, mqttMessage), 20 * idx)
+    })
 }

app/src/components/App.tsx

@@ -1,12 +1,14 @@
-import * as React from 'react'
+import ConfirmationDialog from './ConfirmationDialog'
 import ConnectionSetup from './ConnectionSetup/ConnectionSetup'
 import CssBaseline from '@material-ui/core/CssBaseline'
 import ErrorBoundary from './ErrorBoundary'
 import Notification from './Layout/Notification'
+import React from 'react'
 import TitleBar from './Layout/TitleBar'
 import UpdateNotifier from './UpdateNotifier'
 import { AppState } from '../reducers'
 import { bindActionCreators } from 'redux'
+import { ConfirmationRequest } from '../reducers/Global'
 import { connect } from 'react-redux'
 import { globalActions, settingsActions } from '../actions'
 import { Theme, withStyles } from '@material-ui/core/styles'
@@ -23,6 +25,7 @@ interface Props {
   actions: typeof globalActions
   settingsActions: typeof settingsActions
   launching: boolean
+  confirmationRequests: Array<ConfirmationRequest>
 }
 
 class App extends React.PureComponent<Props, {}> {
@@ -67,6 +70,7 @@ class App extends React.PureComponent<Props, {}> {
       <div className={centerContent}>
         <CssBaseline />
         <ErrorBoundary>
+          <ConfirmationDialog confirmationRequests={this.props.confirmationRequests} />
           {this.renderNotification()}
           <React.Suspense fallback={<div></div>}>
             <Settings />
@@ -149,6 +153,7 @@ const mapStateToProps = (state: AppState) => {
     notification: state.globalState.get('notification'),
     highlightTopicUpdates: state.settings.get('highlightTopicUpdates'),
     launching: state.globalState.get('launching'),
+    confirmationRequests: state.globalState.get('confirmationRequests'),
   }
 }
 

app/src/components/Chart/Chart.tsx

@@ -0,0 +1,105 @@
+import DateFormatter from '../helper/DateFormatter'
+import NoData from './NoData'
+import NumberFormatter from '../helper/NumberFormatter'
+import React, { memo, useCallback } from 'react'
+import TooltipComponent from './TooltipComponent'
+import { default as ReactResizeDetector } from 'react-resize-detector'
+import { emphasize } from '@material-ui/core/styles'
+import { mapCurveType } from './mapCurveType'
+import { PlotCurveTypes } from '../../reducers/Charts'
+import { Point, Tooltip } from './Model'
+import { Theme, withTheme } from '@material-ui/core'
+import { useCustomXDomain } from './effects/useCustomXDomain'
+import { useCustomYDomain } from './effects/useCustomYDomain'
+import 'react-vis/dist/style.css'
+const { XYPlot, LineMarkSeries, YAxis, HorizontalGridLines, Hint } = require('react-vis')
+const abbreviate = require('number-abbreviate')
+
+export interface Props {
+  data: Array<{ x: number; y: number }>
+  theme: Theme
+  interpolation?: PlotCurveTypes
+  range?: [number?, number?]
+  timeRangeStart?: number
+  color?: string
+}
+
+export default withTheme(
+  memo((props: Props) => {
+    const [width, setWidth] = React.useState(300)
+    const [tooltip, setTooltip] = React.useState<Tooltip | undefined>()
+    const detectResize = React.useCallback(newWidth => setWidth(newWidth), [])
+
+    const hintFormatter = React.useCallback(
+      (point: any) => [
+        { title: <b>Time</b>, value: <DateFormatter timeFirst={true} date={new Date(point.x)} /> },
+        { title: <b>Value</b>, value: <NumberFormatter value={point.y} /> },
+        { title: <b>Raw</b>, value: <span>{point.y}</span> },
+      ],
+      []
+    )
+
+    const onMouseLeave = React.useCallback(() => {
+      setTooltip(undefined)
+    }, [])
+
+    const showTooltip = React.useCallback((point: Point, something: { event: MouseEvent }) => {
+      if (!something) {
+        return
+      }
+      setTooltip({ point, value: hintFormatter(point), element: something.event.target as any })
+    }, [])
+
+    const paletteColor =
+      props.theme.palette.type === 'light' ? props.theme.palette.secondary.dark : props.theme.palette.primary.light
+    const color = props.color ? props.color : paletteColor
+
+    const highlightSelectedPoint = useCallback(
+      (point: Point) => {
+        const highlight = tooltip && tooltip.point.x === point.x && tooltip.point.y === point.y
+        return highlight ? emphasize(color, 0.8) : color
+      },
+      [tooltip, color]
+    )
+
+    const formatYAxis = useCallback((num: number) => abbreviate(num), [])
+
+    const xDomain = useCustomXDomain(props)
+    const yDomain = useCustomYDomain(props)
+
+    const data = props.data
+    const hasData = data.length > 0
+    const dummyDomain = [-1, 1]
+    const dummyData = [{ x: -2, y: -2 }]
+    return (
+      <div>
+        <div style={{ height: '150px', width: '100%', position: 'relative' }}>
+          {data.length === 0 ? <NoData /> : null}
+          <XYPlot
+            width={width}
+            height={180}
+            yDomain={hasData ? yDomain : dummyDomain}
+            xDomain={hasData ? xDomain : dummyDomain}
+            onMouseLeave={onMouseLeave}
+          >
+            <HorizontalGridLines />
+            <YAxis width={45} tickFormat={formatYAxis} />
+            <LineMarkSeries
+              color={color}
+              colorType="literal"
+              getColor={highlightSelectedPoint}
+              onValueMouseOver={showTooltip}
+              size={3}
+              data={hasData ? data : dummyData}
+              curve={mapCurveType(props.interpolation)}
+            />
+            <Hint value={{ x: 0, y: 0 }} style={{ pointerEvents: 'none' }}>
+              <TooltipComponent tooltip={tooltip} theme={props.theme} />
+            </Hint>
+          </XYPlot>
+          <ReactResizeDetector handleWidth={true} onResize={detectResize} />
+        </div>
+      </div>
+    )
+  })
+)

app/src/components/Chart/Model.ts

@@ -0,0 +1,15 @@
+export interface Point {
+  x: number
+  y: number
+}
+
+export interface Tooltip {
+  value: Array<TooltipRows>
+  point: Point
+  element: Element | null
+}
+
+export interface TooltipRows {
+  title: React.ReactElement
+  value: React.ReactElement
+}

app/src/components/Chart/NoData.tsx

@@ -0,0 +1,27 @@
+import React, { memo } from 'react'
+import { Typography } from '@material-ui/core'
+
+function NoData() {
+  return (
+    <div
+      style={{
+        height: '100%',
+        position: 'absolute',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%',
+        color: '#ccc',
+        verticalAlign: 'middle',
+        paddingLeft: '30px',
+        zIndex: 10,
+      }}
+    >
+      <Typography style={{ fontWeight: 'bold' }} variant="h5">
+        No Data
+      </Typography>
+    </div>
+  )
+}
+
+export default memo(NoData)

app/src/components/Chart/TooltipComponent.tsx

@@ -0,0 +1,59 @@
+import React, { memo } from 'react'
+import { fade } from '@material-ui/core/styles'
+import { Fade, Grow, Paper, Popper, Theme, Typography, withTheme } from '@material-ui/core'
+import { Tooltip } from './Model'
+
+function TooltipComponent(props: { tooltip?: Tooltip; theme: Theme }) {
+  const { tooltip } = props
+  return (
+    <Popper
+      style={Boolean(tooltip) ? { transition: 'all 0.1s ease-out' } : undefined}
+      open={Boolean(tooltip)}
+      transition={true}
+      placement="top"
+      anchorEl={tooltip && tooltip.element}
+    >
+      <div
+        style={{
+          paddingBottom: '8px',
+          transition: 'all 0.5s ease',
+        }}
+      >
+        <Fade in={Boolean(tooltip)} timeout={300}>
+          <Grow in={Boolean(tooltip)} timeout={300}>
+            <Paper
+              style={{
+                padding: '4px',
+                marginTop: '-12px',
+                backgroundColor: fade(
+                  props.theme.palette.type === 'light'
+                    ? props.theme.palette.background.paper
+                    : props.theme.palette.background.default,
+                  0.7
+                ),
+              }}
+            >
+              <table style={{ lineHeight: '1.25em' }}>
+                <tbody>
+                  {tooltip &&
+                    tooltip.value.map((v: any, idx: number) => (
+                      <tr key={idx}>
+                        <td>
+                          <Typography style={{ lineHeight: '1.2' }}>{v.title}</Typography>
+                        </td>
+                        <td>
+                          <Typography style={{ lineHeight: '1.2' }}>{v.value}</Typography>
+                        </td>
+                      </tr>
+                    ))}
+                </tbody>
+              </table>
+            </Paper>
+          </Grow>
+        </Fade>
+      </div>
+    </Popper>
+  )
+}
+
+export default withTheme(memo(TooltipComponent))

app/src/components/Chart/effects/useCustomXDomain.tsx

@@ -0,0 +1,10 @@
+import { useMemo } from 'react'
+import { Props } from '../Chart'
+
+export function useCustomXDomain(props: Props): [number, number] | undefined {
+  return useMemo(() => {
+    const lastDataPoint = [...props.data].sort((a, b) => b.x - a.x)[0]
+    const lastDataDate = lastDataPoint ? lastDataPoint.x : Date.now()
+    return props.timeRangeStart ? [Date.now() - props.timeRangeStart, lastDataDate] : undefined
+  }, [props.data, props.timeRangeStart])
+}

app/src/components/Chart/effects/useCustomYDomain.tsx

@@ -0,0 +1,45 @@
+import { Props } from '../Chart'
+import { useMemo } from 'react'
+import { Point } from '../Model'
+
+function defaultFor(a: number | undefined, b: number) {
+  return a === undefined ? b : a
+}
+
+export function useCustomYDomain(props: Props) {
+  return useMemo(() => {
+    const data = props.data
+    const calculatedDomain = domainForData(data)
+    const yDomain: [number, number] = props.range
+      ? [defaultFor(props.range[0], calculatedDomain[0]), defaultFor(props.range[1], calculatedDomain[1])]
+      : calculatedDomain
+
+    return yDomain
+  }, [props.data, props.range])
+}
+
+function domainForData(data: Array<Point>): [number, number] {
+  if (!data[0]) {
+    const defaultDomain: [number, number] = [-1, 1]
+    return defaultDomain
+  }
+
+  let max = data[0].y
+  let min = data[0].y
+
+  data.forEach(d => {
+    if (max < d.y) {
+      max = d.y
+    }
+    if (min > d.y) {
+      min = d.y
+    }
+  })
+  if ((max === 1 || max === 0) && (min === 1 || min === 0)) {
+    return [0, 1]
+  }
+  if (min === max) {
+    return [min - 0.5 * min, min + 0.5 * min]
+  }
+  return [min, max]
+}

app/src/components/Chart/mapCurveType.tsx

@@ -0,0 +1,17 @@
+import { PlotCurveTypes } from '../../reducers/Charts'
+export function mapCurveType(type: PlotCurveTypes | undefined) {
+  switch (type) {
+    case 'curve':
+      return 'curveMonotoneX'
+    case 'linear':
+      return 'curveLinear'
+    case 'cubic_basis_spline':
+      return 'curveBasis'
+    case 'step_after':
+      return 'curveStepAfter'
+    case 'step_before':
+      return 'curveStepBefore'
+    default:
+      return 'curveMonotoneX'
+  }
+}

app/src/components/ChartPanel/ChartActions.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React, { useRef } from 'react'
 import Play from '@material-ui/icons/PlayArrow'
 import Pause from '@material-ui/icons/PauseCircleFilled'
 import Clear from '@material-ui/icons/Clear'
@@ -11,16 +11,24 @@ export function ChartActions(props: {
   togglePause: () => void
   parameters: ChartParameters
   onRemove: () => void
+  resetDataAction: () => void
 }) {
+  const menuAnchor = useRef()
   return (
     <div style={{ display: 'flex' }}>
       <CustomIconButton tooltip={props.paused ? 'Resume chart' : 'Pause chart'} onClick={props.togglePause}>
         {props.paused ? <Play /> : <Pause />}
       </CustomIconButton>
-      <SettingsButton parameters={props.parameters} />
+      <SettingsButton menuAnchor={menuAnchor} parameters={props.parameters} resetDataAction={props.resetDataAction} />
       <CustomIconButton tooltip="Remove chart" onClick={props.onRemove}>
         <Clear data-test-type="RemoveChart" data-test={`${props.parameters.topic}-${props.parameters.dotPath || ''}`} />
       </CustomIconButton>
+      <div style={{ width: 0, overflow: 'hidden' }}>
+        {/* Helper element to provide an anchor element for the menu,
+         * so the menu prefers not to overlap with the chart
+         */}
+        <div style={{ marginLeft: '11px' }} ref={menuAnchor as any} />
+      </div>
     </div>
   )
 }

app/src/components/ChartPanel/ChartSettings/ColorSettings.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React, { memo } from 'react'
 import { bindActionCreators } from 'redux'
 import { chartActions } from '../../../actions'
 import { ChartParameters } from '../../../reducers/Charts'
@@ -68,4 +68,4 @@ const mapDispatchToProps = (dispatch: any) => {
 export default connect(
   undefined,
   mapDispatchToProps
-)(ColorSettings)
+)(memo(ColorSettings))

app/src/components/ChartPanel/ChartSettings/InterpolationSettings.tsx

@@ -4,7 +4,7 @@ import { bindActionCreators } from 'redux'
 import { chartActions } from '../../../actions'
 import { ChartParameters, PlotCurveTypes } from '../../../reducers/Charts'
 import { connect } from 'react-redux'
-import { Menu, MenuItem } from '@material-ui/core'
+import { Menu, MenuItem, Typography } from '@material-ui/core'
 
 function chartParametersForAction(chart: ChartParameters, action: string) {
   return {
@@ -40,7 +40,7 @@ function InterpolationSettings(props: {
   const menuItems = React.useMemo(() => {
     return curves.map(curve => (
       <MenuItem key={curve} onClick={callbacks[curve]} selected={props.chart.interpolation === curve}>
-        {curve.replace(/_/g, ' ')}
+        <Typography variant="inherit">{curve.replace(/_/g, ' ')}</Typography>
       </MenuItem>
     ))
   }, [curves, props.chart])

app/src/components/ChartPanel/ChartSettings/MoveUp.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react'
-import { ChartParameters } from '../../../reducers/Charts'
-import { Menu, MenuItem, TextField, Typography } from '@material-ui/core'
-import { connect } from 'react-redux'
+import ArrowUpward from '@material-ui/icons/ArrowUpward'
 import { bindActionCreators } from 'redux'
 import { chartActions } from '../../../actions'
+import { ChartParameters } from '../../../reducers/Charts'
+import { connect } from 'react-redux'
+import { MenuItem, Typography, ListItemIcon } from '@material-ui/core'
 
 function MoveUp(props: { actions: { chart: typeof chartActions }; chart: ChartParameters; close: () => void }) {
   const moveUp = React.useCallback(() => {
@@ -16,7 +17,10 @@ function MoveUp(props: { actions: { chart: typeof chartActions }; chart: ChartPa
 
   return (
     <MenuItem key="size" onClick={moveUp}>
-      Move up
+      <ListItemIcon>
+        <ArrowUpward />
+      </ListItemIcon>
+      <Typography variant="inherit">Move up</Typography>
     </MenuItem>
   )
 }

app/src/components/ChartPanel/ChartSettings/RangeSettings.tsx

@@ -56,8 +56,8 @@ function RangeSettings(props: Props) {
         onClose={props.onClose}
         onKeyDownCapture={handleKeyEvents}
       >
-        <Typography>Define custom ranges for the Y-Axis</Typography>
-        <div style={{ padding: '0 16px' }}>
+        <div style={{ padding: '0 16px', width: '275px' }}>
+          <Typography>Define custom ranges for the Y-Axis</Typography>
           <TextField
             inputProps={{
               ref: rangeFromRef,

app/src/components/ChartPanel/ChartSettings/SettingsButton.tsx

@@ -4,9 +4,12 @@ import CustomIconButton from '../../helper/CustomIconButton'
 import MoreVertIcon from '@material-ui/icons/Settings'
 import { ChartParameters } from '../../../reducers/Charts'
 
-export function SettingsButton(props: { parameters: ChartParameters }) {
+export function SettingsButton(props: {
+  parameters: ChartParameters
+  resetDataAction: () => void
+  menuAnchor: React.MutableRefObject<undefined>
+}) {
   const [visible, setVisible] = React.useState(false)
-  const settingsRef = React.useRef()
   const toggleSettings = React.useCallback(() => {
     setVisible(!visible)
   }, [visible])
@@ -17,10 +20,15 @@ export function SettingsButton(props: { parameters: ChartParameters }) {
 
   return (
     <span>
-      <ChartSettings open={visible} close={close} anchorEl={settingsRef} chart={props.parameters} />
+      <ChartSettings
+        open={visible}
+        close={close}
+        anchorEl={props.menuAnchor}
+        chart={props.parameters}
+        resetDataAction={props.resetDataAction}
+      />
       <CustomIconButton tooltip="Chart settings" onClick={toggleSettings}>
         <MoreVertIcon
-          ref={settingsRef as any}
           data-test-type="ChartSettings"
           data-test={`${props.parameters.topic}-${props.parameters.dotPath || ''}`}
         />

app/src/components/ChartPanel/ChartSettings/Size.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React, { memo } from 'react'
 import { ChartParameters } from '../../../reducers/Charts'
 import { Menu, MenuItem, TextField, Typography } from '@material-ui/core'
 import { connect } from 'react-redux'
@@ -24,16 +24,16 @@ function Size(props: {
   return (
     <Menu anchorEl={props.anchorEl} open={props.open} onClose={props.close}>
       <MenuItem selected={props.chart.width === undefined} onClick={setChartWidth()}>
-        auto
+        <Typography variant="inherit">auto</Typography>
       </MenuItem>
       <MenuItem selected={props.chart.width === 'big'} onClick={setChartWidth('big')}>
-        100% width
+        <Typography variant="inherit">100% width</Typography>
       </MenuItem>
       <MenuItem selected={props.chart.width === 'medium'} onClick={setChartWidth('medium')}>
-        50% width
+        <Typography variant="inherit">50% width</Typography>
       </MenuItem>
       <MenuItem selected={props.chart.width === 'small'} onClick={setChartWidth('small')}>
-        33% width
+        <Typography variant="inherit">33% width</Typography>
       </MenuItem>
     </Menu>
   )
@@ -50,4 +50,4 @@ const mapDispatchToProps = (dispatch: any) => {
 export default connect(
   undefined,
   mapDispatchToProps
-)(Size)
+)(memo(Size))

app/src/components/ChartPanel/ChartSettings/index.tsx

@@ -1,16 +1,22 @@
-import * as React from 'react'
+import BarChart from '@material-ui/icons/BarChart'
+import Clear from '@material-ui/icons/Refresh'
+import ColorLens from '@material-ui/icons/ColorLens'
 import ColorSettings from './ColorSettings'
 import InterpolationSettings from './InterpolationSettings'
 import MoveUp from './MoveUp'
+import MultilineChart from '@material-ui/icons/MultilineChart'
 import RangeSettings from './RangeSettings'
+import React, { memo } from 'react'
 import Size from './Size'
+import Sort from '@material-ui/icons/Sort'
 import TimeRangeSettings from './TimeRangeSettings'
 import { ChartParameters } from '../../../reducers/Charts'
-import { Menu, MenuItem } from '@material-ui/core'
+import { Menu, MenuItem, ListItemIcon, Typography } from '@material-ui/core'
 
 function ChartSettings(props: {
   open: boolean
   close: () => void
+  resetDataAction: () => void
   chart: ChartParameters
   anchorEl: React.MutableRefObject<undefined>
 }) {
@@ -19,6 +25,7 @@ function ChartSettings(props: {
   const [interpolationVisible, setInterpolationVisible] = React.useState(false)
   const [sizeVisible, setSizeVisible] = React.useState(false)
   const [colorVisible, setColorVisible] = React.useState(false)
+  const open = props.open
 
   const toggleRange = React.useCallback(() => {
     if (open) {
@@ -59,19 +66,40 @@ function ChartSettings(props: {
     <span>
       <Menu id="long-menu" anchorEl={props.anchorEl.current} open={props.open} onClose={props.close}>
         <MenuItem key="range" onClick={toggleRange}>
-          Set range
+          <ListItemIcon>
+            <BarChart />
+          </ListItemIcon>
+          <Typography variant="inherit">Y-Axis range (Values)</Typography>
         </MenuItem>
         <MenuItem key="timeRange" onClick={toggleTimeRange}>
-          Time range
+          <ListItemIcon>
+            <BarChart />
+          </ListItemIcon>
+          <Typography variant="inherit">X-Axis range (Time)</Typography>
         </MenuItem>
         <MenuItem key="interpolation" onClick={toggleInterpolation}>
-          Curve interpolation
+          <ListItemIcon>
+            <MultilineChart />
+          </ListItemIcon>
+          <Typography variant="inherit">Curve interpolation</Typography>
         </MenuItem>
         <MenuItem key="size" onClick={toggleSize}>
-          Size
+          <ListItemIcon>
+            <Sort />
+          </ListItemIcon>
+          <Typography variant="inherit">Size</Typography>
         </MenuItem>
         <MenuItem key="color" onClick={toggleColor}>
-          Color
+          <ListItemIcon>
+            <ColorLens />
+          </ListItemIcon>
+          <Typography variant="inherit">Color</Typography>
+        </MenuItem>
+        <MenuItem key="clear" onClick={props.resetDataAction}>
+          <ListItemIcon>
+            <Clear />
+          </ListItemIcon>
+          <Typography variant="inherit">Clear data</Typography>
         </MenuItem>
         <MoveUp chart={props.chart} close={props.close} />
       </Menu>
@@ -94,4 +122,4 @@ function ChartSettings(props: {
   )
 }
 
-export default ChartSettings
+export default memo(ChartSettings)

app/src/components/ChartPanel/ChartWithTreeNode.tsx

@@ -1,6 +1,6 @@
 import * as q from '../../../../backend/src/Model'
 import React from 'react'
-import Chart from './Chart'
+import TopicChart from './TopicChart'
 import { ChartParameters } from '../../reducers/Charts'
 import { usePollingToFetchTreeNode } from '../helper/usePollingToFetchTreeNode'
 
@@ -16,5 +16,5 @@ export function ChartWithTreeNode(props: Props) {
   }
 
   const treeNode = usePollingToFetchTreeNode(tree, parameters.topic)
-  return <Chart treeNode={treeNode} parameters={parameters} />
+  return <TopicChart treeNode={treeNode} parameters={parameters} />
 }

app/src/components/ChartPanel/TopicChart.tsx

@@ -1,15 +1,31 @@
 import * as q from '../../../../backend/src/Model'
-import React, { useState } from 'react'
+import ChartTitle from './ChartTitle'
+import React, { useState, useCallback, memo, useRef } from 'react'
 import TopicPlot from '../TopicPlot'
 import { bindActionCreators } from 'redux'
+import { ChartActions } from './ChartActions'
 import { chartActions } from '../../actions'
 import { ChartParameters } from '../../reducers/Charts'
 import { connect } from 'react-redux'
 import { Paper } from '@material-ui/core'
-import ChartTitle from './ChartTitle'
-import { ChartActions } from './ChartActions'
 const throttle = require('lodash.throttle')
 
+class ClearableMessageBuffer extends q.RingBuffer<q.Message> {
+  public clear() {
+    this.items = []
+    this.start = 0
+    this.end = 0
+  }
+
+  public static fromMessageBuffer(buffer: q.RingBuffer<q.Message>): ClearableMessageBuffer {
+    return new ClearableMessageBuffer(buffer.capacity, buffer.maxItems, buffer.compactionFactor, buffer)
+  }
+
+  public clone(): ClearableMessageBuffer {
+    return ClearableMessageBuffer.fromMessageBuffer(this)
+  }
+}
+
 interface Props {
   parameters: ChartParameters
   treeNode?: q.TreeNode<any>
@@ -19,18 +35,18 @@ interface Props {
 }
 
 /**
- * Subscribes to onMessages keeping track of additional data points
+ * Subscribes to onMessages, stores more data points then the default
  */
 function useMessageSubscriptionToUpdate(treeNode?: q.TreeNode<any>) {
   const [lastUpdated, setLastUpdate] = useState(0)
-  const [messageHistory, setMessageHistory] = useState<q.MessageHistory | undefined>()
+  const [messageHistory, setMessageHistory] = useState<ClearableMessageBuffer | undefined>()
   let amendMessageCallback: any
 
   function subscribeToMessageUpdates() {
     const throttledUpdate = throttle(() => setLastUpdate(treeNode ? treeNode.lastUpdate : 0), 300)
 
     if (treeNode) {
-      const newMessageHistory = treeNode.messageHistory.clone()
+      const newMessageHistory = ClearableMessageBuffer.fromMessageBuffer(treeNode.messageHistory)
       newMessageHistory.setCapacity(500, 2 * 500 * 10000)
 
       amendMessageCallback = (message: q.Message) => {
@@ -43,6 +59,7 @@ function useMessageSubscriptionToUpdate(treeNode?: q.TreeNode<any>) {
 
     return function cleanup() {
       treeNode && treeNode.onMessage.unsubscribe(amendMessageCallback)
+      setMessageHistory(undefined)
     }
   }
   React.useEffect(subscribeToMessageUpdates, [treeNode])
@@ -50,22 +67,34 @@ function useMessageSubscriptionToUpdate(treeNode?: q.TreeNode<any>) {
   return messageHistory
 }
 
-function Chart(props: Props) {
+function useResetDataCallback(messageHistory: ClearableMessageBuffer | undefined) {
+  const [lastUpdated, setLastUpdate] = useState(0)
+
+  return React.useCallback(() => {
+    messageHistory && messageHistory.clear()
+    setLastUpdate(Date.now())
+  }, [messageHistory])
+}
+
+function TopicChart(props: Props) {
   const { parameters, treeNode } = props
-  const [frozenHistory, setFrozenHistory] = React.useState<q.MessageHistory | undefined>()
+  const [frozenHistory, setFrozenHistory] = useState<q.MessageHistory | undefined>()
   const messageHistory = useMessageSubscriptionToUpdate(treeNode)
 
-  const togglePause = React.useCallback(() => {
-    if (!props.treeNode) {
+  const togglePause = useCallback(() => {
+    if (!treeNode) {
       return
     }
+
     setFrozenHistory(frozenHistory ? undefined : messageHistory && messageHistory.clone())
-  }, [props.treeNode, frozenHistory])
+  }, [props.treeNode, frozenHistory, messageHistory])
 
   const onRemove = React.useCallback(() => {
     props.actions.chart.removeChart(props.parameters)
   }, [props.parameters])
 
+  const resetData = useResetDataCallback(messageHistory)
+
   return (
     <Paper
       style={{ padding: '8px' }}
@@ -76,6 +105,7 @@ function Chart(props: Props) {
         <div style={{ display: 'flex', flexGrow: 1, overflow: 'hidden' }}>
           <ChartTitle parameters={parameters} />
           <ChartActions
+            resetDataAction={resetData}
             parameters={parameters}
             onRemove={onRemove}
             paused={Boolean(frozenHistory)}
@@ -83,18 +113,14 @@ function Chart(props: Props) {
           />
         </div>
       </div>
-      {messageHistory ? (
-        <TopicPlot
-          color={props.parameters.color}
-          interpolation={props.parameters.interpolation}
-          timeInterval={props.parameters.timeRange ? props.parameters.timeRange.until : undefined}
-          range={props.parameters.range ? [props.parameters.range.from, props.parameters.range.to] : undefined}
-          history={frozenHistory || messageHistory}
-          dotPath={parameters.dotPath}
-        />
-      ) : (
-        <span>No data</span>
-      )}
+      <TopicPlot
+        color={props.parameters.color}
+        interpolation={props.parameters.interpolation}
+        timeInterval={props.parameters.timeRange ? props.parameters.timeRange.until : undefined}
+        range={props.parameters.range ? [props.parameters.range.from, props.parameters.range.to] : undefined}
+        history={frozenHistory || messageHistory || new ClearableMessageBuffer(1)}
+        dotPath={parameters.dotPath}
+      />
     </Paper>
   )
 }
@@ -110,4 +136,4 @@ const mapDispatchToProps = (dispatch: any) => {
 export default connect(
   undefined,
   mapDispatchToProps
-)(Chart)
+)(memo(TopicChart))

app/src/components/ConfirmationDialog.tsx

@@ -0,0 +1,61 @@
+import React, { useRef, useCallback, memo } from 'react'
+import { ConfirmationRequest } from '../reducers/Global'
+import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button } from '@material-ui/core'
+import { KeyCodes } from '../utils/KeyCodes'
+
+function ConfirmationDialog(props: { confirmationRequests: Array<ConfirmationRequest> }) {
+  const request = props.confirmationRequests[0]
+  const yesRef = useRef<HTMLButtonElement>()
+  const noRef = useRef<HTMLButtonElement>()
+  const arrowKeyHandler = useCallback((event: React.KeyboardEvent) => {
+    const isArrowKey = event.keyCode === KeyCodes.arrow_left || event.keyCode === KeyCodes.arrow_right
+    if (!isArrowKey) {
+      return
+    }
+
+    event.stopPropagation()
+    if (document.activeElement === noRef.current) {
+      yesRef.current && yesRef.current.focus()
+    } else {
+      noRef.current && noRef.current.focus()
+    }
+  }, [])
+
+  const confirm = React.useCallback(() => {
+    request && request.callback(true)
+  }, [request])
+  const reject = React.useCallback(() => {
+    request && request.callback(false)
+  }, [request])
+
+  if (!request) {
+    return null
+  }
+
+  return (
+    <Dialog
+      open={true}
+      onClose={reject}
+      aria-labelledby="alert-dialog-title"
+      aria-describedby="alert-dialog-description"
+      onKeyDown={arrowKeyHandler}
+    >
+      <DialogTitle id="alert-dialog-title">{request.title}</DialogTitle>
+      <DialogContent>
+        <DialogContentText id="alert-dialog-description" style={{ whiteSpace: 'pre-wrap' }}>
+          {request.inquiry}
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button ref={yesRef as any} variant="contained" onClick={confirm} color="primary" autoFocus>
+          Yes
+        </Button>
+        <Button ref={noRef as any} variant="contained" onClick={reject} color="secondary" style={{ marginLeft: '8px' }}>
+          No
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+export default memo(ConfirmationDialog)

app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx

@@ -10,17 +10,7 @@ import { connectionManagerActions } from '../../actions'
 import { ConnectionOptions } from '../../model/ConnectionOptions'
 import { Theme, withStyles } from '@material-ui/core/styles'
 
-import {
-  Button,
-  Grid,
-  IconButton,
-  TextField,
-  List,
-  ListItem,
-  ListItemText,
-  Tooltip,
-  Typography,
-} from '@material-ui/core'
+import { Button, Grid, IconButton, TextField, List, ListItem, ListItemText, Tooltip } from '@material-ui/core'
 
 interface Props {
   connection: ConnectionOptions

app/src/components/ConnectionSetup/Certificates.tsx

@@ -18,7 +18,7 @@ interface State {
   subscription: string
 }
 
-class Certificates extends React.Component<Props, State> {
+class Certificates extends React.PureComponent<Props, State> {
   constructor(props: any) {
     super(props)
     this.state = { subscription: '' }

app/src/components/ConnectionSetup/ConnectionSetup.tsx

@@ -20,7 +20,7 @@ interface Props {
   showCertificateSettings: boolean
 }
 
-class ConnectionSetup extends React.Component<Props, {}> {
+class ConnectionSetup extends React.PureComponent<Props, {}> {
   constructor(props: Props) {
     super(props)
   }

app/src/components/ErrorBoundary.tsx

@@ -14,7 +14,7 @@ interface Props {
   classes: any
 }
 
-class ErrorBoundary extends React.Component<Props, State> {
+class ErrorBoundary extends React.PureComponent<Props, State> {
   public static getDerivedStateFromError(error: Error) {
     return { error }
   }

app/src/components/Layout/Notification.tsx

@@ -11,7 +11,7 @@ interface Props {
   classes: any
 }
 
-class Notification extends React.Component<Props, {}> {
+class Notification extends React.PureComponent<Props, {}> {
   constructor(props: Props) {
     super(props)
   }

app/src/components/Layout/PauseButton.tsx

@@ -28,7 +28,7 @@ interface Props {
   tree?: q.Tree<any>
 }
 
-class PauseButton extends React.Component<Props, { changes: number }> {
+class PauseButton extends React.PureComponent<Props, { changes: number }> {
   private timer?: any
   constructor(props: Props) {
     super(props)

app/src/components/Layout/TitleBar.tsx

@@ -32,6 +32,8 @@ const styles = (theme: Theme) => ({
   },
   disconnect: {
     margin: 'auto 8px auto auto',
+  },
+  disconnectLabel: {
     color: theme.palette.primary.contrastText,
   },
 })
@@ -46,7 +48,7 @@ interface Props {
   topicFilter?: string
 }
 
-class TitleBar extends React.Component<Props, {}> {
+class TitleBar extends React.PureComponent<Props, {}> {
   constructor(props: any) {
     super(props)
     this.state = {}
@@ -71,7 +73,11 @@ class TitleBar extends React.Component<Props, {}> {
           </Typography>
           <SearchBar />
           <PauseButton />
-          <Button className={classes.disconnect} onClick={actions.connection.disconnect}>
+          <Button
+            className={classes.disconnect}
+            classes={{ label: classes.disconnectLabel }}
+            onClick={actions.connection.disconnect}
+          >
             Disconnect <CloudOff className={classes.disconnectIcon} />
           </Button>
           <ConnectionHealthIndicator withBackground={true} />

app/src/components/SettingsDrawer/BrokerStatistics.tsx

@@ -7,6 +7,7 @@ import { Theme, withStyles } from '@material-ui/core/styles'
 import { TopicViewModel } from '../../model/TopicViewModel'
 import { Typography } from '@material-ui/core'
 import { usePollingToFetchTreeNode } from '../helper/usePollingToFetchTreeNode'
+import { useUpdateComponentWhenNodeUpdates } from '../helper/useUpdateComponentWhenNodeUpdates'
 const abbreviate = require('number-abbreviate')
 
 interface Stats {
@@ -32,6 +33,7 @@ interface Props {
 function BrokerStatistics(props: Props) {
   const { tree, classes } = props
   const sysTopic = usePollingToFetchTreeNode(props.tree, '$SYS')
+  useUpdateComponentWhenNodeUpdates(sysTopic)
 
   return useMemo(() => {
     if (!Boolean(sysTopic)) {
@@ -90,7 +92,7 @@ function BrokerStatistics(props: Props) {
         {renderPair(tree, stats.heap, stats.heapMax)}
       </div>
     )
-  }, [sysTopic && sysTopic.lastUpdate])
+  }, [sysTopic && sysTopic.lastUpdate, props.classes])
 }
 
 const mapStateToProps = (state: AppState) => {

app/src/components/SettingsDrawer/Settings.tsx

@@ -90,7 +90,7 @@ interface Props {
   theme: 'light' | 'dark'
 }
 
-class Settings extends React.Component<Props, {}> {
+class Settings extends React.PureComponent<Props, {}> {
   constructor(props: any) {
     super(props)
     this.state = {}

app/src/components/Sidebar/CodeDiff/index.tsx

@@ -8,7 +8,7 @@ import { isPlottable, lineChangeStyle, trimNewlineRight } from './util'
 import { JsonPropertyLocation, literalsMappedByLines } from '../../../../../backend/src/JsonAstParser'
 import { selectTextWithCtrlA } from '../../../utils/handleTextSelectWithCtrlA'
 import { style } from './style'
-import { withStyles } from '@material-ui/core'
+import { withStyles, Typography } from '@material-ui/core'
 import 'prismjs/components/prism-json'
 
 interface Props {
@@ -17,12 +17,13 @@ interface Props {
   current: string
   nameOfCompareMessage: string
   language?: 'json'
+  title?: string
   classes: any
 }
 
 interface State {}
 
-class CodeDiff extends React.Component<Props, State> {
+class CodeDiff extends React.PureComponent<Props, State> {
   private handleCtrlA = selectTextWithCtrlA({ targetSelector: 'pre ~ pre' })
 
   constructor(props: Props) {
@@ -88,7 +89,8 @@ class CodeDiff extends React.Component<Props, State> {
     const code = this.renderStyledCodeLines(changes)
 
     return (
-      <div>
+      <div style={{ marginTop: '8px' }}>
+        {this.props.title ? <Typography className={this.props.classes.title}>{this.props.title}</Typography> : null}
         <div tabIndex={0} onKeyDown={this.handleCtrlA} className={this.props.classes.codeWrapper}>
           <Gutters
             className={this.props.classes.gutters}

app/src/components/Sidebar/CodeDiff/style.tsx

@@ -11,6 +11,11 @@ export const style = (theme: Theme) => {
   }
 
   return {
+    title: {
+      font: codeBaseStyle.font,
+      paddingLeft: '4px',
+      backgroundColor: codeBlockColors.gutters,
+    },
     line: {
       lineHeight: 'normal' as 'normal',
       paddingLeft: '4px',
@@ -22,7 +27,6 @@ export const style = (theme: Theme) => {
       maxHeight: '15em',
       overflow: 'auto',
       backgroundColor: `${codeBlockColors.background}`,
-      margin: '8px 0 0 0',
     },
     gutters: {
       ...codeBaseStyle,

app/src/components/Sidebar/HistoryDrawer.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react'
+import React, { useCallback, useState, useEffect, memo } from 'react'
 import { Badge, Typography } from '@material-ui/core'
 import { selectTextWithCtrlA } from '../../utils/handleTextSelectWithCtrlA'
-import { Theme, withStyles } from '@material-ui/core/styles'
+import { Theme, withStyles, emphasize } from '@material-ui/core/styles'
 
 interface HistoryItem {
   key: string
@@ -15,51 +15,49 @@ interface Props {
   onClick?: (index: number, element: EventTarget) => void
   classes: any
   contentTypeIndicator?: JSX.Element
+  autoOpen?: boolean
   theme: Theme
+  children?: any
 }
 
-interface State {
-  collapsed: boolean
-}
+function HistoryDrawer(props: Props) {
+  const handleCtrlA = selectTextWithCtrlA({ targetSelector: 'pre' })
+  const [expanded, setExpanded] = useState<boolean | undefined>(undefined)
 
-class HistoryDrawer extends React.Component<Props, State> {
-  constructor(props: any) {
-    super(props)
-    this.state = {
-      collapsed: true,
+  const toggle = useCallback(() => {
+    setExpanded(!expanded)
+  }, [expanded])
+
+  useEffect(() => {
+    if (props.autoOpen && expanded === undefined && props.items.length > 0) {
+      setExpanded(true)
     }
-  }
+  }, [props.autoOpen, expanded, props.items])
 
-  private toggle = () => {
-    this.setState({ collapsed: !this.state.collapsed })
-  }
-
-  private createSelectionHandler = (index: number) => (event: React.MouseEvent) => {
-    this.props.onClick && this.props.onClick(index, event.target)
+  const createSelectionHandler = (index: number) => (event: React.MouseEvent) => {
+    props.onClick && props.onClick(index, event.target)
     event.preventDefault()
     event.stopPropagation()
   }
 
-  private handleCtrlA = selectTextWithCtrlA({ targetSelector: 'pre' })
-
-  public renderHistory() {
+  function renderHistory() {
     const style = (element: HistoryItem) => ({
       backgroundColor: element.selected
-        ? this.props.theme.palette.action.selected
-        : this.props.theme.palette.action.hover,
+        ? emphasize(props.theme.palette.background.default, 0.2)
+        : emphasize(props.theme.palette.background.default, 0.07),
       margin: '8px',
       padding: '8px 8px 0 8px',
-      cursor: this.props.onClick ? 'pointer' : 'inherit',
+      cursor: props.onClick ? 'pointer' : 'inherit',
     })
 
     const messageStyle: React.CSSProperties = { textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }
-    const elements = this.props.items.map((element, index) => (
+    const elements = props.items.map((element, index) => (
       <div
         key={element.key}
         style={style(element)}
-        onClick={this.createSelectionHandler(index)}
+        onClick={createSelectionHandler(index)}
         tabIndex={0}
-        onKeyDown={this.handleCtrlA}
+        onKeyDown={handleCtrlA}
       >
         <div>
           <i>{element.title}</i>
@@ -72,40 +70,47 @@ class HistoryDrawer extends React.Component<Props, State> {
       </div>
     ))
 
-    const visible = this.props.items.length > 0 && this.state.collapsed
+    const visible = props.items.length > 0 && !expanded
 
     return (
-      <div className={this.props.classes.main}>
-        <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 className={props.classes.main}>
+        <div
+          style={{
+            backgroundColor: emphasize(props.theme.palette.background.default, 0.07),
+            borderBottom: expanded ? `1px solid ${emphasize(props.theme.palette.background.default, 0.2)}` : undefined,
+          }}
+        >
+          <Typography component={'span'} onClick={toggle} style={{ cursor: 'pointer', display: 'flex' }}>
+            <span style={{ flexGrow: 1 }}>
+              <Badge
+                classes={{ badge: props.classes.badge }}
+                invisible={!visible}
+                badgeContent={props.items.length}
+                color="primary"
+              >
+                {expanded ? '▼ History' : '▶ History'}
+              </Badge>
+            </span>
+            <span>{props.contentTypeIndicator}</span>
+          </Typography>
+        </div>
         <div style={{ maxHeight: '230px', overflowY: 'scroll' }}>
-          {this.state.collapsed ? null : this.props.children}
-          {this.state.collapsed ? null : elements}
+          {expanded ? props.children : null}
+          {expanded ? elements : null}
         </div>
       </div>
     )
   }
 
-  public render() {
-    return <div style={{ display: 'block', width: '100%' }}>{this.renderHistory()}</div>
-  }
+  return <div style={{ display: 'block', width: '100%' }}>{renderHistory()}</div>
 }
 
 const styles = (theme: Theme) => ({
   main: {
-    backgroundColor: 'rgba(170, 170, 170, 0.2)',
+    backgroundColor: theme.palette.background.default,
     marginTop: '16px',
   },
   badge: { right: '-25px' },
 })
 
-export default withStyles(styles, { withTheme: true })(HistoryDrawer)
+export default withStyles(styles, { withTheme: true })(memo(HistoryDrawer))

app/src/components/Sidebar/PlotHistory.tsx

@@ -1,119 +0,0 @@
-import * as React from 'react'
-import DateFormatter from '../helper/DateFormatter'
-import { default as ReactResizeDetector } from 'react-resize-detector'
-import { PlotCurveTypes } from '../../reducers/Charts'
-import { Theme, withTheme } from '@material-ui/core'
-import 'react-vis/dist/style.css'
-const { XYPlot, LineMarkSeries, Hint, XAxis, YAxis, HorizontalGridLines } = require('react-vis')
-const abbreviate = require('number-abbreviate')
-
-interface Props {
-  data: Array<{ x: number; y: number }>
-  theme: Theme
-  interpolation?: PlotCurveTypes
-  range?: [number?, number?]
-  timeRangeStart?: number
-  color?: string
-}
-
-function mapCurveType(type: PlotCurveTypes | undefined) {
-  switch (type) {
-    case 'curve':
-      return 'curveMonotoneX'
-    case 'linear':
-      return 'curveLinear'
-    case 'cubic_basis_spline':
-      return 'curveBasis'
-    case 'step_after':
-      return 'curveStepAfter'
-    case 'step_before':
-      return 'curveStepBefore'
-    default:
-      return 'curveMonotoneX'
-  }
-}
-
-export default withTheme((props: Props) => {
-  const [width, setWidth] = React.useState(300)
-  const [tooltip, setTooltip] = React.useState({ value: undefined })
-  const detectResize = React.useCallback(newWidth => setWidth(newWidth), [])
-
-  const hintFormatter = React.useCallback((point: any) => {
-    return [
-      { title: <b>Time</b>, value: <DateFormatter date={new Date(point.x)} /> },
-      { title: <b>Value</b>, value: point.y },
-    ]
-  }, [])
-
-  const hideTooltip = React.useCallback(() => {
-    setTooltip({ value: undefined })
-  }, [])
-
-  const showTooltip = React.useCallback((value: any) => {
-    setTooltip({ value })
-  }, [])
-
-  return React.useMemo(() => {
-    const data = props.data
-    const calculatedDomain = domainForData(data)
-    const yDomain: [number, number] = props.range
-      ? [props.range[0] || calculatedDomain[0], props.range[1] || calculatedDomain[1]]
-      : calculatedDomain
-
-    const xDomain = props.timeRangeStart ? [Date.now() - props.timeRangeStart, Date.now()] : undefined
-
-    let color: string =
-      props.theme.palette.type === 'light' ? props.theme.palette.secondary.dark : props.theme.palette.primary.light
-    if (props.color) {
-      color = props.color
-    }
-
-    return (
-      <div style={{ height: '150px', overflow: 'hidden' }}>
-        <XYPlot width={width} height={180} yDomain={yDomain} xDomain={xDomain}>
-          <HorizontalGridLines />
-          <XAxis />
-          <YAxis width={45} tickFormat={(num: number) => abbreviate(num)} />
-          <LineMarkSeries
-            color={color}
-            onValueMouseOver={showTooltip}
-            onValueMouseOut={hideTooltip}
-            size={3}
-            data={data}
-            curve={mapCurveType(props.interpolation)}
-          />
-          {tooltip.value ? <Hint format={hintFormatter} value={tooltip.value} /> : null}
-        </XYPlot>
-        <ReactResizeDetector handleWidth={true} onResize={detectResize} />
-      </div>
-    )
-  }, [width, props.data, tooltip, props.interpolation, props.range, props.color, props.theme])
-})
-
-function domainForData(data: Array<{ x: number; y: number }>): [number, number] {
-  if (!data[0]) {
-    const defaultDomain: [number, number] = [-1, 1]
-    return defaultDomain
-  }
-
-  let max = data[0].y
-  let min = data[0].y
-  data.forEach(d => {
-    if (max < d.y) {
-      max = d.y
-    }
-    if (min > d.y) {
-      min = d.y
-    }
-  })
-
-  if ((max === 1 || max === 0) && (min === 1 || min === 0)) {
-    return [0, 1]
-  }
-
-  if (min === max) {
-    return [min - 0.5 * min, min + 0.5 * min]
-  }
-
-  return [min, max]
-}

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

@@ -3,7 +3,8 @@ import FormatAlignLeft from '@material-ui/icons/FormatAlignLeft'
 import Message from './Model/Message'
 import Navigation from '@material-ui/icons/Navigation'
 import PublishHistory from './PublishHistory'
-import React, { useCallback, useState, useMemo } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
+import RetainSwitch from './RetainSwitch'
 import TopicInput from './TopicInput'
 import { AppState } from '../../../reducers'
 import { bindActionCreators } from 'redux'
@@ -12,7 +13,6 @@ import { connect } from 'react-redux'
 import { EditorModeSelect } from './EditorModeSelect'
 import { globalActions, publishActions } from '../../../actions'
 import { KeyCodes } from '../../../utils/KeyCodes'
-import RetainSwitch from './RetainSwitch'
 
 interface Props {
   connectionId?: string
@@ -41,14 +41,8 @@ function useHistory(): [Array<Message>, (topic: string, payload?: string) => voi
 }
 
 function Publish(props: Props) {
-  console.log(props.connectionId)
-  const updatePayload = props.actions.setPayload
   const [history, amendToHistory] = useHistory()
 
-  const updateMode = useCallback((e: React.ChangeEvent<{}>, value: string) => {
-    props.actions.setEditorMode(value)
-  }, [])
-
   const publish = useCallback(() => {
     if (!props.connectionId) {
       return
@@ -63,65 +57,6 @@ function Publish(props: Props) {
     }
   }, [props, props.connectionId, props.topic, props.payload, amendToHistory])
 
-  const handleClickPublish = useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation()
-      publish()
-    },
-    [publish]
-  )
-
-  const PublishButton = () => {
-    return (
-      <Button variant="contained" size="small" color="primary" onClick={handleClickPublish} id="publish-button">
-        <Navigation style={{ marginRight: '8px' }} /> Publish
-      </Button>
-    )
-  }
-
-  const formatJson = () => {
-    if (props.payload) {
-      try {
-        const str = JSON.stringify(JSON.parse(props.payload), undefined, '  ')
-        updatePayload(str)
-      } catch (error) {
-        props.globalActions.showError(`Format error: ${error.message}`)
-      }
-    }
-  }
-
-  const renderFormatJson = () => {
-    if (props.editorMode !== 'json') {
-      return null
-    }
-
-    return (
-      <Tooltip title="Format JSON">
-        <Fab
-          style={{ width: '36px', height: '36px', marginLeft: '8px' }}
-          onClick={formatJson}
-          id="sidebar-publish-format-json"
-        >
-          <FormatAlignLeft style={{ fontSize: '20px' }} />
-        </Fab>
-      </Tooltip>
-    )
-  }
-
-  function EditorMode() {
-    return (
-      <div style={{ marginTop: '16px' }}>
-        <div style={{ width: '100%', lineHeight: '64px' }}>
-          <EditorModeSelect value={props.editorMode} onChange={updateMode} />
-          {renderFormatJson()}
-          <div style={{ float: 'right', marginRight: '16px' }}>
-            <PublishButton />
-          </div>
-        </div>
-      </div>
-    )
-  }
-
   const handleSubmit = useCallback(
     (e: React.KeyboardEvent) => {
       if (e.keyCode === KeyCodes.enter && (e.metaKey || e.ctrlKey)) {
@@ -135,17 +70,100 @@ function Publish(props: Props) {
 
   return useMemo(
     () => (
-      <div style={{ flexGrow: 1, marginLeft: '8px' }} onKeyDown={handleSubmit}>
+      <div style={{ flexGrow: 1, width: '100%' }} onKeyDown={handleSubmit}>
         <TopicInput />
         <div style={{ width: '100%', display: 'block' }}>
-          <EditorMode />
-          <Editor value={props.payload} editorMode={props.editorMode} onChange={updatePayload} />
+          <EditorMode
+            actions={props.actions}
+            globalActions={props.globalActions}
+            payload={props.payload}
+            editorMode={props.editorMode}
+            publish={publish}
+          />
+          <Editor value={props.payload} editorMode={props.editorMode} onChange={props.actions.setPayload} />
           <RetainSwitch />
         </div>
         <PublishHistory history={history} />
       </div>
     ),
-    [props.payload, props.editorMode, history, handleSubmit, updatePayload]
+    [props.payload, props.editorMode, history, handleSubmit, publish]
+  )
+}
+
+function EditorMode(props: {
+  payload?: string
+  editorMode: string
+  actions: typeof publishActions
+  globalActions: typeof globalActions
+  publish: () => void
+}) {
+  const updatePayload = props.actions.setPayload
+
+  const updateMode = useCallback((e: React.ChangeEvent<{}>, value: string) => {
+    props.actions.setEditorMode(value)
+  }, [])
+
+  const formatJson = useCallback(() => {
+    if (props.payload) {
+      try {
+        const str = JSON.stringify(JSON.parse(props.payload), undefined, '  ')
+        updatePayload(str)
+      } catch (error) {
+        props.globalActions.showError(`Format error: ${error.message}`)
+      }
+    }
+  }, [props.payload])
+
+  const renderFormatJson = useCallback(() => {
+    if (props.editorMode !== 'json') {
+      return null
+    }
+
+    return (
+      <Tooltip title="Format JSON">
+        <Fab
+          style={{ width: '36px', height: '36px', margin: '0 8px' }}
+          onClick={formatJson}
+          id="sidebar-publish-format-json"
+        >
+          <FormatAlignLeft style={{ fontSize: '20px' }} />
+        </Fab>
+      </Tooltip>
+    )
+  }, [formatJson, props.editorMode, props.publish])
+
+  return useMemo(
+    () => (
+      <div style={{ marginTop: '16px' }}>
+        <div style={{ width: '100%', lineHeight: '64px', textAlign: 'center' }}>
+          <EditorModeSelect value={props.editorMode} onChange={updateMode} />
+          {renderFormatJson()}
+          <div style={{ float: 'right' }}>
+            <PublishButton publish={props.publish} />
+          </div>
+        </div>
+      </div>
+    ),
+    [props.editorMode, renderFormatJson]
+  )
+}
+
+const PublishButton = (props: { publish: () => void }) => {
+  const handleClickPublish = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      props.publish()
+    },
+    [props.publish]
+  )
+
+  return useMemo(
+    () => (
+      <Button variant="contained" size="small" color="primary" onClick={handleClickPublish} id="publish-button">
+        <Navigation style={{ marginRight: '8px' }} /> Publish
+      </Button>
+    ),
+    [handleClickPublish]
   )
 }
 

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

@@ -24,7 +24,7 @@ function PublishHistory(props: { history: Array<Message>; actions: typeof publis
       value: message.payload || '',
     }))
 
-    return <History items={items} onClick={didSelectHistoryEntry} />
+    return <History autoOpen={true} items={items} onClick={didSelectHistoryEntry} />
   }, [props.history])
 }
 

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

@@ -1,5 +1,5 @@
 import ClearAdornment from '../../helper/ClearAdornment'
-import React, { useCallback } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { FormControl, Input, InputLabel } from '@material-ui/core'
 import { publishActions } from '../../../actions'
 import { bindActionCreators } from 'redux'
@@ -7,7 +7,6 @@ import { AppState } from '../../../reducers'
 import { connect } from 'react-redux'
 
 function TopicInput(props: { actions: typeof publishActions; topic?: string }) {
-  console.log(props.topic)
   const updateTopic = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     props.actions.setTopic(e.target.value)
   }, [])
@@ -23,22 +22,26 @@ function TopicInput(props: { actions: typeof publishActions; topic?: string }) {
   }, [])
 
   const topicStr = 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={clearTopic} value={topicStr} />}
-          onBlur={onTopicBlur}
-          onChange={updateTopic}
-          multiline={true}
-          placeholder="example/topic"
-        />
-      </FormControl>
-    </div>
+
+  return useMemo(
+    () => (
+      <div>
+        <FormControl style={{ width: '100%' }}>
+          <InputLabel htmlFor="publish-topic">Topic</InputLabel>
+          <Input
+            id="publish-topic"
+            value={topicStr}
+            startAdornment={<span />}
+            endAdornment={<ClearAdornment action={clearTopic} value={topicStr} />}
+            onBlur={onTopicBlur}
+            onChange={updateTopic}
+            multiline={false}
+            placeholder="example/topic"
+          />
+        </FormControl>
+      </div>
+    ),
+    [topicStr]
   )
 }
 

app/src/components/Sidebar/Sidebar.tsx

@@ -12,23 +12,23 @@ import { Theme, withStyles } from '@material-ui/core/styles'
 import { TopicViewModel } from '../../model/TopicViewModel'
 import TopicPanel from './TopicPanel/TopicPanel'
 import Panel from './Panel'
+import { usePollingToFetchTreeNode } from '../helper/usePollingToFetchTreeNode'
 
 const throttle = require('lodash.throttle')
 
 const Publish = React.lazy(() => import('./Publish/Publish'))
 
 interface Props {
-  node?: q.TreeNode<TopicViewModel>
+  nodePath?: string
+  tree?: q.Tree<TopicViewModel>
   actions: typeof sidebarActions
   settingsActions: typeof settingsActions
   classes: any
   connectionId?: string
 }
 
-function Sidebar(props: Props) {
-  const { classes, node } = props
+function useUpdateNodeWhenNodeReceivesUpdates(node?: q.TreeNode<any>) {
   const [lastUpdate, setLastUpdate] = useState(0)
-
   const updateNode = useCallback(
     throttle(() => {
       setLastUpdate(node ? node.lastUpdate : 0)
@@ -46,21 +46,26 @@ function Sidebar(props: Props) {
       node && node.onMessage.unsubscribe(updateCallback)
     }
   }, [node])
+}
+
+function Sidebar(props: Props) {
+  const { classes, tree, nodePath } = props
+  const node = usePollingToFetchTreeNode(tree, nodePath || '')
+  useUpdateNodeWhenNodeReceivesUpdates(node)
+  // console.log(node && node.path(), tree, nodePath)
 
   return (
-    <div id="Sidebar" className={props.classes.drawer}>
+    <div id="Sidebar" className={classes.drawer}>
       <div>
-        <TopicPanel node={node} updateNode={updateNode} />
+        <TopicPanel node={node} />
         <ValuePanel lastUpdate={node ? node.lastUpdate : 0} />
         <Panel>
           <span>Publish</span>
-          <React.Suspense fallback={<div>Loading...</div>}>
-            <Publish connectionId={props.connectionId} />
-          </React.Suspense>
+          <Publish connectionId={props.connectionId} />
         </Panel>
         <Panel detailsHidden={!node}>
           <span>Stats</span>
-          <ExpansionPanelDetails className={props.classes.details}>
+          <ExpansionPanelDetails className={classes.details}>
             <NodeStats node={node} />
           </ExpansionPanelDetails>
         </Panel>
@@ -70,8 +75,10 @@ function Sidebar(props: Props) {
 }
 
 const mapStateToProps = (state: AppState) => {
+  const node = state.tree.get('selectedTopic')
   return {
-    node: state.tree.get('selectedTopic'),
+    tree: state.connection.tree,
+    nodePath: node && node.path(),
   }
 }
 
@@ -86,14 +93,9 @@ const styles = (theme: Theme) => ({
   drawer: {
     display: 'block' as 'block',
   },
-  valuePaper: {
-    margin: theme.spacing(1),
-  },
-  summary: { minHeight: '0' },
-  details: { padding: '0px 16px 8px 8px', display: 'block' },
-  heading: {
-    fontSize: theme.typography.pxToRem(15),
-    fontWeight: theme.typography.fontWeightRegular,
+  details: {
+    padding: '0px 16px 8px 8px',
+    display: 'block',
   },
 })
 

app/src/components/Sidebar/TopicPanel/RecursiveTopicDeleteButton.tsx

@@ -8,30 +8,29 @@ export const RecursiveTopicDeleteButton = (props: {
   node?: q.TreeNode<any>
   deleteTopicAction: (node: q.TreeNode<any>, a: boolean, limit: number) => void
 }) => {
-  const onClick = useCallback(() => {
-    if (props.node) {
-      props.deleteTopicAction(props.node, true, deleteLimit)
-    }
-  }, [props.node])
+  const onClick = useCallback(
+    (event: React.MouseEvent) => {
+      if (props.node) {
+        event.stopPropagation()
+        event.preventDefault()
+        props.deleteTopicAction(props.node, true, Infinity)
+      }
+    },
+    [props.node]
+  )
+
   if (!props.node) {
     return null
   }
-  const deleteLimit = 50
+
   const topicCount = props.node ? props.node.childTopicCount() : 0
   if (topicCount === 0 || (props.node.message && topicCount === 1)) {
     return null
   }
   return (
-    <Badge
-      style={{
-        top: '3px',
-        right: '3px',
-      }}
-      badgeContent={<span style={{ whiteSpace: 'nowrap' }}>{topicCount >= deleteLimit ? '50+' : topicCount}</span>}
-      color="secondary"
-    >
-      <CustomIconButton onClick={onClick} tooltip={`Deletes up to ${deleteLimit} sub-topics with a single click`}>
-        <Delete style={{ marginTop: '-3px' }} color="action" />
+    <Badge badgeContent={<span style={{ whiteSpace: 'nowrap' }}>{topicCount}</span>} color="secondary">
+      <CustomIconButton onClick={onClick} tooltip={`Deletes ${topicCount} sub-topics with a single click`}>
+        <Delete color="action" />
       </CustomIconButton>
     </Badge>
   )

app/src/components/Sidebar/TopicPanel/Topic.tsx

@@ -13,7 +13,6 @@ interface Props {
   node?: q.TreeNode<TopicViewModel>
   selected?: q.TreeNode<TopicViewModel>
   actions: typeof treeActions
-  didSelectNode: (node: q.TreeNode<TopicViewModel>) => void
 }
 
 const styles = (theme: Theme) => ({
@@ -24,7 +23,7 @@ const styles = (theme: Theme) => ({
   },
 })
 
-class Topic extends React.Component<Props, {}> {
+class Topic extends React.PureComponent<Props, {}> {
   public render() {
     const { node, theme } = this.props
     if (!node) {

app/src/components/Sidebar/TopicPanel/TopicDeleteButton.tsx

@@ -13,7 +13,7 @@ export const TopicDeleteButton = (props: {
   }
   return (
     <CustomIconButton onClick={() => props.deleteTopicAction(node)} tooltip="Clear this topic">
-      <Delete style={{ marginTop: '-3px' }} />
+      <Delete />
     </CustomIconButton>
   )
 }

app/src/components/Sidebar/TopicPanel/TopicPanel.tsx

@@ -1,7 +1,7 @@
 import * as q from '../../../../../backend/src/Model'
 import Copy from '../../helper/Copy'
 import Panel from '../Panel'
-import React, { useMemo } from 'react'
+import React, { useMemo, useCallback } from 'react'
 import Topic from './Topic'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
@@ -9,17 +9,18 @@ import { RecursiveTopicDeleteButton } from './RecursiveTopicDeleteButton'
 import { sidebarActions } from '../../../actions'
 import { TopicDeleteButton } from './TopicDeleteButton'
 
-const TopicPanel = (props: { node?: q.TreeNode<any>; actions: typeof sidebarActions; updateNode: () => void }) => {
-  const { node, updateNode } = props
+const TopicPanel = (props: { node?: q.TreeNode<any>; actions: typeof sidebarActions }) => {
+  const { node } = props
+  console.log(node && node.path())
   const copyTopic = node ? <Copy value={node.path()} /> : null
 
-  const deleteTopic = (topic?: q.TreeNode<any>, recursive: boolean = false, maxCount = 50) => {
+  const deleteTopic = useCallback((topic?: q.TreeNode<any>, recursive: boolean = false) => {
     if (!topic) {
       return
     }
 
-    props.actions.clearTopic(topic, recursive, maxCount)
-  }
+    props.actions.clearTopic(topic, recursive)
+  }, [])
 
   return useMemo(
     () => (
@@ -29,7 +30,7 @@ const TopicPanel = (props: { node?: q.TreeNode<any>; actions: typeof sidebarActi
           <TopicDeleteButton node={node} deleteTopicAction={deleteTopic} />
           <RecursiveTopicDeleteButton node={node} deleteTopicAction={deleteTopic} />
         </span>
-        <Topic node={node} didSelectNode={updateNode} />
+        <Topic node={node} />
       </Panel>
     ),
     [node, node && node.childTopicCount()]

app/src/components/Sidebar/ValueRenderer/ActionButtons.tsx

@@ -0,0 +1,79 @@
+import React, { useCallback } from 'react'
+import Code from '@material-ui/icons/Code'
+import Reorder from '@material-ui/icons/Reorder'
+import ToggleButton from '@material-ui/lab/ToggleButton'
+import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'
+import { settingsActions } from '../../../actions'
+import { Tooltip, withStyles, Theme } from '@material-ui/core'
+import { bindActionCreators } from 'redux'
+import { AppState } from '../../../reducers'
+import { connect } from 'react-redux'
+import { ValueRendererDisplayMode } from '../../../reducers/Settings'
+
+function ActionButtons(props: {
+  actions: { settings: typeof settingsActions }
+  valueRendererDisplayMode: ValueRendererDisplayMode
+  classes: any
+}) {
+  const handleValue = useCallback(
+    (mouseEvent: React.MouseEvent, value: any) => {
+      if (value === null) {
+        return
+      }
+      props.actions.settings.setValueDisplayMode(value)
+    },
+    [props.actions.settings.setValueDisplayMode]
+  )
+
+  return (
+    <ToggleButtonGroup
+      id="valueRendererDisplayMode"
+      value={props.valueRendererDisplayMode}
+      exclusive={true}
+      onChange={handleValue}
+    >
+      <ToggleButton className={props.classes.toggleButton} value="diff" id="valueRendererDisplayMode-diff">
+        <Tooltip title="Show difference between the current and the last message">
+          <span>
+            <Code className={props.classes.toggleButtonIcon} />
+          </span>
+        </Tooltip>
+      </ToggleButton>
+      <ToggleButton className={props.classes.toggleButton} value="raw" id="valueRendererDisplayMode-raw">
+        <Tooltip title="Raw / formatted JSON">
+          <span>
+            <Reorder className={props.classes.toggleButtonIcon} />
+          </span>
+        </Tooltip>
+      </ToggleButton>
+    </ToggleButtonGroup>
+  )
+}
+
+const styles = (theme: Theme) => ({
+  toggleButton: {
+    height: '36px',
+  },
+  toggleButtonIcon: {
+    verticalAlign: 'middle',
+  },
+})
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: {
+      settings: bindActionCreators(settingsActions, dispatch),
+    },
+  }
+}
+
+const mapStateToProps = (state: AppState) => {
+  return {
+    valueRendererDisplayMode: state.settings.get('valueRendererDisplayMode'),
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withStyles(styles)(ActionButtons))

app/src/components/Sidebar/ValueRenderer/DeleteSelectedTopicButton.tsx

@@ -0,0 +1,39 @@
+import Clear from '@material-ui/icons/Clear'
+import React, { useMemo } from 'react'
+import { bindActionCreators } from 'redux'
+import { Button, Tooltip } from '@material-ui/core'
+import { connect } from 'react-redux'
+import { sidebarActions } from '../../../actions'
+
+const DeleteSelectedTopicButton = (props: {
+  actions: {
+    sidebar: typeof sidebarActions
+  }
+}) =>
+  useMemo(
+    () => (
+      <Tooltip title="Delete retained topic" placement="top">
+        <Button
+          size="small"
+          color="secondary"
+          variant="contained"
+          style={{ marginTop: '11px', padding: '0px 4px', minHeight: '24px' }}
+          onClick={props.actions.sidebar.clearRetainedTopic}
+        >
+          retained <Clear style={{ fontSize: '16px', marginLeft: '2px' }} />
+        </Button>
+      </Tooltip>
+    ),
+    [props.actions.sidebar.clearRetainedTopic]
+  )
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: { sidebar: bindActionCreators(sidebarActions, dispatch) },
+  }
+}
+
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(DeleteSelectedTopicButton)

app/src/components/Sidebar/ValueRenderer/MessageHistory.tsx

@@ -27,16 +27,17 @@ interface Props {
 interface State {
   displayMessage?: q.Message
   anchorEl?: HTMLElement
+  lastUpdate: number
 }
 
-class MessageHistory extends React.Component<Props, State> {
+class MessageHistory extends React.PureComponent<Props, State> {
   private updateNode = throttle(() => {
-    this.setState(this.state)
+    this.setState({ lastUpdate: Date.now() })
   }, 300)
 
   constructor(props: any) {
     super(props)
-    this.state = {}
+    this.state = { lastUpdate: 0 }
   }
 
   private addNodeToCharts = (event: React.MouseEvent) => {

app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx

@@ -1,196 +1,117 @@
 import * as q from '../../../../../backend/src/Model'
-import * as React from 'react'
-import Clear from '@material-ui/icons/Clear'
-import Code from '@material-ui/icons/Code'
+import ActionButtons from './ActionButtons'
 import Copy from '../../helper/Copy'
 import DateFormatter from '../../helper/DateFormatter'
-import ExpandMore from '@material-ui/icons/ExpandMore'
 import MessageHistory from './MessageHistory'
-import Reorder from '@material-ui/icons/Reorder'
-import ToggleButton from '@material-ui/lab/ToggleButton'
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'
+import Panel from '../Panel'
+import React, { useCallback } from 'react'
 import ValueRenderer from './ValueRenderer'
 import { AppState } from '../../../reducers'
 import { Base64Message } from '../../../../../backend/src/Model/Base64Message'
 import { bindActionCreators } from 'redux'
+import { Theme, Typography, withStyles } from '@material-ui/core'
 import { connect } from 'react-redux'
-import { settingsActions, sidebarActions } from '../../../actions'
-import { ValueRendererDisplayMode } from '../../../reducers/Settings'
-
-import {
-  Button,
-  ExpansionPanel,
-  ExpansionPanelDetails,
-  ExpansionPanelSummary,
-  Tooltip,
-  Typography,
-  StyleRulesCallback,
-  withStyles,
-  Theme,
-} from '@material-ui/core'
+import { sidebarActions } from '../../../actions'
+import DeleteSelectedTopicButton from './DeleteSelectedTopicButton'
 
 interface Props {
   node?: q.TreeNode<any>
-  valueRendererDisplayMode: ValueRendererDisplayMode
   sidebarActions: typeof sidebarActions
-  settingsActions: typeof settingsActions
   classes: any
   lastUpdate: number
   compareMessage?: q.Message
 }
 
-interface State {}
+function RenderedValue(props: { node?: q.TreeNode<any>; compareMessage?: q.Message }) {
+  const { node, compareMessage } = props
 
-class ValuePanel extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props)
-    this.state = {}
+  if (!node || !node.message) {
+    return null
   }
 
-  private renderValue() {
-    const node = this.props.node
-    if (!node || !node.message) {
+  return <ValueRenderer treeNode={node} message={node.message} compareWith={compareMessage} />
+}
+
+function ValuePanel(props: Props) {
+  const { node, compareMessage } = props
+
+  function renderViewOptions() {
+    if (!props.node || !props.node.message || !props.node.mqttMessage) {
       return null
     }
 
-    return <ValueRenderer treeNode={node} message={node.message} compareWith={this.props.compareMessage} />
-  }
-
-  private renderViewOptions() {
-    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"
-          style={{ marginTop: '11px', padding: '0px 4px', minHeight: '24px' }}
-          onClick={this.props.sidebarActions.clearRetainedTopic}
-        >
-          retained <Clear style={{ fontSize: '16px', marginLeft: '2px' }} />
-        </Button>
-      </Tooltip>
-    )
-
     return (
-      <div style={{ width: '100%', display: 'flex', paddingLeft: '8px' }}>
-        <span style={{ marginTop: '2px', flexGrow: 1 }}>{this.renderActionButtons()}</span>
-        <div style={{ flex: 6, textAlign: 'right' }}>{this.props.node.mqttMessage.retain ? retainedButton : null}</div>
-        {this.messageMetaInfo()}
+      <div style={{ width: '100%', display: 'flex', flexWrap: 'wrap' }}>
+        <span style={{ marginTop: '2px', flexGrow: 1 }}>
+          <ActionButtons />
+        </span>
+        <span style={{ flex: 6, textAlign: 'right' }}>
+          {props.node.mqttMessage.retain ? <DeleteSelectedTopicButton /> : null}
+        </span>
+        {messageMetaInfo()}
       </div>
     )
   }
 
-  private messageMetaInfo() {
-    if (!this.props.node || !this.props.node.message || !this.props.node.mqttMessage) {
+  function messageMetaInfo() {
+    if (!props.node || !props.node.message || !props.node.mqttMessage) {
       return null
     }
 
     return (
       <span style={{ width: '100%', paddingLeft: '8px', flex: 6 }}>
-        <Typography style={{ textAlign: 'right' }}>QoS: {this.props.node.mqttMessage.qos}</Typography>
+        <Typography style={{ textAlign: 'right' }}>QoS: {props.node.mqttMessage.qos}</Typography>
         <Typography style={{ textAlign: 'right' }}>
           <i>
-            <DateFormatter date={this.props.node.message.received} />
+            <DateFormatter date={props.node.message.received} />
           </i>
         </Typography>
       </span>
     )
   }
 
-  private renderActionButtons() {
-    const handleValue = (mouseEvent: React.MouseEvent, value: any) => {
-      if (value === null) {
-        return
+  const handleMessageHistorySelect = useCallback(
+    (message: q.Message) => {
+      if (message !== compareMessage) {
+        props.sidebarActions.setCompareMessage(message)
+      } else {
+        props.sidebarActions.setCompareMessage(undefined)
       }
-      this.props.settingsActions.setValueDisplayMode(value)
-    }
+    },
+    [compareMessage]
+  )
 
-    return (
-      <ToggleButtonGroup
-        id="valueRendererDisplayMode"
-        value={this.props.valueRendererDisplayMode}
-        exclusive={true}
-        onChange={handleValue}
-      >
-        <ToggleButton className={this.props.classes.toggleButton} value="diff" id="valueRendererDisplayMode-diff">
-          <Tooltip title="Show difference between the current and the last message">
-            <span>
-              <Code className={this.props.classes.toggleButtonIcon} />
-            </span>
-          </Tooltip>
-        </ToggleButton>
-        <ToggleButton className={this.props.classes.toggleButton} value="raw" id="valueRendererDisplayMode-raw">
-          <Tooltip title="Raw value">
-            <span>
-              <Reorder className={this.props.classes.toggleButtonIcon} />
-            </span>
-          </Tooltip>
-        </ToggleButton>
-      </ToggleButtonGroup>
-    )
-  }
+  const copyValue =
+    node && node.message && node.message.value ? (
+      <Copy value={Base64Message.toUnicodeString(node.message.value)} />
+    ) : null
 
-  private panelStyle() {
-    return {
-      detailsStyle: { padding: '0px 16px 8px 8px', display: 'block' },
-      summaryStyle: { minHeight: '0' },
-    }
-  }
-
-  private handleMessageHistorySelect = (message: q.Message) => {
-    if (message !== this.props.compareMessage) {
-      this.props.sidebarActions.setCompareMessage(message)
-    } else {
-      this.props.sidebarActions.setCompareMessage(undefined)
-    }
-  }
-
-  public render() {
-    const { node, classes } = this.props
-    const { detailsStyle, summaryStyle } = this.panelStyle()
-
-    const copyValue =
-      node && node.message && node.message.value ? (
-        <Copy value={Base64Message.toUnicodeString(node.message.value)} />
-      ) : null
-
-    return (
-      <ExpansionPanel key="value" defaultExpanded={true}>
-        <ExpansionPanelSummary expandIcon={<ExpandMore />} style={summaryStyle}>
-          <Typography className={classes.heading}>Value {copyValue}</Typography>
-        </ExpansionPanelSummary>
-        <ExpansionPanelDetails style={detailsStyle}>
-          {this.renderViewOptions()}
-          <div style={{ marginBottom: '-8px' }}>
-            <React.Suspense fallback={<div>Loading...</div>}>{this.renderValue()}</React.Suspense>
-          </div>
-          <div>
-            <MessageHistory
-              onSelect={this.handleMessageHistorySelect}
-              selected={this.props.compareMessage}
-              node={this.props.node}
-            />
-          </div>
-        </ExpansionPanelDetails>
-      </ExpansionPanel>
-    )
-  }
+  return (
+    <Panel>
+      <span>Value {copyValue}</span>
+      <span style={{ width: '100%' }}>
+        {renderViewOptions()}
+        <div style={{ marginBottom: '-8px', marginTop: '8px' }}>
+          <React.Suspense fallback={<div>Loading...</div>}>
+            <RenderedValue node={node} compareMessage={compareMessage} />
+          </React.Suspense>
+        </div>
+        <div>
+          <MessageHistory onSelect={handleMessageHistorySelect} selected={props.compareMessage} node={props.node} />
+        </div>
+      </span>
+    </Panel>
+  )
 }
 
 const mapDispatchToProps = (dispatch: any) => {
   return {
     sidebarActions: bindActionCreators(sidebarActions, dispatch),
-    settingsActions: bindActionCreators(settingsActions, dispatch),
   }
 }
 
 const mapStateToProps = (state: AppState) => {
   return {
-    valueRendererDisplayMode: state.settings.get('valueRendererDisplayMode'),
     node: state.tree.get('selectedTopic'),
     compareMessage: state.sidebar.get('compareMessage'),
   }
@@ -201,12 +122,6 @@ const styles = (theme: Theme) => ({
     fontSize: theme.typography.pxToRem(15),
     fontWeight: theme.typography.fontWeightRegular,
   },
-  toggleButton: {
-    height: '36px',
-  },
-  toggleButtonIcon: {
-    verticalAlign: 'middle',
-  },
 })
 
 export default connect(

app/src/components/Sidebar/ValueRenderer/ValueRenderer.tsx

@@ -6,6 +6,7 @@ import { Base64Message } from '../../../../../backend/src/Model/Base64Message'
 import { connect } from 'react-redux'
 import { default as ReactResizeDetector } from 'react-resize-detector'
 import { ValueRendererDisplayMode } from '../../../reducers/Settings'
+import { Typography, Fade, Grow } from '@material-ui/core'
 
 interface Props {
   message: q.Message
@@ -24,18 +25,34 @@ class ValueRenderer extends React.Component<Props, State> {
     this.state = { width: 0 }
   }
 
-  private renderDiff(current: string = '', previous: string = '', language?: 'json') {
+  private renderDiff(current: string = '', previous: string = '', title?: string, language?: 'json') {
     return (
       <CodeDiff
         treeNode={this.props.treeNode}
         previous={previous}
         current={current}
+        title={title}
         language={language}
         nameOfCompareMessage={this.props.compareWith ? 'selected' : 'previous'}
       />
     )
   }
 
+  private convertMessage(msg?: Base64Message): [string | undefined, 'json' | undefined] {
+    if (!msg) {
+      return [undefined, undefined]
+    }
+
+    const str = Base64Message.toUnicodeString(msg)
+    try {
+      JSON.parse(str)
+    } catch (error) {
+      return [str, undefined]
+    }
+
+    return [this.messageToPrettyJson(str), 'json']
+  }
+
   private messageToPrettyJson(str: string): string | undefined {
     try {
       const json = JSON.parse(str)
@@ -45,61 +62,50 @@ class ValueRenderer extends React.Component<Props, State> {
     }
   }
 
-  private updateWidth = (width: number) => {
-    if (width !== this.state.width) {
-      this.setState({ width })
+  private renderRawMode(message: q.Message, compare?: q.Message) {
+    if (!message.value) {
+      return
     }
-  }
+    const [value, valueLanguage] = this.convertMessage(message.value)
+    const [compareStr, compareStrLanguage] =
+      compare && compare.value ? this.convertMessage(compare.value) : [undefined, undefined]
 
-  private renderRawValue(value: string, compare: string) {
-    return this.renderDiff(value, compare)
+    return (
+      <div>
+        {this.renderDiff(value, value, undefined, valueLanguage)}
+        <Fade in={Boolean(compareStr)} timeout={400}>
+          <div>
+            {Boolean(compareStr) ? this.renderDiff(compareStr, compareStr, 'selected', compareStrLanguage) : null}
+          </div>
+        </Fade>
+      </div>
+    )
   }
 
   public render() {
-    return (
-      <div style={{ padding: '0px 0px 8px 8px' }}>
-        <ReactResizeDetector handleWidth={true} onResize={this.updateWidth} />
-        {this.renderValue()}
-      </div>
-    )
+    return <div style={{ padding: '0px 0px 8px 0px', width: '100%' }}>{this.renderValue()}</div>
   }
 
   public renderValue() {
     const { message, treeNode, compareWith, renderMode } = this.props
     const previousMessages = treeNode.messageHistory.toArray()
     const previousMessage = previousMessages[previousMessages.length - 2]
-    let compareMessage = compareWith || previousMessage || message
+    const compareMessage = compareWith || previousMessage || message
+
     if (renderMode === 'raw') {
-      compareMessage = message
+      return this.renderRawMode(message, compareWith)
     }
     if (!message.value) {
       return null
     }
 
     const compareValue = compareMessage.value || message.value
-    const str = Base64Message.toUnicodeString(message.value)
-    const compareStr = Base64Message.toUnicodeString(compareValue)
+    const [current, currentLanguage] = this.convertMessage(message.value)
+    const [compare, compareLanguage] = this.convertMessage(compareValue)
 
-    let json
-    try {
-      json = JSON.parse(str)
-    } catch (error) {
-      return this.renderRawValue(str, compareStr)
-    }
+    const language = currentLanguage === compareLanguage && compareLanguage === 'json' ? 'json' : undefined
 
-    if (typeof json === 'string') {
-      return this.renderRawValue(str, compareStr)
-    } else if (typeof json === 'number') {
-      return this.renderRawValue(str, compareStr)
-    } else if (typeof json === 'boolean') {
-      return this.renderRawValue(str, compareStr)
-    } else {
-      const current = this.messageToPrettyJson(str) || str
-      const compare = this.messageToPrettyJson(compareStr) || compareStr
-      const language = current && compare ? 'json' : undefined
-
-      return this.renderDiff(current, compare, language)
-    }
+    return this.renderDiff(current, compare, undefined, language)
   }
 }
 

app/src/components/TopicPlot.tsx

@@ -1,7 +1,7 @@
 import * as dotProp from 'dot-prop'
 import * as q from '../../../backend/src/Model'
 import * as React from 'react'
-import PlotHistory from './Sidebar/PlotHistory'
+import PlotHistory from './Chart/Chart'
 import { Base64Message } from '../../../backend/src/Model/Base64Message'
 import { toPlottableValue } from './Sidebar/CodeDiff/util'
 import { PlotCurveTypes } from '../reducers/Charts'
@@ -42,18 +42,22 @@ function nodeDotPathToHistory(startTime: number | undefined, history: q.MessageH
         json = message.value ? JSON.parse(Base64Message.toUnicodeString(message.value)) : {}
       } catch (ignore) {}
 
-      let value = dotProp.get(json, dotPath)
+      const value = dotProp.get(json, dotPath)
 
       return { x: message.received.getTime(), y: toPlottableValue(value) }
     })
     .filter(data => !isNaN(data.y as any)) as any
 }
 
-function render(props: Props) {
+function TopicPlot(props: Props) {
   const startOffset = props.timeInterval ? parseDuration(props.timeInterval) : undefined
-  const data = props.dotPath
-    ? nodeDotPathToHistory(startOffset, props.history, props.dotPath)
-    : nodeToHistory(startOffset, props.history)
+  const data = React.useMemo(
+    () =>
+      props.dotPath
+        ? nodeDotPathToHistory(startOffset, props.history, props.dotPath)
+        : nodeToHistory(startOffset, props.history),
+    [props.history.last(), startOffset, props.dotPath]
+  )
 
   return (
     <PlotHistory
@@ -66,4 +70,4 @@ function render(props: Props) {
   )
 }
 
-export default render
+export default TopicPlot

app/src/components/Tree/TreeNode/TreeNodeSubnodes.tsx

@@ -29,7 +29,7 @@ function useStagedRendering(treeNode: q.TreeNode<any>) {
     if (alreadyAdded < edges.length) {
       renderMoreAnimationFrame = (window as any).requestIdleCallback(
         () => {
-          setAlreadyAdded(alreadyAdded * 1.5)
+          setAlreadyAdded(Math.max(25, alreadyAdded * 1.5))
         },
         { timeout: 500 }
       )
@@ -53,7 +53,6 @@ function TreeNodeSubnodes(props: Props) {
         <TreeNode
           key={`${node.hash()}-${props.filter}`}
           treeNode={node}
-          className={props.classes.listItem}
           lastUpdate={node.lastUpdate}
           selectTopicAction={props.selectTopicAction}
           settings={props.settings}
@@ -63,7 +62,7 @@ function TreeNodeSubnodes(props: Props) {
     })
 
     return <span className={props.classes.list}>{listItems}</span>
-  }, [alreadyAdded, props.treeNode.lastUpdate, props.theme])
+  }, [alreadyAdded, props.treeNode.lastUpdate, props.theme, props.settings])
 }
 
 const styles = (theme: Theme) => ({

app/src/components/Tree/TreeNode/TreeNodeTitle.tsx

@@ -1,11 +1,12 @@
-import * as React from 'react'
 import * as q from '../../../../../backend/src/Model'
-import { withStyles, Theme } from '@material-ui/core'
-import { TopicViewModel } from '../../../model/TopicViewModel'
+import React, { memo } from 'react'
 import { Base64Message } from '../../../../../backend/src/Model/Base64Message'
+import { Theme, withStyles } from '@material-ui/core'
+import { TopicViewModel } from '../../../model/TopicViewModel'
 
 export interface TreeNodeProps extends React.HTMLAttributes<HTMLElement> {
   treeNode: q.TreeNode<TopicViewModel>
+  lastUpdate: number
   name?: string | undefined
   collapsed?: boolean | undefined
   didSelectNode: any
@@ -13,7 +14,7 @@ export interface TreeNodeProps extends React.HTMLAttributes<HTMLElement> {
   classes: any
 }
 
-class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
+class TreeNodeTitle extends React.PureComponent<TreeNodeProps, {}> {
   private renderSourceEdge() {
     const name = this.props.name || (this.props.treeNode.sourceEdge && this.props.treeNode.sourceEdge.name)
 
@@ -24,13 +25,23 @@ class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
     )
   }
 
+  private truncatedMessage() {
+    const limit = 400
+    if (!this.props.treeNode.message || !this.props.treeNode.message.value) {
+      return ''
+    }
+
+    const str = Base64Message.toUnicodeString(this.props.treeNode.message.value)
+    return str.length > limit ? `${str.slice(0, limit)}…` : str
+  }
+
   private renderValue() {
     return this.props.treeNode.message &&
       this.props.treeNode.message.value &&
       this.props.treeNode.message.length > 0 ? (
       <span key="value" className={this.props.classes.value}>
         {' '}
-        = {Base64Message.toUnicodeString(this.props.treeNode.message.value).slice(0, 120)}
+        = {this.truncatedMessage()}
       </span>
     ) : null
   }
@@ -53,11 +64,11 @@ class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
     }
 
     const messages = this.props.treeNode.leafMessageCount()
+    const topicCount = this.props.treeNode.childTopicCount()
     return (
-      <span
-        key="metadata"
-        className={this.props.classes.collapsedSubnodes}
-      >{`(${this.props.treeNode.childTopicCount()} topics, ${messages} messages)`}</span>
+      <span key="metadata" className={this.props.classes.collapsedSubnodes}>{` (${topicCount} ${
+        topicCount === 1 ? 'topic' : 'topics'
+      }, ${messages} ${messages === 1 ? 'message' : 'messages'})`}</span>
     )
   }
 
@@ -89,4 +100,4 @@ const styles = (theme: Theme) => ({
   },
 })
 
-export default withStyles(styles)(TreeNodeTitle)
+export default withStyles(styles)(memo(TreeNodeTitle))

app/src/components/Tree/TreeNode/effects/useAnimationToIndicateTopicUpdate.tsx

@@ -1,14 +1,21 @@
 import React, { useEffect } from 'react'
+const inViewport = require('in-viewport')
 
 export function useAnimationToIndicateTopicUpdate(
   ref: React.MutableRefObject<HTMLDivElement | undefined>,
   lastUpdate: number,
   className: string,
   selected: boolean,
+  selectionLastUpdate: number,
   shouldAnimate: boolean
 ) {
   useEffect(() => {
-    if (ref.current && shouldAnimate && Date.now() - lastUpdate < 3000 && !selected) {
+    const selectionDidChange = Date.now() - selectionLastUpdate < 500
+    if (ref.current && shouldAnimate && Date.now() - lastUpdate < 3000 && !selected && !selectionDidChange) {
+      if (!inViewport(ref.current)) {
+        return
+      }
+
       let timeout: any
       let animationFrame = requestAnimationFrame(() => {
         ref.current && ref.current.classList.add(className)
@@ -27,5 +34,5 @@ export function useAnimationToIndicateTopicUpdate(
         animationFrame && cancelAnimationFrame(animationFrame)
       }
     }
-  }, [lastUpdate, selected, shouldAnimate, className])
+  }, [lastUpdate, selected, selectionLastUpdate, shouldAnimate, className])
 }

app/src/components/Tree/TreeNode/effects/useDeleteKeyCallback.tsx

@@ -6,11 +6,10 @@ import { treeActions } from '../../../../actions'
 export function useDeleteKeyCallback(topic: q.TreeNode<any>, actions: typeof treeActions) {
   return useCallback(
     (event: React.KeyboardEvent) => {
-      return
       if (event.keyCode === KeyCodes.delete || event.keyCode === KeyCodes.backspace) {
         event.stopPropagation()
         event.preventDefault()
-        actions.clearTopic(topic, true, 50)
+        actions.clearTopic(topic, true)
       }
     },
     [topic]

app/src/components/Tree/TreeNode/effects/useIsAllowedToAutoExpandState.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react'
 export function useIsAllowedToAutoExpandState(props: Props): boolean {
   const { settings, treeNode, isRoot } = props
   const [isAllowedToAutoExpand, setAllowAutoExpand] = useState(false)
+
   useEffect(() => {
     const newIsAllowedToAutoExpand = isRoot || treeNode.edgeCount() <= settings.get('autoExpandLimit')
     if (newIsAllowedToAutoExpand !== isAllowedToAutoExpand) {

app/src/components/Tree/TreeNode/effects/useSelectionState.tsx

@@ -0,0 +1,14 @@
+import { useCallback, useState } from 'react'
+
+interface SelectedState {
+  selected: boolean
+  lastUpdate: number
+}
+
+export function useSelectionState(initialSelectionState: boolean): [boolean, number, (selected: boolean) => void] {
+  const [state, setState] = useState<SelectedState>({ selected: initialSelectionState, lastUpdate: 0 })
+  const setSelected = useCallback((selected: boolean) => {
+    setState({ selected, lastUpdate: Date.now() })
+  }, [])
+  return [state.selected, state.lastUpdate, setSelected]
+}

app/src/components/Tree/TreeNode/effects/useViewModelSubscriptions.tsx

@@ -8,37 +8,37 @@ export function useViewModelSubscriptions(
   setSelected: (value: boolean) => void,
   setCollapsedOverride: (value: boolean) => void
 ) {
-  const selectionDidChange = () => {
-    const selected = treeNode.viewModel && treeNode.viewModel.isSelected()
-    treeNode.viewModel && setSelected(Boolean(selected))
-
-    if (selected && nodeRef && nodeRef.current) {
-      nodeRef.current.focus({ preventScroll: false })
-    }
-  }
-
-  const expandedDidChange = () => {
-    treeNode.viewModel && setCollapsedOverride(!treeNode.viewModel.isExpanded())
-  }
-
   useEffect(() => {
+    const selectionDidChange = () => {
+      const selected = treeNode.viewModel && treeNode.viewModel.isSelected()
+      treeNode.viewModel && setSelected(Boolean(selected))
+
+      if (selected && nodeRef && nodeRef.current) {
+        nodeRef.current.focus({ preventScroll: false })
+      }
+    }
+
+    const expandedDidChange = () => {
+      treeNode.viewModel && setCollapsedOverride(!treeNode.viewModel.isExpanded())
+    }
+
+    function addSubscriber() {
+      treeNode.viewModel = new TopicViewModel()
+      treeNode.viewModel.selectionChange.subscribe(selectionDidChange)
+      treeNode.viewModel.expandedChange.subscribe(expandedDidChange)
+    }
+
+    function removeSubscriber() {
+      if (treeNode.viewModel) {
+        treeNode.viewModel.selectionChange.unsubscribe(selectionDidChange)
+        treeNode.viewModel.expandedChange.unsubscribe(expandedDidChange)
+        treeNode.viewModel = undefined
+      }
+    }
+
     addSubscriber()
     return function cleanup() {
       removeSubscriber()
     }
   }, [treeNode])
-
-  function addSubscriber() {
-    treeNode.viewModel = new TopicViewModel()
-    treeNode.viewModel.selectionChange.subscribe(selectionDidChange)
-    treeNode.viewModel.expandedChange.subscribe(expandedDidChange)
-  }
-
-  function removeSubscriber() {
-    if (treeNode.viewModel) {
-      treeNode.viewModel.selectionChange.unsubscribe(selectionDidChange)
-      treeNode.viewModel.expandedChange.unsubscribe(expandedDidChange)
-      treeNode.viewModel = undefined
-    }
-  }
 }

app/src/components/Tree/TreeNode/index.tsx

@@ -11,6 +11,7 @@ import { useAnimationToIndicateTopicUpdate } from './effects/useAnimationToIndic
 import { useDeleteKeyCallback } from './effects/useDeleteKeyCallback'
 import { useIsAllowedToAutoExpandState } from './effects/useIsAllowedToAutoExpandState'
 import { useViewModelSubscriptions } from './effects/useViewModelSubscriptions'
+import { useSelectionState } from './effects/useSelectionState'
 
 export interface Props {
   isRoot?: boolean
@@ -18,7 +19,6 @@ export interface Props {
   name?: string | undefined
   collapsed?: boolean | undefined
   classes: any
-  className?: string
   lastUpdate: number
   actions: typeof treeActions
   selectTopicAction: (treeNode: q.TreeNode<any>) => void
@@ -27,9 +27,9 @@ export interface Props {
 }
 
 function TreeNodeComponent(props: Props) {
-  const { actions, classes, className, settings, theme, treeNode, lastUpdate, name } = props
+  const { actions, classes, settings, theme, treeNode, lastUpdate, name } = props
   const [collapsedOverride, setCollapsedOverride] = useState<boolean | undefined>(undefined)
-  const [selected, setSelected] = useState(false)
+  const [selected, selectionLastUpdate, setSelected] = useSelectionState(false)
   const nodeRef = useRef<HTMLDivElement>()
   const isAllowedToAutoExpand = useIsAllowedToAutoExpandState(props)
   const deleteTopicCallback = useDeleteKeyCallback(treeNode, actions)
@@ -42,16 +42,13 @@ function TreeNodeComponent(props: Props) {
     lastUpdate,
     animationClass,
     selected,
+    selectionLastUpdate,
     settings.get('highlightTopicUpdates')
   )
 
   const isCollapsed =
     Boolean(collapsedOverride) === collapsedOverride ? Boolean(collapsedOverride) : !isAllowedToAutoExpand
 
-  const toggle = useCallback(() => {
-    setCollapsedOverride(!isCollapsed)
-  }, [isCollapsed])
-
   const didSelectTopic = useCallback(
     (event?: React.MouseEvent) => {
       event && event.stopPropagation()
@@ -64,17 +61,17 @@ function TreeNodeComponent(props: Props) {
     (event: React.MouseEvent) => {
       event.stopPropagation()
       didSelectTopic()
-      toggle()
+      setCollapsedOverride(!isCollapsed)
     },
-    [toggle, didSelectTopic]
+    [isCollapsed, didSelectTopic]
   )
 
   const toggleCollapsed = useCallback(
     (event: React.MouseEvent) => {
       event.stopPropagation()
-      toggle()
+      setCollapsedOverride(!isCollapsed)
     },
-    [toggle]
+    [isCollapsed]
   )
 
   const didObtainFocus = useCallback(() => {
@@ -88,7 +85,7 @@ function TreeNodeComponent(props: Props) {
         didSelectTopic()
       }
     },
-    [didSelectTopic]
+    [didSelectTopic, settings]
   )
 
   useEffect(() => {
@@ -114,29 +111,30 @@ function TreeNodeComponent(props: Props) {
 
     const highlightClass = selected ? classes.selected : ''
     return (
-      <div>
-        <div
+      <div className={classes.node}>
+        <span
+          ref={nodeRef as any}
           key={treeNode.hash()}
-          className={`${classes.node} ${className} ${highlightClass} ${classes.title}`}
+          className={`${classes.title} ${highlightClass}`}
           onMouseEnter={mouseOver}
           onFocus={didObtainFocus}
           onClick={didClickTitle}
-          ref={nodeRef as any}
           tabIndex={-1}
           onKeyDown={deleteTopicCallback}
         >
           <TreeNodeTitle
+            lastUpdate={treeNode.lastUpdate}
             toggleCollapsed={toggleCollapsed}
             didSelectNode={didSelectTopic}
             collapsed={isCollapsed}
             treeNode={treeNode}
             name={name}
           />
-        </div>
+        </span>
         {renderNodes()}
       </div>
     )
-  }, [treeNode.lastUpdate, treeNode, name, isCollapsed, selected, theme])
+  }, [treeNode.lastUpdate, treeNode, name, isCollapsed, selected, theme, mouseOver, settings])
 }
 
-export default withStyles(styles, { withTheme: true })(TreeNodeComponent)
+export default withStyles(styles, { withTheme: true })(React.memo(TreeNodeComponent))

app/src/components/Tree/TreeNode/styles.ts

@@ -6,25 +6,26 @@ export const styles = (theme: Theme) => {
     animationLight: {
       willChange: 'auto',
       translateZ: 0,
-      animation: `updateLight 0.5s`,
+      animation: 'updateLight 0.5s',
     },
     animationDark: {
       willChange: 'auto',
       translateZ: 0,
-      animation: `updateLight 0.5s`,
+      animation: 'updateDark 0.5s',
     },
     collapsedSubnodes: {
       color: theme.palette.text.secondary,
     },
     displayBlock: {
-      display: 'block',
+      display: 'block' as 'block',
     },
     node: {
-      display: 'block',
-      marginLeft: '10px',
-      '&:hover': {
-        backgroundColor: theme.palette.type === 'light' ? blueGrey[100] : theme.palette.primary.light,
-      },
+      display: 'block' as 'block',
+      width: '100%',
+      overflow: 'hidden' as 'hidden',
+      textOverflow: 'ellipsis' as 'ellipsis',
+      whiteSpace: 'nowrap' as 'nowrap',
+      padding: '1px 0px 0px 0px',
     },
     topicSelect: {
       float: 'right' as 'right',
@@ -44,9 +45,12 @@ export const styles = (theme: Theme) => {
       lineHeight: '1em',
       display: 'inline-block' as 'inline-block',
       whiteSpace: 'nowrap' as 'nowrap',
-      padding: '1px 4px 0px 4px',
       height: '14px',
-      margin: '1px 0px 2px 0px',
+      padding: '1px 4px 0 4px',
+      margin: '1px 0px',
+      '&:hover': {
+        backgroundColor: theme.palette.type === 'light' ? blueGrey[100] : theme.palette.primary.light,
+      },
     },
   }
 }

app/src/components/Tree/index.tsx

@@ -1,14 +1,13 @@
 import * as q from '../../../../backend/src/Model'
-import React, { useCallback } from 'react'
+import React from 'react'
 import TreeNode from './TreeNode'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
+import { KeyCodes } from '../../utils/KeyCodes'
 import { SettingsState } from '../../reducers/Settings'
 import { TopicViewModel } from '../../model/TopicViewModel'
 import { treeActions } from '../../actions'
-import { KeyCodes } from '../../utils/KeyCodes'
-
 const MovingAverage = require('moving-average')
 
 const averagingTimeInterval = 10 * 1000
@@ -70,17 +69,17 @@ class TreeComponent extends React.PureComponent<Props, State> {
   public componentWillReceiveProps(nextProps: Props) {
     if (this.props.tree !== nextProps.tree) {
       if (this.props.tree) {
-        this.props.tree.didReceive.unsubscribe(this.throttledTreeUpdate)
+        this.props.tree.didUpdate.unsubscribe(this.throttledTreeUpdate)
       }
       if (nextProps.tree) {
-        nextProps.tree.didReceive.subscribe(this.throttledTreeUpdate)
+        nextProps.tree.didUpdate.subscribe(this.throttledTreeUpdate)
       }
       this.setState(this.state)
     }
   }
 
   public componentWillUnmount() {
-    this.props.tree && this.props.tree.didReceive.unsubscribe(this.throttledTreeUpdate)
+    this.props.tree && this.props.tree.didUpdate.unsubscribe(this.throttledTreeUpdate)
   }
 
   public throttledTreeUpdate = () => {
@@ -99,9 +98,6 @@ class TreeComponent extends React.PureComponent<Props, State> {
           this.updateTimer = undefined
           this.renderTime = performance.now()
 
-          if (!this.props.paused && this.props.tree) {
-            this.props.tree.applyUnmergedChanges()
-          }
           window.requestIdleCallback(
             () => {
               this.setState({ lastUpdate: this.renderTime })

app/src/components/UpdateNotifier.tsx

@@ -45,7 +45,7 @@ interface State {
   newerVersions: Array<GithubRelease>
 }
 
-class UpdateNotifier extends React.Component<Props, State> {
+class UpdateNotifier extends React.PureComponent<Props, State> {
   constructor(props: any) {
     super(props)
     this.state = { newerVersions: [] }

app/src/components/helper/ConnectionHealthIndicator.tsx

@@ -37,7 +37,7 @@ interface Props {
   withBackground?: boolean
 }
 
-class ConnectionHealthIndicator extends React.Component<Props, {}> {
+class ConnectionHealthIndicator extends React.PureComponent<Props, {}> {
   constructor(props: any) {
     super(props)
   }

app/src/components/helper/Copy.tsx

@@ -19,7 +19,7 @@ interface State {
   didCopy: boolean
 }
 
-class Copy extends React.Component<Props, State> {
+class Copy extends React.PureComponent<Props, State> {
   constructor(props: Props) {
     super(props)
     this.state = { didCopy: false }
@@ -44,13 +44,9 @@ class Copy extends React.Component<Props, State> {
     )
 
     return (
-      <span>
-        <span style={{ fontSize: '16px' }}>
-          <CustomIconButton onClick={this.handleClick} tooltip="Copy to clipboard">
-            {icon}
-          </CustomIconButton>
-        </span>
-      </span>
+      <CustomIconButton onClick={this.handleClick} tooltip="Copy to clipboard">
+        <div style={{ marginTop: '2px' }}>{icon}</div>
+      </CustomIconButton>
     )
   }
 }

app/src/components/helper/CustomIconButton.tsx

@@ -16,12 +16,15 @@ const styles = (theme: Theme) => ({
     width: '32px',
     height: '32px',
   },
+  tooltip: {
+    marginTop: '-16px',
+  },
   label: {
     marginTop: '-2px',
   },
 })
 
-class CustomIconButton extends React.Component<Props, {}> {
+class CustomIconButton extends React.PureComponent<Props, {}> {
   constructor(props: Props) {
     super(props)
   }
@@ -34,8 +37,8 @@ class CustomIconButton extends React.Component<Props, {}> {
   public render() {
     return (
       <IconButton className={this.props.classes.button} style={this.props.style} onClick={this.onClick}>
-        <Tooltip title={this.props.tooltip} className={this.props.classes.label}>
-          <span>{this.props.children}</span>
+        <Tooltip title={this.props.tooltip} classes={{ popper: this.props.classes.tooltip }}>
+          <span className={this.props.classes.label}>{this.props.children}</span>
         </Tooltip>
       </IconButton>
     )

app/src/components/helper/DateFormatter.tsx

@@ -5,6 +5,7 @@ import { connect } from 'react-redux'
 
 interface Props {
   date: Date
+  timeFirst?: boolean
   overrideLocale?: string
   locale?: string
   intervalSince?: Date
@@ -16,7 +17,7 @@ const unitMapping = {
   h: 'hours',
 }
 
-class DateFormatter extends React.Component<Props, {}> {
+class DateFormatter extends React.PureComponent<Props, {}> {
   private intervalSince(intervalSince: Date) {
     const interval = intervalSince.getTime() - this.props.date.getTime()
     const unit = this.unitForInterval(interval)
@@ -30,7 +31,7 @@ class DateFormatter extends React.Component<Props, {}> {
   private localizedDate(locale: string) {
     return moment(this.props.date)
       .locale(locale)
-      .format('L LTS')
+      .format(this.props.timeFirst ? 'LTS L' : 'L LTS')
   }
 
   private unitForInterval(milliseconds: number) {

app/src/components/helper/NumberFormatter.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { AppState } from '../../reducers'
+import { connect } from 'react-redux'
+import { Tooltip } from '@material-ui/core'
+
+function NumberFormatter(props: { locale: string; value: number; grouping?: boolean }) {
+  let formatter: Intl.NumberFormat | undefined
+
+  const formatterOptions = { useGrouping: Boolean(props.grouping) }
+  const defaultFormatter = Intl.NumberFormat(undefined, formatterOptions)
+
+  try {
+    formatter = Intl.NumberFormat(props.locale, formatterOptions)
+  } catch {
+    // locale unknown
+  }
+
+  try {
+    const formatted = (formatter || defaultFormatter).format(props.value)
+
+    return (
+      <Tooltip title={props.value}>
+        <span>{formatted}</span>
+      </Tooltip>
+    )
+  } catch {
+    // localization fail, use fallback
+  }
+
+  return <span>props.value</span>
+}
+
+const mapStateToProps = (state: AppState) => {
+  return {
+    locale: state.settings.get('timeLocale'),
+  }
+}
+
+export default connect(mapStateToProps)(NumberFormatter)

app/src/components/helper/usePollingToFetchTreeNode.tsx

@@ -6,6 +6,17 @@ import { useState, useEffect } from 'react'
  */
 export function usePollingToFetchTreeNode(tree: q.Tree<any> | undefined, path: string) {
   const [treeNode, setTreeNode] = useState<q.TreeNode<any> | undefined>()
+  useEffect(() => {
+    // If treeNode has been destroyed set treeNode to undefined
+    if (treeNode) {
+      const resetTreeNodeCallback = () => setTreeNode(undefined)
+      treeNode.onDestroy.subscribe(resetTreeNodeCallback)
+
+      return function cleanup() {
+        treeNode.onDestroy.unsubscribe(resetTreeNodeCallback)
+      }
+    }
+  }, [treeNode])
 
   function pollUntilTreeNodeHasBeenFound() {
     if (!tree) {
@@ -13,7 +24,7 @@ export function usePollingToFetchTreeNode(tree: q.Tree<any> | undefined, path: s
     }
 
     const initialTreeNode = tree.findNode(path)
-    if (initialTreeNode) {
+    if (initialTreeNode && initialTreeNode !== treeNode) {
       setTreeNode(initialTreeNode)
       return
     }
@@ -33,6 +44,6 @@ export function usePollingToFetchTreeNode(tree: q.Tree<any> | undefined, path: s
     }
   }
 
-  useEffect(pollUntilTreeNodeHasBeenFound, [tree])
+  useEffect(pollUntilTreeNodeHasBeenFound, [tree, treeNode, path])
   return treeNode
 }

app/src/components/helper/useUpdateComponentWhenNodeUpdates.tsx

@@ -0,0 +1,17 @@
+import * as q from '../../../../backend/src/Model'
+import { useEffect, useState } from 'react'
+
+export function useUpdateComponentWhenNodeUpdates(node?: q.TreeNode<any>): number {
+  const [lastUpdate, setLastUpdate] = useState(0)
+  useEffect(() => {
+    if (!node) {
+      return
+    }
+    const updateComponent = () => setLastUpdate(Date.now())
+    node.onMerge.subscribe(updateComponent)
+    return function cleanup() {
+      node.onMerge.unsubscribe(updateComponent)
+    }
+  }, [node])
+  return lastUpdate
+}

app/src/reducers/Charts.ts

@@ -1,4 +1,3 @@
-import { Action } from 'redux'
 import { createReducer } from './lib'
 import { Record, List } from 'immutable'
 import MoveUp from '../components/ChartPanel/ChartSettings/MoveUp'

app/src/reducers/Connection.ts

@@ -1,5 +1,4 @@
 import * as q from '../../../backend/src/Model'
-import { Action } from 'redux'
 import { createReducer } from './lib'
 import { MqttOptions } from '../../../backend/src/DataSource'
 import { TopicViewModel } from '../model/TopicViewModel'

app/src/reducers/ConnectionManager.ts

@@ -1,4 +1,3 @@
-import { Action } from 'redux'
 import { ConnectionOptions } from '../model/ConnectionOptions'
 import { createReducer } from './lib'
 
@@ -187,10 +186,29 @@ function deleteConnection(state: ConnectionManagerState, action: DeleteConnectio
 
 function updateConnection(state: ConnectionManagerState, action: UpdateConnection): ConnectionManagerState {
   let connection = state.connections[action.connectionId]
+  let changeSet = action.changeSet
+
+  // Reset empty username to undefined
+  if (changeSet.username !== undefined) {
+    changeSet = {
+      changeSet,
+      username: changeSet.username === '' ? undefined : changeSet.username,
+    }
+  }
+
+  // Reset empty password to undefined
+  if (changeSet.password !== undefined) {
+    changeSet = {
+      changeSet,
+      username: changeSet.password === '' ? undefined : changeSet.password,
+    }
+  }
+
   connection = {
     ...connection,
-    ...action.changeSet,
+    ...changeSet,
   }
+
   return {
     ...state,
     connections: {

app/src/reducers/Global.ts

@@ -9,6 +9,14 @@ export enum ActionTypes {
   showNotification = 'SHOW_NOTIFICATION',
   didLaunch = 'DID_LAUNCH',
   toggleSettingsVisibility = 'TOGGLE_SETTINGS_VISIBILITY',
+  requestConfirmation = 'REQUEST_CONFIRMATION',
+  removeConfirmationRequest = 'REMOVE_CONFIRMATION_REQUEST',
+}
+
+export interface ConfirmationRequest {
+  inquiry: string
+  title: string
+  callback: (confirmed: boolean) => void
 }
 
 export interface GlobalAction extends Action {
@@ -17,6 +25,7 @@ export interface GlobalAction extends Action {
   showUpdateDetails?: boolean
   error?: string
   notification?: string
+  confirmationRequest?: ConfirmationRequest
 }
 
 interface GlobalStateInterface {
@@ -26,6 +35,7 @@ interface GlobalStateInterface {
   notification?: string
   launching: boolean
   settingsVisible: boolean
+  confirmationRequests: Array<ConfirmationRequest>
 }
 
 export type GlobalState = Record<GlobalStateInterface>
@@ -37,6 +47,7 @@ const initialStateFactory = Record<GlobalStateInterface>({
   notification: undefined,
   launching: true,
   settingsVisible: false,
+  confirmationRequests: [],
 })
 
 export const globalState: Reducer<Record<GlobalStateInterface>, GlobalAction> = (
@@ -67,6 +78,21 @@ export const globalState: Reducer<Record<GlobalStateInterface>, GlobalAction> =
       }
       return state.set('showUpdateDetails', action.showUpdateDetails)
 
+    case ActionTypes.requestConfirmation:
+      if (action.confirmationRequest === undefined) {
+        return state
+      }
+      return state.set('confirmationRequests', [...state.get('confirmationRequests'), action.confirmationRequest])
+
+    case ActionTypes.removeConfirmationRequest:
+      if (action.confirmationRequest === undefined) {
+        return state
+      }
+      return state.set(
+        'confirmationRequests',
+        state.get('confirmationRequests').filter(a => a !== action.confirmationRequest)
+      )
+
     default:
       return state
   }

app/src/reducers/Publish.ts

@@ -1,4 +1,3 @@
-import { Action } from 'redux'
 import { createReducer } from './lib'
 
 export interface PublishState {

app/src/reducers/Sidebar.ts

@@ -1,5 +1,5 @@
 import * as q from '../../../backend/src/Model'
-import { Action } from 'redux'
+import { Action as ReduxAction } from 'redux'
 import { createReducer } from './lib'
 import { Record } from 'immutable'
 
@@ -11,7 +11,8 @@ const initialStateFactory = Record<SidebarModel>({
   compareMessage: undefined,
 })
 
-export type Action = SetCompareMessage
+export type Action = SetCompareMessage | ResetStore
+
 export enum ActionTypes {
   SIDEBAR_SET_COMPARE_MESSAGE = 'SIDEBAR_SET_COMPARE_MESSAGE',
   SIDEBAR_RESET_STORE = 'SIDEBAR_RESET_STORE',
@@ -20,7 +21,7 @@ export enum ActionTypes {
 export type SidebarState = Record<SidebarModel>
 
 const actions: {
-  [s: string]: (state: SidebarState, action: Action) => SidebarState
+  [s: string]: (state: SidebarState, action: ReduxAction) => SidebarState
 } = {
   SIDEBAR_SET_COMPARE_MESSAGE: setCompareMessage,
   SIDEBAR_RESET_STORE: resetStore,

app/src/reducers/Tree.ts

@@ -1,5 +1,5 @@
 import * as q from '../../../backend/src/Model'
-import { Action } from 'redux'
+import { Action as ReduxAction } from 'redux'
 import { createReducer } from './lib'
 import { Record } from 'immutable'
 import { TopicViewModel } from '../model/TopicViewModel'
@@ -50,7 +50,7 @@ const setPaused = (pause: boolean) => (state: TreeState, action: ShowTree): Tree
 }
 
 const actions: {
-  [s: string]: (state: TreeState, action: Action) => TreeState
+  [s: string]: (state: TreeState, action: ReduxAction) => TreeState
 } = {
   TREE_SHOW_TREE: showTree,
   TREE_SELECT_TOPIC: selectTopic,

backend/src/Model/RingBuffer.ts

@@ -1,18 +1,20 @@
-interface Lengthwise {
+export interface MemoryConsumptionExpressedByLength {
   length: number
 }
 
-export class RingBuffer<T extends Lengthwise> {
-  private capacity: number
-  private maxItems: number
+export class RingBuffer<T extends MemoryConsumptionExpressedByLength> {
+  public capacity: number
+  public maxItems: number
+  public compactionFactor: number
+  protected items: Array<T> = []
+  protected start: number = 0
+  protected end: number = 0
   private usage: number = 0
-  private items: Array<T> = []
-  private start: number = 0
-  private end: number = 0
 
-  constructor(capacity: number, maxItems = Infinity, ringBuffer?: RingBuffer<T>) {
+  constructor(capacity: number, maxItems = Infinity, compactionFactor: number = 10, ringBuffer?: RingBuffer<T>) {
     this.capacity = capacity
     this.maxItems = maxItems
+    this.compactionFactor = compactionFactor
 
     if (ringBuffer) {
       this.items = ringBuffer.toArray()
@@ -31,6 +33,12 @@ export class RingBuffer<T extends Lengthwise> {
     }
   }
 
+  private compact() {
+    this.items = this.toArray()
+    this.start = 0
+    this.end = this.items.length
+  }
+
   private freeSpace(): number {
     return this.capacity - this.usage
   }
@@ -60,7 +68,7 @@ export class RingBuffer<T extends Lengthwise> {
   }
 
   public clone(): RingBuffer<T> {
-    return new RingBuffer(this.capacity, this.maxItems, this)
+    return new RingBuffer(this.capacity, this.maxItems, this.compactionFactor, this)
   }
 
   public toArray() {
@@ -71,11 +79,19 @@ export class RingBuffer<T extends Lengthwise> {
     return this.end - this.start
   }
 
+  public last(): T | undefined {
+    return this.items[this.end - 1]
+  }
+
   public add(item: T) {
     const size = item.length
     this.enforceCapacityConstraints(size)
     this.usage += size
     this.items[this.end] = item
     this.end += 1
+
+    if (this.end > 10 * this.maxItems) {
+      this.compact()
+    }
   }
 }

backend/src/Model/Tree.ts

@@ -12,7 +12,11 @@ export class Tree<ViewModel extends Destroyable> extends TreeNode<ViewModel> {
   public isTree = true
   private cachedHash = `${Math.random()}`
   private unmergedMessages: ChangeBuffer = new ChangeBuffer()
-  public didReceive = new EventDispatcher<void>()
+  public didUpdate = new EventDispatcher<void>()
+
+  public updateInterval: any
+  private paused: boolean = false
+  private applyChangesHasCompleted = true
 
   constructor() {
     super(undefined, undefined)
@@ -20,14 +24,27 @@ export class Tree<ViewModel extends Destroyable> extends TreeNode<ViewModel> {
 
   private handleNewData = (msg: MqttMessage) => {
     this.unmergedMessages.push(msg)
-    this.didReceive.dispatch()
+  }
+
+  private runUpdates() {
+    this.updateInterval = setInterval(() => {
+      if (!this.paused && this.applyChangesHasCompleted) {
+        this.applyChangesHasCompleted = false
+        if ((window as any).requestIdleCallback) {
+          ;(window as any).requestIdleCallback(() => this.applyUnmergedChanges(), { timeout: 500 })
+        } else {
+          this.applyUnmergedChanges()
+        }
+      }
+    }, 300)
   }
 
   public destroy() {
     super.destroy()
+    this.updateInterval && clearInterval(this.updateInterval)
     this.updateSource && this.updateSource.unsubscribe(this.subscriptionEvent, this.handleNewData)
     this.updateSource = undefined
-    this.didReceive.removeAllListeners()
+    this.didUpdate.removeAllListeners()
   }
 
   public updateWithConnection(
@@ -41,12 +58,21 @@ export class Tree<ViewModel extends Destroyable> extends TreeNode<ViewModel> {
 
     this.subscriptionEvent = makeConnectionMessageEvent(connectionId)
     this.updateSource.subscribe(this.subscriptionEvent, this.handleNewData)
+    this.runUpdates()
   }
 
   public hash() {
     return this.cachedHash
   }
 
+  public pause() {
+    this.paused = true
+  }
+
+  public resume() {
+    this.paused = false
+  }
+
   public applyUnmergedChanges() {
     this.unmergedMessages.popAll().forEach(bufferedItem => {
       const edges = bufferedItem.message.topic.split('/')
@@ -61,6 +87,9 @@ export class Tree<ViewModel extends Destroyable> extends TreeNode<ViewModel> {
         this.updateWithNode(node.firstNode())
       }
     })
+
+    this.didUpdate.dispatch()
+    this.applyChangesHasCompleted = true
   }
 
   public unmergedChanges(): ChangeBuffer {

backend/src/Model/TreeNode.ts

@@ -53,8 +53,7 @@ export class TreeNode<ViewModel extends Destroyable> {
   }
 
   private isTopicEmptyLeaf() {
-    const hasNoMessage = !this.message || !this.message.value || this.message.value.length === 0
-    return hasNoMessage && this.isLeaf()
+    return !this.hasMessage() && this.isLeaf()
   }
 
   private isLeaf() {
@@ -105,6 +104,10 @@ export class TreeNode<ViewModel extends Destroyable> {
     }
   }
 
+  public hasMessage() {
+    return this.message && this.message.value && this.message.value.length !== 0
+  }
+
   public destroy() {
     this.onDestroy.dispatch(this)
     this.onDestroy.removeAllListeners()
@@ -221,7 +224,7 @@ export class TreeNode<ViewModel extends Destroyable> {
     if (this.cachedChildTopicCount === undefined) {
       this.cachedChildTopicCount = this.edgeArray
         .map(e => e.target.childTopicCount())
-        .reduce((a, b) => a + b, this.edgeArray.length === 0 ? 1 : 0)
+        .reduce((a, b) => a + b, this.hasMessage() ? 1 : 0)
     }
 
     return this.cachedChildTopicCount as number

backend/src/Model/spec/RingBuffer.spec.ts

@@ -16,6 +16,19 @@ describe('RingBuffer', () => {
     expect(b.toArray()[1]).to.eq('world')
   })
 
+  it('should compact array', () => {
+    const b = new RingBuffer(Infinity, 1, 3)
+    b.add('1')
+    expect((b as any).items[0]).to.eq('1')
+    b.add('2')
+    expect((b as any).items[0]).to.eq(undefined)
+    expect((b as any).items[1]).to.eq('2')
+
+    // Expect the third item to be at index 0
+    b.add('3')
+    expect((b as any).items[2]).to.eq('3')
+  })
+
   it('should remove old values if buffer size is reached', () => {
     const b = new RingBuffer(6)
     b.add('hello')

package.json

@@ -1,6 +1,6 @@
 {
   "name": "MQTT-Explorer",
-  "version": "0.3.2",
+  "version": "0.3.7",
   "description": "Explore your message queues",
   "main": "dist/src/electron.js",
   "scripts": {
@@ -71,34 +71,32 @@
     "@types/fs-extra": "^7.0.0",
     "@types/lowdb": "^1.0.6",
     "@types/mime": "^2.0.0",
-    "@types/mocha": "^5.2.5",
+    "@types/mocha": "^5.2.7",
     "@types/mustache": "^0.8.32",
-    "@types/node": "^12.0.4",
+    "@types/node": "^12.6.8",
     "@types/semver": "^6.0.0",
     "@types/sha1": "^1.1.1",
     "builder-util-runtime": "^8.2.5",
     "chai": "^4.2.0",
-    "cspell": "^4.0.23",
-    "electron": "5.0.5",
-    "electron-builder": "21.0.6",
-    "fs-extra": "^8.0.1",
-    "mime": "^2.4.0",
-    "mocha": "^6.1.4",
+    "cspell": "^4.0.28",
+    "electron": "^7",
+    "electron-builder": "^22.1",
+    "mocha": "7.0.0",
     "mustache": "^3.0.1",
     "npm-run-all": "^4.1.5",
     "nyc": "^14.1.1",
     "prettier": "1.18.2",
     "redux-thunk": "^2.3.0",
     "source-map-support": "^0.5.9",
-    "spectron": "^6.0.0",
+    "spectron": "9",
     "ts-node": "^8.2.0",
-    "tslint": "^5.15.0",
+    "tslint": "^5.18.0",
     "tslint-config-airbnb": "^5.11.1",
     "tslint-react": "^4.0.0",
     "tslint-react-recommended": "^1.0.15",
     "tslint-strict-null-checks": "^1.0.1",
     "typescript": "^3.2.2",
-    "webdriverio": "5.5"
+    "webdriverio": "5.18"
   },
   "dependencies": {
     "about-window": "^1.12.1",
@@ -107,9 +105,11 @@
     "electron-log": "^3.0.6",
     "electron-telemetry": "git+https://github.com/thomasnordquist/electron-telemetry.git#dist",
     "electron-updater": "^4.0.6",
+    "fs-extra": "^8.0.1",
     "js-base64": "^2.5.1",
     "json-to-ast": "^2.1.0",
     "lowdb": "^1.0.0",
+    "mime": "^2.4.4",
     "mqtt": "^3.0.0",
     "sha1": "^1.1.1",
     "yarn-run-all": "^3.1.1"

package.ts

@@ -71,8 +71,8 @@ async function executeBuild() {
       await buildWithOptions(linuxSnap, { platform: 'linux', package: 'snap' })
       break
     case 'mac':
-      await buildWithOptions(mac, { platform: 'mac', package: 'mas' })
       await buildWithOptions(mac, { platform: 'mac', package: 'dmg' })
+      await buildWithOptions(mac, { platform: 'mac', package: 'mas' })
       await buildWithOptions(mac, { platform: 'mac', package: 'zip' })
       break
     default:

src/MenuTemplate.ts

@@ -23,7 +23,7 @@ const applicationMenu: MenuItemConstructorOptions = {
     {
       label: 'Dev Tools',
       accelerator: 'CmdOrCtrl+Alt+I',
-      role: 'toggledevtools' as 'toggledevtools',
+      role: 'toggleDevTools',
     },
     {
       label: 'Quit',
@@ -69,7 +69,7 @@ const editMenu: MenuItemConstructorOptions = {
     {
       label: 'Select All',
       accelerator: 'CmdOrCtrl+A',
-      role: 'selectall',
+      role: 'selectAll',
     },
   ],
 }

src/electron.ts

@@ -25,7 +25,7 @@ log.info('App starting...')
 const connectionManager = new ConnectionManager()
 connectionManager.manageConnections()
 
-const configStorage = new ConfigStorage(path.join(app.getPath('appData'), app.getName(), 'settings.json'))
+const configStorage = new ConfigStorage(path.join(app.getPath('appData'), app.name, 'settings.json'))
 configStorage.init()
 
 // Keep a global reference of the window object, if you don't, the window will

src/registerCrashReporter.ts

@@ -4,7 +4,7 @@ export function registerCrashReporter() {
   crashReporter.start({
     productName: 'MQTT Explorer',
     companyName: 'thomasnordquist',
-    submitURL: 'http://localhost:3000/app/crash/mqttexplorer',
+    submitURL: 'http://app-telemetry.t7n.de/app/crash/mqttexplorer',
     uploadToServer: true,
   })
 }

src/spec/demoVideo.ts

@@ -25,13 +25,12 @@ process.on('unhandledRejection', (error: Error | any) => {
 
 const runningUiTestOnCi = os.platform() === 'darwin' ? [] : ['--runningUiTestOnCi']
 
-console.log(`${__dirname}/../../../node_modules/.bin/electron`)
 const options = {
   host: '127.0.0.1', // Use localhost as chrome driver server
   port: 9515, // "9515" is the port opened by chrome driver.
   capabilities: {
-    browserName: 'electron',
-    chromeOptions: {
+    browserName: 'chrome',
+    'goog:chromeOptions': {
       binary: `${__dirname}/../../../node_modules/.bin/electron`,
       args: [
         `--app=${__dirname}/../../..`,
@@ -40,8 +39,8 @@ const options = {
         '--disable-dev-shm-usage',
         '--disable-extensions',
       ].concat(runningUiTestOnCi),
+      windowTypes: ['app', 'webview'],
     },
-    windowTypes: ['app', 'webview'],
   },
 }
 
@@ -55,6 +54,7 @@ async function doStuff() {
 
   // Wait for Username input to be visible
   await browser.$('//label[contains(text(), "Username")]/..//input')
+
   const scenes = new SceneBuilder()
   await scenes.record('connect', async () => {
     await connectTo('127.0.0.1', browser)

src/spec/leakTest.ts

@@ -1,4 +1,5 @@
 import * as os from 'os'
+import * as webdriverio from 'webdriverio'
 import mockMqtt, { stopUpdates as stopMqttUpdates } from './mock-mqtt'
 import { ClassNameMapping, countInstancesOf, createFakeMousePointer, getHeapDump, setFast, sleep } from './util'
 import { clearSearch, searchTree } from './scenarios/searchTree'
@@ -12,13 +13,12 @@ process.on('unhandledRejection', (error: Error | any) => {
 
 const runningUiTestOnCi = os.platform() === 'darwin' ? [] : ['--runningUiTestOnCi']
 
-console.log(`${__dirname}/../../../node_modules/.bin/electron`)
 const options = {
   host: '127.0.0.1', // Use localhost as chrome driver server
   port: 9515, // "9515" is the port opened by chrome driver.
   capabilities: {
-    browserName: 'electron',
-    chromeOptions: {
+    browserName: 'chrome',
+    'goog:chromeOptions': {
       binary: `${__dirname}/../../../node_modules/.bin/electron`,
       args: [
         `--app=${__dirname}/../../..`,
@@ -27,8 +27,8 @@ const options = {
         '--disable-dev-shm-usage',
         '--disable-extensions',
       ].concat(runningUiTestOnCi),
+      windowTypes: ['app', 'webview'],
     },
-    windowTypes: ['app', 'webview'],
   },
 }
 
@@ -37,7 +37,7 @@ async function doStuff() {
   await mockMqtt()
   console.log('start webdriver')
 
-  const browser = await WebdriverIO.remote(options)
+  const browser = await webdriverio.remote(options)
   setFast()
   await createFakeMousePointer(browser)
 

src/spec/mock-mqtt.ts

@@ -103,6 +103,7 @@ function generateData(client: mqtt.MqttClient) {
   intervals.push(
     setInterval(() => client.publish('kitchen/temperature', temperature(), { retain: true, qos: 0 }), 1500)
   )
+
   intervals.push(
     setInterval(() => client.publish('kitchen/humidity', temperature(60, -5, 0), { retain: true, qos: 0 }), 1800)
   )

src/spec/scenarios/copyValueToClipboard.ts

@@ -1,7 +1,7 @@
-import { Browser, Element } from 'webdriverio'
-import { clickOn, expandTopic, sleep, writeText } from '../util'
+import { Browser } from 'webdriverio'
+import { clickOn } from '../util'
 
 export async function copyValueToClipboard(browser: Browser) {
-  const copyButton = await browser.$('//p[contains(text(), "Value")]//button')
+  const copyButton = await browser.$('//span[contains(text(), "Value")]//button')
   await clickOn(copyButton, browser, 1)
 }

src/spec/scenarios/publishTopic.ts

@@ -11,7 +11,7 @@ import {
 
 export async function publishTopic(browser: Browser) {
   await expandTopic('kitchen/lamp/state', browser)
-  const topicInput = await browser.$('//textarea[contains(text(),"kitchen/lamp/state")][1]')
+  const topicInput = await browser.$('//input[contains(@value,"kitchen/lamp/state")][1]')
   await clickOn(topicInput, browser)
   await deleteTextWithBackspaces(topicInput, browser, 120, 5)
   await writeText('set', browser, 300)
@@ -35,9 +35,5 @@ export async function publishTopic(browser: Browser) {
 }
 
 async function writeTextPayload(payloadInput: any, text: string) {
-  const chars = text.split('')
-  for (const char of chars) {
-    await payloadInput.setValue(char)
-    await sleep(10)
-  }
+  await payloadInput.setValue(text)
 }

src/spec/scenarios/showMenu.ts

@@ -1,5 +1,5 @@
-import { Browser, Element } from 'webdriverio'
-import { clickOn, expandTopic, moveToCenterOfElement, showText, sleep, writeText } from '../util'
+import { Browser } from 'webdriverio'
+import { clickOn, showText, sleep } from '../util'
 
 export async function showMenu(browser: Browser) {
   const menuButton = await browser.$('//button[contains(@aria-label, "Menu")]')
@@ -11,7 +11,7 @@ export async function showMenu(browser: Browser) {
 
   await browser.saveScreenshot('screen4.png')
 
-  const topicOrder = await browser.$('#select-node-order')
+  const topicOrder = await browser.$('//input[@name="node-order"]/../div')
   await clickOn(topicOrder, browser)
   await sleep(1000)
 

src/spec/scenarios/showNumericPlot.ts

@@ -6,13 +6,15 @@ export async function showNumericPlot(browser: Browser) {
   let heater = await valuePreviewGuttersShowChartIcon('heater', browser)
   await moveToCenterOfElement(heater, browser)
   await sleep(1000)
-  // Refocus
+  // Refocus and click
   heater = await valuePreviewGuttersShowChartIcon('heater', browser)
   await heater.click()
 
   await sleep(1000)
   let temperature = await valuePreviewGuttersShowChartIcon('temperature', browser)
   await moveToCenterOfElement(temperature, browser)
+  await sleep(1000)
+  // Refocus and click
   temperature = await valuePreviewGuttersShowChartIcon('temperature', browser)
   await temperature.click()
 
@@ -38,9 +40,6 @@ export async function showNumericPlot(browser: Browser) {
   await expandTopic('livingroom/temperature', browser)
 
   await clickOnHistory(browser)
-  await browser.saveScreenshot('screen2.png')
-  await sleep(1000)
-  await expandTopic('livingroom/humidity', browser)
 }
 
 async function valuePreviewGuttersShowChartIcon(name: string, browser: Browser) {
@@ -71,6 +70,6 @@ async function removeChart(name: string, browser: Browser) {
 }
 
 async function clickOnMenuPoint(name: string, browser: Browser) {
-  const item = await browser.$(`//li[contains(text(), "${name}")]`)
+  const item = await browser.$(`//li/span[contains(text(), "${name}")]`)
   return clickOn(item, browser)
 }

src/spec/util/index.ts

@@ -40,8 +40,10 @@ export async function deleteTextWithBackspaces(element: Element, browser: Browse
 export async function setTextInInput(name: string, text: string, browser: Browser) {
   const input = await browser.$(`//label[contains(text(), "${name}")]/..//input`)
   await clickOn(input, browser, 1)
-  await input.clearValue()
-  await browser.keys(text)
+  await browser.$(`//label[contains(text(), "${name}")]/..//input`)
+
+  await deleteTextWithBackspaces(input, browser)
+  await input.setValue(text)
 }
 
 export async function moveToCenterOfElement(element: Element, browser: Browser) {