Add JSON based plots

app/src/components/Sidebar/CodeDiff/Gutters.tsx

@@ -1,5 +1,7 @@
 import * as diff from 'diff'
 import * as React from 'react'
+import Add from '@material-ui/icons/Add'
+import Remove from '@material-ui/icons/Remove'
 import ShowChart from '@material-ui/icons/ShowChart'
 import { JsonPropertyLocation } from '../../../../../backend/src/JsonAstParser'
 import { lineChangeStyle, trimNewlineRight } from './util'
@@ -10,28 +12,70 @@ interface Props {
   changes: Array<diff.Change>,
   literalPositions: Array<JsonPropertyLocation>
   classes: any
+  className: string
+  showDiagram: (dotPath: string, target: EventTarget) => void
+  hideDiagram: () => void
 }
 
 const style = (theme: Theme) => {
   return {
     gutterLine: {
-      display: 'flex' as 'flex',
       textAlign: 'right' as 'right',
       paddingRight: theme.spacing(0.5),
       height: '16px',
+      width: '100%',
+    },
+    icon: {
+      width: '12px',
+      height: '12px',
+      marginTop: '2px',
+      borderRadius: '50%',
+      '&:hover': {
+        color: theme.palette.primary.contrastText,
+        backgroundColor: theme.palette.primary.main,
+      },
+    },
+    hover: {
+      
     },
   }
 }
 
-function tokensForLine(change: diff.Change, line: number, literalPositions: Array<JsonPropertyLocation>) {
-  let diagram = literalPositions[line] ? <ShowChart style={{ height: '16px' }} /> : ''
+function ChartIcon(props: { classes: any, literal: JsonPropertyLocation, showDiagram: (dotPath: string, target: EventTarget) => void, hideDiagram: () => void }) {
+  const mouseOver = (event: React.MouseEvent<Element>) => {
+    event.stopPropagation()
+    event.preventDefault()
+    if ((event.target as Element).tagName !== 'path') {
+      props.showDiagram(props.literal.path, event.target)
+    }
+  }
+
+  const mouseOut = (event: React.MouseEvent) => {
+    event.stopPropagation()
+    event.preventDefault()
+
+    if ((event.target as Element).tagName !== 'path') {
+      props.hideDiagram()
+    }
+  }
+
+  return (
+    <ShowChart className={props.classes.icon} onMouseEnter={mouseOver} onMouseLeave={mouseOut} />
+  )
+}
+
+function tokensForLine(change: diff.Change, line: number, props: Props) {
+  const { classes, literalPositions } = props
+
+  const literal = literalPositions[line]
+  const diagram = literal ? <ChartIcon classes={{ icon: props.classes.icon, hover: props.classes.hover }} literal={literal} showDiagram={props.showDiagram} hideDiagram={props.hideDiagram}/> : null
 
   if (change.added) {
-    return [diagram, '+']
+    return [diagram, <Add key="add" className={classes.icon} />]
   } else if (change.removed) {
-    return '-'
+    return [<Remove key="remove" className={classes.icon} />]
   } else {
-    return [diagram, ' ']
+    return [diagram, <div key="placeholder" style={{ width: '12px', display: 'inline-block' }} dangerouslySetInnerHTML={{ __html: '&nbsp;'}} />]
   }
 }
 
@@ -44,13 +88,15 @@ function Gutters(props: Props) {
         currentLine = !change.removed ? currentLine + 1 : currentLine
         return (
           <div key={`${key}-${idx}`} style={lineChangeStyle(change)} className={props.classes.gutterLine}>
-            {tokensForLine(change, currentLine, props.literalPositions)}
+            {tokensForLine(change, currentLine, props)}
           </div>
         )
     })
   }).reduce((a, b) => a.concat(b), [])
 
-  return <div>{gutters}</div>
+  return <span>
+    <pre className={props.className}>{gutters}</pre>
+  </span>
 }
 
 export default withStyles(style)(Gutters)

app/src/components/Sidebar/CodeDiff/index.tsx

@@ -1,16 +1,20 @@
 import * as diff from 'diff'
 import * as Prism from 'prismjs'
+import * as q from '../../../../../backend/src/Model'
 import * as React from 'react'
 import DiffCount from './DiffCount'
-import { CodeBlockColors, CodeBlockColorsBraceMonokai } from '../CodeBlockColors'
-import { literalsMappedByLines } from '../../../../../backend/src/JsonAstParser'
-import { selectTextWithCtrlA } from '../../../utils/handleTextSelectWithCtrlA'
-import { Theme, withStyles } from '@material-ui/core'
-import 'prismjs/components/prism-json'
-import { trimNewlineRight, lineChangeStyle } from './util';
 import Gutters from './Gutters'
