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.

Sign up for GitHub

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

Jump to bottom

Interactivity of visualizations #14

Closed
sfarnel opened this issue Aug 14, 2020 · 48 comments
Closed

Interactivity of visualizations #14

sfarnel opened this issue Aug 14, 2020 · 48 comments
Assignees
@jchartrand @CarlsoFiorention
Labels
needstimeestimate priority:1

Comments

@sfarnel
Copy link
Member

sfarnel commented Aug 14, 2020

I believe that the different views were meant to be interactive, i.e., when I clicked on 2012 under Years, it would refresh the results based on that new facet.

image
@sfarnel
Copy link
Member Author

sfarnel commented Aug 17, 2020

I would think the same would be true of the circles under Degrees and Languages

@sfarnel
Copy link
Member Author

sfarnel commented Aug 21, 2020

Pending outcome of #22

@jchartrand
Copy link
Collaborator

@sfarnel

Starting in on this. The questions begin...

Above you say that clicking on 'degrees' would refresh the results. We don't, though, provide any other way (as it stands) to specify degree in a search. So we'd be adding a new search term to our SOLR queries, albeit only usable by clicking on a degree bubble. Which is fine - I can do that.

But, after the degree bubble has been clicked, and the new search issued, and the results shown, the UI then doesn't have any way to indicate that the new results have been refined by degree.

And further, if someone then added another term like say year, would we continue to apply the degree filter as well, even though they might have forgotten it was applied, or maybe might not even want the degree filter applied (but there is then no way to remove it?)

All this maybe suggests a new dropdown for degree?

For university, let's say someone has searched for 'piano' as a search term, and specified Queen's University in the dropdown. They search, get their results, and then see Royal Roads in the Map, so click that. Now, do we replace Queen's with Royal Roads in our query? Or do we filter by both Queen's and Royal Roads? I suspect both? But then how do we indicate in the interface that both have been added to our query? An option here is to make the university select a multi-select (which would also be useful on it's own to allow filtering by multiple universities). It would look like this in the UI:

image

@jchartrand
Copy link
Collaborator

Might also want to consider multi-select for subject and author (and degree if you wanted to add that as a field)

@sfarnel
Copy link
Member Author

sfarnel commented Sep 22, 2020

Thanks @jchartrand

  1. I would be fine with having a dropdown for degree. @CarlsoFiorention do you see this fitting into the design? If so where should it be?
  2. As a user I would be expecting each additional selection to continue to refine the search
  3. As a means of allowing the user to re-do and also act as a reminder I wonder about what is suggested in issue Reset to start new search when on results page #21, that is, a 'clear' or 'reset' button
  4. If a user has searched piano and then selected Queens then the map should already only be showing Queens and not Royal Roads. But I agree that it might be nice to allow multiple selections right off the bat (without having to continue to add items to refine

@CarlsoFiorention thoughts on 2-4 above?

@jchartrand
Copy link
Collaborator

jchartrand commented Sep 22, 2020 via email

@CarlsoFiorention
Copy link
Collaborator

CarlsoFiorention commented Sep 22, 2020 via email

@jchartrand
Copy link
Collaborator

jchartrand commented Sep 22, 2020 via email

@CarlsoFiorention
Copy link
Collaborator

CarlsoFiorention commented Sep 22, 2020 via email

@CarlsoFiorention
Copy link
Collaborator

here's the attachment
Screen Shot 2020-09-22 at 12 04 56 PM

@jchartrand
Copy link
Collaborator

Fine with the reset button.

The other part I just don't understand. I thought you were suggesting how to handle multiple values for a given query term (e.g., Queen's and Royal Roads), but I just don't see that here.

@sfarnel maybe you could step in here and give your take on this?

@sfarnel
Copy link
Member Author

sfarnel commented Sep 22, 2020

Thanks @CarlsoFiorention and @jchartrand I agree with the name and placement of the Reset button.

I think we simply have a few topics being discussed at once which is causing some confusion. To begin, by adding a 'Reset' button I think we will help the user a great deal by a) not forcing them to go back to the home page or uncheck items from a dropdown in order to do a new search, and b) reminding them that they have one or more options selected and this is reflected in the result list to the left and also in the visualizations which also adjust as the search changes.

One thing Carlos was getting at (I believe) is: would it be possible also to visually make it clearer to the user which filters they currently have active? For example, see this screen shot:

image

The fact that the user has specified a search term, selected an institution, and specified an author name, is obvious because there is text visible in each of the boxes. Would it be possible through an additional means, such as making the background behind the text, a darker shade of blue? That way it would be very obvious. This may not be possible given that we're working with existing widgets.

The other issue Carlos is addressing relates to your suggestion, James, that we could/should make it easier for a user to 'deselect' a term in a field. What Carlos had originally designed was that this would happen when a user clicked on the field itself, whereas you have proposed a simple x next to the term, which I think works in this design.

