[fix] Avoid saving crashed or terminated search requests as the last …

…state on explorers (#1950) * [fix] Avoid saving crashed and aborted queries * [fix] Remove referring to the explorer docs after getting a syntax error
aimhubio · Jul 7, 2022 · e1a2f65 · e1a2f65
1 parent 783a858
commit e1a2f65
Show file tree

Hide file tree

Showing 15 changed files with 108 additions and 108 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@
 
 ### Fixes:
 
+- Avoid saving crashed or terminated search requests as the last state on explorers (arsengit) 
 - Remove the progress bar blinking when searching runs in Runs Explorer (KaroMourad)
 - Fix the "matched runs" sentence color style in progress bars (KaroMourad)
 - Fix `SyntaxError` handling for python3.10+ (mihran113)

diff --git a/aim/web/ui/src/components/AutocompleteInput/ AutocompleteInput.d.ts b/aim/web/ui/src/components/AutocompleteInput/ AutocompleteInput.d.ts
@@ -15,7 +15,6 @@ export interface IAutocompleteInputProps {
   disabled?: boolean;
   value: string | undefined;
   refObject?: React.MutableRefObject<any>;
-  appName?: AppNameEnumUpperCase;
   getEditorValue?: (value: string) => string;
   onEnter?: () => void;
   onChange?: (

diff --git a/aim/web/ui/src/components/AutocompleteInput/AutocompleteInput.tsx b/aim/web/ui/src/components/AutocompleteInput/AutocompleteInput.tsx
@@ -10,8 +10,6 @@ import { Icon, Text } from 'components/kit';
 import { getMonacoConfig } from 'config/monacoConfig/monacoConfig';
 import { DOCUMENTATIONS } from 'config/references';
 
-import { AppNameEnumUpperCase } from 'services/models/explorer';
-
 import { showAutocompletion } from 'utils/showAutocompletion';
 
 import { IAutocompleteInputProps } from './ AutocompleteInput';
@@ -27,7 +25,6 @@ function AutocompleteInput({
   refObject,
   error,
   disabled = false,
-  appName = AppNameEnumUpperCase.METRICS,
   //callback functions
   onEnter,
   onChange,
@@ -248,20 +245,11 @@ function AutocompleteInput({
           <div className='AutocompleteInput__errorBar__hint'>
             <Icon name='info-circle-outline' box />
             <Text>
-              Aim Query Language is pythonic and fairly easy to get used to. If
-              you having issue, please refer to the{' '}
-              <a
-                href={DOCUMENTATIONS.EXPLORERS[appName].SEARCH}
-                target='_blank'
-                rel='noreferrer'
-              >
+              If you are having issues, please refer to the{' '}
+              <a href={DOCUMENTATIONS.AIM_QL} target='_blank' rel='noreferrer'>
                 docs
               </a>{' '}
-              for more examples or the detailed{' '}
-              <a href={DOCUMENTATIONS.AIM_QL} target='_blank' rel='noreferrer'>
-                spec
-              </a>
-              .
+              for detailed usage guide and more examples.
             </Text>
           </div>
         </div>

diff --git a/aim/web/ui/src/pages/ImagesExplore/components/SelectForm/SelectForm.tsx b/aim/web/ui/src/pages/ImagesExplore/components/SelectForm/SelectForm.tsx
@@ -23,7 +23,6 @@ import { ANALYTICS_EVENT_KEYS } from 'config/analytics/analyticsKeysMap';
 
 import imagesExploreAppModel from 'services/models/imagesExplore/imagesExploreAppModel';
 import { trackEvent } from 'services/analytics';
-import { AppNameEnumUpperCase } from 'services/models/explorer';
 
 import { ISelectFormProps } from 'types/pages/imagesExplore/components/SelectForm/SelectForm';
 import { ISelectOption } from 'types/services/models/explorer/createAppModel';
@@ -86,17 +85,22 @@ function SelectForm({
     imagesExploreAppModel.abortRequest();
   }
 
-  function onSelect(event: object, value: ISelectOption[]): void {
-    const lookup = value.reduce(
-      (acc: { [key: string]: number }, curr: ISelectOption) => {
-        acc[curr.label] = ++acc[curr.label] || 0;
-        return acc;
-      },
-      {},
-    );
-    onImagesExploreSelectChange(
-      value.filter((option: ISelectOption) => lookup[option.label] === 0),
-    );
+  function onSelect(
+    event: React.ChangeEvent<{}>,
+    value: ISelectOption[],
+  ): void {
+    if (event.type === 'click') {
+      const lookup = value.reduce(
+        (acc: { [key: string]: number }, curr: ISelectOption) => {
+          acc[curr.label] = ++acc[curr.label] || 0;
+          return acc;
+        },
+        {},
+      );
+      onImagesExploreSelectChange(
+        value.filter((option: ISelectOption) => lookup[option.label] === 0),
+      );
+    }
   }
 
   function handleDelete(field: string): void {
@@ -163,7 +167,6 @@ function SelectForm({
                   <AutocompleteInput
                     advanced
                     refObject={advancedAutocompleteRef}
-                    appName={AppNameEnumUpperCase.IMAGES}
                     context={selectFormData?.advancedSuggestions}
                     value={selectedImagesData?.advancedQuery}
                     error={selectFormData?.advancedError}
@@ -298,7 +301,6 @@ function SelectForm({
               <div className='SelectForm__TextField'>
                 <AutocompleteInput
                   refObject={autocompleteRef}
-                  appName={AppNameEnumUpperCase.IMAGES}
                   context={selectFormData?.suggestions}
                   value={selectedImagesData?.query}
                   error={selectFormData?.error}

diff --git a/aim/web/ui/src/pages/Metrics/components/SelectForm/SelectForm.tsx b/aim/web/ui/src/pages/Metrics/components/SelectForm/SelectForm.tsx
@@ -23,7 +23,6 @@ import { ANALYTICS_EVENT_KEYS } from 'config/analytics/analyticsKeysMap';
 
 import metricAppModel from 'services/models/metrics/metricsAppModel';
 import { trackEvent } from 'services/analytics';
-import { AppNameEnumUpperCase } from 'services/models/explorer';
 
 import { ISelectFormProps } from 'types/pages/metrics/components/SelectForm/SelectForm';
 import { ISelectOption } from 'types/services/models/explorer/createAppModel';
@@ -79,15 +78,22 @@ function SelectForm({
     metricAppModel.abortRequest();
   }
 
-  function onSelect(event: object, value: ISelectOption[]): void {
-    const lookup = value.reduce(
-      (acc: { [key: string]: number }, curr: ISelectOption) => {
-        acc[curr.label] = ++acc[curr.label] || 0;
-        return acc;
-      },
-      {},
-    );
-    onMetricsSelectChange(value.filter((option) => lookup[option.label] === 0));
+  function onSelect(
+    event: React.ChangeEvent<{}>,
+    value: ISelectOption[],
+  ): void {
+    if (event.type === 'click') {
+      const lookup = value.reduce(
+        (acc: { [key: string]: number }, curr: ISelectOption) => {
+          acc[curr.label] = ++acc[curr.label] || 0;
+          return acc;
+        },
+        {},
+      );
+      onMetricsSelectChange(
+        value.filter((option) => lookup[option.label] === 0),
+      );
+    }
   }
 
   function handleDelete(field: string): void {
@@ -153,7 +159,6 @@ function SelectForm({
                 <AutocompleteInput
                   advanced
                   error={selectFormData.advancedError}
-                  appName={AppNameEnumUpperCase.IMAGES}
                   refObject={advancedAutocompleteRef}
                   context={selectFormData?.advancedSuggestions}
                   value={selectedMetricsData?.advancedQuery}
@@ -286,7 +291,6 @@ function SelectForm({
             <div className='Metrics__SelectForm__TextField'>
               <AutocompleteInput
                 refObject={autocompleteRef}
-                appName={AppNameEnumUpperCase.METRICS}
                 error={selectFormData.error}
                 value={selectedMetricsData?.query}
                 context={selectFormData.suggestions}

diff --git a/aim/web/ui/src/pages/Params/components/SelectForm/SelectForm.tsx b/aim/web/ui/src/pages/Params/components/SelectForm/SelectForm.tsx
@@ -16,7 +16,6 @@ import { ANALYTICS_EVENT_KEYS } from 'config/analytics/analyticsKeysMap';
 
 import paramsAppModel from 'services/models/params/paramsAppModel';
 import { trackEvent } from 'services/analytics';
-import { AppNameEnumUpperCase } from 'services/models/explorer';
 
 import { ISelectFormProps } from 'types/pages/params/components/SelectForm/SelectForm';
 import { ISelectOption } from 'types/services/models/explorer/createAppModel';
@@ -61,17 +60,22 @@ function SelectForm({
     paramsAppModel.abortRequest();
   }
 
-  function onSelect(event: object, value: ISelectOption[]): void {
-    const lookup = value.reduce(
-      (acc: { [key: string]: number }, curr: ISelectOption) => {
-        acc[curr.label] = ++acc[curr.label] || 0;
-        return acc;
-      },
-      {},
-    );
-    onParamsSelectChange(
-      value?.filter((option: ISelectOption) => lookup[option.label] === 0),
-    );
+  function onSelect(
+    event: React.ChangeEvent<{}>,
+    value: ISelectOption[],
+  ): void {
+    if (event.type === 'click') {
+      const lookup = value.reduce(
+        (acc: { [key: string]: number }, curr: ISelectOption) => {
+          acc[curr.label] = ++acc[curr.label] || 0;
+          return acc;
+        },
+        {},
+      );
+      onParamsSelectChange(
+        value?.filter((option: ISelectOption) => lookup[option.label] === 0),
+      );
+    }
   }
 
   function handleDelete(field: string): void {
@@ -99,6 +103,8 @@ function SelectForm({
   function handleSearchInputChange(
     e: React.ChangeEvent<HTMLInputElement>,
   ): void {
+    e.preventDefault();
+    e.stopPropagation();
     setSearchValue(e.target.value);
   }
 
@@ -112,7 +118,7 @@ function SelectForm({
 
   const open: boolean = !!anchorEl;
   const id = open ? 'select-metric' : undefined;
-
+  console.log(selectedParamsData);
   return (
     <ErrorBoundary>
       <div className='SelectForm__container'>
@@ -270,7 +276,6 @@ function SelectForm({
           <div className='SelectForm__TextField'>
             <AutocompleteInput
               refObject={autocompleteRef}
-              appName={AppNameEnumUpperCase.PARAMS}
               context={selectFormData?.suggestions}
               error={selectFormData?.error}
               onEnter={handleParamsSearch}

diff --git a/aim/web/ui/src/pages/Runs/components/SearchBar/SearchBar.tsx b/aim/web/ui/src/pages/Runs/components/SearchBar/SearchBar.tsx
@@ -10,7 +10,6 @@ import { ANALYTICS_EVENT_KEYS } from 'config/analytics/analyticsKeysMap';
 
 import runAppModel from 'services/models/runs/runsAppModel';
 import { trackEvent } from 'services/analytics';
-import { AppNameEnumUpperCase } from 'services/models/explorer';
 
 import exceptionHandler from 'utils/app/exceptionHandler';
 
@@ -65,7 +64,6 @@ function SearchBar({
         <form onSubmit={handleRunSearch}>
           <AutocompleteInput
             refObject={autocompleteRef}
-            appName={AppNameEnumUpperCase.RUNS}
             onEnter={handleRunSearch}
             error={selectFormData.error}
             context={selectFormData.suggestions}

diff --git a/aim/web/ui/src/pages/Scatters/components/SelectForm/SelectForm.tsx b/aim/web/ui/src/pages/Scatters/components/SelectForm/SelectForm.tsx
@@ -10,7 +10,6 @@ import { ANALYTICS_EVENT_KEYS } from 'config/analytics/analyticsKeysMap';
 
 import scattersAppModel from 'services/models/scatters/scattersAppModel';
 import { trackEvent } from 'services/analytics';
-import { AppNameEnumUpperCase } from 'services/models/explorer';
 
 import { ISelectFormProps } from 'types/pages/scatters/components/SelectForm/SelectForm';
 
@@ -181,7 +180,6 @@ function SelectForm({
           <div className='Scatters__SelectForm__TextField'>
             <AutocompleteInput
               refObject={autocompleteRef}
-              appName={AppNameEnumUpperCase.SCATTERS}
               context={selectFormData?.suggestions}
               error={selectFormData?.error}
               value={selectedOptionsData?.query}

diff --git a/aim/web/ui/src/services/models/explorer/createAppModel.ts b/aim/web/ui/src/services/models/explorer/createAppModel.ts
@@ -632,9 +632,7 @@ function createAppModel(appConfig: IAppInitialConfig) {
         metricsRequestRef.abort();
       }
       const configData = model.getState()?.config;
-      if (shouldUrlUpdate) {
-        updateURL({ configData, appName });
-      }
+
       const metric = configData?.chart?.alignmentConfig?.metric;
 
       if (queryString) {
@@ -673,6 +671,9 @@ function createAppModel(appConfig: IAppInitialConfig) {
               const runData = await getRunData(stream, (progress) =>
                 setRequestProgress(model, progress),
               );
+              if (shouldUrlUpdate) {
+                updateURL({ configData, appName });
+              }
               updateData(runData);
             } catch (ex: Error | any) {
               if (ex.name === 'AbortError') {
@@ -2226,9 +2227,6 @@ function createAppModel(appConfig: IAppInitialConfig) {
 
         runsRequestRef = runsService.getRunsData(query, 45, pagination?.offset);
         let limit = pagination.limit;
-        if (shouldUrlUpdate) {
-          updateURL({ configData, appName });
-        }
         setRequestProgress(model);
         return {
           call: async () => {
@@ -2303,6 +2301,9 @@ function createAppModel(appConfig: IAppInitialConfig) {
                   },
                 },
               });
+              if (shouldUrlUpdate) {
+                updateURL({ configData, appName });
+              }
             } catch (ex: Error | any) {
               if (ex.name === 'AbortError') {
                 onNotificationAdd({
@@ -3351,9 +3352,6 @@ function createAppModel(appConfig: IAppInitialConfig) {
         if (queryString) {
           configData.select.query = queryString;
         }
-        if (shouldUrlUpdate) {
-          updateURL({ configData, appName });
-        }
         runsRequestRef = runsService.getRunsData(configData?.select?.query);
         setRequestProgress(model);
         return {
@@ -3378,6 +3376,9 @@ function createAppModel(appConfig: IAppInitialConfig) {
                   setRequestProgress(model, progress),
                 );
                 updateData(runData);
+                if (shouldUrlUpdate) {
+                  updateURL({ configData, appName });
+                }
               } catch (ex: Error | any) {
                 if (ex.name === 'AbortError') {
                   // Abort Error
@@ -5652,9 +5653,7 @@ function createAppModel(appConfig: IAppInitialConfig) {
           runsRequestRef.abort();
         }
         const configData = { ...model.getState()?.config };
-        if (shouldUrlUpdate) {
-          updateURL({ configData, appName });
-        }
+
         runsRequestRef = runsService.getRunsData(configData?.select?.query);
         setRequestProgress(model);
         return {
@@ -5679,7 +5678,9 @@ function createAppModel(appConfig: IAppInitialConfig) {
                   setRequestProgress(model, progress),
                 );
                 updateData(runData);
-
+                if (shouldUrlUpdate) {
+                  updateURL({ configData, appName });
+                }
                 liveUpdateInstance?.start({
                   q: configData?.select?.query,
                 });

diff --git a/aim/web/ui/src/services/models/explorer/index.ts b/aim/web/ui/src/services/models/explorer/index.ts
@@ -22,14 +22,6 @@ export enum AppNameEnum {
   SCATTERS = 'scatters',
 }
 
-export enum AppNameEnumUpperCase {
-  METRICS = 'METRICS',
-  PARAMS = 'PARAMS',
-  RUNS = 'RUNS',
-  IMAGES = 'IMAGES',
-  SCATTERS = 'SCATTERS',
-}
-
 /**
  * appInitialConfig is config object which describes our app models
  * @appInitialConfig { [key: string]: IAppInitialConfig }