[fix] Fix run overview tab params card error (#1767)

* Fix run overview tab params card error * Fix Autocomplete component previous state setting issue
aimhubio · May 18, 2022 · 9385276 · 9385276
1 parent 955eda9
commit 9385276
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## Unreleased
+
+- Fix params card error in the single run page overview tab (arsengit)
+- Fix Autocomplete component previous state setting issue (arsengit)
+
 ## 3.10.0 May 17, 2022
 
 ### Enhancements:

diff --git a/aim/web/ui/src/components/AutocompleteInput/AutocompleteInput.tsx b/aim/web/ui/src/components/AutocompleteInput/AutocompleteInput.tsx
@@ -31,7 +31,6 @@ function AutocompleteInput({
   onChange,
 }: IAutocompleteInputProps) {
   const [hasSelection, setHasSelection] = React.useState(false);
-  const [editorValue, setEditorValue] = React.useState(value);
   const [focused, setFocused] = React.useState<boolean>(false);
   const [mounted, setMounted] = React.useState<boolean>(false);
   const monaco: any = useMonaco();
@@ -54,12 +53,6 @@ function AutocompleteInput({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [monaco, context, mounted]);
 
-  React.useEffect(() => {
-    if (editorValue !== value) {
-      setEditorValue(value);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value]);
   React.useEffect(() => {
     if (focused) {
       editorRef.current?.focus();
@@ -103,14 +96,15 @@ function AutocompleteInput({
     ) => {
       if (typeof val === 'string') {
         // formatting value to avoid the new line
-        let formatted = (hasSelection ? value : val).replace(/[\n\r]/g, '');
+        let formatted = val.replace(/[\n\r]/g, '');
         if (ev.changes[0].text === '\n') {
+          formatted = value.replace(/[\n\r]/g, '');
           editorRef.current!.setValue(formatted);
           if (onEnter) {
-            onChange(formatted, ev);
             onEnter();
           }
         }
+        onChange(formatted, ev);
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps

diff --git a/.../ui/src/pages/RunDetail/RunOverviewTab/components/ParamsCard/RunOverviewTabParamsCard.tsx b/.../ui/src/pages/RunDetail/RunOverviewTab/components/ParamsCard/RunOverviewTabParamsCard.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import * as dot from 'dot-object';
+import _ from 'lodash-es';
 
 import ErrorBoundary from 'components/ErrorBoundary/ErrorBoundary';
 import Card from 'components/kit/Card/Card';
@@ -11,10 +12,11 @@ import { formatValue } from 'utils/formatValue';
 
 function RunOverviewTabParamsCard({ runParams, isRunInfoLoading }: any) {
   const tableData = React.useMemo(() => {
-    const paths = getObjectPaths(runParams, runParams).filter(
-      (path) => !path.startsWith('__system_params'),
-    );
-    const dotted = dot.dot(runParams);
+    const params = runParams.hasOwnProperty('__system_params')
+      ? _.omit(runParams, '__system_params')
+      : runParams;
+    const paths = getObjectPaths(params, params);
+    const dotted = dot.dot(params);
     const modified = dot.object(dotted);
     const resultTableList = paths.map((path, index) => {
       return {

diff --git a/aim/web/ui/src/utils/app/onSelectRunQueryChange.ts b/aim/web/ui/src/utils/app/onSelectRunQueryChange.ts
@@ -11,7 +11,7 @@ export default function onSelectRunQueryChange<M extends State>({
   if (configData?.select) {
     const newConfig = {
       ...configData,
-      select: { ...configData.select, advancedQuery: query, query },
+      select: { ...configData.select, query },
     };
 
     model.setState({ config: newConfig });