Fix plot pause function

app/src/components/ChartPanel/Chart.tsx

@@ -19,7 +19,7 @@ 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)
@@ -56,11 +56,12 @@ function Chart(props: Props) {
   const messageHistory = useMessageSubscriptionToUpdate(treeNode)
 
   const togglePause = React.useCallback(() => {
-    if (!props.treeNode) {
+    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)

app/src/components/Sidebar/PlotHistory.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import DateFormatter from '../helper/DateFormatter'
 import { default as ReactResizeDetector } from 'react-resize-detector'
 import { PlotCurveTypes } from '../../reducers/Charts'
@@ -6,8 +6,10 @@ 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')
+import Portal from '@material-ui/core/Portal'
+import { useCustomXDomain } from './useCustomXDomain'
 
-interface Props {
+export interface Props {
   data: Array<{ x: number; y: number }>
   theme: Theme
   interpolation?: PlotCurveTypes
@@ -53,6 +55,8 @@ export default withTheme((props: Props) => {
     setTooltip({ value })
   }, [])
 
+  const xDomain = useCustomXDomain(props)
+
   return React.useMemo(() => {
     const data = props.data
     const calculatedDomain = domainForData(data)
@@ -60,8 +64,6 @@ export default withTheme((props: Props) => {
       ? [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) {
@@ -87,7 +89,7 @@ export default withTheme((props: Props) => {
         <ReactResizeDetector handleWidth={true} onResize={detectResize} />
       </div>
     )
-  }, [width, props.data, tooltip, props.interpolation, props.range, props.color, props.theme])
+  }, [width, props.data, tooltip, props.interpolation, props.range, props.color, props.theme, xDomain])
 })
 
 function domainForData(data: Array<{ x: number; y: number }>): [number, number] {

app/src/components/TopicPlot.tsx

@@ -49,7 +49,7 @@ function nodeDotPathToHistory(startTime: number | undefined, history: q.MessageH
     .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)
@@ -66,4 +66,4 @@ function render(props: Props) {
   )
 }
 
-export default render
+export default TopicPlot