Table visualization options

Questions
1

I have two questions about settings/options of columns of the table visualization:

  1. If one hides a column, how can you get it back again? Resp. where are hidden/shown columns managed in the UI?
  2. It seems like in the column header context menu one can turn column coloring on/off, but one cannot select the color scheme from there, but only from the cell context menu. Is that intended or just a small bug?

Thanks
Nico

2

Hi Nico, welcome to the forum, happy to see you here!

Regarding the column visibility issue, we’ve just added a convenient way to control visible/hidden columns, it’s under the popup menu: Color sizing | Show / hide columns.... Later, we will extend this dialog to support column rearrangement as well. The latest version will be available on our dev server in 30 minutes.

image
image1027×663 99.1 KB

3

Hi Andrew,
That’s great and exactly what I was looking for :slight_smile:
Follow-up question: Is this entry also visible when clicking on the column header, not only on the cell? I’m not sure I fully understood when what context menu entry goes where (cell vs. col header).
Suggestion: Could you make this entry a top-level menu entry, as I don’t expect that most people would expect it under “Column sizing”.
Nico

4

We’ve also just added the ability to define categorical colors from the column popup menu. This only works for string colors, continuous color schemas on a per-column level are not supported yet.

image
image631×523 74.5 KB

5

Nice! :slight_smile:
That’s really useful.
Looking forward for a similar support on continuous/discrete data

6

I played again with it and have a couple of follow-up questions:

  1. (Maybe this one was not clear in one of my previous posts here) It seems like you can only modify the color scheme when right-clicking onto a cell, but not onto a header of the column. Is that intended?
  2. When I change the color scheme for one column, it also seems to change for another one. Is that a bug?
  3. I can’t see this edit entry for string columns. Just used the public datagrok platform. Has that not yet been deployed?
  4. Am I right, that you cannot create a custom color scheme (custom color and custom boundaries) for continuous and discrete numerical data? I believe that’s what you implied with your previous message. How much would it take to implement this?
  5. Can we define a custom color scheme for continuous data from the API? If so, do you have a code example.

A lot of questions, but I believe that’s not only useful to us :wink:

7

The way it currently works is that when you click on a header, the column-specific actions are being positioned on menu’s top level:

image

When you click on a cell, the menu is a bit different. The column-specific actions get moved under the “Current column” group to make space for the grid-specific actions, such as sorting or adding new rows:

image
image386×513 24.6 KB

Honestly, I do find the way it works now confusing (and the fact that some of the menu items are always added on the top level does not help). Suggestions are welcome!

8

Yes, apparently our public version is 19 days old, but you can test it on dev: https://dev.datagrok.ai. Most likely you have a newer version deployed inside your company already as well.

You are right. It shouldn’t take that much effort, I think we can base it on the already existing data categorization capability (Data | Categorize), and yes we did commit to making it work - I guess it’s time to bite the bullet and just do it :slight_smile: We’ll report updates here.

1 Like
9

A very early prototype of the conditional color-coding editor for numerical columns, integrated with the property panel. Still buggy, but it’s a step in the right direction.

image
image939×559 72 KB

Numerical columns will have the following options: Off, Linear, and Conditional. Categorical ones will have a choice of Off and Conditional. Not yet sure if we need to generalize the internal mechanism to support different semantic types (so that for instance you will be able to color-code molecules based on whether a particular substructure exists).

10

Honestly, I do find the way it works now confusing (and the fact that some of the menu items are always added on the top level does not help). Suggestions are welcome!

What about following:
Col header -> col specific actions, like sorting, coloring, rendering, col properties…
Cel -> cell specific actions, like copy cell content, cell heights…
Table cog icon -> table viz specific actions, like data frame selection, data filtering options…

11

This looks like a great starting point, thanks for showing a preview so quickly :slight_smile:

Regarding the configuration dialog, this is how our data warehouse client does it (not saying it’s the best approach, but maybe it gives an idea):
image

I assume “linear” is a gradient where you define the “upper” and “lower” boundary colors?

12

This conditional formatting option looks very promising. Is there a way to configure this conditional formatting option programmatically and if so how can we do this (I was not able to find any resource for this in your documentation)?

13

Yes, you can do it programmatically like that:

  1. Custom category colors
    https://public.datagrok.ai/js/samples/grid/category-colors

    let view = grok.shell.addTableView(grok.data.demo.demog());
    view.grid.col(‘sex’).categoryColors = {
    ‘M’: 0xFF0000FF,
    ‘F’: 0xFF800080
    };

  2. Conditional formatting (this example does it via column tags - a more convenient API will also be provided)

    let t = grok.data.demo.demog();
    t.col(‘height’).tags[’.color-coding-conditional’] = `{“20-30”:"#00FF00",“30-200”:"#220505"}`;
    grok.shell.addTableView(t);

@donufriienko, can you please reflect all of that in our wiki as well? Thanks!

1 Like
14

@skalkin, sure!
We already mention #1 in https://datagrok.ai/help/develop/how-to/customize-grid#color-coding. As for the tags .color-coding-type and .color-coding-conditional, I will add them to the list of column tags, since there is no API for the grid yet.

1 Like
15

Thanks for clarification!

We gave a try today and it’s working very well so far! However I am running in some edges when using >= or <= checks! Are this operands supported by native Datagrok and if yes how do they need to be specified.

Concrete example:
Having this rule set: {"<= 0.1":"#ff5140","> 0.1":"#ffdf5b",">= 10":"#73aff5"} should resolve in this color schema (value: color):
11: #73aff5
10: #ff5140
9.9: ffdf5b

However what we get is following (value: color):
11: #73aff5
10: #ffdf5b
9.9: ffdf5b

So for me it looks like the “=” is not taken into the colouring!
Can you add some content for this? Is there some documentation what conditional colouring values are supported by datagrok

16

@andreas.gasser.novartis.com , I hope to cover all edge cases of conditional coloring in our documentation as soon as possible. In the meantime, based on personal observation, let me suggest swapping the last two rules (so that >= comes before >), the operator precedence may impact the resolution of colors you described. For instance, here the values equal to or greater than 60 have the color given in the rule >=60, but that wouldn’t be the case if the rule were applied last:

let t = grok.data.demo.demog();
t.col('age').tags['.color-coding-type'] = 'Conditional';
t.col('age').tags['.color-coding-conditional'] = `{"<=50":"#00FF00", ">=60": "#0b00a0", ">50":"#220505"}`;
grok.shell.addTableView(t);
1 Like