I think making multiple terms available for institution and subject, and degree once that is added, using the approach with the x next to the term, would be excellent. Author I'm not so sure of the utility of, but we could make it possible as well.

Does that help clarify?

@jchartrand
Copy link
Collaborator

jchartrand commented Sep 22, 2020 via email

@sfarnel
Copy link
Member Author

sfarnel commented Sep 22, 2020

Sounds excellent @jchartrand Many thanks!

@CarlsoFiorention
Copy link
Collaborator

CarlsoFiorention commented Sep 22, 2020 via email

@CarlsoFiorention
Copy link
Collaborator

CarlsoFiorention commented Sep 22, 2020 via email

@jchartrand
Copy link
Collaborator

I've more or less now got the multi selects working (not yet pushed up to server though), along with the backing queries.

I've made the university and author queries both OR queries, e.g.,

RoyalRoads OR Alberta
JamesChartrand OR JustinTrudeau

because you would get zero results if they were AND queries.

For the subject though, should that be OR'd or AND'd?

I'll make them AND for now, although I could see that could be confusing since the other two are OR.

@jchartrand
Copy link
Collaborator

Okay, I've pushed up the changes for the multi-selects for university, author, and subject.

In the end I OR'd together all values for a single field, so you'll get queries like:

(queens OR UBC) AND (JamesChartrand OR JustinTrudeau) AND (cats OR dogs)

You'll also notice that the select field shows a maximum of 1 selected value when the field isn't in focus. If multiple values have been selected then a number shows how many more are selected:

image

Clicking on the field will show all the values.

@sfarnel
Copy link
Member Author

sfarnel commented Sep 28, 2020

Thanks @jchartrand this is looking great! @CarlsoFiorention @danydvd can you have a look and see what you think?

@CarlsoFiorention
Copy link
Collaborator

CarlsoFiorention commented Sep 28, 2020 via email

@jchartrand
Copy link
Collaborator

I've pushed up more changes: the degree filter (and made it multi-select as well) with the corresponding SOLR query. I've also added the 'Reset' button, although I'm still working on getting it to clear the multiselects. It only clears the text query and the years for now.

@jchartrand
Copy link
Collaborator

In case you tried it in the last three minutes, I forgot to rebuild it before uploading. the new version is now up.

@sfarnel
Copy link
Member Author

sfarnel commented Sep 28, 2020

Thanks @jchartrand looking great! @danydvd and @jchartrand I see that the typo (Master of Scence, missing the "i") is still visible in the dropdown and the visualizations. Can we fix this asap please?

@jchartrand
Copy link
Collaborator

jchartrand commented Sep 28, 2020 via email

@danydvd
Copy link
Contributor

danydvd commented Sep 29, 2020

@jchartrand CanLink-new-5 is re-indexed and the typo is fixed.

Also the new index now address #4 and the subjects suggestor is using the fuzzy analyzer now

@sfarnel
Copy link
Member Author

sfarnel commented Sep 29, 2020

Thanks @danydvd looks great!

@jchartrand
Copy link
Collaborator

I've finally fixed the 'reset' on the autocomplete fields (university, degree, subject author). It all seems to work, but please let me know if you see anything unusual.

@CarlsoFiorention
Copy link
Collaborator

CarlsoFiorention commented Sep 29, 2020 via email

@jchartrand
Copy link
Collaborator

I've set the button height to a fixed value, which seems to keep them from expanding.

I'm not sure what you mean, though, when you say: "Same issue pushes the widgets menu down"

@CarlsoFiorention
Copy link
Collaborator

CarlsoFiorention commented Sep 30, 2020 via email

@jchartrand
Copy link
Collaborator

I've been working today on the interactivity of the visualizations, and have got the degree and year visualizations producing new searches from clicks on values (not yet pushed up to server though as I'm still fixing some weird state problem with the year fields when writing them in dynamically).

A couple of things have come up with subject and universities though:

Subject Wordcloud: As it stands we show all the words individually in the word cloud like so:

image

In other words, we don't keep the subject strings together. If we did, it would look like this:

image

So two questions about this:

  1. Which would you rather show in the word cloud: the individual words or the full subject strings?

  2. If we stick to showing the words individually, then a click on a word (e.g., 'bacon') will only refine the subject search by that word and not by the full subject string in which the word occurred ( e.g., 'bacon, francis, 1561-1626 -- ethics'). But maybe that is okay since the person did click only on 'bacon'?

I'll post my other question about universities in a different comment.

@jchartrand
Copy link
Collaborator

Thank you James. What I meant is that when the Institution or subject fields expand, they pushed down the widget menu bar (and also the widget, see the screenshot attached).

The screenshot didn't seem to make it through.

