Extract value renderer panel

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

@@ -0,0 +1,91 @@
+import * as q from '../../../../../backend/src/Model'
+import * as React from 'react'
+import BarChart from '@material-ui/icons/BarChart'
+import DateFormatter from '../../helper/DateFormatter'
+import History from '../History'
+import { TopicViewModel } from '../../../TopicViewModel'
+
+const PlotHistory = React.lazy(() => import('./PlotHistory'))
+
+const throttle = require('lodash.throttle')
+
+interface Props {
+  node?: q.TreeNode<TopicViewModel>
+  selected?: q.Message
+  onSelect: (message: q.Message) => void
+}
+
+interface State {
+  displayMessage?: q.Message,
+  anchorEl?: HTMLElement
+}
+
+class MessageHistory extends React.Component<Props, State> {
+  constructor(props: any) {
+    super(props)
+    this.state = { }
+  }
+
+  private updateNode = throttle(() => {
+    this.setState(this.state)
+  }, 300)
+
+  public componentWillReceiveProps(nextProps: Props) {
+    this.props.node && this.props.node.onMessage.unsubscribe(this.updateNode)
+    nextProps.node && nextProps.node.onMessage.subscribe(this.updateNode)
+  }
+
+  public componentDidMount() {
+    this.props.node && this.props.node.onMessage.subscribe(this.updateNode)
+  }
+
+  public componentWillUnMount() {
+    this.props.node && this.props.node.onMessage.unsubscribe(this.updateNode)
+  }
+
+  public render() {
+    const { node } = this.props
+    if (!node) {
+      return null
+    }
+
+    const history = node.messageHistory.toArray()
+    const historyElements = history.reverse().map(message => ({
+      title: <DateFormatter date={message.received} />,
+      value: message.value,
+      selected: message && message === this.props.selected,
+    }))
+
+    const numericMessages = history.filter(message => !isNaN(parseFloat(message.value)))
+    const showPlot = numericMessages.length >= 2
+
+    return (
+      <div>
+        <History
+          items={historyElements}
+          contentTypeIndicator={showPlot ? <BarChart /> : undefined}
+          onClick={this.displayMessage}
+        >
+          {showPlot ? this.renderPlot(numericMessages) : null}
+        </History>
+      </div>
+    )
+  }
+
+  public renderPlot(numericMessages: q.Message[]) {
+    return (
+      <React.Suspense fallback={<div>Loading...</div>}>
+        <PlotHistory messages={numericMessages} />
+      </React.Suspense>
+    )
+  }
+
+  private displayMessage = (index: number, eventTarget: EventTarget) => {
+    const message = this.props.node && this.props.node.messageHistory.toArray().reverse()[index]
+    if (message) {
+      this.props.onSelect(message)
+    }
+  }
+}
+
+export default MessageHistory

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

