Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Highlight func nodes when they precede a yield node

pull/10616/head
Alex P 2018-06-11 11:11:38 -07:00
parent 510568c682
commit 350569f2a4
4 changed files with 132 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/src/flux/components/BodyBuilder.tsx
View File

@ -37,6 +37,7 @@ class BodyBuilder extends PureComponent<Props> {
funcNames={this.funcNames}
funcs={d.funcs}
declarationsFromBody={this.declarationsFromBody}
isLastBody={this.isLastBody(i)}
/>
</div>
)
@ -57,6 +58,7 @@ class BodyBuilder extends PureComponent<Props> {
funcs={b.funcs}
funcNames={this.funcNames}
declarationsFromBody={this.declarationsFromBody}
isLastBody={this.isLastBody(i)}
/>
</div>
)
@ -80,6 +82,12 @@ class BodyBuilder extends PureComponent<Props> {
)
}
private isLastBody = (bodyIndex: number): boolean => {
const {body} = this.props
return bodyIndex === body.length - 1
}
private get newDeclarationFuncs(): string[] {
const {body} = this.props
const declarationFunctions = [funcNames.FROM]

22
ui/src/flux/components/ExpressionNode.tsx
View File

@ -13,6 +13,7 @@ interface Props {
funcs: Func[]
declarationID?: string
declarationsFromBody: string[]
isLastBody: boolean
}
// an Expression is a group of one or more functions
@ -67,6 +68,7 @@ class ExpressionNode extends PureComponent<Props> {
onChangeArg={onChangeArg}
onDelete={onDeleteFuncNode}
onToggleYield={onToggleYield}
isYielding={this.isNextFuncYield(i)}
declarationID={declarationID}
onGenerateScript={onGenerateScript}
declarationsFromBody={declarationsFromBody}
@ -85,6 +87,26 @@ class ExpressionNode extends PureComponent<Props> {
</FluxContext.Consumer>
)
}
private isNextFuncYield = (funcIndex: number): boolean => {
const {funcs, isLastBody} = this.props
if (funcIndex === funcs.length - 1 && isLastBody) {
return true
}
if (funcIndex === funcs.length - 1) {
return false
}
const nextFunc = funcs[funcIndex + 1]
if (nextFunc.name === 'yield') {
return true
}
return false
}
}
export default ExpressionNode

9
ui/src/flux/components/FuncNode.tsx
View File

