From 582ed3085ddee0c1ac1bdc9d8b5ad2a9ded255f1 Mon Sep 17 00:00:00 2001 From: Juan Escalada <97265671+jescalada@users.noreply.github.com> Date: Fri, 29 Mar 2024 12:22:34 +0900 Subject: [PATCH] Fix various experiment header issues (#52) * Fix rerender issue with no selected params * Fix metrics error bug * Fix select form popper styling * Update createAppModel.ts --- .../components/MetricsBar/MetricsBar.tsx | 6 +- .../components/SelectForm/SelectForm.scss | 7 +- .../components/SelectForm/SelectForm.scss | 7 +- .../models/explorer/createAppModel.ts | 69 ++++++++++--------- .../app/onSelectExperimentNamesChange.ts | 5 +- 5 files changed, 52 insertions(+), 42 deletions(-) diff --git a/src/src/pages/Metrics/components/MetricsBar/MetricsBar.tsx b/src/src/pages/Metrics/components/MetricsBar/MetricsBar.tsx index f450759d..cbfbdd44 100644 --- a/src/src/pages/Metrics/components/MetricsBar/MetricsBar.tsx +++ b/src/src/pages/Metrics/components/MetricsBar/MetricsBar.tsx @@ -35,6 +35,9 @@ function MetricsBar({ onToggleAllExperiments, }: IMetricsBarProps): React.FunctionComponentElement { const [popover, setPopover] = React.useState(''); + const [selectedExperimentNames, setSelectedExperimentNames] = React.useState< + string[] + >(getSelectedExperimentNames()); const route = useRouteMatch(); @@ -48,8 +51,6 @@ function MetricsBar({ const { data: experimentsData, loading: isExperimentsLoading } = experimentsState; - const selectedExperimentNames = getSelectedExperimentNames(); - function handleBookmarkClick(value: string): void { setPopover(value); } @@ -65,6 +66,7 @@ function MetricsBar({ function handleExperimentNamesChange(experimentName: string): void { onSelectExperimentNamesChange(experimentName); + setSelectedExperimentNames(getSelectedExperimentNames()); } return ( diff --git a/src/src/pages/Metrics/components/SelectForm/SelectForm.scss b/src/src/pages/Metrics/components/SelectForm/SelectForm.scss index c2eda0b7..1e15e8dc 100644 --- a/src/src/pages/Metrics/components/SelectForm/SelectForm.scss +++ b/src/src/pages/Metrics/components/SelectForm/SelectForm.scss @@ -131,14 +131,15 @@ margin: 10px; } -.Popper__SelectForm__select{ +.Popper__SelectForm__select { @extend .Metrics__SelectForm__metric__select; } -.Popper__SelectForm__option{ +.Popper__SelectForm__option { @extend .Metrics__SelectForm__option !optional; } -.Popper__SelectForm__option__label{ +.Popper__SelectForm__option__label { @extend .Metrics__SelectForm__option__label !optional; + margin-left: $space-xs; } diff --git a/src/src/pages/Params/components/SelectForm/SelectForm.scss b/src/src/pages/Params/components/SelectForm/SelectForm.scss index d9801ea4..dc49836f 100644 --- a/src/src/pages/Params/components/SelectForm/SelectForm.scss +++ b/src/src/pages/Params/components/SelectForm/SelectForm.scss @@ -117,14 +117,15 @@ margin: 10px; } -.Popper__SelectForm__select{ +.Popper__SelectForm__select { @extend .SelectForm__param__select; } -.Popper__SelectForm__option{ +.Popper__SelectForm__option { @extend .SelectForm__option !optional; } -.Popper__SelectForm__option__label{ +.Popper__SelectForm__option__label { @extend .SelectForm__option__label !optional; + margin-left: $space-xs; } diff --git a/src/src/services/models/explorer/createAppModel.ts b/src/src/services/models/explorer/createAppModel.ts index 6b345363..d921ce39 100644 --- a/src/src/services/models/explorer/createAppModel.ts +++ b/src/src/services/models/explorer/createAppModel.ts @@ -128,7 +128,6 @@ import onRowHeightChange from 'utils/app/onRowHeightChange'; import onRowVisibilityChange from 'utils/app/onRowVisibilityChange'; import onSelectExperimentNamesChange from 'utils/app/onSelectExperimentNamesChange'; import onToggleAllExperiments from 'utils/app/onToggleAllExperiments'; -import onSelectAdvancedQueryChange from 'utils/app/onSelectAdvancedQueryChange'; import onSelectRunQueryChange from 'utils/app/onSelectRunQueryChange'; import onSmoothingChange from 'utils/app/onSmoothingChange'; import onSortFieldsChange from 'utils/app/onSortFieldsChange'; @@ -638,41 +637,45 @@ function createAppModel(appConfig: IAppInitialConfig) { setRequestProgress(model); return { call: async () => { - model.setState({ - requestStatus: RequestStatusEnum.Pending, - queryIsEmpty: false, - selectedRows: shouldResetSelectedRows - ? {} - : model.getState()?.selectedRows, - }); - liveUpdateInstance?.stop().then(); - try { - const stream = await metricsRequestRef.call((detail) => { - exceptionHandler({ detail, model }); - resetModelState(configData, shouldResetSelectedRows!); + if (_.isEmpty(configData?.select?.options)) { + resetModelState(configData, shouldResetSelectedRows!); + } else { + model.setState({ + requestStatus: RequestStatusEnum.Pending, + queryIsEmpty: false, + selectedRows: shouldResetSelectedRows + ? {} + : model.getState()?.selectedRows, }); - const runData = await getRunData(stream, (progress) => - setRequestProgress(model, progress), - ); - if (shouldUrlUpdate) { - updateURL({ configData, appName }); - } - saveRecentSearches(appName, query); - updateData(runData); - } catch (ex: Error | any) { - if (ex.name === 'AbortError') { - // Abort Error - } else { - // eslint-disable-next-line no-console - console.log('Unhandled error: ', ex); + liveUpdateInstance?.stop().then(); + try { + const stream = await metricsRequestRef.call((detail) => { + exceptionHandler({ detail, model }); + resetModelState(configData, shouldResetSelectedRows!); + }); + const runData = await getRunData(stream, (progress) => + setRequestProgress(model, progress), + ); + if (shouldUrlUpdate) { + updateURL({ configData, appName }); + } + saveRecentSearches(appName, query); + updateData(runData); + } catch (ex: Error | any) { + if (ex.name === 'AbortError') { + // Abort Error + } else { + // eslint-disable-next-line no-console + console.log('Unhandled error: ', ex); + } } - } - liveUpdateInstance?.start({ - q: query, - p: configData?.chart?.densityType, - ...(metric && { x_axis: metric }), - }); + liveUpdateInstance?.start({ + q: query, + p: configData?.chart?.densityType, + ...(metric && { x_axis: metric }), + }); + } }, abort: metricsRequestRef.abort, }; diff --git a/src/src/utils/app/onSelectExperimentNamesChange.ts b/src/src/utils/app/onSelectExperimentNamesChange.ts index 98ab27f9..9037f6b5 100644 --- a/src/src/utils/app/onSelectExperimentNamesChange.ts +++ b/src/src/utils/app/onSelectExperimentNamesChange.ts @@ -33,7 +33,10 @@ export default function onSelectExperimentNamesChange({ if (configData?.select) { const newConfig = { ...configData, - select: { ...configData.select, selectedExperimentNames }, + select: { + ...configData.select, + selectedExperimentNames, + }, }; model.setState({ config: newConfig }); }