WiP

app/src/actions/Sidebar.ts

@@ -12,7 +12,7 @@ export const clearRetainedTopic = () => (dispatch: Dispatch<any>, getState: () =
   dispatch(clearTopic(selectedTopic, false))
 }
 
-export const clearTopic = (topic: q.TreeNode<any>, recursive: boolean) => (dispatch: Dispatch<any>, getState: () => AppState)  => {
+export const clearTopic = (topic: q.TreeNode<any>, recursive: boolean, subtopicClearLimit = 50) => (dispatch: Dispatch<any>, getState: () => AppState)  => {
   const { connectionId } = getState().connection
   if (!connectionId) {
     return
@@ -29,15 +29,18 @@ export const clearTopic = (topic: q.TreeNode<any>, recursive: boolean) => (dispa
   rendererEvents.emit(publishEvent, mqttMessage)
 
   if (recursive) {
-    topic.childTopics().forEach((topic) => {
-      console.log('deleting', topic.path())
-      const mqttMessage = {
-        topic: topic.path(),
-        payload: null,
-        retain: true,
-        qos: 0 as 0,
-      }
-      rendererEvents.emit(publishEvent, mqttMessage)
-    })
+    topic.childTopics()
+      .filter(topic => Boolean(topic.message && topic.message.value))
+      .slice(0, subtopicClearLimit)
+      .forEach((topic) => {
+        console.log('deleting', topic.path())
+        const mqttMessage = {
+          topic: topic.path(),
+          payload: null,
+          retain: true,
+          qos: 0 as 0,
+        }
+        rendererEvents.emit(publishEvent, mqttMessage)
+      })
   }
 }

app/src/components/Sidebar/Sidebar.tsx

@@ -4,6 +4,7 @@ import Clear from '@material-ui/icons/Clear'
 import Copy from '../Copy'
 import DateFormatter from '../helper/DateFormatter'
 import Delete from '@material-ui/icons/Delete'
+import DeleteForever from '@material-ui/icons/DeleteForever'
 import ExpandMore from '@material-ui/icons/ExpandMore'
 import MessageHistory from './MessageHistory'
 import NodeStats from './NodeStats'
@@ -26,8 +27,10 @@ import {
   Popper,
   Typography,
   Tooltip,
+  Badge,
 } from '@material-ui/core'
 import CustomIconButton from '../CustomIconButton';
+import { max } from 'moment';
 
 const throttle = require('lodash.throttle')
 
@@ -102,19 +105,33 @@ class Sidebar extends React.Component<Props, State> {
   }
 
   private renderRecursiveTopicDeleteButton() {
-    if (!this.props.node) {
+    const deleteLimit = 50
+    const topicCount = this.props.node ? this.props.node.childTopicCount() : 0
+    if (!this.props.node || topicCount <= 1) {
       return null
     }
 
-    return <CustomIconButton onClick={() => this.deleteTopic(this.props.node, true)}><Delete style={{ color: 'red' }} /></CustomIconButton>
+    return (
+      <CustomIconButton onClick={() => this.deleteTopic(this.props.node, true, deleteLimit)}>
+        <Tooltip title={`Deletes up to ${deleteLimit} sub-topics with a single click`}>
+          <Badge
+            classes={{ badge: this.props.classes.badge }}
+            badgeContent={<span style={{ whiteSpace: 'nowrap' }}>{topicCount >= deleteLimit ? '50+' : topicCount}</span>}
+            color="secondary"
+          >
+            <DeleteForever color="action" />
+          </Badge>
+        </Tooltip>
+      </CustomIconButton>
+    )
   }
 
-  private deleteTopic = (topic?: q.TreeNode<TopicViewModel>, recursive: boolean = false) => {
+  private deleteTopic = (topic?: q.TreeNode<TopicViewModel>, recursive: boolean = false, maxCount = 50) => {
     if (!topic) {
       return
     }
 
-    this.props.actions.clearTopic(topic, recursive)
+    this.props.actions.clearTopic(topic, recursive, maxCount)
   }
 
   private renderNode() {