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

Overlay search for tools, wf, libraries and histories #3460

Merged
merged 13 commits into from Mar 8, 2017

Conversation

Projects
None yet
9 participants
@anuprulez
Copy link
Member

commented Jan 21, 2017

Introduction:

This PR introduces a new User Interface, in the form of an overlay, for a unified search which brings together items from different categories like tools, current history, data libraries and workflows. Here, a user can search for items in these categories at one place. This new UI is written as webhook, masthead type, and is completely optional and is deactivated by default.

This implementation is not re-implementing the Galaxy search, it is re-using the search API that already exists. Hence, enhancing search results is not the scope of this PR.

Moreover, we took the opportunity to introduce a concept of “Most Used Tools”. It is possible to “pin” tools - my favorite tools - and remove tools from future search results - some kind of blacklisting when you know you will never use this tool.

Animated working:

1

2

3

How to activate:

  1. In the galaxy config "galaxy.ini", add path "config/plugins/webhooks/demo" to the variable "webhooks_dir". It will show "search" icon in the masthead.
  2. Click on this search icon which pulls JavaScript and Styles. The icon shows a tooltip - "Click to activate search and press Ctrl + Alt + q to open the overlay".
  3. Now, use a keyboard shortcut Ctrl + Alt + q to open the overlay.
  4. Type in a query to search (at least 3 letters).

Filters and Working:​

The UI has six categories (a set of icons below the search text box):

  • Home - it has all the items including favorites and most used tools
  • History
  • Tools
  • Workflow - it shows results only when a user is logged in
  • Data Library
  • Excluded (displayed by a trash icon) - items refrained from appearing in the search results

When the overlay is launched, "Home" becomes active and shows results for favorites and the most used tools if any. A user has to give at least 3 letters to see search results and move to individual categories (History, Tools, Workflow and Data Library). Search is implemented as "search-as-you-type" as it invokes a search after every letter after the third letter is typed. The user can move back and forth between sections without typing anything in the search text box.

The icons have a helpful tool-tip. All the tiles are click-able which open respective items. Every item in the search results has two icons. One for making it a favorite (pin icon) and another is for excluding it from future searches. Once pin icon is clicked, "exclude" icon gets hidden and pin icon gets tilted and colored. Again, clicking on the colored pin deletes it from favorites and "exclude" icon reappears. Items in the "Favorites" section have a "bin" icon clicking on which remove them from favorites. Clicking on the items appearing in the "excluded" filter does not open the respective item. These have a "bin" icon to allow them to restore again to the search results. Clicking on the items in the most used tools section open them and increases the counter. These items have no extra icons on their tiles.

Additional features:

Moreover, it has the following advantages too:

  • Search results, shown in the form of tiles, can be saved as favorites (or can be pinned). Items can be removed from favorites.
  • They can be excluded so that they do not appear in the results in future. This action is reversible.
  • Most used tools section shows a simple statistic to keep a counter for each tool being used. The items are shown in the decreasing order of their usage.

Web storage:

The features described above have been implemented using browser's web storage to save user's favorites, excluded items and tools usage counter. If a user is logged in, localStorage is used. This storage is permanent until the browser's cache is cleared. If not logged in, sessionStorage is used. It keeps user's data until the tab session remains alive.

Credits:

A big thanks to @bgruening and @joachimwolff for their suggestions and review! All suggestions are welcome.

Note:

To display tools, one library ('mvc/tool/tool-form') is needed which we pulled into webhook plugin after setting it as a window object in Onload.js file (client/galaxy/scripts/onload.js). I believe it is not a standard way but could not figure it out how to pull any Backbone view like tool-form here from the Galaxy if needed for webhooks.

@galaxybot galaxybot added the triage label Jan 21, 2017

@galaxybot galaxybot added this to the 17.05 milestone Jan 21, 2017

@bgruening

This comment has been minimized.

Copy link
Member

commented Jan 21, 2017