But, the displacement of the widget bar is temporary, while the user is adding tags to a multiselect field. Once they click away, everything resizes back into place. I'm not sure what the alternative would be since the multi-select field has to expand to show which tags are in the field.

@sfarnel
Copy link
Member Author

sfarnel commented Sep 30, 2020

Thanks @jchartrand If we can show the full subject string in the visualization (and thereby have any refinement happen based on the full subject string) that would be ideal!

@jchartrand
Copy link
Collaborator

Thanks @jchartrand If we can show the full subject string in the visualization (and thereby have any refinement happen based on the full subject string) that would be ideal!

Okay, will do.

@CarlsoFiorention
Copy link
Collaborator

Screen Shot 2020-09-30 at 11 16 41 AM

@jchartrand
Copy link
Collaborator

Yes, that extra space is temporary.

It would be difficult to stop that expansion because of how the grid works, but also not so easy when selecting authors, degrees, or even subjects, which would all run into the widget bar or the map.

Maybe you are suggesting that the field should just overlap anything under it when the field is expanded, but this is a case where the material-ui component (called Autocomplete - https://material-ui.com/components/autocomplete) is setup to do it the way it does (by pushing things out of the way temporarily). To change the component could well end up taking quite a bit of time.

@jchartrand
Copy link
Collaborator

So, my other question about universities:

The university bubble visualization shows the shorter university names. But when clicking on any of the bubbles, we want to then invoke a search that uses the full university name (so it matches what we show in the Institution filter, i.e, in the multiselect). So I need some way to lookup the full university name from the shorter name. Basically I need the shorter name added to Danoosh's university mapping file:

http://206.167.181.124/institutions.json

Each entry in that file is now like:

{
   "http://canlink.library.ualberta.ca/institution/Athabasca_University": 
      {
         "name": "Athabasca University", 
         "items": "4",
         "coordinates": [54.7224, -113.303]
      }
}

and it would be great if we could also add the shorter name:

{
   "http://canlink.library.ualberta.ca/institution/Athabasca_University": 
      {
         "name": "Athabasca University", 
         "items": "4",
         "coordinates": [54.7224, -113.303]
         "shortName": "Athabasca"
      }
}

Another alternative is that I use the shorter name in the filter (in the Multiselect) which would have the added benefit that we would get less of this unfortunate resizing that happens with some of the longer names in there now:

image

@jchartrand
Copy link
Collaborator

Ahhhhh, I hadn't fully thought through that last question. Down at the bottom of my post I'd said that I could just show the short names in the multiselect, but I can't without them being in Danoosh's mapping file (which is where I get the names to show as options in the multiselect)

So I would still need the short names put into Danoosh's mapping file.

@sfarnel
Copy link
Member Author

sfarnel commented Sep 30, 2020

Thanks @jchartrand and @CarlsoFiorention At this stage we may have to live with the way that the visualizations temporarily get pushed down when multiples are selected. But can keep this on the radar for additional hours should they become available.

@sfarnel
Copy link
Member Author

sfarnel commented Sep 30, 2020

@jchartrand re: short names universities, let's explore that, especially if it might help with the visualizations getting pushed down when multiples are selected. @danydvd can you get this data into the mapping file? Thanks!

@danydvd
Copy link
Contributor

danydvd commented Sep 30, 2020

@jchartrand @sfarnel short names has been added to the institutions.json at /var/www/canlink.ca/html/

@sfarnel
Copy link
Member Author

sfarnel commented Sep 30, 2020

Brilliant; thanks @danydvd

@jchartrand
Copy link
Collaborator

Okay, the visualizations are now all interactive. If you click a data point in any visualization it will update the query (including the visible fields in the search form) and re-issue the query.

I've also changed the university filter to use the short names from institutions.json. Note that I had a problem with my browser caching old copies of the insititutions.json file, so I've added cache-busting to the call, but please let me know if anything is amiss, in particular if the university dropdown doesn't work, or crashes the page. You can also of course empty your caches, but we don't want to assume regular users would do that.

@sfarnel
Copy link
Member Author

sfarnel commented Oct 1, 2020

Many thanks @jchartrand this is just great! @CarlsoFiorention @danydvd please spend some time with this and see what you think. I've been having fun playing already!

@CarlsoFiorention
Copy link
Collaborator

CarlsoFiorention commented Oct 1, 2020 via email

@danydvd
Copy link
Contributor

danydvd commented Oct 2, 2020

It is working great. Thanks for all the work @jchartrand

@jchartrand
Copy link
Collaborator

jchartrand commented Oct 4, 2020 via email

@sfarnel
Copy link
Member Author

sfarnel commented Oct 6, 2020

Done. Closing

@sfarnel sfarnel closed this as completed Oct 6, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jchartrand jchartrand

@CarlsoFiorention CarlsoFiorention

Labels
needstimeestimate priority:1
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@jchartrand @sfarnel @danydvd @CarlsoFiorention