Fix: Button remains disabled despite selecting a database in the tree…

… widget (#821)

* Fix: Button remains disabled despite selecting a database in the tree widget

* Fix: opening tree directory should not uncheck other category

fixes #784

public/js/databases_tree.js

@@ -16,29 +16,37 @@ export default class extends Databases {
         var tree_id = '#' + category + '_database_tree';
         // hack that is needed to sync the selected tree db with the hidden main db
         window.jstree_node_change_timeout = null;
+        window.jstree_rapid_timeout = null
+        const _this = this;
 
-        // when a tree database gets selected
-        $(tree_id).on('select_node.jstree deselect_node.jstree', function (e, data) {
-            if (window.jstree_node_change_timeout) {
-                clearTimeout(window.jstree_node_change_timeout);
-                window.jstree_node_change_timeout = null;
-            }
+        $(tree_id).on('select_node.jstree deselect_node.jstree', function (_, _data) {
+            if (window.jstree_node_change_timeout) clearTimeout(window.jstree_node_change_timeout);
+            if (window.jstree_rapid_timeout) clearTimeout(window.jstree_rapid_timeout);
+
+            // Set a timeout to handle jsTree node changes with some delay to avoid rapid re-triggering
+            window.jstree_rapid_timeout = setTimeout(function () {
+                // Set another timeout to handle the retrieval and processing of selected nodes
+                window.jstree_node_change_timeout = setTimeout(function () {
+                    // Filter out the current category to get a list of other categories
+                    const otherCategories = _this.categories().filter(item => item !== category);
+
+                    // Uncheck all nodes in the trees of the other categories
+                    otherCategories.forEach((value) => $(`#${value}_database_tree`).jstree('uncheck_all'));
+                    // Get all selected nodes from the current tree.
+                    // Note: This will also include folders. To filter only database nodes, ensure the ID length is 32.
+                    // These IDs correspond to specific elements in the hidden main form.
+                    const selected = $(tree_id).jstree('get_selected').filter(selected => selected.length === 32);
+
+                    // Find database entries in the current category whose IDs match the selected nodes
+                    const foundDatabases = _this.databases(category).filter(db => selected.includes(db.id));
 
-            window.jstree_node_change_timeout = setTimeout(function () {
-                // uncheck all input
-                $('div#database_list input[type="checkbox"]:checked').click();
-                setTimeout(function () {
-                    // get all selected tree dbs. Also includes folders. Therefore, the id must have a length of 32
-                    // this id is used to find the corresponding element from the hidden main form
-                    var selected = $(tree_id).jstree('get_selected').filter(selected => selected.length == 32);
-                    $.each(selected, function (index, value) {
-                        // select hidden element to trigger original sequenceserver behavior, like blast algorithm, ...
-                        $('input[value="' + value + '"]').click();
-                    });
-                }, 100);
-            }, 100);
+                    // Update the selected databases in the view model with the found databases
+                    _this.selectDatabases(foundDatabases);
+                }, 100); // Delay to ensure jsTree updates are processed
+            }, 100); // Delay to prevent rapid changes causing multiple triggers
         });
 
+
         $(tree_id).jstree({
             'core': {
                 'data': this.props.tree[category]
@@ -50,6 +58,10 @@ export default class extends Databases {
         });
     }
 
+    selectDatabases(databases) {
+        this.setState({ currentlySelectedDatabases: databases });
+    }
+
     handleTreeSearch(category, tree_id, search_id) {
         var search_for = $('#' + search_id).val();
         $('#' + tree_id).jstree(true).search(search_for);

public/js/search_button.js

@@ -133,7 +133,7 @@ export class SearchButton extends Component {
             <div className="flex">
                 <button
                     type="submit"
-                    className="uppercase w-full md:w-auto flex text-xl justify-center py-2 px-16 border border-transparent rounded-md shadow-sm text-white bg-seqblue hover:bg-seqorange focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-seqorange"
+                    className={`${method ? 'hover:bg-seqorange focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-seqorange ' : 'opacity-50 cursor-not-allowed '}uppercase w-full md:w-auto flex text-xl justify-center py-2 px-16 border border-transparent rounded-md shadow-sm text-white bg-seqblue`}
                     id="method"
                     name="method"
                     value={method}