[ZEPPELIN-2411] Improve Table

[1ambda]

What is this PR for?

Improve Table

• column filter
• persist column state: type, order, hide/show, sorting, pinning
• pagination
• setting menu to configure table UI
• group by + aggregation

And all these things are persisted and synchronized among web socket clients

See the screenshot section for more detail.

What type of PR is it?

[Improvement]

Todos

• - Remove handsontable dependencies
• - Use npm packaged moment* packages.
• - Apply ui-grid
• - Add setting menu
• - Fix some issues
• - Persist column type

What is the Jira issue?

ZEPPELIN-2411

How should this be tested?

1. Build: mvn clean package -DskipTests; ./bin/zeppelin-daemon.sh restart
2. Open a note and create tables. If you don't have proper paragraphs, use this snippet.

%spark

import org.apache.commons.io.IOUtils
import java.net.URL
import java.nio.charset.Charset

val bankText = sc.parallelize(
    IOUtils.toString(
        new URL("https://s3.amazonaws.com/apache-zeppelin/tutorial/bank/bank.csv"),
        Charset.forName("utf8")).split("\n"))

case class Bank(
    age: Integer, 
    job: String, 
    marital: String, 
    education: String, 
    balance: Integer,
    housing: Boolean,
    loan: Boolean,
    contact: String,
    day: Int,
    month: String,
    duration: Int,
    y: Boolean
)

val bank = bankText.map(s => s.split(";")).filter(s => s(0) != "\"age\"").map(
    s => Bank(s(0).toInt, 
            s(1).replaceAll("\"", ""),
            s(2).replaceAll("\"", ""),
            s(3).replaceAll("\"", ""),
            s(5).replaceAll("\"", "").toInt,
            if (s(6).replaceAll("\"", "") == "yes") true else false,
            if (s(7).replaceAll("\"", "") == "yes") true else false,
            s(8).replaceAll("\"", ""),
            s(9).replaceAll("\"", "").toInt,
            s(10).replaceAll("\"", ""),
            s(11).replaceAll("\"", "").toInt,
            if (s(16).replaceAll("\"", "") == "yes") true else false
        )
).toDF()
bank.registerTempTable("bank")

select age, education, job, balance from bank limit 1000

Screenshots (if appropriate)

Before

After: Filter

After: Column related features

After: Pagination

After: Group, Aggregation

After: Synchronized

Questions:

• Does the licenses files need update? - YES, updated
• Is there breaking changes for older versions? - NO
• Does this needs documentation? - NO

[Leemoonsoo]

Tested and overall it's great improvement!

Here's few feedbacks.

1. Table does not refreshed after height / width of paragraph change.

2. How about remove 'type' in column table option?
   
   I guess user will be okay without knowing it.

3. showColumnFilter
   Following is screenshot with 'showColumnFilter' on. I don't know what this option supposed to do except for adding empty sticky row in the bottom.
   

4. pagenation
   defaultPaginationSize size can be only changed after the Table is displayed with defaultPaginationSize applied. So changing default does not mean too much in this case. Isn't it?

availablePaginationSizes - It's minor opinion, I think it is okay with hardcoded value and not make user configurable.

5. Header bar in the option
   

Two buttons - 'Save', 'Delete' icon - on right little bit confuses me. It was difficult to guess what those button supposed to do. And figured out

'save' - apply option to the table.
'delete' - restore to default options

While option change applies immediately, how about hide 'Save' button? And change 'delete' icon to something more appropriate? For example "Restore the default values" text would be more intuitive.

[1ambda]

Thanks for the review!

1. Table does not refreshed after height / width of paragraph change.

• regarding height, it was not before as well.

• in the case of width, Table will adjust it's size when browser width changes.

regarding the width option, it seems that it doesn't call proper event method for resizing. We can fix it in the different PR. (bug)

2. How about remove 'type' in column table option?

• Removed
• While adding tooltip for each option

3. showColumnFilter

It's used to display aggregated values. I changed the name to showAggregationFooter which easier to understand than before.

4. pagination

• Removed pagination related settings.

5. Header bar in the option

• Removed the save button.
• Updated icon for reset and added tooltip for it.

[guptarajat]

"all these things are persisted and synchronized among web socket clients"
What does this mean?

[1ambda]

@guptarajat Hi, refer the last GIF. "persist" means that all states in a table are saved in the note.json. For example, sorting state will be saved after this PR but it is not in current master.

[Leemoonsoo]

Each cell in table supposed to print html. For example

%sh echo -e "%table key\tvalue\nsun\t%html <img width=50px src=http://www.freeiconspng.com/uploads/sun-icon-4.jpg></img>"

This PR

In master branch

[Leemoonsoo]

And this PR adds background in rows.

Master branch

This PR

What do you think? Keep appearance the same as before, so we can keep user experience change minimum. Or is adding background color in rows brings more benefit?

[1ambda]

@Leemoonsoo

Colorizing (even rows) is cognitively better because we are not confused when investigating closer rows.

Here are more bright versions

[Leemoonsoo]

Bright version looks better for me

[1ambda]

@Leemoonsoo

Oops. I missed that feature.

1. Now table renders HTML display in the cells and adjusts row height based on the content.

2. Fixed to have more bright even rows.

[1ambda]

@Leemoonsoo just rebased and

updated to use white color in each cell background in c56edca
now it looks like

[Leemoonsoo]

GTM. Thanks @1ambda for great improvement.

Merge to master if no further discussions.

[vglushak]

This made all cells in the table editable. Is that expected?

[vglushak]

Now table renders HTML display in the cells and adjusts row height based on the content.

There are some limitations for this feature. img, links works. But when I want to place button it just ignore html and display text only.
Another issue - you can't actually click a link - it starts edit this cell (refer to my previous comment).

Btw, all this works correctly in 0.7.3.

[Tagar]

Great improvement.
Submitted https://issues.apache.org/jira/browse/ZEPPELIN-3251 to consider showing rows/columns lazily on scrolling events as otherwise ui-grid has a significant overhead for wide datasets so it randers much slower too. Other ideas?