dont use pull_request_target as it opens the repo for pwnage..

feat: support save and load payload from file

.github/workflows/platform-builds.yml

@@ -11,7 +11,7 @@ concurrency:
   cancel-in-progress: false
 
 jobs:
-  platform_matrix:
+  build:
     strategy:
       matrix:
         build:
@@ -36,7 +36,18 @@ jobs:
         with:
           app_id: ${{ secrets.RELEASE_BOT_APP_ID }}
           private_key: ${{ secrets.RELEASE_BOT_PRIVATE_KEY }}
-      - run: npx semantic-release --ci
-        name: Semantic Release
+      - name: Semantic Release
+        uses: cycjimmy/semantic-release-action@v4
+        id: semantic   # Need an `id` for output variables
         env:
-          GH_TOKEN: ${{ steps.create_token.outputs.token }}
+          GITHUB_TOKEN: ${{ steps.create_token.outputs.token }}
+      - run: yarn build
+        if: steps.semantic.outputs.new_release_published == 'true'
+      - run: yarn prepare-release
+        if: steps.semantic.outputs.new_release_published == 'true'
+      - run: yarn package ${{ matrix.build.task }}
+        if: steps.semantic.outputs.new_release_published == 'true'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          SNAPCRAFT_STORE_CREDENTIALS: ${{ secrets.SNAPCRAFT_STORE_CREDENTIALS }}
+  

.github/workflows/tests.yml

@@ -35,4 +35,4 @@ jobs:
       - name: Show URL
         run: echo '${{ steps.upload.outputs.file-url }}'
         id: artifact-upload-step
-      - run: echo '![test](${{ steps.upload.outputs.file-url }})' >> $GITHUB_STEP_SUMMARY
+      - run: echo '<picture><img src="${{ steps.upload.outputs.file-url }}"></picture>' >> $GITHUB_STEP_SUMMARY

.github/workflows/update-website.yml

@@ -0,0 +1,17 @@
+name: Update Website
+
+on: [release, workflow_dispatch]
+
+jobs:
+  update-website:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: gh-pages
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: npm install
+      - run: npm run readme
+      - uses: stefanzweifel/git-auto-commit-action@v5

app/package.json

@@ -80,14 +80,14 @@
     "node-loader": "^0.6.0",
     "source-map-loader": "^0.2.4",
     "style-loader": "^1",
-    "ts-loader": "^9.2.6",
+    "ts-loader": "^9.5.1",
     "typescript": "^4.5.5",
-    "webpack": "^5.69.1",
+    "webpack": "^5.91.0",
     "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.4"
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4"
   },
   "peerDependencies": {
     "electron": "^29"
   }
-}
+}

app/src/actions/ConnectionManager.ts

