chore: coerce ui-test to end

feat: connect with double-click
chore: update eclipse server url
2026-09-11 17:13:53 +00:00 · 2024-05-27 10:08:48 +02:00 · 2024-05-27 10:08:48 +02:00 · 2024-05-27 10:08:48 +02:00 · 2024-05-24 22:03:38 +02:00 · 2024-05-24 21:48:18 +02:00
79 changed files with 5075 additions and 1329 deletions
@@ -0,0 +1,29 @@
+on:
+  push:
+    branches:
+      - master
+      - release
+      - beta
+    paths:
+      - Dockerfile
+      - .github
+
+jobs:
+  create-image:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Build and push
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: true
+          tags: ghcr.io/thomasnordquist/mqtt-explorer-ui-tests:latest
@@ -3,14 +3,15 @@ name: Build
 on:
  push:
    branches:
-      - master
+      - release
+      - beta

 concurrency:
  group: ${{ github.ref }}
  cancel-in-progress: false

 jobs:
-  platform_matrix:
+  build:
    strategy:
      matrix:
        build:
@@ -18,8 +19,8 @@ jobs:
            task: linux
          - os: windows-latest
            task: win
-          # - os: macos-latest
-          #   task: mac
+          - os: macos-latest
+            task: mac
    runs-on: ${{ matrix.build.os }}
    steps:
      - if: matrix.build.os == 'ubuntu-latest'
@@ -27,12 +28,26 @@ jobs:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
-          node-version: 18
+          node-version: 20
      - run: npm install -g yarn
      - run: yarn
