Improve ui & performance

2019-01-03 11:14:38 +01:00
parent 2b7e9a5ef7
commit 87dafc9c89
18 changed files with 676 additions and 364 deletions
--- a/app/src/components/Sidebar/Sidebar.tsx
+++ b/app/src/components/Sidebar/Sidebar.tsx
@@ -0,0 +1,105 @@
+import * as React from 'react'
+import * as q from '../../../../backend/src/Model'
+// import Drawer from '@material-ui/core/Drawer'
+import ExpansionPanel from '@material-ui/core/ExpansionPanel'
+import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'
+import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'
+import ExpandMore from '@material-ui/icons/ExpandMore'
+import ValueRenderer from './ValueRenderer'
+import NodeStats from './NodeStats'
+import Topic from './Topic'
+import { Typography } from '@material-ui/core'
+import { withStyles, Theme, StyleRulesCallback } from '@material-ui/core/styles'
+
+interface Props {
+  node?: q.TreeNode | undefined,
+  classes: any,
+  theme: Theme
+}
+
+interface State {
+  node?: q.TreeNode | undefined
+}
+
+class Sidebar extends React.Component<Props, State> {
+  private updateNode: (node?: q.TreeNode | undefined) => void
+  constructor(props: any) {
+    super(props)
+    this.state = {}
+    this.updateNode = (node) => {
+      if (!node) {
+        this.setState(this.state)
+      } else {
+        this.setState({ node })
+      }
+    }
+  }
+
+  public static styles: StyleRulesCallback<string> = (theme: Theme) => {
+    return {
+      drawer: {
+        display: 'block',
+        height: '100%',
+      },
+      valuePaper: {
+        margin: `${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px`,
+      },
+      heading: {
+        fontSize: theme.typography.pxToRem(15),
+        fontWeight: theme.typography.fontWeightRegular,
+      },
+    }
+  }
+
+  public componentWillReceiveProps(nextProps: Props) {
+    this.props.node && this.props.node.removeListener('update', this.updateNode)
+    nextProps.node && nextProps.node.on('update', this.updateNode)
+    nextProps.node && this.updateNode(nextProps.node)
+  }
+
+  private open(): boolean {
+    return true
+  }
+
+  public render() {
+    return <div className={this.props.classes.drawer}>
+      {this.renderNode()}
+    </div>
+  }
+
+  private renderNode() {
+    const { classes } = this.props
+    if (!this.state.node) {
+      return null
+    }
+
+    return <div>
+      <ExpansionPanel key="topic" defaultExpanded={true}>
+        <ExpansionPanelSummary expandIcon={<ExpandMore />}>
+          <Typography className={classes.heading}>Topic</Typography>
+        </ExpansionPanelSummary>
+        <ExpansionPanelDetails>
+          <Topic node={this.state.node} />
+        </ExpansionPanelDetails>
+      </ExpansionPanel>
+      <ExpansionPanel key="value" defaultExpanded={true}>
+        <ExpansionPanelSummary expandIcon={<ExpandMore />}>
+          <Typography className={classes.heading}>Value</Typography>
+        </ExpansionPanelSummary>
+        <ExpansionPanelDetails>
+          <ValueRenderer node={this.state.node} />
+        </ExpansionPanelDetails>
+      </ExpansionPanel>
+      <ExpansionPanel key="stats" defaultExpanded={true}>
+        <ExpansionPanelSummary expandIcon={<ExpandMore />}>
+          <Typography className={classes.heading}>Stats</Typography>
+        </ExpansionPanelSummary>
+        <ExpansionPanelDetails>
+          <NodeStats node={this.state.node} />
+        </ExpansionPanelDetails>
+      </ExpansionPanel>
+    </div>
+  }
+}
+
+export default withStyles(Sidebar.styles, { withTheme: true })(Sidebar)