Highlight selected history entry

app/src/components/Sidebar/History.tsx

@@ -6,6 +6,7 @@ import { Theme, withStyles } from '@material-ui/core/styles'
 interface HistoryItem {
   title: JSX.Element | string
   value: string | any
+  selected?: boolean
 }
 
 interface Props {
@@ -28,18 +29,18 @@ class MessageHistory extends React.Component<Props, State> {
   }
 
   public renderHistory() {
-    const style = {
-      backgroundColor: 'rgba(80, 80, 80, 0.6)',
+    const style = (element: HistoryItem) => ({
+      backgroundColor: element.selected ? 'rgba(120, 120, 120, 0.6)' : 'rgba(80, 80, 80, 0.6)',
       margin: '8px',
       padding: '8px 8px 0 8px',
       cursor: this.props.onClick ? 'pointer' : 'inherit',
-    }
+    })
 
     const messageStyle: React.CSSProperties = { textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }
     const elements = this.props.items.map((element, index) => (
       <div
         key={index}
-        style={style}
+        style={style(element)}
         onClick={(event: React.MouseEvent) => this.props.onClick && this.props.onClick(index, event.target)}
       >
         <div><i>{element.title}</i></div>

app/src/components/Sidebar/MessageHistory.tsx

@@ -11,6 +11,7 @@ const throttle = require('lodash.throttle')
 
 interface Props {
   node?: q.TreeNode<TopicViewModel>
+  selected?: q.Message
   onSelect: (message: q.Message) => void
 }
 
@@ -52,6 +53,7 @@ class MessageHistory extends React.Component<Props, State> {
     const historyElements = history.reverse().map(message => ({
       title: <DateFormatter date={message.received} />,
       value: message.value,
+      selected: message === this.props.selected,
     }))
 
     const numericMessages = history.filter(message => !isNaN(parseFloat(message.value)))

app/src/components/Sidebar/Sidebar.tsx

@@ -169,10 +169,7 @@ class Sidebar extends React.Component<Props, State> {
               <ValueRenderer node={this.props.node} />
             </React.Suspense>
             </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}>
-              {this.showValueComparison}
-            </Popper>
+            <div><MessageHistory onSelect={this.handleMessageHistorySelect} selected={this.state.compareMessage} node={this.props.node} /></div>
           </ExpansionPanelDetails>
         </ExpansionPanel>
         <ExpansionPanel defaultExpanded={true}>
@@ -195,18 +192,6 @@ class Sidebar extends React.Component<Props, State> {
     )
   }
 
-  private valueRenderWidthChange = (width: number) => {
-    this.setState({ valueRenderWidth: width })
-  }
-
-  private showValueComparison = (a: any) => (
-    <Fade {...a.TransitionProps} timeout={350}>
-      <Paper style={{ maxWidth: this.state.valueRenderWidth }}>
-        <ValueRenderer message={this.state.compareMessage} />
-      </Paper>
-    </Fade>
-  )
-
   private messageMetaInfo() {
     if (!this.props.node || !this.props.node.message || !this.props.node.mqttMessage) {
       return null