+import TopicPlot from '../TopicPlot'
+import { CodeBlockColors, CodeBlockColorsBraceMonokai } from '../CodeBlockColors'
+import { isPlottable, lineChangeStyle, trimNewlineRight } from './util'
+import { JsonPropertyLocation, literalsMappedByLines } from '../../../../../backend/src/JsonAstParser'
+import { Theme, withStyles, Popper, Paper, Fade, Zoom } from '@material-ui/core'
+import { selectTextWithCtrlA } from '../../../utils/handleTextSelectWithCtrlA'
+import 'prismjs/components/prism-json'
+const throttle = require('lodash.throttle')
 
 interface Props {
+  messageHistory: q.MessageHistory
   previous: string
   current: string
   nameOfCompareMessage: string
@@ -18,17 +22,45 @@ interface Props {
   classes: any
 }
 
-class CodeDiff extends React.Component<Props, {}> {
+interface State {
+  diagram?: DiagramOptions
+}
+
+interface DiagramOptions {
+  dotPath?: string
+  anchorEl?: EventTarget
+}
+
+class CodeDiff extends React.Component<Props, State> {
   private handleCtrlA = selectTextWithCtrlA({ targetSelector: 'pre ~ pre' })
 
+  private updateDiagram = throttle((diagram?: DiagramOptions) => {
+    this.setState({ diagram })
+  }, 200)
+
   constructor(props: Props) {
     super(props)
+    this.state = {}
+  }
+
+  private showDiagram(dotPath: string, target: EventTarget) {
+    this.updateDiagram({
+      dotPath,
+      anchorEl: target,
+    })
+  }
+
+  private hideDiagram() {
+    this.updateDiagram(undefined)
   }
 
   public render() {
     const changes = diff.diffLines(this.props.previous, this.props.current)
     const styledLines = Prism.highlight(this.props.current, Prism.languages.json, 'json').split('\n')
-    const literalPositions = literalsMappedByLines(this.props.current) || []
+    const literalPositions = (
+      (literalsMappedByLines(this.props.current) || [])
+          .map((l: JsonPropertyLocation) => isPlottable(l.value) ? l : undefined)
+    ) as Array<JsonPropertyLocation>
 
     let lineNumber = 0
     const code = changes.map((change, key) => {
@@ -41,7 +73,7 @@ class CodeDiff extends React.Component<Props, {}> {
         })
         lineNumber += changedLines
 
-        return <div key={key}>{lines}</div>
+        return [<div key={key}>{lines}</div>]
       }
 
       return trimNewlineRight(change.value)
@@ -49,14 +81,32 @@ class CodeDiff extends React.Component<Props, {}> {
         .map((line, idx) => {
           return <div key={`${key}-${idx}`} style={lineChangeStyle(change)} className={this.props.classes.line}><span>{line}</span></div>
         })
-    })
+    }).reduce((a, b) => a.concat(b), [])
+
+    const { diagram } = this.state
 
     return (
       <div>
         <div tabIndex={0} onKeyDown={this.handleCtrlA} className={this.props.classes.codeWrapper}>
-          <pre className={this.props.classes.gutters}><Gutters changes={changes} literalPositions={literalPositions} /></pre>
+          <Gutters
+            showDiagram={(dotPath, target) => this.showDiagram(dotPath, target)}
+            hideDiagram={() => this.hideDiagram()}
+            className={this.props.classes.gutters}
+            changes={changes}
+            literalPositions={literalPositions} />
           <pre className={this.props.classes.codeBlock}>{code}</pre>
         </div>
+        <Popper
+          open={Boolean(this.state.diagram)}
+          anchorEl={diagram && diagram.anchorEl as any}
+          dir="left"
+        >
+        <Fade in={Boolean(this.state.diagram)} timeout={300}>
+          <Paper style={{ width: '300px' }}>
+            {diagram ? <TopicPlot history={this.props.messageHistory} dotPath={diagram.dotPath} /> : <span/>}
+          </Paper>
+        </Fade>
+        </Popper>
         <DiffCount changes={changes} nameOfCompareMessage={this.props.nameOfCompareMessage} />
       </div>
     )
@@ -70,7 +120,7 @@ const style = (theme: Theme) => {
     font: "12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace",
     display: 'inline-grid' as 'inline-grid',
     margin: '0',
-    padding: '1px 0 2px 0',
+    padding: '1px 0 0 0',
   }
 
   return {
@@ -81,6 +131,7 @@ const style = (theme: Theme) => {
       height: '16px',
     },
     codeWrapper: {
+      display: 'flex',
       maxHeight: '15em',
       overflow: 'auto',
       backgroundColor: `${codeBlockColors.background}`,

app/src/components/Sidebar/CodeDiff/util.tsx

@@ -6,9 +6,7 @@ export function trimNewlineRight(str: string) {
   return str
 }
 
-const gutterBaseStyle = {
-  width: '100%',
-}
+const gutterBaseStyle = {}
 
 const additionStyle = {
   ...gutterBaseStyle,
@@ -30,4 +28,29 @@ export function lineChangeStyle(change: Diff.Change) {
   }
 
   return gutterBaseStyle
+}
+
+export function toPlottableValue(value: any): number | undefined {
+  if (typeof value === 'number') {
+    return value
+  }
+
+  if (typeof value === 'boolean') {
+    return value ? 1 : 0
+  }
+
+  const isNumber = !isNaN(value)
+  const floatVal = parseFloat(value)
+  if (isNumber && !isNaN(floatVal)) {
+    return floatVal
+  }
+
+  const intVal = parseInt(value)
+  if (isNumber && !isNaN(intVal)) {
+    return intVal
+  }
+}
+
+export function isPlottable(value: any) {
+  return !isNaN(toPlottableValue(value) as any)
 }