Refresh handle

frontend/src/components/Content.tsx

@@ -271,8 +271,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');
@@ -282,10 +283,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);
@@ -321,6 +322,14 @@ const Content: React.FC<ContentProps> = ({
     [selectedfileslength, completedfileNo]
   );
 
+  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) {
@@ -517,7 +526,6 @@ const Content: React.FC<ContentProps> = ({
     });
     localStorage.setItem('isSchema', JSON.stringify(true));
   };
-
   return (
     <>
       {alertDetails.showAlert && (
@@ -605,8 +613,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'
         >
@@ -616,6 +625,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
@@ -676,6 +686,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

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

frontend/src/components/Graph/GraphViewModal.tsx

@@ -19,13 +19,13 @@ import { LegendsChip } from './LegendsChip';
 import graphQueryAPI from '../../services/GraphQuery';
 import {
   entityGraph,
+  graphQuery,
   graphView,
   intitalGraphType,
   knowledgeGraph,
   lexicalGraph,
   mouseEventCallbacks,
   nvlOptions,
-  queryMap,
 } from '../../utils/Constants';
 import { useFileContext } from '../../context/UsersFiles';
 // import CheckboxSelection from './CheckboxSelection';
@@ -37,6 +37,7 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
   viewPoint,
   nodeValues,
   relationshipValues,
+  processingCheck,
 }) => {
   const nvlRef = useRef<NVL>(null);
   const [nodes, setNodes] = useState<Node[]>([]);
@@ -62,12 +63,15 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
   //   }
   //   setGraphType(newGraphSelected);
   // };
+
   const handleZoomToFit = () => {
     nvlRef.current?.fit(
       allNodes.map((node) => node.id),
       {}
     );
   };
+
+  // Destroy the component
   useEffect(() => {
     const timeoutId = setTimeout(() => {
       handleZoomToFit();
@@ -83,23 +87,52 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
       setAllRelationships([]);
     };
   }, []);
-  const graphQuery: string = queryMap.DocChunkEntities;
+
+  // To get nodes and relations on basis of view
   const fetchData = useCallback(async () => {
     try {
       const nodeRelationshipData =
         viewPoint === 'showGraphView'
           ? await graphQueryAPI(
-            userCredentials as UserCredentials,
-            graphQuery,
-            selectedRows.map((f) => JSON.parse(f).name)
-          )
+              userCredentials as UserCredentials,
+              graphQuery,
+              selectedRows.map((f) => JSON.parse(f).name)
+            )
           : await graphQueryAPI(userCredentials as UserCredentials, graphQuery, [inspectedName ?? '']);
       return nodeRelationshipData;
     } catch (error: any) {
       console.log(error);
     }
   }, [viewPoint, selectedRows, graphQuery, inspectedName, userCredentials]);
 
+  // Api call to get the nodes and relations
+  const graphApi = () => {
+    fetchData()
+      .then((result) => {
+        if (result && result.data.data.nodes.length > 0) {
+          const neoNodes = result.data.data.nodes.map((f: Node) => f);
+          const neoRels = result.data.data.relationships.map((f: Relationship) => f);
+          const { finalNodes, finalRels, schemeVal } = processGraphData(neoNodes, neoRels);
+          setAllNodes(finalNodes);
+          setAllRelationships(finalRels);
+          setScheme(schemeVal);
+          setNodes(finalNodes);
+          setRelationships(finalRels);
+          setNewScheme(schemeVal);
+          setLoading(false);
+        } else {
+          setLoading(false);
+          setStatus('danger');
+          setStatusMessage(`No Nodes and Relations for the ${inspectedName} file`);
+        }
+      })
+      .catch((error: any) => {
+        setLoading(false);
+        setStatus('danger');
+        setStatusMessage(error.message);
+      });
+  };
+
   useEffect(() => {
     if (open) {
       setLoading(true);
@@ -113,36 +146,11 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
         setNewScheme(schemeVal);
         setLoading(false);
       } else {
-        fetchData()
-          .then((result) => {
-            if (result && result.data.data.nodes.length > 0) {
-              const neoNodes = result.data.data.nodes.map((f: Node) => f);
-              const neoRels = result.data.data.relationships.map((f: Relationship) => f);
-              const { finalNodes, finalRels, schemeVal } = processGraphData(neoNodes, neoRels);
-              setAllNodes(finalNodes);
-              setAllRelationships(finalRels);
-              setScheme(schemeVal);
-              setNodes(finalNodes);
-              setRelationships(finalRels);
-              setNewScheme(schemeVal);
-              setLoading(false);
-            } else {
-              setLoading(false);
-              setStatus('danger');
-              setStatusMessage(`Unable to retrieve document graph for ${inspectedName}`);
-            }
-          })
-          .catch((error: any) => {
-            setLoading(false);
-            setStatus('danger');
-            setStatusMessage(error.message);
-          });
+        graphApi();
       }
     }
   }, [open]);
 
-  console.log('nodes', nodes);
-
   if (!open) {
     return <></>;
   }
@@ -151,24 +159,35 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
     viewPoint === 'showGraphView' || viewPoint === 'chatInfoView'
       ? 'Generated Graph'
       : `Inspect Generated Graph from ${inspectedName}`;
-  const checkBoxView = viewPoint !== 'chatInfoView';
+
+  const dropDownView = viewPoint !== 'chatInfoView';
+
   const nvlCallbacks = {
     onLayoutComputing(isComputing: boolean) {
       if (!isComputing) {
         handleZoomToFit();
       }
     },
   };
+
+  // To handle the current zoom in function of graph
   const handleZoomIn = () => {
     nvlRef.current?.setZoom(nvlRef.current.getScale() * 1.3);
   };
+
+  // To handle the current zoom out function of graph
   const handleZoomOut = () => {
     nvlRef.current?.setZoom(nvlRef.current.getScale() * 0.7);
   };
+
+  // Refresh the graph with nodes and relations if file is processing
   const handleRefresh = () => {
-    // fetchData();
-    console.log('hello');
+    setLoading(true);
+    setGraphType(intitalGraphType);
+    graphApi();
   };
+
+  // when modal closes reset all states to default
   const onClose = () => {
     setStatus('unknown');
     setStatusMessage('');
@@ -178,6 +197,8 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
     setNodes([]);
     setRelationships([]);
   };
+
+  // sort the legends in with Chunk and Document always the first two values
   const legendCheck = Object.keys(newScheme).sort((a, b) => {
     if (a === 'Document' || a === 'Chunk') {
       return -1;
@@ -187,6 +208,7 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
     return a.localeCompare(b);
   });
 
+  // setting the default dropdown values
   const getDropdownDefaultValue = () => {
     if (graphType.includes('Document') && graphType.includes('Chunk') && graphType.includes('Entities')) {
       return knowledgeGraph;
@@ -200,15 +222,22 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
     return '';
   };
 
+  // Make a function call to store the nodes and relations in their states
   const initGraph = (graphType: GraphType[], finalNodes: Node[], finalRels: Relationship[], schemeVal: Scheme) => {
     if (allNodes.length > 0 && allRelationships.length > 0) {
-      const { filteredNodes, filteredRelations, filteredScheme } = filterData(graphType, finalNodes, finalRels, schemeVal);
+      const { filteredNodes, filteredRelations, filteredScheme } = filterData(
+        graphType,
+        finalNodes,
+        finalRels,
+        schemeVal
+      );
       setNodes(filteredNodes);
       setRelationships(filteredRelations);
       setNewScheme(filteredScheme);
     }
-  }
+  };
 
+  // handle dropdown value change and call the init graph method
   const handleDropdownChange = (selectedOption: OptionType | null | void) => {
     if (selectedOption?.value) {
       const selectedValue = selectedOption.value;
@@ -243,13 +272,16 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
             {/* {checkBoxView && (
                 <CheckboxSelection graphType={graphType} loading={loading} handleChange={handleCheckboxChange} />
             )} */}
-            {checkBoxView && (<DropdownComponent
-              onSelect={handleDropdownChange}
-              options={graphView}
-              placeholder='Select Graph Type'
-              defaultValue={getDropdownDefaultValue()}
-              view='GraphView'
-            />)}
+            {dropDownView && (
+              <DropdownComponent
+                onSelect={handleDropdownChange}
+                options={graphView}
+                placeholder='Select Graph Type'
+                defaultValue={getDropdownDefaultValue()}
+                view='GraphView'
+                isDisabled={nodes.length === 0 || allNodes.length === 0}
+              />
+            )}
           </Flex>
         </Dialog.Header>
         <Dialog.Content className='flex flex-col n-gap-token-4 w-full grow overflow-auto border border-palette-neutral-border-weak'>
@@ -278,14 +310,16 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
                       nvlCallbacks={nvlCallbacks}
                     />
                     <IconButtonArray orientation='vertical' floating className='absolute bottom-4 right-4'>
-                      <IconButtonWithToolTip
-                        label='Refresh'
-                        text='Refresh graph'
-                        onClick={handleRefresh}
-                        placement='left'
-                      >
-                        <ArrowPathIconOutline />
-                      </IconButtonWithToolTip>
+                      {viewPoint !== 'chatInfoView' && processingCheck && (
+                        <IconButtonWithToolTip
+                          label='Refresh'
+                          text='Refresh graph'
+                          onClick={handleRefresh}
+                          placement='left'
+                        >
+                          <ArrowPathIconOutline />
+                        </IconButtonWithToolTip>
+                      )}
                       <IconButtonWithToolTip label='Zoomin' text='Zoom in' onClick={handleZoomIn} placement='left'>
                         <MagnifyingGlassPlusIconOutline />
                       </IconButtonWithToolTip>

frontend/src/types.ts

@@ -246,6 +246,7 @@ export interface GraphViewModalProps {
   viewPoint: string;
   nodeValues?: Node[];
   relationshipValues?: Relationship[];
+  processingCheck?: boolean;
 }
 
 export type GraphType = 'Document' | 'Entities' | 'Chunk';