@@ -0,0 +1,178 @@
+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 Copy from '../../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 ValueRenderer from './ValueRenderer'
+import { AppState } from '../../../reducers'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { settingsActions, sidebarActons } from '../../../actions'
+import { ValueRendererDisplayMode } from '../../../reducers/Settings'
+
+import {
+  Button,
+  ExpansionPanel,
+  ExpansionPanelDetails,
+  ExpansionPanelSummary,
+  Tooltip,
+  Typography,
+  StyleRulesCallback,
+  withStyles,
+  Theme,
+  } from '@material-ui/core'
+
+interface Props {
+  node?: q.TreeNode<any>
+  valueRendererDisplayMode: ValueRendererDisplayMode
+  sidebarActions: typeof sidebarActons
+  settingsActions: typeof settingsActions
+  classes: any
+}
+
+interface State {
+  compareMessage?: q.Message
+}
+
+class Panel extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { }
+  }
+
+  public render() {
+    const { node, classes } = this.props
+    const { detailsStyle, summaryStyle } = this.panelStyle()
+
+    const copyValue = node && node.message ? <Copy value={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.messageMetaInfo()}
+            <div>
+              <React.Suspense fallback={<div>Loading...</div>}>
+                {this.renderValue()}
+              </React.Suspense>
+            </div>
+            <div><MessageHistory onSelect={this.handleMessageHistorySelect} selected={this.state.compareMessage} node={this.props.node} /></div>
+          </ExpansionPanelDetails>
+        </ExpansionPanel>
+    )
+  }
+
+  private renderValue() {
+    const node = this.props.node
+    if (!node || !node.message) {
+      return null
+    }
+
+    return (
+      <ValueRenderer
+        message={node.message}
+        messageHistory={node.messageHistory}
+        compareWith={this.state.compareMessage} />
+    )
+  }
+
+  private messageMetaInfo() {
+    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: '-3px', 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' }}>
+        <div style={{ flex: 6 }}><Typography>QoS: {this.props.node.mqttMessage.qos}</Typography></div>
+        <span style={{ marginTop: '-8px' }}>{this.renderActionButtons()}</span>
+        <div style={{ flex: 8, textAlign: 'center' }}>
+          {this.props.node.mqttMessage.retain ? retainedButton : null}
+        </div>
+        <div style={{ flex: 8, textAlign: 'right' }}><Typography><i><DateFormatter date={this.props.node.message.received} /></i></Typography></div>
+      </div>
+    )
+  }
+
+  private renderActionButtons() {
+    const handleValue = (_e: React.MouseEvent, value: any) => {
+      this.props.settingsActions.setValueDisplayMode(value)
+    }
+
+    return (
+      <ToggleButtonGroup id="valueRendererDisplayMode" value={this.props.valueRendererDisplayMode} exclusive={true} onChange={handleValue}>
+        <ToggleButton value="diff" id="valueRendererDisplayMode-diff">
+          <Tooltip title="Show difference between the current and the last message">
+            <Code />
+          </Tooltip>
+        </ToggleButton>
+        <ToggleButton value="raw" id="valueRendererDisplayMode-raw">
+          <Tooltip title="Raw value">
+            <Reorder />
+          </Tooltip>
+        </ToggleButton>
+      </ToggleButtonGroup>
+    )
+  }
+
+  private panelStyle() {
+    return {
+      detailsStyle: { padding: '0px 16px 8px 8px', display: 'block' },
+      summaryStyle: { minHeight: '0' },
+    }
+  }
+
+  private handleMessageHistorySelect = (message: q.Message) => {
+    if (message !== this.state.compareMessage) {
+      this.setState({ compareMessage: message })
+    } else {
+      this.setState({ compareMessage: undefined })
+    }
+  }
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    sidebarActions: bindActionCreators(sidebarActons, dispatch),
+    settingsActions: bindActionCreators(settingsActions, dispatch),
+  }
+}
+
+const mapStateToProps = (state: AppState) => {
+  return {
+    valueRendererDisplayMode: state.settings.valueRendererDisplayMode,
+    node: state.tree.selectedTopic,
+  }
+}
+
+const styles: StyleRulesCallback<string> = (theme: Theme) => {
+  return {
+    heading: {
+      fontSize: theme.typography.pxToRem(15),
+      fontWeight: theme.typography.fontWeightRegular,
+    },
+  }
+}
+
+export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(Panel))

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

@@ -0,0 +1,72 @@
+import * as q from '../../../../../backend/src/Model'
+import * as React from 'react'
+import DateFormatter from '../../helper/DateFormatter'
+import { default as ReactResizeDetector } from 'react-resize-detector'
+import 'react-vis/dist/style.css'
+const { XYPlot, LineMarkSeries, Hint, YAxis, HorizontalGridLines } = require('react-vis')
+
+interface Props {
+  messages: q.Message[]
+}
+
+interface Stats {
+  width: number
+  value?: any
+}
+
+class PlotHistory extends React.Component<Props, Stats> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { width: 300 }
+  }
+
+  private resize = (width: number, height: number) => {
+    this.setState({ width: width - 12 })
+  }
+
+  public render() {
+    const data = this.props.messages.map((message) => {
+      return {
+        x: message.received.getTime(),
+        y: parseFloat(message.value),
+      }
+    })
+
+    return (
+      <div>
+        <XYPlot width={this.state.width} height={150}>
+          <HorizontalGridLines />
+          <YAxis />
+          <LineMarkSeries
+            onValueMouseOver={this._rememberValue}
+            onValueMouseOut={this._forgetValue}
+            size={3}
+            data={data}
+            curve="curveCardinal"
+          />
+          {this.state.value ? <Hint format={this.hintFormatter} value={this.state.value} /> : null}
+        </XYPlot>
+        <ReactResizeDetector handleWidth={true} onResize={this.resize} />
+      </div>
+    )
+  }
+
+  private hintFormatter = (point: any) => {
+    return [
+      { title: <b>Time</b>, value: <DateFormatter date={new Date(point.x)} /> },
+      { title: <b>Value</b>, value: point.y },
+    ]
+  }
+
+  private _forgetValue = () => {
+    this.setState({
+      value: undefined,
+    })
+  }
+
+  private _rememberValue = (value: any) => {
+    this.setState({ value })
+  }
+}
+
+export default PlotHistory

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

