CueGrid - Vertical Scrolling Issue!

[pankaj.jain]

Hi Isomorphic,

We have been using a recent build of SmartGWT 6.0 (dt. 17th Jan).
We are facing a very unique issue.

Test Scenario:
1. Running cube with 3 facets (1 row, 2 column facets)
2. Around 80-100 facet items present for the first 2 facets
3. Data is being paged/loaded dynamically as user scrolls
4. When Cube is loaded, we load it in Collapsed Form!

Issue:
- As we scroll down vertically in the cube, we notice that the scrollbar size increases, thus indicating less data than what actually is present!
- As we scroll back up, the scrollbar size shrinks, indicating more data!
- We are not able to scroll below certain row, the last scroll-able row remains constant between multiple cube creations! However, screen size and resolution seems to matter as it is a different row depending on that. I am assuming the first page fetch is what it scrolls till and fails to attach the next page fetches to the cube(!?)
- This happens only if the 2nd facet is expanded. If only a single vertical facet is expanded, then there is no issue (Screenshot #2).
- If there are multiple Row Facets, then also the issue happens when they are expanded irrespective of column facets!
- There is no issue if the cube is created expanded (facet.setCollapsed(false)). However, we load a lot of data, thus creating the cube in expanded form is not an option.

I agree it may be difficult to understand the issue without a sample code, however, i'll try and upload it, but unfortunately it might take 2-3 days!
Also, I have attached the screenshots, where the screenshot #2 shows the last actual row till where data is actually there in DB, #3 and #4 depict the problem with the scrollbar, and #4 shows that we cannot scroll below a specific row, even though there is data!

Could you please try and see if you are able to reproduce this on your side?
Also, my guess is that it could be a bad CSS, but it's just a guess! Could it be? Any tags or class/ids that I should look out for to narrow down the problem?
Also, what steps would you recommend to debug this, apart from trying to recreate it in a sample project?

Thanks!

[Isomorphic]

The first and easiest troubleshooting step is to remove all CSS customizations and try running this with just the stock skin. If you can no longer reproduce the problem, look over your CSS customizations and reintroduce them until you find the problematic one.

If you're reproducing the problem with the standard skins, then you might try reproducing the problem starting from the Advanced Cube sample. If you can get the problem to happen there, you won't need a test case.

Finally, see the Debugging overview for good advice on the most effective way to isolate a test case.

[pankaj.jain]

Thanks for the tips.
I tried with eliminating all the custom CSS, and I can confirm that it is NOT a CSS issue!
With no custom styles, the issue still exists.

Another point:
This issue is not really dependent on facets, but on data!
Even if I have a single expanded facet with around 4000 facet items, I see the scrollbar size increasing as I scroll down!
To me, this seems like the fetch is fetching only limited data, and unable to tie the future fetches to the grid.
In the above scenario in my first post, all the facet 1 items were being fetched in a single request.

[pankaj.jain]

Hi Isomorphic,

Finally nailed down the issue to the method: setAutoSizeHeaders(true)
I am now able to reproduce this issue in the sample application as well.
Can you please have a look at it?

Thanks!

[Isomorphic]

That's great news. Other than adding that setting, what steps are required to reproduce the problem in the sample application?

[pankaj.jain]

The sample application that I created, had only a cube with 2 facets and 1 value facet.

private void createCube() {
    try {

        cube = new CubeGrid();
        cube.setWidth100();
        cube.setHeight(500);

        List<Facet> facetList = new ArrayList<>();
        facetList.add(getFacet(F1, "Origin", f1ValueList, true));
        facetList.add(getFacet(F2, "Destination", f2ValueList, true));
        facetList.add(getFacet(F5, "Values", f5ValueList, false));

        cube.setAutoFetchData(true);
        cube.setFacets(facetList.toArray(new Facet[facetList.size()]));
        cube.setValueProperty("VAL");
        cube.setValueTitle("Values");

        cube.setEnableCharting(true);

        FacetChart facetChartProperties = new FacetChart();
        facetChartProperties.setShowDataLabels(true);
        FacetChart.setDefaultProperties(facetChartProperties);

        cube.setAutoSelectValues(AutoSelectionModel.BOTH);
        cube.setCanMoveFacets(true);
        cube.setCanHover(true);
        cube.setShowCellContextMenus(true);
        [B]cubeGrid.setAutoSizeHeaders(true);[/B]

        cube.setRowFacets(F1);
        cube.setColumnFacets(F2, F5);

        DataSource dataSource = DataSource.get("cubeDataSample");
        cube.setDataSource(dataSource);
        cube.setFetchOperation("fetchCubeData");
        mainLayout.addMember(cube);
    } catch (Exception e) {
        e.printStackTrace();
    }
}

F1 and F2 have a large amount of data when expanded.

Steps to reproduce:
1. Expand Facet1
2. Scroll to bottom : The data grid may be vertically clipped and the scrollbar size increases as you scroll vertically.
3. If everything is fine, expand 2nd facet and repeat.

This issue is caused when there is large number of FacetItems.
So if Facet1 has a lot of FacetItems, (Ex. more than 500 or 600), then this issue happens every time with just Facet1 expansion!

Please let me know if you are unable to reproduce this problem.
Also, surprisingly, the Charts don't seem to work, as in, the chart pane comes up, but stays blank! (haven't tried in detail though, can you please check if it is working - I on on build 6.0 dt. 20 Jan). It used to work around a month or two back.

