Fix various experiment header issues

src/src/pages/Metrics/components/MetricsBar/MetricsBar.tsx

@@ -35,6 +35,9 @@ function MetricsBar({
   onToggleAllExperiments,
 }: IMetricsBarProps): React.FunctionComponentElement<React.ReactNode> {
   const [popover, setPopover] = React.useState<string>('');
+  const [selectedExperimentNames, setSelectedExperimentNames] = React.useState<
+    string[]
+  >(getSelectedExperimentNames());
 
   const route = useRouteMatch<any>();
 
@@ -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 (

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;
 }

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;
 }

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,
       };

src/src/utils/app/onSelectExperimentNamesChange.ts

@@ -33,7 +33,10 @@ export default function onSelectExperimentNamesChange<M extends State>({
   if (configData?.select) {
     const newConfig = {
       ...configData,
-      select: { ...configData.select, selectedExperimentNames },
+      select: {
+        ...configData.select,
+        selectedExperimentNames,
+      },
     };
     model.setState({ config: newConfig });
   }