Move time machine visualization from bottom division to yield func node

component

Co-authored-by: Iris Scholten <ischolten.is@gmail.com>
Co-authored-by: Delmer Reed <delmer814+1@gmail.com>

ui/src/flux/components/ExpressionNode.tsx

@@ -3,6 +3,7 @@ import React, {PureComponent} from 'react'
 import {FluxContext} from 'src/flux/containers/FluxPage'
 import FuncSelector from 'src/flux/components/FuncSelector'
 import FuncNode from 'src/flux/components/FuncNode'
+import YieldFuncNode from 'src/flux/components/YieldFuncNode'
 
 import {Func} from 'src/types/flux'
 
@@ -24,6 +25,7 @@ class ExpressionNode extends PureComponent<Props> {
       funcs,
       declarationsFromBody,
     } = this.props
+
     return (
       <FluxContext.Consumer>
         {({
@@ -33,24 +35,39 @@ class ExpressionNode extends PureComponent<Props> {
           onGenerateScript,
           onToggleYield,
           service,
+          data,
         }) => {
           return (
             <>
-              {funcs.map((func, i) => (
+              {funcs.map((func, i) => {
-                <FuncNode
+                if (func.name === 'yield') {
-                  key={i}
+                  return (
-                  index={i}
+                    <YieldFuncNode
-                  func={func}
+                      index={i}
-                  bodyID={bodyID}
+                      key={i}
-                  service={service}
+                      func={func}
-                  onChangeArg={onChangeArg}
+                      data={data}
-                  onDelete={onDeleteFuncNode}
+                      bodyID={bodyID}
-                  onToggleYield={onToggleYield}
+                      declarationID={declarationID}
-                  declarationID={declarationID}
+                    />
-                  onGenerateScript={onGenerateScript}
+                  )
-                  declarationsFromBody={declarationsFromBody}
+                }
-                />
+                return (
-              ))}
+                  <FuncNode
+                    key={i}
+                    index={i}
+                    func={func}
+                    bodyID={bodyID}
+                    service={service}
+                    onChangeArg={onChangeArg}
+                    onDelete={onDeleteFuncNode}
+                    onToggleYield={onToggleYield}
+                    declarationID={declarationID}
+                    onGenerateScript={onGenerateScript}
+                    declarationsFromBody={declarationsFromBody}
+                  />
+                )
+              })}
               <FuncSelector
                 bodyID={bodyID}
                 funcs={funcNames}

ui/src/flux/components/TimeMachine.tsx

@@ -1,8 +1,7 @@
-import React, {PureComponent, CSSProperties} from 'react'
+import React, {PureComponent} from 'react'
 import SchemaExplorer from 'src/flux/components/SchemaExplorer'
 import BodyBuilder from 'src/flux/components/BodyBuilder'
 import TimeMachineEditor from 'src/flux/components/TimeMachineEditor'
-import TimeMachineVis from 'src/flux/components/TimeMachineVis'
 import Threesizer from 'src/shared/components/threesizer/Threesizer'
 import {
   Suggestion,
@@ -10,7 +9,6 @@ import {
   OnSubmitScript,
   FlatBody,
   ScriptStatus,
-  FluxTable,
 } from 'src/types/flux'
 
 import {Service} from 'src/types'
@@ -19,7 +17,6 @@ import {HANDLE_VERTICAL, HANDLE_HORIZONTAL} from 'src/shared/constants'
 
 interface Props {
   service: Service
-  data: FluxTable[]
   script: string
   body: Body[]
   status: ScriptStatus
@@ -40,15 +37,14 @@ class TimeMachine extends PureComponent<Props> {
   public render() {
     return (
       <Threesizer
-        orientation={HANDLE_HORIZONTAL}
+        orientation={HANDLE_VERTICAL}
-        divisions={this.mainSplit}
+        divisions={this.verticals}
         containerClass="page-contents"
       />
     )
   }
 
-  private get mainSplit() {
+  private get verticals() {
-    const {data} = this.props
     return [
       {
         handleDisplay: 'none',
@@ -56,31 +52,40 @@ class TimeMachine extends PureComponent<Props> {
         headerButtons: [],
         render: () => (
           <Threesizer
-            divisions={this.divisions}
+            divisions={this.scriptAndExplorer}
-            orientation={HANDLE_VERTICAL}
+            orientation={HANDLE_HORIZONTAL}
           />
         ),
       },
-      {
+      this.builder,
-        handlePixels: 8,
-        menuOptions: [],
-        headerButtons: [],
-        style: {overflow: 'visible'} as CSSProperties,
-        render: () => <TimeMachineVis data={data} />,
-      },
     ]
   }
 
-  private get divisions() {
+  private get builder() {
+    const {body, service, suggestions, onAppendFrom, onAppendJoin} = this.props
+
+    return {
+      name: 'Build',
+      headerButtons: [],
+      menuOptions: [],
+      render: () => (
+        <BodyBuilder
+          body={body}
+          service={service}
+          suggestions={suggestions}
+          onAppendFrom={onAppendFrom}
+          onAppendJoin={onAppendJoin}
+        />
+      ),
+    }
+  }
+  private get scriptAndExplorer() {
     const {
-      body,
       script,
       status,
       service,
       onAnalyze,
       suggestions,
-      onAppendFrom,
-      onAppendJoin,
       onChangeScript,
       onSubmitScript,
     } = this.props
@@ -91,9 +96,11 @@ class TimeMachine extends PureComponent<Props> {
         headerButtons: [],
         menuOptions: [],
         render: () => <SchemaExplorer service={service} />,
+        headerOrientation: HANDLE_VERTICAL,
       },
       {
         name: 'Script',
+        headerOrientation: HANDLE_VERTICAL,
         headerButtons: [
           <div
             key="analyze"
@@ -115,20 +122,6 @@ class TimeMachine extends PureComponent<Props> {
           />
         ),
       },
-      {
-        name: 'Build',
-        headerButtons: [],
-        menuOptions: [],
-        render: () => (
-          <BodyBuilder
-            body={body}
-            service={service}
-            suggestions={suggestions}
-            onAppendFrom={onAppendFrom}
-            onAppendJoin={onAppendJoin}
-          />
-        ),
-      },
     ]
   }
 }

ui/src/flux/components/YieldFuncNode.tsx

@@ -0,0 +1,32 @@
+import React, {PureComponent} from 'react'
+import _ from 'lodash'
+
+import {ErrorHandling} from '../../shared/decorators/errors'
+
+import {FluxTable} from 'src/types'
+import {Func} from 'src/types/flux'
+import TimeMachineVis from './TimeMachineVis'
+
+interface Props {
+  data: FluxTable[]
+  index: number
+  bodyID: string
+  func: Func
+  declarationID?: string
+}
+
+@ErrorHandling
+class YieldFuncNode extends PureComponent<Props> {
+  public render() {
+    const {data, func} = this.props
+    const yieldName = _.get(func, 'args.0.value', 'result')
+    return (
+      <div style={{width: '1000px', height: '1000px'}}>
+        <span>{yieldName}</span>
+        <TimeMachineVis data={data} />
+      </div>
+    )
+  }
+}
+
+export default YieldFuncNode

ui/src/flux/containers/FluxPage.tsx

@@ -95,7 +95,7 @@ export class FluxPage extends PureComponent<Props, State> {
   }
 
   public render() {
-    const {suggestions, data, body, status} = this.state
+    const {suggestions, body, status} = this.state
     const {script} = this.props
 
     return (
@@ -104,7 +104,6 @@ export class FluxPage extends PureComponent<Props, State> {
           <div className="page hosts-list-page">
             {this.header}
             <TimeMachine
-              data={data}
               body={body}
               script={script}
               status={status}
@@ -148,6 +147,7 @@ export class FluxPage extends PureComponent<Props, State> {
       onGenerateScript: this.handleGenerateScript,
       onToggleYield: this.handleToggleYield,
       service: this.service,
+      data: this.state.data,
     }
   }
 
@@ -366,6 +366,7 @@ export class FluxPage extends PureComponent<Props, State> {
       const {funcs: bodyFuncs, declarations} = body
 
       let funcs = bodyFuncs
+
       if (!_.isEmpty(declarations)) {
         funcs = _.flatMap(declarations, d => d.funcs)
       }

ui/src/shared/components/threesizer/Division.tsx

@@ -25,6 +25,7 @@ interface Props {
   draggable: boolean
   orientation: string
   activeHandleID: string
+  headerOrientation: string
   render: (visibility: string) => ReactElement<any>
   onHandleStartDrag: (id: string, e: MouseEvent<HTMLElement>) => void
   onDoubleClick: (id: string) => void
@@ -191,8 +192,8 @@ class Division extends PureComponent<Props> {
   }
 
   private get contentsClass(): string {
-    const {orientation, size} = this.props
+    const {headerOrientation, size} = this.props
-    return classnames(`threesizer--contents ${orientation}`, {
+    return classnames(`threesizer--contents ${headerOrientation}`, {
       'no-shadows': !size,
     })
   }

ui/src/shared/components/threesizer/Threesizer.tsx

@@ -133,28 +133,33 @@ class Threesizer extends Component<Props, State> {
         onMouseMove={this.handleDrag}
         ref={r => (this.containerRef = r)}
       >
-        {divisions.map((d, i) => (
+        {divisions.map((d, i) => {
-          <Division
+          const headerOrientation = _.get(d, 'headerOrientation', orientation)
-            key={d.id}
+
-            id={d.id}
+          return (
-            name={d.name}
+            <Division
-            size={d.size}
+              key={d.id}
-            style={d.style}
+              id={d.id}
-            offset={this.offset}
+              name={d.name}
-            draggable={i > 0}
+              size={d.size}
-            orientation={orientation}
+              style={d.style}
-            handlePixels={d.handlePixels}
+              offset={this.offset}
-            handleDisplay={d.handleDisplay}
+              draggable={i > 0}
-            activeHandleID={activeHandleID}
+              orientation={orientation}
-            onMaximize={this.handleMaximize}
+              handlePixels={d.handlePixels}
-            onMinimize={this.handleMinimize}
+              handleDisplay={d.handleDisplay}
-            onDoubleClick={this.handleDoubleClick}
+              activeHandleID={activeHandleID}
-            render={this.props.divisions[i].render}
+              onMaximize={this.handleMaximize}
-            onHandleStartDrag={this.handleStartDrag}
+              onMinimize={this.handleMinimize}
-            menuOptions={this.props.divisions[i].menuOptions}
+              headerOrientation={headerOrientation}
-            headerButtons={this.props.divisions[i].headerButtons}
+              onDoubleClick={this.handleDoubleClick}
-          />
+              render={this.props.divisions[i].render}
-        ))}
+              onHandleStartDrag={this.handleStartDrag}
+              menuOptions={this.props.divisions[i].menuOptions}
+              headerButtons={this.props.divisions[i].headerButtons}
+            />
+          )
+        })}
       </div>
     )
   }

ui/src/types/flux.ts

@@ -30,6 +30,7 @@ export interface Context {
   onGenerateScript: OnGenerateScript
   onToggleYield: OnToggleYield
   service: Service
+  data: FluxTable[]
 }
 
 export interface DeleteFuncNodeArgs {