Remove empty topics from tree

app/src/components/ConnectionHealthIndicator.tsx

@@ -5,7 +5,7 @@ import { connect } from 'react-redux'
 import { ConnectionHealth } from '../reducers/Connection'
 import { green, orange, red } from '@material-ui/core/colors'
 import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
-import { Tooltip } from '@material-ui/core';
+import { Tooltip } from '@material-ui/core'
 
 const styles: StyleRulesCallback = theme => ({
   offline: {

app/src/components/Sidebar/Sidebar.tsx

@@ -2,6 +2,7 @@ import * as q from '../../../../backend/src/Model'
 import * as React from 'react'
 import Clear from '@material-ui/icons/Clear'
 import Copy from '../Copy'
+import CustomIconButton from '../CustomIconButton'
 import DateFormatter from '../helper/DateFormatter'
 import Delete from '@material-ui/icons/Delete'
 import DeleteForever from '@material-ui/icons/DeleteForever'
@@ -29,8 +30,6 @@ import {
   Tooltip,
   Badge,
 } from '@material-ui/core'
-import CustomIconButton from '../CustomIconButton';
-import { max } from 'moment';
 
 const throttle = require('lodash.throttle')
 
@@ -101,13 +100,19 @@ class Sidebar extends React.Component<Props, State> {
       return null
     }
 
-    return <CustomIconButton onClick={() => this.deleteTopic(this.props.node)}><Delete /></CustomIconButton>
+    return (
+      <CustomIconButton onClick={() => this.deleteTopic(this.props.node)}>
+        <Tooltip title="Clear this topic">
+          <Delete />
+        </Tooltip>
+      </CustomIconButton>
+    )
   }
 
   private renderRecursiveTopicDeleteButton() {
     const deleteLimit = 50
     const topicCount = this.props.node ? this.props.node.childTopicCount() : 0
-    if (!this.props.node || topicCount <= 1) {
+    if (!this.props.node || topicCount === 0) {
       return null
     }
 

app/src/reducers/Connection.ts

@@ -54,7 +54,7 @@ export interface ShowError {
 const initialState: ConnectionState = {
   connected: false,
   connecting: false,
-  health: 'disconnected',
+  health: undefined,
 }
 
 export const connectionReducer = createReducer(initialState, {

backend/src/Model/TreeNode.ts

@@ -47,6 +47,9 @@ export class TreeNode<ViewModel> {
       this.lastUpdate = Date.now()
     })
     this.onEdgesChange.subscribe(() => {
+      this.cachedChildTopics = undefined
+      this.cachedChildTopicCount = undefined
+      this.cachedLeafMessageCount = undefined
       this.lastUpdate = Date.now()
     })
     this.onMessage.subscribe(() => {
@@ -102,6 +105,34 @@ export class TreeNode<ViewModel> {
     return previous.branch().concat([this])
   }
 
+  private isTopicEmptyLeaf() {
+    const hasNoMessage = (!this.message || !this.message.value)
+    return hasNoMessage && this.isLeaf()
+  }
+
+  private isLeaf() {
+    return this.edgeArray.length === 0
+  }
+
+  private removeFromParent() {
+    const previous = this.previous()
+    if (!previous || !this.sourceEdge) {
+      return
+    }
+    previous.removeEdge(this.sourceEdge)
+  }
+
+  public removeEdge(edge: Edge<any>) {
+    delete this.edges[edge.name]
+    this.edgeArray = Object.values(this.edges)
+    this.onMerge.dispatch()
+
+    if (this.isTopicEmptyLeaf()) {
+      debugger
+      this.removeFromParent()
+    }
+  }
+
   public updateWithNode(node: TreeNode<ViewModel>) {
     if (node.message) {
       this.setMessage(node.message)
@@ -109,6 +140,10 @@ export class TreeNode<ViewModel> {
       this.mqttMessage = node.mqttMessage
     }
 
+    if (this.isTopicEmptyLeaf()) {
+      this.removeFromParent()
+    }
+
     this.mergeEdges(node)
     this.onMerge.dispatch()
   }