Openrefine: Add search/filter to project list page

[tfmorris]

For users with many projects an easy way to narrow down the list would be to provide a search function with filters the list to those with project names, descriptions, or other metadata which have substring matches with the user's input.

This could take the form of a simple text input field at the top of the page with the standard magnifying glass search icon.

[thadguidry]

Adjustments

With subtle changes to the existing projectTags div and ul#tagsUI (removing margin, adjusting padding, etc.) such as:

1. Create additional space for the magnifying glass icon. Shifting left the existing tagsUI and small margin adjustment to projectTags to allow more vertical room perhaps:

ul#tagsUl {
    margin: ;
    padding: 0;
    left: 60px;  // add left to make room for magnifying glass icon
}

#projectTags {
    position: relative;
    padding: 3px 10px;
    margin: 0px;  //change to 0px from 5px
    font-size: 130%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: #bcf;
    min-height: 18px;
    height: auto;
    overflow: auto;
}

1. Another <div> layer for projectSearch might be added for text input for the new search functionality.

---

Prototype visualization

Unclicked magnifying glass icon (Material.io Icon) :

Clicked magnifying glass icon (showing icon highlighted with background contrasting) with projectSearch text input box replacing the projectTags element:

---

Example code

• Javascript/CSS using Jquery animate(): http://jsfiddle.net/2vf3coze/
-

[thadguidry]

@tfmorris

1. Should this be limited to searching only project Names?
2. I think it would be more useful to allow it to search on any of the project metadata (Thinking that eventually the metadata work that Jacky did might get pulled back in again)?
3. or just limited to searching and filtering the project listing against our default metadata now of (Name, Tags, Creator, Subject, Description)?

[tfmorris]

The standard Google approach of searching everything makes the most sense. I've clarified the description.

[mayralgr]

Hi @thadguidry if there is no one working on this issue, I would like to give it a try.
As I understand from the point 2 in https://github.com/OpenRefine/OpenRefine/issues/2749#issuecomment-645635905
it would be using the project metadata?

Thank you!

[tfmorris]

@mayralgr That would be great. Thanks for volunteering! I've assigned the issue to you. Let us know if you need any help.

Yes, searching the project metadata fields such as name, description, etc is what's needed. The original issue was updated with that clarification.

[thadguidry]

@mayralgr Yes, the current provided metadata for projects should be searchable. The UI prototype is just 1 possible look and feel, but feel free to slightly diverge from that if it makes more sense. It would be awesome if the listing could be updated dynamically while users began to type in matching terms, but that is not a hard requirement, and might be unfeasible given your skills or our current architecture that might prevent that kind of development. At a minimum, the listing can be updated after a user types in a term or terms and then hits their ENTER key to initiate the query to update the listing. Your choice on what works well, is easier, or feels right for now. We can iterate on it as you progress on your branch and the community provides feedback on your work.