move sparkplug decoding to backend

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

@@ -1,13 +1,13 @@
 import * as q from '../../../../../backend/src/Model'
 import * as React from 'react'
-import * as fs from 'fs'
 import CodeDiff from '../CodeDiff'
 import { AppState } from '../../../reducers'
 import { Base64Message } from '../../../../../backend/src/Model/Base64Message'
-import { Payload } from '../../../../../backend/src/Model/sparkplugb'
+import { SparkplugPayload } from '../../../../../backend/src/Model/SparkplugB'
 import { connect } from 'react-redux'
 import { ValueRendererDisplayMode } from '../../../reducers/Settings'
 import { Fade } from '@material-ui/core'
+import { Decoder } from '../../../../../backend/src/Model/Decoder'
 
 interface Props {
   message: q.Message
@@ -49,20 +49,7 @@ class ValueRenderer extends React.Component<Props, State> {
     try {
       JSON.parse(str)
     } catch (error) {
-      try {
-        //Sparkplugb
-        if (Payload === undefined) {
-          throw Error('sparkplugb.Payload is not loaded yet')
-        }
-        let json = Payload.toObject(Payload.decode(Base64Message.toUint8Array(msg)), {
-          longs: String,
-          enums: String,
-          bytes: String,
-        })
-        return [JSON.stringify(json, undefined, '  '), 'json']
-      } catch (error) {
-        return [str, undefined]
-      }
+      return [str, undefined]
     }
 
     return [this.messageToPrettyJson(str), 'json']
@@ -98,7 +85,10 @@ class ValueRenderer extends React.Component<Props, State> {
   }
 
   public render() {
-    return <div style={{ padding: '0px 0px 8px 0px', width: '100%' }}>{this.renderValue()}</div>
+    return <div style={{ padding: '0px 0px 8px 0px', width: '100%' }}>
+      {this.props.message?.payload?.decoder === Decoder.SPARKPLUG && "Decoded SparkplugB"}
+      {this.renderValue()}
+    </div>
   }
 
   public renderValue() {

app/src/components/TopicPlot.tsx

@@ -5,7 +5,6 @@ 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/sparkplugb'
 const parseDuration = require('parse-duration')
 
 interface Props {
@@ -41,7 +40,7 @@ function nodeDotPathToHistory(startTime: number | undefined, history: q.MessageH
       let json: any = {}
       try {
         json = message.payload ? JSON.parse(Base64Message.toUnicodeString(message.payload)) : {}
-      } catch (ignore) {}
+      } catch (ignore) { }
 
       const value = dotProp.get(json, dotPath)
 

app/src/index.tsx

@@ -10,11 +10,9 @@ import { connect, Provider } from 'react-redux'
 import { ThemeProvider } from '@material-ui/styles'
 import './utils/tracking'
 import { themes } from './theme'
-import { loadSparkplugBPayload } from '../../backend/src/Model/sparkplugb'
 
 const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
 const store = createStore(reducers, composeEnhancers(applyMiddleware(reduxThunk, batchDispatchMiddleware)))
-loadSparkplugBPayload()
 
 function ApplicationRenderer(props: { theme: 'light' | 'dark' }) {
   return (