Refresh handle (#502)

* loading Graph

* refresh check

* show graph check

* lint fix

Author: prakriti-solankey

frontend/src/components/Content.tsx

@@ -267,8 +267,9 @@ const Content: React.FC<ContentProps> = ({
   const handleOpenGraphClick = () => {
     const bloomUrl = process.env.BLOOM_URL;
     const uriCoded = userCredentials?.uri.replace(/:\d+$/, '');
-    const connectURL = `${uriCoded?.split('//')[0]}//${userCredentials?.userName}@${uriCoded?.split('//')[1]}:${userCredentials?.port ?? '7687'
-      }`;
+    const connectURL = `${uriCoded?.split('//')[0]}//${userCredentials?.userName}@${uriCoded?.split('//')[1]}:${
+      userCredentials?.port ?? '7687'
+    }`;
     const encodedURL = encodeURIComponent(connectURL);
     const replacedUrl = bloomUrl?.replace('{CONNECT_URL}', encodedURL);
     window.open(replacedUrl, '_blank');
@@ -278,10 +279,10 @@ const Content: React.FC<ContentProps> = ({
     isLeftExpanded && isRightExpanded
       ? 'contentWithExpansion'
       : isRightExpanded
-        ? 'contentWithChatBot'
-        : !isLeftExpanded && !isRightExpanded
-          ? 'w-[calc(100%-128px)]'
-          : 'contentWithDropzoneExpansion';
+      ? 'contentWithChatBot'
+      : !isLeftExpanded && !isRightExpanded
+      ? 'w-[calc(100%-128px)]'
+      : 'contentWithDropzoneExpansion';
 
   const handleGraphView = () => {
     setOpenGraphView(true);
@@ -317,10 +318,29 @@ const Content: React.FC<ContentProps> = ({
     [selectedfileslength, completedfileNo]
   );
 
-  const deleteFileClickHandler: React.MouseEventHandler<HTMLButtonElement> = () => {
-    setshowDeletePopUp(true);
+  const processingCheck = () => {
+    const processingFiles = filesData.some((file) => file.status === 'Processing');
+    const selectedRowProcessing = selectedRows.some((row) =>
+      filesData.some((file) => file.name === row && file.status === 'Processing')
+    );
+    return processingFiles || selectedRowProcessing;
   };
 
+  const filesForProcessing = useMemo(() => {
+    let newstatusfiles: CustomFile[] = [];
+    if (selectedRows.length) {
+      selectedRows.forEach((f) => {
+        const parsedFile: CustomFile = JSON.parse(f);
+        if (parsedFile.status === 'New') {
+          newstatusfiles.push(parsedFile);
+        }
+      });
+    } else if (filesData.length) {
+      newstatusfiles = filesData.filter((f) => f.status === 'New');
+    }
+    return newstatusfiles;
+  }, [filesData, selectedRows]);
+
   const handleDeleteFiles = async (deleteEntities: boolean) => {
     try {
       setdeleteLoading(true);
@@ -502,7 +522,6 @@ const Content: React.FC<ContentProps> = ({
     });
     localStorage.setItem('isSchema', JSON.stringify(true));
   };
-
   return (
     <>
       {alertDetails.showAlert && (
@@ -590,8 +609,9 @@ const Content: React.FC<ContentProps> = ({
           }}
         ></FileTable>
         <Flex
-          className={`${!isLeftExpanded && !isRightExpanded ? 'w-[calc(100%-128px)]' : 'w-full'
-            } p-2.5 absolute bottom-4 mt-1.5 self-start`}
+          className={`${
+            !isLeftExpanded && !isRightExpanded ? 'w-[calc(100%-128px)]' : 'w-full'
+          } p-2.5 absolute bottom-4 mt-1.5 self-start`}
           justifyContent='space-between'
           flexDirection='row'
         >
@@ -601,6 +621,7 @@ const Content: React.FC<ContentProps> = ({
             placeholder='Select LLM Model'
             defaultValue={defaultLLM}
             view='ContentView'
+            isDisabled={false}
           />
           <Flex flexDirection='row' gap='4' className='self-end'>
             <ButtonWithToolTip
@@ -659,6 +680,7 @@ const Content: React.FC<ContentProps> = ({
         open={openGraphView}
         setGraphViewOpen={setOpenGraphView}
         viewPoint={viewPoint}
+        processingCheck={processingCheck()}
       />
     </>
   );

frontend/src/components/Dropdown.tsx

@@ -2,12 +2,14 @@ import { Dropdown } from '@neo4j-ndl/react';
 import { DropdownProps, OptionType } from '../types';
 import { useMemo } from 'react';
 import { capitalize } from '../utils/Utils';
+
 interface ReusableDropdownProps extends DropdownProps {
   options: string[];
   placeholder?: string;
   defaultValue?: string;
   children?: React.ReactNode;
   view?: 'ContentView' | 'GraphView';
+  isDisabled: boolean;
 }
 const DropdownComponent: React.FC<ReusableDropdownProps> = ({
   options,
@@ -16,6 +18,7 @@ const DropdownComponent: React.FC<ReusableDropdownProps> = ({
   onSelect,
   children,
   view,
+  isDisabled,
 }) => {
   const handleChange = (selectedOption: OptionType | null | void) => {
     onSelect(selectedOption);
@@ -38,6 +41,7 @@ const DropdownComponent: React.FC<ReusableDropdownProps> = ({
             placeholder: placeholder || 'Select an option',
             defaultValue: defaultValue ? { label: capitalize(defaultValue), value: defaultValue } : undefined,
             menuPlacement: 'auto',
+            isDisabled: isDisabled,
           }}
           size='medium'
           fluid

frontend/src/components/FileTable.tsx

@@ -320,7 +320,8 @@ const FileTable: React.FC<FileTableProps> = ({ isExpanded, connectionStatus, set
               placement='right'
               text='Graph'
               size='large'
-              disabled={!(info.getValue() === 'Completed' || info.getValue() == 'Cancelled')}
+              label='Graph view'
+              disabled={info.getValue() === 'New' || info.getValue() === 'Uploading'}
               clean
               onClick={() => onInspect(info?.row?.original?.name as string)}
             >