graph

Author: prakriti-solankey

frontend/src/HOC/CustomDropdown.tsx

@@ -5,22 +5,21 @@ const GraphDropdown: React.FC<DropdownProps> = ({ onSelect, isDisabled }) => {
   const handleChange = (selectedOption: OptionType | null | void) => {
     onSelect(selectedOption);
   };
-  const allOptions = ['Pure Document','Document and Entities', 'Entities'];
+  const allOptions = ['Document Structure','Document & Knowledge Graph', 'Knowledge Graph Entities'];
   return (
     <>
-      <div style={{ width: '150px' }}>
+      <div style={{ width: '250px' }}>
         <Dropdown
           type='select'
           aria-label='A selection dropdown'
           selectProps={{
             onChange: handleChange,
             options: allOptions.map((option) => ({ label: option, value: option })),
-            placeholder: 'Select Graph Type',
-            defaultValue: { label: 'Pure Document', value: 'Pure Document' },
+            defaultValue: { label: 'Document Structure', value: 'Document Structure' },
             menuPlacement: 'auto',
             isDisabled,
           }}
-          size='medium'
+          size='large'
           fluid
         />
       </div>

frontend/src/components/ConnectionModal.tsx

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { setDriver } from '../utils/Driver';
 import { useCredentials } from '../context/UserCredentials';
 import { ConnectionModalProps } from '../types';
+import connectAPI from '../services/ConnectAPI';
 
 const ConnectionModal: React.FunctionComponent<ConnectionModalProps> = ({
   open,
@@ -31,7 +32,7 @@ const ConnectionModal: React.FunctionComponent<ConnectionModalProps> = ({
     localStorage.setItem('database', database);
     localStorage.setItem('selectedProtocol', selectedProtocol);
     setLoading(true);
-    const status = await setDriver(connectionURI, username, password, database);
+    const status = await connectAPI(connectionURI);
     if (status === 'success') {
       setOpenConnection(false);
       setConnectionStatus(true);

frontend/src/components/Content.tsx

@@ -25,6 +25,7 @@ const Content: React.FC<ContentProps> = ({ isExpanded, showChatBot, openChatBot
   const [showAlert, setShowAlert] = useState<boolean>(false);
   const [showGraph, setShowGraph] = useState<boolean>(false);
   const [selectedValue, setSelectedValue] = useState<string>('');
+  const [viewPoint, setViewPoint] = useState<string>('tableView');
 
   useEffect(() => {
     if (!init) {
@@ -173,33 +174,21 @@ const Content: React.FC<ContentProps> = ({ isExpanded, showChatBot, openChatBot
 
 
   const handleGraphView = () => {
-    setOpenGraphView(!openGraphView);
-    console.log('hello ppl', openGraphView);
-  }
-  const handleCloseGraph = () => {
-    setShowGraph(false);
-  };
-
-  const handleSelectvalue = (value: string) => {
-    setSelectedValue(value);
+    setOpenGraphView(true);
+    setViewPoint('showGraphView');
   }
 
   return (
     <>
       <CustomAlert open={showAlert} handleClose={handleClose} alertMessage={errorMessage} />
+
       <div className={`n-bg-palette-neutral-bg-default ${classNameCheck}`}>
         <Flex className='w-full' alignItems='center' justifyContent='space-between' style={{ flexFlow: 'row' }}>
           <ConnectionModal
             open={openConnection}
             setOpenConnection={setOpenConnection}
             setConnectionStatus={setConnectionStatus}
           />
-          <GraphViewModal
-            inspectedName={inspectedName}
-            open={openGraphView}
-            setGraphViewOpen={setOpenGraphView}
-            viewPoint='tableGraph'
-          />
           <Typography
             variant='body-medium'
             style={{ display: 'flex', padding: '20px', alignItems: 'center', justifyContent: 'center' }}
@@ -235,6 +224,7 @@ const Content: React.FC<ContentProps> = ({ isExpanded, showChatBot, openChatBot
           onInspect={(name) => {
             setInspectedName(name);
             setOpenGraphView(true);
+            setViewPoint('tableView');
           }}
         ></FileTable>
         <Flex
@@ -260,14 +250,6 @@ const Content: React.FC<ContentProps> = ({ isExpanded, showChatBot, openChatBot
             >
               Show Graph
             </Button>
-            {showGraph && (
-              <GraphViewModal
-                inspectedName={inspectedName}
-                open={openGraphView}
-                setGraphViewOpen={setOpenGraphView}
-                viewPoint='showGraphView'
-              />
-            )}
             <Button href={openGraphUrl} target='_blank' disabled={disableCheckGraph} className='ml-0.5'>
               Open Graph
             </Button>
@@ -281,6 +263,12 @@ const Content: React.FC<ContentProps> = ({ isExpanded, showChatBot, openChatBot
           </Flex>
         </Flex>
       </div>
+      <GraphViewModal
+        inspectedName={inspectedName}
+        open={openGraphView}
+        setGraphViewOpen={setOpenGraphView}
+        viewPoint={viewPoint}
+      />
     </>
   );
 };

frontend/src/components/FileTable.tsx

@@ -129,6 +129,9 @@ const FileTable: React.FC<FileTableProps> = ({ isExpanded, connectionStatus, set
       try {
         setIsLoading(true);
         const res: any = await getSourceNodes(userCredentials);
+        if(!res.data){
+          throw new Error('Please check backend connection'); 
+        }
         if (res.data.status !== 'Failed') {
           const prefiles: any[] = [];
           if (res.data.data.length) {

frontend/src/components/GraphViewModal.tsx

@@ -1,11 +1,10 @@
-import { Button, Dialog, Flex } from '@neo4j-ndl/react';
+import { Button, Dialog, LoadingSpinner } from '@neo4j-ndl/react';
 import { useEffect, useRef, useState } from 'react';
 import { GraphViewModalProps } from '../types';
 import { InteractiveNvlWrapper } from '@neo4j-nvl/react';
 import NVL, { NvlOptions } from '@neo4j-nvl/core';
 import { driver } from '../utils/Driver';
 import GraphDropdown from '../HOC/CustomDropdown';
-import { useFileContext } from '../context/UsersFiles';
 
 const uniqueElementsForDocQuery = `
 // Finds a document with chunks & entities. Transforms path objects to return a list of unique nodes and relationships.
@@ -19,6 +18,55 @@ UNWIND rels as rel
 WITH  nodes, collect(DISTINCT rel) as rels
 RETURN nodes, rels`
 
+const pureDocument = `
+MATCH (d:Document)
+WITH d ORDER BY d.createdAt DESC 
+MATCH files = (d)<-[part:PART_OF]-(c:Chunk)
+WITH nodes(files) as nodes, relationships(files) as rels
+UNWIND nodes as node
+WITH  collect(DISTINCT node) as nodes, collect(rels) as relslist
+UNWIND relslist as rels
+UNWIND rels as rel
+WITH  nodes, collect(DISTINCT rel) as rels
+RETURN nodes, rels,
+collect { MATCH p=(c)-[:NEXT_CHUNK]-() RETURN p } as chain, 
+collect { MATCH p=(c)-[:SIMILAR]-() RETURN p } as chunks;
+ `
+
+
+const docEntitiesGraph = `
+MATCH (d:Document) 
+WITH d ORDER BY d.createdAt DESC 
+MATCH files = (d)<-[:PART_OF]-(c:Chunk)
+OPTIONAL MATCH p=(d)<-[:PART_OF]-(c:Chunk)-[:HAS_ENTITY]->(e)--(:!Chunk)
+WITH nodes(p) as nodes, relationships(p) as rels
+UNWIND nodes as node
+WITH  collect(DISTINCT node) as nodes, collect(rels) as relslist
+UNWIND relslist as rels
+UNWIND rels as rel
+WITH  nodes, collect(DISTINCT rel) as rels
+RETURN nodes, rels,
+collect { MATCH p=(c)-[:NEXT_CHUNK]-() RETURN p } as chain, 
+collect { MATCH p=(c)-[:SIMILAR]-() RETURN p } as chunks, 
+collect { OPTIONAL MATCH p=(c)-[:HAS_ENTITY]->(e)--(:!Chunk) RETURN p } as entities;`
+
+
+const knowledgeGraph = `
+MATCH (d:Document) 
+WITH d ORDER BY d.createdAt DESC 
+LIMIT 50
+MATCH files = (d)<-[:PART_OF]-(c:Chunk)
+RETURN 
+collect { OPTIONAL MATCH p=(c)-[:HAS_ENTITY]->(e)--(:!Chunk) RETURN p } as entities`
+
+
+const queryMap: any = {
+  'Document Structure': pureDocument,
+  'Document & Knowledge Graph': docEntitiesGraph,
+  'Knowledge Graph Entities': knowledgeGraph
+};
+
+
 const colors = [
   '#588c7e',
   '#f2e394',
@@ -77,7 +125,8 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
   const nvlRef = useRef<NVL>(null);
   const [nodes, setNodes] = useState([]);
   const [relationships, setRelationships] = useState([]);
-  const {setGraphType } = useFileContext();
+  const [graphType, setGraphType] = useState<string>('Document Structure');
+  const [loading, setLoading] = useState<boolean>(false);
 
   const handleDropdownChange = (option: any) => {
     setGraphType(option.value);
@@ -87,12 +136,20 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
     if (open) {
       setNodes([]);
       setRelationships([]);
+      let queryToRun = '';
+      if (viewPoint === 'tableView') {
+        queryToRun = uniqueElementsForDocQuery;
+      }
+      else {
+        queryToRun = queryMap[graphType]
+      }
 
       const session = driver.session();
-      session.run(uniqueElementsForDocQuery, { 'document_name': inspectedName }).then(
+      session.run(queryToRun, { 'document_name': inspectedName }).then(
         (results) => {
           // If this doc exists in the graph, the result length will be one.
-          if (results.records.length == 1) {
+          setLoading(true);
+          if (results.records.length >= 1) {
             const neo4jNodes = results.records[0]._fields[0];
             const neo4jRels = results.records[0]._fields[1];
 
@@ -120,13 +177,16 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
 
             setNodes(newNodes);
             setRelationships(newRels);
-          } else {
+            setLoading(false);
+
+          }
+          else {
             console.error("Unable to retrieve document graph for " + inspectedName, results);
           }
         }
       );
     }
-  }, [open]);
+  }, [open, graphType]);
 
   // If the modal is closed, render nothing
   if (!open) {
@@ -152,13 +212,12 @@ const GraphViewModal: React.FunctionComponent<GraphViewModalProps> = ({
   return (
     <>
       <Dialog size='unset' open={open} aria-labelledby='form-dialog-title' disableCloseButton>
-        <Flex className='w-full' alignItems='center' justifyContent='space-between' style={{ flexFlow: 'row' }}>
-          <Dialog.Header id='form-dialog-title'>Inspect Generated Graph from {inspectedName}. </Dialog.Header>
-          {true && <GraphDropdown onSelect={handleDropdownChange} isDisabled={false} />}
-        </Flex>
+        <Dialog.Header id='form-dialog-title'>Inspect Generated Graph from {inspectedName}. </Dialog.Header>
+        {viewPoint === 'showGraphView' && <GraphDropdown onSelect={handleDropdownChange} isDisabled={false} />}
         <Dialog.Content className='n-flex n-flex-col n-gap-token-4'>
           <></>
-          <div style={{ width: '100%', height: '600px' }}>
+          <div style={{ width: '100%', height: '600px', border: '1px solid red' }}>
+          {/* {loading && <LoadingSpinner size="large"/>} */}
             <InteractiveNvlWrapper
               ref={nvlRef}
               nodes={nodes}

frontend/src/components/Layout/DrawerDropzone.tsx

@@ -54,7 +54,6 @@ const DrawerDropzone: React.FC<DrawerProps> = ({ isExpanded }) => {
         type='push'
         closeable={false}
         key={'leftdrawer'}
-        onExpandedChange={function Ha() {}}
       >
         <Drawer.Body style={{ overflow: 'hidden', height: 'intial' }}>
           <div className='flex h-full flex-col'>

frontend/src/context/UsersFiles.tsx

@@ -19,7 +19,7 @@ const FileContextProvider: React.FC<FileContextProviderProps> = ({ children }) =
   const [files, setFiles] = useState<File[] | []>([]);
   const [filesData, setFilesData] = useState<CustomFile[] | []>([]);
   const [model, setModel] = useState<string>('OpenAI GPT 3.5');
-  const [graphType, setGraphType]= useState<string>('Pure document')
+  const [graphType, setGraphType]= useState<string>('Knowledge Graph Entities')
   const value: FileContextType = {
     files,
     filesData,

frontend/src/services/ConnectAPI.ts

@@ -0,0 +1,22 @@
+import axios from 'axios';
+import { url } from '../utils/Utils';
+
+const connectAPI = async (userCredentials: any) => {
+  try {
+    const formData = new FormData();
+    formData.append('uri', userCredentials?.uri ?? '');
+    formData.append('database', userCredentials?.database ?? '');
+    formData.append('userName', userCredentials?.userName ?? '');
+    formData.append('password', userCredentials?.password ?? '');
+    const response: any = await axios.post(`${url()}/connect`, formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    });
+    return response;
+  } catch (error) {
+    console.log('Error in connecting to the Neo4j instance :', error);
+    throw error;
+  }
+};
+export default connectAPI;

frontend/src/services/UpdateGraph.ts

@@ -15,7 +15,7 @@ const updateGraphAPI = async (userCredentials: any) => {
     });
     return response;
   } catch (error) {
-    console.log('Error uploading file:', error);
+    console.log('Error updating the graph:', error);
     throw error;
   }
 };