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;
}

2. 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 #2749 (comment)
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.

[khadijm]

hi @wetneb please can you assign me this issue? thanks

[wetneb]

@khadijm I have already assigned you a few issues, maybe that is good enough for a start? Once you have closed those we can assign you more :)

[khadijm]

thanks @wetneb, i will start with draft PR soon

[Babi-B]

Hello. @wetneb could you please assign me to this issue?

[thadguidry]

@Babi-B I think most of the work has already been done and just needs a bit more polish on top of that work if you follow the thread and commits in the old PR #3394

[Babi-B]

Okay, thank you @thadguidry

[Babi-B]

Hello @thadguidry. I have successfully run the project and reviewed what @mayralgr did in #3394. However, I don't see the work done in #3394. It seems the old PR had not been merged. How would you want me to continue now?

[thadguidry]

@Babi-B You should be able to checkout that PR. and then create a new branch based on it and call it whatever you want locally, and then submit a new PR yourself with your GitHub credentials.

In GitHub interface, when viewing a PR you can click on the <> Code button in top right and see options on how to checkout the PR, depending on your preference. (If you use Visual Studio Code, you can add the GitHub PR extension directly from Microsoft to more easily navigate any open source repo you need) Also, PR's in GitHub are basically branches themselves of a Git repo, but carry special metadata for GitHub.

[Babi-B]

@thadguidry okay. Thanks

[Babi-B]

Hello @thadguidry. I have checked out @mayralgr's PR and also gone through the comments. There are some things I wish to point out :

1. The search icon is not static when clicked on
2. On chrome, the search bar does not collapse when the icon is clicked a second time. However, the functionality works fine on Firefox
3. When the application initially opens in Chrome (http://127.0.0.1:3333/), it lands on the "Open Project" tab. However in Firefox it opens the "Create Project" tab.

Should I make a PR so you review the work yourself?

[thadguidry]

@Babi-B Great! Now what are your feelings about what to do about them, or not do. In regards to 3. we need to keep original functionality which is "Create Project", no matter the browser.

[Babi-B]

@thadguidry I wish to work on the issues.

[Babi-B]

Hello, @thadguidry @wetneb @antoine2711. While I continue working I'll like to give an update on what I've been able to do so far.

1. The search icon now remains static when clicked
2. The search bar collapses irrespective of the browser (Firefox, Chrome, Edge, and I.E.)

OpenRefine.test.mp4

When the application initially opens in Chrome (http://127.0.0.1:3333/), it lands on the "Open Project" tab.
However, in Firefox it opens the "Create Project" tab.

I'm still working on this

[Babi-B]

Hello, @wetneb @thadguidry. Could you please review this?