Improve ui & performance

app/src/components/Sidebar/Topic.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react'
+import * as q from '../../../../backend/src/Model'
+import { withStyles, Theme, StyleRulesCallback } from '@material-ui/core/styles'
+import Button from '@material-ui/core/Button'
+
+interface Props {
+  classes: any
+  theme: Theme
+  node: q.TreeNode
+  selected?: q.TreeNode
+}
+
+class Topic extends React.Component<Props, {}> {
+  public static styles: StyleRulesCallback<string> = (theme: Theme) => ({
+    button: {
+      textTransform: 'none',
+      padding: '3px 5px 3px 5px',
+      minWidth: '30px',
+    },
+  })
+
+  public render() {
+    const { node } = this.props
+    let i = 0
+    const breadCrumps = node.branch()
+      .map(node => node.sourceEdge)
+      .filter(edge => Boolean(edge))
+      .map(edge =>
+        [<Button
+            onClick={() => this.setState({ node: edge!.target })}
+            size="small"
+            color="secondary"
+            className={this.props.classes.button}
+            key={edge!.hash()}
+          >
+            {edge!.name}
+          </Button>],
+      )
+
+    if (breadCrumps.length === 0) {
+      return null
+    }
+
+    const joinedBreadCrumps = breadCrumps.reduce((prev, current) =>
+      prev.concat([<span key={i += 1}>/</span>]).concat(current),
+    )
+
+    return <span style={{ lineHeight: '2.2em' }}>{joinedBreadCrumps}</span>
+  }
+}
+
+export default withStyles(Topic.styles, { withTheme: true })(Topic)