Thanks @anuprulez!
Depending on how this feature is received in the community, we have some further plans. We would like to integrate/use more the tagging-schema of Galaxy. Maybe an own category for tags, pinning of tags ...
We could also think about storing the search results in a user-preference object and not in a web storage, so you can take your tweaks to other computers.

Obviously, and ideas, contributions very welcome!

@bgruening bgruening changed the title Integrated search Overlay search for tools, wf, libraries and histories Jan 22, 2017

@martenson martenson self-assigned this Jan 22, 2017

@guerler

This comment has been minimized.

Copy link
Contributor

commented Jan 23, 2017

I wonder if we are overdoing the screen overlay feature and should instead augment the tool panel and the existing search box. It would be straightforward for users to discover this great feature and the ui appearance would be consistent.

@bgruening

This comment has been minimized.

Copy link
Member

commented Jan 23, 2017

@guerler where are we using this yet? Not sure how you imagine all of this in the small left-tool panel.
Our intention was to use as much space as possible to aggregate all searchers, offer some way organize your search results and integrate concepts of favorites and "most often used". I don't see where this all fits into the tool-panel. At least in our instance we can not even show all results that a search yields :(

@guerler

This comment has been minimized.

Copy link
Contributor

commented Jan 23, 2017

These are not blockers, I am just wondering if we can integrate it tighter into the existing ui. How do you feel about using the central panel?

@bgruening

This comment has been minimized.

Copy link
Member

commented Jan 23, 2017

@guerler if people like this concept, sure I'm all in for integrating it into the main UI. We took the way of least resistance and used webhooks, so people can try and give feedback and improve until we are sure that this (drastic?) change to the UI is the correct way.

@guerler

This comment has been minimized.

Copy link
Contributor

commented Jan 23, 2017

Sounds good, thats exactly what I was asking for, and if needed, rendering it in the central panel instead of the overlay should be very easy. So far we are using alternative views for the scratch book, the new library and now here. These separations tend to adversely impact the consistency of the ui appearance.

@jmchilton

This comment has been minimized.

Copy link
Member

commented Jan 23, 2017

My initial impression is that the full screen thing is fine because the search seems to cover much more than just tools and provide a lot of functionality not currently provided in tool search. I also think the webhook approach is good way to prototype things, I do think the styling just "doesn't feel very Galaxy". Is there a way to use the colors and other CSS elements of the main Galaxy app? I can't think of any other place in the app where there are large blocks of black like that. If it was a light gray mostly transparent overlay - I think that would go a long way toward feeling more Galaxy.

@bgruening

This comment has been minimized.

Copy link
Member

commented Jan 25, 2017

@anatskiy @anuprulez can please try to make it following a little bit the Galaxy styles?

@anatskiy

This comment has been minimized.

Copy link
Contributor

commented Jan 25, 2017

@bgruening @anuprulez sure, I'll take a look at it tonight.

@anatskiy

This comment has been minimized.

Copy link
Contributor

commented Jan 26, 2017

@bgruening @jmchilton @anuprulez what do you think about these styles? There are still some more enhancements in mind.
screenshot

@anuprulez

This comment has been minimized.

Copy link
Member Author

commented Jan 27, 2017

@bgruening
I have these changes for the UI of search overlay:

searchui

  • Lighter background

  • Tiles have the same default color as bootstrap buttons

  • Search category bar has the same background color as the Galaxy masthead

@bgruening

This comment has been minimized.

Copy link
Member

commented Jan 27, 2017

@jmchilton @guerler any preferences? :)

@anatskiy

This comment has been minimized.

Copy link
Contributor

commented Jan 27, 2017

@bgruening @jmchilton v2: light-gray colors, blurred background:

screen shot 2017-01-27 at 23 10 17

@jmchilton

This comment has been minimized.

Copy link
Member

commented Jan 29, 2017

I think the styling on all of these is fine - I personally prefer the darker one and the lighter one with the blurred background to the one in the middle.

I'm +1 on this - I really like this optional plugin framework approach - if this proves popular and useful we can merge it in and make it enabled by default and if it doesn't - I don't think it is really hurting anything currently.

