Fix autocomplete studies

[will-moore]

NB: this branch is on top of #45, making it easier to deploy both together....

Bug fix:

Fixes #46.
To test, see screenshot on the issue.
E.g. Choose a key (not "Any") in the dropdown list, then type in the auto-complete with text that matches study names e.g. "cell" or "light". You shouldn't see the study names show up at the top of the auto-complete.

Selected image popup

When you click on a thumbnail, instead of going directly to iviewer in a new Tab, we now show the Key-Value pairs for the image in a popup:

Studies link

Update: there is another tiny usability fix in this PR: the link to studies has been removed from the top row of search results because I find it really annoying that I keep clicking on this by accident and get taken to the webclient/ showing the study in another Tab, when I really just wanted to expand the results to see the images.
I have moved the link inside the results so you can still click on it once expanded. However, I'm still not sure I like it even there, as it feels like it's part of the results - If I browse to the study I might expect to see only the search results within that study (like in mapr) but in fact this will show ALL the images in the study. So maybe we should just remove the link, as you can always find the study when you browse the images?

Before:

After:

[francesw]

The image popup works well, but I was expecting to hover over the thumbnail and it will popup (possibly because of the popup behaviour from the gallery thumbnails on the front page). Clicking on the thumbnail is not obvious, so this popup may only be found if you know to look for it.

For the studies link, I agree that users may think opening the study will only open the search results within the study. I'm not sure if we label it "Open study for all images" would help. Perhaps it would be better to add a new column for this.

[will-moore]

@francesw I tweaked the link to Studies "Images from Study..." to hopefully make it clearer (added tooltip too).

I updated the screenshot above to show that the Ontology external links are being created with favicons etc.

Any other feedback? Can you review/approve this PR in preparation for getting it merged, hopefully this week? Thx.

[francesw]

I like the "Images from Study" tooltip, this is helpful.

I also like the Ontology external favicons. I tested a few and they link out and work well.

I think you've added a blue outline around the image when the mouse hovers over it. I like this, but you may want to make it slightly thicker as you can't see it when the image is dark (see screenshot).

[will-moore]

@francesw I made the hover border a little thicker and lighter, and I added a thicker border when you click to show selected thumbnail. Deployed on idr-testing

[francesw]

@will-moore Thanks! Thicker hover border looks good and I like the even thicker border when you click on a thumbnail to show the one that is selected.