From 7a26e3fed7e42f1c374e042368fb106c9584a1fd Mon Sep 17 00:00:00 2001 From: sulemanof Date: Fri, 13 Nov 2020 00:30:24 +0300 Subject: [PATCH 01/14] Use EuiResizableContainer --- .../vis_default_editor/public/_default.scss | 8 +-- .../public/default_editor.tsx | 66 +++++++++++-------- 2 files changed, 41 insertions(+), 33 deletions(-) diff --git a/src/plugins/vis_default_editor/public/_default.scss b/src/plugins/vis_default_editor/public/_default.scss index f189b1c9e64a1..b167dfa52d267 100644 --- a/src/plugins/vis_default_editor/public/_default.scss +++ b/src/plugins/vis_default_editor/public/_default.scss @@ -1,8 +1,10 @@ .visEditor--default { + height: 1px; flex: 1 1 auto; display: flex; @include euiBreakpoint('xs', 's', 'm') { + height: 100%; flex-direction: column; } } @@ -13,9 +15,8 @@ .visEditor__collapsibleSidebar { background: $euiColorLightestShade; - min-width: $vis-editor-sidebar-min-width; - max-width: 100%; position: relative; + display: flex; flex-shrink: 0; @include euiBreakpoint('xs', 's', 'm') { @@ -38,7 +39,7 @@ } @include euiBreakpoint('xs', 's', 'm') { - height: $euiSizeXXL; // Just enough room for the collapse button + height: $euiSizeXXL !important; // Just enough room for the collapse button width: 100% !important; } } @@ -54,7 +55,6 @@ */ .visEditor__resizer { - @include kbnResizer($euiSizeM); @include euiBreakpoint('xs', 's', 'm') { display: none; } diff --git a/src/plugins/vis_default_editor/public/default_editor.tsx b/src/plugins/vis_default_editor/public/default_editor.tsx index a7251acfdf75d..09d69a3d6bb16 100644 --- a/src/plugins/vis_default_editor/public/default_editor.tsx +++ b/src/plugins/vis_default_editor/public/default_editor.tsx @@ -22,6 +22,7 @@ import 'brace/mode/json'; import React, { useEffect, useRef, useState, useCallback } from 'react'; import { EventEmitter } from 'events'; +import { EuiResizableContainer } from '@elastic/eui'; import { EditorRenderProps } from 'src/plugins/visualize/public'; import { Vis, VisualizeEmbeddableContract } from 'src/plugins/visualizations/public'; @@ -90,35 +91,42 @@ function DefaultEditor({ ...core, }} > - - -
- - - - - - + + {(EuiResizablePanel, EuiResizableButton) => ( + <> + +
+ + + + + + + + + )} + ); From b083e4e502ef1f6af24f3867af1818a280ff681c Mon Sep 17 00:00:00 2001 From: sulemanof Date: Mon, 21 Dec 2020 17:57:52 +0300 Subject: [PATCH 02/14] Code cleanup --- src/plugins/vis_default_editor/public/_default.scss | 7 ------- src/plugins/vis_default_editor/public/default_editor.tsx | 2 +- 2 files changed, 1 insertion(+), 8 deletions(-) diff --git a/src/plugins/vis_default_editor/public/_default.scss b/src/plugins/vis_default_editor/public/_default.scss index b167dfa52d267..ab30acd9a18cd 100644 --- a/src/plugins/vis_default_editor/public/_default.scss +++ b/src/plugins/vis_default_editor/public/_default.scss @@ -17,7 +17,6 @@ background: $euiColorLightestShade; position: relative; display: flex; - flex-shrink: 0; @include euiBreakpoint('xs', 's', 'm') { // If we are on a small screen we force the editor to take 100% width. @@ -92,12 +91,6 @@ flex-basis: 100%; } - .visualize { - display: flex; - flex-direction: column; - flex: 1 1 100%; - } - .visChart { position: relative; } diff --git a/src/plugins/vis_default_editor/public/default_editor.tsx b/src/plugins/vis_default_editor/public/default_editor.tsx index 09d69a3d6bb16..f7b9bfa66aa58 100644 --- a/src/plugins/vis_default_editor/public/default_editor.tsx +++ b/src/plugins/vis_default_editor/public/default_editor.tsx @@ -26,7 +26,7 @@ import { EuiResizableContainer } from '@elastic/eui'; import { EditorRenderProps } from 'src/plugins/visualize/public'; import { Vis, VisualizeEmbeddableContract } from 'src/plugins/visualizations/public'; -import { KibanaContextProvider, PanelsContainer, Panel } from '../../kibana_react/public'; +import { KibanaContextProvider } from '../../kibana_react/public'; import { Storage } from '../../kibana_utils/public'; import { DefaultEditorSideBar } from './components/sidebar'; From 809e2517300d7832e36a9ee4dd25d5e672097876 Mon Sep 17 00:00:00 2001 From: sulemanof Date: Thu, 24 Dec 2020 13:44:08 +0300 Subject: [PATCH 03/14] Memoize the sidebar for performance boost --- .../public/components/sidebar/sidebar.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/plugins/vis_default_editor/public/components/sidebar/sidebar.tsx b/src/plugins/vis_default_editor/public/components/sidebar/sidebar.tsx index d6b69a769e0a3..011af3f0a5e22 100644 --- a/src/plugins/vis_default_editor/public/components/sidebar/sidebar.tsx +++ b/src/plugins/vis_default_editor/public/components/sidebar/sidebar.tsx @@ -17,7 +17,14 @@ * under the License. */ -import React, { useMemo, useState, useCallback, KeyboardEventHandler, useEffect } from 'react'; +import React, { + memo, + useMemo, + useState, + useCallback, + KeyboardEventHandler, + useEffect, +} from 'react'; import { isEqual } from 'lodash'; import { i18n } from '@kbn/i18n'; import { keys, EuiButtonIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; @@ -50,7 +57,7 @@ interface DefaultEditorSideBarProps { timeRange: TimeRange; } -function DefaultEditorSideBar({ +function DefaultEditorSideBarComponent({ embeddableHandler, isCollapsed, onClickCollapse, @@ -247,4 +254,6 @@ function DefaultEditorSideBar({ ); } +const DefaultEditorSideBar = memo(DefaultEditorSideBarComponent); + export { DefaultEditorSideBar }; From c4b606eb91bf33b1cba636e3b26a173b7066c415 Mon Sep 17 00:00:00 2001 From: sulemanof Date: Thu, 24 Dec 2020 13:53:46 +0300 Subject: [PATCH 04/14] Prevent mouseLeave event --- .../vis_default_editor/public/default_editor.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/plugins/vis_default_editor/public/default_editor.tsx b/src/plugins/vis_default_editor/public/default_editor.tsx index f7b9bfa66aa58..7c433863ee4f7 100644 --- a/src/plugins/vis_default_editor/public/default_editor.tsx +++ b/src/plugins/vis_default_editor/public/default_editor.tsx @@ -58,6 +58,14 @@ function DefaultEditor({ setIsCollapsed((value) => !value); }, []); + /** + * The empty callback is in place to prevent resetting the dragging state of the resize button. + * The mouseLeave is triggered since a visualization is rendered through another call of "ReactDOM.render()"" in expressions, + * using the "visRef" node reference. + * Here is the existing React issue: https://github.com/facebook/react/issues/17064 + */ + const onEditorMouseLeave = useCallback(() => {}, []); + useEffect(() => { if (!visRef.current) { return; @@ -91,7 +99,7 @@ function DefaultEditor({ ...core, }} > - + {(EuiResizablePanel, EuiResizableButton) => ( <> Date: Mon, 28 Dec 2020 14:18:21 +0300 Subject: [PATCH 05/14] Downgrade eui to 30.6.0 --- package.json | 2 +- src/plugins/vis_default_editor/public/_default.scss | 4 ---- src/plugins/vis_default_editor/public/default_editor.tsx | 1 + yarn.lock | 8 ++++---- 4 files changed, 6 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 49787bb8ab34e..985998e54cb88 100644 --- a/package.json +++ b/package.json @@ -102,7 +102,7 @@ "@elastic/datemath": "link:packages/elastic-datemath", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@^8.0.0-canary", "@elastic/ems-client": "7.11.0", - "@elastic/eui": "31.0.0", + "@elastic/eui": "30.6.0", "@elastic/filesaver": "1.1.2", "@elastic/good": "^9.0.1-kibana3", "@elastic/node-crypto": "1.2.1", diff --git a/src/plugins/vis_default_editor/public/_default.scss b/src/plugins/vis_default_editor/public/_default.scss index ab30acd9a18cd..3016157dbd4da 100644 --- a/src/plugins/vis_default_editor/public/_default.scss +++ b/src/plugins/vis_default_editor/public/_default.scss @@ -22,10 +22,6 @@ // If we are on a small screen we force the editor to take 100% width. width: 100% !important; } - - @include euiBreakpoint('l', 'xl') { - max-width: 75%; - } } // !importants on width are required to override resizable panel inline widths diff --git a/src/plugins/vis_default_editor/public/default_editor.tsx b/src/plugins/vis_default_editor/public/default_editor.tsx index 7c433863ee4f7..469fca3ce4950 100644 --- a/src/plugins/vis_default_editor/public/default_editor.tsx +++ b/src/plugins/vis_default_editor/public/default_editor.tsx @@ -105,6 +105,7 @@ function DefaultEditor({
diff --git a/yarn.lock b/yarn.lock index 6fa3ea09731b3..de9efb26c384b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1439,10 +1439,10 @@ resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314" integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ== -"@elastic/eui@31.0.0": - version "31.0.0" - resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-31.0.0.tgz#7d17386c04a0ad343d70c3652902fcd3f46ed337" - integrity sha512-oj63HpQQKg/Cgwz5B0ZBQCkcgZiEdQzBT9PbmEiR/VRz5P0WqJpgZPyIF7jiFaFlGP1a9hPjkUTo+ramWNCpiw== +"@elastic/eui@30.6.0": + version "30.6.0" + resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-30.6.0.tgz#6653223223f52407ac05303825d9bd08382df1d5" + integrity sha512-40Jiy54MpJAx3lD3NSZZLkMkVySwKpX6RxIKnvT3somE95pwIjXrWB688m2nL2g05y7kNhjrhwfdctVzNXZENA== dependencies: "@types/chroma-js" "^2.0.0" "@types/lodash" "^4.14.160" From 82d57a7166e60d438e0765833ab4284a5374825c Mon Sep 17 00:00:00 2001 From: sulemanof Date: Mon, 28 Dec 2020 15:27:27 +0300 Subject: [PATCH 06/14] Revert eui downgrade --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 985998e54cb88..49787bb8ab34e 100644 --- a/package.json +++ b/package.json @@ -102,7 +102,7 @@ "@elastic/datemath": "link:packages/elastic-datemath", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@^8.0.0-canary", "@elastic/ems-client": "7.11.0", - "@elastic/eui": "30.6.0", + "@elastic/eui": "31.0.0", "@elastic/filesaver": "1.1.2", "@elastic/good": "^9.0.1-kibana3", "@elastic/node-crypto": "1.2.1", diff --git a/yarn.lock b/yarn.lock index de9efb26c384b..6fa3ea09731b3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1439,10 +1439,10 @@ resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314" integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ== -"@elastic/eui@30.6.0": - version "30.6.0" - resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-30.6.0.tgz#6653223223f52407ac05303825d9bd08382df1d5" - integrity sha512-40Jiy54MpJAx3lD3NSZZLkMkVySwKpX6RxIKnvT3somE95pwIjXrWB688m2nL2g05y7kNhjrhwfdctVzNXZENA== +"@elastic/eui@31.0.0": + version "31.0.0" + resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-31.0.0.tgz#7d17386c04a0ad343d70c3652902fcd3f46ed337" + integrity sha512-oj63HpQQKg/Cgwz5B0ZBQCkcgZiEdQzBT9PbmEiR/VRz5P0WqJpgZPyIF7jiFaFlGP1a9hPjkUTo+ramWNCpiw== dependencies: "@types/chroma-js" "^2.0.0" "@types/lodash" "^4.14.160" From 971b2b3243bb3efd74262e91d93ee61d38b14980 Mon Sep 17 00:00:00 2001 From: sulemanof Date: Mon, 28 Dec 2020 17:10:07 +0300 Subject: [PATCH 07/14] Update styles --- .../vis_default_editor/public/_default.scss | 22 ++++++++++++------- .../vis_default_editor/public/_sidebar.scss | 8 ++----- .../public/default_editor.tsx | 15 ++++++++++--- .../vis_default_editor/public/index.scss | 2 -- 4 files changed, 28 insertions(+), 19 deletions(-) diff --git a/src/plugins/vis_default_editor/public/_default.scss b/src/plugins/vis_default_editor/public/_default.scss index 3016157dbd4da..beff03579c97a 100644 --- a/src/plugins/vis_default_editor/public/_default.scss +++ b/src/plugins/vis_default_editor/public/_default.scss @@ -4,7 +4,6 @@ display: flex; @include euiBreakpoint('xs', 's', 'm') { - height: 100%; flex-direction: column; } } @@ -14,9 +13,8 @@ */ .visEditor__collapsibleSidebar { - background: $euiColorLightestShade; - position: relative; display: flex; + flex: 1 0 auto; @include euiBreakpoint('xs', 's', 'm') { // If we are on a small screen we force the editor to take 100% width. @@ -31,6 +29,7 @@ .visEditorSidebar { display: none; + padding-left: 0; } @include euiBreakpoint('xs', 's', 'm') { @@ -63,17 +62,24 @@ * Canvas area */ -.visEditor__visualization { - display: flex; - flex: 1 1 auto; // Fixes IE bug: the editor overflows a visualization on small screens - overflow: hidden; - +.visEditor__visualization__wrapper { @include euiBreakpoint('xs', 's', 'm') { // If we are on a small screen we force the visualization to take 100% width. width: 100% !important; + height: 100% !important; } } +.visEditor__visualization__wrapper-expanded { + width: 100% !important; +} + +.visEditor__visualization { + display: flex; + flex: 1 1 auto; // Fixes IE bug: the editor overflows a visualization on small screens + overflow: hidden; +} + .visEditor__canvas { background-color: $euiColorEmptyShade; display: flex; diff --git a/src/plugins/vis_default_editor/public/_sidebar.scss b/src/plugins/vis_default_editor/public/_sidebar.scss index 42f7c4e6a892c..ef87cb8ce47a4 100644 --- a/src/plugins/vis_default_editor/public/_sidebar.scss +++ b/src/plugins/vis_default_editor/public/_sidebar.scss @@ -3,12 +3,8 @@ // .visEditorSidebar { - min-width: $vis-editor-sidebar-min-width; - - // a hack for IE, issue: https://github.com/elastic/kibana/issues/66586 - > .visEditorSidebar__formWrapper { - flex-basis: auto; - } + height: 100%; + padding-left: $euiSizeS; } .visEditorSidebar__form { diff --git a/src/plugins/vis_default_editor/public/default_editor.tsx b/src/plugins/vis_default_editor/public/default_editor.tsx index 469fca3ce4950..12dc1012cf20e 100644 --- a/src/plugins/vis_default_editor/public/default_editor.tsx +++ b/src/plugins/vis_default_editor/public/default_editor.tsx @@ -106,6 +106,12 @@ function DefaultEditor({ className="visEditor__visualization" initialSize={100 - editorInitialWidth} minSize="25%" + paddingSize="none" + wrapperProps={{ + className: `visEditor__visualization__wrapper ${ + isCollapsed ? 'visEditor__visualization__wrapper-expanded' : '' + }`, + }} >
@@ -115,11 +121,14 @@ function DefaultEditor({ /> Date: Mon, 28 Dec 2020 17:11:06 +0300 Subject: [PATCH 08/14] Render embeddable after a timeout --- .../public/default_editor.tsx | 24 ++++++++++++------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/src/plugins/vis_default_editor/public/default_editor.tsx b/src/plugins/vis_default_editor/public/default_editor.tsx index 12dc1012cf20e..675ddf8c4d1ba 100644 --- a/src/plugins/vis_default_editor/public/default_editor.tsx +++ b/src/plugins/vis_default_editor/public/default_editor.tsx @@ -53,6 +53,7 @@ function DefaultEditor({ }) { const visRef = useRef(null); const [isCollapsed, setIsCollapsed] = useState(false); + const [isEmbeddableRendered, setIsEmbeddableRendered] = useState(false); const onClickCollapse = useCallback(() => { setIsCollapsed((value) => !value); @@ -71,21 +72,26 @@ function DefaultEditor({ return; } - embeddableHandler.render(visRef.current); setTimeout(() => { - eventEmitter.emit('embeddableRendered'); - }); + embeddableHandler.render(visRef.current!); + setIsEmbeddableRendered(true); + setTimeout(() => { + eventEmitter.emit('embeddableRendered'); + }); + }, 300); return () => embeddableHandler.destroy(); }, [embeddableHandler, eventEmitter]); useEffect(() => { - embeddableHandler.updateInput({ - timeRange, - filters, - query, - }); - }, [embeddableHandler, timeRange, filters, query]); + if (isEmbeddableRendered) { + embeddableHandler.updateInput({ + timeRange, + filters, + query, + }); + } + }, [isEmbeddableRendered, embeddableHandler, timeRange, filters, query]); const editorInitialWidth = getInitialWidth(vis.type.editorConfig.defaultSize); From fa7d042f46672053dae124978c0b222b2fd2bbb0 Mon Sep 17 00:00:00 2001 From: sulemanof Date: Tue, 29 Dec 2020 12:54:27 +0300 Subject: [PATCH 09/14] Fix printing --- x-pack/plugins/reporting/server/lib/layouts/preserve_layout.css | 2 +- x-pack/plugins/reporting/server/lib/layouts/print.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/reporting/server/lib/layouts/preserve_layout.css b/x-pack/plugins/reporting/server/lib/layouts/preserve_layout.css index 35590df90fbb9..86183694330e2 100644 --- a/x-pack/plugins/reporting/server/lib/layouts/preserve_layout.css +++ b/x-pack/plugins/reporting/server/lib/layouts/preserve_layout.css @@ -55,7 +55,7 @@ discover-app .discover-table-footer { /* hide unusable controls * !important is required to override resizable panel inline display */ -.visEditor__content .visEditor--default > :not(.visEditor__visualization) { +.visEditor__content .visEditor--default > :not(.visEditor__visualization__wrapper) { display: none !important; } diff --git a/x-pack/plugins/reporting/server/lib/layouts/print.css b/x-pack/plugins/reporting/server/lib/layouts/print.css index c47c8de50f9e1..fa963ac72ab41 100644 --- a/x-pack/plugins/reporting/server/lib/layouts/print.css +++ b/x-pack/plugins/reporting/server/lib/layouts/print.css @@ -54,7 +54,7 @@ discover-app .discover-table-footer { /* hide unusable controls * !important is required to override resizable panel inline display */ -.visEditor__content .visEditor--default > :not(.visEditor__visualization) { +.visEditor__content .visEditor--default > :not(.visEditor__visualization__wrapper) { display: none !important; } /** THIS IS FOR TSVB UNTIL REFACTOR **/ From 6cc8a36de1a81823471ef2d0de83b32b8661f746 Mon Sep 17 00:00:00 2001 From: sulemanof Date: Tue, 29 Dec 2020 12:55:06 +0300 Subject: [PATCH 10/14] Fix resizer functional test --- test/functional/page_objects/visualize_editor_page.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/functional/page_objects/visualize_editor_page.ts b/test/functional/page_objects/visualize_editor_page.ts index 18573c5084618..493b03dcab2e2 100644 --- a/test/functional/page_objects/visualize_editor_page.ts +++ b/test/functional/page_objects/visualize_editor_page.ts @@ -307,7 +307,7 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP } public async sizeUpEditor() { - const resizerPanel = await testSubjects.find('splitPanelResizer'); + const resizerPanel = await testSubjects.find('euiResizableButton'); // Drag panel 100 px left await browser.dragAndDrop({ location: resizerPanel }, { location: { x: -100, y: 0 } }); } From fdbec56cd2b4d2644e049438b5f307aa5ab1d72a Mon Sep 17 00:00:00 2001 From: sulemanof Date: Tue, 29 Dec 2020 13:26:50 +0300 Subject: [PATCH 11/14] Create an explicit layout breakpoint --- .../vis_default_editor/public/_default.scss | 62 +++++++++---------- .../public/components/sidebar/sidebar.tsx | 2 +- 2 files changed, 29 insertions(+), 35 deletions(-) diff --git a/src/plugins/vis_default_editor/public/_default.scss b/src/plugins/vis_default_editor/public/_default.scss index beff03579c97a..3b2c77c41870f 100644 --- a/src/plugins/vis_default_editor/public/_default.scss +++ b/src/plugins/vis_default_editor/public/_default.scss @@ -2,27 +2,13 @@ height: 1px; flex: 1 1 auto; display: flex; - - @include euiBreakpoint('xs', 's', 'm') { - flex-direction: column; - } } /** * Collapsible sidebar container */ -.visEditor__collapsibleSidebar { - display: flex; - flex: 1 0 auto; - - @include euiBreakpoint('xs', 's', 'm') { - // If we are on a small screen we force the editor to take 100% width. - width: 100% !important; - } -} - -// !importants on width are required to override resizable panel inline widths +// !importants on width and height are required to override resizable panel inline widths .visEditor__collapsibleSidebar-isClosed { min-width: 0; width: $euiSizeXL !important; // Just enough room for the collapse button @@ -31,11 +17,6 @@ display: none; padding-left: 0; } - - @include euiBreakpoint('xs', 's', 'm') { - height: $euiSizeXXL !important; // Just enough room for the collapse button - width: 100% !important; - } } .visEditor__collapsibleSidebarButton { @@ -48,12 +29,6 @@ * Resizer */ -.visEditor__resizer { - @include euiBreakpoint('xs', 's', 'm') { - display: none; - } -} - .visEditor__resizer-isHidden { display: none; } @@ -62,14 +37,6 @@ * Canvas area */ -.visEditor__visualization__wrapper { - @include euiBreakpoint('xs', 's', 'm') { - // If we are on a small screen we force the visualization to take 100% width. - width: 100% !important; - height: 100% !important; - } -} - .visEditor__visualization__wrapper-expanded { width: 100% !important; } @@ -97,3 +64,30 @@ position: relative; } } + +/** + * If we are on a small screen we change the editor layout + */ +@include euiBreakpoint('xs', 's', 'm') { + .visEditor--default { + flex-direction: column; // change the editor direction to column + } + + .visEditor__collapsibleSidebar { + width: 100% !important; // force the editor to take 100% width + } + + .visEditor__collapsibleSidebar-isClosed { + height: $euiSizeXXL !important; // Just enough room for the collapse button + } + + .visEditor__resizer { + display: none; // hide the resizer button + } + + .visEditor__visualization__wrapper { + // force the visualization to take 100% width and height. + width: 100% !important; + height: 100% !important; + } +} diff --git a/src/plugins/vis_default_editor/public/components/sidebar/sidebar.tsx b/src/plugins/vis_default_editor/public/components/sidebar/sidebar.tsx index 011af3f0a5e22..d9c3b00a1d48f 100644 --- a/src/plugins/vis_default_editor/public/components/sidebar/sidebar.tsx +++ b/src/plugins/vis_default_editor/public/components/sidebar/sidebar.tsx @@ -191,7 +191,7 @@ function DefaultEditorSideBarComponent({ gutterSize="none" responsive={false} > - +
Date: Mon, 25 Jan 2021 17:28:36 +0300 Subject: [PATCH 12/14] Remove extra code --- .../public/default_editor.tsx | 24 +++++++------------ 1 file changed, 9 insertions(+), 15 deletions(-) diff --git a/src/plugins/vis_default_editor/public/default_editor.tsx b/src/plugins/vis_default_editor/public/default_editor.tsx index a21b08d89aecc..b63137b7de4de 100644 --- a/src/plugins/vis_default_editor/public/default_editor.tsx +++ b/src/plugins/vis_default_editor/public/default_editor.tsx @@ -42,7 +42,6 @@ function DefaultEditor({ }) { const visRef = useRef(null); const [isCollapsed, setIsCollapsed] = useState(false); - const [isEmbeddableRendered, setIsEmbeddableRendered] = useState(false); const onClickCollapse = useCallback(() => { setIsCollapsed((value) => !value); @@ -61,26 +60,21 @@ function DefaultEditor({ return; } + embeddableHandler.render(visRef.current); setTimeout(() => { - embeddableHandler.render(visRef.current!); - setIsEmbeddableRendered(true); - setTimeout(() => { - eventEmitter.emit('embeddableRendered'); - }); - }, 300); + eventEmitter.emit('embeddableRendered'); + }); return () => embeddableHandler.destroy(); }, [embeddableHandler, eventEmitter]); useEffect(() => { - if (isEmbeddableRendered) { - embeddableHandler.updateInput({ - timeRange, - filters, - query, - }); - } - }, [isEmbeddableRendered, embeddableHandler, timeRange, filters, query]); + embeddableHandler.updateInput({ + timeRange, + filters, + query, + }); + }, [embeddableHandler, timeRange, filters, query]); const editorInitialWidth = getInitialWidth(vis.type.editorConfig.defaultSize); From c7ab1565fc071ffde39d8dec8243a847bcf60709 Mon Sep 17 00:00:00 2001 From: Daniil Suleiman Date: Mon, 15 Feb 2021 15:46:44 +0300 Subject: [PATCH 13/14] Update layout styles --- src/plugins/vis_default_editor/public/_default.scss | 4 ++++ src/plugins/vis_default_editor/public/_sidebar.scss | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/src/plugins/vis_default_editor/public/_default.scss b/src/plugins/vis_default_editor/public/_default.scss index 3b2c77c41870f..b095ed922a24b 100644 --- a/src/plugins/vis_default_editor/public/_default.scss +++ b/src/plugins/vis_default_editor/public/_default.scss @@ -8,6 +8,10 @@ * Collapsible sidebar container */ +.visEditor__collapsibleSidebar { + flex-grow: 1; +} + // !importants on width and height are required to override resizable panel inline widths .visEditor__collapsibleSidebar-isClosed { min-width: 0; diff --git a/src/plugins/vis_default_editor/public/_sidebar.scss b/src/plugins/vis_default_editor/public/_sidebar.scss index 930585b1d734f..0586b6809bcc0 100644 --- a/src/plugins/vis_default_editor/public/_sidebar.scss +++ b/src/plugins/vis_default_editor/public/_sidebar.scss @@ -5,6 +5,10 @@ .visEditorSidebar { height: 100%; padding-left: $euiSizeS; + + @include euiBreakpoint('xs', 's', 'm') { + padding-left: 0; + } } .visEditorSidebar__form { From 059165c62420fd80c1f5846edeccd00606769053 Mon Sep 17 00:00:00 2001 From: Daniil Suleiman Date: Mon, 22 Feb 2021 14:49:22 +0300 Subject: [PATCH 14/14] Add a note of using height: 1px --- src/plugins/vis_default_editor/public/_default.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/plugins/vis_default_editor/public/_default.scss b/src/plugins/vis_default_editor/public/_default.scss index b095ed922a24b..c412b9d915e55 100644 --- a/src/plugins/vis_default_editor/public/_default.scss +++ b/src/plugins/vis_default_editor/public/_default.scss @@ -1,4 +1,5 @@ .visEditor--default { + // height: 1px is in place to make editor children take their height in the parent height: 1px; flex: 1 1 auto; display: flex;