Add clear chart button and improve chart menu look&feel

app/src/components/ChartPanel/TopicChart.tsx

@@ -1,16 +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'
-import { RingBuffer } from '../../../../backend/src/Model'
 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>
@@ -24,14 +39,14 @@ interface Props {
  */
 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) => {
@@ -52,12 +67,21 @@ function useMessageSubscriptionToUpdate(treeNode?: q.TreeNode<any>) {
   return messageHistory
 }
 
+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(() => {
+  const togglePause = useCallback(() => {
     if (!treeNode) {
       return
     }
@@ -69,6 +93,8 @@ function TopicChart(props: Props) {
     props.actions.chart.removeChart(props.parameters)
   }, [props.parameters])
 
+  const resetData = useResetDataCallback(messageHistory)
+
   return (
     <Paper
       style={{ padding: '8px' }}
@@ -79,6 +105,7 @@ function TopicChart(props: Props) {
         <div style={{ display: 'flex', flexGrow: 1, overflow: 'hidden' }}>
           <ChartTitle parameters={parameters} />
           <ChartActions
+            resetDataAction={resetData}
             parameters={parameters}
             onRemove={onRemove}
             paused={Boolean(frozenHistory)}
@@ -91,7 +118,7 @@ function TopicChart(props: Props) {
         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 RingBuffer<q.Message>(1)}
+        history={frozenHistory || messageHistory || new ClearableMessageBuffer(1)}
         dotPath={parameters.dotPath}
       />
     </Paper>
@@ -109,4 +136,4 @@ const mapDispatchToProps = (dispatch: any) => {
 export default connect(
   undefined,
   mapDispatchToProps
-)(TopicChart)
+)(memo(TopicChart))