Close #26: Added drop-down list

web/src/components/DataTable.vue

@@ -200,6 +200,8 @@
 
         // console.log(columns)
 
+        const doms = vm.category === "protein" ? '<"row"<"col-sm-3"f><"#function_filter.col-sm-3"><"col-sm-6"p>><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>' : '<"row"<"col-sm-3"f><"col-sm-9"p>><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>';
+
         const nTableOptions = {
           columns,
           // aaSorting: [[ 0, 'asc' ]],
@@ -212,7 +214,36 @@
           oLanguage: {
             sSearch: "Filter",
           },
-          dom: '<"row"<"col-sm-2"f><"col-sm-10"p>><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>'
+          dom: doms,
+          initComplete: function () {
+            if(vm.category === "protein") {
+              this.api().columns([2]).every( function () {
+                // console.log(this);
+                let column = this;
+                let select = $('<select class="form-control input-sm"><option value=""></option></select>')
+                    .appendTo( $('#function_filter').empty() )
+                    .on( 'change', function () {
+                      var val = $.fn.dataTable.util.escapeRegex(
+                          $(this).val()
+                      );
+
+                      column
+                          .search( val ? val === 'null' ? '^\\s*$' : '^'+val+'$' : '', true, false )
+                          .draw();
+                    } );
+
+                $( "<label>Functional Type</label>" ).prependTo( '#function_filter' );
+
+                column.data().unique().sort().each( function ( d, j ) {
+                  if( d === null) {
+                    select.append( '<option value="'+d+'">unknown</option>' )
+                  } else {
+                    select.append( '<option value="'+d+'">'+d+'</option>' )
+                  }
+                } );
+              } );
+            }
+          },
         };
 
         const tableId = `#${id}`;
@@ -446,4 +477,10 @@
         text-decoration: underline;
         font-style: oblique;
     }
+
+    div#function_filter label {
+      font-weight: normal;
+      text-align: left;
+      margin-right: 10px;
+    }
 </style>

web/src/components/Search.vue

@@ -54,8 +54,8 @@
               }, 10);
             });
         } else {
-          url = taxId === 'all' ? `${host}/proteins?size=100000`:
-            `${host}/proteins?species_tax_id=${taxId}&size=100000`;
+          url = taxId === 'all' ? `${host}/proteins?fields=ensembl_gene_id,ensembl_id,functional_type,gene_name,name,species_name,species_tax_id,uniprot_id,uniprot_readable_id&size=100000`:
+            `${host}/proteins?species_tax_id=${taxId}&fields=ensembl_gene_id,ensembl_id,functional_type,gene_name,name,species_name,species_tax_id,uniprot_id,uniprot_readable_id&size=100000`;
 
           fetch(url)
               .then(response => response.json())
@@ -88,6 +88,7 @@
         }
 
         // let url = `http://${host}/condensates?query=${keyword}&species_tax_id=${taxId}&page=${page}`;
+        // fields=biomarkers,canonical_id,description,is_experimental,name,protein_count,proteins,species_name,species_tax_id,synonyms
         let url = taxId === 'all' ? `${host}/condensates?query=${keyword}&size=10000`
           :`${host}/condensates?query=${keyword}&species_tax_id=${taxId}&size=10000`;
 
@@ -113,8 +114,8 @@
               }, 10);
             });
         } else {
-          url = taxId === 'all' ? `${host}/condensates?size=10000`
-            :`${host}/condensates?species_tax_id=${taxId}&size=10000`;
+          url = taxId === 'all' ? `${host}/condensates?fields=biomarkers,canonical_id,description,is_experimental,name,protein_count,proteins,species_name,species_tax_id,synonyms&size=10000`
+            :`${host}/condensates?species_tax_id=${taxId}&fields=biomarkers,canonical_id,description,is_experimental,name,protein_count,proteins,species_name,species_tax_id,synonyms&size=10000`;
           fetch(url)
             .then(response => response.json())
             .then((response) => {