ui changes

deepanshs · Nov 19, 2019 · 14e3295 · 14e3295
1 parent 7b5bd33
commit 14e3295
Show file tree

Hide file tree

Showing 30 changed files with 656 additions and 494 deletions.
diff --git a/.flake8 b/.flake8
@@ -1,5 +1,5 @@
 [flake8]
-exclude = .eggs,*.egg,build, src/mrsimulator/__init__.py
+exclude = .eggs,*.egg,build
 ignore = C901, E722
 filename = *.pyx,*.px*, *py
 max-line-length = 88

diff --git a/README.md b/README.md
@@ -1,6 +1,10 @@
 # Mrsimulator-app
 
-Mrsimulator-app is a plotly-dash user interface for [mrsimulator library](https://github.com/DeepanshS/mrsimulator).
+[![Total alerts](https://img.shields.io/lgtm/alerts/g/DeepanshS/mrsimulator-app.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/DeepanshS/mrsimulator-app/alerts/)
+[![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/DeepanshS/mrsimulator-app.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/DeepanshS/mrsimulator-app/context:javascript)
+[![Language grade: Python](https://img.shields.io/lgtm/grade/python/g/DeepanshS/mrsimulator-app.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/DeepanshS/mrsimulator-app/context:python)
 
+Mrsimulator-app is an interactive web app for fast and easy solid-state
+nuclear magnetic resonance (ssNMR) lineshape simulation. The app utilizes [plotly/dash](https://github.com/plotly/dash) for rendering the app interface and runs [mrsimulator](https://github.com/DeepanshS/mrsimulator)library to simulate ssNMR lineshapes.
 
 <!-- Contributors -->
diff --git a/app/assets/custom.css b/app/assets/custom.css
@@ -14,7 +14,6 @@ input[type="number"]::-webkit-outer-spin-button {
 
 #top-navbar {
   z-index: 4;
-  background-color: #343942;
 }
 
 #bottom-navbar {
@@ -38,17 +37,14 @@ html {
   color: silver;
 }
 
-.nav-link:hover {
+.nav-link:hover,
+.secondary-nav-link:hover {
   color: white;
 }
-
 .secondary-nav-link:hover {
-  color: white;
-  background: linear-gradient(to bottom, #1f1f1f75 0%, #1d1d1d 100%);
-  /* background: linear-gradient(to bottom, #a7a7a775 0%, #cecece 100%); */
+  background-color: #252931;
   border-radius: 0px;
 }
-
 /* button contents */
 
 .button .no-round {
@@ -69,7 +65,7 @@ html {
 
 /* card properties */
 
-.drawer-card {
+.top-navbar {
   position: relative;
   z-index: 1;
   background: #343942;
@@ -92,7 +88,8 @@ html {
 .my-card-sidebar {
   position: relative !important;
   overflow: hidden;
-  border-radius: 0.5em;
+  min-height: 12vh;
+  border-radius: 0.8em;
   border-top-right-radius: 0;
   border-top-left-radius: 0;
   background: linear-gradient(to bottom, #f0f0f0 0%, #fcfcfc 100%);
@@ -169,6 +166,10 @@ html {
 }
 
 @media only screen and (max-width: 992px) {
+  .master-padding {
+    padding-right: 0px;
+    padding-left: 0px;
+  }
   .hide-label {
     display: none;
   }

diff --git a/app/assets/media.css b/app/assets/media.css
@@ -1,9 +1,4 @@
 @media only screen and (max-device-width: 992px) {
-  .master-padding {
-    padding-right: 0px;
-    padding-left: 0px;
-  }
-
   body {
     margin: 0;
     padding: 0;
@@ -15,19 +10,41 @@
   #dimension-body {
     min-height: 50vh;
   }
+  #mrsimulator-logo {
+    height: 44px;
+  }
   #top-navbar {
     position: fixed;
     z-index: 5;
-    height: 50px;
+    min-height: 60px;
+    padding-top: 0px;
+    padding-bottom: 0px;
     /* background-color: #343942; */
     /* background-color: #0f5d63; */
   }
-  .my-card {
-    border-radius: 0px;
-  }
-  .my-card-sidebar {
+  /* .fix-header .top-navbar {
+    background: #eee;
+  } */
+  #spectrum-body {
+    /* visibility: hidden; */
     border-radius: 0px;
+    position: fixed;
+    top: 55px;
+    z-index: 4;
+    /*not work if the screen ratio is below 16/9*/
+    width: 100vw;
+    will-change: transform;
+    box-shadow: 0 4px 15px 0px #d6d6d6;
   }
+
+  /* .fix-header #spectrum-body {
+    position: fixed;
+    top: 10px;
+  } */
+  /* .my-card-sidebar {
+    border-bottom-left-radius: 20px;
+    border-bottom-right-radius: 20px;
+  } */
   /* drawer and navbar imports */
   #import-navbar,
   #drawers-import {
@@ -44,77 +61,14 @@
   #drawers-import {
     bottom: 40px;
   }
-  .master-padding {
-    padding-right: 0px;
-    padding-left: 0px;
-  }
   .grow {
     height: 262px;
   }
-  #spectrum-body {
-    /* visibility: hidden; */
-    border-radius: 0px;
-    position: fixed !important;
-    top: 50px;
-    z-index: 4;
-    /*not work if the screen ratio is below 16/9*/
-    width: 100vw;
-    will-change: transform;
-    box-shadow: 0 4px 15px 0px #d6d6d6;
-  }
+
   #bottom-navbar-content {
     display: none;
   }
 }
-/* .fullscreen { */
-
-/* @media only screen and (max-width: 992px) and (orientation: landscape) {
-      #spectrum-body {
-          position: fixed !important;
-          top: 0px;
-          min-height: 100vh;
-          min-width: 100vw;
-          z-index: 1;
-      }
-      #nmr_spectrum {
-          min-height: 84vh;
-          min-width: 100vw;
-      }
-      #dimension-body,
-      #import-navbar,
-      #top-navbar,
-      #bottom-navbar {
-          display: none;
-      }
-  } */
-
-/* } */
-
-/* All hand-held devices */
-
-/* @media only screen and (max-width: 992px) {
-      #import-navbar,
-      #drawers-import {
-          position: fixed !important;
-          z-index: 2;
-          background-color: #343942;
-          width: 100vw;
-          border-radius: 0px;
-      }
-      #bottom-navbar-content {
-          display: none;
-      }
-      #bottom-navbar,
-      #import-navbar {
-          bottom: 0;
-          left: 0;
-          height: 45px;
-          min-width: 100vw;
-      }
-      #drawers-import {
-          bottom: 45px;
-      }
-  } */
 
 /* ipad layout landscape */
 @media only screen and (min-device-width: 400px) and (max-device-width: 992px) and (orientation: landscape) {
@@ -174,16 +128,16 @@
 
 @media only screen and (max-device-width: 400px) and (orientation: portrait) {
   #dimension-body {
-    min-height: 40vh;
+    min-height: 50vh;
   }
   #spectrum-body {
-    height: 42vh;
+    height: 40vh;
   }
   #nmr_spectrum {
-    height: calc(42vh - 55px);
+    height: calc(40vh - 55px);
   }
   .buffer {
-    height: calc(42vh + 50px);
+    height: calc(40vh + 50px);
   }
   body {
     -webkit-user-select: none;

diff --git a/app/body.py b/app/body.py
@@ -22,10 +22,10 @@
                 dbc.Col([html.Br(), dimension_body], xs=12, sm=12, md=12, lg=5, xl=5),
             ]
         ),
-        dcc.Store(id="local-metadata", storage_type="memory"),
+        dcc.Store(id="local-isotopomers-data", storage_type="memory"),
         dcc.Store(id="local-csdm-data", storage_type="memory"),
         dcc.Store(id="local-computed-data", storage_type="memory"),
-        dcc.Store(id="larmor_frequency-0", storage_type="memory"),
+        dcc.Store(id="local-dimension-data", storage_type="memory"),
     ]
 )
 

diff --git a/app/graph.py b/app/graph.py
@@ -154,11 +154,18 @@ def toggle_popover(n, is_open):
         ],
         id="upload-from-graph",
         disable_click=True,
+        # accept="application/json, text/plain, .csdf",
         style_active={
             "border": "1px solid rgb(78, 196, 78)",
             "backgroundColor": "rgb(225, 255, 225)",
             "opacity": "0.75",
             "borderRadius": "0.8em",
         },
+        # style_reject={
+        #     "border": "1px solid rgb(196, 78, 78)",
+        #     "backgroundColor": "rgb(255, 225, 225)",
+        #     "opacity": "0.75",
+        #     "borderRadius": "0.8em",
+        # },
     ),
 )