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

histogram doesn't appear in responsive views when collapse: false #162

Open
ebenenglish opened this issue Nov 16, 2020 · 5 comments
Open
Labels
bundled-assets JS and CSS Issues

Comments

@ebenenglish
Copy link

When the date range facet is defined in CatalogController with the collapse: false option, as in...

config.add_facet_field 'date_facet_yearly_ssim', label: 'Date', range: true, collapse: false

And the facets on the search results page are "collapsed" due to a responsive view based on the user's viewport (iPhone portrait, iPad portrait, etc.)...

And the user clicks the button to expand the facets...

The histogram visualization is not displayed in div.chart_js.

However, if the user collapses the date range facet and then re-expands it, the histogram is displayed.

See the screen recording below for an example:

blacklight_range_limit_collapse-bug

@jrochkind
Copy link
Member

That's too bad. I know this used to work at one point, I recall manually testing this exact scenario. But the code has changed since then, and this is a sort of thing it's very difficult to make automated tests for.

This stuff has been VERY hard to maintain the chart rendering has seemed to break frequently with many releases. :(

@jrochkind
Copy link
Member

jrochkind commented Nov 19, 2020

I can not reproduce this one in our own (real, production) app, on Blacklight 7.7.0 and blacklight_range_limit 7.9.1. In single-column collapsed mode, when clicking to reveal facets and then date facet specifically, the chart is there as expected for me. (See https://digital.sciencehistory.org/catalog?q= )

I haven't tried to reproduce on "empty" apps, so I don't know if the difference is gem versions, something else in our app, or something else -- I have previously run into chart rendering errors that could even differ depending on browser, or even in the same browser relevant to timing of DOM rendering such that adding or removing things from the page could effect ability to reproduce. :(

It might make sense to add blacklight version, blacklight_range_limit version, and browser(s) reproducing to the report.

@ebenenglish
Copy link
Author

Thanks for testing, @jrochkind. What about if you were to set collapse: false for the year_facet_isim facet here:
https://github.com/sciencehistory/scihist_digicoll/blob/master/app/controllers/catalog_controller.rb#L203

I think it's the collapse: false setting in add_facet_field in conjunction with the collapsed responsive facet view that's the issue.

FWIW, we're running:

  • blacklight-7.13.2
  • blacklight_range_limit-7.9.1
  • bootstrap-4.5.3
  • rails-6.0.3.4

I haven't tried to reproduce this in a vanilla app yet.

With our app (not yet in full production, but running on our QA server here), I'm seeing this behavior with the following device/browser combos:

  • iPhone 8: Chrome, Safari, Firefox
  • iPad: Safari
  • Mac (Mojave): Firefox, Chrome, Safari, Opera

@jrochkind
Copy link
Member

Ah, I see, I missed the collapse: false part of the reproduction. Haven't had time to try to reproduce yet. What is "collapse: false" supposed to do, make it not collapsible, always open?

There is some tricky and possibly problematic JS involved in the blacklight_range_limit that tries to calculate the height/width of the chart and pre-render it even when it's off-screen, which gets tricky. I wonder if it's somehow going wrong. I think there is some way to tell it explicit height/width instead of it trying to calculate it, and I wonder if that would effect the repro, but it doesn't seem to be documented how you do that and I am not sure. How frustrating.

@ebenenglish
Copy link
Author

What is "collapse: false" supposed to do, make it not collapsible, always open?

Yes, exactly. Makes it open by default, the user can choose to collapse/re-open if desired.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bundled-assets JS and CSS Issues
Projects
None yet
Development

No branches or pull requests

3 participants