@@ -0,0 +1,108 @@
+import * as q from '../../../../../backend/src/Model'
+import * as React from 'react'
+import CodeDiff from '../../CodeDiff'
+import { AppState } from '../../../reducers'
+import { connect } from 'react-redux'
+import { default as ReactResizeDetector } from 'react-resize-detector'
+import { ValueRendererDisplayMode } from '../../../reducers/Settings'
+
+interface Props {
+  message: q.Message
+  messageHistory: q.RingBuffer<q.Message>
+  compareWith?: q.Message
+  renderMode: ValueRendererDisplayMode
+}
+
+interface State {
+  width: number
+}
+
+class ValueRenderer extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { width: 0 }
+  }
+
+  public render() {
+    return (
+      <div style={{ padding: '8px 0px 8px 8px' }}>
+        <ReactResizeDetector handleWidth={true} onResize={this.updateWidth} />
+        {this.renderValue()}
+      </div>
+    )
+  }
+
+  public renderValue() {
+    const { message, messageHistory, compareWith, renderMode } = this.props
+
+    const previousMessages = messageHistory.toArray()
+    const previousMessage = previousMessages[previousMessages.length - 2]
+    let compareMessage = compareWith || previousMessage || message
+    if (renderMode === 'raw') {
+      compareMessage = message
+    }
+
+    let json
+    try {
+      json = JSON.parse(message.value)
+    } catch (error) {
+      return this.renderRawValue(message.value, compareMessage.value)
+    }
+
+    if (typeof json === 'string') {
+      return this.renderRawValue(message.value, compareMessage.value)
+    } else if (typeof json === 'number') {
+      return this.renderRawValue(message.value, compareMessage.value)
+    } else if (typeof json === 'boolean') {
+      return this.renderRawValue(message.value, compareMessage.value)
+    } else {
+      const current = this.messageToPrettyJson(message) || message.value
+      const compare = this.messageToPrettyJson(compareMessage) || compareMessage.value
+      const language = current && compare ? 'json' : undefined
+
+      return this.renderDiff(current, compare, language)
+    }
+  }
+
+  private renderDiff(current: string = '', previous: string = '', language?: 'json') {
+    return (
+      <CodeDiff
+        previous={previous}
+        current={current}
+        language={language}
+        nameOfCompareMessage={this.props.compareWith ? 'selected' : 'previous'}
+      />
+    )
+  }
+
+  private messageToPrettyJson(message?: q.Message): string | undefined {
+    if (!message || !message.value) {
+      return undefined
+    }
+
+    try {
+      const json = JSON.parse(message.value)
+      return JSON.stringify(json, undefined, '  ')
+    } catch {
+      return undefined
+    }
+  }
+
+  private updateWidth = (width: number) => {
+    if (width !== this.state.width) {
+      this.setState({ width })
+    }
+  }
+
+  private renderRawValue(value: string, compare: string) {
+    return this.renderDiff(value, compare)
+  }
+}
+
+const mapStateToProps = (state: AppState) => {
+  return {
+    renderMode: state.settings.valueRendererDisplayMode,
+  }
+}
+
+export default connect(mapStateToProps)(ValueRenderer)