@ -1,4 +1,5 @@
import React, {PureComponent, MouseEvent} from 'react'
import classnames from 'classnames'
import FuncArgs from 'src/flux/components/FuncArgs'
import FuncArgsPreview from 'src/flux/components/FuncArgsPreview'
@ -22,6 +23,7 @@ interface Props {
onChangeArg: OnChangeArg
onGenerateScript: () => void
declarationsFromBody: string[]
isYielding: boolean
}
interface State {
@ -56,7 +58,7 @@ export default class FuncNode extends PureComponent<Props, State> {
return (
<div
className="func-node"
className={this.nodeClassName}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
onClick={this.handleClick}
@ -82,6 +84,11 @@ export default class FuncNode extends PureComponent<Props, State> {
)
}
private get nodeClassName(): string {
const {isYielding} = this.props
return classnames('func-node', {active: isYielding})
}
private handleDelete = (e: MouseEvent<HTMLElement>): void => {
e.stopPropagation()
const {func, bodyID, declarationID} = this.props

101
ui/src/style/components/time-machine/flux-builder.scss
View File

@ -10,11 +10,21 @@ $flux-connector-line: 2px;
$flux-node-gap: 30px;
$flux-node-padding: 10px;
$flux-arg-min-width: 120px;
$flux-number-color: $c-neutrino;
$flux-func-color: $c-comet;
$flux-number-color: $c-hydrogen;
$flux-object-color: $c-viridian;
$flux-string-color: $c-honeydew;
$flux-boolean-color: $c-viridian;
$flux-invalid-color: $c-viridian;
$flux-invalid-color: $c-curacao;
$flux-func-hover: $c-moonstone;
$flux-number-hover: $c-neutrino;
$flux-object-hover: $c-rainforest;
$flux-string-hover: $c-wasabi;
$flux-boolean-hover: $c-rainforest;
$flux-invalid-hover: $c-dreamsicle;
// Shared Node styles
%flux-node {
min-height: $flux-node-height;
@ -131,6 +141,25 @@ $flux-invalid-color: $c-viridian;
display: flex;
align-items: center;
margin-left: $flux-node-gap;
&:hover,
&.active {
.func-node--preview {
color: $g20-white;
}
.func-arg--string {
color: $flux-string-hover;
}
.func-arg--boolean {
color: $flux-boolean-hover;
}
.func-arg--number {
color: $flux-number-hover;
}
.func-arg--invalid {
color: $flux-invalid-hover;
}
}
}
.func-node--connector {
@ -201,9 +230,10 @@ $flux-invalid-color: $c-viridian;
.func-node--name {
height: $flux-node-height;
line-height: $flux-node-height;
color: $c-comet;
.func-node:hover & {
color: $c-potassium;
color: $flux-func-color;
.func-node:hover &,
.func-node.active & {
color: $flux-func-hover;
}
}
@ -306,11 +336,13 @@ $flux-filter-unit: 26px;
$flux-filter-unit-wrapped: 34px;
$flux-filter-expression: $g3-castle;
$flux-filter-parens: $g5-pepper;
%flux-filter-style {
height: $flux-filter-unit;
line-height: $flux-filter-unit;
border-style: solid;
border-width: 0;
transition: background-color 0.25s ease;
}
.flux-filter--key {
@ -360,7 +392,9 @@ $flux-filter-parens: $g5-pepper;
height: $flux-filter-unit-wrapped;
width: ($flux-filter-unit-wrapped - $flux-filter-unit) / 2;
background-color: $flux-filter-parens;
border: (($flux-filter-unit-wrapped - $flux-filter-unit) / 2) solid $flux-filter-expression;
border: (($flux-filter-unit-wrapped - $flux-filter-unit) / 2) solid
$flux-filter-expression;
transition: border-color 0.25s ease;
}
.flux-filter--paren-open {
@ -377,6 +411,8 @@ $flux-filter-parens: $g5-pepper;
position: relative;
z-index: 2;
background-color: $flux-filter-parens;
transition: background-color 0.25s ease;
&:before {
content: '';
width: 100%;
@ -389,6 +425,7 @@ $flux-filter-parens: $g5-pepper;
border-color: $flux-filter-expression;
z-index: -1;
box-sizing: border-box;
transition: border-color 0.25s ease;
}
}
@ -422,4 +459,54 @@ $flux-filter-parens: $g5-pepper;
font-size: 12px;
font-weight: 500;
padding-left: 20px;
}
}
// Func Node Active State (When node is before a yield)
.func-node.active {
background-color: $c-star;
.func-node--connector:after {
@include gradient-h($g3-castle, $c-star);
}
.flux-filter--value.number {
color: $flux-number-hover;
}
.flux-filter--value.string {
color: $flux-string-hover;
}
.flux-filter--value.boolean {
color: $flux-boolean-hover;
}
.flux-filter--key,
.flux-filter--key + .flux-filter--operator,
.flux-filter--key + .flux-filter--operator + .flux-filter--value {
background-color: $c-amethyst;
}
.flux-filter--paren-open,
.flux-filter--paren-close {
border-color: $c-amethyst;
}
.flux-filter--paren-open+.flux-filter--key,
.flux-filter--paren-open+.flux-filter--key+.flux-filter--operator,
.flux-filter--paren-open+.flux-filter--key+.flux-filter--operator+.flux-filter--value,
.flux-filter--paren-open+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator+.flux-filter--key,
.flux-filter--paren-open+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator+.flux-filter--key+.flux-filter--operator,
.flux-filter--paren-open+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator+.flux-filter--key+.flux-filter--operator+.flux-filter--value,
.flux-filter--paren-open+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator+.flux-filter--key,
.flux-filter--paren-open+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator+.flux-filter--key+.flux-filter--operator,
.flux-filter--paren-open+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator+.flux-filter--key+.flux-filter--operator+.flux-filter--value {
background-color: $c-star;
&:before {
border-color: $c-amethyst;
}
}
.flux-filter--paren-open+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator,
.flux-filter--paren-open+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator+.flux-filter--key+.flux-filter--operator+.flux-filter--value+.flux-filter--operator {
background-color: $c-amethyst;
}
}