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

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

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

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

@@ -6,22 +6,30 @@ 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)
   }, [])
 
+  const setTopicType = useCallback((node?: q.TreeNode<any>, type: q.TopicDataType = 'string') => {
+    if (!node) {
+      return
+    }
+    node.type = type
+  }, [])
+
   return useMemo(
     () => (
       <Panel disabled={!Boolean(node)}>
@@ -29,6 +37,7 @@ 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} setTopicType={setTopicType} />
         </span>
         <Topic node={node} />
       </Panel>

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

@@ -0,0 +1,83 @@
+import React, { useCallback } from 'react'
+import * as q from '../../../../../backend/src/Model'
+import CustomIconButton from '../../helper/CustomIconButton'
+import Code from '@material-ui/icons/Code'
+import ClickAwayListener from '@material-ui/core/ClickAwayListener'
+import Grow from '@material-ui/core/Grow'
+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'
+
+const options: q.TopicDataType[] = ['string', 'json', 'hex', 'integer', 'unsigned int', 'floating point'];
+
+export const TopicTypeButton = (props: {
+  node?: q.TreeNode<any>
+  setTopicType: (node: q.TreeNode<any>, type: q.TopicDataType) => void
+}) => {
+  const { node } = props
+  if (!node || !node.message || !node.message.payload) {
+    return null
+  }
+
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const [open, setOpen] = React.useState(false)
+
+  const handleMenuItemClick = useCallback(
+    (mouseEvent: React.MouseEvent, element: q.TreeNode<any>, type: q.TopicDataType) => {
+      if (!element || !type) {
+        return
+      }
+      props.setTopicType(element, type as q.TopicDataType)
+      setOpen(false)
+    },
+    [props.setTopicType]
+  )
+
+  const handleToggle = (event: React.MouseEvent<HTMLElement>) => {
+    if (open === true) {
+      return
+    }
+    setAnchorEl(event.currentTarget)
+    setOpen((prevOpen) => !prevOpen)
+  }
+
+  const handleClose = (event: React.MouseEvent<Document, MouseEvent>) => {
+    if (anchorEl && anchorEl.contains(event.target as HTMLElement)) {
+      return
+    }
+    setOpen(false)
+  }
+
+  return (
+    <CustomIconButton tooltip="" onClick={handleToggle}>
+      <Code />
+      <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((option, index) => (
+                    <MenuItem
+                      key={option}
+                      selected={node && option === node.type}
+                      onClick={(event) => handleMenuItemClick(event, node, option)}
+                    >
+                      {option}
+                    </MenuItem>
+                  ))}
+                </MenuList>
+              </ClickAwayListener>
+            </Paper>
+          </Grow>
+        )}
+      </Popper>
+    </CustomIconButton>
+  )
+}

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

