chore: decode data in frontend

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

@@ -1,6 +1,5 @@
 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'
 
@@ -30,8 +29,9 @@ class TreeNodeTitle extends React.PureComponent<TreeNodeProps, {}> {
     if (!this.props.treeNode.message || !this.props.treeNode.message.payload) {
       return ''
     }
+    const [value = ''] =
+      this.props.treeNode.decodeMessage(this.props.treeNode.message)?.format(this.props.treeNode.type) ?? []
 
-    const [value, ignore] = Base64Message.format(this.props.treeNode.message.payload, this.props.treeNode.type)
     return value.length > limit ? `${value.slice(0, limit)}…` : value
   }
 
@@ -39,11 +39,11 @@ class TreeNodeTitle extends React.PureComponent<TreeNodeProps, {}> {
     return this.props.treeNode.message &&
       this.props.treeNode.message.payload &&
       this.props.treeNode.message.length > 0 ? (
-        <span key="value" className={this.props.classes.value}>
-          {' '}
+      <span key="value" className={this.props.classes.value}>
+        {' '}
         = {this.truncatedMessage()}
-        </span>
-      ) : null
+      </span>
+    ) : null
   }
 
   private renderExpander() {
@@ -66,8 +66,9 @@ class TreeNodeTitle extends React.PureComponent<TreeNodeProps, {}> {
     const messages = this.props.treeNode.leafMessageCount()
     const topicCount = this.props.treeNode.childTopicCount()
     return (
-      <span key="metadata" className={this.props.classes.collapsedSubnodes}>{` (${topicCount} ${topicCount === 1 ? 'topic' : 'topics'
-        }, ${messages} ${messages === 1 ? 'message' : 'messages'})`}</span>
+      <span key="metadata" className={this.props.classes.collapsedSubnodes}>{` (${topicCount} ${
+        topicCount === 1 ? 'topic' : 'topics'
+      }, ${messages} ${messages === 1 ? 'message' : 'messages'})`}</span>
     )
   }