Improve payload truncation in tree

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

@@ -53,7 +53,6 @@ function TreeNodeSubnodes(props: Props) {
         <TreeNode
           key={`${node.hash()}-${props.filter}`}
           treeNode={node}
-          className={props.classes.listItem}
           lastUpdate={node.lastUpdate}
           selectTopicAction={props.selectTopicAction}
           settings={props.settings}

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

@@ -1,11 +1,12 @@
-import * as React from 'react'
 import * as q from '../../../../../backend/src/Model'
-import { withStyles, Theme } from '@material-ui/core'
+import React from 'react'
-import { TopicViewModel } from '../../../model/TopicViewModel'
 import { Base64Message } from '../../../../../backend/src/Model/Base64Message'
+import { Theme, withStyles } from '@material-ui/core'
+import { TopicViewModel } from '../../../model/TopicViewModel'
 
 export interface TreeNodeProps extends React.HTMLAttributes<HTMLElement> {
   treeNode: q.TreeNode<TopicViewModel>
+  lastUpdate: number
   name?: string | undefined
   collapsed?: boolean | undefined
   didSelectNode: any
@@ -13,7 +14,7 @@ export interface TreeNodeProps extends React.HTMLAttributes<HTMLElement> {
   classes: any
 }
 
-class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
+class TreeNodeTitle extends React.PureComponent<TreeNodeProps, {}> {
   private renderSourceEdge() {
     const name = this.props.name || (this.props.treeNode.sourceEdge && this.props.treeNode.sourceEdge.name)
 
@@ -24,13 +25,23 @@ class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
     )
   }
 
+  private truncatedMessage() {
+    const limit = 350
+    if (!this.props.treeNode.message || !this.props.treeNode.message.value) {
+      return ''
+    }
+
+    const str = Base64Message.toUnicodeString(this.props.treeNode.message.value)
+    return str.length > limit ? `${str.slice(0, limit)}…` : str
+  }
+
   private renderValue() {
     return this.props.treeNode.message &&
       this.props.treeNode.message.value &&
       this.props.treeNode.message.length > 0 ? (
       <span key="value" className={this.props.classes.value}>
         {' '}
-        = {Base64Message.toUnicodeString(this.props.treeNode.message.value).slice(0, 120)}
+        = {this.truncatedMessage()}
       </span>
     ) : null
   }

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

@@ -19,7 +19,6 @@ export interface Props {
   name?: string | undefined
   collapsed?: boolean | undefined
   classes: any
-  className?: string
   lastUpdate: number
   actions: typeof treeActions
   selectTopicAction: (treeNode: q.TreeNode<any>) => void
@@ -28,7 +27,7 @@ export interface Props {
 }
 
 function TreeNodeComponent(props: Props) {
-  const { actions, classes, className, settings, theme, treeNode, lastUpdate, name } = props
+  const { actions, classes, settings, theme, treeNode, lastUpdate, name } = props
   const [collapsedOverride, setCollapsedOverride] = useState<boolean | undefined>(undefined)
   const [selected, selectionLastUpdate, setSelected] = useSelectionState(false)
   const nodeRef = useRef<HTMLDivElement>()
@@ -112,25 +111,26 @@ function TreeNodeComponent(props: Props) {
 
     const highlightClass = selected ? classes.selected : ''
     return (
-      <div>
+      <div className={classes.node}>
-        <div
+        <span
+          ref={nodeRef as any}
           key={treeNode.hash()}
-          className={`${classes.node} ${className} ${highlightClass} ${classes.title}`}
+          className={`${classes.title} ${highlightClass}`}
           onMouseEnter={mouseOver}
           onFocus={didObtainFocus}
           onClick={didClickTitle}
-          ref={nodeRef as any}
           tabIndex={-1}
           onKeyDown={deleteTopicCallback}
         >
           <TreeNodeTitle
+            lastUpdate={treeNode.lastUpdate}
             toggleCollapsed={toggleCollapsed}
             didSelectNode={didSelectTopic}
             collapsed={isCollapsed}
             treeNode={treeNode}
             name={name}
           />
-        </div>
+        </span>
         {renderNodes()}
       </div>
     )

app/src/components/Tree/TreeNode/styles.ts

@@ -17,14 +17,15 @@ export const styles = (theme: Theme) => {
       color: theme.palette.text.secondary,
     },
     displayBlock: {
-      display: 'block',
+      display: 'block' as 'block',
     },
     node: {
-      display: 'block',
+      display: 'block' as 'block',
-      marginLeft: '10px',
+      width: '100%',
-      '&:hover': {
+      overflow: 'hidden' as 'hidden',
-        backgroundColor: theme.palette.type === 'light' ? blueGrey[100] : theme.palette.primary.light,
+      textOverflow: 'ellipsis' as 'ellipsis',
-      },
+      whiteSpace: 'nowrap' as 'nowrap',
+      padding: '1px 0px 0px 0px',
     },
     topicSelect: {
       float: 'right' as 'right',
@@ -44,9 +45,12 @@ export const styles = (theme: Theme) => {
       lineHeight: '1em',
       display: 'inline-block' as 'inline-block',
       whiteSpace: 'nowrap' as 'nowrap',
-      padding: '1px 4px 0px 4px',
       height: '14px',
+      padding: '0 4px',
       margin: '1px 0px 2px 0px',
+      '&:hover': {
+        backgroundColor: theme.palette.type === 'light' ? blueGrey[100] : theme.palette.primary.light,
+      },
     },
   }
 }