Add proper copy to clipboard

app/src/components/Sidebar/Sidebar.tsx

@@ -10,6 +10,7 @@ import NodeStats from './NodeStats'
 import Topic from './Topic'
 import { Typography } from '@material-ui/core'
 import { withStyles, Theme, StyleRulesCallback } from '@material-ui/core/styles'
+import Copy from '../Copy'
 
 interface Props {
   node?: q.TreeNode | undefined,
@@ -70,15 +71,15 @@ class Sidebar extends React.Component<Props, State> {
   }
 
   private renderNode() {
-    const { classes } = this.props
-    if (!this.state.node) {
-      return null
-    }
+    const { classes, node } = this.props
+
+    const copyTopic = node ? <Copy value={node.path()} /> : null
+    const copyValue = node && node.message ? <Copy value={node.message.value} /> : null
 
     return <div>
       <ExpansionPanel key="topic" defaultExpanded={true}>
         <ExpansionPanelSummary expandIcon={<ExpandMore />}>
-          <Typography className={classes.heading}>Topic</Typography>
+          <Typography className={classes.heading}>Topic {copyTopic}</Typography>
         </ExpansionPanelSummary>
         <ExpansionPanelDetails>
           <Topic node={this.props.node} didSelectNode={this.updateNode} />
@@ -86,7 +87,7 @@ class Sidebar extends React.Component<Props, State> {
       </ExpansionPanel>
       <ExpansionPanel key="value" defaultExpanded={true}>
         <ExpansionPanelSummary expandIcon={<ExpandMore />}>
-          <Typography className={classes.heading}>Value</Typography>
+          <Typography className={classes.heading}>Value {copyValue}</Typography>
         </ExpansionPanelSummary>
         <ExpansionPanelDetails>
           <ValueRenderer node={this.state.node} />

app/src/components/Sidebar/Topic.tsx

@@ -2,7 +2,6 @@ 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'
-const copy = require('copy-text-to-clipboard')
 
 interface Props {
   classes: any
@@ -51,10 +50,7 @@ class Topic extends React.Component<Props, {}> {
       prev.concat([<span key={key += 1}>/</span>]).concat(current),
     )
 
-    return <span style={{ lineHeight: '2.2em' }}>
-      <a onClick={() => copy(this.props.node && this.props.node.path())}>📋</a>
-      {joinedBreadCrumps}
-    </span>
+    return <span style={{ lineHeight: '2.2em' }}>{joinedBreadCrumps}</span>
   }
 }
 

app/src/components/Tree/Tree.tsx

@@ -91,7 +91,12 @@ export class Tree extends React.Component<Props, TreeState> {
   }
 
   public render() {
-    return <Typography>
+    const style: React.CSSProperties = {
+      lineHeight: '1.1',
+      cursor: 'default',
+    }
+
+    return <Typography style={ style }>
         <TreeNode
           animateChages={true}
           autoExpandLimit={3000}

app/src/components/Tree/TreeNode.tsx

@@ -174,7 +174,7 @@ class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
       return {}
     }
     const isInViewPort = this.titleRef.current && isElementInViewport(this.titleRef.current)
-    const isDirty = this.dirtyMessage || this.dirtyEdges || this.collapsed()
+    const isDirty = this.dirtyMessage || this.dirtyEdges
     if (this.props.animateChages && isDirty && isInViewPort) {
       if (!this.cssAnimationWasSetAt) {
         this.cssAnimationWasSetAt = performance.now()

app/src/components/Tree/TreeNodeTitle.tsx

@@ -37,7 +37,13 @@ class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
       onClick={() => {
         this.toggle()
         this.props.didSelectNode && this.props.didSelectNode(this.props.treeNode)
-      }}>
+      }}
+      onMouseOver={() => {
+        if (this.props.treeNode.message) {
+          this.props.didSelectNode && this.props.didSelectNode(this.props.treeNode)
+        }
+      }}
+    >
       {this.renderExpander()} {this.renderSourceEdge()} {this.renderCollapsedSubnodes()} {this.renderValue()}
     </span>
   }
@@ -66,7 +72,6 @@ class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
     return this.props.treeNode.message
       ? <span
           style={style}
-          onMouseOver={() => this.props.didSelectNode && this.props.didSelectNode(this.props.treeNode)}
           > = {this.props.treeNode.message.value.toString()}</span>
       : null
   }