WIP FilterPreview

ui/src/ifql/ast/walker.ts

@@ -68,7 +68,10 @@ export default class Walker {
     if (node) {
       results = [...results, ...this.inOrder(node.left)]
 
-      if (node.type === 'MemberExpression') {
+      if (
+        node.type === 'MemberExpression' ||
+        node.type === 'ObjectExpression'
+      ) {
         const {location, object, property} = node
         const {name} = object
         const {value, type} = property

ui/src/ifql/components/Filter.tsx

@@ -1,22 +1,13 @@
-import React, {PureComponent} from 'react'
+import {PureComponent, ReactNode} from 'react'
 import {connect} from 'react-redux'
 import {getAST} from 'src/ifql/apis'
-import {
+import {Links, BinaryExpressionNode, MemberExpressionNode} from 'src/types/ifql'
-  Links,
-  OnChangeArg,
-  BinaryExpressionNode,
-  MemberExpressionNode,
-} from 'src/types/ifql'
 import Walker from 'src/ifql/ast/walker'
 
 interface Props {
-  argKey: string
-  funcID: string
-  bodyID: string
-  declarationID: string
   value: string
-  onChangeArg: OnChangeArg
   links: Links
+  render: (nodes: FilterNode[]) => ReactNode
 }
 
 type FilterNode = BinaryExpressionNode | MemberExpressionNode
@@ -45,17 +36,7 @@ export class Filter extends PureComponent<Props, State> {
   }
 
   public render() {
-    const {argKey} = this.props
+    return this.props.render(this.state.nodes)
-    const {nodes} = this.state
-
-    return (
-      <div className="func-arg">
-        <label className="func-arg--label">{argKey}</label>
-        {nodes.map((n, i) => {
-          return <div key={i}>{n.source}</div>
-        })}
-      </div>
-    )
   }
 }
 

ui/src/ifql/components/FilterPreview.tsx

@@ -0,0 +1,16 @@
+import React, {PureComponent} from 'react'
+import {BinaryExpressionNode, MemberExpressionNode} from 'src/types/ifql'
+
+type FilterNode = BinaryExpressionNode | MemberExpressionNode
+
+interface Props {
+  nodes: FilterNode[]
+}
+
+class FilterPreview extends PureComponent<Props> {
+  public render() {
+    return this.props.nodes.map((n, i) => <div key={i}>{n.source}</div>)
+  }
+}
+
+export default FilterPreview

ui/src/ifql/components/FuncArg.tsx

@@ -50,16 +50,7 @@ class FuncArg extends PureComponent<Props> {
     }
 
     if (funcName === funcNames.FILTER) {
-      return (
+      return <Filter value={this.value} render={this.filter} />
-        <Filter
-          argKey={argKey}
-          funcID={funcID}
-          bodyID={bodyID}
-          value={this.value}
-          declarationID={declarationID}
-          onChangeArg={onChangeArg}
-        />
-      )
     }
 
     switch (type) {
@@ -127,6 +118,11 @@ class FuncArg extends PureComponent<Props> {
     }
   }
 
+  private filter = nodes => {
+    console.log(nodes)
+    return null
+  }
+
   private get value(): string {
     return this.props.value.toString()
   }

ui/src/ifql/components/FuncArgsPreview.tsx

@@ -1,9 +1,15 @@
 import React, {PureComponent} from 'react'
-import {Arg} from 'src/types/ifql'
+import _ from 'lodash'
+
+import {Func} from 'src/types/ifql'
+import {funcNames} from 'src/ifql/constants'
+import Filter from 'src/ifql/components/Filter'
+import FilterPreview from 'src/ifql/components/FilterPreview'
+
 import uuid from 'uuid'
 
 interface Props {
-  args: Arg[]
+  func: Func
 }
 
 export default class FuncArgsPreview extends PureComponent<Props> {
@@ -12,17 +18,32 @@ export default class FuncArgsPreview extends PureComponent<Props> {
   }
 
   private get summarizeArguments(): JSX.Element | JSX.Element[] {
-    const {args} = this.props
+    const {func} = this.props
+    const {args} = func
 
     if (!args) {
       return
     }
 
+    if (func.name === funcNames.FILTER) {
+      const value = _.get(args, '0.value', '')
+      if (!value) {
+        return this.colorizedArguments
+      }
+
+      return <Filter value={value} render={this.filterPreview} />
+    }
+
     return this.colorizedArguments
   }
 
+  private filterPreview = nodes => {
+    return <FilterPreview nodes={nodes} />
+  }
+
   private get colorizedArguments(): JSX.Element | JSX.Element[] {
-    const {args} = this.props
+    const {func} = this.props
+    const {args} = func
 
     return args.map((arg, i): JSX.Element => {
       if (!arg.value) {

ui/src/ifql/components/FuncNode.tsx

@@ -34,7 +34,6 @@ export default class FuncNode extends PureComponent<Props, State> {
   public render() {
     const {
       func,
-      func: {args},
       bodyID,
       onChangeArg,
       declarationID,
@@ -49,7 +48,7 @@ export default class FuncNode extends PureComponent<Props, State> {
         onMouseLeave={this.handleMouseLeave}
       >
         <div className="func-node--name">{func.name}</div>
-        <FuncArgsPreview args={args} />
+        <FuncArgsPreview func={func} />
         {isExpanded && (
           <FuncArgs
             func={func}

ui/src/ifql/components/TimeMachine.tsx

@@ -52,6 +52,10 @@ class TimeMachine extends PureComponent<Props> {
   private get divisions() {
     const {body, suggestions, script, onChangeScript} = this.props
     return [
+      {
+        name: 'Explore',
+        render: () => <SchemaExplorer />,
+      },
       {
         name: 'Script',
         render: () => (
@@ -62,10 +66,6 @@ class TimeMachine extends PureComponent<Props> {
         name: 'Build',
         render: () => <BodyBuilder body={body} suggestions={suggestions} />,
       },
-      {
-        name: 'Explore',
-        render: () => <SchemaExplorer />,
-      },
     ]
   }
 }

ui/src/ifql/containers/IFQLPage.tsx

@@ -39,9 +39,9 @@ export class IFQLPage extends PureComponent<Props, State> {
       ast: null,
       suggestions: [],
       script: `from(db:"foo")
-                |> filter(fn: (r) => r["_measurement"]=="cpu" AND
+        |> filter(fn: (r) => r._measurement =="cpu" AND
-                  r["_field"] == "usage_system" AND
+        r["_field"] == "usage_system" AND
-                  r["service"] == "app-server")`,
+        r["service"] == "app-server")`,
     }
   }