From 5953b70d18f307e6bb65ed2559fe8d7038625777 Mon Sep 17 00:00:00 2001
From: ebb-tide <denizk@gmail.com>
Date: Thu, 24 May 2018 12:00:38 -0700
Subject: [PATCH] Add object type to ifql mode for codemirror

---
 ui/src/shared/constants/codeMirrorModes.ts       |  4 ++++
 .../components/code-mirror/_time-machine.scss    |  3 +++
 .../components/time-machine/ifql-builder.scss    | 16 +++++++++++-----
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/ui/src/shared/constants/codeMirrorModes.ts b/ui/src/shared/constants/codeMirrorModes.ts
index e31bcd2757..5dcfba8163 100644
--- a/ui/src/shared/constants/codeMirrorModes.ts
+++ b/ui/src/shared/constants/codeMirrorModes.ts
@@ -59,6 +59,10 @@ export const modeIFQL = {
       regex: /0x[a-f\d]+|[-+]?(?:\.\d+|\d+\.?\d*)(?:e[-+]?\d+)?/i,
       token: 'number',
     },
+    {
+      regex: /({.+:.+})/,
+      token: 'object',
+    },
     {
       regex: /\/\/.*/,
       token: 'comment',
diff --git a/ui/src/style/components/code-mirror/_time-machine.scss b/ui/src/style/components/code-mirror/_time-machine.scss
index d62174a7af..f4b7c00b60 100644
--- a/ui/src/style/components/code-mirror/_time-machine.scss
+++ b/ui/src/style/components/code-mirror/_time-machine.scss
@@ -34,6 +34,9 @@
   .cm-boolean {
     color: $c-viridian;
   }
+  .cm-object {
+    color: $c-honeydew;
+  }
   .cm-null {
     color: $c-dreamsicle;
   }
diff --git a/ui/src/style/components/time-machine/ifql-builder.scss b/ui/src/style/components/time-machine/ifql-builder.scss
index c93b665bdd..8c92a28ab9 100644
--- a/ui/src/style/components/time-machine/ifql-builder.scss
+++ b/ui/src/style/components/time-machine/ifql-builder.scss
@@ -4,6 +4,7 @@ $ifql-node-gap: 5px;
 $ifql-node-padding: 10px;
 $ifql-arg-min-width: 120px;
 $ifql-number-color: $c-neutrino;
+$ifql-object-color: $c-viridian;
 $ifql-string-color: $c-honeydew;
 $ifql-boolean-color: $c-viridian;
 $ifql-invalid-color: $c-viridian;
@@ -76,6 +77,10 @@ $ifql-invalid-color: $c-viridian;
   color: $ifql-number-color;
 }
 
+.variable-value--object {
+  color: $ifql-object-color;
+}
+
 .variable-value--invalid {
   color: $ifql-invalid-color;
 }
@@ -257,16 +262,16 @@ $ifql-filter-parens: $g5-pepper;
   padding: 0 ($ifql-filter-gap / 2);
 }
 
-.ifql-filter--value+.ifql-filter--operator,
-.ifql-filter--paren-close+.ifql-filter--operator {
+.ifql-filter--value + .ifql-filter--operator,
+.ifql-filter--paren-close + .ifql-filter--operator {
   padding: 0 $ifql-filter-gap;
 }
 
-.ifql-filter--key+.ifql-filter--operator {
+.ifql-filter--key + .ifql-filter--operator {
   background-color: $ifql-filter-expression;
 }
 
-.ifql-filter--key+.ifql-filter--operator+.ifql-filter--value {
+.ifql-filter--key + .ifql-filter--operator + .ifql-filter--value {
   background-color: $ifql-filter-expression;
   border-radius: 0 3px 3px 0;
 }
@@ -291,7 +296,8 @@ $ifql-filter-parens: $g5-pepper;
   height: $ifql-filter-unit-wrapped;
   width: ($ifql-filter-unit-wrapped - $ifql-filter-unit) / 2;
   background-color: $ifql-filter-parens;
-  border: (($ifql-filter-unit-wrapped - $ifql-filter-unit) / 2) solid $ifql-filter-expression;
+  border: (($ifql-filter-unit-wrapped - $ifql-filter-unit) / 2) solid
+    $ifql-filter-expression;
 }
 
 .ifql-filter--paren-open {