in src/component.tsx [390:437]
columnContextMenu(column: string, cm: HTMLDivElement) {
const VAR_TYPE_TO_NAME = {
[ParamType.CATEGORICAL]: 'Categorical',
[ParamType.NUMERIC]: 'Number',
[ParamType.NUMERICLOG]: 'Number (log-scale)',
[ParamType.NUMERICPERCENTILE]: 'Number (percentile-scale)',
[ParamType.TIMESTAMP]: 'Timestamp',
};
var contextmenu = $(cm);
contextmenu.append($('<h6 class="dropdown-header">Data scaling</h6>'));
this.state.params_def[column].type_options.forEach(function(this: HiPlot, possible_type) {
var option = $('<a class="dropdown-item" href="#">').text(VAR_TYPE_TO_NAME[possible_type]);
if (possible_type == this.state.params_def[column].type) {
option.addClass('disabled').css('pointer-events', 'none');
}
option.click(function(this: HiPlot, event) {
contextmenu.css('display', 'none');
this.setState(function(state: Readonly<HiPlotState>, props) { return {
params_def: {
...state.params_def,
[column]: {
...state.params_def[column],
type: possible_type
}
}
};
});
this.state.persistentState.children(PSTATE_PARAMS).children(column).set('type', possible_type);
event.preventDefault();
}.bind(this));
contextmenu.append(option);
}.bind(this));
contextmenu.append($('<div class="dropdown-divider"></div>'));
// Color by
var link_colorize = $('<a class="dropdown-item" href="#">Use for coloring</a>');
link_colorize.click(function(this: HiPlot, event) {
this.setState({
colorby: column,
});
event.preventDefault();
}.bind(this));
if (this.state.colorby == column) {
link_colorize.addClass('disabled').css('pointer-events', 'none');
}
contextmenu.append(link_colorize);
}