Feat/#26/404 not found page

README.md

@@ -0,0 +1,16 @@
+# Histopathology Viewer
+
+### Setup
+- Install MySQL, and create credentials as mentioned below
+```
+SQL_HOST = "localhost"
+SQL_USER = "Histuser"
+SQL_PASSWORD = "password"
+SQL_DATABASE = "Histdata"
+```
+- Run `create_schema.sql` from `server/db_setup`
+
+## Sub Components
+
+- [Client](./Readme_Assets/Client/Client.md)
+- [Server](./Readme_Assets/Server/Server.md)

Readme_Assets/Client/Client.md

@@ -0,0 +1,32 @@
+# Client
+- This Repository Refers to the Frontend of the Web-App
+- In `client/` Run the Following Command to Install the Dependencies
+```
+npm install --no-lockfile --legacy-peer-deps
+```
+---
+
+
+### Running the Frontend
+```
+npm start
+```
+---
+
+### Directory Structure
+![Directory Structure](./Images/Directory_Structure.png)
+---
+
+### HV Upload Pipeline
+![Upload Pipeline](./Images/HV_Upload_Pipeline.png)
+- The User can Upload `.tiff` `.tif` `.png` `.jpeg` `.jpg` files to the HV Platform.
+
+### Storing the Images in MinIO Database
+- The `.png` `.jpeg` `.jpg` files are directly stored in the MinIO Database without any processing done on them.
+- The `.tiff` `.tif` files are broken down into Batches of Smaller Images which are then stored into the MinIO Database.
+
+### Accessing the Thumbnails of Images
+- The `.png` `.jpeg` `.jpg` files are directly accessed from the MinIO Database.
+- For the `.tiff` `.tif` files, the Smaller Images are retrieved in Batches which are then Reconstructed in the Frontend and Displayed to the User. The Images are Continously Retireved and Constructed as per the Depth of the Image.
+---
+

Readme_Assets/Server/Server.md

@@ -0,0 +1,12 @@
+# Server
+- This Repository Refers to the Backend of the Web-App
+- In `server/` Run the Following Command to Install the Dependencies
+```
+npm install --no-lockfile --legacy-peer-deps
+```
+---
+### Running the Backend
+```
+npx nodemon server.js
+```
+---

client/src/App.js

@@ -5,7 +5,8 @@ import CustomToastContainer from './components/CustomToastContainer/CustomToastC
 import Viewer from './components/Viewer/Viewer'
 import Login from './components/Login/Login'
 import './App.css'
-import NavBar from './components/Viewer/components/NavBar/NavBar';
+import NavBar from './components/NavBar/NavBar';
+import PageNotFound from './components/PageNotFound/PageNotFound';
 
 function App() {
   let tokenId = null
@@ -69,6 +70,7 @@ function App() {
       <Routes>
         <Route exact path='/' element={isLoggedIn ? <Viewer logout={logoutUser} /> : <Navigate replace to="/login" />}/>
         <Route exact path='/login' element={isLoggedIn ? <Navigate replace to="/" /> : <Login checkUser={checkUser} />} />
+        <Route path='/*' element={<PageNotFound />}/>
       </Routes>
       <CustomToastContainer />
     </>

client/src/components/Viewer/components/NavBar/NavBar.js → client/src/components/NavBar/NavBar.js

@@ -1,15 +1,22 @@
 import React from 'react'
 import './NavBar.css'
+import { useNavigate } from 'react-router-dom'
 
 function NavBar(props) {
 
+  const navigate = useNavigate()
+
   function handleClick() {
     props.logout()
   }
 
+  function handleHome() {
+    navigate('/')
+  }
+
   return (
     <div className='navbar'>
-      <div id='ihub-logo' ></div>
+      <div id='ihub-logo'  onClick={handleHome}></div>
       <p id='heading'>HISTOPATHOLOGY VIEWER</p>
       <button id="logout-btn" onClick={handleClick}>Logout</button>
     </div>

client/src/components/PageNotFound/PageNotFound.css

@@ -0,0 +1,46 @@
+.section{
+  text-align: center;
+  padding: 4rem 2rem;
+}
+
+.section .error{
+  font-size: 150px;
+  color: #006CA5;
+  text-shadow: 
+    1px 1px 1px #02367B,    
+    2px 2px 1px #02367B,
+    3px 3px 1px #02367B,
+    4px 4px 1px #02367B,
+    5px 5px 1px #02367B,
+    6px 6px 1px #02367B,
+    7px 7px 1px #02367B,
+    8px 8px 1px #02367B,
+    25px 25px 8px rgba(0,0,0, 0.2);
+}
+
+.page{
+  margin: 2rem 0;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 20px;
+  font-weight: 600;
+  color: #444;
+}
+
+#home-btn {
+  background: #F54821;
+  border: 0;
+  border-style: none;
+  border-radius: 0.25rem;
+  color: white;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-bottom: 0.5rem;
+  padding-top: 0.5rem;
+  font-family: 'Open Sans', sans-serif;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  cursor: pointer;
+  font-weight: bold;
+  width: 200px;
+  margin-right: 10px;
+}

client/src/components/PageNotFound/PageNotFound.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import './PageNotFound.css'
+import {useNavigate } from 'react-router-dom'
+
+function PageNotFound() {
+
+  const navigate = useNavigate()
+
+  function handleClick() {
+    navigate('/')
+  }
+
+  return (
+    <div class='section'>
+      <h1 class='error'>404</h1>
+      <p class='page'>The page you are looking for is not found</p>
+      <button id='home-btn' onClick={handleClick}>  Back to Home </button>
+    </div>
+  )
+}
+
+export default PageNotFound