Refactor value renderer

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

@@ -8,7 +8,7 @@ import { isPlottable, lineChangeStyle, trimNewlineRight } from './util'
 import { JsonPropertyLocation, literalsMappedByLines } from '../../../../../backend/src/JsonAstParser'
 import { selectTextWithCtrlA } from '../../../utils/handleTextSelectWithCtrlA'
 import { style } from './style'
-import { withStyles } from '@material-ui/core'
+import { withStyles, Typography } from '@material-ui/core'
 import 'prismjs/components/prism-json'
 
 interface Props {
@@ -17,6 +17,7 @@ interface Props {
   current: string
   nameOfCompareMessage: string
   language?: 'json'
+  title?: string
   classes: any
 }
 
@@ -88,7 +89,8 @@ class CodeDiff extends React.PureComponent<Props, State> {
     const code = this.renderStyledCodeLines(changes)
 
     return (
-      <div>
+      <div style={{ marginTop: '8px' }}>
+        {this.props.title ? <Typography className={this.props.classes.title}>{this.props.title}</Typography> : null}
         <div tabIndex={0} onKeyDown={this.handleCtrlA} className={this.props.classes.codeWrapper}>
           <Gutters
             className={this.props.classes.gutters}

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

@@ -11,6 +11,11 @@ export const style = (theme: Theme) => {
   }
 
   return {
+    title: {
+      font: codeBaseStyle.font,
+      paddingLeft: '4px',
+      backgroundColor: codeBlockColors.gutters,
+    },
     line: {
       lineHeight: 'normal' as 'normal',
       paddingLeft: '4px',
@@ -22,7 +27,6 @@ export const style = (theme: Theme) => {
       maxHeight: '15em',
       overflow: 'auto',
       backgroundColor: `${codeBlockColors.background}`,
-      margin: '8px 0 0 0',
     },
     gutters: {
       ...codeBaseStyle,

app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx

@@ -91,7 +91,7 @@ function ValuePanel(props: Props) {
       <span>Value {copyValue}</span>
       <span style={{ width: '100%' }}>
         {renderViewOptions()}
-        <div style={{ marginBottom: '-8px' }}>
+        <div style={{ marginBottom: '-8px', marginTop: '8px' }}>
           <React.Suspense fallback={<div>Loading...</div>}>
             <RenderedValue node={node} compareMessage={compareMessage} />
           </React.Suspense>

app/src/components/Sidebar/ValueRenderer/ValueRenderer.tsx

@@ -25,18 +25,34 @@ class ValueRenderer extends React.Component<Props, State> {
     this.state = { width: 0 }
   }
 
-  private renderDiff(current: string = '', previous: string = '', language?: 'json') {
+  private renderDiff(current: string = '', previous: string = '', title?: string, language?: 'json') {
     return (
       <CodeDiff
         treeNode={this.props.treeNode}
         previous={previous}
         current={current}
+        title={title}
         language={language}
         nameOfCompareMessage={this.props.compareWith ? 'selected' : 'previous'}
       />
     )
   }
 
+  private convertMessage(msg?: Base64Message): string | undefined {
+    if (!msg) {
+      return
+    }
+
+    const str = Base64Message.toUnicodeString(msg)
+    try {
+      JSON.parse(str)
+    } catch (error) {
+      return str
+    }
+
+    return this.messageToPrettyJson(str)
+  }
+
   private messageToPrettyJson(str: string): string | undefined {
     try {
       const json = JSON.parse(str)
@@ -46,21 +62,11 @@ class ValueRenderer extends React.Component<Props, State> {
     }
   }
 
-  private updateWidth = (width: number) => {
-    if (width !== this.state.width) {
-      this.setState({ width })
-    }
-  }
-
-  private renderRawValue(value: string, compare: string) {
-    return this.renderDiff(value, compare)
-  }
-
   private renderRawMode(message: q.Message, compare?: q.Message) {
     if (!message.value) {
       return
     }
-    const value = Base64Message.toUnicodeString(message.value)
+    const value = this.convertMessage(message.value)
     if (!compare) {
       return this.renderDiff(value, value)
     }
@@ -68,14 +74,12 @@ class ValueRenderer extends React.Component<Props, State> {
     if (!compare.value) {
       return
     }
-    const compareStr = Base64Message.toUnicodeString(compare.value)
+    const compareStr = this.convertMessage(compare.value)
 
     return (
       <div>
-        <Typography>selected</Typography>
-        {this.renderDiff(compareStr, compareStr)}
-        <Typography>current</Typography>
         {this.renderDiff(value, value)}
+        {this.renderDiff(compareStr, compareStr, 'selected')}
       </div>
     )
   }
@@ -88,39 +92,22 @@ class ValueRenderer extends React.Component<Props, State> {
     const { message, treeNode, compareWith, renderMode } = this.props
     const previousMessages = treeNode.messageHistory.toArray()
     const previousMessage = previousMessages[previousMessages.length - 2]
-    let compareMessage = compareWith || previousMessage || message
+    const compareMessage = compareWith || previousMessage || message
+
     if (renderMode === 'raw') {
       return this.renderRawMode(message, compareWith)
-      compareMessage = message
     }
     if (!message.value) {
       return null
     }
 
     const compareValue = compareMessage.value || message.value
-    const str = Base64Message.toUnicodeString(message.value)
-    const compareStr = Base64Message.toUnicodeString(compareValue)
+    const current = this.convertMessage(message.value)
+    const compare = this.convertMessage(compareValue)
 
-    let json
-    try {
-      json = JSON.parse(str)
-    } catch (error) {
-      return this.renderRawValue(str, compareStr)
-    }
-
-    if (typeof json === 'string') {
-      return this.renderRawValue(str, compareStr)
-    } else if (typeof json === 'number') {
-      return this.renderRawValue(str, compareStr)
-    } else if (typeof json === 'boolean') {
-      return this.renderRawValue(str, compareStr)
-    } else {
-      const current = this.messageToPrettyJson(str) || str
-      const compare = this.messageToPrettyJson(compareStr) || compareStr
     const language = current && compare ? 'json' : undefined
 
-      return this.renderDiff(current, compare, language)
-    }
+    return this.renderDiff(current, compare, undefined, language)
   }
 }