Feat/fix layout bug and missing card

Project/frontend/src/components/App/index.tsx

@@ -17,10 +17,10 @@ import {
 } from '@mui/material';
 
 import logo from '../../assets/team-logo.png';
-import Graph from '../Graph/index_visjs';
+import Graph from '../Graph_page/GraphVisualization';
 import UploadPage from '../UploadPage';
 import LandingPage from '../LandingPage';
-
+import Navbar from '../Navbar/Navbar';
 import './index.css';
 
 const theme = createTheme({
@@ -46,9 +46,7 @@ function App() {
             px={2}
             py={1}
           >
-            <NavLink to="/">
-              <img src={logo} alt="Logo" className="logo" />
-            </NavLink>
+            <Navbar />
             <Typography variant="h6">Graph Masters</Typography>
             <NavLink to="/" style={{ textDecoration: 'none' }}>
               <Typography variant="h6" sx={{ color: 'white' }}>

Project/frontend/src/components/Graph/index_visjs.tsx

@@ -17,6 +17,7 @@ import {
 } from '@mui/material';
 import FloatingControlCard from './FloatingControlCard.jsx';
 import * as d3 from 'd3';
+import PersistentDrawerControls from './PersistentDrawerControls';
 
 type ITopicColourMap = Record<string, string>;
 
@@ -146,6 +147,7 @@ const VisGraph: React.FC<{
       setIsStabilizing(false);
       setStabilizationComplete(true);
       isStabilizingRef.current = false;
+      // network.fit();
     });
 
     network.on('stabilized', function () {
@@ -155,6 +157,7 @@ const VisGraph: React.FC<{
         setStabilizationComplete(true);
         isStabilizingRef.current = false;
       }
+      network.fit();
     });
 
     return () => {
@@ -584,7 +587,20 @@ const GraphVisualization: React.FC = () => {
           <Legend topicColorMap={topicColorMap} />
         </Box>
       </Stack>
-      <FloatingControlCard
+      {/* <FloatingControlCard
+        layout={layout}
+        setLayout={setLayout}
+        physicsOptions={physicsOptions}
+        handlePhysicsChange={handlePhysicsChange}
+        restartStabilization={() => setStabilizationComplete(false)}
+        sx={{
+          position: 'absolute',
+          top: '10px',
+          right: '10px',
+          zIndex: 1000,
+        }}
+      /> */}
+      <PersistentDrawerControls
         layout={layout}
         setLayout={setLayout}
         physicsOptions={physicsOptions}

Project/frontend/src/components/Graph_page/ErrorScreen.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+
+const ErrorScreen: React.FC = () => {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100vh',
+      }}
+    >
+      <Typography variant="h6">Sorry, an error has occurred!</Typography>
+    </Box>
+  );
+};
+
+export default ErrorScreen;