Zak-Musah · Zak-Musah · Dec 10, 2020 · Dec 10, 2020 · Jan 7, 2021 · Jan 7, 2021
diff --git a/README.md b/README.md
@@ -1,17 +1,16 @@
 <p align="center" style="color: #343a40">
-  <h1 align="center">HDF5 Data Visualization</h1>
+  <h1 align="center">HDF5 Data Visualization - ReactJS and Python</h1>
 </p>
-<p align="center" style="font-size: 1.2rem;">IRUBIS HDF5 files visualized in react programmatically</p>
+<p align="center" style="font-size: 1.2rem;">A data pipeline built with python as backend for data wrangling and reactjs for visualization</p>
 
 [![npm version](https://badge.fury.io/js/react.svg)](https://badge.fury.io/js/react)
 [![Python 3.8](https://img.shields.io/badge/python-3.8-blue.svg)](https://www.python.org/downloads/release/python-360/)
 
 This HDF5 visualization project written with Flask web framework(Python) as backend and React (Javascript) as frontend is served in Docker containers. HDF5 format is a hierarchical data structure, consists mainly of the following components: attributes, groups and data sets. Attributes are used for storing meta-data. Groups and data sets could be considered as folders and files, respectively, in classical file system - https://en.wikipedia.org/wiki/Hierarchical_Data_Format.
 
-Structure of IRUBIS HDF5 files Attributes:
+Structure of HDF5 files Attributes used in this project:
 
 - wavenumbers, array: Wx1, with W - number of data samples
-  From here you can extract wavenumbers, which are commonly used as x-axis (horizontal) for plotting spectra.
 
 Groups:
 
@@ -30,12 +29,14 @@ measurement - floats, size NxW, with N - number of data samples, W - number of w
 
 glucose - floats, size Nx1, with N - number of data samples, consists of glucose values that were calculated based on corresponding measurement spectra.
 
-The goal of this task is to programmaticaly extract data from files and plot two graphs. One graph should contain glucose data points and the second, the corresponding spectrum.
+when the Frontend first renders, data is programmatically loaded from the dataset folder and immediately available to the frontend.
+There is the possibility to choose one or two files for comparison.
+The first graph should contain glucose data points. Onclick of a data point in the first graph plots the corresponding spectrum in the second graph.
 
 ## Demo
 
 Check out the live app, running on Netlify:
-[Demo](https://irubis-dashboard.netlify.app/)
+[Demo](https://hdf5-dashboard.netlify.app/)
 
 # [📖 Docs]
 
@@ -155,8 +156,8 @@ You can test out the following endpoints:
 
 ### Choose data file and follow steps to see glucose and corresponding spectra as shown in Results
 
-![Image](Screenshots/1.png?raw=true "1")
+![Image](screenshots/1.png?raw=true "1")
 
 ## Results
 
-![Image](Screenshots/2.png?raw=true "2")
+![Image](screenshots/2.png?raw=true "2")
diff --git a/frontend/.dockerignore b/frontend/.dockerignore
@@ -1,5 +1,5 @@
-node_modules
+
 coverage
-build
+
 .dockerignore
 Dockerfile
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -0,0 +1,21 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -1,49 +1,49 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link
-      rel="stylesheet"
-      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
-      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
-      crossorigin="anonymous"
-    />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>IRUBIS Analytics Dashboard</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link
+      rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
+      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
+      crossorigin="anonymous"
+    />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>HDF5 Analytics Dashboard</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/frontend/src/components/Dashboard/Dashboard.jsx b/frontend/src/components/Dashboard/Dashboard.jsx
@@ -180,7 +180,7 @@ function Dashboard(props) {
 
   return (
     <>
-      <div className="col-3 bg-violet card">
+      <div className="col-xs-6 col-md-3 col-sm-4  bg-violet card">
         <div className="card-body">
           <div className="list-group">
             <OverlayTrigger
@@ -249,7 +249,7 @@ function Dashboard(props) {
           )}
         </div>
       </div>
-      <div className="col bg-light card">
+      <div className="col-xs-6  col-md-9 col-sm-8 bg-light card">
         <div className="card-body" style={{ paddingLeft: "4%" }}>
           {loading && (
             <center>

diff --git a/frontend/src/components/MainPage/MainPage.jsx b/frontend/src/components/MainPage/MainPage.jsx
@@ -7,10 +7,11 @@ function MainPage() {
     <>
       <nav className="navbar ">
         <a className="navbar-brand" href="/#">
-          <h2 style={{ color: "white" }}>IRUBIS DASHBOARD</h2>
+          <h2 style={{ color: "white" }}>HDF5 DASHBOARD</h2>
         </a>
       </nav>
-      <div className="row">
+
+      <div className="row" style={{ overflowY: "auto" }}>
         <Dashboard />
       </div>
     </>

diff --git a/screenshots/1.png b/screenshots/1.png
diff --git a/screenshots/2.png b/screenshots/2.png
diff --git a/start.sh b/start.sh
@@ -15,6 +15,6 @@ docker-compose exec backend python manage.py test
 >&2 echo "Backend api tests done..."
 
 
->&2 echo "IRUBIS ANALYTICS DASHBOARD is now ready at http://localhost"
+>&2 echo "HDF5 ANALYTICS DASHBOARD is now ready at http://localhost"
 sleep 10
 exit 0