Remove advanced search mode from Metric search (#51)

G-Research · Mar 22, 2024 · a1f4c21 · a1f4c21
1 parent 134eab9
commit a1f4c21
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 154 deletions.
diff --git a/src/src/pages/Metrics/Metrics.tsx b/src/src/pages/Metrics/Metrics.tsx
@@ -106,8 +106,6 @@ function Metrics(
                 selectedMetricsData={props.selectedMetricsData}
                 onMetricsSelectChange={props.onMetricsSelectChange}
                 onSelectRunQueryChange={props.onSelectRunQueryChange}
-                onSelectAdvancedQueryChange={props.onSelectAdvancedQueryChange}
-                toggleSelectAdvancedMode={props.toggleSelectAdvancedMode}
                 onSearchQueryCopy={props.onSearchQueryCopy}
               />
               <Grouping

diff --git a/src/src/pages/Metrics/MetricsContainer.tsx b/src/src/pages/Metrics/MetricsContainer.tsx
@@ -196,8 +196,6 @@ function MetricsContainer(): React.FunctionComponentElement<React.ReactNode> {
         }
         onToggleAllExperiments={metricAppModel.onToggleAllExperiments}
         onSelectRunQueryChange={metricAppModel.onSelectRunQueryChange}
-        onSelectAdvancedQueryChange={metricAppModel.onSelectAdvancedQueryChange}
-        toggleSelectAdvancedMode={metricAppModel.toggleSelectAdvancedMode}
         onExportTableData={metricAppModel.onExportTableData}
         onRowHeightChange={metricAppModel.onRowHeightChange}
         onSortChange={metricAppModel.onSortChange}

diff --git a/src/src/pages/Metrics/components/SelectForm/SelectForm.tsx b/src/src/pages/Metrics/components/SelectForm/SelectForm.tsx
@@ -32,8 +32,6 @@ function SelectForm({
   selectFormData,
   onMetricsSelectChange,
   onSelectRunQueryChange,
-  onSelectAdvancedQueryChange,
-  toggleSelectAdvancedMode,
   onSearchQueryCopy,
 }: ISelectFormProps): React.FunctionComponentElement<React.ReactNode> {
   const [anchorEl, setAnchorEl] = React.useState<any>(null);
@@ -42,8 +40,6 @@ function SelectForm({
   const [regexError, setRegexError] = React.useState<string | null>(null);
   const searchRef: any = React.useRef<React.MutableRefObject<any>>(null);
   const autocompleteRef: any = React.useRef<React.MutableRefObject<any>>(null);
-  const advancedAutocompleteRef: any =
-    React.useRef<React.MutableRefObject<any>>(null);
   React.useEffect(() => {
     return () => {
       searchRef.current?.abort();
@@ -55,14 +51,9 @@ function SelectForm({
     if (requestIsPending) {
       return;
     }
-    let query = selectedMetricsData?.advancedMode
-      ? advancedAutocompleteRef?.current?.getValue()
-      : autocompleteRef?.current?.getValue();
-    if (selectedMetricsData?.advancedMode) {
-      onSelectAdvancedQueryChange(advancedAutocompleteRef.current.getValue());
-    } else {
-      onSelectRunQueryChange(autocompleteRef.current.getValue());
-    }
+    let query = autocompleteRef?.current?.getValue();
+
+    onSelectRunQueryChange(autocompleteRef.current.getValue());
     searchRef.current = metricAppModel.getMetricsData(true, true, query ?? '');
     searchRef.current.call();
     trackEvent(ANALYTICS_EVENT_KEYS.metrics.searchClick);
@@ -100,10 +91,6 @@ function SelectForm({
     onMetricsSelectChange(fieldData);
   }
 
-  function toggleEditMode(): void {
-    toggleSelectAdvancedMode();
-  }
-
   function handleClick(event: React.ChangeEvent<any>) {
     setAnchorEl(event.currentTarget);
   }
@@ -122,7 +109,6 @@ function SelectForm({
   function handleResetSelectForm(): void {
     onMetricsSelectChange([]);
     onSelectRunQueryChange('');
-    onSelectAdvancedQueryChange('');
   }
 
   function handleSearchInputChange(
@@ -166,106 +152,88 @@ function SelectForm({
             justifyContent='space-between'
             alignItems='center'
           >
-            {selectedMetricsData?.advancedMode ? (
-              <div className='Metrics__SelectForm__textarea'>
-                <AutocompleteInput
-                  advanced
-                  error={selectFormData.advancedError}
-                  refObject={advancedAutocompleteRef}
-                  context={selectFormData?.advancedSuggestions}
-                  value={selectedMetricsData?.advancedQuery}
-                  onEnter={handleMetricSearch}
-                  disabled={isDisabled}
-                />
-              </div>
-            ) : (
-              <>
-                <Box display='flex' alignItems='center'>
-                  <Button
-                    variant='contained'
-                    color='primary'
-                    onClick={handleClick}
-                    aria-describedby={id}
-                    disabled={isDisabled}
-                  >
-                    <Icon name='plus' style={{ marginRight: '0.5rem' }} />
-                    Metrics
-                  </Button>
-                  <SelectFormPopper
-                    id={id}
-                    type='metrics'
-                    open={open}
-                    anchorEl={anchorEl}
-                    options={options}
-                    selectedData={selectedMetricsData}
-                    onSelect={onSelect}
-                    searchValue={searchValue}
-                    handleSearchInputChange={handleSearchInputChange}
-                    handleClose={handleClose}
-                    regexError={regexError}
-                    setRegexError={setRegexError}
-                    isRegexSearch={isRegexSearch}
-                    setIsRegexSearch={setIsRegexSearch}
-                    className='Metrics__SelectForm__Popper'
-                    classes={classes}
-                  />
-                  <Divider
-                    style={{ margin: '0 1rem' }}
-                    orientation='vertical'
-                    flexItem
-                  />
-                  {selectedMetricsData?.options.length === 0 && (
-                    <Text tint={50} size={14} weight={400}>
-                      No metrics are selected
-                    </Text>
-                  )}
-                  <Box
-                    className='Metrics__SelectForm__tags ScrollBar__hidden'
-                    flex={1}
-                  >
-                    {selectedMetricsData?.options?.map((tag: ISelectOption) => {
-                      return (
-                        <Badge
-                          size='large'
-                          key={tag.label}
-                          label={tag.label}
-                          value={tag.key}
-                          onDelete={handleDelete}
-                          disabled={isDisabled}
-                        />
-                      );
-                    })}
-                  </Box>
-                </Box>
-                {selectedMetricsData?.options &&
-                  selectedMetricsData.options.length > 1 && (
-                    <Button
-                      onClick={() => onMetricsSelectChange([])}
-                      withOnlyIcon
-                      className={classNames('Metrics__SelectForm__clearAll', {
-                        disabled: isDisabled,
-                      })}
-                      size='xSmall'
-                      disabled={isDisabled}
-                    >
-                      <Icon name='close' />
-                    </Button>
-                  )}
-              </>
-            )}
-          </Box>
-          {selectedMetricsData?.advancedMode ? null : (
-            <div className='Metrics__SelectForm__TextField'>
-              <AutocompleteInput
-                refObject={autocompleteRef}
-                error={selectFormData.error}
-                value={selectedMetricsData?.query}
-                context={selectFormData.suggestions}
-                onEnter={handleMetricSearch}
+            <Box display='flex' alignItems='center'>
+              <Button
+                variant='contained'
+                color='primary'
+                onClick={handleClick}
+                aria-describedby={id}
                 disabled={isDisabled}
+              >
+                <Icon name='plus' style={{ marginRight: '0.5rem' }} />
+                Metrics
+              </Button>
+              <SelectFormPopper
+                id={id}
+                type='metrics'
+                open={open}
+                anchorEl={anchorEl}
+                options={options}
+                selectedData={selectedMetricsData}
+                onSelect={onSelect}
+                searchValue={searchValue}
+                handleSearchInputChange={handleSearchInputChange}
+                handleClose={handleClose}
+                regexError={regexError}
+                setRegexError={setRegexError}
+                isRegexSearch={isRegexSearch}
+                setIsRegexSearch={setIsRegexSearch}
+                className='Metrics__SelectForm__Popper'
+                classes={classes}
+              />
+              <Divider
+                style={{ margin: '0 1rem' }}
+                orientation='vertical'
+                flexItem
               />
-            </div>
-          )}
+              {selectedMetricsData?.options.length === 0 && (
+                <Text tint={50} size={14} weight={400}>
+                  No metrics are selected
+                </Text>
+              )}
+              <Box
+                className='Metrics__SelectForm__tags ScrollBar__hidden'
+                flex={1}
+              >
+                {selectedMetricsData?.options?.map((tag: ISelectOption) => {
+                  return (
+                    <Badge
+                      size='large'
+                      key={tag.label}
+                      label={tag.label}
+                      value={tag.key}
+                      onDelete={handleDelete}
+                      disabled={isDisabled}
+                    />
+                  );
+                })}
+              </Box>
+            </Box>
+            {selectedMetricsData?.options &&
+              selectedMetricsData.options.length > 1 && (
+                <Button
+                  onClick={() => onMetricsSelectChange([])}
+                  withOnlyIcon
+                  className={classNames('Metrics__SelectForm__clearAll', {
+                    disabled: isDisabled,
+                  })}
+                  size='xSmall'
+                  disabled={isDisabled}
+                >
+                  <Icon name='close' />
+                </Button>
+              )}
+          </Box>
+          <div className='Metrics__SelectForm__TextField'>
+            <AutocompleteInput
+              refObject={autocompleteRef}
+              error={selectFormData.error}
+              value={selectedMetricsData?.query}
+              context={selectFormData.suggestions}
+              onEnter={handleMetricSearch}
+              disabled={isDisabled}
+            />
+          </div>
         </div>
         <div className='Metrics__SelectForm__container__search'>
           <Button
@@ -291,35 +259,19 @@ function SelectForm({
                   onClick={handleResetSelectForm}
                   withOnlyIcon={true}
                   disabled={isDisabled}
+                  style={{ width: '3rem' }}
                 >
                   <Icon name='reset' />
                 </Button>
               </div>
             </Tooltip>
-            <Tooltip
-              title={
-                selectedMetricsData?.advancedMode
-                  ? 'Switch to default mode'
-                  : 'Enable advanced search mode '
-              }
-            >
-              <div>
-                <Button
-                  className={selectedMetricsData?.advancedMode ? 'active' : ''}
-                  withOnlyIcon={true}
-                  onClick={toggleEditMode}
-                  disabled={isDisabled}
-                >
-                  <Icon name='edit' />
-                </Button>
-              </div>
-            </Tooltip>
             <Tooltip title='Copy search query'>
               <div>
                 <Button
                   onClick={onSearchQueryCopy}
                   withOnlyIcon={true}
                   disabled={isDisabled}
+                  style={{ width: '3rem' }}
                 >
                   <Icon name='copy' />
                 </Button>

diff --git a/src/src/services/models/explorer/createAppModel.ts b/src/src/services/models/explorer/createAppModel.ts
@@ -140,7 +140,6 @@ import onTableRowHover from 'utils/app/onTableRowHover';
 import onTableSortChange from 'utils/app/onTableSortChange';
 import onZoomChange from 'utils/app/onZoomChange';
 import setAggregationEnabled from 'utils/app/setAggregationEnabled';
-import toggleSelectAdvancedMode from 'utils/app/toggleSelectAdvancedMode';
 import updateColumnsWidths from 'utils/app/updateColumnsWidths';
 import updateSortFields from 'utils/app/updateTableSortFields';
 import contextToString from 'utils/contextToString';
@@ -612,11 +611,7 @@ function createAppModel(appConfig: IAppInitialConfig) {
       const metric = configData?.chart?.alignmentConfig?.metric;
 
       if (queryString) {
-        if (configData.select.advancedMode) {
-          configData.select.advancedQuery = queryString;
-        } else {
-          configData.select.query = queryString;
-        }
+        configData.select.query = queryString;
       }
 
       let metrics = getMetricsListFromSelect(configData?.select);
@@ -1334,7 +1329,6 @@ function createAppModel(appConfig: IAppInitialConfig) {
         data,
         selectFormData: {
           ...modelState?.selectFormData,
-          [configData.select?.advancedMode ? 'advancedError' : 'error']: null,
         },
         lineChartData: getDataAsLines(data),
         chartTitleData: getChartTitleData<
@@ -2030,12 +2024,6 @@ function createAppModel(appConfig: IAppInitialConfig) {
         onSelectRunQueryChange(query: string): void {
           onSelectRunQueryChange({ query, model });
         },
-        onSelectAdvancedQueryChange(query: string): void {
-          onSelectAdvancedQueryChange({ query, model });
-        },
-        toggleSelectAdvancedMode(): void {
-          toggleSelectAdvancedMode({ model, appName });
-        },
       });
     }
     if (components?.charts?.[0]) {

diff --git a/src/src/types/pages/metrics/Metrics.d.ts b/src/src/types/pages/metrics/Metrics.d.ts
@@ -133,9 +133,7 @@ export interface IMetricProps extends Partial<RouteChildrenProps> {
   onSelectExperimentNamesChange: (experimentName: string) => void;
   onToggleAllExperiments: (experimentNames: string[]) => void;
   onSelectRunQueryChange: (query: string) => void;
-  onSelectAdvancedQueryChange: (query: string) => void;
   onRowsVisibilityChange: (metricKeys: string[]) => void;
-  toggleSelectAdvancedMode: () => void;
   onExportTableData: (e: React.ChangeEvent<any>) => void;
   onRowHeightChange: (height: RowHeightSize) => void;
   onSortReset: () => void;

diff --git a/src/src/types/pages/metrics/components/SelectForm/SelectForm.d.ts b/src/src/types/pages/metrics/components/SelectForm/SelectForm.d.ts
@@ -16,7 +16,5 @@ export interface ISelectFormProps {
   };
   onMetricsSelectChange: (options: ISelectOption[]) => void;
   onSelectRunQueryChange: (query: string) => void;
-  onSelectAdvancedQueryChange: (query: string) => void;
-  toggleSelectAdvancedMode: () => void;
   onSearchQueryCopy: () => void;
 }