feat: make the cutoff filter for the scoring datatable clearer, and add filtering functionality to all columns

README.md

@@ -110,6 +110,23 @@ The dashboard accepts data generated by NPLinker and saved as described in the [
 
 Please note that links between genomic and metabolomic data must currently be computed using the NPLinker API separately, as this functionality is not yet implemented in the webapp (see [issue #19](https://github.com/NPLinker/nplinker-webapp/issues/19)). If no links are present in your data, the scoring table will be disabled.
 
+### Filtering Table Data
+
+The "Candidate Links" tables support data filtering to help you focus on relevant results. You can enter filter criteria directly into each column’s filter cell by hovering over the cell.
+
+For numeric columns like "Average Score" or "# Links":
+- `34.6` or `= 34.6` (exact match)
+- `> 30` (greater than)
+- `<= 50` (less than or equal to)
+
+For text columns like "BGC Classes" or "MiBIG IDs":
+- `Polyketide` or `contains Polyketide` (contains text)
+- `= Polyketide` (exact match)
+
+Multiple filters can be applied simultaneously across different columns to narrow down results.
+
+For a full list of supported filter operators, see the [official Plotly documentation](https://dash.plotly.com/datatable/filtering#filtering-operators).
+
 ## Contributing
 
 If you want to contribute to the development of NPLinker, have a look at the [contribution guidelines](CONTRIBUTING.md) and [README for developers](README.dev.md).

app/callbacks.py

@@ -1455,8 +1455,8 @@ def scoring_create_initial_block(block_id: str, tab_prefix: str = "gm") -> dmc.G
                             "type": f"{tab_prefix}-scoring-dropdown-ids-cutoff-met",
                             "index": block_id,
                         },
-                        label="Cutoff",
-                        placeholder="Insert cutoff value as a number",
+                        label="Scoring method's cutoff (>=)",
+                        placeholder="Insert the minimum cutoff value to be considered",
                         value="0.05",
                         className="custom-textinput",
                     )
@@ -1575,8 +1575,8 @@ def scoring_display_blocks(
                                 "type": f"{tab_prefix}-scoring-dropdown-ids-cutoff-met",
                                 "index": new_block_id,
                             },
-                            label="Cutoff",
-                            placeholder="Insert cutoff value as a number",
+                            label="Scoring method's cutoff (>=)",
+                            placeholder="Insert the minimum cutoff value to be considered",
                             value="0.05",
                             className="custom-textinput",
                         ),

app/layouts.py

@@ -103,10 +103,14 @@ def create_results_table(table_id, no_sort_columns):
         columns=[],
         data=[],
         editable=False,
-        filter_action="none",
+        filter_action="native",
+        filter_options={"placeholder_text": " filter data..."},
+        style_filter={
+            "backgroundColor": "#f8f9fa",
+        },
         sort_action="native",
         virtualization=True,
-        fixed_rows={"headers": True},  # Keep headers visible when scrolling
+        fixed_rows={"headers": True},
         sort_mode="single",
         sort_as_null=["None", ""],
         sort_by=[],
@@ -158,7 +162,25 @@ def create_results_table(table_id, no_sort_columns):
                         border: 1px solid #FF6E42;
                         box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
                     """,
-                }
+                },
+                {
+                    "selector": ".dash-filter input::placeholder",
+                    "rule": "opacity: 1 !important; text-align: left !important;",
+                },
+                {
+                    "selector": ".dash-filter input",
+                    "rule": "text-align: left !important; width: 100% !important;",
+                },
+                # Hide the filter type indicators completely
+                {
+                    "selector": ".dash-filter--case",
+                    "rule": "display: none !important;",
+                },
+                # Adjust padding to fill the space where indicators were
+                {
+                    "selector": ".dash-filter",
+                    "rule": "padding-left: 0 !important;",
+                },
             ]
             + [
                 {