From 7ecce008d5be332950d874e3f9db9ba77522a019 Mon Sep 17 00:00:00 2001 From: Oskar Damkjaer Date: Tue, 6 Jul 2021 13:44:45 +0200 Subject: [PATCH 01/11] Make bottombar look good on non-vis result frames --- src/browser/modules/Frame/styled.tsx | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/src/browser/modules/Frame/styled.tsx b/src/browser/modules/Frame/styled.tsx index a493678b527..7d5fecfce05 100644 --- a/src/browser/modules/Frame/styled.tsx +++ b/src/browser/modules/Frame/styled.tsx @@ -49,6 +49,7 @@ z-index: 130;` export const StyledFrameBody = styled.div< FullscreenProps & { collapsed: boolean } >` + flex-grow: 1; overflow: auto; min-height: ${dim.frameBodyHeight / 2}px; max-height: ${props => { @@ -64,6 +65,7 @@ export const StyledFrameBody = styled.div< flex-direction: row; width: 100%; padding: 30px 30px 10px 30px; + ${props => props.fullscreen && 'margin-bottom: 31px;'} .has-carousel &, .has-stack & { @@ -122,8 +124,16 @@ export const StyledFrameContents = styled.div` export const StyledFrameStatusbar = styled.div` border-top: ${props => props.theme.inFrameBorder}; - height: ${dim.frameStatusbarHeight - 1}px; - ${props => (props.fullscreen ? 'margin-top: -78px;' : '')}; + height: ${dim.frameStatusbarHeight}px; + ${props => + props.fullscreen && + `position: fixed; + bottom: 0; + left: 0; + right: 0; + z-index: 2; + background-color: ${props.theme.frameBackground} + `} display: flex; flex-direction: row; flex: none; @@ -195,6 +205,9 @@ export const StyledFrameCommand = styled.label<{ selectedDb: string | null }>` export const ContentContainer = styled.div` margin: 0px 3px; padding: 2px 2px 0 2px; + display: flex; + flex-direction: column; + max-height: 100vh; ` export const TitleBarHeader = styled.div` From 37dd6531aaf0b36a2217c18bafaaa60f8cc8faef Mon Sep 17 00:00:00 2001 From: Oskar Damkjaer Date: Tue, 6 Jul 2021 15:07:48 +0200 Subject: [PATCH 02/11] Fix fullscreen for graph comp --- .../D3Visualization/components/Explorer.tsx | 4 --- .../D3Visualization/components/Graph.tsx | 2 +- .../D3Visualization/components/Inspector.tsx | 5 ++- .../D3Visualization/components/styled.tsx | 9 +++--- src/browser/modules/Frame/styled.tsx | 1 - .../Stream/CypherFrame/CypherFrame.tsx | 31 ++++++++++++------- .../CypherFrame/VisualizationView.styled.tsx | 2 -- 7 files changed, 30 insertions(+), 24 deletions(-) diff --git a/src/browser/modules/D3Visualization/components/Explorer.tsx b/src/browser/modules/D3Visualization/components/Explorer.tsx index 8fd07a2f8bf..9c6d8a03c0c 100644 --- a/src/browser/modules/D3Visualization/components/Explorer.tsx +++ b/src/browser/modules/D3Visualization/components/Explorer.tsx @@ -205,10 +205,6 @@ export class ExplorerComponent extends Component { /> ) } - const inspectingItemType = - !this.state.inspectorContracted && - ((this.state.hoveredItem && this.state.hoveredItem.type !== 'canvas') || - (this.state.selectedItem && this.state.selectedItem.type !== 'canvas')) return ( { zoomButtons() { return ( - + + ` min-height: 39px; line-height: 39px; color: ${props => props.theme.secondaryText}; font-size: 13px; - position: absolute; + position: ${props => (props.fullscreen ? 'fixed' : 'absolute')}; + z-index: ${props => (props.fullscreen ? 1 : 0)}; background-color: ${props => props.theme.frameBackground}; white-space: nowrap; overflow: hidden; @@ -337,8 +338,8 @@ export const StyledInspectorFooterStatusMessage = styled.div` font-weight: bold; ` -export const StyledZoomHolder = styled.div` - position: absolute; +export const StyledZoomHolder = styled.div<{ fullscreen: boolean }>` + position: ${props => (props.fullscreen ? 'fixed' : 'absolute')}; bottom: 39px; right: 0; padding: 6px 6px 0 6px; diff --git a/src/browser/modules/Frame/styled.tsx b/src/browser/modules/Frame/styled.tsx index 7d5fecfce05..e9c68e0a01b 100644 --- a/src/browser/modules/Frame/styled.tsx +++ b/src/browser/modules/Frame/styled.tsx @@ -65,7 +65,6 @@ export const StyledFrameBody = styled.div< flex-direction: row; width: 100%; padding: 30px 30px 10px 30px; - ${props => props.fullscreen && 'margin-bottom: 31px;'} .has-carousel &, .has-stack & { diff --git a/src/browser/modules/Stream/CypherFrame/CypherFrame.tsx b/src/browser/modules/Stream/CypherFrame/CypherFrame.tsx index 2e957765734..aa702ea0ef0 100644 --- a/src/browser/modules/Stream/CypherFrame/CypherFrame.tsx +++ b/src/browser/modules/Stream/CypherFrame/CypherFrame.tsx @@ -347,18 +347,27 @@ export class CypherFrame extends Component { /> - { - this.visElement = { svgElement, graphElement, type: 'graph' } - this.setState({ hasVis: true }) +
+ > + { + this.visElement = { svgElement, graphElement, type: 'graph' } + this.setState({ hasVis: true }) + }} + initialNodeDisplay={this.props.initialNodeDisplay} + autoComplete={this.props.autoComplete} + maxNeighbours={this.props.maxNeighbours} + /> +
) diff --git a/src/browser/modules/Stream/CypherFrame/VisualizationView.styled.tsx b/src/browser/modules/Stream/CypherFrame/VisualizationView.styled.tsx index 3b99a539769..bcf666568af 100644 --- a/src/browser/modules/Stream/CypherFrame/VisualizationView.styled.tsx +++ b/src/browser/modules/Stream/CypherFrame/VisualizationView.styled.tsx @@ -23,8 +23,6 @@ import { dim } from 'browser-styles/constants' export const StyledVisContainer = styled.div<{ fullscreen: boolean }>` width: 100%; - overflow: hidden; - ${props => (props.fullscreen ? 'padding-bottom: 39px' : null)}; height: ${props => props.fullscreen ? '100vh' From 886b8ede8b155c1a00fa385328db3750a1b1de91 Mon Sep 17 00:00:00 2001 From: Oskar Damkjaer Date: Tue, 6 Jul 2021 16:50:40 +0200 Subject: [PATCH 03/11] update snapshots --- .../CypherFrame/__snapshots__/VisualizationView.test.tsx.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/browser/modules/Stream/CypherFrame/__snapshots__/VisualizationView.test.tsx.snap b/src/browser/modules/Stream/CypherFrame/__snapshots__/VisualizationView.test.tsx.snap index 3dadb5c4dfb..daa35233302 100644 --- a/src/browser/modules/Stream/CypherFrame/__snapshots__/VisualizationView.test.tsx.snap +++ b/src/browser/modules/Stream/CypherFrame/__snapshots__/VisualizationView.test.tsx.snap @@ -5,7 +5,7 @@ exports[`Visualization renders 1`] = `
`; exports[`Visualization renders with result and escapes any HTML 1`] = `
Date: Wed, 7 Jul 2021 16:15:25 +0200 Subject: [PATCH 04/11] Re-add unrelated change --- src/browser/modules/D3Visualization/components/Explorer.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/browser/modules/D3Visualization/components/Explorer.tsx b/src/browser/modules/D3Visualization/components/Explorer.tsx index 9c6d8a03c0c..8fd07a2f8bf 100644 --- a/src/browser/modules/D3Visualization/components/Explorer.tsx +++ b/src/browser/modules/D3Visualization/components/Explorer.tsx @@ -205,6 +205,10 @@ export class ExplorerComponent extends Component { /> ) } + const inspectingItemType = + !this.state.inspectorContracted && + ((this.state.hoveredItem && this.state.hoveredItem.type !== 'canvas') || + (this.state.selectedItem && this.state.selectedItem.type !== 'canvas')) return ( Date: Wed, 7 Jul 2021 16:28:11 +0200 Subject: [PATCH 05/11] Make bottom of table readable --- src/browser/modules/Frame/styled.tsx | 1 + .../Stream/CypherFrame/CypherFrame.tsx | 32 +++++++------------ 2 files changed, 13 insertions(+), 20 deletions(-) diff --git a/src/browser/modules/Frame/styled.tsx b/src/browser/modules/Frame/styled.tsx index e9c68e0a01b..19e76eaffb2 100644 --- a/src/browser/modules/Frame/styled.tsx +++ b/src/browser/modules/Frame/styled.tsx @@ -65,6 +65,7 @@ export const StyledFrameBody = styled.div< flex-direction: row; width: 100%; padding: 30px 30px 10px 30px; + ${props => props.fullscreen && `margin-bottom: ${dim.frameStatusbarHeight}px`} .has-carousel &, .has-stack & { diff --git a/src/browser/modules/Stream/CypherFrame/CypherFrame.tsx b/src/browser/modules/Stream/CypherFrame/CypherFrame.tsx index aa702ea0ef0..cd7cd4e88f1 100644 --- a/src/browser/modules/Stream/CypherFrame/CypherFrame.tsx +++ b/src/browser/modules/Stream/CypherFrame/CypherFrame.tsx @@ -347,27 +347,19 @@ export class CypherFrame extends Component { /> -
{ + this.visElement = { svgElement, graphElement, type: 'graph' } + this.setState({ hasVis: true }) }} - > - { - this.visElement = { svgElement, graphElement, type: 'graph' } - this.setState({ hasVis: true }) - }} - initialNodeDisplay={this.props.initialNodeDisplay} - autoComplete={this.props.autoComplete} - maxNeighbours={this.props.maxNeighbours} - /> -
+ initialNodeDisplay={this.props.initialNodeDisplay} + autoComplete={this.props.autoComplete} + maxNeighbours={this.props.maxNeighbours} + /> ) From b3a79fb0249bfa221adcf1794214013846fb952c Mon Sep 17 00:00:00 2001 From: Oskar Damkjaer Date: Wed, 7 Jul 2021 16:29:00 +0200 Subject: [PATCH 06/11] Minify changes --- src/browser/modules/Frame/styled.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/browser/modules/Frame/styled.tsx b/src/browser/modules/Frame/styled.tsx index 19e76eaffb2..26d3b5d37f0 100644 --- a/src/browser/modules/Frame/styled.tsx +++ b/src/browser/modules/Frame/styled.tsx @@ -124,7 +124,7 @@ export const StyledFrameContents = styled.div` export const StyledFrameStatusbar = styled.div` border-top: ${props => props.theme.inFrameBorder}; - height: ${dim.frameStatusbarHeight}px; + height: ${dim.frameStatusbarHeight - 1}px; ${props => props.fullscreen && `position: fixed; From 543431a2b081c27a81e2bdae3e798ba2eb7748bc Mon Sep 17 00:00:00 2001 From: Oskar Damkjaer Date: Wed, 7 Jul 2021 16:34:19 +0200 Subject: [PATCH 07/11] touchups --- src/browser/modules/Frame/styled.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/browser/modules/Frame/styled.tsx b/src/browser/modules/Frame/styled.tsx index 26d3b5d37f0..fad11a4a392 100644 --- a/src/browser/modules/Frame/styled.tsx +++ b/src/browser/modules/Frame/styled.tsx @@ -49,7 +49,6 @@ z-index: 130;` export const StyledFrameBody = styled.div< FullscreenProps & { collapsed: boolean } >` - flex-grow: 1; overflow: auto; min-height: ${dim.frameBodyHeight / 2}px; max-height: ${props => { @@ -65,7 +64,7 @@ export const StyledFrameBody = styled.div< flex-direction: row; width: 100%; padding: 30px 30px 10px 30px; - ${props => props.fullscreen && `margin-bottom: ${dim.frameStatusbarHeight}px`} + ${props => props.fullscreen && `margin-bottom: 30px;`} .has-carousel &, .has-stack & { From 8ac9a8902931643dc612a96f0513189a8a6db49d Mon Sep 17 00:00:00 2001 From: Oskar Damkjaer Date: Wed, 7 Jul 2021 16:51:20 +0200 Subject: [PATCH 08/11] prevent scroll on cypher vis, as the editor pushes the vis down --- src/browser/modules/Frame/styled.tsx | 5 +++-- src/browser/modules/Stream/CypherFrame/CypherFrame.tsx | 1 + 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/browser/modules/Frame/styled.tsx b/src/browser/modules/Frame/styled.tsx index fad11a4a392..c1acbed84bd 100644 --- a/src/browser/modules/Frame/styled.tsx +++ b/src/browser/modules/Frame/styled.tsx @@ -47,9 +47,10 @@ z-index: 130;` ` export const StyledFrameBody = styled.div< - FullscreenProps & { collapsed: boolean } + FullscreenProps & { collapsed: boolean; preventOverflow?: boolean } >` - overflow: auto; + flex: 1; + overflow: ${props => (props.preventOverflow ? 'hidden' : 'auto')}; min-height: ${dim.frameBodyHeight / 2}px; max-height: ${props => { if (props.collapsed) { diff --git a/src/browser/modules/Stream/CypherFrame/CypherFrame.tsx b/src/browser/modules/Stream/CypherFrame/CypherFrame.tsx index cd7cd4e88f1..9edd34ee135 100644 --- a/src/browser/modules/Stream/CypherFrame/CypherFrame.tsx +++ b/src/browser/modules/Stream/CypherFrame/CypherFrame.tsx @@ -307,6 +307,7 @@ export class CypherFrame extends Component { data-testid="frame-loaded-contents" fullscreen={this.state.fullscreen} collapsed={this.state.collapse} + preventOverflow={this.state.openView === viewTypes.VISUALIZATION} > Date: Wed, 7 Jul 2021 17:00:16 +0200 Subject: [PATCH 09/11] simplify --- src/browser/modules/Frame/FrameTemplate.tsx | 18 +++++++++--------- src/browser/modules/Frame/styled.tsx | 12 +----------- 2 files changed, 10 insertions(+), 20 deletions(-) diff --git a/src/browser/modules/Frame/FrameTemplate.tsx b/src/browser/modules/Frame/FrameTemplate.tsx index 1293899364e..b541adb9b3d 100644 --- a/src/browser/modules/Frame/FrameTemplate.tsx +++ b/src/browser/modules/Frame/FrameTemplate.tsx @@ -134,16 +134,16 @@ function FrameTemplate({ - - {statusbar && ( - - {statusbar} - - )} + {statusbar && ( + + {statusbar} + + )} + ) } diff --git a/src/browser/modules/Frame/styled.tsx b/src/browser/modules/Frame/styled.tsx index c1acbed84bd..87cb670d5fb 100644 --- a/src/browser/modules/Frame/styled.tsx +++ b/src/browser/modules/Frame/styled.tsx @@ -65,7 +65,6 @@ export const StyledFrameBody = styled.div< flex-direction: row; width: 100%; padding: 30px 30px 10px 30px; - ${props => props.fullscreen && `margin-bottom: 30px;`} .has-carousel &, .has-stack & { @@ -125,15 +124,6 @@ export const StyledFrameContents = styled.div` export const StyledFrameStatusbar = styled.div` border-top: ${props => props.theme.inFrameBorder}; height: ${dim.frameStatusbarHeight - 1}px; - ${props => - props.fullscreen && - `position: fixed; - bottom: 0; - left: 0; - right: 0; - z-index: 2; - background-color: ${props.theme.frameBackground} - `} display: flex; flex-direction: row; flex: none; @@ -207,7 +197,7 @@ export const ContentContainer = styled.div` padding: 2px 2px 0 2px; display: flex; flex-direction: column; - max-height: 100vh; + max-height: calc(100vh - 23px); ` export const TitleBarHeader = styled.div` From afed58c5a7a3f25fe763d7bf9e7ce8b27af84712 Mon Sep 17 00:00:00 2001 From: Oskar Damkjaer Date: Mon, 9 Aug 2021 15:10:51 +0200 Subject: [PATCH 10/11] Fix default z-index --- src/browser/modules/D3Visualization/components/styled.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/browser/modules/D3Visualization/components/styled.tsx b/src/browser/modules/D3Visualization/components/styled.tsx index c4b3b92a8c9..baa8391e942 100644 --- a/src/browser/modules/D3Visualization/components/styled.tsx +++ b/src/browser/modules/D3Visualization/components/styled.tsx @@ -187,7 +187,7 @@ export const StyledStatusBar = styled.div<{ fullscreen?: boolean }>` color: ${props => props.theme.secondaryText}; font-size: 13px; position: ${props => (props.fullscreen ? 'fixed' : 'absolute')}; - z-index: ${props => (props.fullscreen ? 1 : 0)}; + z-index: ${props => (props.fullscreen ? 1 : 'auto')}; background-color: ${props => props.theme.frameBackground}; white-space: nowrap; overflow: hidden; From 089775dde9ab9624fa4bea273557b918e238eefe Mon Sep 17 00:00:00 2001 From: Oskar Damkjaer Date: Mon, 9 Aug 2021 15:42:42 +0200 Subject: [PATCH 11/11] Update snapshots --- .../CypherFrame/__snapshots__/VisualizationView.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/browser/modules/Stream/CypherFrame/__snapshots__/VisualizationView.test.tsx.snap b/src/browser/modules/Stream/CypherFrame/__snapshots__/VisualizationView.test.tsx.snap index daa35233302..702ee1ebe66 100644 --- a/src/browser/modules/Stream/CypherFrame/__snapshots__/VisualizationView.test.tsx.snap +++ b/src/browser/modules/Stream/CypherFrame/__snapshots__/VisualizationView.test.tsx.snap @@ -152,7 +152,7 @@ exports[`Visualization renders with result and escapes any HTML 1`] = `