Improve plot

app/src/components/Sidebar/History.tsx

@@ -13,6 +13,7 @@ interface Props {
   items: HistoryItem[]
   onClick?: (index: number, element: EventTarget) => void
   classes: any
+  contentTypeIndicator?: String
 }
 
 interface State {
@@ -65,6 +66,7 @@ class MessageHistory extends React.Component<Props, State> {
           >
             {this.state.collapsed ? '▶' : '▼'} History
           </Badge>
+          <div style={{ float: 'right' }}>{this.state.collapsed ? this.props.contentTypeIndicator : null}</div>
         </Typography>
         <div style={{ maxHeight: '230px', overflowY: 'scroll'  }}>
           {this.state.collapsed ? null : this.props.children}

app/src/components/Sidebar/MessageHistory.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
 
 import { Theme, withTheme } from '@material-ui/core/styles'
-
+import BarChart from '@material-ui/icons/BarChart'
 import DateFormatter from '../DateFormatter'
 import History from './History'
 import PlotHistory from './PlotHistory'
@@ -55,25 +55,24 @@ class MessageHistory extends React.Component<Props, State> {
       value: message.value,
     }))
 
+    const numericMessages = history.filter(message => !isNaN(message.value))
+    const showPlot = numericMessages.length >= 2
+
     return (
       <div>
         <History
           items={historyElements}
+          contentTypeIndicator={showPlot ? <BarChart /> : null}
           onClick={this.displayMessage}
         >
-          {this.renderPlot(history)}
+          {showPlot ? this.renderPlot(history) : null}
         </History>
       </div>
     )
   }
 
-  public renderPlot(history: q.Message[]) {
+  public renderPlot(numericMessages: q.Message[]) {
-    const numbers = history.filter(message => !isNaN(message.value))
+    return <PlotHistory messages={numericMessages} />
-    if (numbers.length < 3) {
-      return null
-    }
-
-    return <PlotHistory messages={numbers} />
   }
 
   private displayMessage = (index: number, eventTarget: EventTarget) => {

app/src/components/Sidebar/PlotHistory.tsx

@@ -1,4 +1,4 @@
-const { XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries } = require('react-vis')
+const { XYPlot, XAxis, LineMarkSeries, Hint, YAxis, HorizontalGridLines, LineSeries } = require('react-vis')
 import { default as ReactResizeDetector } from 'react-resize-detector'
 
 import * as React from 'react'
@@ -12,6 +12,7 @@ interface Props {
 
 interface Stats {
   width: number
+  value?: any
 }
 
 class PlotHistory extends React.Component<Props, Stats> {
@@ -36,13 +37,30 @@ class PlotHistory extends React.Component<Props, Stats> {
       <div>
         <XYPlot width={this.state.width} height={150}>
           <HorizontalGridLines />
-          <LineSeries data={data} />
           <YAxis />
+          <LineMarkSeries
+            onValueMouseOver={this._rememberValue}
+            onValueMouseOut={this._forgetValue}
+            size={3}
+            data={data}
+            curve="curveCardinal"
+          />
+          {this.state.value ? <Hint value={this.state.value} /> : null}
         </XYPlot>
         <ReactResizeDetector handleWidth={true} onResize={this.resize} />
       </div>
     )
   }
+
+  private _forgetValue = () => {
+    this.setState({
+      value: undefined,
+    })
+  }
+
+  private _rememberValue = (value: any) => {
+    this.setState({ value })
+  }
 }
 
 export default withStyles({}, { withTheme: true })(PlotHistory)