decode diff view for sparkplug

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

@@ -40,7 +40,7 @@ function ActionButtons(props: {
         </Tooltip>
       </ToggleButton>
       <ToggleButton className={props.classes.toggleButton} value="raw" id="valueRendererDisplayMode-raw">
-        <Tooltip title="Raw / formatted JSON">
+        <Tooltip title="Raw / formatted JSON / formatted sparkplugb protojson">
           <span>
             <Reorder className={props.classes.toggleButtonIcon} />
           </span>

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

@@ -52,7 +52,8 @@ class ValueRenderer extends React.Component<Props, State> {
       JSON.parse(str)
     } catch (error) {
       try {
-        let payload = Payload.decode(this.base64MessageToUint8Array(msg))
+        //Sparkplugb
+        let payload = Payload.decode(Base64Message.toUint8Array(msg))
         const json = Payload.toJSON(payload)
         return [JSON.stringify(json, undefined, '  '), 'json']
       } catch (error) {
@@ -63,21 +64,6 @@ class ValueRenderer extends React.Component<Props, State> {
     return [this.messageToPrettyJson(str), 'json']
   }
 
-  private base64MessageToUint8Array(msg: Base64Message): Uint8Array {
-    let dataUri = Base64Message.toDataUri(msg, "")
-    let parts = dataUri.split(',')
-    let b64 = parts[1]
-
-    var binary_string = window.atob(b64);
-    var len = binary_string.length;
-    var bytes = new Uint8Array(len);
-    for (var i = 0; i < len; i++) {
-      bytes[i] = binary_string.charCodeAt(i);
-    }
-
-    return bytes
-  }
-
   private messageToPrettyJson(str: string): string | undefined {
     try {
       const json = JSON.parse(str)

app/src/components/TopicPlot.tsx

@@ -5,6 +5,7 @@ import PlotHistory from './Chart/Chart'
 import { Base64Message } from '../../../backend/src/Model/Base64Message'
 import { toPlottableValue } from './Sidebar/CodeDiff/util'
 import { PlotCurveTypes } from '../reducers/Charts'
+import { Payload } from '../../../backend/src/Model/sparkplug'
 const parseDuration = require('parse-duration')
 
 interface Props {
@@ -37,11 +38,16 @@ function nodeToHistory(startTime: number | undefined, history: q.MessageHistory)
 function nodeDotPathToHistory(startTime: number | undefined, history: q.MessageHistory, dotPath: string) {
   return filterUsingTimeRange(startTime, history.toArray())
     .map((message: q.Message) => {
-      let json = {}
+      let json: any = {}
       try {
         json = message.payload ? JSON.parse(Base64Message.toUnicodeString(message.payload)) : {}
       } catch (ignore) { }
 
+      // sparkplugb
+      try {
+        json = message.payload ? Payload.toJSON(Payload.decode(Base64Message.toUint8Array(message.payload))) : {}
+      } catch (ignore) { }
+
       const value = dotProp.get(json, dotPath)
 
       return { x: message.received.getTime(), y: toPlottableValue(value) }

backend/src/Model/Base64Message.ts

@@ -27,4 +27,14 @@ export class Base64Message {
   public static toDataUri(message: Base64Message, mimeType: string) {
     return `data:${mimeType};base64,${message.base64Message}`
   }
+
+  public static toUint8Array(message: Base64Message) {
+    var binary_string = window.atob(message.base64Message);
+    var len = binary_string.length;
+    var bytes = new Uint8Array(len);
+    for (var i = 0; i < len; i++) {
+      bytes[i] = binary_string.charCodeAt(i);
+    }
+    return bytes
+  }
 }