move sparkplug decoding to backend

app/package.json

@@ -28,7 +28,6 @@
     "d3-shape": "^1.3.5",
     "diff": "^4.0.1",
     "dot-prop": "^5.0.0",
-    "file-loader": "6",
     "get-value": "^3.0.1",
     "immutable": "^4.0.0-rc.12",
     "in-viewport": "^3.6.0",
@@ -73,6 +72,7 @@
     "chai": "^4.2.0",
     "cross-env": "^7.0.2",
     "css-loader": "^3.0.0",
+    "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
     "lodash": "^4.17.21",
     "mocha": "^9.2.1",
@@ -90,4 +90,4 @@
   "peerDependencies": {
     "electron": "^17"
   }
-}
+}

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 (

app/yarn.lock

@@ -2054,13 +2054,13 @@ faye-websocket@^0.11.3:
   dependencies:
     websocket-driver ">=0.5.1"
 
-file-loader@6:
-  version "6.0.0"
-  resolved "https://registry.npmjs.org/file-loader/-/file-loader-6.0.0.tgz"
-  integrity sha512-/aMOAYEFXDdjG0wytpTL5YQLfZnnTmLNjn+AIrJ/6HVnTfDqLsVKUUwkDf4I4kgex36BvjuXEn/TX9B/1ESyqQ==
+file-loader@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz"
+  integrity sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==
   dependencies:
     loader-utils "^2.0.0"
-    schema-utils "^2.6.5"
+    schema-utils "^3.0.0"
 
 fill-range@^7.0.1:
   version "7.0.1"
@@ -3766,7 +3766,7 @@ schema-utils@^2.6.5:
     ajv "^6.12.0"
     ajv-keywords "^3.4.1"
 
-schema-utils@^3.1.0, schema-utils@^3.1.1:
+schema-utils@^3.0.0, schema-utils@^3.1.0, schema-utils@^3.1.1:
   version "3.1.1"
   resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz"
   integrity sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==