Improve message history

app/src/components/Sidebar/ValueRenderer/MessageHistory.tsx

@@ -51,17 +51,22 @@ class MessageHistory extends React.Component<Props, State> {
     }
 
     const history = node.messageHistory.toArray()
-    const historyElements = history.reverse().map(message => ({
+    let previousMessage: q.Message | undefined = node.message
-      title: <DateFormatter date={message.received} />,
+    const historyElements = history.reverse().map((message) => {
+      const element = {
+        title: <span><DateFormatter date={message.received} /> {previousMessage ? <i>(-<DateFormatter date={message.received} intervalSince={previousMessage.received} />)</i> : null}</span>,
         value: message.value ? Base64Message.toUnicodeString(message.value) : '',
         selected: message && message === this.props.selected,
-    }))
+      }
+      previousMessage = message
+      return element
+    })
 
     const numericMessages = history
       .map((message: q.Message) => {
-        const number = message.value ? parseFloat(Base64Message.toUnicodeString(message.value)) : NaN
+        const value = message.value ? parseFloat(Base64Message.toUnicodeString(message.value)) : NaN
-        return { x: number, y: message.received.getTime() }
+        return { x: message.received.getTime(), y: value  }
-      }).filter(data => !isNaN(data.x))
+      }).filter(data => !isNaN(data.y))
     const showPlot = numericMessages.length >= 2
 
     return (

app/src/components/helper/DateFormatter.tsx

@@ -3,14 +3,30 @@ import * as moment from 'moment'
 
 interface Props {
   date: Date
+  intervalSince?: Date
+}
+
+const unitMapping = {
+  s: 'seconds',
+  m: 'minutes',
+  h: 'hours',
 }
 
 class DateFormatter extends React.Component<Props, {}> {
   public render() {
     const locale = window.navigator.language
+    if (this.props.intervalSince) {
+      return <span>{this.intervalSince(this.props.intervalSince)}</span>
+    }
     return <span>{locale ? this.localizedDate(locale) : this.legacyDate()}</span>
   }
 
+  private intervalSince(intervalSince: Date) {
+    const interval = intervalSince.getTime() - this.props.date.getTime()
+    const unit = this.unitForInterval(interval)
+    return `${moment.duration(interval).as(unit)} ${unitMapping[unit]}`
+  }
+
   private legacyDate() {
     return `${this.props.date.toLocaleDateString()} ${this.props.date.toLocaleTimeString()}`
   }
@@ -18,6 +34,21 @@ class DateFormatter extends React.Component<Props, {}> {
   private localizedDate(locale: string) {
     return moment(this.props.date).locale(locale).format('L LTS')
   }
+
+  private unitForInterval(millis: number) {
+    const oneMinute = 1000 * 60
+    const oneHour = oneMinute * 60
+
+    if (millis > oneHour * 2) {
+      return 'h'
+    }
+
+    if (millis > oneMinute * 2) {
+      return 'm'
+    }
+
+    return 's'
+  }
 }
 
 export default DateFormatter