Hint which messages are compared in diff

app/src/App.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react'
-import CodeDiff from './components/CodeDiff'
 import ConnectionSetup from './components/ConnectionSetup/ConnectionSetup'
 import CssBaseline from '@material-ui/core/CssBaseline'
 import ErrorBoundary from './ErrorBoundary'

app/src/components/CodeDiff.tsx

@@ -1,13 +1,14 @@
 import * as diff from 'diff'
 import * as Prism from 'prismjs'
 import * as React from 'react'
-import { Badge, Theme, withStyles } from '@material-ui/core'
+import { Theme, withStyles } from '@material-ui/core'
 import 'prismjs/components/prism-json'
 import 'prismjs/themes/prism-tomorrow.css'
 
 interface Props {
   previous: string
   current: string
+  nameOfCompareMessage: string
   language?: 'json'
   classes: any
 }
@@ -60,9 +61,13 @@ class CodeDiff extends React.Component<Props, {}> {
     }
 
     return (
-      <span style={{ display: 'block', textAlign: 'right' }}>
-        Diff: <span className={this.props.classes.additions}>+ {additions} line{additions === 1 ? '' : 's'}</span>
-        , <span className={this.props.classes.deletions}>- {deletions} line{deletions === 1 ? '' : 's'}</span>
+      <span style={{ display: 'block', marginBottom: '8px', float: 'right' }}>
+        <span>
+          Comparing with <b>{this.props.nameOfCompareMessage}</b> message:&nbsp;
+
+          <span className={this.props.classes.additions}>+ {additions} line{additions === 1 ? '' : 's'}</span>
+          , <span className={this.props.classes.deletions}>- {deletions} line{deletions === 1 ? '' : 's'}</span>
+        </span>
       </span>
     )
   }

app/src/components/Sidebar/ValueRenderer.tsx

@@ -70,6 +70,7 @@ class ValueRenderer extends React.Component<Props, State> {
         previous={previous}
         current={current}
         language={language}
+        nameOfCompareMessage={this.props.compareWith ? 'selected' : 'previous'}
       />
     )
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "MQTT-Explorer",
-  "version": "0.2.0",
+  "version": "0.2.1-alpha4",
   "description": "Explore your message queues",
   "main": "dist/src/electron.js",
   "scripts": {