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>
2018-06-07 18:04:05 -07:00 · 2018-06-07 18:04:05 -07:00 · 1db5de72d1
parent 8edd0b3ff6
commit 1db5de72d1
7 changed files with 126 additions and 76 deletions
--- a/ui/src/flux/components/ExpressionNode.tsx
+++ b/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) => (
-                <FuncNode
-                  key={i}
-                  index={i}
-                  func={func}
-                  bodyID={bodyID}
-                  service={service}
-                  onChangeArg={onChangeArg}
-                  onDelete={onDeleteFuncNode}
-                  onToggleYield={onToggleYield}
-                  declarationID={declarationID}
-                  onGenerateScript={onGenerateScript}
-                  declarationsFromBody={declarationsFromBody}
-                />
-              ))}
+              {funcs.map((func, i) => {
+                if (func.name === 'yield') {
+                  return (
+                    <YieldFuncNode
+                      index={i}
+                      key={i}
+                      func={func}
+                      data={data}
+                      bodyID={bodyID}
+                      declarationID={declarationID}
+                    />
+                  )
+                }
+                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}
--- a/ui/src/flux/components/TimeMachine.tsx
+++ b/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}
-        divisions={this.mainSplit}
+        orientation={HANDLE_VERTICAL}
+        divisions={this.verticals}
        containerClass="page-contents"
      />
    )
  }

-  private get mainSplit() {
-    const {data} = this.props
+  private get verticals() {
    return [
      {
        handleDisplay: 'none',
@ -56,31 +52,40 @@ class TimeMachine extends PureComponent<Props> {
        headerButtons: [],
        render: () => (
          <Threesizer
-            divisions={this.divisions}
-            orientation={HANDLE_VERTICAL}
+            divisions={this.scriptAndExplorer}
+            orientation={HANDLE_HORIZONTAL}
          />
        ),
      },
-      {
-        handlePixels: 8,
-        menuOptions: [],
-        headerButtons: [],
-        style: {overflow: 'visible'} as CSSProperties,
-        render: () => <TimeMachineVis data={data} />,
-      },
+      this.builder,
    ]
  }

-  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}
-          />
-        ),
-      },
    ]
  }
 }
--- a/ui/src/flux/components/YieldFuncNode.tsx
+++ b/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
--- a/ui/src/flux/containers/FluxPage.tsx
+++ b/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)
      }
--- a/ui/src/shared/components/threesizer/Division.tsx
+++ b/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
-    return classnames(`threesizer--contents ${orientation}`, {
+    const {headerOrientation, size} = this.props
+    return classnames(`threesizer--contents ${headerOrientation}`, {
      'no-shadows': !size,
    })
  }
--- a/ui/src/shared/components/threesizer/Threesizer.tsx
+++ b/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) => (
-          <Division
-            key={d.id}
-            id={d.id}
-            name={d.name}
-            size={d.size}
-            style={d.style}
-            offset={this.offset}
-            draggable={i > 0}
-            orientation={orientation}
-            handlePixels={d.handlePixels}
-            handleDisplay={d.handleDisplay}
-            activeHandleID={activeHandleID}
-            onMaximize={this.handleMaximize}
-            onMinimize={this.handleMinimize}
-            onDoubleClick={this.handleDoubleClick}
-            render={this.props.divisions[i].render}
-            onHandleStartDrag={this.handleStartDrag}
-            menuOptions={this.props.divisions[i].menuOptions}
-            headerButtons={this.props.divisions[i].headerButtons}
-          />
-        ))}
+        {divisions.map((d, i) => {
+          const headerOrientation = _.get(d, 'headerOrientation', orientation)
+
+          return (
+            <Division
+              key={d.id}
+              id={d.id}
+              name={d.name}
+              size={d.size}
+              style={d.style}
+              offset={this.offset}
+              draggable={i > 0}
+              orientation={orientation}
+              handlePixels={d.handlePixels}
+              handleDisplay={d.handleDisplay}
+              activeHandleID={activeHandleID}
+              onMaximize={this.handleMaximize}
+              onMinimize={this.handleMinimize}
+              headerOrientation={headerOrientation}
+              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>
    )
  }
--- a/ui/src/types/flux.ts
+++ b/ui/src/types/flux.ts
@ -30,6 +30,7 @@ export interface Context {
  onGenerateScript: OnGenerateScript
  onToggleYield: OnToggleYield
  service: Service
+  data: FluxTable[]
 }

 export interface DeleteFuncNodeArgs {