This week, I spent time working on the reset of the scroll bar position while doing facets. The intention is to avoid resetting in cases where the data set does not change.

The facets right now call Refine.update in order to update the entire data table every time a facet is applied. The code for this is written in browsing-engine.js. An easier way to solve this was to pass an argument in the said function to keep track of where the function is being called from.

In short, this will keep track of the function call and each time Refine.update is called, it will contain a variable fromFacets. When fromFacets is true, the update function in data-table-view.js will update the table and reset it’s position to where it was before. This doesn’t directly keep track of whether the data-table has actually changed or not but instead keeps track of whether we should go back to the previous position or not. It’s the same thing in essence but there would be a significant difference in execution. Doing this does not affect the table for cases where re-rendering is absolutely required, for example, in Text Filter, choosing different options in Facets. This is beacuse in those cases the fromFacet variable is not true, hence no resetting of postions. So every time the data set changes, position is reset to start otherwise the scrollbar remains where it was before.s

Currently, all the predefined facets like Range Facet, Time Range Facet, Scatterplot Facet, Text Search Facet, and List Facet do not re-render the data table. Working on this also required fixing heights and modifying the functions being called in the process of update.

This feature would require a thorough amount of testing with different operations and combinations of facets to ensure that it’s working well. I have tested facets with Text Filter which seems to be working.

As for Intersection API, there are two reasons it’s not suitable for what we are trying to do:

  • We cannot limit the number of callbacks for intersection
  • We cannot check partial visibility because with threshold: 0 functions are going to be executed immediately when the element comes into view.