Reduce tree DOM nodes by 33%

app/src/components/Tree/TreeNode.tsx

@@ -38,6 +38,15 @@ const styles = (theme: Theme) => {
     hover: {
       backgroundColor: theme.palette.type === 'dark' ? 'rgba(100, 100, 100, 0.55)' : 'rgba(200, 200, 200, 0.55)',
     },
+    title: {
+      borderRadius: '4px',
+      lineHeight: '1em',
+      display: 'inline-block' as 'inline-block',
+      whiteSpace: 'nowrap' as 'nowrap',
+      padding: '1px 4px 0px 4px',
+      height: '14px',
+      margin: '1px 0px 2px 0px',
+    },
   }
 }
 
@@ -236,7 +245,7 @@ class TreeNode extends React.Component<Props, State> {
       <div>
         <div
           key={this.props.treeNode.hash()}
-          className={`${classes.node} ${this.props.className}`}
+          className={`${classes.node} ${this.props.className} ${highlightClass} ${classes.title} `}
           onMouseOver={this.mouseOver}
           onMouseOut={this.mouseOut}
           onClick={this.didClickTitle}
@@ -249,12 +258,9 @@ class TreeNode extends React.Component<Props, State> {
             collapsed={this.collapsed()}
             treeNode={this.props.treeNode}
             name={this.props.name}
-            className={highlightClass}
           />
         </div>
-        <div className={classes.subnodes}>
-          {this.renderNodes()}
-        </div>
+        {this.renderNodes()}
       </div>
     )
   }

app/src/components/Tree/TreeNodeSubnodes.tsx

@@ -94,9 +94,7 @@ const styles = (theme: Theme) => ({
   list: {
     display: 'block' as 'block',
     clear: 'both' as 'both',
-  },
-  listItem: {
-    padding: `0px 0px 0px ${theme.spacing(1)}`,
+    marginLeft: theme.spacing(1.5),
   },
 })
 

app/src/components/Tree/TreeNodeTitle.tsx

@@ -10,9 +10,9 @@ export interface TreeNodeProps extends React.HTMLAttributes<HTMLElement> {
   treeNode: q.TreeNode<TopicViewModel>
   name?: string | undefined
   collapsed?: boolean | undefined
-  classes: any
   didSelectNode: any
   toggleCollapsed: any
+  classes: any
 }
 
 class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
@@ -34,7 +34,7 @@ class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
       return null
     }
 
-    return this.props.collapsed ? '▶' : '▼'
+    return <span className={this.props.classes.expander} onClick={this.props.toggleCollapsed}>{this.props.collapsed ? '▶' : '▼'}</span>
   }
 
   private renderCollapsedSubnodes() {
@@ -46,16 +46,13 @@ class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
     return <span className={this.props.classes.collapsedSubnodes}>({this.props.treeNode.childTopicCount()} topics, {messages} messages)</span>
   }
   public render() {
-    const { classes, style, className } = this.props
-    return (
-      <span
-        className={`${classes.title} ${className}`}
-        style={style}
-      >
-        <span className={classes.expander} onClick={this.props.toggleCollapsed}>{this.renderExpander()}</span>
-        {this.renderSourceEdge()} {this.renderCollapsedSubnodes()} {this.renderValue()}
-      </span>
-    )
+    const { style, className } = this.props
+    return ([
+      this.renderExpander(),
+      this.renderSourceEdge(),
+      this.renderCollapsedSubnodes(),
+      this.renderValue(),
+    ])
   }
 }
 
@@ -75,15 +72,6 @@ const styles = (theme: Theme) => ({
     cursor: 'pointer' as 'pointer',
     paddingRight: theme.spacing(0.25),
   },
-  title: {
-    borderRadius: '4px',
-    lineHeight: '1em',
-    display: 'inline-block' as 'inline-block',
-    whiteSpace: 'nowrap' as 'nowrap',
-    padding: '1px 4px 0px 4px',
-    height: '14px',
-    margin: '1px 0px 2px 0px',
-  },
   collapsedSubnodes: {
     color: theme.palette.text.secondary,
   },