[fix] Improve Autocomplete input value updating latency (#1759)

aimhubio · May 17, 2022 · c4a8b5a · c4a8b5a
1 parent bb04a8f
commit c4a8b5a
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git a/aim/web/ui/src/components/AutocompleteInput/AutocompleteInput.tsx b/aim/web/ui/src/components/AutocompleteInput/AutocompleteInput.tsx
@@ -31,6 +31,7 @@ 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();
@@ -53,6 +54,12 @@ 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();
@@ -100,10 +107,10 @@ function AutocompleteInput({
         if (ev.changes[0].text === '\n') {
           editorRef.current!.setValue(formatted);
           if (onEnter) {
+            onChange(formatted, ev);
             onEnter();
           }
         }
-        onChange(formatted, ev);
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps

diff --git a/aim/web/ui/src/pages/RunDetail/RunLogsTab/RunLogsTab.scss b/aim/web/ui/src/pages/RunDetail/RunLogsTab/RunLogsTab.scss
@@ -5,7 +5,8 @@
   height: 100%;
   max-height: 100%;
   .RunDetailLogsTab {
-    border: $border-grey;
+    border-left: $border-grey;
+    border-right: $border-grey;
     height: 100%;
     background-color: #ffffff;
     .Logs {

diff --git a/aim/web/ui/src/pages/RunDetail/RunLogsTab/RunLogsTab.tsx b/aim/web/ui/src/pages/RunDetail/RunLogsTab/RunLogsTab.tsx
@@ -123,15 +123,18 @@ function RunLogsTab({
   }, [runLogs]);
 
   React.useEffect(() => {
-    if (lastRequestType === LogsLastRequestEnum.LOAD_MORE) {
+    if (
+      lastRequestType === LogsLastRequestEnum.LOAD_MORE &&
+      visibleItemsRange.current
+    ) {
       listRef.current?.scrollToItem?.(
-        visibleItemsRange.current[0] + updatedLogsCount,
+        visibleItemsRange.current?.[0] + updatedLogsCount,
         'start',
       );
       setLastRequestType(LogsLastRequestEnum.DEFAULT);
     } else if (
       lastRequestType === LogsLastRequestEnum.LIVE_UPDATE &&
-      visibleItemsRange.current[1] + updatedLogsCount >=
+      visibleItemsRange.current?.[1] + updatedLogsCount >=
         dataRef.current?.length - 1
     ) {
       if (!_.isEmpty(keysList)) {
@@ -173,11 +176,11 @@ function RunLogsTab({
   return (
     <ErrorBoundary>
       <BusyLoaderWrapper
-        isLoading={isRunLogsLoading || _.isNil(runLogs) || _.isEmpty(keysList)}
+        isLoading={isRunLogsLoading}
         className='runDetailParamsTabLoader'
         height='100%'
       >
-        {!_.isEmpty(runLogs) ? (
+        {!_.isEmpty(runLogs) && !_.isEmpty(keysList) ? (
           <div className='RunDetailLogsTabWrapper'>
             <div className='RunDetailLogsTab'>
               <div className='Logs' ref={logsContainerRef}>