graph view changes

Author: prakriti-solankey

frontend/src/HOC/CustomDropdown.tsx

@@ -1,6 +1,5 @@
 import { Button, Dialog, TextInput, Dropdown, Banner } from '@neo4j-ndl/react';
 import { useState } from 'react';
-import { setDriver } from '../utils/Driver';
 import { useCredentials } from '../context/UserCredentials';
 import { ConnectionModalProps } from '../types';
 import connectAPI from '../services/ConnectAPI';
@@ -18,7 +17,7 @@ const ConnectionModal: React.FunctionComponent<ConnectionModalProps> = ({
   const [database, setDatabase] = useState<string>(localStorage.getItem('database') ?? 'neo4j');
   const [username, setUsername] = useState<string>(localStorage.getItem('username') ?? 'neo4j');
   const [password, setPassword] = useState<string>('');
-  const { setUserCredentials } = useCredentials();
+  const { setUserCredentials, userCredentials } = useCredentials();
   const [statusMessage, setStatusMessage] = useState<string>('');
   const [status, setStatus] = useState<'unknown' | 'success' | 'info' | 'warning' | 'danger'>('unknown');
   const [loading, setLoading] = useState<boolean>(false);
@@ -32,14 +31,14 @@ const ConnectionModal: React.FunctionComponent<ConnectionModalProps> = ({
     localStorage.setItem('database', database);
     localStorage.setItem('selectedProtocol', selectedProtocol);
     setLoading(true);
-    const status = await connectAPI(connectionURI);
-    if (status === 'success') {
+    const response = await connectAPI(userCredentials);
+    if (response.data.status === 'Success') {
       setOpenConnection(false);
       setConnectionStatus(true);
       setStatusMessage('');
     } else {
       setStatus('danger');
-      setStatusMessage(status);
+      setStatusMessage(response.data.message);
       setConnectionStatus(false);
       setTimeout(() => {
         setStatus('unknown');

frontend/src/components/ConnectionModal.tsx

@@ -12,7 +12,6 @@ import { ContentProps } from '../types';
 import { updateGraphAPI } from '../services/UpdateGraph';
 import GraphViewModal from './GraphViewModal';
 
-
 const Content: React.FC<ContentProps> = ({ isExpanded, showChatBot, openChatBot }) => {
   const [init, setInit] = useState<boolean>(false);
   const [openConnection, setOpenConnection] = useState<boolean>(false);
@@ -23,8 +22,6 @@ const Content: React.FC<ContentProps> = ({ isExpanded, showChatBot, openChatBot
   const { filesData, files, setFilesData, setModel, model } = useFileContext();
   const [errorMessage, setErrorMessage] = useState<string>('');
   const [showAlert, setShowAlert] = useState<boolean>(false);
-  const [showGraph, setShowGraph] = useState<boolean>(false);
-  const [selectedValue, setSelectedValue] = useState<string>('');
   const [viewPoint, setViewPoint] = useState<string>('tableView');
 
   useEffect(() => {
@@ -159,23 +156,23 @@ const Content: React.FC<ContentProps> = ({ isExpanded, showChatBot, openChatBot
     setShowAlert(false);
   };
 
-  const openGraphUrl = ` https://bloom-latest.s3.eu-west-2.amazonaws.com/assets/index.html?connectURL=${userCredentials?.userName
-    }@${localStorage.getItem('hostname')}%3A${localStorage.getItem('port') ?? '7687'}&search=Show+me+a+graph`;
+  const openGraphUrl = ` https://bloom-latest.s3.eu-west-2.amazonaws.com/assets/index.html?connectURL=${
+    userCredentials?.userName
+  }@${localStorage.getItem('hostname')}%3A${localStorage.getItem('port') ?? '7687'}&search=Show+me+a+graph`;
 
   const classNameCheck =
     isExpanded && showChatBot
       ? 'contentWithBothDrawers'
       : isExpanded
-        ? 'contentWithExpansion'
-        : showChatBot
-          ? 'contentWithChatBot'
-          : 'contentWithNoExpansion';
-
+      ? 'contentWithExpansion'
+      : showChatBot
+      ? 'contentWithChatBot'
+      : 'contentWithNoExpansion';
 
   const handleGraphView = () => {
     setOpenGraphView(true);
     setViewPoint('showGraphView');
-  }
+  };
 
   return (
     <>

frontend/src/components/Content.tsx

@@ -114,11 +114,20 @@ const FileTable: React.FC<FileTableProps> = ({ isExpanded, connectionStatus, set
     }),
     columnHelper.accessor((row) => row.status, {
       id: 'inspect',
-      cell: (info) => <> <IconButton aria-label='Toggle settings'
-        size='large' disabled={statusCheck(info.getValue()) !== 'success'} 
-        clean onClick={() => onInspect(info.row.original.name)}>
-        <MagnifyingGlassCircleIconSolid />
-      </IconButton></>,
+      cell: (info) => (
+        <>
+          {' '}
+          <IconButton
+            aria-label='Toggle settings'
+            size='large'
+            disabled={statusCheck(info.getValue()) !== 'success'}
+            clean
+            onClick={() => onInspect(info.row.original.name)}
+          >
+            <MagnifyingGlassCircleIconSolid />
+          </IconButton>
+        </>
+      ),
       header: () => <span>View</span>,
       footer: (info) => info.column.id,
     }),
@@ -129,8 +138,8 @@ 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) {
+          throw new Error('Please check backend connection');
         }
         if (res.data.status !== 'Failed') {
           const prefiles: any[] = [];