-
@@ -65,24 +77,16 @@ const mapStateToProps = (state: AppState) => {
const styles = (theme: Theme) => {
const drawerWidth = 300
return {
- left: {
+ heightProperty: {
+ height: 'calc(100vh - 64px) !important',
+ },
+ paneDefaults: {
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
- height: 'calc(100vh - 64px)',
- float: 'left' as 'left',
overflowY: 'scroll' as 'scroll',
overflowX: 'hidden' as 'hidden',
display: 'block' as 'block',
- width: '60vw',
- },
- right: {
height: 'calc(100vh - 64px)',
- color: theme.palette.text.primary,
- float: 'left' as 'left',
- width: '40vw',
- overflowY: 'scroll' as 'scroll',
- overflowX: 'hidden' as 'hidden',
- display: 'block' as 'block',
},
centerContent: {
width: '100vw',
diff --git a/app/src/actions/Settings.ts b/app/src/actions/Settings.ts
index 163af95..c473e74 100644
--- a/app/src/actions/Settings.ts
+++ b/app/src/actions/Settings.ts
@@ -4,6 +4,8 @@ import { Dispatch } from 'redux'
import { showTree } from './Tree'
import { AppState } from '../reducers'
import * as q from '../../../backend/src/Model'
+import { batchActions, enableBatching, batchDispatchMiddleware } from 'redux-batched-actions';
+import { autoExpandLimitSet } from '../components/Settings';
export const setAutoExpandLimit = (autoExpandLimit: number = 0): Action => {
return {
@@ -34,7 +36,7 @@ export const filterTopics = (filterStr: string) => (dispatch: Dispatch
, get
})
if (!filterStr || !tree) {
- dispatch(showTree(tree))
+ dispatch(batchActions([setAutoExpandLimit(0), showTree(tree)]))
return
}
@@ -67,5 +69,21 @@ export const filterTopics = (filterStr: string) => (dispatch: Dispatch, get
nextTree.updateWithConnection(tree.updateSource, tree.connectionId, nodeFilter)
}
- dispatch(showTree(nextTree))
+ dispatch(batchActions([setAutoExpandLimit(autoExpandLimitForTree(nextTree)), showTree(nextTree)]))
+}
+
+function autoExpandLimitForTree(tree: q.Tree) {
+ if (!tree) {
+ return 0
+ }
+ function closestExistingLimit(i: number): number {
+ const sorted = autoExpandLimitSet.sort((a, b) => Math.abs(a.limit - i) - Math.abs(b.limit - i))
+ console.log('sorted', i, sorted)
+ return sorted[0]!.limit
+ }
+
+ const count = tree.childTopicCount()
+ const calculatedLimit = Math.max(7 - Math.log(count), 0) * 2
+
+ return closestExistingLimit(calculatedLimit)
}
diff --git a/app/src/components/Settings.tsx b/app/src/components/Settings.tsx
index 7938e34..81eaa7c 100644
--- a/app/src/components/Settings.tsx
+++ b/app/src/components/Settings.tsx
@@ -20,6 +20,23 @@ import { settingsActions, treeActions } from '../actions'
import { TopicOrder } from '../reducers/Settings'
import BrokerStatistics from './BrokerStatistics'
+export const autoExpandLimitSet = [{
+ limit: 0,
+ name: 'Collapsed',
+}, {
+ limit: 2,
+ name: 'Few',
+}, {
+ limit: 3,
+ name: 'Some',
+}, {
+ limit: 10,
+ name: 'Most',
+}, {
+ limit: 1E6,
+ name: 'All',
+}]
+
const styles: StyleRulesCallback = theme => ({
drawer: {
backgroundColor: theme.palette.background.default,
@@ -87,6 +104,8 @@ class Settings extends React.Component {
private renderAutoExpand() {
const { classes, autoExpandLimit } = this.props
+
+ const limits = autoExpandLimitSet.map(limit => )
return (
Auto Expand
@@ -98,11 +117,7 @@ class Settings extends React.Component
{
className={classes.input}
style={{ flex: '1' }}
>
-
-
-
-
-
+ {limits}
)
diff --git a/app/src/components/Tree/TreeNode.tsx b/app/src/components/Tree/TreeNode.tsx
index 3b4ef9a..7e5c2f5 100644
--- a/app/src/components/Tree/TreeNode.tsx
+++ b/app/src/components/Tree/TreeNode.tsx
@@ -26,11 +26,11 @@ const styles = (theme: Theme) => {
display: 'block',
marginLeft: '10px',
},
- hover: {
- '&:hover': {
- backgroundColor: 'rgba(80, 80, 80, 0.35)',
- },
- },
+ // hover: {
+ // '&:hover': {
+ // backgroundColor: 'rgba(80, 80, 80, 0.35)',
+ // },
+ // },
topicSelect: {
float: 'right' as 'right',
opacity: 0,
@@ -51,7 +51,7 @@ interface Props {
performanceCallback?: ((ms: number) => void) | undefined
autoExpandLimit: number
classes: any
- style?: React.CSSProperties
+ className?: string
}
interface State {
@@ -68,6 +68,7 @@ class TreeNode extends React.Component {
private willUpdateTime: number = performance.now()
private titleRef?: React.RefObject = React.createRef()
+ private nodeRef?: React.RefObject = React.createRef()
private topicSelectRef?: React.RefObject = React.createRef()
private subnodesDidchange = () => {
@@ -119,6 +120,7 @@ class TreeNode extends React.Component {
this.removeSubscriber(treeNode)
this.topicSelectRef = undefined
this.titleRef = undefined
+ this.nodeRef = undefined
}
private stateHasChanged(newState: State) {
@@ -177,11 +179,11 @@ class TreeNode extends React.Component {
return (
{
lastUpdate={this.props.treeNode.lastUpdate}
/>
-
-
-
{this.renderNodes()}
)
@@ -206,12 +200,18 @@ class TreeNode extends React.Component {
private mouseOver = (event: React.MouseEvent) => {
event.stopPropagation()
+ if (this.nodeRef && this.nodeRef.current) {
+ this.nodeRef.current.style.backgroundColor = 'rgba(100, 100, 100, 0.55)'
+ }
if (this.topicSelectRef && this.topicSelectRef.current) {
this.topicSelectRef.current.style.opacity = '1'
}
}
private mouseOut = (event: React.MouseEvent) => {
event.stopPropagation()
+ if (this.nodeRef && this.nodeRef.current) {
+ this.nodeRef.current.style.backgroundColor = 'inherit'
+ }
if (this.topicSelectRef && this.topicSelectRef.current) {
this.topicSelectRef.current.style.opacity = '0'
}
diff --git a/app/src/components/Tree/TreeNodeSubnodes.tsx b/app/src/components/Tree/TreeNodeSubnodes.tsx
index 85240ad..80988c3 100644
--- a/app/src/components/Tree/TreeNodeSubnodes.tsx
+++ b/app/src/components/Tree/TreeNodeSubnodes.tsx
@@ -6,6 +6,7 @@ import { AppState } from '../../reducers'
import TreeNode from './TreeNode'
import { connect } from 'react-redux'
import { TopicOrder } from '../../reducers/Settings'
+import { Theme, withStyles } from '@material-ui/core'
export interface Props {
lastUpdate: number
@@ -16,6 +17,7 @@ export interface Props {
filter?: string
collapsed?: boolean | undefined
didSelectNode?: (node: q.TreeNode) => void
+ classes: any
}
interface State {
@@ -69,24 +71,19 @@ class TreeNodeSubnodes extends React.Component {
this.renderMore()
}
- const listItemStyle = {
- padding: '3px 0px 0px 8px',
- }
-
const nodes = this.sortedNodes().slice(0, this.state.alreadyAdded)
const listItems = nodes.map(node => (
-
-
-
+
))
return (
-
+
{listItems}
)
@@ -100,4 +97,14 @@ const mapStateToProps = (state: AppState) => {
}
}
-export default connect(mapStateToProps)(TreeNodeSubnodes)
+const styles = (theme: Theme) => ({
+ list: {
+ display: 'block' as 'block',
+ clear: 'both' as 'both',
+ },
+ listItem: {
+ padding: '3px 0px 0px 8px',
+ },
+})
+
+export default withStyles(styles)(connect(mapStateToProps)(TreeNodeSubnodes))
diff --git a/app/src/components/Tree/TreeNodeTitle.tsx b/app/src/components/Tree/TreeNodeTitle.tsx
index af8faf4..2ca5b54 100644
--- a/app/src/components/Tree/TreeNodeTitle.tsx
+++ b/app/src/components/Tree/TreeNodeTitle.tsx
@@ -3,6 +3,7 @@ import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { treeActions } from '../../actions'
import * as q from '../../../../backend/src/Model'
+import { withStyles, Theme } from '@material-ui/core'
export interface TreeNodeProps extends React.HTMLAttributes {
treeNode: q.TreeNode
@@ -10,62 +11,33 @@ export interface TreeNodeProps extends React.HTMLAttributes {
name?: string | undefined
collapsed?: boolean | undefined
lastUpdate: number
+ classes: any
}
class TreeNodeTitle extends React.Component {
- private getStyles() {
- return {
- collapsedSubnodes: {
- color: 'white', // theme.palette.text.secondary,
- },
- container: {
- display: 'block',
- },
- }
- }
-
- private didSelectNode = (event: React.MouseEvent) => {
- event.stopPropagation()
+ private mouseOver = (event: React.MouseEvent) => {
if (this.props.treeNode.message) {
this.props.actions.selectTopic(this.props.treeNode)
}
}
public render() {
- const style: React.CSSProperties = {
- lineHeight: '1em',
- whiteSpace: 'nowrap',
- }
return (
-
+
{this.renderExpander()} {this.renderSourceEdge()} {this.renderCollapsedSubnodes()} {this.renderValue()}
)
}
private renderSourceEdge() {
- const style: React.CSSProperties = {
- fontWeight: 'bold',
- overflow: 'hidden',
- display: 'inline-block',
- }
const name = this.props.name || (this.props.treeNode.sourceEdge && this.props.treeNode.sourceEdge.name)
- return {name}
+ return {name}
}
private renderValue() {
- const style: React.CSSProperties = {
- whiteSpace: 'nowrap',
- overflow: 'hidden',
- textOverflow: 'ellipsis',
- padding: '0',
- marginLeft: '5px',
- display: 'inline-block',
- }
-
return this.props.treeNode.message && this.props.treeNode.message.length > 0
- ? = {this.props.treeNode.message.value.toString()}
+ ? = {this.props.treeNode.message.value.toString().slice(0, 120)}
: null
}
@@ -83,7 +55,7 @@ class TreeNodeTitle extends React.Component {
}
const messages = this.props.treeNode.leafMessageCount()
- return ({this.props.treeNode.childTopicCount()} topics, {messages} messages)
+ return ({this.props.treeNode.childTopicCount()} topics, {messages} messages)
}
}
@@ -93,4 +65,27 @@ const mapDispatchToProps = (dispatch: any) => {
}
}
-export default connect(null, mapDispatchToProps)(TreeNodeTitle)
+const styles = (theme: Theme) => ({
+ value: {
+ whiteSpace: 'nowrap' as 'nowrap',
+ overflow: 'hidden' as 'hidden',
+ textOverflow: 'ellipsis' as 'ellipsis',
+ padding: '0',
+ marginLeft: '5px',
+ display: 'inline-block' as 'inline-block',
+ },
+ sourceEdge: {
+ fontWeight: 'bold' as 'bold',
+ overflow: 'hidden' as 'hidden',
+ display: 'inline-block' as 'inline-block',
+ },
+ title: {
+ lineHeight: '1em',
+ whiteSpace: 'nowrap' as 'nowrap',
+ },
+ collapsedSubnodes: {
+ color: theme.palette.text.secondary,
+ },
+})
+
+export default withStyles(styles)(connect(null, mapDispatchToProps)(TreeNodeTitle))
diff --git a/app/src/index.tsx b/app/src/index.tsx
index 7bd81b3..a3ae610 100644
--- a/app/src/index.tsx
+++ b/app/src/index.tsx
@@ -3,6 +3,7 @@ import './tracking'
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import reduxThunk from 'redux-thunk'
+import { batchDispatchMiddleware } from 'redux-batched-actions';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'
import reducers from './reducers'
@@ -17,6 +18,7 @@ const store = createStore(
composeEnhancers(
applyMiddleware(
reduxThunk,
+ batchDispatchMiddleware,
),
),
)