-
IRUBIS HDF5 files visualized in react programmatically
+A data pipeline built with python as backend for data wrangling and reactjs for visualization
[](https://badge.fury.io/js/react) [](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 - + ## Results - + diff --git a/frontend/.dockerignore b/frontend/.dockerignore index 52d122e..8f52301 100644 --- a/frontend/.dockerignore +++ b/frontend/.dockerignore @@ -1,5 +1,5 @@ -node_modules + coverage -build + .dockerignore Dockerfile diff --git a/frontend/.gitignore b/frontend/.gitignore new file mode 100644 index 0000000..af45a3c --- /dev/null +++ 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* \ No newline at end of file diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico index a11777c..85d6e23 100644 Binary files a/frontend/public/favicon.ico and b/frontend/public/favicon.ico differ diff --git a/frontend/public/index.html b/frontend/public/index.html index f3cdbef..4fe8417 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -1,49 +1,49 @@ - - - - - - - - - - - - - -