Please surface click handlers in charts

[clewisln]

There should be a way to assign custom event handlers to the charts. For example, when a user clicks a point in a scatter chart, the host application should be able to handle that click, without needing to extend the chart class.

Currently these bubble up to through the parent contexts. If the chart is added to a Chart Panel, then the event is essentially dropped:

//Scatter chart relay
.on("click", function (d: any, _idx) {
    context.click(host.rowToObj(host.data()[d.rowIdx]), d.column, host._selection.selected(this));
})

//Chart panel widget relay
tmpAny.click = function () {
    context.click.apply(context, arguments);
};

//Chart Panel event sink (deadend)
click(row, column, selected) {
    // console.log("Click:  " + JSON.stringify(row) + ", " + column + ", " + selected);
}

Instead, there should be a way of assigning a custom handler, through a published property assignment:

import { ChartPanel } from '@hpcc-js/layout';
export class CustomPanel extends ChartPanel {
  click() {
    const customHandler = this.onClick();
    typeof customHandler === "function" && customHandler.apply(this, arguments);
  }
}
CustomPanel.prototype.publish("onClick", null, "function", "Custom click handler");

Then:

const panel = new CustomPanel()
    .onClick((row, column, selected) => {
        ... custom handler logic here
    });

Note: this surfacing could also apply to other events, such as dblclick, vertex_click, vertex_dblclick, edge_click, edge_dblclick, etc.

If there is already an official way of doing this, without resorting to class extensions, please point me to the documentation.

[GordonSmith]

The general pattern for event is normally:

const panel = new CustomPanel()
    .on("click", (row, column, selected) => {
        ... custom handler logic here
    });

And if you want to prevent propagation:

const panel = new CustomPanel()
    .on("click", (row, column, selected) => {
        ... custom handler logic here
    }, true);

[clewisln]

Thanks for the example.

I also found this on the wiki, for others that may need:
https://github.com/hpcc-systems/Visualization/wiki/Events

[clewisln]

@GordonSmith, there doesn't seem to be a good way of unbinding an event: while there is an "on", there is no equivalent "off".

The "default" way of using "on", sets handlers in a nested hook chain of sorts, instead of just using a flat array and iterating, like most event emitters are implemented. With a flat array, it is trivial to remove a handler from the list, but with a hook chain, that will make things difficult.

Since I don't need multiple attached listeners for my use case, I have opted to use the "stop propagation" feature, which throws the existing chain away on bind, but that still leaves the last handler bound in memory, and of course, i can only ever have one listener, which is not super future proof.

For my immediate needs, my best solution for unbinding the handler was to simply use the overrideMethod call directly, and pass in the original function via the prototype:
panel.overrideMethod("click", ChartPanel.prototype.click);

However, it is my opinion that the event handler system needs to be reworked to not use a call chain.

[GordonSmith]

In general the assumption is that the d3 eventer handler will have cleaned itself up correctly on the "exit" method and that your call chain will cleanup when the hosting page / div goes away.
I do have a very efficient dispatch + conflating message class in @hpcc-js/util which I am now using by default on newer work and could replace the existing mechanism within a v3 timeframe (which is getting closer as we eliminate the last of the ES5 hang-ups).

[GordonSmith]

Example of some "new" Web Components: http://hpcc-systems.github.io/Visualization/components/README.html