Color builder arguments based on type

ui/src/ifql/components/FuncNode.tsx

@@ -1,4 +1,5 @@
 import React, {PureComponent, MouseEvent} from 'react'
+import uuid from 'uuid'
 import FuncArgs from 'src/ifql/components/FuncArgs'
 import {OnDeleteFuncNode, OnChangeArg, Func} from 'src/types/ifql'
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -46,7 +47,7 @@ export default class FuncNode extends PureComponent<Props, State> {
         onMouseLeave={this.handleMouseLeave}
       >
         <div className="func-node--name">{func.name}</div>
-        <div className="func-node--preview">{this.stringifyArgs}</div>
+        {this.coloredSyntaxArgs}
         {isExpanded && (
           <FuncArgs
             func={func}
@@ -61,7 +62,7 @@ export default class FuncNode extends PureComponent<Props, State> {
     )
   }
 
-  private get stringifyArgs(): string {
+  private get coloredSyntaxArgs(): JSX.Element {
     const {
       func: {args},
     } = this.props
@@ -70,15 +71,46 @@ export default class FuncNode extends PureComponent<Props, State> {
       return
     }
 
-    return args.reduce((acc, arg, i) => {
+    const coloredSyntax = args.map((arg, i): JSX.Element => {
       if (!arg.value) {
-        return acc
+        return
       }
 
-      const separator = i === 0 ? '' : ', '
+      const separator = i === 0 ? null : ', '
 
-      return `${acc}${separator}${arg.key}: ${arg.value}`
-    }, '')
+      return (
+        <React.Fragment key={uuid.v4()}>
+          {separator}
+          {arg.key}: {this.colorArgType(`${arg.value}`, arg.type)}
+        </React.Fragment>
+      )
+    })
+
+    return <div className="func-node--preview">{coloredSyntax}</div>
+  }
+
+  private colorArgType = (argument: string, type: string): JSX.Element => {
+    switch (type) {
+      case 'time':
+      case 'number':
+      case 'period':
+      case 'duration':
+      case 'array': {
+        return <span className="variable-value--number">{argument}</span>
+      }
+      case 'bool': {
+        return <span className="variable-value--boolean">{argument}</span>
+      }
+      case 'string': {
+        return <span className="variable-value--string">"{argument}"</span>
+      }
+      case 'invalid': {
+        return <span className="variable-value--invalid">{argument}</span>
+      }
+      default: {
+        return <span>{argument}</span>
+      }
+    }
   }
 
   private handleDelete = (): void => {

ui/src/style/components/time-machine/ifql-builder.scss

@@ -51,9 +51,15 @@ $ifql-arg-min-width: 120px;
 .variable-value--string {
   color: $c-honeydew
 }
+.variable-value--boolean {
+  color: $c-viridian
+}
 .variable-value--number {
   color: $c-neutrino;
 }
+.variable-value--invalid {
+  color: $c-dreamsicle;
+}
 
 .func-node {
   @extend %ifql-node;
@@ -97,7 +103,7 @@ $ifql-arg-min-width: 120px;
 }
 
 .func-node--preview {
-  color: $g13-mist;
+  color: $g11-sidewalk;
   margin-left: 4px;
 
   .func-node:hover & {