From f8a2af855477800d097f70450ffe7f27c4d789ef Mon Sep 17 00:00:00 2001
From: Thomas Nordquist <xxnerowingerxx@gmail.com>
Date: Mon, 4 Mar 2019 18:23:53 +0100
Subject: [PATCH] Hint which messages are compared in diff

---
 app/src/App.tsx                              |  1 -
 app/src/components/CodeDiff.tsx              | 13 +++++++++----
 app/src/components/Sidebar/ValueRenderer.tsx |  1 +
 package.json                                 |  2 +-
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/app/src/App.tsx b/app/src/App.tsx
index ef98433..6b9246e 100644
--- a/app/src/App.tsx
+++ b/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'
diff --git a/app/src/components/CodeDiff.tsx b/app/src/components/CodeDiff.tsx
index 9580b31..6ccb0be 100644
--- a/app/src/components/CodeDiff.tsx
+++ b/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>
     )
   }
diff --git a/app/src/components/Sidebar/ValueRenderer.tsx b/app/src/components/Sidebar/ValueRenderer.tsx
index ff6a9e0..0d3714b 100644
--- a/app/src/components/Sidebar/ValueRenderer.tsx
+++ b/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'}
       />
     )
   }
diff --git a/package.json b/package.json
index 3aaeb22..d9126d5 100644
--- a/package.json
+++ b/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": {