From 78092c0e48699f0decb00d79ee47292d1c85b5be Mon Sep 17 00:00:00 2001 From: Andrew Watkins Date: Tue, 15 May 2018 16:46:11 -0700 Subject: [PATCH] End merge --- ui/src/ifql/components/TimeMachine.tsx | 2 +- ui/src/ifql/components/TimeMachineEditor.tsx | 1 + ui/src/ifql/containers/IFQLPage.tsx | 2 +- .../shared/components/Threesizer/Division.tsx | 21 +++++++- .../components/Threesizer/DivisionHeader.tsx | 12 +++-- .../components/Threesizer/Threesizer.tsx | 48 ++++++++++++++++++- ui/webpack/dev.config.js | 2 +- 7 files changed, 79 insertions(+), 9 deletions(-) diff --git a/ui/src/ifql/components/TimeMachine.tsx b/ui/src/ifql/components/TimeMachine.tsx index 2a78903227..bd4ebfa6fb 100644 --- a/ui/src/ifql/components/TimeMachine.tsx +++ b/ui/src/ifql/components/TimeMachine.tsx @@ -3,7 +3,7 @@ import SchemaExplorer from 'src/ifql/components/SchemaExplorer' import BodyBuilder from 'src/ifql/components/BodyBuilder' import TimeMachineEditor from 'src/ifql/components/TimeMachineEditor' import TimeMachineVis from 'src/ifql/components/TimeMachineVis' -import Threesizer from 'src/shared/components/Threesizer/Threesizer' +import Threesizer from 'src/shared/components/threesizer/Threesizer' import {Suggestion, OnChangeScript, FlatBody} from 'src/types/ifql' import {ErrorHandling} from 'src/shared/decorators/errors' import {HANDLE_VERTICAL, HANDLE_HORIZONTAL} from 'src/shared/constants' diff --git a/ui/src/ifql/components/TimeMachineEditor.tsx b/ui/src/ifql/components/TimeMachineEditor.tsx index f5caa40a2c..adcd788a07 100644 --- a/ui/src/ifql/components/TimeMachineEditor.tsx +++ b/ui/src/ifql/components/TimeMachineEditor.tsx @@ -64,6 +64,7 @@ class TimeMachineEditor extends PureComponent { } private handleMount = (instance: EditorInstance) => { + instance.refresh() // required to for proper line height on mount this.editor = instance } diff --git a/ui/src/ifql/containers/IFQLPage.tsx b/ui/src/ifql/containers/IFQLPage.tsx index b46bfcb843..132f74925a 100644 --- a/ui/src/ifql/containers/IFQLPage.tsx +++ b/ui/src/ifql/containers/IFQLPage.tsx @@ -63,7 +63,7 @@ export class IFQLPage extends PureComponent { return ( - +
diff --git a/ui/src/shared/components/Threesizer/Division.tsx b/ui/src/shared/components/Threesizer/Division.tsx index 1f892c5620..52a9850d0b 100644 --- a/ui/src/shared/components/Threesizer/Division.tsx +++ b/ui/src/shared/components/Threesizer/Division.tsx @@ -2,7 +2,7 @@ import React, {PureComponent, ReactElement, MouseEvent} from 'react' import classnames from 'classnames' import calculateSize from 'calculate-size' -import Header from 'src/shared/components/Threesizer/DivisionHeader' +import DivisionHeader from 'src/shared/components/threesizer/DivisionHeader' import {HANDLE_VERTICAL, HANDLE_HORIZONTAL} from 'src/shared/constants/index' const NOOP = () => {} @@ -20,6 +20,8 @@ interface Props { render: (visibility: string) => ReactElement onHandleStartDrag: (id: string, e: MouseEvent) => void onDoubleClick: (id: string) => void + onMaximize: (id: string) => void + onMinimize: (id: string) => void } interface Style { @@ -78,7 +80,12 @@ class Division extends PureComponent {
{name}
- {name &&
} + {name && ( + + )}
{render(this.visibility)}
@@ -224,6 +231,16 @@ class Division extends PureComponent { onDoubleClick(id) } + + private handleMinimize = (): void => { + const {id, onMinimize} = this.props + onMinimize(id) + } + + private handleMaximize = (): void => { + const {id, onMaximize} = this.props + onMaximize(id) + } } export default Division diff --git a/ui/src/shared/components/Threesizer/DivisionHeader.tsx b/ui/src/shared/components/Threesizer/DivisionHeader.tsx index 798bd2f1e2..281245453a 100644 --- a/ui/src/shared/components/Threesizer/DivisionHeader.tsx +++ b/ui/src/shared/components/Threesizer/DivisionHeader.tsx @@ -3,7 +3,12 @@ import DivisionMenu, { MenuItem, } from 'src/shared/components/Threesizer/DivisionMenu' -class DivisionHeader extends PureComponent { +interface Props { + onMinimize: () => void + onMaximize: () => void +} + +class DivisionHeader extends PureComponent { public render() { return (
@@ -13,13 +18,14 @@ class DivisionHeader extends PureComponent { } private get menuItems(): MenuItem[] { + const {onMaximize, onMinimize} = this.props return [ { - action: () => {}, + action: onMaximize, text: 'Maximize', }, { - action: () => {}, + action: onMinimize, text: 'Minimize', }, ] diff --git a/ui/src/shared/components/Threesizer/Threesizer.tsx b/ui/src/shared/components/Threesizer/Threesizer.tsx index 8714248ec3..298ccc26b1 100644 --- a/ui/src/shared/components/Threesizer/Threesizer.tsx +++ b/ui/src/shared/components/Threesizer/Threesizer.tsx @@ -3,7 +3,7 @@ import classnames from 'classnames' import uuid from 'uuid' import _ from 'lodash' -import Division from 'src/shared/components/ThreeSizer/Division' +import Division from 'src/shared/components/threesizer/Division' import {ErrorHandling} from 'src/shared/decorators/errors' import { HANDLE_NONE, @@ -140,6 +140,8 @@ class Threesizer extends Component { handlePixels={d.handlePixels} handleDisplay={d.handleDisplay} activeHandleID={activeHandleID} + onMaximize={this.handleMaximize} + onMinimize={this.handleMinimize} onDoubleClick={this.handleDoubleClick} onHandleStartDrag={this.handleStartDrag} render={this.props.divisions[i].render} @@ -209,6 +211,50 @@ class Threesizer extends Component { this.setState({divisions}) } + private handleMaximize = (id: string): void => { + const maxDiv = this.state.divisions.find(d => d.id === id) + + if (!maxDiv) { + return + } + + const divisions = this.state.divisions.map(d => { + if (d.id !== id) { + return {...d, size: 0} + } + + return {...d, size: 1} + }) + + this.setState({divisions}) + } + + private handleMinimize = (id: string): void => { + const minDiv = this.state.divisions.find(d => d.id === id) + const numDivisions = this.state.divisions.length + + if (!minDiv) { + return + } + + let size + if (numDivisions <= 1) { + size = 1 + } else { + size = 1 / (this.state.divisions.length - 1) + } + + const divisions = this.state.divisions.map(d => { + if (d.id !== id) { + return {...d, size} + } + + return {...d, size: 0} + }) + + this.setState({divisions}) + } + private equalize = () => { const denominator = this.state.divisions.length const divisions = this.state.divisions.map(d => { diff --git a/ui/webpack/dev.config.js b/ui/webpack/dev.config.js index b67bc31edc..f691c76529 100644 --- a/ui/webpack/dev.config.js +++ b/ui/webpack/dev.config.js @@ -45,7 +45,7 @@ module.exports = { }, watch: true, cache: true, - devtool: 'cheap-eval-source-map', + devtool: 'source-map', entry: { app: path.resolve(__dirname, '..', 'src', 'index.tsx'), },