Add "diff" for historic messages

app/src/components/Sidebar/History.tsx

@@ -11,7 +11,7 @@ interface HistoryItem {
 
 interface Props {
   items: HistoryItem[]
-  onClick?: (index: number) => void
+  onClick?: (index: number, element: EventTarget) => void
   classes: any
 }
 
@@ -38,7 +38,7 @@ class MessageHistory extends React.Component<Props, State> {
           padding: '8px 8px 0 8px',
           cursor: this.props.onClick ? 'pointer' : 'inherit',
         }}
-        onClick={() => this.props.onClick && this.props.onClick(index)}
+        onClick={(event: React.MouseEvent) => this.props.onClick && this.props.onClick(index, event.target)}
       >
         <div><i>{element.title}</i></div>
         <div style={messageStyle}>
@@ -55,8 +55,10 @@ class MessageHistory extends React.Component<Props, State> {
         >
           {this.state.collapsed ? '▶' : '▼'} History
         </Typography>
+        <div style={{ maxHeight: '230px', overflowY: 'scroll'  }}>
           {this.state.collapsed ? null : elements}
         </div>
+      </div>
     )
   }
 
@@ -64,11 +66,11 @@ class MessageHistory extends React.Component<Props, State> {
     const visible = this.props.items.length > 0 && this.state.collapsed
     return (
       <Badge
-        style={{display: 'block', width: '100%'}}
+        style={{ display: 'block', width: '100%' }}
         invisible={!visible}
         badgeContent={this.props.items.length}
         color="primary"
-        classes={{badge: this.props.classes.badge}}
+        classes={{ badge: this.props.classes.badge }}
       >
         {this.renderHistory()}
       </Badge>
@@ -81,7 +83,7 @@ class MessageHistory extends React.Component<Props, State> {
 }
 
 const styles = (theme: Theme) => ({
-  badge: {top: '-8px', left:'64px'}
+  badge: { top: '-8px', left:'64px' },
-});
+})
 
 export default withStyles(styles)(MessageHistory)

app/src/components/Sidebar/MessageHistory.tsx

@@ -3,16 +3,27 @@ import * as q from '../../../../backend/src/Model'
 
 import { Theme, withTheme } from '@material-ui/core/styles'
 
+import Fade from '@material-ui/core/Fade'
 import History from './History'
+import Paper from '@material-ui/core/Paper'
+import Popper from '@material-ui/core/Popper'
+import ValueRenderer from './ValueRenderer'
 
 interface Props {
   node?: q.TreeNode
   theme: Theme
+  onSelect: (message: q.Message) => void
 }
 
