First pass at highlighting variable syntax

ui/src/ifql/components/BodyBuilder.tsx

@@ -22,7 +22,9 @@ class BodyBuilder extends PureComponent<Props> {
           if (d.funcs) {
             return (
               <div className="declaration" key={b.id}>
-                <div className="variable-name">{d.name}</div>
+                <div className="variable-string">
+                  <span className="variable-name">{d.name}</span>
+                </div>
                 <ExpressionNode
                   key={b.id}
                   bodyID={b.id}
@@ -36,7 +38,9 @@ class BodyBuilder extends PureComponent<Props> {
 
           return (
             <div className="declaration" key={b.id}>
-              <div className="variable-name">{b.source}</div>
+              <div className="variable-string">
+                {this.colorVariableSyntax(b.source)}
+              </div>
             </div>
           )
         })
@@ -55,6 +59,28 @@ class BodyBuilder extends PureComponent<Props> {
     return <div className="body-builder">{_.flatten(bodybuilder)}</div>
   }
 
+  private colorVariableSyntax = (varString: string) => {
+    const split = varString.split('=')
+    const varName = split[0].substring(0, split[0].length - 1)
+    const varValue = split[1].substring(1)
+
+    const valueIsString = varValue.endsWith('"')
+
+    return (
+      <>
+        <span className="variable-name">{varName}</span>
+        {' = '}
+        <span
+          className={
+            valueIsString ? 'variable-value--string' : 'variable-value--number'
+          }
+        >
+          {varValue}
+        </span>
+      </>
+    )
+  }
+
   private get funcNames() {
     return this.props.suggestions.map(f => f.name)
   }

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

@@ -37,14 +37,23 @@ $ifql-arg-min-width: 120px;
   }
 }
 
-.variable-name {
+.variable-string {
   @extend %ifql-node;
-  color: $c-laser;
+  color: $g11-sidewalk;
   line-height: $ifql-node-height;
   white-space: nowrap;
   background-color: $g3-castle;
   @include no-user-select();
 }
+.variable-name {
+  color: $c-pool;
+}
+.variable-value--string {
+  color: $c-honeydew
+}
+.variable-value--number {
+  color: $c-neutrino;
+}
 
 .func-node {
   @extend %ifql-node;