Add switch for diffs

app/src/components/Sidebar/Sidebar.tsx

@@ -1,6 +1,7 @@
 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 CustomIconButton from '../CustomIconButton'
 import DateFormatter from '../helper/DateFormatter'
@@ -9,23 +10,23 @@ import DeleteForever from '@material-ui/icons/DeleteForever'
 import ExpandMore from '@material-ui/icons/ExpandMore'
 import MessageHistory from './MessageHistory'
 import NodeStats from './NodeStats'
+import Reorder from '@material-ui/icons/Reorder'
+import ToggleButton from '@material-ui/lab/ToggleButton'
+import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'
 import Topic from './Topic'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { default as ReactResizeDetector } from 'react-resize-detector'
-import { sidebarActons } from '../../actions'
+import { settingsActions, sidebarActons } from '../../actions'
 import { StyleRulesCallback, Theme, withStyles } from '@material-ui/core/styles'
 import { TopicViewModel } from '../../TopicViewModel'
+import { ValueRendererDisplayMode } from '../../reducers/Settings'
 
 import {
   Button,
   ExpansionPanel,
   ExpansionPanelDetails,
   ExpansionPanelSummary,
-  Fade,
-  Paper,
-  Popper,
   Typography,
   Tooltip,
   Badge,
@@ -37,10 +38,12 @@ const Publish = React.lazy(() => import('./Publish/Publish'))
 const ValueRenderer = React.lazy(() => import('./ValueRenderer'))
 
 interface Props {
-  node?: q.TreeNode<TopicViewModel>,
-  actions: typeof sidebarActons,
-  classes: any,
-  connectionId?: string,
+  node?: q.TreeNode<TopicViewModel>
+  actions: typeof sidebarActons
+  settingsActions: typeof settingsActions
+  valueRendererDisplayMode: ValueRendererDisplayMode
+  classes: any
+  connectionId?: string
 }
 
 interface State {
@@ -139,6 +142,27 @@ class Sidebar extends React.Component<Props, State> {
     this.props.actions.clearTopic(topic, recursive, maxCount)
   }
 
+  private renderActionButtons() {
+    const handleValue = (_e: React.MouseEvent, value: any) => {
+      this.props.settingsActions.setValueDisplayMode(value)
+    }
+
+    return (
+      <ToggleButtonGroup value={this.props.valueRendererDisplayMode} exclusive={true} onChange={handleValue}>
+        <ToggleButton value="diff">
+          <Tooltip title="Show difference between the current and the last message">
+            <Code />
+          </Tooltip>
+        </ToggleButton>
+        <ToggleButton value="raw">
+          <Tooltip title="Raw value">
+            <Reorder />
+          </Tooltip>
+        </ToggleButton>
+      </ToggleButtonGroup>
+    )
+  }
+
   private renderNode() {
     const { classes, node } = this.props
 
@@ -164,9 +188,9 @@ class Sidebar extends React.Component<Props, State> {
           <ExpansionPanelDetails style={this.detailsStyle}>
             {this.messageMetaInfo()}
             <div ref={this.valueRef}>
-            <React.Suspense fallback={<div>Loading...</div>}>
-              <ValueRenderer node={this.props.node} compareWith={this.state.compareMessage} />
-            </React.Suspense>
+              <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>
@@ -191,6 +215,20 @@ class Sidebar extends React.Component<Props, State> {
     )
   }
 
+  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
@@ -211,8 +249,9 @@ class Sidebar extends React.Component<Props, State> {
     )
 
     return (
-      <div style={{ width: '100%', display: 'flex' }}>
+      <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>
@@ -245,12 +284,14 @@ class Sidebar extends React.Component<Props, State> {
 const mapStateToProps = (state: AppState) => {
   return {
     node: state.tree.selectedTopic,
+    valueRendererDisplayMode: state.settings.valueRendererDisplayMode,
   }
 }
 
 const mapDispatchToProps = (dispatch: any) => {
   return {
     actions: bindActionCreators(sidebarActons, dispatch),
+    settingsActions: bindActionCreators(settingsActions, dispatch),
   }
 }