diff --git a/ui/src/ifql/components/TimeMachine.tsx b/ui/src/ifql/components/TimeMachine.tsx index c6632a1946..f57dbfe6a2 100644 --- a/ui/src/ifql/components/TimeMachine.tsx +++ b/ui/src/ifql/components/TimeMachine.tsx @@ -58,8 +58,12 @@ class TimeMachine extends PureComponent { }, { name: 'Script', - render: () => ( - + render: visibility => ( + ), }, { diff --git a/ui/src/ifql/components/TimeMachineEditor.tsx b/ui/src/ifql/components/TimeMachineEditor.tsx index e2fcd7d903..052bfced37 100644 --- a/ui/src/ifql/components/TimeMachineEditor.tsx +++ b/ui/src/ifql/components/TimeMachineEditor.tsx @@ -9,6 +9,7 @@ import {editor} from 'src/ifql/constants' interface Props { script: string onChangeScript: OnChangeScript + visibility: string } interface EditorInstance extends IInstance { @@ -17,10 +18,22 @@ interface EditorInstance extends IInstance { @ErrorHandling class TimeMachineEditor extends PureComponent { + private editor: EditorInstance + constructor(props) { super(props) } + public componentDidUpdate(prevProps) { + if (prevProps.visibility === this.props.visibility) { + return + } + + if (this.props.visibility === 'visible') { + this.editor.refresh() + } + } + public render() { const {script} = this.props @@ -31,6 +44,7 @@ class TimeMachineEditor extends PureComponent { readonly: false, extraKeys: {'Ctrl-Space': 'autocomplete'}, completeSingle: false, + autoRefresh: true, } return ( @@ -43,11 +57,16 @@ class TimeMachineEditor extends PureComponent { onBeforeChange={this.updateCode} onTouchStart={this.onTouchStart} onKeyUp={this.handleKeyUp} + editorDidMount={this.handleMount} /> ) } + private handleMount = (instance: EditorInstance) => { + this.editor = instance + } + private handleKeyUp = (instance: EditorInstance, e: KeyboardEvent) => { const {key} = e diff --git a/ui/src/shared/components/ResizeDivision.tsx b/ui/src/shared/components/ResizeDivision.tsx index 4b94093acf..facf2049f2 100644 --- a/ui/src/shared/components/ResizeDivision.tsx +++ b/ui/src/shared/components/ResizeDivision.tsx @@ -16,11 +16,17 @@ interface Props { draggable: boolean orientation: string activeHandleID: string - render: () => ReactElement + render: (visibility: string) => ReactElement onHandleStartDrag: (id: string, e: MouseEvent) => void onDoubleClick: (id: string) => void } +interface Style { + width?: string + height?: string + display?: string +} + class Division extends PureComponent { public static defaultProps: Partial = { name: '', @@ -28,7 +34,12 @@ class Division extends PureComponent { } private collapseThreshold: number = 0 - private containerRef: HTMLElement + private ref: React.RefObject + + constructor(props) { + super(props) + this.ref = React.createRef() + } public componentDidMount() { const {name} = this.props @@ -53,7 +64,7 @@ class Division extends PureComponent {
(this.containerRef = r)} + ref={this.ref} >
{
{name &&
} -
{render()}
+
{render(this.visibility)}
) } - private get title() { + private get visibility(): string { + if (this.props.size === 0) { + return 'hidden' + } + + return 'visible' + } + + private get title(): string { return 'Drag to resize.\nDouble click to expand.' } - private get contentStyle() { + private get contentStyle(): Style { if (this.props.orientation === HANDLE_HORIZONTAL) { return { height: `calc(100% - ${this.handlePixels}px)`, @@ -89,7 +108,7 @@ class Division extends PureComponent { } } - private get handleStyle() { + private get handleStyle(): Style { const {handleDisplay: display, orientation, handlePixels} = this.props if (orientation === HANDLE_HORIZONTAL) { @@ -105,7 +124,7 @@ class Division extends PureComponent { } } - private get containerStyle() { + private get containerStyle(): Style { if (this.props.orientation === HANDLE_HORIZONTAL) { return { height: this.size, @@ -175,11 +194,11 @@ class Division extends PureComponent { return true } - if (!this.containerRef || this.props.size >= 0.33) { + if (!this.ref || this.props.size >= 0.33) { return false } - const {width} = this.containerRef.getBoundingClientRect() + const {width} = this.ref.current.getBoundingClientRect() return width <= this.collapseThreshold } @@ -199,7 +218,7 @@ class Division extends PureComponent { this.props.onHandleStartDrag(id, e) } - private handleDoubleClick = () => { + private handleDoubleClick = (): void => { const {onDoubleClick, id} = this.props onDoubleClick(id) diff --git a/ui/src/shared/components/Threesizer.tsx b/ui/src/shared/components/Threesizer.tsx index 687c312e19..7fdaad7408 100644 --- a/ui/src/shared/components/Threesizer.tsx +++ b/ui/src/shared/components/Threesizer.tsx @@ -32,7 +32,7 @@ interface Division { name?: string handleDisplay?: string handlePixels?: number - render: () => ReactElement + render: (visibility?: string) => ReactElement } interface DivisionState extends Division {