Also, does the showcase work on the latest nightly builds or does it run against a static build?

Thanks!

[Isomorphic]

Sorry, this is not runnable code. Please refer again to the FAQ and the Debugging overview to understand how to report bugs, and the most effective ways to create test cases that others can actually use. And again, we'd like to repeat the suggestion that you might be able to reproduce this problem quickly with small changes to the Advanced Cube sample.

About the chart not working: again, no runnable code, nothing we can check on.

Finally, the version of the Showcase is visible in the lower left-hand corner.

[pankaj.jain]

Turns out it's not just 1 method, but 2 methods working in conjunction that create the problem!

//advancedCube.setRowHeaderGridMode(true);
advancedCube.setAutoSizeHeaders(true);

With the setRowHeaderGridMode() commented out, and using the setAutoSizeHeaders() creates the problem.
This I am also able to reproduce directly in your SmartClient showcase in the Hands On Demo.
However, you'll have to expand quite a few facets vertically and maybe horizontally as well to ensure there is a large amount of data (do not load the cube with facets fully expanded)

Thanks!

[Isomorphic]

OK, interesting edge case, but do you have any reason not to use rowHeaderGridMode? The docs recommend it for large cubes.

We may eventually address this, but given that it only happens with settings we don't recommend, it has very low severity / priority unless there is some reason you need this combination to work.

[pankaj.jain]

Well, that's the funny part!
I didn't pay attention that a property such as 'setRowHeaderGridMode()' existed, and was using the cube without it.
While playing in the showcase, noticed that the header is always visible, and was surprised (embarrassed, actually) that I wasn't doing the same!

So, as of now, I plan to use setRowHeader...() for sure.

Also, unfortunately, I didn't find any such similar property for column headers. Is there any? It would be quite useful.

Thanks!

[Isomorphic]

We're not sure how you mean it would be useful, but no, no similar setting exists for column headers.

[pankaj.jain]

For the same reason as for rows!
When there are multiple facets on columns, it could be difficult to know which facet item you are actually looking at!
In our application, we currently allow the user to select upto max 5 facets, so the user is free to choose how and what facets (s)he wants!
With 3 facets on the column, it can easily take the column header out of the screen and it'll be difficult for the user to know which value he is currently looking at!

We don't really restrict the user much on the amount of data being pulled, thus the user can freely pull a lot of data for cube for analysis right there on the application, or export it to csv and then pivot it in a Spreadsheet!
Thus, we could easily expect hundreds of facet items on at least 4 facets! (The 5th being restricted to a max of 7)

[Isomorphic]

What is it that you think rowHeaderGridMode does? It doesn't change the actual behavior of row facets (just has different performance tradeoffs), so it's not clear what you expect it might to do for column facets.

[pankaj.jain]

Well, performance is one thing and definitely helpful.
What I was basically referring to is that as a side-effect, when large facets are expanded, the headers are always visible, when you scroll vertically (assuming you have multiple facets on row!).
It is this particular behavior I am talking about.

[Isomorphic]

Ah, that's an unintended side effect of switching only rendering visible parts of the headers, we do see how it's useful.

Something similar could be accomplished for column headers without switching to a totally different rendering style (as happens with rowHeaderGridMode), so it would be a relatively small Feature Sponsorship.