Issue/608

public/js/form.js

@@ -156,16 +156,17 @@ export class Form extends Component {
     }
 
     handleAlgoChanged(algo) {
-        if (this.state.preDefinedOpts.hasOwnProperty(algo)) {
+        if (algo in this.state.preDefinedOpts) {
             var preDefinedOpts = this.state.preDefinedOpts[algo];
             this.refs.opts.setState({
+                method: algo,
                 preOpts: preDefinedOpts,
                 value: (preDefinedOpts['last search'] ||
                     preDefinedOpts['default']).join(' ')
             });
         }
         else {
-            this.refs.opts.setState({ preOpts: {}, value: '' });
+            this.refs.opts.setState({ preOpts: {}, value: '', method: '' });
         }
     }
 

public/js/options.js

@@ -3,9 +3,10 @@ import React, { Component } from 'react';
 export class Options extends Component {
     constructor(props) {
         super(props);
-        this.state = { preOpts: {}, value: '' };
+        this.state = { preOpts: {}, value: '', method: '' };
         this.updateBox = this.updateBox.bind(this);
         this.optionsJSX = this.optionsJSX.bind(this);
+        this.showAdvancedOptions = this.showAdvancedOptions.bind(this);
     }
 
     updateBox(value) {
@@ -37,7 +38,14 @@ export class Options extends Component {
             </ul>
         </span>;
     }
-
+    showAdvancedOptions(e) {
+        const ids = ['blastn', 'tblastn', 'blastp', 'blastx', 'tblastx'];
+        const method = this.state.method.toLowerCase();
+        // hide options for other algorithms and only show for selected algorithm
+        for (const id of ids) {
+            $(`#${id}`)[id === method ? 'show' : 'hide']();
+        }
+    }
     render() {
         var classNames = 'form-control';
         if (this.state.value.trim()) {
@@ -50,12 +58,14 @@ export class Options extends Component {
                         <div className="input-group">
                             <label className="control-label" htmlFor="advanced">
                                 Advanced parameters:
-                                <sup style={{ marginLeft: '2px' }}>
+                                {/* only show link to advanced parameters if blast method is known */}
+                                {this.state.method && <sup style={{ marginLeft: '2px' }}>
                                     <a href=''
+                                        onClick={this.showAdvancedOptions}
                                         data-toggle="modal" data-target="#help">
                                         <i className="fa fa-question-circle"></i>
                                     </a>
-                                </sup>
+                                </sup>}
                             </label>
                             <input type="text" className={classNames}
                                 onChange={e => this.updateBox(e.target.value)}