diff --git a/app/src/components/ConnectionHealthIndicator.tsx b/app/src/components/ConnectionHealthIndicator.tsx index 2cdda59..92392ff 100644 --- a/app/src/components/ConnectionHealthIndicator.tsx +++ b/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: { diff --git a/app/src/components/Sidebar/Sidebar.tsx b/app/src/components/Sidebar/Sidebar.tsx index e1f4612..3797953 100644 --- a/app/src/components/Sidebar/Sidebar.tsx +++ b/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 { return null } - return this.deleteTopic(this.props.node)}> + return ( + this.deleteTopic(this.props.node)}> + + + + + ) } 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 } diff --git a/app/src/reducers/Connection.ts b/app/src/reducers/Connection.ts index d568616..016d2f8 100644 --- a/app/src/reducers/Connection.ts +++ b/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, { diff --git a/backend/src/Model/TreeNode.ts b/backend/src/Model/TreeNode.ts index cdb10b6..368d7c1 100644 --- a/backend/src/Model/TreeNode.ts +++ b/backend/src/Model/TreeNode.ts @@ -47,6 +47,9 @@ export class TreeNode { 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 { 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) { + delete this.edges[edge.name] + this.edgeArray = Object.values(this.edges) + this.onMerge.dispatch() + + if (this.isTopicEmptyLeaf()) { + debugger + this.removeFromParent() + } + } + public updateWithNode(node: TreeNode) { if (node.message) { this.setMessage(node.message) @@ -109,6 +140,10 @@ export class TreeNode { this.mqttMessage = node.mqttMessage } + if (this.isTopicEmptyLeaf()) { + this.removeFromParent() + } + this.mergeEdges(node) this.onMerge.dispatch() }