From db2ce976f14efc3f588075f654baa7f065e3177b Mon Sep 17 00:00:00 2001 From: Lijiao Date: Thu, 5 Nov 2020 09:58:53 +0000 Subject: [PATCH 1/4] refactor log --- ts/webui/src/App.tsx | 4 +- ts/webui/src/components/NavCon.tsx | 47 +++---------- ...ntPanel.tsx => ExperimentSummaryPanel.tsx} | 57 +++++++--------- ts/webui/src/components/modals/LogPanel.tsx | 33 ++++----- .../components/public-child/MonacoEditor.tsx | 4 +- .../public-child/config/TrialConfigButton.tsx | 27 -------- .../components/slideNav/IconButtonTemplet.tsx | 29 ++++++++ .../src/components/slideNav/SlideNavBtns.tsx | 40 +++++++++++ .../config => slideNav}/TrialConfigPanel.tsx | 68 ++++++++++--------- ts/webui/src/static/function.ts | 10 ++- ts/webui/src/static/style/logDrawer.scss | 47 ++++++++++--- .../src/static/style/overview/config.scss | 30 -------- ts/webui/src/static/style/overview/panel.scss | 64 +++++++++++++++++ 13 files changed, 269 insertions(+), 191 deletions(-) rename ts/webui/src/components/modals/{ExperimentPanel.tsx => ExperimentSummaryPanel.tsx} (64%) delete mode 100644 ts/webui/src/components/public-child/config/TrialConfigButton.tsx create mode 100644 ts/webui/src/components/slideNav/IconButtonTemplet.tsx create mode 100644 ts/webui/src/components/slideNav/SlideNavBtns.tsx rename ts/webui/src/components/{public-child/config => slideNav}/TrialConfigPanel.tsx (60%) delete mode 100644 ts/webui/src/static/style/overview/config.scss create mode 100644 ts/webui/src/static/style/overview/panel.scss diff --git a/ts/webui/src/App.tsx b/ts/webui/src/App.tsx index e2a2489cc7..daaf9be1ce 100644 --- a/ts/webui/src/App.tsx +++ b/ts/webui/src/App.tsx @@ -4,7 +4,7 @@ import { COLUMN } from './static/const'; import { EXPERIMENT, TRIALS } from './static/datamodel'; import NavCon from './components/NavCon'; import MessageInfo from './components/modals/MessageInfo'; -import { TrialConfigButton } from './components/public-child/config/TrialConfigButton'; +import { SlideNavBtns } from './components/slideNav/SlideNavBtns'; import './App.scss'; interface AppState { @@ -164,7 +164,7 @@ class App extends React.Component<{}, AppState> { updateOverviewPage: this.updateOverviewPage }} > - + {/* if api has error field, show error message */} {errorList.map( diff --git a/ts/webui/src/components/NavCon.tsx b/ts/webui/src/components/NavCon.tsx index b1bc216fae..f78b250f04 100644 --- a/ts/webui/src/components/NavCon.tsx +++ b/ts/webui/src/components/NavCon.tsx @@ -10,9 +10,8 @@ import { IStackTokens, IStackStyles } from '@fluentui/react'; -import LogPanel from './modals/LogPanel'; -import ExperimentPanel from './modals/ExperimentPanel'; -import { downLoadIcon, infoIconAbout, timeIcon, disableUpdates, requency, closeTimer } from './buttons/Icon'; +import ExperimentPanel from './modals/ExperimentSummaryPanel'; +import { infoIconAbout, timeIcon, disableUpdates, requency, closeTimer } from './buttons/Icon'; import { OVERVIEWTABS, DETAILTABS, NNILOGO } from './stateless-component/NNItabs'; import { EXPERIMENT } from '../static/datamodel'; import '../static/style/nav/nav.scss'; @@ -36,7 +35,6 @@ interface NavState { menuVisible: boolean; navBarVisible: boolean; isdisabledFresh: boolean; - isvisibleLogDrawer: boolean; isvisibleExperimentDrawer: boolean; refreshText: string; refreshFrequency: number | string; @@ -55,7 +53,6 @@ class NavCon extends React.Component { menuVisible: false, navBarVisible: false, isdisabledFresh: false, - isvisibleLogDrawer: false, // download button (nnimanager·dispatcher) click -> drawer isvisibleExperimentDrawer: false, refreshText: 'Auto refresh', refreshFrequency: 10 @@ -67,16 +64,6 @@ class NavCon extends React.Component { this.setState({ isvisibleExperimentDrawer: true }); }; - // to see & download dispatcher | nnimanager log - showDispatcherLog = (): void => { - this.setState({ isvisibleLogDrawer: true }); - }; - - // close log drawer (nnimanager.dispatcher) - closeLogDrawer = (): void => { - this.setState({ isvisibleLogDrawer: false }); - }; - // close download experiment parameters drawer closeExpDrawer = (): void => { this.setState({ isvisibleExperimentDrawer: false }); @@ -121,7 +108,7 @@ class NavCon extends React.Component { } render(): React.ReactNode { - const { isvisibleLogDrawer, isvisibleExperimentDrawer, version, refreshText, refreshFrequency } = this.state; + const { isvisibleExperimentDrawer, version, refreshText, refreshFrequency } = this.state; const aboutProps: IContextualMenuProps = { items: [ { @@ -168,12 +155,15 @@ class NavCon extends React.Component { />
{refreshFrequency}
- + + {/* */} - {/* the drawer for dispatcher & nnimanager log message */} - {isvisibleLogDrawer && } {isvisibleExperimentDrawer && ( )} @@ -181,25 +171,6 @@ class NavCon extends React.Component { ); } - // view and download experiment [log & experiment result] - private menuProps: IContextualMenuProps = { - items: [ - { - key: 'experiment', - text: 'Experiment summary', - iconProps: { iconName: 'ShowResults' }, - onClick: this.showExpcontent - }, - { - key: 'logfiles', - text: 'Log files', - iconProps: { iconName: 'FilePDB' }, - onClick: this.showDispatcherLog - } - ], - directionalHintFixed: true - }; - private refreshProps: IContextualMenuProps = { items: [ { diff --git a/ts/webui/src/components/modals/ExperimentPanel.tsx b/ts/webui/src/components/modals/ExperimentSummaryPanel.tsx similarity index 64% rename from ts/webui/src/components/modals/ExperimentPanel.tsx rename to ts/webui/src/components/modals/ExperimentSummaryPanel.tsx index 11b45abf11..38b2f9533a 100644 --- a/ts/webui/src/components/modals/ExperimentPanel.tsx +++ b/ts/webui/src/components/modals/ExperimentSummaryPanel.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import { downFile } from '../../static/function'; -import { Stack, PrimaryButton, DefaultButton, Panel, StackItem, Pivot, PivotItem } from '@fluentui/react'; +import { Stack, PrimaryButton, DefaultButton, Panel, StackItem } from '@fluentui/react'; import { DRAWEROPTION } from '../../static/const'; import { EXPERIMENT, TRIALS } from '../../static/datamodel'; +import { caclMonacoEditorHeight } from '../../static/function'; import MonacoEditor from 'react-monaco-editor'; import '../../static/style/logDrawer.scss'; @@ -88,39 +89,29 @@ class ExperimentDrawer extends React.Component { render(): React.ReactNode { const { closeExpDrawer } = this.props; const { experiment, expDrawerHeight } = this.state; + const monacoEditorHeight = caclMonacoEditorHeight(expDrawerHeight); + return ( - - - - -
- -
- - - - - - - - - - - - + +
+
Experiment summary
+ + + + + + + + + +
+ ); } } diff --git a/ts/webui/src/components/modals/LogPanel.tsx b/ts/webui/src/components/modals/LogPanel.tsx index 1b4c7a9cf3..537ae329e7 100644 --- a/ts/webui/src/components/modals/LogPanel.tsx +++ b/ts/webui/src/components/modals/LogPanel.tsx @@ -29,7 +29,7 @@ class LogDrawer extends React.Component { nniManagerLogStr: null, dispatcherLogStr: null, isLoading: true, - logDrawerHeight: window.innerHeight - 48 + logDrawerHeight: window.innerHeight }; } @@ -64,7 +64,7 @@ class LogDrawer extends React.Component { ); setLogDrawerHeight = (): void => { - this.setState(() => ({ logDrawerHeight: window.innerHeight - 48 })); + this.setState(() => ({ logDrawerHeight: window.innerHeight })); }; async componentDidMount(): Promise { @@ -80,7 +80,8 @@ class LogDrawer extends React.Component { render(): React.ReactNode { const { closeDrawer, activeTab } = this.props; const { nniManagerLogStr, dispatcherLogStr, isLoading, logDrawerHeight } = this.state; - + // tab[44] + tab[PaddingTop: 12] + button[32] + button[margin-top: 45, -bottom: 7] + fluent-panel own paddingBottom[20] + title-border[2] + const monacoHeight = logDrawerHeight - 160 - 2; return ( { isLightDismiss={true} onLightDismissClick={closeDrawer} > -
- - {/* */} - + + +
@@ -108,13 +107,15 @@ class LogDrawer extends React.Component { - - - {/* */} +
+ + + {/* */} +
@@ -124,9 +125,9 @@ class LogDrawer extends React.Component { - - -
+
+ + ); diff --git a/ts/webui/src/components/public-child/MonacoEditor.tsx b/ts/webui/src/components/public-child/MonacoEditor.tsx index 850a01ad1c..5e5a00cf59 100644 --- a/ts/webui/src/components/public-child/MonacoEditor.tsx +++ b/ts/webui/src/components/public-child/MonacoEditor.tsx @@ -27,7 +27,7 @@ class MonacoHTML extends React.Component { render(): React.ReactNode { const { content, loading, height } = this.props; return ( -
+ {loading ? ( { ) : ( )} -
+ ); } } diff --git a/ts/webui/src/components/public-child/config/TrialConfigButton.tsx b/ts/webui/src/components/public-child/config/TrialConfigButton.tsx deleted file mode 100644 index 3c5742db1f..0000000000 --- a/ts/webui/src/components/public-child/config/TrialConfigButton.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React, { useState, useCallback } from 'react'; -import { DefaultButton, Stack } from '@fluentui/react'; -import TrialConfigPanel from './TrialConfigPanel'; -import '../../../static/style/overview/config.scss'; - -export const TrialConfigButton = (): any => { - const [isShowConfigPanel, setShowConfigPanle] = useState(false); - const [activeTab, setActiveTab] = useState('1'); - const hideConfigPanel = useCallback(() => setShowConfigPanle(false), []); - const showTrialConfigpPanel = useCallback(() => { - setShowConfigPanle(true); - setActiveTab('config'); - }, []); - const showSearchSpacePanel = useCallback(() => { - setShowConfigPanle(true); - setActiveTab('search space'); - }, []); - return ( - - - - - - {isShowConfigPanel && } - - ); -}; diff --git a/ts/webui/src/components/slideNav/IconButtonTemplet.tsx b/ts/webui/src/components/slideNav/IconButtonTemplet.tsx new file mode 100644 index 0000000000..e5e98532e3 --- /dev/null +++ b/ts/webui/src/components/slideNav/IconButtonTemplet.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { DefaultButton, Icon } from '@fluentui/react'; + +interface ButtonProps { + icon: string; + btuName: string; + event: any; +} +class IconButtonTemplet extends React.Component { + constructor(props: ButtonProps) { + super(props); + } + + render(): React.ReactNode { + const { icon, btuName, event } = this.props; + return ( +
+ + + + + + {btuName} + +
+ ); + } +} +export default IconButtonTemplet; diff --git a/ts/webui/src/components/slideNav/SlideNavBtns.tsx b/ts/webui/src/components/slideNav/SlideNavBtns.tsx new file mode 100644 index 0000000000..810ab29921 --- /dev/null +++ b/ts/webui/src/components/slideNav/SlideNavBtns.tsx @@ -0,0 +1,40 @@ +import React, { useState, useCallback } from 'react'; +import { Stack } from '@fluentui/react'; +import TrialConfigPanel from './TrialConfigPanel'; +import LogPanel from '../modals/LogPanel'; +import IconButtonTemplate from './IconButtonTemplet'; +import '../../static/style/overview/panel.scss'; + +export const SlideNavBtns = (): any => { + const [isShowConfigPanel, setShowConfigPanle] = useState(false); + const [isShowLogPanel, setShowLogPanel] = useState(false); + const [panelName, setPanelName] = useState(''); + const hideConfigPanel = useCallback(() => setShowConfigPanle(false), []); + const showTrialConfigpPanel = useCallback(() => { + setShowConfigPanle(true); + setPanelName('config'); + }, []); + const showSearchSpacePanel = useCallback(() => { + setShowConfigPanle(true); + setPanelName('search space'); + }, []); + const showLogPanel = useCallback(() => { + setShowLogPanel(true); + }, []); + const hideLogPanel = useCallback(() => { + setShowLogPanel(false); + }, []); + return ( + // right side nav buttons + + + + + + + {isShowConfigPanel && } + {/* the panel for dispatcher & nnimanager log message */} + {isShowLogPanel && } + + ); +}; diff --git a/ts/webui/src/components/public-child/config/TrialConfigPanel.tsx b/ts/webui/src/components/slideNav/TrialConfigPanel.tsx similarity index 60% rename from ts/webui/src/components/public-child/config/TrialConfigPanel.tsx rename to ts/webui/src/components/slideNav/TrialConfigPanel.tsx index 24ac550ba4..8951107c42 100644 --- a/ts/webui/src/components/public-child/config/TrialConfigPanel.tsx +++ b/ts/webui/src/components/slideNav/TrialConfigPanel.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; -import { Stack, Panel, Pivot, PivotItem, PrimaryButton } from '@fluentui/react'; -import { EXPERIMENT } from '../../../static/datamodel'; +import { Stack, Panel, PrimaryButton } from '@fluentui/react'; +import { EXPERIMENT } from '../../static/datamodel'; import MonacoEditor from 'react-monaco-editor'; -import { MONACO } from '../../../static/const'; -import { AppContext } from '../../../App'; -import { convertDuration, convertTimeAsUnit } from '../../../static/function'; -import { prettyStringify } from '../../../static/json_util'; +import { MONACO } from '../../static/const'; +import { AppContext } from '../../App'; +import { convertDuration, convertTimeAsUnit, caclMonacoEditorHeight } from '../../static/function'; +import { prettyStringify } from '../../static/json_util'; import lodash from 'lodash'; -import '../../../static/style/logDrawer.scss'; +import '../../static/style/logDrawer.scss'; interface LogDrawerProps { hideConfigPanel: () => void; - activeTab?: string; + panelName: string; } interface LogDrawerState { @@ -19,6 +19,12 @@ interface LogDrawerState { innerWidth: number; } +/** + * search space + * config + * model + */ + class TrialConfigPanel extends React.Component { constructor(props: LogDrawerProps) { super(props); @@ -43,11 +49,9 @@ class TrialConfigPanel extends React.Component { } render(): React.ReactNode { - const { hideConfigPanel, activeTab } = this.props; + const { hideConfigPanel, panelName } = this.props; const { panelInnerHeight, innerWidth } = this.state; - // [marginTop 16px] + [Search space 46px] + - // button[height: 32px, marginTop: 45px, marginBottom: 25px] + [padding-bottom: 20px] - const monacoEditorHeight = panelInnerHeight - 184; + const monacoEditorHeight = caclMonacoEditorHeight(panelInnerHeight); const blacklist = [ 'id', 'logDir', @@ -83,12 +87,10 @@ class TrialConfigPanel extends React.Component { isLightDismiss={true} onLightDismissClick={hideConfigPanel} > -
- - +
+ {panelName === 'search space' ? ( +
+
Search space
{ value={prettyStringify(EXPERIMENT.searchSpace, prettyWidth, 2)} options={MONACO} /> - - -
- -
- - +
+ ) : ( +
+
Config
+ +
+ )} +
- ); diff --git a/ts/webui/src/static/function.ts b/ts/webui/src/static/function.ts index 63dfe557ed..ec48dc9453 100644 --- a/ts/webui/src/static/function.ts +++ b/ts/webui/src/static/function.ts @@ -262,6 +262,13 @@ function formatComplexTypeValue(value: any): string | number { } } +function caclMonacoEditorHeight(height): number { + // [Search space 56px] + [marginBottom 18px] + + // button[height: 32px, marginTop: 45px, marginBottom: 7px] + // panel own padding-bottom: 20px; + return height - 56 - 18 - 32 - 45 - 7 - 20; +} + export { convertTime, convertDuration, @@ -280,5 +287,6 @@ export { isArrayType, requestAxios, isNaNorInfinity, - formatComplexTypeValue + formatComplexTypeValue, + caclMonacoEditorHeight }; diff --git a/ts/webui/src/static/style/logDrawer.scss b/ts/webui/src/static/style/logDrawer.scss index d4c3aaf240..143988b341 100644 --- a/ts/webui/src/static/style/logDrawer.scss +++ b/ts/webui/src/static/style/logDrawer.scss @@ -1,3 +1,8 @@ +$buttonsMarginTop: 45px; +$buttonsMarginBottom: 7px; +$navBarHeight: 56px; +$navBarMarginBottom: 18px; + .download { button, button:active, @@ -7,22 +12,46 @@ } } -.log-tab-body { - .refresh { - margin-left: 10px; - display: none; - } -} - /* office-fabric-ui */ .ms-Panel-main { width: 55%; background: #fff; + + .ms-Panel-content { + padding: 0; + } + + .ms-Pivot { + line-height: 56px; + padding: 0 38px; + background: #f2f2f2; + + .ms-Pivot-linkContent:hover { + border-bottom: 2px solid #ccc; + } + + .is-selected { + .ms-Pivot-linkContent:hover { + border: none; + } + } + } +} + +.panel { + padding: 0 38px; +} + +.panelName { + line-height: $navBarHeight; + font-size: 14px; + margin-bottom: $navBarMarginBottom; + font-weight: 500; } /* log drawer download & close button's row */ .buttons { - margin-top: 16px; + margin: $buttonsMarginTop 0 $buttonsMarginBottom 0; .close { text-align: right; @@ -30,5 +59,5 @@ } .configClose { - margin: 45px 0 25px 0; + margin: $buttonsMarginTop 0 $buttonsMarginBottom 0; } diff --git a/ts/webui/src/static/style/overview/config.scss b/ts/webui/src/static/style/overview/config.scss deleted file mode 100644 index e6fa74c98d..0000000000 --- a/ts/webui/src/static/style/overview/config.scss +++ /dev/null @@ -1,30 +0,0 @@ -.config { - position: fixed; - right: 0; - z-index: 1000; - - .ms-Button--default { - padding: 0 8px; - margin: 0 0 12px 0; - border: none; - box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); - border-radius: 18px 0 0 18px; - font-size: 12px; - text-align: left; - - .ms-Button-label { - font-weight: normal; - } - } - - .ms-Button--default:hover { - background-color: #0071bc; - color: #fff; - } -} - -.ms-Fabric { - .ms-Panel-commands { - margin: 0; - } -} diff --git a/ts/webui/src/static/style/overview/panel.scss b/ts/webui/src/static/style/overview/panel.scss new file mode 100644 index 0000000000..81cd314103 --- /dev/null +++ b/ts/webui/src/static/style/overview/panel.scss @@ -0,0 +1,64 @@ +$buttonBorderRadius: 23px; + +.config { + position: fixed; + right: 0; + z-index: 1000; + + .ms-Button--default { + padding: 0 8px; + margin-bottom: 12px; + border: none; + box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); + border-radius: $buttonBorderRadius 0 0 $buttonBorderRadius; + font-size: 12px; + text-align: left; + + .ms-Button-label { + font-weight: normal; + } + } + + .integralBtn { + display: none; + } + + .margin { + margin-left: 10px; + } +} + +.container { + text-align: right; + + .icon { + min-width: 50px; + + i { + font-size: 16px; + } + } + + &:hover { + .icon { + display: none; + } + + .integralBtn { + display: block; + color: #fff; + border: 1px solid blue; + background-color: #0071bc; + + i { + font-size: 14px; + } + } + } +} + +.ms-Fabric { + .ms-Panel-commands { + margin: 0; + } +} From 75ac8d355f560549ea105a154770de0d7de34192 Mon Sep 17 00:00:00 2001 From: Lijiao Date: Thu, 5 Nov 2020 11:32:05 +0000 Subject: [PATCH 2/4] test for log panel style --- ts/webui/src/components/modals/LogPanel.tsx | 8 ++++---- ts/webui/src/static/style/logDrawer.scss | 5 +++++ 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/ts/webui/src/components/modals/LogPanel.tsx b/ts/webui/src/components/modals/LogPanel.tsx index 537ae329e7..2e4bce4df5 100644 --- a/ts/webui/src/components/modals/LogPanel.tsx +++ b/ts/webui/src/components/modals/LogPanel.tsx @@ -80,8 +80,8 @@ class LogDrawer extends React.Component { render(): React.ReactNode { const { closeDrawer, activeTab } = this.props; const { nniManagerLogStr, dispatcherLogStr, isLoading, logDrawerHeight } = this.state; - // tab[44] + tab[PaddingTop: 12] + button[32] + button[margin-top: 45, -bottom: 7] + fluent-panel own paddingBottom[20] + title-border[2] - const monacoHeight = logDrawerHeight - 160 - 2; + // tab[height: 56] + tab[margin-bottom: 20] + button[32] + button[margin-top: 45, -bottom: 7] + fluent-panel own paddingBottom[20] + title-border[2] + const monacoHeight = logDrawerHeight - 182; return ( { > -
+
{ {/* */} -
+
Date: Fri, 6 Nov 2020 02:37:05 +0000 Subject: [PATCH 3/4] review by self --- ts/webui/src/components/NavCon.tsx | 8 +++++--- ts/webui/src/components/modals/ExperimentSummaryPanel.tsx | 4 ++-- ts/webui/src/components/modals/LogPanel.tsx | 1 - ts/webui/src/static/function.ts | 2 +- ts/webui/src/static/style/logDrawer.scss | 2 +- 5 files changed, 9 insertions(+), 8 deletions(-) diff --git a/ts/webui/src/components/NavCon.tsx b/ts/webui/src/components/NavCon.tsx index f78b250f04..c5c2404fbd 100644 --- a/ts/webui/src/components/NavCon.tsx +++ b/ts/webui/src/components/NavCon.tsx @@ -10,7 +10,7 @@ import { IStackTokens, IStackStyles } from '@fluentui/react'; -import ExperimentPanel from './modals/ExperimentSummaryPanel'; +import ExperimentSummaryPanel from './modals/ExperimentSummaryPanel'; import { infoIconAbout, timeIcon, disableUpdates, requency, closeTimer } from './buttons/Icon'; import { OVERVIEWTABS, DETAILTABS, NNILOGO } from './stateless-component/NNItabs'; import { EXPERIMENT } from '../static/datamodel'; @@ -160,12 +160,14 @@ class NavCon extends React.Component { text='Experiment summary' onClick={this.showExpcontent} /> - {/* */} {isvisibleExperimentDrawer && ( - + )} ); diff --git a/ts/webui/src/components/modals/ExperimentSummaryPanel.tsx b/ts/webui/src/components/modals/ExperimentSummaryPanel.tsx index 38b2f9533a..fbdc47ce78 100644 --- a/ts/webui/src/components/modals/ExperimentSummaryPanel.tsx +++ b/ts/webui/src/components/modals/ExperimentSummaryPanel.tsx @@ -17,7 +17,7 @@ interface ExpDrawerState { expDrawerHeight: number; } -class ExperimentDrawer extends React.Component { +class ExperimentSummaryPanel extends React.Component { public _isExperimentMount!: boolean; private refreshId!: number | undefined; @@ -116,4 +116,4 @@ class ExperimentDrawer extends React.Component { } } -export default ExperimentDrawer; +export default ExperimentSummaryPanel; diff --git a/ts/webui/src/components/modals/LogPanel.tsx b/ts/webui/src/components/modals/LogPanel.tsx index 2e4bce4df5..8cd40c757f 100644 --- a/ts/webui/src/components/modals/LogPanel.tsx +++ b/ts/webui/src/components/modals/LogPanel.tsx @@ -110,7 +110,6 @@ class LogDrawer extends React.Component {
- {/* */}
Date: Mon, 9 Nov 2020 08:53:38 +0000 Subject: [PATCH 4/4] update search space and config icon --- ts/webui/src/components/slideNav/SlideNavBtns.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ts/webui/src/components/slideNav/SlideNavBtns.tsx b/ts/webui/src/components/slideNav/SlideNavBtns.tsx index 810ab29921..2af69df6e3 100644 --- a/ts/webui/src/components/slideNav/SlideNavBtns.tsx +++ b/ts/webui/src/components/slideNav/SlideNavBtns.tsx @@ -28,8 +28,8 @@ export const SlideNavBtns = (): any => { // right side nav buttons - - + + {isShowConfigPanel && }