@bgruening

This comment has been minimized.

Copy link
Member

commented Jan 29, 2017

@anatskiy can you give the last one a little bit more contrast, the boxes seems to be to blurry - it's hard to read imho.

@frederikcoppens

This comment has been minimized.

Copy link
Member

commented Jan 29, 2017

Interesting, would need to try it to really get a feel how useful it is, but definitely interesting!

Styling I prefer the lighter background with "bootstrap button" colors

@anatskiy

This comment has been minimized.

Copy link
Contributor

commented Jan 29, 2017

@bgruening yep. I tried to stick to Galaxy colors (light blue boxes). I'll choose better colors and experiment with bootstrap colors (as @frederikcoppens mentioned).

}
// Open the link in the iframe
else if ( form_style === 'regular' ) {
var form = new ToolForm.View( { id : id, version : version } );

This comment has been minimized.

Copy link
@guerler

guerler Feb 7, 2017

Contributor

Can we use links here routing through Galaxy like e.g. http://127.0.0.1:8080/?tool_id=join1? Then we would not need to provide globals and rely on the inner app structure.

This comment has been minimized.

Copy link
@anuprulez

anuprulez Feb 13, 2017

Author Member

@guerler Shall we still open this link (http://127.0.0.1:8080/?tool_id=join1) in the middle section of the Galaxy or in a different tab of the browser?

This comment has been minimized.

Copy link
@anuprulez

anuprulez Feb 14, 2017

Author Member

If we set this link to document.location, it will reload the full page and after every reload, user needs to click on the search icon in masthead to activate the overlay search.

@anatskiy

This comment has been minimized.

Copy link
Contributor

commented Mar 5, 2017

The final version
screenshot

@anatskiy anatskiy force-pushed the bgruening:search_overlay branch from 025ec33 to 4120781 Mar 5, 2017

@bgruening

This comment has been minimized.

Copy link
Member

commented Mar 5, 2017

Thanks @anatskiy!

@bgruening

This comment has been minimized.

Copy link
Member

commented Mar 5, 2017

@guerler @jmchilton what do you think?

@jmchilton

This comment has been minimized.

Copy link
Member

commented Mar 6, 2017

Looks wonderful from my end, +1 from me. Thanks for working on this!

@bgruening

This comment has been minimized.

Copy link
Member

commented Mar 6, 2017

@jmchilton do we need to rebase the client builds or can this be done during the merge?

@martenson

This comment has been minimized.

Copy link
Member

commented Mar 6, 2017

@bgruening you can do it in merge, the easiest is to just add another make client commit after the merge

@martenson martenson removed their assignment Mar 6, 2017

@martenson

This comment has been minimized.

Copy link
Member

commented Mar 6, 2017

I would like to, but I won't have time to review and test this in a short term. I am sorry. (This does not affect mergeability, just an apology.)

@dannon

This comment has been minimized.

Copy link
Member

commented Mar 6, 2017

+1 to just rebuilding during merge -- it isn't even an extra commit, it's part of the merge.

@anuprulez

This comment has been minimized.

Copy link
Member Author

commented Mar 8, 2017

@dannon @jmchilton There are no conflicts in this branch. Can this PR be merged?
Thanks!

@dannon dannon merged commit 07490e4 into galaxyproject:dev Mar 8, 2017

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
@dannon

This comment has been minimized.

Copy link
Member

commented Mar 8, 2017

@anuprulez Yep, thanks for the contribution!

@anuprulez anuprulez deleted the bgruening:search_overlay branch Mar 8, 2017

@anuprulez

This comment has been minimized.

Copy link
Member Author

commented Mar 8, 2017

@dannon Thanks for merging!
Thanks a lot @bgruening and @anatskiy for your suggestions and help!

@guerler

This comment has been minimized.

Copy link
Contributor

commented Mar 8, 2017

This seems to impact the 'Saved Histories' view, displaying browser console errors.

@dannon

This comment has been minimized.

Copy link
Member

commented Mar 8, 2017

@guerler Checking it out now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.