@@ -82,7 +82,7 @@ class MessageHistory extends React.PureComponent<Props, State> {
     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 [value, ignore] = Base64Message.format(message.payload, node.type)
       const element = {
         value,
         key: `${message.messageNumber}-${message.received}`,
@@ -102,7 +102,7 @@ class MessageHistory extends React.PureComponent<Props, State> {
               <MessageId message={message} />
             </span>
             <div style={{ float: 'right' }}>
-              <Copy value={value} />
+              <Copy value={value ? value : ''} />
             </div>
           </span>
         ),
@@ -112,8 +112,8 @@ class MessageHistory extends React.PureComponent<Props, State> {
       return element
     })
 
-    const isMessagePlottable =
-      node.message && node.message.payload && isPlottable(Base64Message.toUnicodeString(node.message.payload))
+    const [value, ignore] = node.message && node.message.payload ? Base64Message.format(node.message.payload, node.type) : [null, undefined]
+    const isMessagePlottable = isPlottable(value)
     return (
       <div>
         <History
@@ -131,7 +131,7 @@ class MessageHistory extends React.PureComponent<Props, State> {
           }
           onClick={this.displayMessage}
         >
-          {isMessagePlottable ? <TopicPlot history={node.messageHistory} /> : null}
+          {isMessagePlottable ? <TopicPlot node={node} history={node.messageHistory} /> : null}
         </History>
       </div>
     )

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

@@ -85,10 +85,10 @@ function ValuePanel(props: Props) {
     [compareMessage]
   )
 
-  const copyValue =
-    node && node.message && node.message.payload ? (
-      <Copy value={Base64Message.toUnicodeString(node.message.payload)} />
-    ) : null
+  const [value, ignore] = node && node.message && node.message.payload ? Base64Message.format(node.message.payload, node.type) : [null, undefined]
+  const copyValue = value ? (
+    <Copy value={value} />
+  ) : null
 
   return (
     <Panel>

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

@@ -4,9 +4,8 @@ import CodeDiff from '../CodeDiff'
 import { AppState } from '../../../reducers'
 import { Base64Message } from '../../../../../backend/src/Model/Base64Message'
 import { connect } from 'react-redux'
-import { default as ReactResizeDetector } from 'react-resize-detector'
 import { ValueRendererDisplayMode } from '../../../reducers/Settings'
-import { Typography, Fade, Grow } from '@material-ui/core'
+import { Fade } from '@material-ui/core'
 
 interface Props {
   message: q.Message
@@ -38,44 +37,42 @@ class ValueRenderer extends React.Component<Props, State> {
     )
   }
 
-  private convertMessage(msg?: Base64Message): [string | undefined, 'json' | undefined] {
-    if (!msg) {
-      return [undefined, undefined]
-    }
-
-    const str = Base64Message.toUnicodeString(msg)
-    try {
-      JSON.parse(str)
-    } catch (error) {
-      return [str, undefined]
-    }
-
-    return [this.messageToPrettyJson(str), 'json']
-  }
-
-  private messageToPrettyJson(str: string): string | undefined {
-    try {
-      const json = JSON.parse(str)
-      return JSON.stringify(json, undefined, '  ')
-    } catch {
-      return undefined
-    }
-  }
-
-  private renderRawMode(message: q.Message, compare?: q.Message) {
+  private renderDiffMode(message: q.Message, treeNode: q.TreeNode<any>, 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]
+
+    const previousMessages = treeNode.messageHistory.toArray()
+    const previousMessage = previousMessages[previousMessages.length - 2]
+    const compareMessage = compare || previousMessage || message
+
+    const compareValue = compareMessage.payload || message.payload
+    const [currentStr, currentType] = Base64Message.format(message.payload, treeNode.type)
+    const [compareStr, compareType] = Base64Message.format(compareValue, treeNode.type)
+
+    const language = currentType === compareType && compareType === 'json' ? 'json' : undefined
 
     return (
       <div>
-        {this.renderDiff(value, value, undefined, valueLanguage)}
+        {this.renderDiff(currentStr, compareStr, undefined, language)}
+      </div>
+    )
+  }
+
+  private renderRawMode(message: q.Message, treeNode: q.TreeNode<any>, compare?: q.Message) {
+    if (!message.payload) {
+      return
+    }
+
+    const [currentStr, currentType] = Base64Message.format(message.payload, treeNode.type)
+    const [compareStr, compareType] = compare && compare.payload ? Base64Message.format(compare.payload, treeNode.type) : [undefined, undefined]
+
+    return (
+      <div>
+        {this.renderDiff(currentStr, currentStr, undefined, currentType)}
         <Fade in={Boolean(compareStr)} timeout={400}>
           <div>
-            {Boolean(compareStr) ? this.renderDiff(compareStr, compareStr, 'selected', compareStrLanguage) : null}
+            {Boolean(compareStr) ? this.renderDiff(compareStr, compareStr, 'selected', compareType) : null}
           </div>
         </Fade>
       </div>
@@ -88,24 +85,16 @@ class ValueRenderer extends React.Component<Props, State> {
 
   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) {
       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 this.renderDiffMode(message, treeNode, compareWith)
+      default:
+        return this.renderRawMode(message, treeNode, compareWith)
+    }
   }
 }