Replace get with getdeep to add types and refactor for clarity

ui/src/ifql/components/FuncArgsPreview.tsx

@@ -1,4 +1,5 @@
 import React, {PureComponent} from 'react'
+import uuid from 'uuid'
 import _ from 'lodash'
 
 import {Func} from 'src/types/ifql'
@@ -6,7 +7,7 @@ import {funcNames} from 'src/ifql/constants'
 import Filter from 'src/ifql/components/Filter'
 import FilterPreview from 'src/ifql/components/FilterPreview'
 
-import uuid from 'uuid'
+import {getDeep} from 'src/utils/wrappers'
 
 interface Props {
   func: Func
@@ -26,7 +27,7 @@ export default class FuncArgsPreview extends PureComponent<Props> {
     }
 
     if (func.name === funcNames.FILTER) {
-      const value = _.get(args, '0.value', '')
+      const value = getDeep<string>(args, '0.value', '')
       if (!value) {
         return this.colorizedArguments
       }
@@ -52,10 +53,9 @@ export default class FuncArgsPreview extends PureComponent<Props> {
 
       const separator = i === 0 ? null : ', '
       let argValue
-
       if (arg.type === 'object') {
         const valueMap = _.map(arg.value, (value, key) => `${key}:${value}`)
-        argValue = '{' + valueMap.join(', ') + '}'
+        argValue = `{${valueMap.join(', ')}}`
       } else {
         argValue = `${arg.value}`
       }

ui/src/ifql/components/Join.tsx

@@ -4,8 +4,9 @@ import _ from 'lodash'
 import Dropdown from 'src/shared/components/Dropdown'
 import FuncArgInput from 'src/ifql/components/FuncArgInput'
 import FuncArgTextArea from 'src/ifql/components/FuncArgTextArea'
+import {getDeep} from 'src/utils/wrappers'
 
-import {OnChangeArg, Func} from 'src/types/ifql'
+import {OnChangeArg, Func, Arg} from 'src/types/ifql'
 import {argTypes} from 'src/ifql/constants'
 
 interface Props {
@@ -22,7 +23,7 @@ interface DropdownItem {
 }
 
 class Join extends PureComponent<Props> {
-  constructor(props) {
+  constructor(props: Props) {
     super(props)
   }
 
@@ -37,7 +38,7 @@ class Join extends PureComponent<Props> {
     return (
       <>
         <div className="func-arg">
-          <label className="func-arg--label">{'tables'}</label>
+          <label className="func-arg--label">tables</label>
           <Dropdown
             selected={this.table1Value}
             className="from--dropdown dropdown-100 func-arg--value"
@@ -91,7 +92,7 @@ class Join extends PureComponent<Props> {
     this.handleChooseTables(this.table1Value, item.text)
   }
 
-  private handleChooseTables = (table1, table2): void => {
+  private handleChooseTables = (table1: string, table2: string): void => {
     const {
       onChangeArg,
       bodyID,
@@ -115,30 +116,36 @@ class Join extends PureComponent<Props> {
     return this.props.declarationsFromBody.map(d => ({text: d}))
   }
 
+  private get argsArray(): Arg[] {
+    const {func} = this.props
+    return getDeep<Arg[]>(func, 'args', [])
+  }
+
   private get onValue(): string {
-    const onObject = this.props.func.args.find(a => a.key === 'on')
+    const onObject = this.argsArray.find(a => a.key === 'on')
     return onObject.value.toString()
   }
 
   private get fnValue(): string {
-    const fnObject = this.props.func.args.find(a => a.key === 'fn')
+    const fnObject = this.argsArray.find(a => a.key === 'fn')
     return fnObject.value.toString()
   }
 
   private get table1Value(): string {
-    const tables = this.props.func.args.find(a => a.key === 'tables')
+    const tables = this.argsArray.find(a => a.key === 'tables')
     if (tables) {
       const keys = _.keys(tables.value)
-      return _.get(keys, '0', '')
+      return getDeep<string>(keys, '0', '')
     }
     return ''
   }
 
   private get table2Value(): string {
-    const tables = this.props.func.args.find(a => a.key === 'tables')
+    const tables = this.argsArray.find(a => a.key === 'tables')
+
     if (tables) {
       const keys = _.keys(tables.value)
-      return _.get(keys, '1', _.get(keys, '0', ''))
+      return getDeep<string>(keys, '1', getDeep<string>(keys, '0', ''))
     }
     return ''
   }

ui/src/ifql/helpers/index.ts

@@ -1,15 +1,16 @@
 import uuid from 'uuid'
-import _ from 'lodash'
+
 import Walker from 'src/ifql/ast/walker'
 import {funcNames} from 'src/ifql/constants'
+import {getDeep} from 'src/utils/wrappers'
 
-import {FlatBody, Func} from 'src/types/ifql'
+import {FlatBody, Func, Suggestion} from 'src/types/ifql'
 
 interface Body extends FlatBody {
   id: string
 }
 
-export const bodyNodes = (ast, suggestions): Body[] => {
+export const bodyNodes = (ast, suggestions: Suggestion[]): Body[] => {
   if (!ast) {
     return []
   }
@@ -63,7 +64,7 @@ export const bodyNodes = (ast, suggestions): Body[] => {
   return body
 }
 
-const functions = (funcs, suggestions): Func[] => {
+const functions = (funcs: Func[], suggestions: Suggestion[]): Func[] => {
   const funcList = funcs.map(func => {
     const suggestion = suggestions.find(f => f.name === func.name)
     if (!suggestion) {
@@ -77,7 +78,8 @@ const functions = (funcs, suggestions): Func[] => {
 
     const {params, name} = suggestion
     const args = Object.entries(params).map(([key, type]) => {
-      const value = _.get(func.args.find(arg => arg.key === key), 'value', '')
+      const argWithKey = func.args.find(arg => arg.key === key)
+      const value = getDeep<string>(argWithKey, 'value', '')
 
       return {
         key,