Representing tri-dimensional data in a grid

General
1

Hello again

I have almost completed the big tutorial after reading (most of) the book of Vaadin.
I can’t praise enough the quality of the documentation, essential for the adoption of a big project like that. You guide in a clear way into a non-trivial, useful/real world project, showing Vaadin is no-nonsense and a pleasure to work with.

I will soon attack a project of my own, a prototype of Web interface to visualize our data. We already have a primitive Web interface with JSP/servlets, quite static and ugly, I hope to make something more modern!

One issue I foresee is the format of data, and the way to represent it on screen. I thought I should ask for collective wisdom/intuition/experience to have some advices and avoid some pitfalls/brick walls (no, that’s not a video game!).

We have tri-dimensional data: a number of elements (nodes) have various kind of data attached to them, varying with time. So, three axes of data: elements, time, values.
In our application, and in the current Web interface, we display that by having a classical table, eg. with nodes on the row, time on the columns, and on each cell, we have a sub-table with the various values for each kind of data.
Looks like that, for example:

As you can see, we can swap the dimensions, but that’s irrelevant to my problem.
We have headers not only on the columns, but also on the rows themselves.
The data is static, there is no need to edit it, but we want to be able to filter it, to sort it, to hide columns or rows, perhaps to select cells, etc.

So, my question is simple: what do you think is the best way to display this data with Vaadin?
I see at least three ways:

  2. Make a big table with complex data structure so everything falls in place. I am not sure how to handle the multiple cell headers on the left, though.
  3. Make a master table, and on each cell, put a headless sub-table. That’s actually our current HTML structure. We had to tweak CSS to have the inner tables to stick to the cell borders…
  4. Idem, but just add a bunch of labels with a vertical layout. Might need extra code to handle selection. Perhaps the best option in complexity level.

Any opinion/idea? Has somebody done something similar? Maybe I have missed some existing GUI widget? Perhaps in the GWT world?
Any help is welcome! Thanks in advance.

2

That’s a difficult problem at the moment as we don’t have rowspan. Nested tables can be rather heavy to render. You should check with all relevant browsers that the rendering time is OK.

The Labels inside table cells is probably the lightest solution, although then you can’t select individual cells. If you need selection at cell/row level, you could put CssLayouts+Buttons in the cells and handle the clicks. It’s probably lighter than nested tables.

It could implement fake rowspan with some CSS trickery, such as by having a cell style that doesn’t have vertical separators, except every third row, and put the header text in only the middle row in each triplet. You might also be able to overflow row header or cell content downwards over the cells below, but I’m not sure if that is feasible.

With GWT you could of course do almost anything, such as a new more flexible table component for Vaadin. I’d think row-/colspans will be implemented at some point in the core Table. Did not find a ticket for it though.

3

I just saw col spans / row grouping with headers in the SmartGWT demo… They are nice / useful, might fit my need.
But of course I want to stick to Vaadin! I have seen enough of a co-worker swearing against SmartGWT, suffering of the complexity and slowness of compilation…
I also saw a
Grid Panel
 in the Advanced GWT Components project. They chose the nested table approach, but apparently they do it on demand, not all displayed at once, so it might be lighter on resources.

I hope Vaadin will add these interesting features someday. Meanwhile, for my quick prototype, I will stick to labels, I don’t need selection for now.

Thanks for the detailed answer.

PS.: I had to retype this answer, the forum told me posting was forbidden. I wonder if it was because I voted up your answer while typing the answer…
One inconvenience of Quick Reply is that going back to the page loose the whole answer, as Firefox cannot restore the content of a JavaScript-generated textarea… Perhaps you could add some kind of Ajax save-as-draft every 5 seconds (for example)?

PPS.: Again! This time, I save the message before posting… And I use the main Reply instead of Quick Reply.

4

The “Forbidden” error usually means that there’s been a session timeout. Using Reply has it too if you take too long to type the message. I’ll have to ask if the administrator could do something about the problem, perhaps tune session timeouts or something. Yes, it’s really annoying when you lose your post, happened to me ma-ny times after a server upgrade earlier this year.

If your data is not too big, you could also use GridLayout, which has row and col spans. You can even get scrollbars by putting it in a too-small Panel with overflow:auto, although that won’t have lazy loading like Table does.

5

