/*

* Project Name : Visual Python

* Description : GUI-based Python code generator

* File Name : GridSearch.js

* Author : Black Logic

* Note : GridSearch

* License : GNU GPLv3 with Visual Python special exception

* Date : 2023. 08. 09

* Change Date :

*/

//============================================================================

// [CLASS] GridSearch

//============================================================================

define([

__VP_TEXT_LOADER__('vp_base/html/m_ml/gridSearch.html'), // INTEGRATION: unified version of text loader

__VP_CSS_LOADER__('vp_base/css/m_ml/gridSearch'),

'vp_base/js/com/com_util',

'vp_base/js/com/com_interface',

'vp_base/js/com/com_String',

'vp_base/js/com/com_generatorV2',

'vp_base/data/m_ml/mlLibrary',

'vp_base/js/com/component/PopupComponent',

'vp_base/js/com/component/MultiSelector',

'vp_base/js/com/component/SuggestInput',

'vp_base/js/com/component/ModelEditor'

], function(msHtml, msCss, com_util, com_interface, com_String, com_generator, ML_LIBRARIES, PopupComponent, MultiSelector, SuggestInput, ModelEditor) {

/**

* GridSearch

*/

class GridSearch extends PopupComponent {

_init() {

super._init();

this.config.sizeLevel = 3;

this.config.dataview = false;

this.config.docs = 'https://scikit-learn.org/stable/modules/generated/sklearn.model_selection.GridSearchCV.html';

this.state = {

modelType: 'ln-rgs',

userOption: '',

allocateToCreation: 'model',

...this.state

}

this.targetSetTag = null;

this.modelConfig = ML_LIBRARIES;

this.modelTypeList = {

'Regression': ['ln-rgs', 'ridge', 'lasso', 'elasticnet', 'sv-rgs', 'dt-rgs', 'rf-rgs', 'gbm-rgs', 'xgb-rgs', 'lgbm-rgs', 'cb-rgs'],

'Classification': ['lg-rgs', 'bern-nb', 'mulnom-nb', 'gaus-nb', 'sv-clf', 'dt-clf', 'rf-clf', 'gbm-clf', 'xgb-clf', 'lgbm-clf', 'cb-clf']

}

}

_unbindEvent() {

super._unbindEvent();

$(document).off('click', this.wrapSelector('.vp-param-set-del'));

$(document).off('click', this.wrapSelector('.vp-param-item-add'));

$(document).off('click', this.wrapSelector('.vp-param-item-del'));

$(document).off('keyup', this.wrapSelector('.vp-param-val'));

$(document).off('click', this.wrapSelector('.vp-param-result-item-del'));

}

_bindEvent() {

super._bindEvent();

/** Implement binding events */

var that = this;

// select model type

$(this.wrapSelector('#modelType')).on('change', function() {

let modelType = $(this).val();

that.state.modelType = modelType;

// show install button

if (that.modelConfig[modelType].install != undefined) {

that.showInstallButton();

} else {

that.hideInstallButton();

}

that.handleScoringOptions(modelType);

// reset model param set

$(that.wrapSelector('.vp-param-grid-box')).html('');

$(that.wrapSelector('.vp-param-grid-box')).html(that.templateForParamSet());

});

// Add param set

$(this.wrapSelector('#vp_addParamSet')).on('click', function() {

let newSet = $(that.templateForParamSet());

$(that.wrapSelector('.vp-param-grid-box')).append(newSet);

// focus

$(newSet)[0].scrollIntoView();

});

// delete param set

$(document).on('click', this.wrapSelector('.vp-param-set-del'), function() {

$(this).closest('.vp-param-set-box').remove();

// rename param set

$(that.wrapSelector('.vp-param-set-name')).each((i, tag) => {

$(tag).text('Param set ' + (i + 1));

});

});

// Add param item

$(document).on('click', this.wrapSelector('.vp-param-item-add'), function() {

that.targetSetTag = $(this).parent(); // target param-set-box

that.openParamPopup();

});

// Delete param item

$(document).on('click', this.wrapSelector('.vp-param-item-del'), function() {

$(this).closest('.vp-param-item').remove();

});

// add param value - using enter

$(document).on('keyup', this.wrapSelector('.vp-param-val'), function(event) {

var keycode = event.keyCode

? event.keyCode

: event.which;

if (keycode == vpEvent.keyManager.keyCode.enter) { // enter

that.handleAddParamValue($(this));

}

if (keycode === 188) {// ,<

let val = $(this).val();

$(this).val(val.split(',')[0]); // remove , and add param

that.handleAddParamValue($(this));

}

});

// delete param set item

$(document).on('click', this.wrapSelector('.vp-param-result-item-del'), function() {

$(this).closest('.vp-param-result-item').remove();

});

}

handleAddParamValue(thisTag) {

let parentTag = $(thisTag).parent();

let paramIsText = $(parentTag).find('.vp-param-val').data('type') === 'text'; // text / var

let paramVal = $(parentTag).find('.vp-param-val').val();

let reservedKeywordList = ['None', 'True', 'False', 'np.nan', 'np.NaN'];

if (reservedKeywordList.includes(paramVal)) {

paramIsText = false;

}

// check , and split it

let paramSplit = paramVal.split(',');

paramSplit && paramSplit.forEach(val => {

// add only if it is not empty value

if (val.trim() !== '') {

val = com_util.convertToStr(val.trim(), paramIsText);

$(parentTag).find('.vp-param-result-box').append(`

<span class="vp-param-result-item" data-value="${val}">${val}

<span class="vp-icon-close-small vp-param-result-item-del" title="Click to delete this param value."></span>

</span>

`);

// clear param val

$(parentTag).find('.vp-param-val').val('');

}

});

}

bindEventForInnerPopup() {

let that = this;

// Inner popup: Select param

$(document).off('click', this.wrapSelector('.vp-inner-param-list-item'));

$(document).on('click', this.wrapSelector('.vp-inner-param-list-item'), function() {

if ($(this).hasClass('selected')) {

$(this).removeClass('selected');

} else {

$(this).addClass('selected');

}

});

// Inner popup: Add param

$(this.wrapSelector('.vp-add-param-btn')).on('click', function() {

let newParam = $(that.wrapSelector('.vp-add-param-name')).val();

if (newParam != undefined && newParam.trim() != '') {

// check if exist

let checkTag = $(that.wrapSelector(`.vp-inner-param-list-item[data-name="${newParam}"]`));

if (checkTag.length > 0) {

if (!checkTag.hasClass('selected')) {

checkTag.addClass('selected');

}

checkTag[0].scrollIntoView();

} else {

// add to param list

$(that.wrapSelector('.vp-inner-param-list-box')).append(

`<div class="vp-inner-param-list-item selected" data-name="${newParam}" title="${newParam}">${newParam}</div>`

);

// scroll to added item

$(that.wrapSelector('.vp-inner-param-list-item.selected:last'))[0].scrollIntoView();

}

// clear input value

$(that.wrapSelector('.vp-add-param-name')).val('');

}

});

}

handleScoringOptions(modelType) {

let options = {

'Classification': [

"'accuracy'",

"'balanced_accuracy'",

"'top_k_accuracy'",

"'average_precision'",

"'neg_brier_score'",

"'f1'",

"'f1_micro'",

"'f1_macro'",

"'f1_weighted'",

"'f1_samples'",

"'neg_log_loss'",

"'precision' etc.",

"'recall' etc.",

"'jaccard' etc.",

"'roc_auc'",

"'roc_auc_ovr'",

"'roc_auc_ovo'",

"'roc_auc_ovr_weighted'",

"'roc_auc_ovo_weighted'",

],

'Regression': [

"'explained_variance'",

"'max_error'",

"'neg_mean_absolute_error'",

"'neg_mean_squared_error'",

"'neg_root_mean_squared_error'",

"'neg_mean_squared_log_error'",

"'neg_median_absolute_error'",

"'r2'",

"'neg_mean_poisson_deviance'",

"'neg_mean_gamma_deviance'",

"'neg_mean_absolute_percentage_error'",

"'d2_absolute_error_score'",

"'d2_pinball_score'",

"'d2_tweedie_score'"

]

}

let modelCategory = this.modelTypeList['Regression'].includes(modelType)?'Regression':'Classification';

// Set suggestInput on scoring option

var suggestInput = new SuggestInput();

suggestInput.setComponentID('scoring');

suggestInput.setPlaceholder('Select option');

suggestInput.addClass('vp-input vp-state');

suggestInput.setSuggestList(function() { return options[modelCategory]; });

suggestInput.setNormalFilter(true);

$(this.wrapSelector('#scoring')).replaceWith(suggestInput.toTagString());

}

templateForParamSet() {

let paramSetNo = 1;

// set param set number

paramSetNo += $(this.wrapSelector('.vp-param-set-box')).length;

return `<div class="vp-grid-border-box vp-param-set-box">

<div>

<label class="vp-bold vp-param-set-name">Param set ${paramSetNo}</label>

<div class="vp-icon-delete vp-param-set-del" title="Delete this param set."></div>

</div>

<div class="vp-grid-box vp-param-item-box">

</div>

<button class="vp-button vp-param-item-add">+ Add param</button>

</div>`;

}

templateForParamPopup() {

let config = this.modelConfig[this.state.modelType];

let optBox = new com_String();

// render tag

config.options.forEach(opt => {

optBox.appendFormatLine('<div class="vp-inner-param-list-item" data-name="{0}" title="{1}">{2}</div>'

, opt.name, opt.name, opt.name);

});

return `

<div class="vp-italic"><span class="vp-orange-text">NOTE:</span> Select parameters to add.</div>

<div class="vp-inner-param-list-box vp-scrollbar no-selection">

${optBox.toString()}

</div>

<div>

<input type="text" class="vp-input vp-add-param-name" placeholder="Input param name"/>

<button class="vp-button vp-add-param-btn">Add</button>

</div>

`;

}

openParamPopup() {

let size = { width: 400, height: 300 };

$(this.wrapSelector('.vp-inner-popup-body')).empty();

// set size and position

$(this.wrapSelector('.vp-inner-popup-box')).css({

width: size.width,

height: size.height,

left: 'calc(50% - ' + (size.width/2) + 'px)',

top: 'calc(50% - ' + (size.height/2) + 'px)',

});

$(this.wrapSelector('.vp-inner-popup-body')).html(this.templateForParamPopup());

this.bindEventForInnerPopup();

// show popup box

this.openInnerPopup('Add parameter');

}

handleInnerOk() {

// get selected param list

let paramList = [];

$(this.wrapSelector('.vp-inner-param-list-item.selected')).each((i, tag) => {

paramList.push($(tag).data('name'));

});

if (paramList.length > 0) {

// add param box

$(this.targetSetTag).find('.vp-param-item-box').append(this.templateForParamItemList(paramList));

this.closeInnerPopup();

} else {

com_util.renderAlertModal('No params selected. Please select more than one param.');

}

this.targetSetTag = null;

}

templateForBody() {

let page = $(msHtml);

let that = this;

//================================================================

// Model creation

//================================================================

// model types

let modelTypeTag = new com_String();

Object.keys(this.modelTypeList).forEach(modelCategory => {

let modelOptionTag = new com_String();

that.modelTypeList[modelCategory].forEach(opt => {

let optConfig = that.modelConfig[opt];

let selectedFlag = '';

if (opt == that.state.modelType) {

selectedFlag = 'selected';

}

modelOptionTag.appendFormatLine('<option value="{0}" {1}>{2}</option>',

opt, selectedFlag, optConfig.name);

})

modelTypeTag.appendFormatLine('<optgroup label="{0}">{1}</optgroup>',

modelCategory, modelOptionTag.toString());

});

$(page).find('#modelType').html(modelTypeTag.toString());

//================================================================

// GridSearch option

//================================================================

$(page).find('.vp-model-option-box').html(this.templateForOption('grid-search', ['estimator', 'param_grid']));

// show install button

if (this.modelConfig[this.state.modelType].install != undefined) {

this.showInstallButton();

} else {

this.hideInstallButton();

}

// render option page

// $(page).find('.vp-model-param-box').html(this.templateForOption(this.state.modelType));

return page;

}

templateForOption(modelType, excludeOptList=[]) {

let config = this.modelConfig[modelType];

let state = this.state;

let optBox = new com_String();

// render tag

config.options.forEach(opt => {

if (!excludeOptList.includes(opt.name)) {

optBox.appendFormatLine('<label for="{0}" title="{1}">{2}</label>'

, opt.name, opt.name, com_util.optionToLabel(opt.name));

let content = com_generator.renderContent(this, opt.component[0], opt, state);

optBox.appendLine(content[0].outerHTML);

}

});

// render user option

optBox.appendFormatLine('<label for="{0}">{1}</label>', 'userOption', 'User option');

optBox.appendFormatLine('<input type="text" class="vp-input vp-state" id="{0}" placeholder="{1}" value="{2}"/>',

'userOption', 'key=value, ...', this.state.userOption);

return optBox.toString();

}

/**

* template for param box

* @param {*} paramList ['param-name1', 'param-name2', ...]

*/

templateForParamItemList(paramList) {

let that = this;

let config = this.modelConfig[this.state.modelType];

let paramSet = new com_String();

paramList && paramList.forEach(name => {

// get option component

let componentType = 'input'; // default

let paramObj = config.options.filter(x => x.name === name).at(0);

if ((paramObj !== undefined) && (['option_select', 'bool_select'].includes(paramObj.component[0]))) {

componentType = 'option';

}

paramSet.appendLine('<div class="vp-grid-col-110 vp-param-item">');

paramSet.appendFormatLine('<label title="{0}">{1}</label>', name, com_util.optionToLabel(name));

paramSet.appendLine('<div class="vp-flex-gap5">');

paramSet.appendFormatLine('<div class="vp-param-result-input-box vp-no-selection vp-cursor" data-name="{0}">', name);

paramSet.appendFormatLine('<span class="vp-param-result-box vp-no-selection vp-cursor" data-name="{0}"></span>', name);

if (componentType === 'input') {

paramSet.appendFormatLine('<input type="text" class="vp-param-val" data-name="{0}" data-type="var" placeholder="Type here"/>', name);

} else {

// paramSet.appendFormatLine('<input type="text" class="vp-input vp-param-val" data-name="{0}"/>', name);

var suggestInput = new SuggestInput();

suggestInput.setPlaceholder('Type here');

suggestInput.addClass('vp-param-val');

suggestInput.addAttribute('data-name', name);

suggestInput.addAttribute('data-type', (paramObj.type === 'text' ? 'text' : 'var'));

let optionList = paramObj.options;

if (paramObj.component[0] === 'bool_select') {

optionList = ['True', 'False'];

}

suggestInput.setSuggestList(function() { return optionList; });

suggestInput.setNormalFilter(false);

suggestInput.setSelectEvent(function(selectedValue) {

// trigger change

let thisTag = $(that.wrapSelector('.' + suggestInput.uuid));

that.handleAddParamValue($(thisTag));

$(thisTag).val('');

return false;

});

paramSet.appendLine(suggestInput.toTagString());

}

paramSet.appendLine('</div>');

paramSet.appendLine('<div class="vp-icon-close-small vp-param-item-del" title="Click to delete this param from this set."></div>');

paramSet.appendLine('</div>');

paramSet.appendLine('</div>'); // vp-param-item

});

return paramSet.toString();

}

render() {

super.render();

// Model Editor

this.modelEditor = new ModelEditor(this, "model", "instanceEditor");

this.handleScoringOptions(this.state.modelType);

}

generateInstallCode() {

let installCode = this.modelConfig[this.state.modelType].install;

if (vpConfig.extensionType === 'lite') {

installCode = installCode.replace('!', '%');

}

return [ installCode ];

}

checkBeforeRun() {

// if no param is registered, stop and show alert

if ($(this.wrapSelector('.vp-param-result-item')).length <= 0) {

com_util.renderAlertModal('No params added. Please add params.');

return false;

}

return true;

}

generateCode() {

let { modelType, userOption, allocateToCreation, model } = this.state;

let code = new com_String();

/**

* Model Creation

* ---

* from module import model_function

* model = Model(key=value, ...)

*/

let gsConfig = this.modelConfig['grid-search'];

let state = JSON.parse(JSON.stringify(this.state));

let estConfig = this.modelConfig[this.state.modelType];

let estimator = com_generator.vp_codeGenerator(null, estConfig, {}, '');

state['estimator'] = estimator;

state['param_grid'] = '{}';

let paramGrid = [];

// generate param_grid

$(this.wrapSelector('.vp-param-set-box')).each((i, tag) => {

let paramSet = {};

$(tag).find('.vp-param-result-box').each((j, resTag) => {

let paramName = $(resTag).data('name');

let paramValList = [];

$(resTag).find('.vp-param-result-item').each((k, itemTag) => {

let val = $(itemTag).data('value');

if (!isNaN(val)) {

// numeric string -> numeric

val = parseFloat(val);

}

paramValList.push(val);

});

if (paramValList.length > 0) {

// Add only its result exists

paramSet[paramName] = paramValList;

}

});

if (Object.keys(paramSet).length > 0) {

paramGrid.push(paramSet);

}

});

state['param_grid'] = this.paramStringify(paramGrid);

// import code

code.appendLine(gsConfig.import);

code.appendLine(estConfig.import);

// model code

let gsCode = gsConfig.code;

gsCode = com_generator.vp_codeGenerator(this, gsConfig, state, (userOption != ''? ', ' + userOption : ''));

code.appendLine();

code.appendFormat('{0} = {1}', allocateToCreation, gsCode);

return code.toString();

}

paramStringify(paramGridList=[]) {

let paramGridCode = new com_String();

if (paramGridList.length > 1) {

paramGridCode.append('[');

}

paramGridList.forEach((paramSet, i) => {

if (i > 0) {

paramGridCode.append(', \n ');

}

paramGridCode.append('{');

Object.keys(paramSet).forEach((paramName, j) => {

if (j > 0) {

paramGridCode.append(', ');

}

paramGridCode.appendFormat("'{0}': [{1}]", paramName, paramSet[paramName].toString());

});

paramGridCode.append('}');

})

if (paramGridList.length > 1) {

paramGridCode.append(']');

}

return paramGridCode.toString();

}

}

return GridSearch;

});