Add style

Co-authored-by: Andrew Watkins <andrew.watkinz@gmail.com>
Co-authored-by: Brandon Farmer <bthesorceror@gmail.com>
Co-authored-by: Alex Paxton <thealexpaxton@gmail.com>

ui/src/ifql/components/FuncArgs.tsx

@@ -18,9 +18,9 @@ interface Props {
 export default class FuncArgs extends PureComponent<Props> {
   public render() {
     return (
-      <div>
+      <div className="func-args">
         {this.props.func.args.map(({key, value}) => (
-          <div key={key}>
+          <div className="func-arg" key={key}>
             {key} : {value}
           </div>
         ))}

ui/src/ifql/components/FuncNode.tsx

@@ -14,7 +14,7 @@ export default class FuncNode extends PureComponent<Props, State> {
   constructor(props) {
     super(props)
     this.state = {
-      isOpen: false,
+      isOpen: true,
     }
   }
 
@@ -23,8 +23,8 @@ export default class FuncNode extends PureComponent<Props, State> {
     const {isOpen} = this.state
 
     return (
-      <div>
+      <div className="func-node">
-        <div className="func-node" onClick={this.handleClick}>
+        <div className="func-node--name" onClick={this.handleClick}>
           <div>{func.name}</div>
         </div>
         {isOpen && <FuncArgs func={func} />}

ui/src/ifql/components/TimeMachine.tsx

@@ -23,7 +23,7 @@ class TimeMachine extends PureComponent<Props> {
 
     return (
       <div>
-        <div className="func-node-container">
+        <div className="func-nodes-container">
           {funcs.map((f, i) => <FuncNode key={i} func={f} />)}
           <FuncSelector funcs={this.funcNames} onAddNode={onAddNode} />
         </div>

ui/src/style/components/func-node.scss

@@ -1,19 +1,40 @@
-.func-node-container {
+.func-nodes-container {
   display: inline-flex;
   flex-direction: column;
 }
 
 .func-node {
+  display: flex;
+}
+
+.func-node--name {
   background: #252b35;
   border-radius: $radius-small;
   padding: 10px;
   width: auto;
   display: flex;
-  flex-direction: column;
   color: $ix-text-default;
   text-transform: uppercase;
-  margin: $ix-marg-a;
+  margin-bottom: $ix-marg-a;
   font-family: $ix-text-font;
   font-weight: 500;
   cursor: pointer;
 }
+
+.func-args {
+  background: #252b35;
+  border-radius: $radius-small;
+  padding: 10px;
+  margin-bottom: $ix-marg-a;
+  width: auto;
+  display: flex;
+  align-items: stretch;
+  flex-direction: column;
+  color: $ix-text-default;
+  font-family: $ix-text-font;
+  font-weight: 500;
+}
+
+.func-arg {
+  display: flex;
+}

ui/test/ifql/components/TimeMachine.test.tsx

@@ -5,7 +5,7 @@ import TimeMachine from 'src/ifql/components/TimeMachine'
 const setup = () => {
   const props = {
     funcs: [],
-    nodes: [],
+    suggestions: [],
     onAddNode: () => {},
   }