@@ -9,12 +9,11 @@ import {
 import { default as persistentStorage, StorageIdentifier } from '../utils/PersistentStorage'
 import { Dispatch } from 'redux'
 import { showError } from './Global'
-import { promises as fsPromise } from 'fs'
 import * as path from 'path'
 import { ActionTypes, Action } from '../reducers/ConnectionManager'
 import { Subscription } from '../../../backend/src/DataSource/MqttSource'
 import { connectionsMigrator } from './migrations/Connection'
-import { rendererRpc } from '../../../events'
+import { rendererRpc, readFromFile } from '../../../events'
 import { makeOpenDialogRpc } from '../../../events/OpenDialogRequest'
 
 export interface ConnectionDictionary {
@@ -81,7 +80,7 @@ async function openCertificate(): Promise<CertificateParameters> {
     throw rejectReasons.noCertificateSelected
   }
 
-  const data = await fsPromise.readFile(selectedFile)
+  const data = await rendererRpc.call(readFromFile, { filePath: selectedFile })
   if (data.length > 16_384 || data.length < 64) {
     throw rejectReasons.certificateSizeDoesNotMatch
   }

app/src/actions/Publish.ts

@@ -2,7 +2,10 @@ import { Action, ActionTypes } from '../reducers/Publish'
 import { AppState } from '../reducers'
 import { Base64Message } from '../../../backend/src/Model/Base64Message'
 import { Dispatch } from 'redux'
-import { makePublishEvent, rendererEvents } from '../../../events'
+import { MqttMessage, makePublishEvent, rendererEvents, rendererRpc, readFromFile } from '../../../events'
+import { makeOpenDialogRpc } from '../../../events/OpenDialogRequest'
+import { showError } from './Global'
+import { Base64 } from 'js-base64'
 
 export const setTopic = (topic?: string): Action => {
   return {
@@ -11,6 +14,49 @@ export const setTopic = (topic?: string): Action => {
   }
 }
 
+export const openFile = (encoding: 'utf8' = 'utf8') => async (dispatch: Dispatch<any>, getState: () => AppState) => {
+  try {
+    const file = await getFileContent(encoding)
+    if (file) {
+      dispatch(
+        setPayload(file.data))
+    }
+  } catch (error) {
+    dispatch(showError(error))
+  }
+}
+
+type FileParameters = {
+  name: string,
+  data: string
+}
+async function getFileContent(encoding: string): Promise<FileParameters | undefined> {
+  const rejectReasons = {
+    noFileSelected: 'No file selected',
+    errorReadingFile: 'Error reading file'
+  }
+
+  const { canceled, filePaths } = await rendererRpc.call(makeOpenDialogRpc(), {
+    properties: ['openFile'],
+    securityScopedBookmarks: true,
+  })
+
+  if (canceled) {
+    return
+  }
+
+  const selectedFile = filePaths[0]
+  if (!selectedFile) {
+    throw rejectReasons.noFileSelected
+  }
+  try {
+    const data = await rendererRpc.call(readFromFile, { filePath: selectedFile, encoding })
+    return { name: selectedFile, data: data.toString(encoding) }
+  } catch (error) {
+    throw rejectReasons.errorReadingFile
+  }
+}
+
 export const setPayload = (payload?: string): Action => {
   return {
     payload,
@@ -41,7 +87,7 @@ export const publish = (connectionId: string) => (dispatch: Dispatch<Action>, ge
   }
 
   const publishEvent = makePublishEvent(connectionId)
-  const mqttMessage = {
+  const mqttMessage: Partial<MqttMessage> = {
     topic,
     payload: state.publish.payload ? Base64Message.fromString(state.publish.payload) : null,
     retain: state.publish.retain,

app/src/actions/Settings.ts

@@ -1,5 +1,5 @@
 import * as q from '../../../backend/src/Model'
-import { ActionTypes, SettingsStateModel, TopicOrder } from '../reducers/Settings'
+import { ActionTypes, SettingsStateModel, TopicOrder, ValueRendererDisplayMode } from '../reducers/Settings'
 import { AppState } from '../reducers'
 import { autoExpandLimitSet } from '../components/SettingsDrawer/Settings'
 import { Base64Message } from '../../../backend/src/Model/Base64Message'
@@ -68,13 +68,14 @@ export const selectTopicWithMouseOver = (doSelect: boolean) => (dispatch: Dispat
   dispatch(storeSettings())
 }
 
-export const setValueDisplayMode = (valueRendererDisplayMode: 'diff' | 'raw') => (dispatch: Dispatch<any>) => {
-  dispatch({
-    valueRendererDisplayMode,
-    type: ActionTypes.SETTINGS_SET_VALUE_RENDERER_DISPLAY_MODE,
-  })
-  dispatch(storeSettings())
-}
+export const setValueDisplayMode =
+  (valueRendererDisplayMode: ValueRendererDisplayMode) => (dispatch: Dispatch<any>) => {
+    dispatch({
+      valueRendererDisplayMode,
+      type: ActionTypes.SETTINGS_SET_VALUE_RENDERER_DISPLAY_MODE,
+    })
+    dispatch(storeSettings())
+  }
 
 export const toggleHighlightTopicUpdates = () => (dispatch: Dispatch<any>) => {
   dispatch({
@@ -117,7 +118,7 @@ export const filterTopics = (filterStr: string) => (dispatch: Dispatch<any>, get
     const messageMatches =
       node.message &&
       node.message.payload &&
-      Base64Message.toUnicodeString(node.message.payload).toLowerCase().indexOf(filterStr) !== -1
+      node.message.payload.toUnicodeString().toLowerCase().indexOf(filterStr) !== -1
 
     return Boolean(messageMatches)
   }

app/src/actions/Tree.ts

@@ -33,13 +33,8 @@ const debouncedSelectTopic = debounce(
       setTopicDispatch = setTopic(topic.path())
     }
 
-    if (previouslySelectedTopic && previouslySelectedTopic.viewModel) {
-      previouslySelectedTopic.viewModel.setSelected(false)
-    }
-
-    if (topic.viewModel) {
-      topic.viewModel.setSelected(true)
-    }
+    previouslySelectedTopic?.viewModel?.setSelected(false)
+    topic.viewModel?.setSelected(true)
 
     const selectTreeTopicDispatch = {
       selectedTopic: topic,

app/src/components/ChartPanel/TopicChart.tsx

@@ -114,6 +114,7 @@ function TopicChart(props: Props) {
         </div>
       </div>
       <TopicPlot
+        node={props.treeNode ? props.treeNode : undefined}
         color={props.parameters.color}
         interpolation={props.parameters.interpolation}
         timeInterval={props.parameters.timeRange ? props.parameters.timeRange.until : undefined}

app/src/components/ConnectionSetup/ProfileList/ConnectionItem.tsx

@@ -1,26 +1,40 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import { connect } from 'react-redux'
 import { ListItem, Typography } from '@material-ui/core'
 import { toMqttConnection, ConnectionOptions } from '../../../model/ConnectionOptions'
 import { withStyles, Theme } from '@material-ui/core/styles'
 import { bindActionCreators } from 'redux'
-import { connectionManagerActions } from '../../../actions'
+import { connectionActions, connectionManagerActions } from '../../../actions'
 
 export interface Props {
   connection: ConnectionOptions
-  actions: any
+  actions: {
+    connection: any
+    connectionManager: any
+  }
   selected: boolean
   classes: any
 }
 
 const ConnectionItem = (props: Props) => {
+  const connect = useCallback(() => {
+    const mqttOptions = toMqttConnection(props.connection)
+    if (mqttOptions) {
+      props.actions.connection.connect(mqttOptions, props.connection.id)
+    }
+  }, [props.connection, props])
+
   const connection = props.connection.host && toMqttConnection(props.connection)
   return (
     <ListItem
       button={true}
       selected={props.selected}
       style={{ display: 'block' }}
-      onClick={() => props.actions.selectConnection(props.connection.id)}
+      onClick={() => props.actions.connectionManager.selectConnection(props.connection.id)}
+      onDoubleClick={() => {
+        props.actions.connectionManager.selectConnection(props.connection.id)
+        connect()
+      }}
     >
       <Typography className={props.classes.name}>{props.connection.name || 'mqtt broker'}</Typography>
       <Typography className={props.classes.details}>{connection && connection.url}</Typography>
@@ -30,10 +44,12 @@ const ConnectionItem = (props: Props) => {
 
 export const mapDispatchToProps = (dispatch: any) => {
   return {
-    actions: bindActionCreators(connectionManagerActions, dispatch),
+    actions: {
+      connection: bindActionCreators(connectionActions, dispatch),
+      connectionManager: bindActionCreators(connectionManagerActions, dispatch),
+    },
   }
 }
-
 export const connectionItemStyle = (theme: Theme) => ({
   name: {
     width: '100%',

app/src/components/ConnectionSetup/ProfileList/index.tsx

@@ -7,7 +7,7 @@ import { connect } from 'react-redux'
 import { connectionManagerActions } from '../../../actions'
 import { ConnectionOptions } from '../../../model/ConnectionOptions'
 import { KeyCodes } from '../../../utils/KeyCodes'
-import { List, ListSubheader } from '@material-ui/core'
+import { List } from '@material-ui/core'
 import { Theme, withStyles } from '@material-ui/core/styles'
 import { useGlobalKeyEventHandler } from '../../../effects/useGlobalKeyEventHandler'
 

app/src/components/SettingsDrawer/BrokerStatistics.tsx

@@ -123,7 +123,7 @@ function renderStat(tree: q.Tree<TopicViewModel>, stat: Stats) {
     return null
   }
 
-  const str = node.message.payload ? Base64Message.toUnicodeString(node.message.payload) : ''
+  const str = node.message.payload ? node.message.payload.toUnicodeString() : ''
   let value = node.message && node.message.payload ? parseFloat(str) : NaN
   value = !isNaN(value) ? abbreviate(value) : str
 

app/src/components/Sidebar/CodeDiff/ChartPreview.tsx

@@ -52,16 +52,16 @@ function ChartPreview(props: Props) {
       />
     </Tooltip>
   ) : (
-    <Tooltip title="Add to chart panel, not enough data for preview">
-      <ShowChart
-        onClick={onClick}
-        className={props.classes.icon}
-        style={{ color: '#aaa' }}
-        data-test-type="ShowChart"
-        data-test={props.literal.path}
-      />
-    </Tooltip>
-  )
+      <Tooltip title="Add to chart panel, not enough data for preview">
+        <ShowChart
+          onClick={onClick}
+          className={props.classes.icon}
+          style={{ color: '#aaa' }}
+          data-test-type="ShowChart"
+          data-test={props.literal.path}
+        />
+      </Tooltip>
+    )
 
   return (
     <span>
@@ -69,7 +69,7 @@ function ChartPreview(props: Props) {
       <Popper open={open} anchorEl={chartIconRef.current} placement="left-end">
         <Fade in={open} timeout={300}>
           <Paper style={{ width: '300px' }}>
-            {open ? <TopicPlot history={props.treeNode.messageHistory} dotPath={props.literal.path} /> : <span />}
+            {open ? <TopicPlot node={props.treeNode} history={props.treeNode.messageHistory} dotPath={props.literal.path} /> : <span />}
           </Paper>
         </Fade>
       </Popper>

app/src/components/Sidebar/Publish/Publish.tsx

@@ -1,5 +1,5 @@
 import Editor from './Editor'
-import FormatAlignLeft from '@material-ui/icons/FormatAlignLeft'
+import { AttachFileOutlined, FormatAlignLeft } from '@material-ui/icons'
 import Message from './Model/Message'
 import Navigation from '@material-ui/icons/Navigation'
 import PublishHistory from './PublishHistory'
@@ -116,6 +116,10 @@ const EditorMode = memo(function EditorMode(props: {
     props.actions.setEditorMode(value)
   }, [])
 
+  const openFile = useCallback(() => {
+    props.actions.openFile()
+  }, [])
+
   const formatJson = useCallback(() => {
     if (props.payload) {
       try {
@@ -132,6 +136,7 @@ const EditorMode = memo(function EditorMode(props: {
       <div style={{ width: '100%', lineHeight: '64px', textAlign: 'center' }}>
         <EditorModeSelect value={props.editorMode} onChange={updateMode} focusEditor={props.focusEditor} />
         <FormatJsonButton editorMode={props.editorMode} focusEditor={props.focusEditor} formatJson={formatJson} />
+        <OpenFileButton editorMode={props.editorMode} openFile={openFile} />
         <div style={{ float: 'right' }}>
           <PublishButton publish={props.publish} focusEditor={props.focusEditor} />
         </div>
@@ -163,6 +168,20 @@ const FormatJsonButton = React.memo(function FormatJsonButton(props: {
   )
 })
 
+const OpenFileButton = React.memo(function OpenFileButton(props: { editorMode: string; openFile: () => void }) {
+  return (
+    <Tooltip title="Open file">
+      <Fab
+        style={{ width: '36px', height: '36px', margin: '0 8px' }}
+        onClick={props.openFile}
+        id="sidebar-publish-open-file"
+      >
+        <AttachFileOutlined style={{ fontSize: '20px' }} />
+      </Fab>
+    </Tooltip>
+  )
+})
+
 const PublishButton = memo(function PublishButton(props: { publish: () => void; focusEditor: () => void }) {
   const handleClickPublish = useCallback(
     (e: React.MouseEvent) => {

app/src/components/Sidebar/Sidebar.tsx

@@ -1,10 +1,9 @@
 import * as q from '../../../../backend/src/Model'
 import React, { useState, useEffect, useCallback } from 'react'
-import ExpandMore from '@material-ui/icons/ExpandMore'
 import NodeStats from './NodeStats'
 import ValuePanel from './ValueRenderer/ValuePanel'
 import { AppState } from '../../reducers'
-import { Badge, ExpansionPanel, ExpansionPanelDetails, ExpansionPanelSummary, Typography } from '@material-ui/core'
+import { ExpansionPanelDetails } from '@material-ui/core'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { settingsActions, sidebarActions } from '../../actions'
@@ -28,7 +27,7 @@ interface Props {
 }
 
 function useUpdateNodeWhenNodeReceivesUpdates(node?: q.TreeNode<any>) {
-  const [lastUpdate, setLastUpdate] = useState(0)
+  const [, setLastUpdate] = useState(0)
   const updateNode = useCallback(
     throttle(() => {
       setLastUpdate(node ? node.lastUpdate : 0)
@@ -52,7 +51,6 @@ function Sidebar(props: Props) {
   const { classes, tree, nodePath } = props
   const node = usePollingToFetchTreeNode(tree, nodePath || '')
   useUpdateNodeWhenNodeReceivesUpdates(node)
-  // console.log(node && node.path(), tree, nodePath)
 
   return (
     <div id="Sidebar" className={classes.drawer}>

app/src/components/Sidebar/TopicPanel/TopicPanel.tsx

@@ -6,19 +6,19 @@ import Topic from './Topic'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { RecursiveTopicDeleteButton } from './RecursiveTopicDeleteButton'
-import { sidebarActions } from '../../../actions'
 import { TopicDeleteButton } from './TopicDeleteButton'
+import { TopicTypeButton } from './TopicTypeButton'
+import { sidebarActions } from '../../../actions'
 
 const TopicPanel = (props: { node?: q.TreeNode<any>; actions: typeof sidebarActions }) => {
   const { node } = props
-  console.log(node && node.path())
+
   const copyTopic = node ? <Copy value={node.path()} /> : null
 
   const deleteTopic = useCallback((topic?: q.TreeNode<any>, recursive: boolean = false) => {
     if (!topic) {
       return
     }
-
     props.actions.clearTopic(topic, recursive)
   }, [])
 
@@ -29,11 +29,12 @@ const TopicPanel = (props: { node?: q.TreeNode<any>; actions: typeof sidebarActi
           Topic {copyTopic}
           <TopicDeleteButton node={node} deleteTopicAction={deleteTopic} />
           <RecursiveTopicDeleteButton node={node} deleteTopicAction={deleteTopic} />
+          <TopicTypeButton node={node} />
         </span>
         <Topic node={node} />
       </Panel>
     ),
-    [node, node && node.childTopicCount()]
+    [node, node?.childTopicCount()]
   )
 }
 

app/src/components/Sidebar/TopicPanel/TopicTypeButton.tsx

@@ -0,0 +1,103 @@
+import React, { useCallback, useMemo } from 'react'
+import * as q from '../../../../../backend/src/Model'
+import ClickAwayListener from '@material-ui/core/ClickAwayListener'
+import Grow from '@material-ui/core/Grow'
+import Button from '@material-ui/core/Button'
+import Paper from '@material-ui/core/Paper'
+import Popper from '@material-ui/core/Popper'
+import MenuItem from '@material-ui/core/MenuItem'
+import MenuList from '@material-ui/core/MenuList'
+import WarningRounded from '@material-ui/icons/WarningRounded'
+import { MessageDecoder, decoders } from '../../../decoders'
+import { Tooltip } from '@material-ui/core'
+
+export const TopicTypeButton = (props: { node?: q.TreeNode<any> }) => {
+  const { node } = props
+  if (!node || !node.message || !node.message.payload) {
+    return null
+  }
+
+  const options = decoders.flatMap(decoder => decoder.formats.map(format => [decoder, format] as const))
+
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
+  const [open, setOpen] = React.useState(false)
+
+  const selectOption = useCallback(
+    (decoder: MessageDecoder, format: string) => {
+      if (!node) {
+        return
+      }
+
+      node.viewModel.decoder = { decoder, format }
+      setOpen(false)
+    },
+    [node]
+  )
+
+  const handleToggle = useCallback(
+    (event: React.MouseEvent<HTMLElement>) => {
+      event.stopPropagation()
+      if (open === true) {
+        return
+      }
+      setAnchorEl(event.currentTarget)
+      setOpen(prevOpen => !prevOpen)
+    },
+    [open]
+  )
+
+  const handleClose = useCallback((event: React.MouseEvent<Document, MouseEvent>) => {
+    if (anchorEl && anchorEl.contains(event.target as HTMLElement)) {
+      return
+    }
+    setOpen(false)
+  }, [])
+
+  return (
+    <Button onClick={handleToggle}>
+      {props.node?.viewModel.decoder?.format ?? props.node?.type}
+      <Popper open={open} anchorEl={anchorEl} role={undefined} transition>
+        {({ TransitionProps, placement }) => (
+          <Grow
+            {...TransitionProps}
+            style={{
+              transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom',
+            }}
+          >
+            <Paper>
+              <ClickAwayListener onClickAway={handleClose}>
+                <MenuList id="topicTypeMode">
+                  {options.map(([decoder, format], index) => (
+                    <MenuItem
+                      key={format}
+                      selected={node && format === node.type}
+                      onClick={() => selectOption(decoder, format)}
+                    >
+                      <DecoderStatus decoder={decoder} format={format} node={node} />
+                    </MenuItem>
+                  ))}
+                </MenuList>
+              </ClickAwayListener>
+            </Paper>
+          </Grow>
+        )}
+      </Popper>
+    </Button>
+  )
+}
+
+function DecoderStatus({ node, decoder, format }: { node: q.TreeNode<any>; decoder: MessageDecoder; format: string }) {
+  const decoded = useMemo(() => {
+    return node.message?.payload && decoder.decode(node.message?.payload, format)
+  }, [node.message, decoder, format])
+
+  return decoded?.error ? (
+    <Tooltip title={decoded.error}>
+      <div>
+        {format} <WarningRounded />
+      </div>
+    </Tooltip>
+  ) : (
+    <>{format}</>
+  )
+}

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

@@ -5,7 +5,6 @@ import Copy from '../../helper/Copy'
 import DateFormatter from '../../helper/DateFormatter'
 import History from '../HistoryDrawer'
 import TopicPlot from '../../TopicPlot'
-import { Base64Message } from '../../../../../backend/src/Model/Base64Message'
 import { isPlottable } from '../CodeDiff/util'
 import { TopicViewModel } from '../../../model/TopicViewModel'
 import { bindActionCreators } from 'redux'
@@ -13,6 +12,8 @@ import { chartActions } from '../../../actions'
 import { connect } from 'react-redux'
 import CustomIconButton from '../../helper/CustomIconButton'
 import { MessageId } from '../MessageId'
+import { useSubscription } from '../../hooks/useSubscription'
+import { useDecoder } from '../../hooks/useDecoder'
 
 const throttle = require('lodash.throttle')
 
@@ -25,117 +26,100 @@ interface Props {
   }
 }
 
-interface State {
-  displayMessage?: q.Message
-  anchorEl?: HTMLElement
-  lastUpdate: number
-}
+export const MessageHistory: React.FC<Props> = props => {
+  const [, setLastUpdate] = React.useState(Date.now())
+  const updateNodeThrottled = React.useCallback(
+    throttle(() => {
+      setLastUpdate
+    }, 300),
+    []
+  )
 
-class MessageHistory extends React.PureComponent<Props, State> {
-  private updateNode = throttle(() => {
-    this.setState({ lastUpdate: Date.now() })
-  }, 300)
+  useSubscription(props.node?.onMessage, updateNodeThrottled)
+  const decodeMessage = useDecoder(props.node)
 
-  constructor(props: any) {
-    super(props)
-    this.state = { lastUpdate: 0 }
-  }
-
-  private addNodeToCharts = (event: React.MouseEvent) => {
+  function addNodeToCharts(event: React.MouseEvent) {
     event.preventDefault()
     event.stopPropagation()
 
-    const { node } = this.props
+    const { node } = props
     if (!node) {
       return null
     }
 
-    this.props.actions.charts.addChart({ topic: node.path() })
+    props.actions.charts.addChart({ topic: node.path() })
   }
 
-  private displayMessage = (index: number, eventTarget: EventTarget) => {
-    const message = this.props.node && this.props.node.messageHistory.toArray().reverse()[index]
+  function displayMessage(index: number, eventTarget: EventTarget) {
+    const message = props.node && props.node.messageHistory.toArray().reverse()[index]
     if (message) {
-      this.props.onSelect(message)
+      props.onSelect(message)
     }
   }
 
-  public componentWillReceiveProps(nextProps: Props) {
-    this.props.node && this.props.node.onMessage.unsubscribe(this.updateNode)
-    nextProps.node && nextProps.node.onMessage.subscribe(this.updateNode)
+  const { node } = props
+  if (!node) {
+    return null
   }
 
-  public componentDidMount() {
-    this.props.node && this.props.node.onMessage.subscribe(this.updateNode)
-  }
+  const history = node.messageHistory.toArray()
+  let previousMessage: q.Message | undefined = node.message
+  const historyElements = [...history].reverse().map((message, idx) => {
+    const value = node.message ? decodeMessage(message)?.message?.format()[0] ?? null : null
 
-  public componentWillUnMount() {
-    this.props.node && this.props.node.onMessage.unsubscribe(this.updateNode)
-  }
-
-  public render() {
-    const { node } = this.props
-    if (!node) {
-      return null
-    }
-
-    const history = node.messageHistory.toArray()
-    let previousMessage: q.Message | undefined = node.message
-    const historyElements = [...history].reverse().map((message, idx) => {
-      const value = message.payload ? Base64Message.toUnicodeString(message.payload) : ''
-      const element = {
-        value,
-        key: `${message.messageNumber}-${message.received}`,
-        title: (
+    const element = {
+      value: value ?? '',
+      key: `${message.messageNumber}-${message.received}`,
+      title: (
+        <span>
+          <div style={{ float: 'left' }}>
+            <DateFormatter date={message.received} />
+            {previousMessage && previousMessage !== message ? (
+              <i>
+                (-
+                <DateFormatter date={message.received} intervalSince={previousMessage.received} />)
+              </i>
+            ) : null}
+          </div>
           <span>
-            <div style={{ float: 'left' }}>
-              <DateFormatter date={message.received} />
-              {previousMessage && previousMessage !== message ? (
-                <i>
-                  (-
-                  <DateFormatter date={message.received} intervalSince={previousMessage.received} />)
-                </i>
-              ) : null}
-            </div>
-            <span>
-              &nbsp;
-              <MessageId message={message} />
-            </span>
-            <div style={{ float: 'right' }}>
-              <Copy value={value} />
-            </div>
+            &nbsp;
+            <MessageId message={message} />
           </span>
-        ),
-        selected: message && message === this.props.selected,
-      }
-      previousMessage = message
-      return element
-    })
+          <div style={{ float: 'right' }}>
+            <Copy value={value ?? ''} />
+          </div>
+        </span>
+      ),
+      selected: message && message === props.selected,
+    }
+    previousMessage = message
+    return element
+  })
 
-    const isMessagePlottable =
-      node.message && node.message.payload && isPlottable(Base64Message.toUnicodeString(node.message.payload))
-    return (
-      <div>
-        <History
-          items={historyElements}
-          contentTypeIndicator={
-            isMessagePlottable ? (
-              <CustomIconButton
-                style={{ height: '22px', width: '22px' }}
-                onClick={this.addNodeToCharts}
-                tooltip="Add to chart panel"
-              >
-                <ShowChart style={{ marginTop: '-5px' }} />
-              </CustomIconButton>
-            ) : undefined
-          }
-          onClick={this.displayMessage}
-        >
-          {isMessagePlottable ? <TopicPlot history={node.messageHistory} /> : null}
-        </History>
-      </div>
-    )
-  }
+  const value = node.message ? decodeMessage(node.message)?.message?.format()[0] ?? null : null
+
+  const isMessagePlottable = isPlottable(value)
+  return (
+    <div>
+      <History
+        items={historyElements}
+        contentTypeIndicator={
+          isMessagePlottable ? (
+            <CustomIconButton
+              style={{ height: '22px', width: '22px' }}
+              onClick={addNodeToCharts}
+              tooltip="Add to chart panel"
+            >
+              <ShowChart style={{ marginTop: '-5px' }} />
+            </CustomIconButton>
+          ) : undefined
+        }
+        onClick={displayMessage}
+      >
+        {isMessagePlottable ? <TopicPlot node={node} history={node.messageHistory} /> : null}
+      </History>
+    </div>
+  )
 }
 
 const mapDispatchToProps = (dispatch: any) => {
@@ -144,4 +128,4 @@ const mapDispatchToProps = (dispatch: any) => {
   }
 }
 
-export default connect(null, mapDispatchToProps)(MessageHistory)
+export default connect(null, mapDispatchToProps)(React.memo(MessageHistory))

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

@@ -1,19 +1,20 @@
 import * as q from '../../../../../backend/src/Model'
 import ActionButtons from './ActionButtons'
 import Copy from '../../helper/Copy'
+import Save from '../../helper/Save'
 import DateFormatter from '../../helper/DateFormatter'
 import MessageHistory from './MessageHistory'
 import Panel from '../Panel'
 import React, { useCallback } from 'react'
 import ValueRenderer from './ValueRenderer'
 import { AppState } from '../../../reducers'
-import { Base64Message } from '../../../../../backend/src/Model/Base64Message'
 import { bindActionCreators } from 'redux'
 import { Theme, Typography, withStyles } from '@material-ui/core'
 import { connect } from 'react-redux'
 import { sidebarActions } from '../../../actions'
 import DeleteSelectedTopicButton from './DeleteSelectedTopicButton'
 import { MessageId } from '../MessageId'
+import { useDecoder } from '../../hooks/useDecoder'
 
 interface Props {
   node?: q.TreeNode<any>
@@ -35,6 +36,7 @@ function RenderedValue(props: { node?: q.TreeNode<any>; compareMessage?: q.Messa
 
 function ValuePanel(props: Props) {
   const { node, compareMessage } = props
+  const decodeMessage = useDecoder(node)
 
   function renderViewOptions() {
     if (!props.node || !props.node.message) {
@@ -54,6 +56,16 @@ function ValuePanel(props: Props) {
     )
   }
 
+  const getDecodedValue = useCallback(() => {
+    return node?.message && decodeMessage(node.message)?.message?.toUnicodeString()
+  }, [node, decodeMessage])
+
+  const getData = () => {
+    if (node?.message && node.message.payload) {
+      return node.message.payload.base64Message
+    }
+  }
+
   function messageMetaInfo() {
     if (!props.node || !props.node.message) {
       return null
@@ -85,14 +97,16 @@ function ValuePanel(props: Props) {
     [compareMessage]
   )
 
-  const copyValue =
-    node && node.message && node.message.payload ? (
-      <Copy value={Base64Message.toUnicodeString(node.message.payload)} />
-    ) : null
+  const [value] =
+    node && node.message && node.message.payload ? node.message.payload?.format(node.type) : [null, undefined]
+  const copyValue = value ? <Copy getValue={getDecodedValue} /> : null
+  const saveValue = value ? <Save getData={getData} /> : null
 
   return (
     <Panel>
-      <span>Value {copyValue}</span>
+      <span>
+        Value {copyValue} {saveValue}
+      </span>
       <span style={{ width: '100%' }}>
         {renderViewOptions()}
         <div style={{ marginBottom: '-8px', marginTop: '8px' }}>

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

@@ -1,12 +1,13 @@
 import * as q from '../../../../../backend/src/Model'
-import * as React from 'react'
+import React, { useMemo } from 'react'
 import CodeDiff from '../CodeDiff'
 import { AppState } from '../../../reducers'
-import { Base64Message } from '../../../../../backend/src/Model/Base64Message'
 import { connect } from 'react-redux'
 import { ValueRendererDisplayMode } from '../../../reducers/Settings'
 import { Fade } from '@material-ui/core'
 import { Decoder } from '../../../../../backend/src/Model/Decoder'
+import { useDecoder } from '../../hooks/useDecoder'
+import { TopicViewModel } from '../../../model/TopicViewModel'
 
 interface Props {
   message: q.Message
@@ -15,103 +16,114 @@ interface Props {
   renderMode: ValueRendererDisplayMode
 }
 
-interface State {
-  width: number
+type Language = 'json'
+
+function renderDiff(
+  treeNode: q.TreeNode<TopicViewModel>,
+  compareWithPreviousMessage: boolean,
+  current: string = '',
+  previous: string = '',
+  title?: string,
+  language?: Language
+) {
+  return (
+    <CodeDiff
+      treeNode={treeNode}
+      previous={previous}
+      current={current}
+      title={title}
+      language={language}
+      nameOfCompareMessage={compareWithPreviousMessage ? 'selected' : 'previous'}
+    />
+  )
 }
 
-class ValueRenderer extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props)
-    this.state = { width: 0 }
-  }
+function renderDiffMode(
+  treeNode: q.TreeNode<TopicViewModel>,
+  currentStr: string | undefined,
+  compareStr: string | undefined,
+  currentType: Language | undefined,
+  compareType: Language | undefined,
+  compareWithPreviousMessage: boolean
+) {
+  const language = currentType === compareType && compareType === 'json' ? 'json' : undefined
 
-  private renderDiff(current: string = '', previous: string = '', title?: string, language?: 'json') {
-    return (
-      <CodeDiff
-        treeNode={this.props.treeNode}
-        previous={previous}
-        current={current}
-        title={title}
-        language={language}
-        nameOfCompareMessage={this.props.compareWith ? 'selected' : 'previous'}
-      />
-    )
-  }
+  return <div>{renderDiff(treeNode, compareWithPreviousMessage, currentStr, compareStr, undefined, language)}</div>
+}
 
-  private convertMessage(msg?: Base64Message): [string | undefined, 'json' | undefined] {
-    if (!msg) {
-      return [undefined, undefined]
-    }
+function renderRawMode(
+  treeNode: q.TreeNode<TopicViewModel>,
+  currentStr: string | undefined,
+  compareStr: string | undefined,
+  currentType: Language | undefined,
+  compareType: Language | undefined,
+  compareWithPreviousMessage: boolean
+) {
+  return (
+    <div>
+      {renderDiff(treeNode, compareWithPreviousMessage, currentStr, currentStr, undefined, currentType)}
+      <Fade in={Boolean(compareStr)} timeout={400}>
+        <div>
+          {Boolean(compareStr)
+            ? renderDiff(treeNode, compareWithPreviousMessage, compareStr, compareStr, 'selected', compareType)
+            : null}
+        </div>
+      </Fade>
+    </div>
+  )
+}
 
-    const str = Base64Message.toUnicodeString(msg)
-    try {
-      JSON.parse(str)
-    } catch (error) {
-      return [str, undefined]
-    }
+export const ValueRenderer: React.FC<Props> = ({ treeNode, compareWith: compare, message, renderMode }) => {
+  const decodeMessage = useDecoder(treeNode)
+  const decodedMessage = useMemo(() => decodeMessage(message), [decodeMessage, message])
 
-    return [this.messageToPrettyJson(str), 'json']
-  }
+  const previousMessages = treeNode.messageHistory.toArray()
+  const previousMessage = previousMessages[previousMessages.length - 2]
+  const compareMessage = compare || previousMessage || message
+  const compareWithPreviousMessage = !!compare
 
-  private messageToPrettyJson(str: string): string | undefined {
-    try {
-      const json = JSON.parse(str)
-      return JSON.stringify(json, undefined, '  ')
-    } catch {
-      return undefined
-    }
-  }
+  const [currentStr, currentType] = useMemo(
+    () => decodedMessage?.message?.format(treeNode.type) ?? [],
+    [decodedMessage, treeNode.type]
+  )
+  const [compareStr, compareType] = useMemo(
+    () => decodeMessage(compareMessage)?.message?.format(treeNode.type) ?? [],
+    [compareMessage, decodeMessage, treeNode.type]
+  )
 
-  private renderRawMode(message: q.Message, compare?: q.Message) {
-    if (!message.payload) {
-      return
-    }
-    const [value, valueLanguage] = this.convertMessage(message.payload)
-    const [compareStr, compareStrLanguage] =
-      compare && compare.payload ? this.convertMessage(compare.payload) : [undefined, undefined]
-
-    return (
-      <div>
-        {this.renderDiff(value, value, undefined, valueLanguage)}
-        <Fade in={Boolean(compareStr)} timeout={400}>
-          <div>
-            {Boolean(compareStr) ? this.renderDiff(compareStr, compareStr, 'selected', compareStrLanguage) : null}
-          </div>
-        </Fade>
-      </div>
-    )
-  }
-
-  public render() {
-    return (
-      <div style={{ padding: '0px 0px 8px 0px', width: '100%' }}>
-        {this.props.message?.payload?.decoder === Decoder.SPARKPLUG && 'Decoded SparkplugB'}
-        {this.renderValue()}
-      </div>
-    )
-  }
-
-  public renderValue() {
-    const { message, treeNode, compareWith, renderMode } = this.props
-    const previousMessages = treeNode.messageHistory.toArray()
-    const previousMessage = previousMessages[previousMessages.length - 2]
-    const compareMessage = compareWith || previousMessage || message
-
-    if (renderMode === 'raw') {
-      return this.renderRawMode(message, compareWith)
-    }
-    if (!message.payload) {
+  function renderValue(
+    treeNode: q.TreeNode<TopicViewModel>,
+    currentStr: string | undefined,
+    compareStr: string | undefined,
+    currentType: Language | undefined,
+    compareType: Language | undefined,
+    renderMode: string,
+    compareWithPreviousMessage: boolean
+  ) {
+    if (!decodedMessage) {
       return null
     }
 
-    const compareValue = compareMessage.payload || message.payload
-    const [current, currentLanguage] = this.convertMessage(message.payload)
-    const [compare, compareLanguage] = this.convertMessage(compareValue)
-
-    const language = currentLanguage === compareLanguage && compareLanguage === 'json' ? 'json' : undefined
-
-    return this.renderDiff(current, compare, undefined, language)
+    switch (renderMode) {
+      case 'diff':
+        return renderDiffMode(treeNode, currentStr, compareStr, currentType, compareType, compareWithPreviousMessage)
+      default:
+        return renderRawMode(treeNode, currentStr, compareStr, currentType, compareType, compareWithPreviousMessage)
+    }
   }
+
+  const renderedValue = useMemo(
+    () =>
+      renderValue(treeNode, currentStr, compareStr, currentType, compareType, renderMode, compareWithPreviousMessage),
+    [treeNode, currentStr, compareStr, currentType, compareType, renderMode, compareWithPreviousMessage]
+  )
+
+  return (
+    <div style={{ padding: '0px 0px 8px 0px', width: '100%' }}>
+      {decodedMessage?.decoder === Decoder.SPARKPLUG && 'Decoded SparkplugB'}
+      {renderedValue}
+    </div>
+  )
 }
 
 const mapStateToProps = (state: AppState) => {

app/src/components/TopicPlot.tsx

@@ -2,12 +2,14 @@ import * as dotProp from 'dot-prop'
 import * as q from '../../../backend/src/Model'
 import * as React from 'react'
 import PlotHistory from './Chart/Chart'
-import { Base64Message } from '../../../backend/src/Model/Base64Message'
 import { toPlottableValue } from './Sidebar/CodeDiff/util'
 import { PlotCurveTypes } from '../reducers/Charts'
+import { DecoderFunction, useDecoder } from './hooks/useDecoder'
+
 const parseDuration = require('parse-duration')
 
 interface Props {
+  node?: q.TreeNode<any>
   history: q.MessageHistory
   dotPath?: string
   timeInterval?: string
@@ -25,21 +27,27 @@ function filterUsingTimeRange(startTime: number | undefined, data: Array<q.Messa
   return data
 }
 
-function nodeToHistory(startTime: number | undefined, history: q.MessageHistory) {
+function nodeToHistory(decodeMessage: DecoderFunction, startTime: number | undefined, history: q.MessageHistory) {
   return filterUsingTimeRange(startTime, history.toArray())
     .map((message: q.Message) => {
-      const value = message.payload ? toPlottableValue(Base64Message.toUnicodeString(message.payload)) : NaN
-      return { x: message.received.getTime(), y: toPlottableValue(value) }
+      const decoded = decodeMessage(message)?.message?.toUnicodeString()
+      return { x: message.received.getTime(), y: toPlottableValue(decoded) }
     })
     .filter(data => !isNaN(data.y as any)) as any
 }
 
-function nodeDotPathToHistory(startTime: number | undefined, history: q.MessageHistory, dotPath: string) {
+function nodeDotPathToHistory(
+  decodeMessage: DecoderFunction,
+  startTime: number | undefined,
+  history: q.MessageHistory,
+  dotPath: string
+) {
   return filterUsingTimeRange(startTime, history.toArray())
     .map((message: q.Message) => {
       let json: any = {}
       try {
-        json = message.payload ? JSON.parse(Base64Message.toUnicodeString(message.payload)) : {}
+        const decoded = decodeMessage(message)?.message
+        json = decoded ? JSON.parse(decoded.toUnicodeString()) : {}
       } catch (ignore) {}
 
       const value = dotProp.get(json, dotPath)
@@ -50,14 +58,17 @@ function nodeDotPathToHistory(startTime: number | undefined, history: q.MessageH
 }
 
 function TopicPlot(props: Props) {
+  const decodeMessage = useDecoder(props.node)
   const startOffset = props.timeInterval ? parseDuration(props.timeInterval) : undefined
-  const data = React.useMemo(
-    () =>
-      props.dotPath
-        ? nodeDotPathToHistory(startOffset, props.history, props.dotPath)
-        : nodeToHistory(startOffset, props.history),
-    [props.history.last(), startOffset, props.dotPath]
-  )
+  const data = React.useMemo(() => {
+    if (!props.node) {
+      return []
+    }
+
+    return props.dotPath
+      ? nodeDotPathToHistory(decodeMessage, startOffset, props.history, props.dotPath)
+      : nodeToHistory(decodeMessage, startOffset, props.history)
+  }, [props.history.last(), startOffset, props.dotPath])
 
   return (
     <PlotHistory

app/src/components/Tree/TreeNode/TreeNodeTitle.tsx

@@ -1,8 +1,8 @@
 import * as q from '../../../../../backend/src/Model'
 import React, { memo } from 'react'
-import { Base64Message } from '../../../../../backend/src/Model/Base64Message'
 import { Theme, withStyles } from '@material-ui/core'
 import { TopicViewModel } from '../../../model/TopicViewModel'
+import { useDecoder } from '../../hooks/useDecoder'
 
 export interface TreeNodeProps extends React.HTMLAttributes<HTMLElement> {
   treeNode: q.TreeNode<TopicViewModel>
@@ -14,67 +14,72 @@ export interface TreeNodeProps extends React.HTMLAttributes<HTMLElement> {
   classes: any
 }
 
-class TreeNodeTitle extends React.PureComponent<TreeNodeProps, {}> {
-  private renderSourceEdge() {
-    const name = this.props.name || (this.props.treeNode.sourceEdge && this.props.treeNode.sourceEdge.name)
+export const TreeNodeTitle = (props: TreeNodeProps) => {
+  const decodeMessage = useDecoder(props.treeNode)
+
+  function renderSourceEdge() {
+    const name = props.name || (props.treeNode.sourceEdge && props.treeNode.sourceEdge.name)
 
     return (
-      <span key="edge" className={this.props.classes.sourceEdge} data-test-topic={name}>
+      <span key="edge" className={props.classes.sourceEdge} data-test-topic={name}>
         {name}
       </span>
     )
   }
 
-  private truncatedMessage() {
+  function truncatedMessage() {
     const limit = 400
-    if (!this.props.treeNode.message || !this.props.treeNode.message.payload) {
+    if (!props.treeNode.message || !props.treeNode.message.payload) {
       return ''
     }
+    const [value = ''] = decodeMessage(props.treeNode.message)?.message?.format(props.treeNode.type) ?? []
 
-    const str = Base64Message.toUnicodeString(this.props.treeNode.message.payload)
-    return str.length > limit ? `${str.slice(0, limit)}…` : str
+    return value.length > limit ? `${value.slice(0, limit)}…` : value
   }
 
-  private renderValue() {
-    return this.props.treeNode.message &&
-      this.props.treeNode.message.payload &&
-      this.props.treeNode.message.length > 0 ? (
-      <span key="value" className={this.props.classes.value}>
+  function renderValue() {
+    return props.treeNode.message && props.treeNode.message.payload && props.treeNode.message.length > 0 ? (
+      <span key="value" className={props.classes.value}>
         {' '}
-        = {this.truncatedMessage()}
+        = {truncatedMessage()}
       </span>
     ) : null
   }
 
-  private renderExpander() {
-    if (this.props.treeNode.edgeCount() === 0) {
+  function renderExpander() {
+    if (props.treeNode.edgeCount() === 0) {
       return null
     }
 
     return (
-      <span key="expander" className={this.props.classes.expander} onClick={this.props.toggleCollapsed}>
-        {this.props.collapsed ? '▶' : '▼'}
+      <span key="expander" className={props.classes.expander} onClick={props.toggleCollapsed}>
+        {props.collapsed ? '▶' : '▼'}
       </span>
     )
   }
 
-  private renderMetadata() {
-    if (this.props.treeNode.edgeCount() === 0 || !this.props.collapsed) {
+  function renderMetadata() {
+    if (props.treeNode.edgeCount() === 0 || !props.collapsed) {
       return null
     }
 
-    const messages = this.props.treeNode.leafMessageCount()
-    const topicCount = this.props.treeNode.childTopicCount()
+    const messages = props.treeNode.leafMessageCount()
+    const topicCount = props.treeNode.childTopicCount()
     return (
-      <span key="metadata" className={this.props.classes.collapsedSubnodes}>{` (${topicCount} ${
+      <span key="metadata" className={props.classes.collapsedSubnodes}>{` (${topicCount} ${
         topicCount === 1 ? 'topic' : 'topics'
       }, ${messages} ${messages === 1 ? 'message' : 'messages'})`}</span>
     )
   }
 
-  public render() {
-    return [this.renderExpander(), this.renderSourceEdge(), this.renderMetadata(), this.renderValue()]
-  }
+  return (
+    <>
+      {renderExpander()}
+      {renderSourceEdge()}
+      {renderMetadata()}
+      {renderValue()}
+    </>
+  )
 }
 
 const styles = (theme: Theme) => ({

app/src/components/Tree/TreeNode/effects/useViewModel.tsx

@@ -0,0 +1,18 @@
+import * as q from '../../../../../../backend/src/Model'
+import { useEffect } from 'react'
+import { TopicViewModel } from '../../../../model/TopicViewModel'
+
+export function useViewModel(treeNode: q.TreeNode<TopicViewModel> | undefined) {
+  useEffect(() => {
+    if (treeNode && !treeNode?.viewModel) {
+      treeNode.viewModel = new TopicViewModel(treeNode)
+    }
+    treeNode?.viewModel?.retain()
+
+    return function cleanup() {
+      treeNode?.viewModel?.release()
+    }
+  }, [treeNode])
+
+  return treeNode?.viewModel
+}

app/src/components/Tree/TreeNode/effects/useViewModelSubscriptions.tsx

@@ -1,6 +1,8 @@
 import * as q from '../../../../../../backend/src/Model'
-import React, { useEffect } from 'react'
+import React, { useCallback } from 'react'
 import { TopicViewModel } from '../../../../model/TopicViewModel'
+import { useSubscription } from '../../../hooks/useSubscription'
+import { useViewModel } from './useViewModel'
 
 export function useViewModelSubscriptions(
   treeNode: q.TreeNode<TopicViewModel>,
@@ -8,37 +10,21 @@ export function useViewModelSubscriptions(
   setSelected: (value: boolean) => void,
   setCollapsedOverride: (value: boolean) => void
 ) {
-  useEffect(() => {
-    const selectionDidChange = () => {
-      const selected = treeNode.viewModel && treeNode.viewModel.isSelected()
-      treeNode.viewModel && setSelected(Boolean(selected))
+  const viewModel = useViewModel(treeNode)
 
-      if (selected && nodeRef && nodeRef.current) {
-        nodeRef.current.focus({ preventScroll: false })
-      }
-    }
+  const selectionDidChange = useCallback(() => {
+    const selected = viewModel && viewModel.isSelected()
+    viewModel && setSelected(Boolean(selected))
 
-    const expandedDidChange = () => {
-      treeNode.viewModel && setCollapsedOverride(!treeNode.viewModel.isExpanded())
+    if (selected && nodeRef && nodeRef.current) {
+      nodeRef.current.focus({ preventScroll: false })
     }
+  }, [viewModel])
 
-    function addSubscriber() {
-      treeNode.viewModel = new TopicViewModel()
-      treeNode.viewModel.selectionChange.subscribe(selectionDidChange)
-      treeNode.viewModel.expandedChange.subscribe(expandedDidChange)
-    }
+  const expandedDidChange = useCallback(() => {
+    viewModel && setCollapsedOverride(!viewModel.isExpanded())
+  }, [viewModel])
 
-    function removeSubscriber() {
-      if (treeNode.viewModel) {
-        treeNode.viewModel.selectionChange.unsubscribe(selectionDidChange)
-        treeNode.viewModel.expandedChange.unsubscribe(expandedDidChange)
-        treeNode.viewModel = undefined
-      }
-    }
-
-    addSubscriber()
-    return function cleanup() {
-      removeSubscriber()
-    }
-  }, [treeNode])
+  useSubscription(viewModel?.selectionChange, selectionDidChange)
+  useSubscription(viewModel?.expandedChange, expandedDidChange)
 }

app/src/components/UpdateNotifier.tsx

@@ -1,7 +1,7 @@
-import * as compareVersions from 'compare-versions'
-import * as electron from 'electron'
-import * as os from 'os'
-import * as React from 'react'
+import compareVersions from 'compare-versions'
+import electron from 'electron'
+import os from 'os'
+import React from 'react'
 import axios from 'axios'
 import Close from '@material-ui/icons/Close'
 import CloudDownload from '@material-ui/icons/CloudDownload'

app/src/components/helper/Copy.tsx

@@ -9,7 +9,8 @@ import { globalActions } from '../../actions'
 const copy = require('copy-text-to-clipboard')
 
 interface Props {
-  value: string
+  value?: string
+  getValue?: () => string | undefined
   actions: {
     global: typeof globalActions
   }
@@ -28,7 +29,7 @@ class Copy extends React.PureComponent<Props, State> {
   private handleClick = (event: React.MouseEvent) => {
     event.stopPropagation()
 
-    copy(this.props.value)
+    copy(this.props.value ?? this.props.getValue?.())
     this.props.actions.global.showNotification('Copied to clipboard')
     this.setState({ didCopy: true })
     setTimeout(() => {

app/src/components/helper/DateFormatter.tsx

@@ -1,5 +1,5 @@
-import * as moment from 'moment'
-import * as React from 'react'
+import moment from 'moment'
+import React from 'react'
 import { AppState } from '../../reducers'
 import { connect } from 'react-redux'
 
@@ -12,6 +12,7 @@ interface Props {
 }
 
 const unitMapping = {
+  ms: 'milliseconds',
   s: 'seconds',
   m: 'minutes',
   h: 'hours',
@@ -21,7 +22,7 @@ class DateFormatter extends React.PureComponent<Props, {}> {
   private intervalSince(intervalSince: Date) {
     const interval = intervalSince.getTime() - this.props.date.getTime()
     const unit = this.unitForInterval(interval)
-    return `${Math.round(moment.duration(interval).as(unit) * 100) / 100} ${unitMapping[unit]}`
+    return `${moment.duration(interval).as(unit).toFixed(3)} ${unitMapping[unit]}`
   }
 
   private legacyDate() {
@@ -31,10 +32,11 @@ class DateFormatter extends React.PureComponent<Props, {}> {
   private localizedDate(locale: string) {
     return moment(this.props.date)
       .locale(locale)
-      .format(this.props.timeFirst ? 'LTS L' : 'L LTS')
+      .format(this.props.timeFirst ? 'LTS.SSS L' : 'L LTS.SSS')
   }
 
   private unitForInterval(milliseconds: number) {
+    const oneSecond = 1000 * 1
     const oneMinute = 1000 * 60
     const oneHour = oneMinute * 60
 
@@ -46,7 +48,11 @@ class DateFormatter extends React.PureComponent<Props, {}> {
       return 'm'
     }
 
-    return 's'
+    if (milliseconds > oneSecond * 0.5) {
+      return 's'
+    }
+
+    return 'ms'
   }
 
   public render() {

app/src/components/helper/Save.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react'
+import { connect } from 'react-redux'
+import Check from '@material-ui/icons/Check'
+import CustomIconButton from './CustomIconButton'
+
+import { SaveAlt } from '@material-ui/icons'
+import { bindActionCreators } from 'redux'
+import { rendererRpc, writeToFile } from '../../../../events'
+import { makeSaveDialogRpc } from '../../../../events/OpenDialogRequest'
+
+import { globalActions } from '../../actions'
+
+export async function saveToFile(data: string): Promise<string | undefined> {
+  const rejectReasons = {
+    errorWritingFile: 'Error writing file',
+  }
+
+  const { canceled, filePath } = await rendererRpc.call(makeSaveDialogRpc(), {
+    securityScopedBookmarks: true,
+  })
+
+  if (!canceled && filePath !== undefined) {
+    try {
+      const filename = await rendererRpc.call(writeToFile, { filePath, data })
+      return filePath
+    } catch (error) {
+      throw rejectReasons.errorWritingFile
+    }
+  }
+}
+
+interface Props {
+  getData: () => string | undefined
+  actions: {
+    global: typeof globalActions
+  }
+}
+
+interface State {
+  didSave: boolean
+}
+
+class Save extends React.PureComponent<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { didSave: false }
+  }
+
+  private handleClick = async (event: React.MouseEvent) => {
+    event.stopPropagation()
+    const data = this.props.getData()
+    if (data != undefined) {
+      const filename = await saveToFile(data)
+      this.props.actions.global.showNotification(`Saved to ${filename}`)
+      this.setState({ didSave: true })
+      setTimeout(() => {
+        this.setState({ didSave: false })
+      }, 1500)
+    }
+  }
+
+  public render() {
+    const icon = !this.state.didSave ? (
+      <SaveAlt fontSize="inherit" />
+    ) : (
+      <Check fontSize="inherit" style={{ cursor: 'default' }} />
+    )
+
+    return (
+      <CustomIconButton onClick={this.handleClick} tooltip="Save to file">
+        <div style={{ marginTop: '2px' }}>{icon}</div>
+      </CustomIconButton>
+    )
+  }
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: {
+      global: bindActionCreators(globalActions, dispatch),
+    },
+  }
+}
+
+export default connect(undefined, mapDispatchToProps)(Save)

app/src/components/hooks/useDecoder.ts

@@ -0,0 +1,31 @@
+import * as q from '../../../../backend/src/Model'
+import { useCallback, useState } from 'react'
+import { TopicViewModel } from '../../model/TopicViewModel'
+import { useSubscription } from './useSubscription'
+import { useViewModel } from '../Tree/TreeNode/effects/useViewModel'
+import { DecoderEnvelope } from '../../decoders/DecoderEnvelope'
+import { Decoder } from '../../../../backend/src/Model/Decoder'
+
+export type DecoderFunction = (message: q.Message) => DecoderEnvelope | undefined
+
+/**
+ * Provides the latest decoder for a topic
+ *
+ * @param treeNode
+ * @returns
+ */
+export function useDecoder(treeNode: q.TreeNode<TopicViewModel> | undefined): DecoderFunction {
+  const viewModel = useViewModel(treeNode)
+  const [decoder, setDecoder] = useState(viewModel?.decoder)
+
+  useSubscription(viewModel?.onDecoderChange, setDecoder)
+
+  return useCallback(
+    message => {
+      return decoder && message.payload
+        ? decoder.decoder.decode(message.payload, decoder.format)
+        : { message: message.payload ?? undefined, decoder: Decoder.NONE }
+    },
+    [decoder]
+  )
+}

app/src/components/hooks/useSubscription.ts

@@ -0,0 +1,10 @@
+import { useEffect } from 'react'
+import { EventDispatcher } from '../../../../events'
+
+export function useSubscription<T>(dispatcher: EventDispatcher<T> | undefined, callback: (value: T) => void) {
+  useEffect(() => {
+    dispatcher?.subscribe(callback)
+
+    return () => dispatcher?.unsubscribe(callback)
+  }, [dispatcher, callback])
+}

app/src/decoders/BinaryDecoder.ts

@@ -0,0 +1,56 @@
+import { Base64Message } from '../../../backend/src/Model/Base64Message'
+import { Decoder } from '../../../backend/src/Model/Decoder'
+import { DecoderEnvelope } from './DecoderEnvelope'
+import { MessageDecoder } from './MessageDecoder'
+
+type BinaryFormats =
+  | 'int8'
+  | 'int16'
+  | 'int32'
+  | 'int64'
+  | 'uint8'
+  | 'uint16'
+  | 'uint32'
+  | 'uint64'
+  | 'float'
+  | 'double'
+
+/**
+ * Binary decode primitive binary data type and arrays of these
+ */
+export const BinaryDecoder: MessageDecoder<BinaryFormats> = {
+  formats: ['int8', 'int16', 'int32', 'int64', 'uint8', 'uint16', 'uint32', 'uint64', 'float', 'double'],
+  decode(input: Base64Message, format: BinaryFormats): DecoderEnvelope {
+    const decodingOption = {
+      int8: [Buffer.prototype.readInt8, 1],
+      int16: [Buffer.prototype.readInt16LE, 2],
+      int32: [Buffer.prototype.readInt32LE, 4],
+      int64: [Buffer.prototype.readBigInt64LE, 8],
+      uint8: [Buffer.prototype.readUint8, 1],
+      uint16: [Buffer.prototype.readUint16LE, 2],
+      uint32: [Buffer.prototype.readUint32LE, 4],
+      uint64: [Buffer.prototype.readBigUint64LE, 8],
+      float: [Buffer.prototype.readFloatLE, 4],
+      double: [Buffer.prototype.readDoubleLE, 8],
+    } as const
+
+    const [readNumber, bytesToRead] = decodingOption[format]
+
+    const buf = input.toBuffer()
+    let str: String[] = []
+    if (buf.length % bytesToRead !== 0) {
+      return {
+        error: 'Data type does not align with message',
+        decoder: Decoder.NONE,
+      }
+    }
+    for (let index = 0; index < buf.length; index += bytesToRead) {
+      str.push((readNumber as any).apply(buf, [index]).toString())
+    }
+
+    return {
+      message: Base64Message.fromString(JSON.stringify(str.length === 1 ? str[0] : str)),
+      decoder: Decoder.NONE,
+    }
+  },
+}

app/src/decoders/DecoderEnvelope.ts

@@ -0,0 +1,8 @@
+import { Base64Message } from '../../../backend/src/Model/Base64Message'
+import { Decoder } from '../../../backend/src/Model/Decoder'
+
+export interface DecoderEnvelope {
+  message?: Base64Message
+  error?: string
+  decoder: Decoder
+}

app/src/decoders/MessageDecoder.ts

@@ -0,0 +1,13 @@
+import { Base64Message } from '../../../backend/src/Model/Base64Message'
+import { DecoderEnvelope } from './DecoderEnvelope'
+
+export interface MessageDecoder<T = string> {
+  /**
+   * Can be used to
+   * @param topic
+   */
+  formats: T[]
+  canDecodeTopic?(topic: string): boolean
+  canDecodeData?(data: Base64Message): boolean
+  decode(input: Base64Message, format: T | string | undefined): DecoderEnvelope
+}

app/src/decoders/SparkplugBDecoder.ts

@@ -0,0 +1,28 @@
+import { Base64Message } from '../../../backend/src/Model/Base64Message'
+import { Decoder } from '../../../backend/src/Model/Decoder'
+import { get } from 'sparkplug-payload'
+import { MessageDecoder } from './MessageDecoder'
+var sparkplug = get('spBv1.0')
+
+export const SparkplugDecoder: MessageDecoder = {
+  formats: ['Sparkplug'],
+  canDecodeTopic(topic: string) {
+    return !!topic.match(/^spBv1\.0\/[^/]+\/[ND](DATA|CMD|DEATH|BIRTH)\/[^/]+(\/[^/]+)?$/u)
+  },
+  decode(input) {
+    try {
+      const message = Base64Message.fromString(
+        JSON.stringify(
+          // @ts-ignore
+          sparkplug.decodePayload(new Uint8Array(input.toBuffer()))
+        )
+      )
+      return { message, decoder: Decoder.SPARKPLUG }
+    } catch {
+      return {
+        error: 'Failed to decode sparkplugb payload',
+        decoder: Decoder.NONE,
+      }
+    }
+  },
+}

app/src/decoders/StringDecoder.ts

@@ -0,0 +1,10 @@
+import { Base64Message } from '../../../backend/src/Model/Base64Message'
+import { Decoder } from '../../../backend/src/Model/Decoder'
+import { MessageDecoder } from './MessageDecoder'
+
+export const StringDecoder: MessageDecoder = {
+  formats: ['string'],
+  decode(input: Base64Message) {
+    return { message: input, decoder: Decoder.NONE }
+  },
+}

app/src/decoders/index.ts

@@ -0,0 +1,6 @@
+import { StringDecoder } from './StringDecoder'
+import { BinaryDecoder } from './BinaryDecoder'
+import { SparkplugDecoder } from './SparkplugBDecoder'
+export * from './MessageDecoder'
+
+export const decoders = [SparkplugDecoder, BinaryDecoder, StringDecoder] as const

app/src/model/ConnectionOptions.ts

@@ -77,11 +77,11 @@ export function createEmptyConnection(): ConnectionOptions {
 export function makeDefaultConnections() {
   return {
     // remember: there was also iot.eclipse.org once
-    'mqtt.eclipse.org': {
+    'mqtt.eclipseprojects.io': {
       ...createEmptyConnection(),
-      id: 'mqtt.eclipse.org',
-      name: 'mqtt.eclipse.org',
-      host: 'mqtt.eclipse.org',
+      id: 'mqtt.eclipseprojects.io',
+      name: 'mqtt.eclipseprojects.io',
+      host: 'mqtt.eclipseprojects.io',
     },
     'test.mosquitto.org': {
       ...createEmptyConnection(),

app/src/model/LegacyConnectionSettings.ts

@@ -1,5 +1,4 @@
 import { ConnectionOptions, createEmptyConnection } from './ConnectionOptions'
-import { v4 } from 'uuid'
 
 interface LegacyConnectionSettings {
   host: string

app/src/model/TopicViewModel.ts

@@ -1,19 +1,77 @@
+import * as q from '../../../backend/src/Model'
 import { Destroyable } from '../../../backend/src/Model/Destroyable'
+import { MessageDecoder, decoders } from '../decoders'
 import { EventDispatcher } from '../../../events'
 
+function findDecoder<T extends Destroyable>(node: q.TreeNode<T>): TopicDecoder | undefined {
+  const decoder = decoders.find(
+    decoder =>
+      decoder.canDecodeTopic?.(node.path()) || (node.message?.payload && decoder.canDecodeData?.(node.message?.payload))
+  )
+
+  return decoder
+    ? {
+        decoder,
+        format: undefined,
+      }
+    : undefined
+}
+
+type TopicDecoder = { decoder: MessageDecoder; format: string | undefined }
+
 export class TopicViewModel implements Destroyable {
   private selected: boolean
   private expanded: boolean
+  private owner: q.TreeNode<TopicViewModel> | undefined
+  private _decoder?: TopicDecoder
+  /**
+   * Reference counter for useViewModel hook
+   */
+  private referenceCounter = 0
   public selectionChange = new EventDispatcher<void>()
   public expandedChange = new EventDispatcher<void>()
+  public onDecoderChange = new EventDispatcher<TopicDecoder | undefined>()
 
-  public constructor() {
+  get decoder(): TopicDecoder | undefined {
+    if (!this._decoder) {
+      this._decoder = this.owner && findDecoder(this.owner)
+    }
+
+    return this._decoder
+  }
+
+  set decoder(override: TopicDecoder | undefined) {
+    this._decoder = override
+
+    this.onDecoderChange.dispatch(override)
+  }
+
+  public constructor(treeNode: q.TreeNode<TopicViewModel>) {
+    this.owner = treeNode
     this.selected = false
     this.expanded = false
   }
 
+  public retain() {
+    this.referenceCounter += 1
+  }
+
+  public release() {
+    this.referenceCounter -= 1
+    if (this.referenceCounter <= 0) {
+      this.destroy()
+    }
+  }
+
   public destroy() {
+    console.log('destroy', this.referenceCounter)
+    if (this.owner) {
+      this.owner.viewModel = undefined
+      this.owner = undefined
+    }
     this.selectionChange.removeAllListeners()
+    this.onDecoderChange.removeAllListeners()
+    this.expandedChange.removeAllListeners()
   }
 
   public isSelected() {

app/tsconfig.json

@@ -4,38 +4,26 @@
     "noImplicitAny": true,
     "strictNullChecks": true,
     "strict": true,
-    "lib": [
-      "es2017",
-      "dom"
-    ],
+    "lib": ["es2019", "dom"],
     "moduleResolution": "node",
     "outDir": "./build/",
     "sourceMap": true,
     "module": "esnext",
-    "target": "es2017",
+    "target": "ES2017",
     "jsx": "react",
     "paths": {
-      "react": [
-        "./node_modules/@types/react"
-      ]
+      "react": ["./node_modules/@types/react"]
     },
-    "types": [
-      "react"
-    ],
+    "types": ["react"],
     "allowSyntheticDefaultImports": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "esModuleInterop": true
   },
-  "include": [
-    "./src/**/*"
-  ],
-  "exclude": [
-    "**/*.d.ts",
-    ".src/**/*.png",
-    "./node_modules"
-  ],
+  "include": ["./src/**/*"],
+  "exclude": ["**/*.d.ts", ".src/**/*.png", "./node_modules"],
   "awesomeTypescriptLoaderOptions": {
     "useCache": true,
     "transpileModule": true,
     "errorsAsWarnings": true
   }
-}
+}

app/webpack.config.js

@@ -41,6 +41,7 @@ module.exports = {
   devServer: {
     // contentBase: './dist', // content not from webpack
     hot: true,
+    liveReload: true,
   },
   target: 'electron-renderer',
   mode: 'production',
@@ -54,7 +55,15 @@ module.exports = {
       // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
       {
         test: /\.tsx?$/,
-        loader: 'ts-loader',
+        use: [
+          {
+            loader: 'ts-loader',
+            // options: {
+            //   configFile: './tsconfig.json',
+            // },
+          },
+        ],
+        exclude: /node_modules/,
       },
       // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
       { enforce: 'pre', test: /\.js$/, loader: 'source-map-loader' },
@@ -81,7 +90,6 @@ module.exports = {
   plugins: [
     new HtmlWebpackPlugin({ template: './index.html', file: './build/index.html', inject: false }),
     // new BundleAnalyzerPlugin(),
-    new webpack.HotModuleReplacementPlugin(),
     // new webpack.IgnorePlugin({
     //   resourceRegExp: /\.\/build\/Debug\/addon/,
     //   contextRegExp: /heapdump$/
@@ -96,4 +104,10 @@ module.exports = {
     // "react": "React",
     // "react-dom": "ReactDOM"
   },
+  cache: {
+    type: 'filesystem',
+  },
+  optimization: {
+    runtimeChunk: 'single',
+  },
 }

backend/src/ConfigStorage.ts

@@ -1,7 +1,7 @@
-import * as FileAsync from 'lowdb/adapters/FileAsync'
-import * as fs from 'fs-extra'
-import * as lowdb from 'lowdb'
-import * as path from 'path'
+import FileAsync from 'lowdb/adapters/FileAsync'
+import fs from 'fs-extra'
+import lowdb from 'lowdb'
+import path from 'path'
 import { backendRpc } from '../../events'
 import { storageClearEvent, storageLoadEvent, storageStoreEvent } from '../../events/StorageEvents'
 

backend/src/DataSource/MqttSource.ts

@@ -98,7 +98,7 @@ export class MqttSource implements DataSource<MqttOptions> {
 
   public publish(msg: MqttMessage) {
     if (this.client) {
-      this.client.publish(msg.topic, msg.payload ? Base64Message.toUnicodeString(msg.payload) : '', {
+      this.client.publish(msg.topic, (msg.payload && new Base64Message(msg.payload))?.toBuffer() ?? '', {
         qos: msg.qos,
         retain: msg.retain,
       })

backend/src/Model/Base64Message.ts

@@ -1,31 +1,93 @@
 import { Base64 } from 'js-base64'
-import { Decoder } from './Decoder'
+import { TopicDataType } from './TreeNode'
+
+export type Base64MessageDTO = Pick<Base64Message, 'base64Message'>
 
 export class Base64Message {
-  private base64Message: string
-  private unicodeValue: string
-  public decoder: Decoder
-  public length: number
+  public base64Message: string
+  private _unicodeValue: string | undefined
 
-  private constructor(base64Str: string) {
-    this.base64Message = base64Str
-    this.unicodeValue = Base64.decode(base64Str)
-    this.length = base64Str.length
-    this.decoder = Decoder.NONE
+  // Todo: Rename to `encodedLength`
+  public get length(): number {
+    return this.base64Message.length
   }
 
-  public static toUnicodeString(message: Base64Message) {
-    return message.unicodeValue || ''
+  private get unicodeValue(): string {
+    if (!this._unicodeValue) {
+      this._unicodeValue = Base64.decode(this.base64Message ?? '')
+    }
+
+    return this._unicodeValue
+  }
+
+  constructor(base64Str?: string | Base64MessageDTO, error?: string) {
+    if (typeof base64Str === 'string' || typeof base64Str === 'undefined') {
+      this.base64Message = base64Str ?? ''
+    } else {
+      if (typeof base64Str.base64Message !== 'string') {
+        throw new Error('Received unexpected type in copy constructor')
+      }
+      this.base64Message = base64Str.base64Message
+    }
+  }
+
+  /**
+   * Override default JSON serialization behavior to only return the DTO
+   * @returns
+   */
+  public toJSON(): Base64MessageDTO {
+    return { base64Message: this.base64Message }
+  }
+
+  public toUnicodeString() {
+    return this.unicodeValue || ''
   }
 
   public static fromBuffer(buffer: Buffer) {
     return new Base64Message(buffer.toString('base64'))
   }
 
+  public toBuffer(): Buffer {
+    return Buffer.from(this.base64Message, 'base64')
+  }
+
   public static fromString(str: string) {
     return new Base64Message(Base64.encode(str))
   }
 
+  public format(type: TopicDataType = 'string'): [string, 'json' | undefined] {
+    try {
+      switch (type) {
+        case 'json': {
+          const json = JSON.parse(this.toUnicodeString())
+          return [JSON.stringify(json, undefined, '  '), 'json']
+        }
+        case 'hex': {
+          const hex = Base64Message.toHex(this)
+          return [hex, undefined]
+        }
+        default: {
+          const str = this.toUnicodeString()
+          return [str, undefined]
+        }
+      }
+    } catch (error) {
+      const str = this.toUnicodeString()
+      return [str, undefined]
+    }
+  }
+
+  public static toHex(message: Base64Message) {
+    const buf = Buffer.from(message.base64Message, 'base64')
+
+    let str: string = ''
+    buf.forEach(element => {
+      let hex = element.toString(16).toUpperCase()
+      str += `0x${hex.length < 2 ? '0' + hex : hex} `
+    })
+    return str.trimRight()
+  }
+
   public static toDataUri(message: Base64Message, mimeType: string) {
     return `data:${mimeType};base64,${message.base64Message}`
   }

backend/src/Model/ChangeBuffer.ts

@@ -15,7 +15,7 @@ export class ChangeBuffer {
   public push(val: MqttMessage) {
     if (!this.isFull()) {
       this.buffer.push({ message: val, received: new Date() })
-      this.size += this.estimatedMessageOverhead + (val.payload ? val.payload.length : 0)
+      this.size += this.estimatedMessageOverhead + (val.payload?.base64Message.length ?? 0)
       this.length += 1
     }
   }

backend/src/Model/Message.ts

@@ -1,7 +1,8 @@
 import { Base64Message } from './Base64Message'
 import { QoS } from '../DataSource/MqttSource'
+import { MemoryConsumptionExpressedByLength } from './RingBuffer'
 
-export interface Message {
+export interface Message extends MemoryConsumptionExpressedByLength {
   // mqtt based info
   payload: Base64Message | null
   messageId?: number

backend/src/Model/TreeNode.ts

@@ -2,6 +2,8 @@ import { Destroyable } from './Destroyable'
 import { Edge, Message, RingBuffer, MessageHistory } from './'
 import { EventDispatcher } from '../../../events'
 
+export type TopicDataType = 'string' | 'json' | 'hex'
+
 export class TreeNode<ViewModel extends Destroyable> {
   public sourceEdge?: Edge<ViewModel>
   public message?: Message
@@ -17,6 +19,7 @@ export class TreeNode<ViewModel extends Destroyable> {
   public onMessage = new EventDispatcher<Message>()
   public onDestroy = new EventDispatcher<TreeNode<ViewModel>>()
   public isTree = false
+  public type: TopicDataType = 'json'
 
   private cachedPath?: string
   private cachedChildTopics?: Array<TreeNode<ViewModel>>
@@ -153,7 +156,7 @@ export class TreeNode<ViewModel extends Destroyable> {
 
   public path(): string {
     if (!this.cachedPath) {
-      return this.branch()
+      this.cachedPath = this.branch()
         .map(node => node.sourceEdge && node.sourceEdge.name)
         .filter(name => name !== undefined)
         .join('/')

backend/src/Model/TreeNodeFactory.ts

@@ -1,6 +1,7 @@
 import { Destroyable } from './Destroyable'
 import { Edge, Tree, TreeNode } from './'
 import { MqttMessage } from '../../../events'
+import { Base64Message } from './Base64Message'
 
 export abstract class TreeNodeFactory {
   private static messageCounter = 0
@@ -30,7 +31,8 @@ export abstract class TreeNodeFactory {
     mqttMessage.retain
     node.setMessage({
       ...mqttMessage,
-      length: mqttMessage.payload?.length ?? 0,
+      payload: mqttMessage.payload && new Base64Message(mqttMessage.payload?.base64Message),
+      length: mqttMessage.payload?.base64Message.length ?? 0,
       received: receiveDate,
       messageNumber: this.messageCounter,
     })

backend/src/Model/index.ts

@@ -1,5 +1,5 @@
 export { Edge } from './Edge'
-export { TreeNode } from './TreeNode'
+export { TreeNode, TopicDataType } from './TreeNode'
 export { Message } from './Message'
 export { TreeNodeFactory } from './TreeNodeFactory'
 export { Tree } from './Tree'

backend/src/Model/sparkplugb.proto.ts

@@ -1,204 +0,0 @@
-/* spell-checker: disable */
-
-const protocol = `
-syntax = "proto2";
-
-//
-// To compile:
-// cd client_libraries/java
-// protoc --proto_path=../../ --java_out=src/main/java ../../sparkplug_b.proto
-//
-package com.cirruslink.sparkplug.protobuf;
-
-option java_package         = "com.cirruslink.sparkplug.protobuf";
-option java_outer_classname = "SparkplugBProto";
-
-message Payload {
-    /*
-        // Indexes of Data Types
-
-        // Unknown placeholder for future expansion.
-        Unknown         = 0;
-
-        // Basic Types
-        Int8            = 1;
-        Int16           = 2;
-        Int32           = 3;
-        Int64           = 4;
-        UInt8           = 5;
-        UInt16          = 6;
-        UInt32          = 7;
-        UInt64          = 8;
-        Float           = 9;
-        Double          = 10;
-        Boolean         = 11;
-        String          = 12;
-        DateTime        = 13;
-        Text            = 14;
-
-        // Additional Metric Types
-        UUID            = 15;
-        DataSet         = 16;
-        Bytes           = 17;
-        File            = 18;
-        Template        = 19;
-
-        // Additional PropertyValue Types
-        PropertySet     = 20;
-        PropertySetList = 21;
-
-    */
-
-    message Template {
-
-        message Parameter {
-            optional string name        = 1;
-            optional uint32 type        = 2;
-
-            oneof value {
-                uint32 int_value        = 3;
-                uint64 long_value       = 4;
-                float  float_value      = 5;
-                double double_value     = 6;
-                bool   boolean_value    = 7;
-                string string_value     = 8;
-                ParameterValueExtension extension_value = 9;
-            }
-
-            message ParameterValueExtension {
-                extensions              1 to max;
-            }
-        }
-
-        optional string version         = 1;          // The version of the Template to prevent mismatches
-        repeated Metric metrics         = 2;          // Each metric is the name of the metric and the datatype of the member but does not contain a value
-        repeated Parameter parameters   = 3;
-        optional string template_ref    = 4;          // Reference to a template if this is extending a Template or an instance - must exist if an instance
-        optional bool is_definition     = 5;
-        extensions                      6 to max;
-    }
-
-    message DataSet {
-
-        message DataSetValue {
-
-            oneof value {
-                uint32 int_value                        = 1;
-                uint64 long_value                       = 2;
-                float  float_value                      = 3;
-                double double_value                     = 4;
-                bool   boolean_value                    = 5;
-                string string_value                     = 6;
-                DataSetValueExtension extension_value   = 7;
-            }
-
-            message DataSetValueExtension {
-                extensions  1 to max;
-            }
-        }
-
-        message Row {
-            repeated DataSetValue elements  = 1;
-            extensions                      2 to max;   // For third party extensions
-        }
-
-        optional uint64   num_of_columns    = 1;
-        repeated string   columns           = 2;
-        repeated uint32   types             = 3;
-        repeated Row      rows              = 4;
-        extensions                          5 to max;   // For third party extensions
-    }
-
-    message PropertyValue {
-
-        optional uint32     type                    = 1;
-        optional bool       is_null                 = 2;
-
-        oneof value {
-            uint32          int_value               = 3;
-            uint64          long_value              = 4;
-            float           float_value             = 5;
-            double          double_value            = 6;
-            bool            boolean_value           = 7;
-            string          string_value            = 8;
-            PropertySet     propertyset_value       = 9;
-            PropertySetList propertysets_value      = 10;      // List of Property Values
-            PropertyValueExtension extension_value  = 11;
-        }
-
-        message PropertyValueExtension {
-            extensions                             1 to max;
-        }
-    }
-
-    message PropertySet {
-        repeated string        keys     = 1;         // Names of the properties
-        repeated PropertyValue values   = 2;
-        extensions                      3 to max;
-    }
-
-    message PropertySetList {
-        repeated PropertySet propertyset = 1;
-        extensions                       2 to max;
-    }
-
-    message MetaData {
-        // Bytes specific metadata
-        optional bool   is_multi_part   = 1;
-
-        // General metadata
-        optional string content_type    = 2;        // Content/Media type
-        optional uint64 size            = 3;        // File size, String size, Multi-part size, etc
-        optional uint64 seq             = 4;        // Sequence number for multi-part messages
-
-        // File metadata
-        optional string file_name       = 5;        // File name
-        optional string file_type       = 6;        // File type (i.e. xml, json, txt, cpp, etc)
-        optional string md5             = 7;        // md5 of data
-
-        // Catchalls and future expansion
-        optional string description     = 8;        // Could be anything such as json or xml of custom properties
-        extensions                      9 to max;
-    }
-
-    message Metric {
-
-        optional string   name          = 1;        // Metric name - should only be included on birth
-        optional uint64   alias         = 2;        // Metric alias - tied to name on birth and included in all later DATA messages
-        optional uint64   timestamp     = 3;        // Timestamp associated with data acquisition time
-        optional uint32   datatype      = 4;        // DataType of the metric/tag value
-        optional bool     is_historical = 5;        // If this is historical data and should not update real time tag
-        optional bool     is_transient  = 6;        // Tells consuming clients such as MQTT Engine to not store this as a tag
-        optional bool     is_null       = 7;        // If this is null - explicitly say so rather than using -1, false, etc for some datatypes.
-        optional MetaData metadata      = 8;        // Metadata for the payload
-        optional PropertySet properties = 9;
-
-        oneof value {
-            uint32   int_value                      = 10;
-            uint64   long_value                     = 11;
-            float    float_value                    = 12;
-            double   double_value                   = 13;
-            bool     boolean_value                  = 14;
-            string   string_value                   = 15;
-            bytes    bytes_value                    = 16;       // Bytes, File
-            DataSet  dataset_value                  = 17;
-            Template template_value                 = 18;
-            MetricValueExtension extension_value    = 19;
-        }
-
-        message MetricValueExtension {
-            extensions  1 to max;
-        }
-    }
-
-    optional uint64   timestamp     = 1;        // Timestamp at message sending time
-    repeated Metric   metrics       = 2;        // Repeated forever - no limit in Google Protobufs
-    optional uint64   seq           = 3;        // Sequence number
-    optional string   uuid          = 4;        // UUID to track message type in terms of schema definitions
-    optional bytes    body          = 5;        // To optionally bypass the whole definition above
-    extensions                      6 to max;   // For third party extensions
-}
-`
-
-/* spell-checker: enable */
-export default protocol

backend/src/Model/sparkplugb.ts

@@ -1,24 +0,0 @@
-// cSpell:words protobuf
-import * as protobuf from 'protobufjs'
-import protocol from './sparkplugb.proto'
-import { Base64Message } from './Base64Message'
-import { Decoder } from './Decoder'
-
-const root = protobuf.parse(protocol).root
-/* cspell:disable-next-line */
-export let SparkplugPayload = root.lookupType('com.cirruslink.sparkplug.protobuf.Payload')
-
-export const SparkplugDecoder = {
-  decode(input: Buffer): Base64Message | undefined {
-    try {
-      const message = Base64Message.fromString(
-        JSON.stringify(SparkplugPayload.toObject(SparkplugPayload.decode(new Uint8Array(input))))
-      )
-      message.decoder = Decoder.SPARKPLUG
-      return message
-    } catch {
-      // ignore
-    }
-    return undefined
-  },
-}

backend/src/Model/spec/TreeNode.spec.ts

@@ -1,7 +1,6 @@
 import 'mocha'
 
 import { expect } from 'chai'
-import { Base64Message } from '../Base64Message'
 import { makeTreeNode } from './makeTreeNode'
 
 describe('TreeNode', () => {
@@ -14,7 +13,7 @@ describe('TreeNode', () => {
   it('updateWithNode should update value', () => {
     const topics = 'foo/bar'.split('/')
     const leaf = makeTreeNode('foo/bar', '3')
-    expect(Base64Message.toUnicodeString(leaf.message!.payload!)).to.eq('3')
+    expect(leaf.message!.payload!.toUnicodeString()).to.eq('3')
 
     const updateLeave = makeTreeNode('foo/bar', '5')
 
@@ -22,13 +21,13 @@ describe('TreeNode', () => {
     root.updateWithNode(updateLeave.firstNode())
 
     expect(root.sourceEdge).to.eq(undefined)
-    expect(Base64Message.toUnicodeString(leaf.message!.payload!)).to.eq('5')
+    expect(leaf.message!.payload!.toUnicodeString()).to.eq('5')
   })
 
   it('updateWithNode should update intermediate nodes', () => {
     const topics1 = 'foo/bar/baz'.split('/')
     const leaf = makeTreeNode('foo/bar/baz', '3')
-    expect(Base64Message.toUnicodeString(leaf.message!.payload!)).to.eq('3')
+    expect(leaf.message!.payload!.toUnicodeString()).to.eq('3')
 
     const topics2 = 'foo/bar'.split('/')
     const updateLeave = makeTreeNode('foo/bar', '5')
@@ -37,10 +36,10 @@ describe('TreeNode', () => {
 
     const barNode = leaf.firstNode().findNode('foo/bar')
     expect(barNode && barNode.sourceEdge && barNode.sourceEdge.name).to.eq('bar')
-    expect(Base64Message.toUnicodeString(barNode!.message!.payload!)).to.eq('5')
+    expect(barNode!.message!.payload!.toUnicodeString()).to.eq('5')
 
     expect(leaf.sourceEdge && leaf.sourceEdge.name).to.eq('baz')
-    expect(Base64Message.toUnicodeString(leaf.message!.payload!)).to.eq('3')
+    expect(leaf.message!.payload!.toUnicodeString()).to.eq('3')
   })
 
   it('updateWithNode should add nodes to the tree', () => {

backend/src/Model/spec/TreeNodeFactory.spec.ts

@@ -1,6 +1,5 @@
 import 'mocha'
 import { expect } from 'chai'
-import { Base64Message } from '../Base64Message'
 import { makeTreeNode } from './makeTreeNode'
 
 describe('TreeNodeFactory', () => {
@@ -20,7 +19,7 @@ describe('TreeNodeFactory', () => {
 
     expect(node).to.not.eq(undefined)
     expect(node.sourceEdge.name).to.eq('bar')
-    expect(Base64Message.toUnicodeString(node.message.payload!)).to.eq('5')
+    expect(node.message.payload!.toUnicodeString()).to.eq('5')
 
     const foo = node.firstNode().findNode('foo')
     expect(foo && foo.sourceEdge && foo.sourceEdge.name).to.eq('foo')
@@ -34,7 +33,7 @@ describe('TreeNodeFactory', () => {
       return
     }
 
-    expect(Base64Message.toUnicodeString(node.message.payload!)).to.eq('5')
+    expect(node.message.payload!.toUnicodeString()).to.eq('5')
     expect(node.sourceEdge.name).to.eq('baz')
 
     const barNode = node.sourceEdge.source

backend/src/index.ts

@@ -10,7 +10,6 @@ import {
   makePublishEvent,
   removeConnection,
 } from '../../events'
-import { SparkplugDecoder } from './Model/sparkplugb'
 
 export class ConnectionManager {
   private connections: { [s: string]: DataSource<any> } = {}
@@ -47,9 +46,12 @@ export class ConnectionManager {
         buffer = buffer.slice(0, 20000)
       }
 
+      let decoded_payload = null
+      decoded_payload = Base64Message.fromBuffer(buffer)
+
       backendEvents.emit(messageEvent, {
         topic,
-        payload: SparkplugDecoder.decode(buffer) ?? Base64Message.fromBuffer(buffer),
+        payload: decoded_payload,
         qos: packet.qos,
         retain: packet.retain,
         messageId: packet.messageId,

events/Events.ts

@@ -1,4 +1,4 @@
-import { Base64Message } from '../backend/src/Model/Base64Message'
+import { Base64MessageDTO } from '../backend/src/Model/Base64Message'
 import { DataSourceState, MqttOptions } from '../backend/src/DataSource'
 import { UpdateInfo } from 'builder-util-runtime'
 import { RpcEvent } from './EventSystem/Rpc'
@@ -32,7 +32,7 @@ export const updateAvailable: Event<UpdateInfo> = {
 
 export interface MqttMessage {
   topic: string
-  payload: Base64Message | null
+  payload: Base64MessageDTO | null
   qos: 0 | 1 | 2
   retain: boolean
   // Set if QoS is > 0 on received messages
@@ -54,3 +54,11 @@ export function makeConnectionMessageEvent(connectionId: string): Event<MqttMess
 export const getAppVersion: RpcEvent<void, string> = {
   topic: 'getAppVersion',
 }
+
+export const writeToFile: RpcEvent<{ filePath: string, data: string, encoding?: string }, void> = {
+  topic: 'writeFile',
+}
+
+export const readFromFile: RpcEvent<{ filePath: string, encoding?: string }, Buffer> = {
+  topic: 'readFromFile',
+}

events/OpenDialogRequest.ts

@@ -1,4 +1,4 @@
-import { OpenDialogOptions, OpenDialogReturnValue } from 'electron'
+import { OpenDialogOptions, OpenDialogReturnValue, SaveDialogOptions, SaveDialogReturnValue } from 'electron'
 import { RpcEvent } from './EventSystem/Rpc'
 
 export function makeOpenDialogRpc(): RpcEvent<OpenDialogOptions, OpenDialogReturnValue> {
@@ -6,3 +6,9 @@ export function makeOpenDialogRpc(): RpcEvent<OpenDialogOptions, OpenDialogRetur
     topic: 'openDialog',
   }
 }
+
+export function makeSaveDialogRpc(): RpcEvent<SaveDialogOptions, SaveDialogReturnValue> {
+  return {
+    topic: 'saveDialog',
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "MQTT-Explorer",
-  "version": "0.4.0-beta.4",
+  "version": "0.4.0-beta.5",
   "description": "Explore your message queues",
   "main": "dist/src/electron.js",
   "engines": {
@@ -107,6 +107,7 @@
     "semantic-release": "^23.0.8",
     "semantic-release-export-data": "^1.0.1",
     "source-map-support": "^0.5.9",
+    "sparkplug-client": "^3.2.4",
     "ts-node": "^10.9.2",
     "tslint": "^6.1.3",
     "tslint-config-airbnb": "^5.11.2",
@@ -126,8 +127,8 @@
     "lowdb": "^1.0.0",
     "mime": "^2.4.4",
     "mqtt": "^4.3.6",
-    "protobufjs": "^6.11.4",
     "sha1": "^1.1.1",
+    "sparkplug-payload": "^1.0.3",
     "uuid": "^8.3.2",
     "yarn-run-all": "^3.1.1"
   }

package.ts

@@ -7,12 +7,30 @@ const linuxAppImage: builder.CliOptions = {
   x64: true,
   ia32: false,
   armv7l: true,
-  arm64: false,
+  arm64: true,
   projectDir: './build/clean',
   publish: 'always',
 }
 
 const linuxSnap: builder.CliOptions = {
+  x64: true,
+  ia32: false,
+  armv7l: false, // not supported to build on x64
+  arm64: false, // not supported to build on x64
+  projectDir: './build/clean',
+  publish: 'always',
+}
+
+const linuxDeb: builder.CliOptions = {
+  x64: true,
+  ia32: false,
+  armv7l: true,
+  arm64: true,
+  projectDir: './build/clean',
+  publish: 'always',
+}
+
+const winPortable: builder.CliOptions = {
   x64: true,
   ia32: false,
   armv7l: false,
@@ -21,18 +39,9 @@ const linuxSnap: builder.CliOptions = {
   publish: 'always',
 }
 
-const winPortable: builder.CliOptions = {
-  x64: true,
-  ia32: true,
-  armv7l: false,
-  arm64: false,
-  projectDir: './build/clean',
-  publish: 'always',
-}
-
 const winNsis: builder.CliOptions = {
   x64: true,
-  ia32: true,
+  ia32: false,
   armv7l: false,
   arm64: false,
   projectDir: './build/clean',
@@ -41,7 +50,7 @@ const winNsis: builder.CliOptions = {
 
 const winAppx: builder.CliOptions = {
   x64: true,
-  ia32: true,
+  ia32: false,
   armv7l: false,
   arm64: false,
   projectDir: './build/clean',
@@ -69,11 +78,12 @@ async function executeBuild() {
     case 'linux':
       await buildWithOptions(linuxAppImage, { platform: 'linux', package: 'AppImage' })
       await buildWithOptions(linuxSnap, { platform: 'linux', package: 'snap' })
+      await buildWithOptions(linuxDeb, { platform: 'linux', package: 'deb' })
       break
     case 'mac':
       await buildWithOptions(mac, { platform: 'mac', package: 'dmg' })
-      await buildWithOptions(mac, { platform: 'mac', package: 'mas' })
-      await buildWithOptions(mac, { platform: 'mac', package: 'zip' })
+      // await buildWithOptions(mac, { platform: 'mac', package: 'mas' })
+      // await buildWithOptions(mac, { platform: 'mac', package: 'zip' })
       break
     default:
       await buildWithOptions({ ...mac, projectDir: '' }, { platform: 'mac', package: 'mas-dev' })

res/sparkplug_b.proto

@@ -1,197 +0,0 @@
-syntax = "proto2";
-
-//
-// To compile:
-// cd client_libraries/java
-// protoc --proto_path=../../ --java_out=src/main/java ../../sparkplug_b.proto 
-//
-package com.cirruslink.sparkplug.protobuf;
-
-option java_package         = "com.cirruslink.sparkplug.protobuf";
-option java_outer_classname = "SparkplugBProto";
-
-message Payload {
-    /*
-        // Indexes of Data Types
-
-        // Unknown placeholder for future expansion.
-        Unknown         = 0;
-
-        // Basic Types
-        Int8            = 1;
-        Int16           = 2;
-        Int32           = 3;
-        Int64           = 4;
-        UInt8           = 5;
-        UInt16          = 6;
-        UInt32          = 7;
-        UInt64          = 8;
-        Float           = 9;
-        Double          = 10;
-        Boolean         = 11;
-        String          = 12;
-        DateTime        = 13;
-        Text            = 14;
-
-        // Additional Metric Types
-        UUID            = 15;
-        DataSet         = 16;
-        Bytes           = 17;
-        File            = 18;
-        Template        = 19;
-        
-        // Additional PropertyValue Types
-        PropertySet     = 20;
-        PropertySetList = 21;
-
-    */
-
-    message Template {
-        
-        message Parameter {
-            optional string name        = 1;
-            optional uint32 type        = 2;
-
-            oneof value {
-                uint32 int_value        = 3;
-                uint64 long_value       = 4;
-                float  float_value      = 5;
-                double double_value     = 6;
-                bool   boolean_value    = 7;
-                string string_value     = 8;
-                ParameterValueExtension extension_value = 9;
-            }
-
-            message ParameterValueExtension {
-                extensions              1 to max;
-            }
-        }
-
-        optional string version         = 1;          // The version of the Template to prevent mismatches
-        repeated Metric metrics         = 2;          // Each metric is the name of the metric and the datatype of the member but does not contain a value
-        repeated Parameter parameters   = 3;
-        optional string template_ref    = 4;          // Reference to a template if this is extending a Template or an instance - must exist if an instance
-        optional bool is_definition     = 5;
-        extensions                      6 to max;
-    }
-
-    message DataSet {
-
-        message DataSetValue {
-
-            oneof value {
-                uint32 int_value                        = 1;
-                uint64 long_value                       = 2;
-                float  float_value                      = 3;
-                double double_value                     = 4;
-                bool   boolean_value                    = 5;
-                string string_value                     = 6;
-                DataSetValueExtension extension_value   = 7;
-            }
-
-            message DataSetValueExtension {
-                extensions  1 to max;
-            }
-        }
-
-        message Row {
-            repeated DataSetValue elements  = 1;
-            extensions                      2 to max;   // For third party extensions
-        }
-
-        optional uint64   num_of_columns    = 1;
-        repeated string   columns           = 2;
-        repeated uint32   types             = 3;
-        repeated Row      rows              = 4;
-        extensions                          5 to max;   // For third party extensions
-    }
-
-    message PropertyValue {
-
-        optional uint32     type                    = 1;
-        optional bool       is_null                 = 2; 
-
-        oneof value {
-            uint32          int_value               = 3;
-            uint64          long_value              = 4;
-            float           float_value             = 5;
-            double          double_value            = 6;
-            bool            boolean_value           = 7;
-            string          string_value            = 8;
-            PropertySet     propertyset_value       = 9;
-            PropertySetList propertysets_value      = 10;      // List of Property Values
-            PropertyValueExtension extension_value  = 11;
-        }
-
-        message PropertyValueExtension {
-            extensions                             1 to max;
-        }
-    }
-
-    message PropertySet {
-        repeated string        keys     = 1;         // Names of the properties
-        repeated PropertyValue values   = 2;
-        extensions                      3 to max;
-    }
-
-    message PropertySetList {
-        repeated PropertySet propertyset = 1;
-        extensions                       2 to max;
-    }
-
-    message MetaData {
-        // Bytes specific metadata
-        optional bool   is_multi_part   = 1;
-
-        // General metadata
-        optional string content_type    = 2;        // Content/Media type
-        optional uint64 size            = 3;        // File size, String size, Multi-part size, etc
-        optional uint64 seq             = 4;        // Sequence number for multi-part messages
-
-        // File metadata
-        optional string file_name       = 5;        // File name
-        optional string file_type       = 6;        // File type (i.e. xml, json, txt, cpp, etc)
-        optional string md5             = 7;        // md5 of data
-
-        // Catchalls and future expansion
-        optional string description     = 8;        // Could be anything such as json or xml of custom properties
-        extensions                      9 to max;
-    }
-
-    message Metric {
-
-        optional string   name          = 1;        // Metric name - should only be included on birth
-        optional uint64   alias         = 2;        // Metric alias - tied to name on birth and included in all later DATA messages
-        optional uint64   timestamp     = 3;        // Timestamp associated with data acquisition time
-        optional uint32   datatype      = 4;        // DataType of the metric/tag value
-        optional bool     is_historical = 5;        // If this is historical data and should not update real time tag
-        optional bool     is_transient  = 6;        // Tells consuming clients such as MQTT Engine to not store this as a tag
-        optional bool     is_null       = 7;        // If this is null - explicitly say so rather than using -1, false, etc for some datatypes.
-        optional MetaData metadata      = 8;        // Metadata for the payload
-        optional PropertySet properties = 9;
-
-        oneof value {
-            uint32   int_value                      = 10;
-            uint64   long_value                     = 11;
-            float    float_value                    = 12;
-            double   double_value                   = 13;
-            bool     boolean_value                  = 14;
-            string   string_value                   = 15;
-            bytes    bytes_value                    = 16;       // Bytes, File
-            DataSet  dataset_value                  = 17;
-            Template template_value                 = 18;
-            MetricValueExtension extension_value    = 19;
-        }
-
-        message MetricValueExtension {
-            extensions  1 to max;
-        }
-    }
-
-    optional uint64   timestamp     = 1;        // Timestamp at message sending time
-    repeated Metric   metrics       = 2;        // Repeated forever - no limit in Google Protobufs
-    optional uint64   seq           = 3;        // Sequence number
-    optional string   uuid          = 4;        // UUID to track message type in terms of schema definitions
-    optional bytes    body          = 5;        // To optionally bypass the whole definition above
-    extensions                      6 to max;   // For third party extensions
-}

scripts/sparkplug-client.js

@@ -0,0 +1,232 @@
+/********************************************************************************
+ * Copyright (c) 2016-2018 Cirrus Link Solutions and others
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *   Cirrus Link Solutions - initial implementation
+ ********************************************************************************/
+var SparkplugClient = require('sparkplug-client')
+
+/*
+ * Main sample function which includes the run() function for running the sample
+ */
+var sample = (function () {
+  var config = {
+      serverUrl: 'tcp://127.0.0.1:1883',
+      username: '',
+      password: '',
+      groupId: 'Sparkplug Devices',
+      edgeNode: 'JavaScript Edge Node',
+      clientId: 'JavaScriptSimpleEdgeNode',
+      version: 'spBv1.0',
+    },
+    hwVersion = 'Emulated Hardware',
+    swVersion = 'v1.0.0',
+    deviceId = 'Emulated Device',
+    sparkPlugClient,
+    publishPeriod = 5000,
+    // Generates a random integer
+    randomInt = function () {
+      return 1 + Math.floor(Math.random() * 10)
+    },
+    // Get BIRTH payload for the edge node
+    getNodeBirthPayload = function () {
+      return {
+        timestamp: new Date().getTime(),
+        metrics: [
+          {
+            name: 'Node Control/Rebirth',
+            type: 'boolean',
+            value: false,
+          },
+          {
+            name: 'Template1',
+            type: 'template',
+            value: {
+              isDefinition: true,
+              metrics: [
+                { name: 'myBool', value: false, type: 'boolean' },
+                { name: 'myInt', value: 0, type: 'int' },
+              ],
+              parameters: [
+                {
+                  name: 'param1',
+                  type: 'string',
+                  value: 'value1',
+                },
+              ],
+            },
+          },
+        ],
+      }
+    },
+    // Get BIRTH payload for the device
+    getDeviceBirthPayload = function () {
+      return {
+        timestamp: new Date().getTime(),
+        metrics: [
+          { name: 'my_boolean', value: Math.random() > 0.5, type: 'boolean' },
+          { name: 'my_double', value: Math.random() * 0.123456789, type: 'double' },
+          { name: 'my_float', value: Math.random() * 0.123, type: 'float' },
+          { name: 'my_int', value: randomInt(), type: 'int' },
+          { name: 'my_long', value: randomInt() * 214748364700, type: 'long' },
+          { name: 'Inputs/0', value: true, type: 'boolean' },
+          { name: 'Inputs/1', value: 0, type: 'int' },
+          { name: 'Inputs/2', value: 1.23, type: 'float' },
+          { name: 'Outputs/0', value: true, type: 'boolean' },
+          { name: 'Outputs/1', value: 0, type: 'int' },
+          { name: 'Outputs/2', value: 1.23, type: 'float' },
+          { name: 'Properties/hw_version', value: hwVersion, type: 'string' },
+          { name: 'Properties/sw_version', value: swVersion, type: 'string' },
+          {
+            name: 'my_dataset',
+            type: 'dataset',
+            value: {
+              numOfColumns: 2,
+              types: ['string', 'string'],
+              columns: ['str1', 'str2'],
+              rows: [
+                ['x', 'a'],
+                ['y', 'b'],
+              ],
+            },
+          },
+          {
+            name: 'TemplateInstance1',
+            type: 'template',
+            value: {
+              templateRef: 'Template1',
+              isDefinition: false,
+              metrics: [
+                { name: 'myBool', value: true, type: 'boolean' },
+                { name: 'myInt', value: 100, type: 'int' },
+              ],
+              parameters: [
+                {
+                  name: 'param1',
+                  type: 'string',
+                  value: 'value2',
+                },
+              ],
+            },
+          },
+        ],
+      }
+    },
+    // Get data payload for the device
+    getDataPayload = function () {
+      return {
+        timestamp: new Date().getTime(),
+        metrics: [
+          { name: 'my_boolean', value: Math.random() > 0.5, type: 'boolean' },
+          { name: 'my_double', value: Math.random() * 0.123456789, type: 'double' },
+          { name: 'my_float', value: Math.random() * 0.123, type: 'float' },
+          { name: 'my_int', value: randomInt(), type: 'int' },
+          { name: 'my_long', value: randomInt() * 214748364700, type: 'long' },
+        ],
+      }
+    },
+    // Runs the sample
+    run = function () {
+      // Create the SparkplugClient
+      sparkplugClient = SparkplugClient.newClient(config)
+
+      // Create Incoming Message Handler
+      sparkplugClient.on('message', function (topic, payload) {
+        console.log(topic, payload)
+      })
+
+      // Create 'birth' handler
+      sparkplugClient.on('birth', function () {
+        // Publish Node BIRTH certificate
+        sparkplugClient.publishNodeBirth(getNodeBirthPayload())
+        // Publish Device BIRTH certificate
+        sparkplugClient.publishDeviceBirth(deviceId, getDeviceBirthPayload())
+      })
+
+      // Create node command handler
+      sparkplugClient.on('ncmd', function (payload) {
+        var timestamp = payload.timestamp,
+          metrics = payload.metrics
+
+        if (metrics !== undefined && metrics !== null) {
+          for (var i = 0; i < metrics.length; i++) {
+            var metric = metrics[i]
+            if (metric.name == 'Node Control/Rebirth' && metric.value) {
+              console.log("Received 'Rebirth' command")
+              // Publish Node BIRTH certificate
+              sparkplugClient.publishNodeBirth(getNodeBirthPayload())
+              // Publish Device BIRTH certificate
+              sparkplugClient.publishDeviceBirth(deviceId, getDeviceBirthPayload())
+            }
+          }
+        }
+      })
+
+      // Create device command handler
+      sparkplugClient.on('dcmd', function (deviceId, payload) {
+        var timestamp = payload.timestamp,
+          metrics = payload.metrics,
+          inboundMetricMap = {},
+          outboundMetric = [],
+          outboundPayload
+
+        console.log('Command recevied for device ' + deviceId)
+
+        // Loop over the metrics and store them in a map
+        if (metrics !== undefined && metrics !== null) {
+          for (var i = 0; i < metrics.length; i++) {
+            var metric = metrics[i]
+            inboundMetricMap[metric.name] = metric.value
+          }
+        }
+        if (inboundMetricMap['Outputs/0'] !== undefined && inboundMetricMap['Outputs/0'] !== null) {
+          console.log('Outputs/0: ' + inboundMetricMap['Outputs/0'])
+          outboundMetric.push({ name: 'Inputs/0', value: inboundMetricMap['Outputs/0'], type: 'boolean' })
+          outboundMetric.push({ name: 'Outputs/0', value: inboundMetricMap['Outputs/0'], type: 'boolean' })
+          console.log('Updated value for Inputs/0 ' + inboundMetricMap['Outputs/0'])
+        } else if (inboundMetricMap['Outputs/1'] !== undefined && inboundMetricMap['Outputs/1'] !== null) {
+          console.log('Outputs/1: ' + inboundMetricMap['Outputs/1'])
+          outboundMetric.push({ name: 'Inputs/1', value: inboundMetricMap['Outputs/1'], type: 'int' })
+          outboundMetric.push({ name: 'Outputs/1', value: inboundMetricMap['Outputs/1'], type: 'int' })
+          console.log('Updated value for Inputs/1 ' + inboundMetricMap['Outputs/1'])
+        } else if (inboundMetricMap['Outputs/2'] !== undefined && inboundMetricMap['Outputs/2'] !== null) {
+          console.log('Outputs/2: ' + inboundMetricMap['Outputs/2'])
+          outboundMetric.push({ name: 'Inputs/2', value: inboundMetricMap['Outputs/2'], type: 'float' })
+          outboundMetric.push({ name: 'Outputs/2', value: inboundMetricMap['Outputs/2'], type: 'float' })
+          console.log('Updated value for Inputs/2 ' + inboundMetricMap['Outputs/2'])
+        }
+
+        outboundPayload = {
+          timestamp: new Date().getTime(),
+          metrics: outboundMetric,
+        }
+
+        // Publish device data
+        sparkplugClient.publishDeviceData(deviceId, outboundPayload)
+      })
+
+      for (var i = 1; i < 101; i++) {
+        // Set up a device data publish for i*publishPeriod milliseconds from now
+        setTimeout(function () {
+          // Publish device data
+          sparkplugClient.publishDeviceData(deviceId, getDataPayload())
+
+          // End the client connection after the last publish
+          if (i === 100) {
+            sparkplugClient.stop()
+          }
+        }, i * publishPeriod)
+      }
+    }
+
+  return { run: run }
+})()
+
+// Run the sample
+sample.run()

src/electron.ts

@@ -4,14 +4,15 @@ import ConfigStorage from '../backend/src/ConfigStorage'
 import { app, BrowserWindow, Menu, dialog } from 'electron'
 import { autoUpdater } from 'electron-updater'
 import { ConnectionManager } from '../backend/src/index'
+import { promises as fsPromise } from 'fs'
 // import { electronTelemetryFactory } from 'electron-telemetry'
 import { menuTemplate } from './MenuTemplate'
 import buildOptions from './buildOptions'
 import { waitForDevServer, isDev, runningUiTestOnCi, loadDevTools } from './development'
 import { shouldAutoUpdate, handleAutoUpdate } from './autoUpdater'
 import { registerCrashReporter } from './registerCrashReporter'
-import { makeOpenDialogRpc } from '../events/OpenDialogRequest'
-import { backendRpc, getAppVersion } from '../events'
+import { makeOpenDialogRpc, makeSaveDialogRpc } from '../events/OpenDialogRequest'
+import { backendRpc, getAppVersion, writeToFile, readFromFile } from '../events'
 
 registerCrashReporter()
 
@@ -19,12 +20,26 @@ registerCrashReporter()
 //   const electronTelemetry = electronTelemetryFactory('9b0c8ca04a361eb8160d98c5', buildOptions)
 // }
 
-app.commandLine.appendSwitch('--no-sandbox')
+// disable-dev-shm-usage is required to run the debug console
+app.commandLine.appendSwitch('--no-sandbox --disable-dev-shm-usage')
 app.whenReady().then(() => {
   backendRpc.on(makeOpenDialogRpc(), async request => {
     return dialog.showOpenDialog(BrowserWindow.getFocusedWindow() ?? BrowserWindow.getAllWindows()[0], request)
   })
+
+  backendRpc.on(makeSaveDialogRpc(), async request => {
+    return dialog.showSaveDialog(BrowserWindow.getFocusedWindow() ?? BrowserWindow.getAllWindows()[0], request)
+  })
+
   backendRpc.on(getAppVersion, async () => app.getVersion())
+
+  backendRpc.on(writeToFile, async ({ filePath, data, encoding }) => {
+    await fsPromise.writeFile(filePath, Buffer.from(data, 'base64'), { encoding })
+  })
+
+  backendRpc.on(readFromFile, async ({ filePath, encoding }) => {
+    return fsPromise.readFile(filePath, { encoding })
+  })
 })
 
 autoUpdater.logger = log
@@ -69,8 +84,6 @@ async function createWindow() {
     }
   })
 
-  console.log('icon path', iconPath)
-
   // Load the index.html of the app.
   if (isDev()) {
     mainWindow.loadURL('http://localhost:8080')

src/spec/SceneBuilder.ts

@@ -19,6 +19,7 @@ export type SceneNames =
   | 'settings'
   | 'customize_subscriptions'
   | 'keyboard_shortcuts'
+  | 'sparkplugb-decoding'
   | 'end'
 
 export class SceneBuilder {

src/spec/demoVideo.ts

@@ -5,6 +5,7 @@ import * as path from 'path'
 import { ElectronApplication, _electron as electron } from 'playwright'
 
 import mockMqtt, { stop as stopMqtt } from './mock-mqtt'
+import { default as MockSparkplug } from './mock-sparkplugb'
 import { clearOldTopics } from './scenarios/clearOldTopics'
 import { clearSearch, searchTree } from './scenarios/searchTree'
 import { clickOnHistory, createFakeMousePointer, hideText, showText, sleep } from './util'
@@ -20,6 +21,7 @@ import { showMenu } from './scenarios/showMenu'
 import { showNumericPlot } from './scenarios/showNumericPlot'
 import { showOffDiffCapability } from './scenarios/showOffDiffCapability'
 import { showZoomLevel } from './scenarios/showZoomLevel'
+import { showSparkPlugDecoding } from './scenarios/showSparkplugDecoding'
 
 /**
  *  A convenience method that handles gracefully cleaning up the test run.
@@ -35,6 +37,14 @@ process.on('unhandledRejection', (error: Error | any) => {
   process.exit(1)
 })
 
+setTimeout(
+  () => {
+    console.error('Timeout reached')
+    process.exit(1)
+  },
+  60 * 10 * 1000
+)
+
 const runningUiTestOnCi = os.platform() === 'darwin' ? [] : ['--runningUiTestOnCi']
 
 async function doStuff() {
@@ -64,6 +74,7 @@ async function doStuff() {
   const scenes = new SceneBuilder()
   await scenes.record('connect', async () => {
     await connectTo('127.0.0.1', page)
+    await MockSparkplug.run() // Start sparkplug client after connect or birth topics will be missed
     await sleep(1000)
   })
 
@@ -110,6 +121,11 @@ async function doStuff() {
     await sleep(1000)
   })
 
+  await scenes.record('sparkplugb-decoding', async () => {
+    await showText('SparkplugB Decoding', 2000, page, 'top')
+    await showSparkPlugDecoding(page)
+  })
+
   // disable this scenario for now until expandTopic is sorted out
   // await scenes.record('delete_retained_topics', async () => {
   //   await hideText(page)
@@ -141,10 +157,17 @@ async function doStuff() {
     await sleep(3000)
   })
 
+  setTimeout(() => {
+    console.log('Forced quit')
+    process.exit(0)
+  }, 10 * 1000)
   stopMqtt()
-  console.log('Stopped mqtt')
+  console.log('Stopped mqtt client')
 
   cleanUp(scenes, electronApp)
+
+  // Force exit since there appear to be open handles
+  process.exit(0)
 }
 
 doStuff()

src/spec/mock-sparkplugb.ts

@@ -0,0 +1,249 @@
+/********************************************************************************
+ * Copyright (c) 2016-2018 Cirrus Link Solutions and others
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *   Cirrus Link Solutions - initial implementation
+ ********************************************************************************/
+import * as SparkplugClient from 'sparkplug-client'
+import type { UPayload } from 'sparkplug-client'
+import type { UMetric } from 'sparkplug-payload/lib/sparkplugbpayload'
+
+/*
+ * Main sample function which includes the run() function for running the sample
+ */
+
+
+export interface MockSparkplugClient {
+    stop: () => void
+}
+
+var sample = (function () {
+    var config = {
+        serverUrl: 'tcp://127.0.0.1:1883',
+        username: '',
+        password: '',
+        groupId: 'Sparkplug Devices',
+        edgeNode: 'JavaScript Edge Node',
+        clientId: 'JavaScriptSimpleEdgeNode',
+        version: 'spBv1.0',
+    },
+        hwVersion = 'Emulated Hardware',
+        swVersion = 'v1.0.0',
+        deviceId = 'Emulated Device',
+        sparkPlugClient,
+        publishPeriod = 5000,
+        // Generates a random integer
+        randomInt = function () {
+            return 1 + Math.floor(Math.random() * 10)
+        },
+        // Get BIRTH payload for the edge node
+        getNodeBirthPayload = function (): UPayload {
+            return {
+                timestamp: new Date().getTime(),
+                metrics: [
+                    {
+                        name: 'Node Control/Rebirth',
+                        type: 'Boolean',
+                        value: false,
+                    },
+                    {
+                        name: 'Template1',
+                        type: 'Template',
+                        value: {
+                            isDefinition: true,
+                            metrics: [
+                                { name: 'myBool', value: false, type: 'Boolean' },
+                                { name: 'myInt', value: 0, type: 'UInt32' },
+                            ],
+                            parameters: [
+                                {
+                                    name: 'param1',
+                                    type: 'String',
+                                    value: 'value1',
+                                },
+                            ],
+                        },
+                    },
+                ],
+            }
+        },
+        // Get BIRTH payload for the device
+        getDeviceBirthPayload = function (): UPayload {
+            return {
+                timestamp: new Date().getTime(),
+                metrics: [
+                    { name: 'my_boolean', value: Math.random() > 0.5, type: 'Boolean' },
+                    { name: 'my_double', value: Math.random() * 0.123456789, type: 'Double' },
+                    { name: 'my_float', value: Math.random() * 0.123, type: 'Float' },
+                    { name: 'my_int', value: randomInt(), type: 'Int8' },
+                    { name: 'my_long', value: randomInt() * 214748364700, type: 'Int64' },
+                    { name: 'Inputs/0', value: true, type: 'Boolean' },
+                    { name: 'Inputs/1', value: 0, type: 'Int8' },
+                    { name: 'Inputs/2', value: 1.23, type: 'UInt64' },
+                    { name: 'Outputs/0', value: true, type: 'Boolean' },
+                    { name: 'Outputs/1', value: 0, type: 'Int16' },
+                    { name: 'Outputs/2', value: 1.23, type: 'UInt64' },
+                    { name: 'Properties/hw_version', value: hwVersion, type: 'String' },
+                    { name: 'Properties/sw_version', value: swVersion, type: 'String' },
+                    {
+                        name: 'my_dataset',
+                        type: 'DataSet',
+                        value: {
+                            numOfColumns: 2,
+                            types: ['String', 'String'],
+                            columns: ['str1', 'str2'],
+                            rows: [
+                                ['x', 'a'],
+                                ['y', 'b'],
+                            ],
+                        },
+                    },
+                    {
+                        name: 'TemplateInstance1',
+                        type: 'Template',
+                        value: {
+                            templateRef: 'Template1',
+                            isDefinition: false,
+                            metrics: [
+                                { name: 'myBool', value: true, type: 'Boolean' },
+                                { name: 'myInt', value: 100, type: 'Int8' },
+                            ],
+                            parameters: [
+                                {
+                                    name: 'param1',
+                                    type: 'String',
+                                    value: 'value2',
+                                },
+                            ],
+                        },
+                    },
+                ],
+            }
+        },
+        // Get data payload for the device
+        getDataPayload = function (): UPayload {
+            return {
+                timestamp: new Date().getTime(),
+                metrics: [
+                    { name: 'my_boolean', value: Math.random() > 0.5, type: 'Boolean' },
+                    { name: 'my_double', value: Math.random() * 0.123456789, type: 'Double' },
+                    { name: 'my_float', value: Math.random() * 0.123, type: 'UInt64' },
+                    { name: 'my_int', value: randomInt(), type: 'Int16' },
+                    { name: 'my_long', value: randomInt() * 214748364700, type: 'UInt64' },
+                ],
+            }
+        },
+        // Runs the sample
+        run = async function (): Promise<MockSparkplugClient> {
+            // Create the SparkplugClient
+            const sparkplugClient = SparkplugClient.newClient(config)
+            let updateInterval: NodeJS.Timeout | null = null
+            const connected = new Promise<MockSparkplugClient>((resolve) => {
+
+                // Create 'birth' handler
+                sparkplugClient.on('birth', () => {
+                    // Publish Node BIRTH certificate
+                    sparkplugClient.publishNodeBirth(getNodeBirthPayload())
+                    // Publish Device BIRTH certificate
+                    sparkplugClient.publishDeviceBirth(deviceId, getDeviceBirthPayload())
+                    resolve({
+                        stop: () => {
+                            if (updateInterval) {
+                                clearInterval(updateInterval)
+                            }
+                            sparkplugClient.stop()
+                        }
+                    })
+                })
+            })
+
+            // Create Incoming Message Handler
+            sparkplugClient.on('message', function (topic: string, payload: UPayload) {
+                console.log(topic, payload)
+            })
+
+            // Create node command handler
+            // spell-checker: disable-next-line
+            sparkplugClient.on('ncmd', function (payload: UPayload) {
+                var timestamp = payload.timestamp,
+                    metrics = payload.metrics
+
+                if (metrics !== undefined && metrics !== null) {
+                    for (var i = 0; i < metrics.length; i++) {
+                        var metric = metrics[i]
+                        if (metric.name == 'Node Control/Rebirth' && metric.value) {
+                            console.log("Received 'Rebirth' command")
+                            // Publish Node BIRTH certificate
+                            sparkplugClient.publishNodeBirth(getNodeBirthPayload())
+                            // Publish Device BIRTH certificate
+                            sparkplugClient.publishDeviceBirth(deviceId, getDeviceBirthPayload())
+                        }
+                    }
+                }
+            })
+
+            // Create device command handler
+            // spell-checker: disable-next-line
+            sparkplugClient.on('dcmd', function (deviceId: string, payload: UPayload) {
+                var timestamp = payload.timestamp,
+                    metrics = payload.metrics,
+                    inboundMetricMap: { [name: string]: any } = {},
+                    outboundMetric: Array<UMetric> = [],
+                    outboundPayload: UPayload
+
+                console.log('Command received for device ' + deviceId)
+
+                // Loop over the metrics and store them in a map
+                if (metrics !== undefined && metrics !== null) {
+                    for (var i = 0; i < metrics.length; i++) {
+                        var metric = metrics[i]
+                        if (metric.name !== undefined && metric.name !== null) {
+                            inboundMetricMap[metric.name] = metric.value
+                        }
+                    }
+                }
+                if (inboundMetricMap['Outputs/0'] !== undefined && inboundMetricMap['Outputs/0'] !== null) {
+                    console.log('Outputs/0: ' + inboundMetricMap['Outputs/0'])
+                    outboundMetric.push({ name: 'Inputs/0', value: inboundMetricMap['Outputs/0'], type: 'Boolean' })
+                    outboundMetric.push({ name: 'Outputs/0', value: inboundMetricMap['Outputs/0'], type: 'Boolean' })
+                    console.log('Updated value for Inputs/0 ' + inboundMetricMap['Outputs/0'])
+                } else if (inboundMetricMap['Outputs/1'] !== undefined && inboundMetricMap['Outputs/1'] !== null) {
+                    console.log('Outputs/1: ' + inboundMetricMap['Outputs/1'])
+                    outboundMetric.push({ name: 'Inputs/1', value: inboundMetricMap['Outputs/1'], type: 'Int32' })
+                    outboundMetric.push({ name: 'Outputs/1', value: inboundMetricMap['Outputs/1'], type: 'Int32' })
+                    console.log('Updated value for Inputs/1 ' + inboundMetricMap['Outputs/1'])
+                } else if (inboundMetricMap['Outputs/2'] !== undefined && inboundMetricMap['Outputs/2'] !== null) {
+                    console.log('Outputs/2: ' + inboundMetricMap['Outputs/2'])
+                    outboundMetric.push({ name: 'Inputs/2', value: inboundMetricMap['Outputs/2'], type: 'UInt64' })
+                    outboundMetric.push({ name: 'Outputs/2', value: inboundMetricMap['Outputs/2'], type: 'UInt64' })
+                    console.log('Updated value for Inputs/2 ' + inboundMetricMap['Outputs/2'])
+                }
+
+                outboundPayload = {
+                    timestamp: new Date().getTime(),
+                    metrics: outboundMetric,
+                }
+
+                // Publish device data
+                sparkplugClient.publishDeviceData(deviceId, outboundPayload)
+            })
+
+            updateInterval = setInterval(function () {
+                // Publish device data
+                sparkplugClient.publishDeviceData(deviceId, getDataPayload())
+
+
+            }, 2000)
+            return connected
+        }
+
+    return { run: run }
+})()
+
+export default sample

src/spec/scenarios/publishTopic.ts

@@ -14,7 +14,7 @@ export async function publishTopic(browser: Page) {
   const topicInput = await browser.locator('//input[contains(@value,"kitchen/lamp/state")][1]')
   await clickOn(topicInput)
   await deleteTextWithBackspaces(topicInput, 120, 5)
-  await writeText('set', topicInput, 300)
+  await writeText('set', topicInput)
 
   const payloadInput = await browser.locator('//*[contains(@class, "ace_text-input")]')
   await writeTextPayload(payloadInput, 'off')
@@ -34,5 +34,6 @@ export async function publishTopic(browser: Page) {
 }
 
 async function writeTextPayload(payloadInput: Locator, text: string) {
-  await payloadInput.fill(text)
+  await clickOn(payloadInput)
+  await writeText(text, payloadInput)
 }

src/spec/scenarios/searchTree.ts

@@ -4,7 +4,7 @@ import { clickOn, deleteTextWithBackspaces, showText, sleep, writeText } from '.
 export async function searchTree(text: string, browser: Page) {
   const searchField = await browser.locator('//input[contains(@placeholder, "Search")]')
   await clickOn(searchField, 1)
-  await writeText(text, searchField, 100)
+  await writeText(text, searchField)
   await sleep(1500)
 }
 

src/spec/scenarios/showNumericPlot.ts

@@ -1,5 +1,5 @@
 import { Page } from 'playwright'
-import { moveToCenterOfElement, clickOn, clickOnHistory, expandTopic, sleep, writeText } from '../util'
+import { moveToCenterOfElement, clickOn, clickOnHistory, expandTopic, sleep } from '../util'
 
 export async function showNumericPlot(browser: Page) {
   await expandTopic('kitchen/coffee_maker', browser)

src/spec/scenarios/showSparkplugDecoding.ts

@@ -0,0 +1,9 @@
+import { Page } from 'playwright'
+import { expandTopic, sleep } from '../util'
+
+export async function showSparkPlugDecoding(browser: Page) {
+    // spell-checker: disable-next-line
+    await expandTopic('spBv1.0/Sparkplug Devices/DDATA/JavaScript Edge Node/Emulated Device', browser)
+    await browser.screenshot({ path: 'screen_sparkplugb_decoding.png' })
+    await sleep(1000)
+}

src/spec/util/index.ts

@@ -19,15 +19,14 @@ export function sleep(ms: number, required = false) {
   })
 }
 
-export async function writeText(text: string, element: Locator, delay = 0) {
-  return element.fill(text)
+export async function writeText(text: string, element: Locator, delay = 30) {
+  element.pressSequentially(text, { delay })
 }
 
-export async function deleteTextWithBackspaces(element: Locator, delay = 0, count = 0) {
-  // @ts-ignore
-  const length = count > 0 ? count : (await element.textContent()).length
+export async function deleteTextWithBackspaces(element: Locator, delay = 30, count = 0) {
+  const length = count > 0 ? count : (await element.inputValue()).length
   for (let i = 0; i < length; i += 1) {
-    await element.press('Backspace')
+    await element.press('Backspace', { delay: 30 })
     await sleep(delay)
   }
 }

tsconfig.json

@@ -9,15 +9,11 @@
     "moduleResolution": "node",
     "sourceRoot": "src/",
     "target": "ES2017",
-    "lib": [
-      "es2017",
-      "dom"
-    ],
+    "lib": ["ES2017", "dom"],
     "sourceMap": true,
-    "types": [
-      "node"
-    ],
-    "skipLibCheck": true
+    "types": ["node"],
+    "skipLibCheck": true,
+    "esModuleInterop": true
   },
   "include": [
     "src/electron.ts",
@@ -26,7 +22,5 @@
     "src/spec/leakTest.ts",
     "scripts/*.ts"
   ],
-  "exclude": [
-    "node_modules"
-  ]
-}
+  "exclude": ["node_modules"]
+}

yarn.lock

@@ -1398,7 +1398,7 @@
   resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.0.tgz"
   integrity sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==
 
-"@types/long@^4.0.1":
+"@types/long@^4.0.0", "@types/long@^4.0.1":
   version "4.0.2"
   resolved "https://registry.npmjs.org/@types/long/-/long-4.0.2.tgz"
   integrity sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA==
@@ -5074,7 +5074,7 @@ mqtt-packet@^6.8.0:
     debug "^4.1.1"
     process-nextick-args "^2.0.1"
 
-mqtt@^4.3.6:
+mqtt@^4.2.8, mqtt@^4.3.6:
   version "4.3.8"
   resolved "https://registry.npmjs.org/mqtt/-/mqtt-4.3.8.tgz"
   integrity sha512-2xT75uYa0kiPEF/PE0VPdavmEkoBzMT/UL9moid0rAvlCtV48qBwxD62m7Ld/4j8tSkIO1E/iqRl/S72SEOhOw==
@@ -5635,6 +5635,11 @@ pacote@^18.0.0, pacote@^18.0.1, pacote@^18.0.3:
     ssri "^10.0.0"
     tar "^6.1.11"
 
+pako@^2.0.4:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-2.1.0.tgz#266cc37f98c7d883545d11335c00fbd4062c9a86"
+  integrity sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==
+
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz"
@@ -5982,7 +5987,7 @@ proto-list@~1.2.1:
   resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
   integrity sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==
 
-protobufjs@^6.11.4:
+protobufjs@^6.11.3:
   version "6.11.4"
   resolved "https://registry.npmjs.org/protobufjs/-/protobufjs-6.11.4.tgz"
   integrity sha512-5kQWPaJHi1WoCpjTGszzQ32PG2F4+wRY6BmAT4Vfw56Q2FZ4YZzK20xUYQH4YkfehY1e6QSICrJquM6xXZNcrw==
@@ -6619,6 +6624,25 @@ source-map@^0.6.0, source-map@^0.6.1:
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
+sparkplug-client@^3.2.4:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/sparkplug-client/-/sparkplug-client-3.2.4.tgz#96ae0650339049099272c17a16aae7fe1278f302"
+  integrity sha512-Yck+cKwoS3RH+UYGyTiH9SXALT9foXQzkHCrJTUCgdS39J21NdVLIMTL9HwkkeunrxtKDakEI+UjTOIXEhWg7A==
+  dependencies:
+    debug "^4.3.4"
+    mqtt "^4.2.8"
+    pako "^2.0.4"
+    sparkplug-payload "^1.0.3"
+
+sparkplug-payload@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sparkplug-payload/-/sparkplug-payload-1.0.3.tgz#b8a54c9acf30b82ec9bae6ad4e2978cf89f7df2a"
+  integrity sha512-JAQSyuHVQQe/LzIlJdcIaD1F1c+rbXoolII3H1whQkhuZ96+G53RoPWqP9zCPZYFjvfSMHnQNIedGIZw/zjHJw==
+  dependencies:
+    "@types/long" "^4.0.0"
+    long "^4.0.0"
+    protobufjs "^6.11.3"
+
 spawn-error-forwarder@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/spawn-error-forwarder/-/spawn-error-forwarder-1.0.0.tgz#1afd94738e999b0346d7b9fc373be55e07577029"