From 27305b7e8aa7f1f8ba9ee11b1ecca13f5fc631fe Mon Sep 17 00:00:00 2001
From: Matej Vavrek <matej.vavrek@m2ms.sk>
Date: Fri, 20 Mar 2020 12:21:47 +0100
Subject: [PATCH 1/3] #122 changed loading from circle to progress bar, made
 loading area for preventing interaction transparent, changed cursor to
 progress

---
 js/components/header/index.js | 30 ++++++++++++++----------------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/js/components/header/index.js b/js/components/header/index.js
index 3772ef06a..78c331660 100644
--- a/js/components/header/index.js
+++ b/js/components/header/index.js
@@ -16,7 +16,7 @@ import {
   Avatar,
   Box,
   ButtonGroup,
-  CircularProgress
+  LinearProgress
 } from '@material-ui/core';
 import {
   PowerSettingsNew,
@@ -68,13 +68,12 @@ const useStyles = makeStyles(theme => ({
     zIndex: 1,
     width: '100%',
     position: 'absolute',
-    opacity: 0.9,
-    pointerEvents: 'initial'
+    opacity: 0,
+    pointerEvents: 'initial',
+    cursor: 'progress'
   },
-  loadingWheel: {
-    top: '50%',
-    left: '50%',
-    position: 'fixed'
+  loadingProgress: {
+    height: '7px'
   },
   clickableImage: {
     cursor: 'pointer'
@@ -322,15 +321,14 @@ export default memo(
         </Drawer>
         <Box paddingTop={`${headerHeight}px`} width="100%">
           {(isLoading === true || disableUserInteraction === true) && (
-            <Box
-              className={classes.loadingPaper}
-              width="100%"
-              height={`calc(${document.documentElement.offsetHeight}px - ${headerHeight}px)`}
-            >
-              <div className={classes.loadingWheel}>
-                <CircularProgress />
-              </div>
-            </Box>
+            <>
+              <LinearProgress color="secondary" className={classes.loadingProgress} />
+              <Box
+                className={classes.loadingPaper}
+                width="100%"
+                height={`calc(${document.documentElement.offsetHeight}px - ${headerHeight}px)`}
+              />
+            </>
           )}
         </Box>
       </ComputeSize>

From 16851c3702d7dc3e16ce86560384f621b07dab02 Mon Sep 17 00:00:00 2001
From: Matej Vavrek <matej.vavrek@m2ms.sk>
Date: Fri, 20 Mar 2020 13:29:59 +0100
Subject: [PATCH 2/3] #122 updated app version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 31f8c7730..4e52a20fb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fragalysis-frontend",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Frontend for fragalysis",
   "main": "webpack.config.js",
   "scripts": {

From 8887cd0f0074fced938ef42a60faafea4989561f Mon Sep 17 00:00:00 2001
From: Matej Vavrek <matej.vavrek@m2ms.sk>
Date: Fri, 20 Mar 2020 14:31:52 +0100
Subject: [PATCH 3/3] #207 added background color also for non matching values
 of predefined filter

---
 js/components/preview/molecule/moleculeView.js | 15 ++++++++++-----
 js/theme/palette.js                            |  3 ++-
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/js/components/preview/molecule/moleculeView.js b/js/components/preview/molecule/moleculeView.js
index 4e8613dfe..161630dea 100644
--- a/js/components/preview/molecule/moleculeView.js
+++ b/js/components/preview/molecule/moleculeView.js
@@ -107,6 +107,9 @@ const useStyles = makeStyles(theme => ({
   },
   matchingValue: {
     backgroundColor: theme.palette.success.lighter
+  },
+  unmatchingValue: {
+    backgroundColor: theme.palette.error.lighter
   }
 }));
 
@@ -323,10 +326,8 @@ const MoleculeView = memo(({ imageHeight, imageWidth, data }) => {
    */
   const isMatchingValue = item => {
     let match = false;
-    if (filter.predefined !== 'none') {
-      if (!(item.value < filter.filter[item.name].minValue || item.value > filter.filter[item.name].maxValue)) {
-        match = true;
-      }
+    if (!(item.value < filter.filter[item.name].minValue || item.value > filter.filter[item.name].maxValue)) {
+      match = true;
     }
     return match;
   };
@@ -337,7 +338,11 @@ const MoleculeView = memo(({ imageHeight, imageWidth, data }) => {
    * @return string - css class
    */
   const getValueMatchingClass = item => {
-    return isMatchingValue(item) ? classes.matchingValue : '';
+    let cssClass = '';
+    if (filter.predefined !== 'none') {
+      cssClass = isMatchingValue(item) ? classes.matchingValue : classes.unmatchingValue;
+    }
+    return cssClass;
   };
 
   return (
diff --git a/js/theme/palette.js b/js/theme/palette.js
index 53f8c9614..1090871f7 100644
--- a/js/theme/palette.js
+++ b/js/theme/palette.js
@@ -42,7 +42,8 @@ export default {
     contrastText: white,
     dark: colors.red[900],
     main: colors.red[600],
-    light: colors.red[400]
+    light: colors.red[400],
+    lighter: colors.red[100]
   },
   text: {
     primary: colors.blueGrey[900],