fix: repair types

app/src/components/Sidebar/Sidebar.tsx

@@ -1,10 +1,9 @@
 import * as q from '../../../../backend/src/Model'
 import React, { useState, useEffect, useCallback } from 'react'
-import ExpandMore from '@material-ui/icons/ExpandMore'
 import NodeStats from './NodeStats'
 import ValuePanel from './ValueRenderer/ValuePanel'
 import { AppState } from '../../reducers'
-import { Badge, ExpansionPanel, ExpansionPanelDetails, ExpansionPanelSummary, Typography } from '@material-ui/core'
+import { ExpansionPanelDetails } from '@material-ui/core'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { settingsActions, sidebarActions } from '../../actions'

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

@@ -65,7 +65,7 @@ export const MessageHistory: React.FC<Props> = props => {
   const history = node.messageHistory.toArray()
   let previousMessage: q.Message | undefined = node.message
   const historyElements = [...history].reverse().map((message, idx) => {
-    const value = node.message ? decodeMessage(node.message)?.format()[0] ?? null : null
+    const value = node.message ? decodeMessage(message)?.message?.format()[0] ?? null : null
 
     const element = {
       value: value ?? '',
@@ -96,7 +96,7 @@ export const MessageHistory: React.FC<Props> = props => {
     return element
   })
 
-  const value = node.message ? decodeMessage(node.message)?.format()[0] ?? null : null
+  const value = node.message ? decodeMessage(node.message)?.message?.format()[0] ?? null : null
 
   const isMessagePlottable = isPlottable(value)
   return (

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

@@ -56,7 +56,7 @@ function ValuePanel(props: Props) {
   }
 
   const getDecodedValue = useCallback(() => {
-    return node?.message && decodeMessage(node.message)?.toUnicodeString()
+    return node?.message && decodeMessage(node.message)?.message?.toUnicodeString()
   }, [node, decodeMessage])
 
   function messageMetaInfo() {

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

@@ -1,12 +1,13 @@
 import * as q from '../../../../../backend/src/Model'
-import * as React from 'react'
+import React, { useMemo } from 'react'
 import CodeDiff from '../CodeDiff'
 import { AppState } from '../../../reducers'
 import { connect } from 'react-redux'
 import { ValueRendererDisplayMode } from '../../../reducers/Settings'
 import { Fade } from '@material-ui/core'
 import { Decoder } from '../../../../../backend/src/Model/Decoder'
-import { DecoderFunction, useDecoder } from '../../hooks/useDecoder'
+import { useDecoder } from '../../hooks/useDecoder'
+import { TopicViewModel } from '../../../model/TopicViewModel'
 
 interface Props {
   message: q.Message
@@ -15,86 +16,112 @@ interface Props {
   renderMode: ValueRendererDisplayMode
 }
 
-export const ValueRenderer: React.FC<Props> = props => {
-  const decodeMessage = useDecoder(props.treeNode)
+type Language = 'json'
 
-  function renderDiff(current: string = '', previous: string = '', title?: string, language?: 'json') {
-    return (
-      <CodeDiff
-        treeNode={props.treeNode}
-        previous={previous}
-        current={current}
-        title={title}
-        language={language}
-        nameOfCompareMessage={props.compareWith ? 'selected' : 'previous'}
-      />
-    )
-  }
+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'}
+    />
+  )
+}
 
-  function renderDiffMode(
-    decodeMessage: DecoderFunction,
-    message: q.Message,
-    treeNode: q.TreeNode<any>,
-    compare?: q.Message
+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
+
+  return <div>{renderDiff(treeNode, compareWithPreviousMessage, currentStr, compareStr, undefined, language)}</div>
+}
+
+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>
+  )
+}
+
+export const ValueRenderer: React.FC<Props> = ({ treeNode, compareWith: compare, message, renderMode }) => {
+  const decodeMessage = useDecoder(treeNode)
+  const decodedMessage = useMemo(() => decodeMessage(message), [decodeMessage, message])
+
+  const previousMessages = treeNode.messageHistory.toArray()
+  const previousMessage = previousMessages[previousMessages.length - 2]
+  const compareMessage = compare || previousMessage || message
+  const compareWithPreviousMessage = !!compare
+
+  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]
+  )
+
+  function renderValue(
+    treeNode: q.TreeNode<TopicViewModel>,
+    currentStr: string | undefined,
+    compareStr: string | undefined,
+    currentType: Language | undefined,
+    compareType: Language | undefined,
+    renderMode: string,
+    compareWithPreviousMessage: boolean
   ) {
-    if (!message.payload) {
-      return
-    }
-
-    const previousMessages = treeNode.messageHistory.toArray()
-    const previousMessage = previousMessages[previousMessages.length - 2]
-    const compareMessage = compare || previousMessage || message
-
-    const [currentStr, currentType] = decodeMessage(message)?.format(treeNode.type) ?? []
-    const [compareStr, compareType] = decodeMessage(compareMessage)?.format(treeNode.type) ?? []
-
-    const language = currentType === compareType && compareType === 'json' ? 'json' : undefined
-
-    return <div>{renderDiff(currentStr, compareStr, undefined, language)}</div>
-  }
-
-  function renderRawMode(
-    decodeMessage: DecoderFunction,
-    message: q.Message,
-    treeNode: q.TreeNode<any>,
-    compare?: q.Message
-  ) {
-    if (!message.payload) {
-      return
-    }
-
-    const [currentStr, currentType] = decodeMessage(message)?.format(treeNode.type) ?? []
-    const [compareStr, compareType] =
-      compare && compare.payload ? decodeMessage(compare)?.format(treeNode.type) ?? [] : []
-
-    return (
-      <div>
-        {renderDiff(currentStr, currentStr, undefined, currentType)}
-        <Fade in={Boolean(compareStr)} timeout={400}>
-          <div>{Boolean(compareStr) ? renderDiff(compareStr, compareStr, 'selected', compareType) : null}</div>
-        </Fade>
-      </div>
-    )
-  }
-
-  function renderValue(decodeMessage: DecoderFunction) {
-    const { message, treeNode, compareWith, renderMode } = props
-    if (!message.payload) {
+    if (!decodedMessage) {
       return null
     }
 
     switch (renderMode) {
       case 'diff':
-        return renderDiffMode(decodeMessage, message, treeNode, compareWith)
+        return renderDiffMode(treeNode, currentStr, compareStr, currentType, compareType, compareWithPreviousMessage)
       default:
-        return renderRawMode(decodeMessage, message, treeNode, compareWith)
+        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%' }}>
-      {props.message?.payload?.decoder === Decoder.SPARKPLUG && 'Decoded SparkplugB'}
-      {renderValue(decodeMessage)}
+      {decodedMessage?.decoder === Decoder.SPARKPLUG && 'Decoded SparkplugB'}
+      {renderedValue}
     </div>
   )
 }

app/src/components/TopicPlot.tsx

@@ -30,7 +30,7 @@ function filterUsingTimeRange(startTime: number | undefined, data: Array<q.Messa
 function nodeToHistory(decodeMessage: DecoderFunction, startTime: number | undefined, history: q.MessageHistory) {
   return filterUsingTimeRange(startTime, history.toArray())
     .map((message: q.Message) => {
-      const decoded = decodeMessage(message)?.toUnicodeString()
+      const decoded = decodeMessage(message)?.message?.toUnicodeString()
       return { x: message.received.getTime(), y: toPlottableValue(decoded) }
     })
     .filter(data => !isNaN(data.y as any)) as any
@@ -46,7 +46,7 @@ function nodeDotPathToHistory(
     .map((message: q.Message) => {
       let json: any = {}
       try {
-        const decoded = decodeMessage(message)
+        const decoded = decodeMessage(message)?.message
         json = decoded ? JSON.parse(decoded.toUnicodeString()) : {}
       } catch (ignore) {}
 

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

@@ -32,7 +32,7 @@ export const TreeNodeTitle = (props: TreeNodeProps) => {
     if (!props.treeNode.message || !props.treeNode.message.payload) {
       return ''
     }
-    const [value = ''] = decodeMessage(props.treeNode.message)?.format(props.treeNode.type) ?? []
+    const [value = ''] = decodeMessage(props.treeNode.message)?.message?.format(props.treeNode.type) ?? []
 
     return value.length > limit ? `${value.slice(0, limit)}…` : value
   }

app/src/components/hooks/useDecoder.ts

@@ -1,11 +1,12 @@
 import * as q from '../../../../backend/src/Model'
 import { useCallback, useState } from 'react'
 import { TopicViewModel } from '../../model/TopicViewModel'
-import { Base64Message } from '../../../../backend/src/Model/Base64Message'
 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) => Base64Message | null
+export type DecoderFunction = (message: q.Message) => DecoderEnvelope | undefined
 
 /**
  * Provides the latest decoder for a topic
@@ -21,7 +22,9 @@ export function useDecoder(treeNode: q.TreeNode<TopicViewModel> | undefined): De
 
   return useCallback(
     message => {
-      return decoder && message.payload ? decoder.decoder.decode(message.payload, decoder.format) : message.payload
+      return decoder && message.payload
+        ? decoder.decoder.decode(message.payload, decoder.format)
+        : { message: message.payload ?? undefined, decoder: Decoder.NONE }
     },
     [decoder]
   )