+      - id: create_token # get ReleaseBot access token
+        uses: tibdex/github-app-token@v2
+        with:
+          app_id: ${{ secrets.RELEASE_BOT_APP_ID }}
+          private_key: ${{ secrets.RELEASE_BOT_PRIVATE_KEY }}
+      - name: Semantic Release
+        uses: cycjimmy/semantic-release-action@v4
+        id: semantic   # Need an `id` for output variables
+        env:
+          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 }}
+  
@@ -0,0 +1,38 @@
+on:
+  pull_request_target: # Use pull_request_target
+    branches: [master, beta, release]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    container:
+      image: ghcr.io/thomasnordquist/mqtt-explorer-ui-tests:latest
+      volumes:
+        - ./:/app
+      options: --user root
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install Packages
+        run: yarn install --frozen-lockfile
+      - name: Build
+        run: yarn build
+      - name: Test
+        run: yarn test
+      - name: UI-Test
+        run: yarn ui-test
+      - name: Post-processing
+        run: ./scripts/prepareVideo.sh
+      - uses: hkusu/s3-upload-action@v2
+        id: upload # specify some ID for use in subsequent steps
+        with:
+          aws-access-key-id: ${{ vars.AWS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: 'eu-central-1'
+          aws-bucket: ${{ vars.AWS_BUCKET }}
+          file-path: './ui-test.gif'
+          content-type: image/gif
+          output-file-url: 'true'
+      - 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
@@ -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
@@ -1 +0,0 @@
-engine-strict=true
@@ -0,0 +1,30 @@
+{
+  "branches": [
+    "release",
+    {
+      "name": "beta",
+      "prerelease": true
+    }
+  ],
+  repositoryUrl: "git@github.com:thomasnordquist/MQTT-Explorer.git",
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "semantic-release-export-data",
+    "@semantic-release/changelog",
+    [
+      "@semantic-release/npm",
+      {
+        "npmPublish": false
+      }
+    ],
+    [
+      "@semantic-release/git",
+      {
+        "assets": [
+          "package.json",
+          "yarn.lock"
+        ]
+      }
+    ]
+  ]
+}
@@ -1,46 +0,0 @@
-language: node_js
-
-services:
-  - xvfb
-
-cache:
-  directories:
-  - node_modules
-  - $HOME/.cache/electron
-  - $HOME/.cache/electron-builder
-  - $HOME/.npm/_prebuilds
-
-node_js:
-  - "10"
-
-os:
-  - linux
-  - osx
-
-osx_image: xcode10.2
-
-dist: bionic
-
-services:
-  - docker
-
-install:
-  - yarn install --frozen-lockfile
-  - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sudo apt-get update && sudo apt-get -y install snap squashfs-tools && sudo snap install snapcraft --classic; fi;
-
-script:
-  - yarn run build
-  - yarn lint
-  - yarn test
-  - export TRAVIS_BUILD_NUMBER="" # Override travis build number since it is uses for tagging the binary version https://github.com/electron-userland/electron-builder/issues/3730
-  - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then docker run -e GH_TOKEN=$GH_TOKEN -e GIT_TAG=$TRAVIS_TAG --rm -v `pwd`:/app thomasnordquist/ui-test-recording-env sh -c "cd app && docker/testMounted.sh"; fi
-  - if [[ "$TRAVIS_TAG" != "" ]]; then yarn run prepare-release; fi
-  - |
-    if [[ "$TRAVIS_OS_NAME" == "linux" ]] && [[ "$TRAVIS_TAG" != "" ]]; then
-      openssl aes-256-cbc -d -in res/snapstore-credentials.enc -out credentials -k $SNAPSTORE_CREDENTIALS_DECRYPTION_KEY;
-      snapcraft login --with credentials;
-      rm credentials;
-      yarn run package linux;
-    fi
-  - if [[ "$TRAVIS_OS_NAME" == "osx" ]] && [[ "$TRAVIS_TAG" != "" ]]; then yarn run package -- mac; fi
-  - if [[ "$TRAVIS_OS_NAME" == "osx" ]] && [[ "$TRAVIS_TAG" != "" ]]; then unset CSC_LINK; yarn run package -- win; fi
@@ -1,7 +1,7 @@
-FROM node:19.8.1-bullseye-slim
+FROM node:20

 RUN DEBIAN_FRONTEND="noninteractive" apt-get update \
-  && apt-get install -y --no-install-recommends nano ffmpeg xvfb git-core tmux locales mosquitto x11vnc
+  && apt-get install -y --no-install-recommends ca-certificates nano ffmpeg xvfb git-core tmux locales mosquitto x11vnc
 RUN apt-get install -yq --no-install-recommends libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 libnss3

 # Generate locales for TMUX
@@ -12,6 +12,5 @@ ENV LC_ALL en_US.UTF-8

 CMD /bin/bash

-COPY cloneBuildAndTest.sh ./
 VOLUME /app
 EXPOSE 5900
@@ -6,11 +6,12 @@
 [![Build status](https://ci.appveyor.com/api/projects/status/c35tkm29rm4m5364/branch/master?svg=true)](https://ci.appveyor.com/project/thomasnordquist/mqtt-explorer/branch/master)
 [![Codacy Badge](https://api.codacy.com/project/badge/Grade/47b26e03fce543ceac7914214482334a)](https://app.codacy.com/app/thomasnordquist/MQTT-Explorer?utm_source=github.com&utm_medium=referral&utm_content=thomasnordquist/MQTT-Explorer&utm_campaign=Badge_Grade_Dashboard)

-|   |   |   |
-|:---:|:---:|:---:|
-|[![screen_composite](https://mqtt-explorer.com/img/screen-composite_small.png)](https://mqtt-explorer.com/img/screen-composite.png)|[![screen2_small](https://mqtt-explorer.com/img/screen2_small.png)](https://mqtt-explorer.com/img/screen2.png)|[![screen3_small](https://mqtt-explorer.com/img/screen3_small.png)](https://mqtt-explorer.com/img/screen3.png)|
+|                                                                                                                                     |                                                                                                                |                                                                                                                |
+| :---------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------: |
+| [![screen_composite](https://mqtt-explorer.com/img/screen-composite_small.png)](https://mqtt-explorer.com/img/screen-composite.png) | [![screen2_small](https://mqtt-explorer.com/img/screen2_small.png)](https://mqtt-explorer.com/img/screen2.png) | [![screen3_small](https://mqtt-explorer.com/img/screen3_small.png)](https://mqtt-explorer.com/img/screen3.png) |

 # The App has moved to [mqtt-explorer.com](https://mqtt-explorer.com)
+
 MQTT Explorer is a comprehensive and easy-to-use MQTT Client.  
 Downloads can be found at the link above.

@@ -29,6 +30,7 @@ yarn start
 ## Develop

 Launch Application
+
 ```bash
 npm install -g yarn
 yarn
@@ -63,6 +65,15 @@ npm run build
 node dist/src/spec/webdriverio.js
 ```

+## Create a release
+
+Create a PR to `release` branch.
+There needs to be a "feat: some new feature" or "fix: some bugfix" commit for a new release to be created
+
+## Create a beta release
+
+Create a PR to `beta` branch. A "feat" or "fix" commit is necessary to create a new version.
+
 ## Write docs

 ```
@@ -47,6 +47,7 @@
    "react-split-pane": "^0.1.85",
    "react-transition-group": "^4",
    "react-vis": "^1.11.6",
+    "react-window": "^1.8.10",
    "redux": "^4.0.1",
    "redux-batched-actions": "0.5",
    "redux-thunk": "^2.3.0",
@@ -65,6 +66,8 @@
    "@types/react-dom": "^16.0.11",
    "@types/react-redux": "^7.0.9",
    "@types/react-resize-detector": "^4.0.1",
+    "@types/react-virtualized": "^9.21.30",
+    "@types/react-window": "^1.8.8",
    "@types/sha1": "^1.1.1",
    "@types/socket.io-client": "^1.4.32",
    "@types/uuid": "^7.0.2",
@@ -82,12 +85,12 @@
    "style-loader": "^1",
    "ts-loader": "^9.2.6",
    "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"
  }
-}
+}
@@ -2,7 +2,7 @@ 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 } from '../../../events'

 export const setTopic = (topic?: string): Action => {
  return {
@@ -41,7 +41,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,
@@ -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)
  }
@@ -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,
@@ -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}
@@ -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%',
@@ -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'

@@ -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

@@ -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>
@@ -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}>
@@ -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()]
  )
 }

@@ -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}</>
+  )
+}
@@ -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))
@@ -7,13 +7,13 @@ 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 +35,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 +55,10 @@ function ValuePanel(props: Props) {
    )
  }

+  const getDecodedValue = useCallback(() => {
+    return node?.message && decodeMessage(node.message)?.message?.toUnicodeString()
+  }, [node, decodeMessage])
+
  function messageMetaInfo() {
    if (!props.node || !props.node.message) {
      return null
@@ -85,10 +90,9 @@ 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

  return (
    <Panel>
@@ -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) => {
@@ -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
@@ -0,0 +1,117 @@
+import * as q from '../../../../backend/src/Model'
+import React, { MutableRefObject, RefObject, useCallback, useMemo, useRef } from 'react'
+import { FixedSizeList as List, ListOnItemsRenderedProps, ListOnScrollProps } from 'react-window'
+import { AutoSizer } from 'react-virtualized'
+import TreeNode from './TreeNode'
+import { TopicViewModel } from '../../model/TopicViewModel'
+
+class TreeList {
+  tree: q.TreeNode<TopicViewModel>
+
+  constructor(tree: q.TreeNode<TopicViewModel>) {
+    this.tree = tree
+  }
+
+  getVisibleChildAt(index: number): [q.TreeNode<TopicViewModel>, number] | undefined {
+    return this.tree.viewModel?.visibleChildAt(index, 1)
+  }
+
+  get length(): number {
+    return this.tree.viewModel?.visibleChildren() ?? 0
+  }
+}
+
+const InfinitreeComponent: React.FC<{
+  tree: q.TreeNode<TopicViewModel>
+  actions: any
+  selectTopicAction: any
+  settings: any
+  listRef: RefObject<List>
+  lastUpdate: number
+  name: string
+  fixedOnTreeNodeRef: MutableRefObject<q.TreeNode<TopicViewModel> | null>
+}> = ({ tree, actions, settings, listRef, fixedOnTreeNodeRef, name }) => {
+  const list = useMemo(() => new TreeList(tree), [tree])
+  const lastIndex = useRef<number | undefined>(0)
+  const lastScroll = useRef<number>(Date.now())
+  const getKey = useCallback(
+    (index: number) => {
+      let [treeNode] = list.getVisibleChildAt(index) ?? []
+
+      return treeNode?.hash() ?? index.toString()
+    },
+    [list]
+  )
+
+  const afterRender = useCallback(
+    ({ visibleStartIndex }: ListOnItemsRenderedProps) => {
+      if (!visibleStartIndex) {
+        return
+      }
+
+      let [treeNode] = list.getVisibleChildAt(visibleStartIndex) ?? []
+
+      if (treeNode) {
+        fixedOnTreeNodeRef.current = treeNode
+      }
+    },
+    [list]
+  )
+
+  const indexOfItem = fixedOnTreeNodeRef.current?.viewModel?.getIndex()
+
+  if (indexOfItem && lastIndex.current !== indexOfItem && Date.now() - lastScroll.current > 300) {
+    // Kind of dangerous to mutate scroll state directly, useEffect causes glitches
+    indexOfItem && listRef.current?.scrollToItem(indexOfItem, 'start')
+  }
+  lastIndex.current = indexOfItem
+
+  const disableScroll = useCallback((args: ListOnScrollProps) => {
+    if (!args.scrollUpdateWasRequested) {
+      lastScroll.current = Date.now()
+    }
+  }, [])
+
+  return (
+    <AutoSizer>
+      {({ width, height }) => (
+        <List
+          ref={listRef}
+          width={width}
+          height={height}
+          itemSize={20}
+          itemCount={list.length}
+          itemKey={getKey}
+          onItemsRendered={afterRender}
+          onScroll={disableScroll}
+          overscanCount={3}
+        >
+          {({ index, style }) => {
+            let [treeNode, depth = 0] = list.getVisibleChildAt(index) ?? []
+            if (!treeNode) {
+              return null
+            }
+
+            return (
+              <div style={{ ...style, paddingLeft: 12 * (depth - 1) }}>
+                <TreeNode
+                  treeNode={treeNode}
+                  isRoot={index === 0}
+                  doNotRenderSubnodes={true}
+                  name={index === 0 ? name : undefined}
+                  collapsed={false}
+                  settings={settings}
+                  lastUpdate={treeNode.lastUpdate}
+                  actions={actions}
+                  selectTopicAction={actions.selectTopic}
+                />
+              </div>
+            )
+          }}
+        </List>
+      )}
+    </AutoSizer>
+  )
+}
+
+export const Infinitree = InfinitreeComponent
@@ -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) => ({
@@ -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
+}
@@ -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)
 }
@@ -18,6 +18,7 @@ export interface Props {
  treeNode: q.TreeNode<TopicViewModel>
  name?: string | undefined
  collapsed?: boolean | undefined
+  doNotRenderSubnodes?: boolean
  classes: any
  lastUpdate: number
  actions: typeof treeActions
@@ -27,8 +28,8 @@ export interface Props {
 }

 function TreeNodeComponent(props: Props) {
-  const { actions, classes, settings, theme, treeNode, lastUpdate, name } = props
-  const [collapsedOverride, setCollapsedOverride] = useState<boolean | undefined>(undefined)
+  const { actions, classes, settings, theme, treeNode, lastUpdate, name, doNotRenderSubnodes } = props
+  const [collapsedOverride, setCollapsedOverride] = useState<boolean | undefined>(!treeNode.viewModel?.isExpanded())
  const [selected, selectionLastUpdate, setSelected] = useSelectionState(false)
  const nodeRef = useRef<HTMLDivElement>()
  const isAllowedToAutoExpand = useIsAllowedToAutoExpandState(props)
@@ -94,7 +95,7 @@ function TreeNodeComponent(props: Props) {

  return useMemo(() => {
    function renderNodes() {
-      if (isCollapsed) {
+      if (isCollapsed || doNotRenderSubnodes) {
        return null
      }

@@ -134,7 +135,7 @@ function TreeNodeComponent(props: Props) {
        {renderNodes()}
      </div>
    )
-  }, [treeNode.lastUpdate, treeNode, name, isCollapsed, selected, theme, mouseOver, settings])
+  }, [treeNode.lastUpdate, treeNode, name, isCollapsed, selected, theme, mouseOver, settings, doNotRenderSubnodes])
 }

 export default withStyles(styles, { withTheme: true })(React.memo(TreeNodeComponent))
@@ -1,6 +1,6 @@
 import * as q from '../../../../backend/src/Model'
-import React from 'react'
-import TreeNode from './TreeNode'
+import React, { useCallback, useMemo, useRef } from 'react'
+import { Infinitree } from './Infinitree'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
@@ -8,6 +8,8 @@ import { KeyCodes } from '../../utils/KeyCodes'
 import { SettingsState } from '../../reducers/Settings'
 import { TopicViewModel } from '../../model/TopicViewModel'
 import { treeActions } from '../../actions'
+import { FixedSizeList as List } from 'react-window'
+import { useSubscription } from '../hooks/useSubscription'
 const MovingAverage = require('moving-average')

 const averagingTimeInterval = 10 * 1000
@@ -24,84 +26,64 @@ interface Props {
  settings: SettingsState
 }

-interface State {
-  lastUpdate: number
-}
-
 function useArrowKeyEventHandler(actions: typeof treeActions) {
-  return (event: React.KeyboardEvent) => {
-    switch (event.keyCode) {
-      case KeyCodes.arrow_down:
-        actions.moveSelectionUpOrDownwards('next')
-        event.preventDefault()
-        break
-      case KeyCodes.arrow_up:
-        actions.moveSelectionUpOrDownwards('previous')
-        event.preventDefault()
-        break
-      case KeyCodes.arrow_left:
-        actions.moveOutward()
-        event.preventDefault()
-        break
-      case KeyCodes.arrow_right:
-        actions.moveInward()
-        event.preventDefault()
-        break
-    }
-  }
+  return useCallback(
+    (event: React.KeyboardEvent) => {
+      switch (event.keyCode) {
+        case KeyCodes.arrow_down:
+          actions.moveSelectionUpOrDownwards('next')
+          event.preventDefault()
+          break
+        case KeyCodes.arrow_up:
+          actions.moveSelectionUpOrDownwards('previous')
+          event.preventDefault()
+          break
+        case KeyCodes.arrow_left:
+          actions.moveOutward()
+          event.preventDefault()
+          break
+        case KeyCodes.arrow_right:
+          actions.moveInward()
+          event.preventDefault()
+          break
+      }
+    },
+    [actions]
+  )
 }

-class TreeComponent extends React.PureComponent<Props, State> {
-  private updateTimer?: any
-  private perf: number = 0
-  private renderTime = 0
-
-  constructor(props: any) {
-    super(props)
-    this.state = { lastUpdate: 0 }
-  }
-
-  private keyEventHandler = useArrowKeyEventHandler(this.props.actions)
-  private performanceCallback = (ms: number) => {
+const TreeComponent: React.FC<Props> = props => {
+  const keyEventHandler = useArrowKeyEventHandler(props.actions)
+  const performanceCallback = useCallback((ms: number) => {
    average.push(Date.now(), ms)
-  }
+  }, [])

-  public componentWillReceiveProps(nextProps: Props) {
-    if (this.props.tree !== nextProps.tree) {
-      if (this.props.tree) {
-        this.props.tree.didUpdate.unsubscribe(this.throttledTreeUpdate)
-      }
-      if (nextProps.tree) {
-        nextProps.tree.didUpdate.subscribe(this.throttledTreeUpdate)
-      }
-      this.setState(this.state)
-    }
-  }
+  const updateTimer = useRef<NodeJS.Timeout | number>()
+  const perf = useRef<number>(performance.now())
+  const renderTime = useRef<number>(0)
+  const listRef = useRef<List>(null)
+  const [lastUpdate, triggerUpdate] = React.useState(0)

-  public componentWillUnmount() {
-    this.props.tree && this.props.tree.didUpdate.unsubscribe(this.throttledTreeUpdate)
-  }
-
-  public throttledTreeUpdate = () => {
-    if (this.updateTimer) {
+  const throttledTreeUpdate = useCallback(() => {
+    if (updateTimer.current) {
      return
    }

    const expectedRenderTime = average.forecast()
-    const updateInterval = Math.max(expectedRenderTime * 7, 300)
-    const timeUntilNextUpdate = updateInterval - (performance.now() - this.renderTime)
+    const updateInterval = Math.max(expectedRenderTime * 7, 500)
+    const timeUntilNextUpdate = updateInterval - (performance.now() - renderTime.current)

-    this.updateTimer = setTimeout(
+    updateTimer.current = setTimeout(
      () => {
        window.requestIdleCallback(
          () => {
-            this.updateTimer && clearTimeout(this.updateTimer)
-            this.updateTimer = undefined
-            this.renderTime = performance.now()
+            updateTimer.current && clearTimeout(updateTimer.current)
+            updateTimer.current = undefined
+            renderTime.current = performance.now()

            window.requestIdleCallback(
              () => {
-                this.setState({ lastUpdate: this.renderTime })
+                triggerUpdate(renderTime.current)
              },
              { timeout: 100 }
            )
@@ -111,49 +93,52 @@ class TreeComponent extends React.PureComponent<Props, State> {
      },
      Math.max(0, timeUntilNextUpdate)
    )
-  }
+  }, [])

-  public componentWillUpdate() {
-    this.perf = performance.now()
-  }
+  perf.current = performance.now()
+  window.requestIdleCallback(() => {
+    performanceCallback(performance.now() - perf.current)
+  })
+  const fixedOnTreeNodeRef = useRef<q.TreeNode<TopicViewModel> | null>(null)

-  public componentDidUpdate() {
-    this.performanceCallback(performance.now() - this.perf)
-  }
+  useSubscription(props.tree?.didUpdate, throttledTreeUpdate)

-  public render() {
-    const { tree } = this.props
-    if (!tree) {
-      return null
-    }
-
-    const style: React.CSSProperties = {
+  const style: React.CSSProperties = useMemo(
+    () => ({
      lineHeight: '1.1',
      cursor: 'default',
-      overflowY: 'scroll',
-      overflowX: 'hidden',
+      // overflowY: 'scroll',
+      // overflowX: 'hidden',
      height: '100%',
      width: '100%',
      outline: '24px black !important',
      paddingBottom: '16px', // avoid conflict with chart panel Resizer
-    }
+    }),
+    []
+  )

-    return (
-      <div style={style} tabIndex={0} onKeyDown={this.keyEventHandler}>
-        <TreeNode
-          key={tree.hash()}
-          isRoot={true}
-          treeNode={tree}
-          name={this.props.host}
-          collapsed={false}
-          settings={this.props.settings}
-          lastUpdate={tree.lastUpdate}
-          actions={this.props.actions}
-          selectTopicAction={this.props.actions.selectTopic}
-        />
-      </div>
-    )
+  const { tree } = props
+  if (!tree) {
+    return null
  }
+
+  const rendered = (
+    <div style={style} tabIndex={0} onKeyDown={keyEventHandler}>
+      <Infinitree
+        lastUpdate={lastUpdate}
+        listRef={listRef}
+        key={tree.hash()}
+        fixedOnTreeNodeRef={fixedOnTreeNodeRef}
+        tree={tree}
+        name={props.host ?? ''}
+        actions={props.actions}
+        selectTopicAction={props.actions.selectTopic}
+        settings={props.settings}
+      />
+    </div>
+  )
+
+  return rendered
 }

 const mapStateToProps = (state: AppState) => {
@@ -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'
@@ -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(() => {
@@ -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() {
@@ -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]
+  )
+}
@@ -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])
+}
@@ -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,
+    }
+  },
+}
@@ -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
+}
@@ -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
+}
@@ -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,
+      }
+    }
+  },
+}
@@ -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 }
+  },
+}
@@ -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
@@ -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(),
@@ -1,5 +1,4 @@
 import { ConnectionOptions, createEmptyConnection } from './ConnectionOptions'
-import { v4 } from 'uuid'

 interface LegacyConnectionSettings {
  host: string
@@ -1,19 +1,157 @@
-import { Destroyable } from '../../../backend/src/Model/Destroyable'
+import * as q from '../../../backend/src/Model'
+import { Destroyable, MemoryLifecycle } from '../../../backend/src/Model/Destroyable'
+import { MessageDecoder, decoders } from '../decoders'
 import { EventDispatcher } from '../../../events'

-export class TopicViewModel implements Destroyable {
+function findDecoder<T extends Destroyable & MemoryLifecycle>(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, MemoryLifecycle {
  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)
+  }
+
+  private clearCache = () => {
+    if (this._cachedChildTopicCount) {
+      this._cachedChildTopicCount = undefined
+      // when child changes, parents are affected as well
+      this.owner?.sourceEdge?.source?.viewModel?.clearCache()
+    }
+  }
+
+  public constructor(treeNode: q.TreeNode<TopicViewModel>) {
+    this.owner = treeNode
    this.selected = false
-    this.expanded = false
+    this.expanded = true
+    treeNode.onMerge.subscribe(this.clearCache)
+  }
+
+  private _cachedChildTopicCount: number | undefined = undefined
+
+  /**
+   * This function only returns valid values if parents are expanded
+   * @returns
+   */
+  public getIndex(): number {
+    if (!this.owner) {
+      throw new Error('integrity error')
+    }
+
+    const source = this.owner.sourceEdge?.source
+
+    const parentIndex = source?.viewModel?.getIndex()
+    // If we have a parent, we have its index + 1 (at least)
+    const parentIndexWithDepth = parentIndex !== undefined ? parentIndex + 1 : 0
+    let position = 0
+    const edgeToMatch = this.owner.sourceEdge
+    for (const edge of source?.edgeArray ?? []) {
+      if (edge === edgeToMatch) {
+        break
+      }
+      position += edge.target.viewModel?.visibleChildren() ?? 1
+    }
+
+    return parentIndexWithDepth + position
+  }
+
+  public visibleChildAt(
+    index: number,
+    depth: number = 0,
+    parentOffset: number = 0
+  ): [q.TreeNode<TopicViewModel>, number] | undefined {
+    if (!this.owner) {
+      throw new Error('integrity error')
+    }
+    const node = this.owner
+
+    if (parentOffset === index) {
+      return [node, depth]
+    }
+
+    let position = parentOffset + 1
+    for (const edge of node.edgeArray) {
+      let viewModel = edge.target.viewModel
+      const nextPosition = position + (viewModel?.visibleChildren() ?? 0)
+      if (nextPosition > index) {
+        return viewModel?.visibleChildAt(index, depth + 1, position)
+      }
+      position = nextPosition
+    }
+  }
+
+  public visibleChildren(): number {
+    if (!this.owner) {
+      throw new Error('integrity error')
+    }
+
+    if (this._cachedChildTopicCount === undefined) {
+      if (!this.expanded) {
+        return 1
+      }
+
+      this._cachedChildTopicCount =
+        1 + this.owner.edgeArray.map(e => e.target.viewModel?.visibleChildren() ?? 1).reduce((a, b) => a + b, 0)
+    }
+
+    return this._cachedChildTopicCount as number
+  }
+
+  public retain() {
+    this.referenceCounter += 1
+  }
+
+  public release() {
+    this.referenceCounter -= 1
+    if (this.referenceCounter <= 0) {
+      this.destroy()
+    }
  }

  public destroy() {
+    // console.log('destroy', this.owner?.path(), this.referenceCounter)
+    this.owner?.onMerge.unsubscribe(this.clearCache)
+    if (this.owner) {
+      this.owner.viewModel = undefined
+      this.owner = undefined
+    }
    this.selectionChange.removeAllListeners()
+    this.onDecoderChange.removeAllListeners()
+    this.expandedChange.removeAllListeners()
  }

  public isSelected() {
@@ -32,6 +170,8 @@ export class TopicViewModel implements Destroyable {
  public setExpanded(expanded: boolean, fireEvent: boolean) {
    const didChange = this.expanded !== expanded
    this.expanded = expanded
+    this.clearCache()
+
    if (didChange && fireEvent) {
      this.expandedChange.dispatch()
    }
@@ -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
  }
-}
+}
@@ -54,7 +54,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' },
@@ -96,4 +104,7 @@ module.exports = {
    // "react": "React",
    // "react-dom": "ReactDOM"
  },
+  cache: {
+    type: 'filesystem',
+  },
 }
@@ -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'

@@ -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,
      })
@@ -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}`
  }
@@ -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
    }
  }
@@ -1,3 +1,8 @@
 export interface Destroyable {
  destroy(): void
 }
+
+export interface MemoryLifecycle {
+  retain(): void
+  release(): void
+}
@@ -1,8 +1,8 @@
-import { Destroyable } from './Destroyable'
+import { Destroyable, MemoryLifecycle } from './Destroyable'
 import { Hashable, TreeNode } from './'
 const sha1 = require('sha1')

-export class Edge<ViewModel extends Destroyable> implements Hashable {
+export class Edge<ViewModel extends Destroyable & MemoryLifecycle> implements Hashable {
  public name: string

  public target!: TreeNode<ViewModel>
@@ -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
@@ -1,10 +1,10 @@
 import { ChangeBuffer } from './ChangeBuffer'
-import { Destroyable } from './Destroyable'
+import { Destroyable, MemoryLifecycle } from './Destroyable'
 import { EventDispatcher, makeConnectionMessageEvent, MqttMessage, EventBusInterface } from '../../../events'
 import { TreeNode } from './'
 import { TreeNodeFactory } from './TreeNodeFactory'

-export class Tree<ViewModel extends Destroyable> extends TreeNode<ViewModel> {
+export class Tree<ViewModel extends Destroyable & MemoryLifecycle> extends TreeNode<ViewModel> {
  public connectionId?: string
  public updateSource?: EventBusInterface
  public nodeFilter?: (node: TreeNode<ViewModel>) => boolean
@@ -1,8 +1,11 @@
-import { Destroyable } from './Destroyable'
+import { Destroyable, MemoryLifecycle } from './Destroyable'
 import { Edge, Message, RingBuffer, MessageHistory } from './'
 import { EventDispatcher } from '../../../events'
+import { TopicViewModel } from '../../../app/src/model/TopicViewModel'

-export class TreeNode<ViewModel extends Destroyable> {
+export type TopicDataType = 'string' | 'json' | 'hex'
+
+export class TreeNode<ViewModel extends Destroyable & MemoryLifecycle> {
  public sourceEdge?: Edge<ViewModel>
  public message?: Message
  public messageHistory: MessageHistory = new RingBuffer<Message>(20000, 100)
@@ -17,6 +20,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>>
@@ -45,6 +49,8 @@ export class TreeNode<ViewModel extends Destroyable> {
    this.onMessage.subscribe(() => {
      this.lastUpdate = Date.now()
    })
+    this.viewModel = new TopicViewModel(this as any) as any
+    this.viewModel?.retain()
  }

  private previous(): TreeNode<ViewModel> | undefined {
@@ -114,7 +120,7 @@ export class TreeNode<ViewModel extends Destroyable> {
    for (const edge of this.edgeArray) {
      edge.target.destroy()
    }
-    this.viewModel && this.viewModel.destroy()
+    this.viewModel?.release()
    this.viewModel = undefined
    this.edgeArray = []
    this.edges = {}
@@ -144,7 +150,7 @@ export class TreeNode<ViewModel extends Destroyable> {
  }

  public hash(): string {
-    return `N${this.sourceEdge ? this.sourceEdge.hash() : ''}`
+    return `N${this.sourceEdge?.hash() ?? ''}`
  }

  public firstNode(): TreeNode<ViewModel> {
@@ -153,7 +159,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('/')
@@ -1,10 +1,11 @@
-import { Destroyable } from './Destroyable'
+import { Destroyable, MemoryLifecycle } from './Destroyable'
 import { Edge, Tree, TreeNode } from './'
 import { MqttMessage } from '../../../events'
+import { Base64Message } from './Base64Message'

 export abstract class TreeNodeFactory {
  private static messageCounter = 0
-  public static insertNodeAtPosition<ViewModel extends Destroyable>(
+  public static insertNodeAtPosition<ViewModel extends Destroyable & MemoryLifecycle>(
    edgeNames: Array<string>,
    node: TreeNode<ViewModel>
  ) {
@@ -20,7 +21,7 @@ export abstract class TreeNodeFactory {
    node.sourceEdge!.target = node
  }

-  public static fromMessage<ViewModel extends Destroyable>(
+  public static fromMessage<ViewModel extends Destroyable & MemoryLifecycle>(
    mqttMessage: MqttMessage,
    receiveDate: Date = new Date()
  ): TreeNode<ViewModel> {
@@ -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,
    })
@@ -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'
@@ -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
@@ -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
-  },
-}
@@ -0,0 +1,67 @@
+import 'mocha'
+
+import { expect } from 'chai'
+import { makeTreeNode } from './makeTreeNode'
+
+describe('TreeNode', () => {
+  const leaf1 = makeTreeNode('foo/bar', 'foo')
+  const leaf2 = makeTreeNode('foo/bar/baz', 'bar')
+  const leaf3 = makeTreeNode('foo/biz/baz', 'bar')
+  const leaf4 = makeTreeNode('bar/biz', 'bar')
+  const root = leaf1.firstNode()
+
+  root.updateWithNode(leaf2.firstNode())
+  root.updateWithNode(leaf3.firstNode())
+  root.updateWithNode(leaf4.firstNode())
+
+  describe('expanding the root should count the children', () => {
+    it('nothing expanded', () => {
+      expect(root?.viewModel?.visibleChildren()).to.eq(1)
+    })
+
+    it('root expanded', () => {
+      root.viewModel?.setExpanded(true)
+      expect(root?.viewModel?.visibleChildren()).to.eq(3)
+    })
+
+    it('root and "foo" expanded', () => {
+      root.viewModel?.setExpanded(true)
+      root.findNode('foo')!.viewModel!.setExpanded(true)
+      expect(root?.viewModel?.visibleChildren()).to.eq(5)
+    })
+  })
+
+  describe('visibleChildAt', () => {
+    it('nothing expanded', () => {
+      expect(root?.viewModel?.visibleChildAt(0)?.[0].path()).to.eq('')
+    })
+
+    it('root expanded', () => {
+      root.viewModel?.setExpanded(true)
+      expect(root?.viewModel?.visibleChildAt(1)?.[0].path()).to.eq('foo')
+    })
+
+    it('root and "foo" expanded', () => {
+      root.viewModel?.setExpanded(true)
+      root.findNode('foo')!.viewModel!.setExpanded(true)
+      expect(root?.viewModel?.visibleChildAt(4)?.[0].path()).to.eq('bar')
+    })
+  })
+
+  describe('getIndex', () => {
+    it('nothing expanded', () => {
+      expect(root?.viewModel?.getIndex()).to.eq(0)
+    })
+
+    it('root expanded', () => {
+      root.viewModel?.setExpanded(true)
+      expect(root?.viewModel?.visibleChildAt(1)?.[0].viewModel?.getIndex()).to.eq(1)
+    })
+
+    it('root and "foo" expanded', () => {
+      root.viewModel?.setExpanded(true)
+      root.findNode('foo')!.viewModel!.setExpanded(true)
+      expect(root?.viewModel?.visibleChildAt(4)?.[0].viewModel?.getIndex()).to.eq(4)
+    })
+  })
+})
@@ -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', () => {
@@ -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
@@ -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,
@@ -1,10 +1,6 @@
 #!/bin/bash
 set -e

-git clone https://github.com/thomasnordquist/MQTT-Explorer.git /app
-cd /app
-git checkout travis-ui-tests
-
 yarn install --frozen-lockfile
 yarn build

@@ -0,0 +1,15 @@
+const eslint = require('@eslint/js')
+const hooksPlugin = require('eslint-plugin-react-hooks')
+
+module.export = [
+  // eslint.configs.recommended,
+  {
+    // files: ['app/src/**/*'],
+    plugins: {
+      'react-hooks': hooksPlugin,
+    },
+    ignores: ['build/**/*', 'dist/**/*', 'node_modules/**/*', 'app/build/**/*'],
+    ignorePatterns: ['build/**/*', 'dist/**/*', 'node_modules/**/*', 'app/build/**/*'],
+    rules: hooksPlugin.configs.recommended.rules,
+  },
+]
@@ -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
@@ -1,11 +1,12 @@
 {
  "name": "MQTT-Explorer",
-  "version": "0.4.0-beta4",
+  "version": "0.4.0-beta.5",
  "description": "Explore your message queues",
  "main": "dist/src/electron.js",
  "engines": {
    "node": ">=18"
  },
+  "private": "true",
  "scripts": {
    "start": "electron .",
    "test": "yarn test:app && yarn test:backend",
@@ -78,6 +79,9 @@
    "@babel/runtime": "^7.17.2",
    "@cspell/dict-typescript": "^3.1.2",
    "@electron/notarize": "^2.3.0",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/commit-analyzer": "^12.0.0",
+    "@semantic-release/git": "^10.0.1",
    "@types/chai": "^4.1.7",
    "@types/fs-extra": "8",
    "@types/lowdb": "^1.0.6",
@@ -100,7 +104,10 @@
    "playwright": "^1.43.0",
    "prettier": "^3.2.5",
    "redux-thunk": "^2.3.0",
+    "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",
@@ -120,9 +127,9 @@
    "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"
  }
-}
+}
@@ -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' })
@@ -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
-}
@@ -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()
@@ -59,7 +59,4 @@ tmux send-keys -t record q
 # Ensure video is written
 sleep 5

-# Process the video
-./scripts/prepareVideo.sh
-
 exit $TEST_EXIT_CODE
@@ -19,7 +19,8 @@ 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)
@@ -69,8 +70,6 @@ async function createWindow() {
    }
  })

-  console.log('icon path', iconPath)
-
  // Load the index.html of the app.
  if (isDev()) {
    mainWindow.loadURL('http://localhost:8080')
@@ -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'
@@ -35,6 +36,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 +73,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)
  })

@@ -141,10 +151,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()
@@ -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
@@ -21,14 +21,6 @@ export function sleep(ms: number, required = false) {

 export async function writeText(text: string, element: Locator, delay = 0) {
  return element.fill(text)
-  if (fast) {
-    return element.fill(text)
-  }
-
-  for (const c of text.split('')) {
-    await element.press(c)
-    await sleep(delay)
-  }
 }

 export async function deleteTextWithBackspaces(element: Locator, delay = 0, count = 0) {
@@ -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"]
+}
Author	SHA1	Message	Date
Thomas Nordquist	bf78a4dea6	chore: coerce ui-test to end	2024-05-27 10:08:48 +02:00
Thomas Nordquist	22762f9d79	feat: connect with double-click	2024-05-27 10:08:48 +02:00
Thomas Nordquist	b21692d5d2	chore: update eclipse server url	2024-05-27 10:08:48 +02:00
Thomas Nordquist	0b5b0a6391	feat: virtualize tree rendering	2024-05-24 22:03:38 +02:00
Thomas Nordquist	2e7acb6461	test: fix demo video	2024-05-24 21:48:18 +02:00
Thomas Nordquist	e9a56ac48d	Merge remote-tracking branch 'origin/master' into tnordquist/decode-data-in-frontend	2024-05-24 17:51:24 +02:00
Björn Dalfors	b4bdd01808	add sparkplug messages to demovideo	2024-05-24 17:50:08 +02:00
Björn Dalfors	4406bf5de4	feat: use tahu for sparkplug decoding	2024-05-24 17:50:07 +02:00
Thomas Nordquist	ae0ce79e26	Merge pull request #794 from thomasnordquist/feat/use-tahu-for-sparkplug-decoding Feat/use tahu for sparkplug decoding	2024-05-24 10:12:21 +02:00
Thomas Nordquist	bbe2ae3f29	test: fix tests	2024-05-23 23:19:37 +02:00
Thomas Nordquist	a2c4388c78	fix: repair types	2024-05-23 17:05:27 +02:00
Thomas Nordquist	c88978f0dd	fix: fix ui updates	2024-05-22 15:12:45 +02:00
Thomas Nordquist	b3a37e4794	chore: refactor	2024-05-22 14:44:06 +02:00
Thomas Nordquist	1ecb53b397	fix: update react when decoder has been overriden	2024-05-22 09:04:06 +02:00
Björn Dalfors	97fedcba08	fix sparkplug topic regexp	2024-05-21 15:26:43 +02:00
Björn Dalfors	1f23c65484	Stop click event propagation prevent panel from collapsing	2024-05-21 15:17:18 +02:00
Thomas Nordquist	980072f680	chore: decode data in frontend	2024-05-21 09:22:11 +02:00
Björn Dalfors	c452b9f417	add sparkplug messages to demovideo	2024-05-20 16:42:54 +02:00
Björn Dalfors	b04f5dee16	feat: use tahu for sparkplug decoding	2024-05-18 21:48:14 +02:00
Björn Dalfors	7617430a3f	fix regex	2024-05-18 21:42:25 +02:00
Thomas Nordquist	10aae59c92	Merge remote-tracking branch 'fb/multi-decoder/master' into feat/use-tahu-for-sparkplug-decoding	2024-05-18 11:26:39 +02:00
Björn Dalfors	f4bda3e242	feat: use tahu for sparkplug decoding	2024-05-17 16:14:32 +02:00
Björn Dalfors	a346c48d3e	refine sparkplug detection	2024-05-17 09:08:34 +02:00
Björn Dalfors	8a2c39ba8e	fix: use sparkplugb decoder only for spBv1.0 topic	2024-05-15 15:24:30 +02:00
Thomas Nordquist	65b86ac5f6	chore: remove precondition	2024-05-11 21:55:11 +02:00
Thomas Nordquist	4ead740982	chore: allow manual update of website	2024-05-11 21:54:20 +02:00
Thomas Nordquist	ddaf06b682	chore: remove precondition	2024-05-11 21:51:38 +02:00
Thomas Nordquist	9e18c4db4e	chore: prevent new builds being uploaded without a release	2024-05-11 21:49:27 +02:00
Thomas Nordquist	ee783f15c0	chore: move website update to separate release action	2024-05-11 21:44:28 +02:00
Thomas Nordquist	0c31843ed5	chore: reduce builds	2024-05-11 21:29:53 +02:00
Thomas Nordquist	ffc93d20d8	chore: retry release beta 5	2024-05-11 21:17:47 +02:00
Thomas Nordquist	3c62da7e19	chore: only build macos dmg	2024-05-11 21:12:27 +02:00
Thomas Nordquist	6846dbbb28	chore: update website with new version	2024-05-11 21:10:57 +02:00
semantic-release-bot	270e3e3ead	chore(release): 0.4.0-beta.5 [skip ci]	2024-05-11 15:47:26 +00:00
Thomas Nordquist	0d73b0f519	feat: test to trigger beta release 5	2024-05-11 17:46:23 +02:00
semantic-release-bot	ee83022d19	chore(release): 0.4.0-beta.4 [skip ci]	2024-05-11 15:35:58 +00:00
Thomas Nordquist	f27467ed97	fix: add macos	2024-05-11 17:34:48 +02:00
semantic-release-bot	ddbf3d9f1f	chore(release): 0.4.0-beta.3 [skip ci]	2024-05-11 14:19:25 +00:00
Thomas Nordquist	60bbbc54d7	chore: use GithubApp to bypass branch protection	2024-05-11 16:07:16 +02:00
Thomas Nordquist	538aa7dc29	chore: use custom token fo releases	2024-05-11 15:31:08 +02:00
Thomas Nordquist	b37af291cc	feat: skip package release until github and semantic-release are in sync	2024-05-11 14:42:17 +02:00
Thomas Nordquist	333a1bcabe	fix: fix repository	2024-05-11 14:39:34 +02:00
Thomas Nordquist	c2404a7eb6	Merge pull request #779 from thomasnordquist/dependabot/npm_and_yarn/ejs-3.1.10 Bump ejs from 3.1.9 to 3.1.10	2024-05-11 12:18:00 +02:00
dependabot[bot]	bb602cd28e	Bump ejs from 3.1.9 to 3.1.10 Bumps [ejs](https://github.com/mde/ejs) from 3.1.9 to 3.1.10. - [Release notes](https://github.com/mde/ejs/releases) - [Commits](https://github.com/mde/ejs/compare/v3.1.9...v3.1.10) --- updated-dependencies: - dependency-name: ejs dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2024-05-11 10:11:20 +00:00
Thomas Nordquist	898fd3896c	Merge pull request #786 from thomasnordquist/tnordquist/test-ci chore: add ci / cd piplelines as github actions	2024-05-11 12:10:36 +02:00
Thomas Nordquist	7fb0483889	chore: document release	2024-05-11 12:03:01 +02:00
Thomas Nordquist	7d77110c1f	chore: upload test video as test artifact	2024-05-11 11:00:31 +02:00
Thomas Nordquist	a7ce6b4419	chore: upload test video as test artifact	2024-05-10 22:30:02 +02:00
Thomas Nordquist	204f6dbcde	chore: fix docker context	2024-05-10 22:17:39 +02:00
Thomas Nordquist	7fa997087f	chore: build docker test image	2024-05-10 21:15:04 +02:00
semantic-release-bot	a96b08eaaa	chore(release): 0.4.0-beta.2 [skip ci]	2024-05-10 18:12:27 +00:00
Thomas Nordquist	c9c997d13a	fix: trigger build	2024-05-10 20:04:31 +02:00
semantic-release-bot	6f3e0f62e1	chore(release): 0.4.0-beta.1 [skip ci]	2024-05-10 18:03:44 +00:00
Thomas Nordquist	824b39637c	chore: use newer node version	2024-05-10 19:56:01 +02:00
Thomas Nordquist	0100b2988a	chore: dry-run	2024-05-10 18:52:25 +02:00
Thomas Nordquist	0e72329c77	fix: update semantic-release	2024-05-10 18:48:38 +02:00
Thomas Nordquist	9b7c3b8e9c	feat: use semantic-release	2024-05-10 18:46:06 +02:00
Thomas Nordquist	b9a5a5f1d8	add semantic release	2024-05-10 18:05:41 +02:00
mhorsche	626b9cab7d	Specific int/uint byte size - possible data types are: 'json', 'string', 'hex', 'uint8', 'uint16', 'uint32', 'uint64', 'int8', 'int16', 'int32', 'int64', 'float', 'double' - default is 'json'	2022-06-21 21:14:59 +02:00
Max Horsche	567f6d2d50	Added support for binary data types - Select data type (string, json, hex, uint, int, float) for each topic individually - Default data type is 'string' - Show milliseconds in message received timestamp	2021-01-11 10:11:34 +01:00