Global Columns Selector Event

Features
1

One of the most common use of virtual columns is to introduce an object-oriented representation of entities with multiple internal parameters. In this representation virtual column is essentially a parent (a root) while the parameters are logically linked to some columns of primitive values. In order to support this paradigm on the UI level in all DG viewers, the latter should provide an option to select child columns using a tree-like columns selector UI component. Would it be possible to introduce a global columns selector event to be able to override the selector component that comes out of the box?

2

Hi Dmitry!
Sorry for the late reply! I worked on your request, now you can prevent the column combo box popup event using this code:

let view = grok.shell.addTableView(grok.data.demo.demog());

bc = view.barChart();
bc.onEvent('d4-column-combo-box-popup-show').subscribe((args) => {

    args.preventDefault();

    console.log(args.args.viewer)
    grok.shell.info(args.args.selectorName)
    console.log(args.args.comboBox)
});

And create new ColumnComboBox using this code:

let ccb = DG.ColumnComboBox.create(grok.data.demo.demog(), (c) => c.type === 'int');
let v = grok.shell.newView('demo: column combo box', [ccb]);
1 Like
3

Also, you can now show your custom popup instead of the default popup:

let view = grok.shell.addTableView(grok.data.demo.demog());

sp = view.scatterPlot();
sp.onEvent('d4-column-combo-box-popup-show').subscribe((args) => {

    args.preventDefault();
  
    let customPopup = ui.divText('My popup');
  	let host = ui.showPopup(customPopup, args.args.comboBox.root, args.args.comboBox.vertical);
  
  	 host.addEventListener('click', function (event) {
       host.remove();
       grok.shell.info('Hi! You clicked on your popup!');
     });
  
    console.log(args.args.comboBox)
});
1 Like
4

P.S. It will be available in the next release today. See docker hub: https://hub.docker.com/r/datagrok/datagrok

5

Thank you for this feature! It allowed us to replace the default columns selector with our own UI component. Would it be also possible to standardize the selector names args.args.selectorName from the ‘d4-column-combo-box-popup-show’ event with the generic viewer’s options’ (or properties’) so that after a column is selected we could call something like viewer.setOption(args.args.selectorName, selectedColumnName)? Right now we have a chain of manual handlers for each viewer, for example
if(args.args.selectorName === “xColumnName”)
viewer.setOptions({x: selectedColumnName}); where ‘x’ and ‘xColumnName’ are two different names for the same thing.

6

One more suggestion. It would be really nice to have a way to obtain a list of eligible columns for a particular selector name args.args.selectorName. For example, viewer.getSelectorColumns(args.args.selectorName).
That way we could display those columns in our selector UI component when the ‘d4-column-combo-box-popup-show’ event is being fired. Right now it is assumed that all columns are eligible which is not always the case.

1 Like
7

Thanks for your suggestions! I’ll be back a little later with updates.

8

Sorry for delay! In the next build, you will be able to get the ColumnComboBox filter, filter columns, and set a column using this snippet:

// Filters column by type, if filter null, then all columns match

let view = grok.shell.addTableView(grok.data.demo.demog());
sp = view.barChart();
sp.onEvent('d4-column-combo-box-popup-show').subscribe((args) => {
    args.preventDefault();

    grok.shell.info('Column filter: ' + args.args.comboBox.property.columnFilter);

    let filtered = Array.from(view.dataFrame.columns).filter(c => c.matches(args.args.comboBox.property.columnFilter));
    sp.setOptions({[args.args.comboBox.property.name]: filtered[0].name});
});
1 Like