Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create reusable FilterMenu with advanced options #16522

Merged
merged 12 commits into from
Oct 13, 2023

Conversation

ahmedhamidawan
Copy link
Member

@ahmedhamidawan ahmedhamidawan commented Aug 6, 2023

Instead of creating a new filter/search with an advanced filtering menu for each item (HistoryFilters, filters in HistoryPublishedList, ToolSearch, ...), this FilterMenu component, along with the Filtering class can be reused with the appropriate props.
Also modified the Filtering class so that we never need to create a filterSettings = { "name:": "x", "create_time>": "2023" } object (with "name" -> "name:" aliases) and can instead just use:
filters = { name: "x", create_time_gt: "2023" }

Sample usage:

Provide a Filtering object with valid filters in the <script> (or import it):

const validFilters = {
    name: { placeholder: "name", type: String, handler: contains("name"), menuItem: true },
    tag: { placeholder: "tag", type: String, handler: contains("tags", "tag", expandNameTag), menuItem: true },
    deleted: {
        placeholder: "Filter on deleted items",
        type: Boolean,
        boolType: "is",
        handler: equals("deleted", "deleted", toBool),
        menuItem: true,
    },
    update_time: {
        placeholder: "updated time",
        type: Date,
        handler: compare("update_time", "le", toDate),
        isRangeInput: true,
        menuItem: true,
    },
};

const filters = new Filtering(validFilters);

// Any of these below could be props or computed as needed
const filterText = ref("");
const showAdvanced = ref(false);
const loading = ref(false);

In the <template>, provide the FilterMenu props as required:

<FilterMenu
    name="Test Items"
    :placeholder="'Search test items' | localize"
    :filter-class="filters"
    :filter-text.sync="filterText"
    :loading="loading"
    :show-advanced.sync="showAdvanced" />

Shows up like so:
image

How to test the changes?

(Select all options that apply)

  • I've included appropriate automated tests.
  • This is a refactoring of components with existing test coverage.
  • Instructions for manual testing are as follows:
    1. [add testing steps and prerequisites here if you didn't write automated tests covering all your changes]

License

  • I agree to license these and all my past contributions to the core galaxy codebase under the MIT license.

@ahmedhamidawan ahmedhamidawan added area/UI-UX kind/feature kind/refactoring cleanup or refactoring of existing code, no functional changes labels Aug 6, 2023
@ahmedhamidawan ahmedhamidawan force-pushed the reusable_filters_component branch from 590f57b to daae119 Compare August 28, 2023 18:13
@ahmedhamidawan ahmedhamidawan force-pushed the reusable_filters_component branch from 684a07a to 4c17c80 Compare September 29, 2023 21:48
@ahmedhamidawan ahmedhamidawan force-pushed the reusable_filters_component branch 2 times, most recently from 1e39d4e to 6909bf2 Compare October 10, 2023 00:20
@ahmedhamidawan ahmedhamidawan marked this pull request as ready for review October 10, 2023 00:20
@github-actions github-actions bot added this to the 23.2 milestone Oct 10, 2023
Instead of creating a new filter/search with an advanced filtering menu
for each item, this `FilterMenu` component, along with the `Filtering`
class can be used in each case.
Also modified the `Filtering` class so that we never need to create a
`filterSettings = { "name:": "x", "create_time>": "2023" }` object
and can instead just use:
`filters = { name: "x", create_time_gt: "2023" }`
also add a `'Radio'` type in addition to the existing `typeof Boolean`
also add a function to `Filtering` class: `addRangedFiltersIfNotPresent()`
Add functionailty for 3 types of menus. E.g.s:
- `HistoryPanel` has default `linked` menu
  i.e.: `filters` object is reactive to `filterText`
- `ToolSearch` has `separate` menu (not reactive,
  since `filterText` is for side panel search and menu
  is for advanced search in center panel)
- `WorkflowBox` has a `standalone` menu (no `filterText`
also:
- create `WorkflowFilters.js` that exports reusable `Filtering`
- allow `MultiTags` filter type for `FilterMenu`, which allows you to
  add a `StatelessTags` field in the menu, allowing for array values
  as filter
- allow `is:filter` filters that are Boolean filters, except, they
  only be set to true
- apart from `q=filter1&qv=val&q=filter2&qv=val&...` query strings
  for the backend, the `Filtering` class can now also create
  `backendFormatted` strings in the form `filter1:val filter2:val`
@ahmedhamidawan ahmedhamidawan force-pushed the reusable_filters_component branch from a771985 to 1c37fa9 Compare October 12, 2023 18:31
@dannon dannon merged commit 57985f1 into galaxyproject:dev Oct 13, 2023
42 of 43 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/UI-UX kind/feature kind/refactoring cleanup or refactoring of existing code, no functional changes
Projects
Development

Successfully merging this pull request may close these issues.

2 participants