Merge pull request #17 from msenechal/main

Small UI enhancements

Author: prakriti-solankey

frontend/src/components/ConnectionModal.tsx

@@ -11,11 +11,11 @@ export default function ConnectionModal({ open, setOpenConnection, setConnection
   const [database, setDatabase] = useState<string>('recommendations');
   const [username, setUsername] = useState<string>('recommendations');
   const [password, setPassword] = useState<string>('recommendations');
-  const {setUserCredentials}=useCredentials();
+  const { setUserCredentials } = useCredentials();
 
   function submitConnection() {
     const connectionURI = `${selectedProtocol}://${hostname}:${port}`;
-    setUserCredentials({uri:hostname,userName:username,password});
+    setUserCredentials({ uri: hostname, userName: username, password });
     setDriver(connectionURI, username, password).then((isSuccessful) => {
       setConnectionStatus(isSuccessful);
     });

frontend/src/components/Content.tsx

@@ -16,7 +16,11 @@ export default function Content() {
       let session = localStorage.getItem('neo4j.connection');
       if (session) {
         let neo4jConnection = JSON.parse(session);
-        setUserCredentials({ uri: neo4jConnection.uri, userName: neo4jConnection.user, password: neo4jConnection.password })
+        setUserCredentials({
+          uri: neo4jConnection.uri,
+          userName: neo4jConnection.user,
+          password: neo4jConnection.password,
+        });
         setDriver(neo4jConnection.uri, neo4jConnection.user, neo4jConnection.password).then((isSuccessful: boolean) => {
           setConnectionStatus(isSuccessful);
         });
@@ -26,61 +30,30 @@ export default function Content() {
   });
 
   return (
-    <>
-      <div
+    <div
+      className='n-bg-palette-neutral-bg-default'
+      style={{
+        width: '100%',
+        height: 'calc(100dvh - 58px)',
+        padding: 3,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: 1,
+      }}
+    >
+      <Flex
+        flexDirection='column'
         style={{
-          width: '100%',
-          padding: 3,
-          display: 'flex',
-          flexDirection: 'column',
+          padding: '12px',
+          justifyContent: 'center',
           alignItems: 'center',
-          gap: 1,
+          width: '100%',
+          marginTop: '10px',
         }}
       >
-        <div className='n-bg-palette-neutral-bg-default' style={{
-          width: '100%',
-          padding: 3,
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          gap: 1,
-        }}>
-          { /*
-          <ConnectionModal
-            open={openConnection}
-            setOpenConnection={setOpenConnection}
-            setConnectionStatus={setConnectionStatus}
-          />
-
-          <Typography variant='body-medium' style={{ display: 'flex', padding: '20px' }}>
-            Neo4j connection Status:
-            <Typography variant='body-medium' style={{ marginLeft: '10px' }}>
-              {!connectionStatus ? <Label color='danger'>Not connected</Label> : <Label color='success'>Connected</Label>}
-            </Typography>
-          </Typography>
-
-          {!connectionStatus ? (
-            <Button onClick={() => setOpenConnection(true)}>Connect to Neo4j</Button>
-          ) : (
-            <Button onClick={() => disconnect().then(() => setConnectionStatus(false))}>Disconnect</Button>
-          )}
-          */ }
-        </div>
-        <Flex
-          borderRadius="xl"
-          flexDirection="column"
-          style={{
-            border: '1px solid rgb(var(--theme-palette-neutral-border-weak))',
-            padding: '12px',
-            justifyContent: "center",
-            alignItems: "center",
-            width: "100%",
-            marginTop: "10px"
-          }}
-        >
-          <DropZone />
-        </Flex>
-      </div>
-    </>
+        <DropZone />
+      </Flex>
+    </div>
   );
 }

frontend/src/components/DropZone.tsx

@@ -12,7 +12,7 @@ interface CustomFile extends Partial<globalThis.File> {
   status: string;
   NodesCount: number;
   id: string;
-  relationshipCount: number,
+  relationshipCount: number;
 }
 
 export default function DropZone() {
@@ -99,8 +99,6 @@ export default function DropZone() {
   return (
     <>
       <Box
-        borderRadius='xl'
-        className=' n-border n-border-palette-primary-border-strong'
         style={{
           width: '100%',
           padding: '0.8em',

frontend/src/components/FileTable.tsx

@@ -3,13 +3,12 @@ import { useState, useEffect } from 'react';
 import { useReactTable, getCoreRowModel, createColumnHelper } from '@tanstack/react-table';
 import { formatFileSize } from '../utils/utils';
 
-
 interface CustomFile extends Partial<globalThis.File> {
-  processing: string,
-  status: string,
-  NodesCount: number,
-  id: string,
-  relationshipCount: number,
+  processing: string;
+  status: string;
+  NodesCount: number;
+  id: string;
+  relationshipCount: number;
 }
 export default function FileTable({ files }: { files: CustomFile[] | [] }) {
   const [data, setData] = useState([...files]);
@@ -33,43 +32,41 @@ export default function FileTable({ files }: { files: CustomFile[] | [] }) {
       footer: (info) => info.column.id,
     }),
     columnHelper.accessor((row) => row.processing, {
-      id: "processing",
+      id: 'processing',
       cell: (info) => <i>{info.getValue()}</i>,
       header: () => <span>Processing Time</span>,
       footer: (info) => info.column.id,
     }),
     columnHelper.accessor((row) => row.status, {
-      id: "status",
+      id: 'status',
       cell: (info) => <i>{info.getValue()}</i>,
       header: () => <span>Status</span>,
       footer: (info) => info.column.id,
     }),
     columnHelper.accessor((row) => row.NodesCount, {
-      id: "NodesCount",
+      id: 'NodesCount',
       cell: (info) => <i>{info.getValue()}</i>,
       header: () => <span>Nodes Count</span>,
       footer: (info) => info.column.id,
     }),
     columnHelper.accessor((row) => row.relationshipCount, {
-      id: "relationshipCount",
+      id: 'relationshipCount',
       cell: (info) => <i>{info.getValue()}</i>,
       header: () => <span>Relationships</span>,
       footer: (info) => info.column.id,
-    })
+    }),
   ];
 
   useEffect(() => {
     setData([...files]);
   }, [files]);
 
-
   const table = useReactTable({
     data,
     columns,
     getCoreRowModel: getCoreRowModel(),
   });
 
-
   return (
     <>
       {data ? (
@@ -81,10 +78,8 @@ export default function FileTable({ files }: { files: CustomFile[] | [] }) {
             styling={{
               zebraStriping: false,
               borderStyle: 'all-sides',
-
             }}
           />
-
         </div>
       ) : null}
     </>

frontend/src/components/Layout/Header.tsx

@@ -24,7 +24,7 @@ export default function Header({ themeMode, toggleTheme }: { themeMode: string;
         >
           <Typography variant='h6' component='a' href='#app-bar-with-responsive-menu' sx={{}}>
             <img
-              src={themeMode === 'dark' ? Neo4jLogoBW : Neo4jLogoColor }
+              src={themeMode === 'dark' ? Neo4jLogoBW : Neo4jLogoColor}
               style={{ height: '32px', minHeight: '32px', minWidth: '32px' }}
               alt='Neo4j Logo'
             />

frontend/src/components/Layout/PageLayout.tsx

@@ -1,5 +1,5 @@
 import Header from './Layout/Header';
-import PageLayout from './Layout/PageLayout';
+import Content from './Content';
 import React, { useState } from 'react';
 import { ThemeWrapperContext } from '../context/ThemeWrapper';
 
@@ -17,7 +17,7 @@ export default function QuickStarter() {
   return (
     <div>
       <Header themeMode={themeMode} toggleTheme={toggleColorMode} />
-      <PageLayout />
+      <Content />
     </div>
   );
 }

frontend/src/components/Layout/SideNav.tsx

@@ -4,7 +4,7 @@ import QuickStarter from '../components/QuickStarter';
 import UserCredentialsWrapper from './UserCredentials';
 
 export const ThemeWrapperContext = createContext({
-  toggleColorMode: () => { },
+  toggleColorMode: () => {},
   colorMode: 'light' as string,
 });
 

frontend/src/components/QuickStarter.tsx

@@ -1,13 +1,13 @@
 import axios from 'axios';
 import { url } from '../utils/utils';
 const healthStatus = async () => {
-    try {
-        const healthUrl = `${url()}health`
-        const response = await axios.get(healthUrl);
-        return response
-    } catch (error) {
-        console.log("API status error", error)
-        throw error
-    }
-}
-export {healthStatus}
+  try {
+    const healthUrl = `${url()}health`;
+    const response = await axios.get(healthUrl);
+    return response;
+  } catch (error) {
+    console.log('API status error', error);
+    throw error;
+  }
+};
+export { healthStatus };