completed port of entire Design view to an SPA on the index page

kvdomingo · Apr 24, 2020 · d70fcd0 · d70fcd0
1 parent 792e5ca
commit d70fcd0
Show file tree

Hide file tree

Showing 11 changed files with 774 additions and 317 deletions.
diff --git a/primerx/version.py b/primerx/version.py
@@ -5,5 +5,5 @@
     major=1,
     minor=1,
     patch=0,
-    prerelease=1
+    prerelease='rc.1'
 )
diff --git a/sdm/jinja2/sdm/index.html.j2 b/sdm/jinja2/sdm/index.html.j2
@@ -23,10 +23,12 @@
 
 <div class="container">
     <div class='jumbotron my-5 border border-light' id="app" style="box-shadow: none;"></div>
+    <div id='expression-systems' data-list='{{ expression }}' hidden></div>
 </div>
 
 <script src="{{ static('sdm/js/MutationCodeLayout.js') }}"></script>
 <script src="{{ static('sdm/js/ResultView.js') }}"></script>
+<script src="{{ static('sdm/js/ProteinView.js') }}"></script>
 <script src="{{ static('sdm/js/DnaView.js') }}"></script>
 <script src="{{ static('sdm/js/CharacterizeView.js') }}"></script>
 <script src="{{ static('sdm/js/Menu.js') }}"></script>

diff --git a/sdm/jinja2/sdm/layout.html.j2 b/sdm/jinja2/sdm/layout.html.j2
@@ -74,9 +74,6 @@
                 <li class="nav-item {{ 'active' if active_page == 'index' }}">
                     <a class="nav-link" href="{{ url('index') }}">Home</a>
                 </li>
-                <li class="nav-item {{ 'active' if active_page == 'design' }}">
-                    <a class="nav-link" href="{{ url('design') }}">Design</a>
-                </li>
                 <li class="nav-item">
                     <a class="nav-link" href="https://github.com/kvdomingo/primerdriver/releases" target="_blank">Download</a>
                 </li>

diff --git a/sdm/static/sdm/js/DnaView.js b/sdm/static/sdm/js/DnaView.js
@@ -64,17 +64,19 @@ var DnaView = function (_React$Component) {
 
         _this.genericFloatHandler = function (e) {
             name = e.target.name;
-            value = parseInt(e.target.value);
+            value = parseFloat(e.target.value);
 
             if (name === 'Tm_range_min' && value >= _this.state.Tm_range_max) return;
             if (name === 'Tm_range_max' && value <= _this.state.Tm_range_min) return;
+            if (name === 'gc_range_min' && value >= _this.state.gc_range_max) return;
+            if (name === 'gc_range_max' && value <= _this.state.gc_range_min) return;
 
             return _this.setState(_defineProperty({}, name, value));
         };
 
         _this.genericIntHandler = function (e) {
             name = e.target.name;
-            value = parseFloat(e.target.value);
+            value = parseInt(e.target.value);
             _this.setState(_defineProperty({}, name, value));
         };
 
@@ -85,7 +87,7 @@ var DnaView = function (_React$Component) {
         _this.formValidator = function () {
             validSequence = _this.state.sequenceLength > 0;
             validMutation = _this.state.mutation_type !== '';
-            validMutationCode = _this.state.target.length > 0 || _this.state.replacement > 0;
+            validMutationCode = _this.state.target.length > 0 || _this.state.replacement.length > 0;
             validSequence && validMutation && validMutationCode ? _this.setState({ submitValid: true }) : _this.setState({ submitValid: false });
             _this.formSettings = {
                 Tm_range_min: _this.state.Tm_range_min,
@@ -187,26 +189,27 @@ var DnaView = function (_React$Component) {
                     React.createElement(
                         'a',
                         {
-                            className: 'btn btn-blue-grey btn-rounded mb-4',
+                            className: 'btn btn-blue-grey mb-4 mr-3',
                             href: '/',
                             id: 'back',
                             onClick: function onClick(e) {
                                 return _this2.props.changeView(e, 0);
                             }
                         },
-                        React.createElement('i', { className: 'fas fa-arrow-left mr-2' }),
+                        React.createElement('i', { className: 'fas fa-arrow-left mr-3' }),
                         'main menu'
                     ),
                     React.createElement(
                         'h2',
-                        { className: 'text-md-center py-2 mx-md-2 h2-responsive d-md-inline' },
+                        { className: 'text-md-center py-2 mx-md-2 h2-responsive' },
                         'DNA-based Primer Design'
                     ),
                     React.createElement(
                         'form',
                         {
                             id: 'form',
                             onChange: this.formValidator,
+                            onKeyUp: this.formValidator,
                             onSubmit: this.submitHandler,
                             autoComplete: 'off'
                         },