Thanks for your input. Now that I am more familiar with Vaadin, I think I will go with a CustomLayout or CSSLayout inside table cells, to have lightweight table-like layout. Perhaps with clickable (?) labels, as buttons might be too heavy. I need to colorize the cells, add an icon, perhaps secondary information, probably to select them, and to have context menu on them.
I thought of using Grid, but I really need the lazy loading stuff, as the tables can be very big (millions of cells!).

I found Olap tables in GWT, but most of them are commercial, and/or not suited to our needs.

6

OK, I made progress, and currently I display three data in each cell with Array.toString… Ugly, but closer of my objective. Now I must place in each cell of the table a light layout (a div with n sub-divs) displaying each label (1 to n) in its own div that should be customizable with specific CSS (style attribute, not class one).
Re-reading the Book of Vaadin, it seems that the recommended way to customize a column is to hide it and use addGeneratedColumn to replace it.
Is there a better way to replace the default cell rendering by a component, always the same kind, but customizable depending on row/col coordinates?
My searches come empty so far, and looking at the source of Table doesn’t help much either (but perhaps I should look at VScrollTable instead?).

Thanks for any hint / link / advice. :slight_smile:

7

Loud silence? :slight_smile:

For the record, and more importantly, for advices on the viability of the solution:
I found out in the code that if Table sees that the property given for a cell is actually a component, it uses it.
So, in my container, I return my TableCell class in the getType() call. I am not fan of this as it mixes a bit data (container) and UI (table cell rendering) but why not.
My TableCell extends CssLayout implements Property (again a bit of mix, but Label actually does the same thing).
On getValue(), I just return ‘this’. On getType(), I return Component.class (no need to return something lower in the hierarchy, like Layout, no?).
TableCell is a CssLayout where I add specialized Labels

It works, but it isn’t very fast when we have many columns… Looks like it stresses a lot the JavaScript on the client (Firefox, on a slow, low memory XP machine, already eating lot of memory and swapping, I fear… So perf. must be evaluated more strictly).
I wonder if divs (the TableCell and its Labels) are reused by the client-side table component or if they are re-created when scrolling vertically…

8

Hello,

You can vote for
http://dev.vaadin.com/ticket/3153
…

9

I added two generated columns to make the row headers. Since each cell is several lines tall, the first column entries are nicely centered without special work…
One problem is to stretch the background image on these entries (the number of lines per cell is variable): it doesn’t work on IE7 (not sure for IE8) and it seems it has some limits.
11988.png

10

So, I was able to show the prototype of our Web interface yesterday, after a month of work. Actually, I estimate that some 75 % of the work was spent on data model itself, and 25 % of it was on the Vaadin API (GUI, container…).
I salute the quality of the doc., and of this forum, where users help, but also Vaadin employees, even quickly providing quick proofs-of-concept or samples of some points of the API.
Coming from the Swing world, yet having a good Web design experience, I found the learning curve of Vaadin to be quite smooth. It might be rougher with lack of such experience, but still not so hard, given the quality of the doc., samples, help. And the quality of the API, with some cruft, but that’s the case of any code base which evolves yet need to keep some compatibility. I expect the v.7 to be awesome! :slight_smile:

For the record, we have a Tomcat 5.5 server in Taiwan, so I could test my prototype from France, to stress the design model of Vaadin: one of our concern is the amount of information exchanged between client and server, higher than with other GWT frameworks.
That’s a quite common concern, raised by
many people
, including concurrents (see several blog comment threads in various places of Internet…).
This is also addressed by the
What it takes to test a Vaadin
 article.
Yet, we wanted to check if it was usable in our case. Our concern was more about network latency than with concurrency (number of users), the latter being well addressed by modern Web servers. Latency can occur with lot of users on the network, of course, but also with distance, when TCP/IP packets must traverse lot of proxies…
We can say that Vaadin successfully answered this concern, even with a little drag’n’drop dialog where I kept the logic on the server (might switch to client side later). We usually can see visible latency even with a simple application like telnet (while typing!), but the Vaadin prototype remained user friendly under these hard conditions. Congratulations.

Mmm, strange formatting. Does this site no longer understand BBCode?

11

You’ve missed out a ‘/’ in the supposed-to-be-closing url tag after “What it takes to test a Vaadin” :huh:

Cheers,

Charles.

12

Argh! That’s what I get to edit manually these tags… :slight_smile: I looked at the opening tags, overlooked the closing ones. Many thanks, it is fixed now.