-class MessageHistory extends React.Component<Props, {}> {
+interface State {
+  displayMessage?: q.Message,
+  anchorEl?: HTMLElement
+}
+
+class MessageHistory extends React.Component<Props, State> {
   constructor(props: any) {
     super(props)
+    this.state = { }
   }
 
   private updateNode = () => {
@@ -33,16 +44,30 @@ class MessageHistory extends React.Component<Props, {}> {
   }
 
   public render() {
-    if (!this.props.node) {
+    const { node } = this.props
+    if (!node) {
       return null
     }
-    const history = this.props.node.messageHistory.toArray()
+
+    const history = node.messageHistory.toArray()
     const historyElements = history.map(message => ({
       title: message.received.toGMTString(),
       value: message.value,
     }))
 
-    return <History items={historyElements} />
+    return (
+      <div>
+        <History
+          items={historyElements}
+          onClick={this.displayMessage}
+        />
+      </div>
+    )
+  }
+
+  private displayMessage = (index: number, eventTarget: EventTarget) => {
+    const message = this.props.node && this.props.node.messageHistory.toArray()[index]
+    this.props.onSelect(message)
   }
 }
 

app/src/components/Sidebar/Sidebar.tsx

@@ -1,12 +1,21 @@
 import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
 
-import { ExpansionPanel, ExpansionPanelDetails, ExpansionPanelSummary, Typography } from '@material-ui/core'
+import {
+  ExpansionPanel,
+  ExpansionPanelDetails,
+  ExpansionPanelSummary,
+  Fade,
+  Paper,
+  Popper,
+  Typography,
+} from '@material-ui/core'
 import { StyleRulesCallback, Theme, withStyles } from '@material-ui/core/styles'
 
 import { AppState } from '../../reducers'
 import Copy from '../Copy'
 import ExpandMore from '@material-ui/icons/ExpandMore'
+import MessageHistory from './MessageHistory'
 import NodeStats from './NodeStats'
 import Publish from './Publish/Publish'
 import Topic from './Topic'
@@ -22,16 +31,18 @@ interface Props {
 
 interface State {
   node: q.TreeNode,
+  compareMessage?: q.Message
 }
 
 class Sidebar extends React.Component<Props, State> {
+  private valueRef: any = React.createRef<HTMLDivElement>()
   private updateNode = () => {
     this.setState(this.state)
   }
 
   constructor(props: any) {
     super(props)
-    console.warn('Find and fix me #state')
+    console.error('Find and fix me #state')
     this.state = { node: new q.Tree() }
   }
 
@@ -55,6 +66,10 @@ class Sidebar extends React.Component<Props, State> {
     this.props.node && this.removeUpdateListener(this.props.node)
     nextProps.node && this.registerUpdateListener(nextProps.node)
     this.props.node && this.setState({ node: this.props.node })
+
+    if (this.props.node !== nextProps.node) {
+      this.setState({ compareMessage: undefined })
+    }
   }
 
   private registerUpdateListener(node: q.TreeNode) {
@@ -75,7 +90,7 @@ class Sidebar extends React.Component<Props, State> {
     )
   }
 
-  private detailsStyle = { padding: '0px 16px 8px 8px' }
+  private detailsStyle = { padding: '0px 16px 8px 8px', display: 'block' }
 
   private renderNode() {
     const { classes, node } = this.props
@@ -98,7 +113,17 @@ class Sidebar extends React.Component<Props, State> {
             <Typography className={classes.heading}>Value {copyValue}</Typography>
           </ExpansionPanelSummary>
           <ExpansionPanelDetails style={this.detailsStyle}>
-            <ValueRenderer node={this.props.node} />
+            <div ref={this.valueRef}><ValueRenderer message={this.props.node && this.props.node.message} /></div>
+            <div><MessageHistory onSelect={this.handleMessageHistorySelect} node={this.props.node} /></div>
+            <Popper open={Boolean(this.state.compareMessage)} anchorEl={this.valueRef.current} placement="left" transition={true}>
+              {({ TransitionProps }) => (
+                <Fade {...TransitionProps} timeout={350}>
+                  <Paper>
+                    <ValueRenderer message={this.state.compareMessage} />
+                  </Paper>
+                </Fade>
+              )}
+            </Popper>
           </ExpansionPanelDetails>
         </ExpansionPanel>
         <ExpansionPanel defaultExpanded={true}>
@@ -119,6 +144,14 @@ class Sidebar extends React.Component<Props, State> {
     )
   }
 
+  private handleMessageHistorySelect = (message: q.Message) => {
+    if (message !== this.state.compareMessage) {
+      this.setState({ compareMessage: message })
+    } else {
+      this.setState({ compareMessage: undefined })
+    }
+  }
+
   private renderNodeStats() {
     if (!this.props.node) {
       return null

app/src/components/Sidebar/ValueRenderer.tsx

@@ -3,61 +3,37 @@ import * as q from '../../../../backend/src/Model'
 
 import { Theme, withTheme } from '@material-ui/core/styles'
 
-import MessageHistory from './MessageHistory'
 import { default as ReactJson } from 'react-json-view'
 
 interface Props {
-  node?: q.TreeNode
+  message?: q.Message
   theme: Theme
 }
 
-interface State {
+class ValueRenderer extends React.Component<Props, {}> {
-  node?: q.TreeNode
-}
-
-class ValueRenderer extends React.Component<Props, State> {
-  private updateNode: () => void
-  constructor(props: any) {
-    super(props)
-    this.state = {}
-    this.updateNode = () => {
-      this.setState(this.state)
-    }
-  }
-
-  public componentWillReceiveProps(nextProps: Props) {
-    this.props.node && this.props.node.onMessage.unsubscribe(this.updateNode)
-    nextProps.node && nextProps.node.onMessage.subscribe(this.updateNode)
-  }
-
   public render() {
-    return (
+    return <div>{this.renderValue()}</div>
-      <div style={{width: '100%'}}>
-        {this.renderValue()}
-        <MessageHistory node={this.props.node} />
-      </div>
-    )
   }
 
   public renderValue() {
-    const node = this.props.node
+    const { message } = this.props
-    if (!node || !node.message) {
+    if (!message) {
       return null
     }
 
     let json
     try {
-      json = JSON.parse(node.message.value)
+      json = JSON.parse(message.value)
     } catch (error) {
-      return this.renderRawValue(node.message.value)
+      return this.renderRawValue(message.value)
     }
 
     if (typeof json === 'string') {
-      return this.renderRawValue(node.message.value)
+      return this.renderRawValue(message.value)
     } else if (typeof json === 'number') {
-      return this.renderRawValue(node.message.value)
+      return this.renderRawValue(message.value)
     } else if (typeof json === 'boolean') {
-      return this.renderRawValue(node.message.value)
+      return this.renderRawValue(message.value)
     } else {
       const theme = (this.props.theme.palette.type === 'dark') ? 'monokai' : 'bright:inverted'
       return (
@@ -79,6 +55,7 @@ class ValueRenderer extends React.Component<Props, State> {
       display: 'block',
       lineHeight: '1.2em',
       padding: '12px 5px 12px 5px',
+      color: this.props.theme.palette.text.primary
     }
 
     return <pre style={style}><code>{value}</code></pre>