From b8959ae7692492e00fc61a2e8c7e4a60dee3ef51 Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 7 May 2018 16:43:50 -0700 Subject: [PATCH] Move variable names into own component --- ui/src/ifql/components/BodyBuilder.tsx | 45 ++----- ui/src/ifql/components/VariableName.tsx | 126 ++++++++++++++++++ .../components/time-machine/ifql-builder.scss | 45 +++++-- 3 files changed, 174 insertions(+), 42 deletions(-) create mode 100644 ui/src/ifql/components/VariableName.tsx diff --git a/ui/src/ifql/components/BodyBuilder.tsx b/ui/src/ifql/components/BodyBuilder.tsx index 3904c9a2e3..5d32b55771 100644 --- a/ui/src/ifql/components/BodyBuilder.tsx +++ b/ui/src/ifql/components/BodyBuilder.tsx @@ -2,6 +2,7 @@ import React, {PureComponent} from 'react' import _ from 'lodash' import ExpressionNode from 'src/ifql/components/ExpressionNode' +import VariableName from 'src/ifql/components/VariableName' import {FlatBody, Suggestion} from 'src/types/ifql' @@ -22,9 +23,7 @@ class BodyBuilder extends PureComponent { if (d.funcs) { return (
-
- {d.name} -
+ { return (
-
- {this.colorVariableSyntax(b.source)} -
+
) }) } return ( - +
+ + +
) }) return
{_.flatten(bodybuilder)}
} - private colorVariableSyntax = (varString: string) => { - const split = varString.split('=') - const varName = split[0].substring(0, split[0].length - 1) - const varValue = split[1].substring(1) - - const valueIsString = varValue.endsWith('"') - - return ( - <> - {varName} - {' = '} - - {varValue} - - - ) - } - private get funcNames() { return this.props.suggestions.map(f => f.name) } diff --git a/ui/src/ifql/components/VariableName.tsx b/ui/src/ifql/components/VariableName.tsx new file mode 100644 index 0000000000..cbb9194097 --- /dev/null +++ b/ui/src/ifql/components/VariableName.tsx @@ -0,0 +1,126 @@ +import React, {PureComponent, MouseEvent} from 'react' + +interface Props { + name?: string +} + +interface State { + isExpanded: boolean +} + +export default class VariableName extends PureComponent { + public static defaultProps: Partial = { + name: '', + } + + constructor(props) { + super(props) + + this.state = { + isExpanded: false, + } + } + + public render() { + const {isExpanded} = this.state + + return ( +
+ {this.nameElement} + {isExpanded && this.renderTooltip} +
+ ) + } + + private get renderTooltip(): JSX.Element { + const {name} = this.props + + if (name.includes('=')) { + const split = name.split('=') + const varName = split[0].substring(0, split[0].length - 1) + const varValue = split[1].substring(1) + + return ( +
+ + = + +
+ ) + } + + return ( +
+ +
+ ) + } + + private handleMouseEnter = (e: MouseEvent): void => { + e.stopPropagation() + + this.setState({isExpanded: true}) + } + + private handleMouseLeave = (e: MouseEvent): void => { + e.stopPropagation() + + this.setState({isExpanded: false}) + } + + private get nameElement(): JSX.Element { + const {name} = this.props + + if (!name) { + return Untitled + } + + if (name.includes('=')) { + return this.colorizeSyntax + } + + return {name} + } + + private get colorizeSyntax(): JSX.Element { + const {name} = this.props + const split = name.split('=') + const varName = split[0].substring(0, split[0].length - 1) + const varValue = split[1].substring(1) + + const valueIsString = varValue.endsWith('"') + + return ( + <> + {varName} + {' = '} + + {varValue} + + + ) + } +} diff --git a/ui/src/style/components/time-machine/ifql-builder.scss b/ui/src/style/components/time-machine/ifql-builder.scss index b9b187deb9..98ac266542 100644 --- a/ui/src/style/components/time-machine/ifql-builder.scss +++ b/ui/src/style/components/time-machine/ifql-builder.scss @@ -15,10 +15,16 @@ $ifql-arg-min-width: 120px; font-size: 13px; font-weight: 600; position: relative; + background-color: $g4-onyx; + transition: background-color 0.25s ease; + + &:hover { + background-color: $g6-smoke; + } } .body-builder { - padding: 12px 30px; + padding: 30px; min-width: 440px; overflow: hidden; height: 100%; @@ -30,7 +36,7 @@ $ifql-arg-min-width: 120px; width: 100%; margin-bottom: 24px; display: flex; - flex-wrap: wrap; + flex-wrap: nowrap; &:last-of-type { margin-bottom: 0; @@ -42,9 +48,11 @@ $ifql-arg-min-width: 120px; color: $g11-sidewalk; line-height: $ifql-node-height; white-space: nowrap; - background-color: $g3-castle; @include no-user-select(); } +.variable-blank { + font-style: italic; +} .variable-name { color: $c-pool; } @@ -65,9 +73,7 @@ $ifql-arg-min-width: 120px; @extend %ifql-node; display: flex; align-items: center; - background-color: $g4-onyx; margin-left: $ifql-node-gap; - transition: background-color 0.25s ease; // Connection Line &:after { @@ -81,8 +87,9 @@ $ifql-arg-min-width: 120px; transform: translate(-100%, -50%); } - &:hover { - background-color: $g6-smoke; + &:first-child:after { + content: none; + margin-left: 0; } } .func-node--name, @@ -112,7 +119,8 @@ $ifql-arg-min-width: 120px; } -.func-node--tooltip { +.func-node--tooltip, +.variable-name--tooltip { background-color: $g3-castle; border-radius: $radius; padding: 10px; @@ -176,3 +184,24 @@ $ifql-arg-min-width: 120px; .func-arg--value { flex: 1 0 0; } + + +.variable-name--tooltip { + flex-direction: row; + align-items: center; + justify-content: space-between; + flex-wrap: nowrap; +} + +.variable-name--input { + width: 140px; +} + +.variable-name--operator { + width: 20px; + height: 30px; + text-align: center; + line-height: 30px; + font-weight: 600; + @include no-user-select(); +} \ No newline at end of file