Skip to content

Virtual Shelf Browse

tworrall edited this page Dec 22, 2021 · 4 revisions

Virtual Shelf Browse

Overview

This feature is the scrollable call number-based listing of works in the Cornell library. It's displayed in two locations: the item view page, when applicable, and in an expanded form as an option on the call number browse page.

PRs

https://github.com/cul-it/blacklight-cornell/pull/1229
https://github.com/cul-it/blacklight-cornell/pull/1276
https://github.com/cul-it/blacklight-cornell/pull/1279
https://github.com/cul-it/blacklight-cornell/pull/1341
https://github.com/cul-it/blacklight-cornell/pull/1346
https://github.com/cul-it/blacklight-cornell/pull/1654
https://github.com/cul-it/blacklight-cornell/pull/1735

New Components

app/assets/javascripts/virtual-browse.js
app/assets/stylesheets/cornell/_virtual-browse.scss
app/helpers/virtual_browse_helper.rb
app/views/browse/_virtual_browse.html.erb
app/views/catalog/build_carousel.js.erb
app/views/catalog/next_callnumber.js.erb
app/views/catalog/previous_callnumber.js.erb
lib/blacklight_cornell/virtual_browse.rb

Note: there are a number of new png files in the app/assets/images/cornell/virtual-browse directory. These files get used in place of book cover images when those are not available.

Updated Components

app/assets/stylesheets/cornell/cul-catalog.scss
app/controllers/browse_controller.rb
app/views/browse/_heading_callnumber.html.erb
app/views/browse/index.html.erb
app/views/catalog/_call_number_browse_links.html.erb
config/routes.rb
lib/blacklight_cornell/cornell_catalog.rb

Process Flow -- Item View Page

When a user clicks a work in the search results, or gets to the item view page via another route, the CornellCatalog library class (in the show method) checks to see if the solr document includes the callnumber_display field. If it does, it calls the get_surrounding_docs method in the VirtualBrowse library class twice, passing the callnumber, a direction, the start value, and the number of rows to retrieve as arguments. The direction in the first call is "reverse" and 1 row gets returned. In other words, get_surrounding_docs will do a Solr query that gets the work with the previous call number to the work being displayed in the item view page. The next call to get_surrounding_docs has a "forward" direction and returns 2 rows: the first row is for the work being displayed in the item view page, while the second is for the work with the next call number. Again, get_surrounding_docs does a Solr query to pull in the information for these two works. (These are the initial 3 items that appear in the VSB.) Note: don't let the badly named global variables ("@previous_eight" and "@next_eight") in the CornellCatalog's show method confuse you. Originally, these calls returned 8 and 9 rows respectively, but for performance reasons it was changed to 1 and 2 (and I forgot to modify the variables).

When the _call_number_browse_links.html.erb template gets rendered, the badly named global variables mentioned above are used to build the initial VSB display. There's a lot going on in this template because it needs to set the navigation structure at the top of the scolling area as well as define a structure that will hold the html that gets rendered by javascript. This javascript, which is in the aptly named virtual_browse.js file, checks to see what page has been loaded, the item view (or catalog show page) or the expanded VSB page (or browse index page). For the item view page, two Ajax calls get made: the first is via the getPrevious function and the second is via the getNext. The routes for both Ajax calls is of course through the VirtualBrowse class. As happens when the page is initially loaded, Solr queries take place that get an additional 8 "previous" works and an additional 8 -- wait for it -- "next" works. For the Ajax calls, the query results get rendered on the page using the next_callnumber.js.erb template and the previous_callnumber.js.erb template. (No way you were expecting that.) These same two javascript functions get invoked when the user scrolls through the VSB. The Ajax calls get made when the user displays the fifth "unseen" work within the VSB, either scrolling to the right or left. There are two global variables that track how many times the Ajax calls have been made: previousCount and nextCount. After the count reaches 3, the javascript stops making any more calls and instead displays the "View more results" link, which takes the user to the expanded view. One final point about the javascript. The same file handles the rendering of the small information box that displays metadata for the work currently highlighted in the VSB.

Process Flow -- "Expanded" VSB

Users can access the expanded VSB page either by clicking the "Expanded view" link in the VSB on the item view page, or by selecting "Virtual" in the "View type" select element on the Call Number browse page. In the former instance, the call number of the work displayed in the item view page is the starting point for all the queries used to populate the expanded VSB. In the latter case, it's the call number of the work that's currently at the top of the table of results -- not the call number that the user queried when arriving at the call number browse page. (Pretty clever, huh?) Also note that in both cases the BrowseController's index method is the starting point.

The flow here is very similar to the item view page flow. Again, the get_surrounding_docs method in the VirtualBrowse class gets used but here the number of rows returned in the Solr queries actually is 8 for "previous" queries and 9 for "next" queries. It's 9, rather than 8, because you need to return the main item itself and the next 8. There are similarlities between the _virtual_browse.html.erb template and the VSB portion of the _call_number_browse_links.html.erb. The basic structure of the VSB is the same; the intial size is the main difference. The next_callnumber.js.erb template and the previous_callnumber.js.erb template are used with the expanded VSB and invoked by the Ajax calls that get made as the user scrolls. Not surprisingly, the same virtual_browse.js file also does all the work here. Speaking of scrolling, there is no limit here. In other words, the nextCount and previousCount variables do not get used.

It's worth pointing out one more feature that the Expanded VSB has -- the libraries select element. The default behavior is to allow users to browse by call number across all libraries. The select element provides the user with a way to browse only works in a specific library, which is done by passing the selected library as a parameter in the url, like this:

<option value="/browse?authq=MT599.B4 G37 1980&amp;browse_type=virtual&amp;order=forward&amp;start=0&amp;fq=location:&quot;Adelson+Library&quot;">Adelson Library</option>

The BrowseController passes the location to the get_surrounding_docs method where it is used in the Solr query.