/*

* Project Name : Visual Python

* Description : GUI-based Python code generator

* File Name : Frame.js

* Author : Black Logic

* Note : Apps > Frame

* License : GNU GPLv3 with Visual Python special exception

* Date : 2021. 11. 18

* Change Date :

*/

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

// [CLASS] Frame

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

define([

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

__VP_CSS_LOADER__('vp_base/css/m_apps/frame'), // INTEGRATION: unified version of css loader

'vp_base/js/com/com_Const',

'vp_base/js/com/com_String',

'vp_base/js/com/com_util',

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

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

'vp_base/js/com/component/DataSelector',

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

'vp_base/js/m_apps/Subset'

], function(frameHtml, frameCss, com_Const, com_String, com_util, PopupComponent, SuggestInput, DataSelector, MultiSelector, Subset) {

/**

* Frame

*/

class Frame extends PopupComponent {

_init() {

super._init();

this.config.sizeLevel = 5;

this.config.checkModules = ['pd'];

// state

this.state = {

originObj: '',

tempObj: '_vp',

returnObj: 'vp_df',

inplace: false,

menu: '',

menuItem: '',

columnLevel: 1,

columnList: [],

indexLevel: 1,

indexList: [],

selected: [],

axis: FRAME_AXIS.NONE,

lines: TABLE_LINES,

steps: [],

popup: {

type: FRAME_EDIT_TYPE.NONE,

replace: { index: 0 }

},

selection: {

start: -1,

end: -1

},

...this.state

}

// numpy.dtype or python type

this.astypeList = [

'object', 'int64', 'float64', 'bool',

'datetime64[ns]', 'timedelta[ns]', 'category'

];

// {

// id: 'id',

// label: 'menu label',

// child: [

// {

// id: 'id', label: 'label', code: 'code',

// axis: 'col/row', single_select: true/false,

// numeric_only: true/false

// }

// ]

// }

this.menuList = [

{

id: 'edit',

label: 'Edit',

child: [

{ id: 'add_col', label: 'Add column', selection: FRAME_SELECT_TYPE.NONE, menuType: FRAME_EDIT_TYPE.ADD_COL },

{ id: 'add_row', label: 'Add row', selection: FRAME_SELECT_TYPE.NONE, menuType: FRAME_EDIT_TYPE.ADD_ROW },

{ id: 'delete', label: 'Delete', selection: FRAME_SELECT_TYPE.MULTI, menuType: FRAME_EDIT_TYPE.DROP },

{ id: 'rename', label: 'Rename', selection: FRAME_SELECT_TYPE.NONE, menuType: FRAME_EDIT_TYPE.RENAME },

{ id: 'as_type', label: 'As type', selection: FRAME_SELECT_TYPE.NONE, axis: FRAME_AXIS.COLUMN, menuType: FRAME_EDIT_TYPE.AS_TYPE },

{ id: 'to_datetime', label: 'To Datetime', selection: FRAME_SELECT_TYPE.SINGLE, axis: FRAME_AXIS.COLUMN, menuType: FRAME_EDIT_TYPE.TO_DATETIME },

{ id: 'replace', label: 'Replace', selection: FRAME_SELECT_TYPE.SINGLE, axis: FRAME_AXIS.COLUMN, menuType: FRAME_EDIT_TYPE.REPLACE },

{ id: 'discretize', label: 'Discretize', selection: FRAME_SELECT_TYPE.SINGLE, axis: FRAME_AXIS.COLUMN, numeric_only: true, menuType: FRAME_EDIT_TYPE.DISCRETIZE }

]

},

{

id: 'transform',

label: 'Transform',

child: [

{ id: 'set_index', label: 'Set index', axis: FRAME_AXIS.COLUMN, selection: FRAME_SELECT_TYPE.MULTI, menuType: FRAME_EDIT_TYPE.SET_IDX },

{ id: 'reset_index', label: 'Reset index', selection: FRAME_SELECT_TYPE.NONE, menuType: FRAME_EDIT_TYPE.RESET_IDX },

{ id: 'data_shift', label: 'Data shift', axis: FRAME_AXIS.COLUMN, selection: FRAME_SELECT_TYPE.NONE, menuType: FRAME_EDIT_TYPE.DATA_SHIFT }

]

},

{

id: 'sort',

label: 'Sort',

axis: FRAME_AXIS.COLUMN,

child: [

{ id: 'sort_index', label: 'Sort index', selection: FRAME_SELECT_TYPE.NONE, menuType: FRAME_EDIT_TYPE.SORT_INDEX },

{ id: 'sort_values', label: 'Sort values', axis: FRAME_AXIS.COLUMN, selection: FRAME_SELECT_TYPE.MULTI, menuType: FRAME_EDIT_TYPE.SORT_VALUES },

]

},

{

id: 'encoding',

label: 'Encoding',

axis: FRAME_AXIS.COLUMN,

selection: FRAME_SELECT_TYPE.MULTI,

child: [

{ id: 'label_encoding', label: 'Label encoding', axis: FRAME_AXIS.COLUMN, selection: FRAME_SELECT_TYPE.MULTI, menuType: FRAME_EDIT_TYPE.LABEL_ENCODING },

{ id: 'one_hot_encoding', label: 'Onehot encoding', axis: FRAME_AXIS.COLUMN, selection: FRAME_SELECT_TYPE.MULTI, menuType: FRAME_EDIT_TYPE.ONE_HOT_ENCODING },

]

},

{

id: 'data_cleaning',

label: 'Data cleaning',

axis: FRAME_AXIS.COLUMN,

child: [

{ id: 'fillna', label: 'Fill NA', axis: FRAME_AXIS.COLUMN, selection: FRAME_SELECT_TYPE.NONE, menuType: FRAME_EDIT_TYPE.FILL_NA },

{ id: 'dropna', label: 'Drop NA', axis: FRAME_AXIS.COLUMN, selection: FRAME_SELECT_TYPE.NONE, menuType: FRAME_EDIT_TYPE.DROP_NA },

{ id: 'fill_outlier', label: 'Fill outlier', axis: FRAME_AXIS.COLUMN, selection: FRAME_SELECT_TYPE.MULTI, menuType: FRAME_EDIT_TYPE.FILL_OUT },

{ id: 'drop_outlier', label: 'Drop outlier', axis: FRAME_AXIS.COLUMN, selection: FRAME_SELECT_TYPE.MULTI, menuType: FRAME_EDIT_TYPE.DROP_OUT },

{ id: 'drop_duplicates', label: 'Drop duplicates', axis: FRAME_AXIS.COLUMN, selection: FRAME_SELECT_TYPE.NONE, menuType: FRAME_EDIT_TYPE.DROP_DUP },

]

},

];

// Add/Replace - subset

this.subsetCm = null;

this.subsetEditor = null;

this.loading = false;

// this._addCodemirror('previewCode', this.wrapSelector('#vp_fePreviewCode'), 'readonly');

}

loadState() {

super.loadState();

var {

originObj,

returnObj,

steps

} = this.state;

// $(this.wrapSelector('#vp_feVariable')).val(originObj);

// $(this.wrapSelector('#vp_feReturn')).val(returnObj);

// // execute all steps

if (steps && steps.length > 0) {

var code = steps.join('\n');

this.state.steps = [];

this.loadCode(code);

}

}

_bindEvent() {

super._bindEvent();

/** Implement binding events */

let that = this;

// select df

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

// set temporary df

var origin = $(this).val();

if (origin) {

// initialize state values

that.state.originObj = origin;

that.state.tempObj = '_vp';

that.state.returnObj = 'vp_df';

if (that.state.inplace === true) {

that.state.returnObj = origin;

}

that.initState();

// reset return obj

$(that.wrapSelector('#vp_feReturn')).val(that.state.returnObj);

// reset table

$(that.wrapSelector('.' + VP_FE_TABLE)).replaceWith(function() {

return that.renderTable('');

});

// load code with temporary df

that.loadCode(that.getTypeCode(FRAME_EDIT_TYPE.INIT));

that.loadInfo();

}

});

// refresh df

$(document).on('click', this.wrapSelector('.vp-fe-df-refresh'), function() {

that.loadVariableList();

});

$(document).on('click', this.wrapSelector('.' + VP_FE_INFO), function(evt) {

evt.stopPropagation();

});

// input return variable

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

var returnVariable = $(this).val();

if (returnVariable == '') {

returnVariable = that.state.tempObj;

}

// check if it's same with origin obj

if (returnVariable === that.state.originObj) {

$(that.wrapSelector('#inplace')).prop('checked', true);

that.state.inplace = true;

} else {

$(that.wrapSelector('#inplace')).prop('checked', false);

that.state.inplace = false;

}

// show preview with new return variable

that.state.returnObj = returnVariable;

that.setPreview(that.getCurrentCode());

});

// check/uncheck inplace

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

let checked = $(this).prop('checked');

let returnVariable = 'vp_df';

if (checked === true) {

returnVariable = that.state.originObj;

}

$(that.wrapSelector('#vp_feReturn')).val(returnVariable);

// show preview with new return variable

that.state.inplace = checked;

that.state.returnObj = returnVariable;

that.setPreview(that.getCurrentCode());

});

// menu on column (Deprecated on v2.3.6 - Temporarily Show on v.2.4.4)

$(document).on('contextmenu', this.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_COLUMN), function(event) {

event.preventDefault();

var idx = $(that.wrapSelector('.' + VP_FE_TABLE_COLUMN)).index(this); // 1 ~ n

var hasSelected = $(this).hasClass('selected');

$(that.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_ROW)).removeClass('selected');

// select col/idx

if (!hasSelected) {

$(that.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_COLUMN)).removeClass('selected');

$(that.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_COLUMN_GROUP)).removeClass('selected');

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

that.state.selection = { start: idx, end: -1 };

var newAxis = $(this).data('axis');

that.state.axis = newAxis;

}

// select its group

$(that.wrapSelector(`.${VP_FE_TABLE} th[data-label="${$(this).data('parent')}"]`)).addClass('selected');

that.loadInfo();

// load toolbar

that.renderToolbar();

// show menu

var thisPos = $(this).position();

var thisRect = $(this)[0].getBoundingClientRect();

that.showMenu(thisPos.left, thisPos.top + thisRect.height);

});

// menu on row (Deprecated on v2.3.6 - Temporarily Show on v.2.4.4)

$(document).on('contextmenu', this.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_ROW), function(event) {

event.preventDefault();

var idx = $(that.wrapSelector('.' + VP_FE_TABLE_ROW)).index(this); // 0 ~ n

var hasSelected = $(this).hasClass('selected');

$(that.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_COLUMN)).removeClass('selected');

// select col/idx

if (!hasSelected) {

$(that.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_ROW)).removeClass('selected');

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

that.state.selection = { start: idx, end: -1 };

var newAxis = $(this).data('axis');

that.state.axis = newAxis;

}

that.loadInfo();

// load toolbar

that.renderToolbar();

// show menu

var thisPos = $(this).position();

var thisRect = $(this)[0].getBoundingClientRect();

var tblPos = $(that.wrapSelector('.' + VP_FE_TABLE)).position();

var scrollTop = $(that.wrapSelector('.' + VP_FE_TABLE)).scrollTop();

that.showMenu(tblPos.left + thisRect.width, tblPos.top + thisPos.top - scrollTop);

});

// un-select every selection and menu box

$(document).on('click', this.wrapSelector('.vp-fe-table'), function(evt) {

evt.stopPropagation();

var target = evt.target;

if ($('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_COLUMN).find(target).length == 0

&& !$(target).hasClass('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_COLUMN) ) {

$(that.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_ROW)).removeClass('selected');

$(that.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_COLUMN)).removeClass('selected');

$(that.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_COLUMN_GROUP)).removeClass('selected');

$(that.wrapSelector('.vp-fe-menu-box')).hide();

// reset selected columns/indexes

that.state.axis = FRAME_AXIS.NONE;

that.state.selected = [];

// load toolbar

that.renderToolbar();

}

});

// select column group

$(document).on('click', this.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_COLUMN_GROUP), function(evt) {

evt.stopPropagation();

let hasSelected = $(this).hasClass('selected');

let colLabel = $(this).data('label');

let firstIdx = $(that.wrapSelector(`.${VP_FE_TABLE} th[data-parent="${colLabel}"]:first`)).index();

let lastIdx = $(that.wrapSelector(`.${VP_FE_TABLE} th[data-parent="${colLabel}"]:last`)).index();

if (firstIdx === lastIdx) {

lastIdx = -1;

}

$(that.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_ROW)).removeClass('selected');

if (vpEvent.keyManager.keyCheck.ctrlKey) {

if (!hasSelected) {

that.state.selection = { start: firstIdx, end: -1 };

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

$(that.wrapSelector(`.${VP_FE_TABLE} th[data-parent="${colLabel}"]`)).addClass('selected');

var newAxis = $(this).data('axis');

that.state.axis = newAxis;

} else {

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

$(that.wrapSelector(`.${VP_FE_TABLE} th[data-parent="${colLabel}"]`)).removeClass('selected');

}

} else if (vpEvent.keyManager.keyCheck.shiftKey) {

var axis = that.state.axis;

var startIdx = that.state.selection.start;

if (axis != FRAME_AXIS.COLUMN) {

startIdx = -1;

}

if (startIdx == -1) {

// no selection

that.state.selection = { start: firstIdx, end: -1 };

} else if (startIdx > firstIdx) {

// add selection from idx to startIdx

var tags = $(that.wrapSelector('.' + VP_FE_TABLE_COLUMN));

let parentSet = new Set();

for (var i = firstIdx - 1; i <= startIdx; i++) {

$(tags[i]).addClass('selected');

parentSet.add($(tags[i]).data('parent'));

}

parentSet.forEach(parentKey => {

let length = $(that.wrapSelector(`.${VP_FE_TABLE} th[data-parent="${parentKey}"]`)).length;

let selectedLength = $(that.wrapSelector(`.${VP_FE_TABLE} th.selected[data-parent="${parentKey}"]`)).length;

if (length === selectedLength) {

$(that.wrapSelector(`.${VP_FE_TABLE} th[data-label="${parentKey}"]`)).addClass('selected');

} else {

$(that.wrapSelector(`.${VP_FE_TABLE} th[data-label="${parentKey}"]`)).removeClass('selected');

}

});

that.state.selection = { start: startIdx, end: firstIdx };

} else if (startIdx <= firstIdx) {

// add selection from startIdx to idx

var tags = $(that.wrapSelector('.' + VP_FE_TABLE_COLUMN));

let parentSet = new Set();

for (var i = startIdx; i < lastIdx; i++) {

$(tags[i]).addClass('selected');

parentSet.add($(tags[i]).data('parent'));

}

parentSet.forEach(parentKey => {

let length = $(that.wrapSelector(`.${VP_FE_TABLE} th[data-parent="${parentKey}"]`)).length;

let selectedLength = $(that.wrapSelector(`.${VP_FE_TABLE} th.selected[data-parent="${parentKey}"]`)).length;

if (length === selectedLength) {

$(that.wrapSelector(`.${VP_FE_TABLE} th[data-label="${parentKey}"]`)).addClass('selected');

} else {

$(that.wrapSelector(`.${VP_FE_TABLE} th[data-label="${parentKey}"]`)).removeClass('selected');

}

});

that.state.selection = { start: startIdx, end: lastIdx };

}

} else {

$(that.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_COLUMN)).removeClass('selected');

$(that.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_COLUMN_GROUP)).removeClass('selected');

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

$(that.wrapSelector(`.${VP_FE_TABLE} th[data-parent="${colLabel}"]`)).addClass('selected');

that.state.selection = { start: firstIdx, end: lastIdx };

var newAxis = $(this).data('axis');

that.state.axis = newAxis;

}

that.loadInfo();

// load toolbar

that.renderToolbar();

});

/**

* Drag and drop selection TODO: release for later version v2.3.8

*/

// drag start column

// $(document).on('mousedown', this.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_COLUMN), function(evt) {

// var idx = $(that.wrapSelector('.' + VP_FE_TABLE_COLUMN)).index(this); // 1 ~ n

// that.state.axis = FRAME_AXIS.COLUMN;

// that.state.selection = { start: idx, end: -1 };

// that.isMouseDown = true;

// console.log('down');

// $(document).on('mouseover', that.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_COLUMN), function(evt) {

// evt.stopPropagation();

// var idx = $(that.wrapSelector('.' + VP_FE_TABLE_COLUMN)).index(this); // 1 ~ n

// var axis = that.state.axis;

// var startIdx = that.state.selection.start;

// if (that.isMouseDown === true) {

// if (axis === FRAME_AXIS.ROW) {

// startIdx = -1;

// }

// if (startIdx == -1) {

// // no selection

// that.state.selection = { start: idx, end: -1 };

// } else if (startIdx > idx) {

// // add selection from idx to startIdx

// var tags = $(that.wrapSelector('.' + VP_FE_TABLE_COLUMN));

// for (var i = idx; i <= startIdx; i++) {

// $(tags[i]).addClass('selected');

// }

// that.state.selection = { start: startIdx, end: idx };

// } else if (startIdx <= idx) {

// // add selection from startIdx to idx

// var tags = $(that.wrapSelector('.' + VP_FE_TABLE_COLUMN));

// for (var i = startIdx; i <= idx; i++) {

// $(tags[i]).addClass('selected');

// }

// that.state.selection = { start: startIdx, end: idx };

// }

// that.loadInfo();

// // load toolbar

// that.renderToolbar();

// }

// });

// });

// $(document).on('mouseup', this.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_COLUMN), function(evt) {

// that.isMouseDown = false;

// console.log('up');

// $(document).off('mouseover', that.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_COLUMN));

// });

// select column

$(document).on('click', this.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_COLUMN), function(evt) {

evt.stopPropagation();

var idx = $(that.wrapSelector('.' + VP_FE_TABLE_COLUMN)).index(this); // 1 ~ n

var hasSelected = $(this).hasClass('selected');

$(that.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_ROW)).removeClass('selected');

if (vpEvent.keyManager.keyCheck.ctrlKey) {

if (!hasSelected) {

that.state.selection = { start: idx, end: -1 };

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

var newAxis = $(this).data('axis');

that.state.axis = newAxis;

} else {

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

}

} else if (vpEvent.keyManager.keyCheck.shiftKey) {

var axis = that.state.axis;

var startIdx = that.state.selection.start;

if (axis === FRAME_AXIS.ROW) {

startIdx = -1;

}

if (startIdx == -1) {

// no selection

that.state.selection = { start: idx, end: -1 };

} else if (startIdx > idx) {

// add selection from idx to startIdx

var tags = $(that.wrapSelector('.' + VP_FE_TABLE_COLUMN));

for (var i = idx; i <= startIdx; i++) {

$(tags[i]).addClass('selected');

}

that.state.selection = { start: startIdx, end: idx };

} else if (startIdx <= idx) {

// add selection from startIdx to idx

var tags = $(that.wrapSelector('.' + VP_FE_TABLE_COLUMN));

for (var i = startIdx; i <= idx; i++) {

$(tags[i]).addClass('selected');

}

that.state.selection = { start: startIdx, end: idx };

}

} else {

$(that.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_COLUMN)).removeClass('selected');

$(that.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_COLUMN_GROUP)).removeClass('selected');

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

that.state.selection = { start: idx, end: -1 };

var newAxis = $(this).data('axis');

that.state.axis = newAxis;

}

// select its group

$(that.wrapSelector(`.${VP_FE_TABLE} th[data-label="${$(this).data('parent')}"]`)).addClass('selected');

that.loadInfo();

// load toolbar

that.renderToolbar();

});

// select row

$(document).on('click', this.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_ROW), function(evt) {

evt.stopPropagation();

var idx = $(that.wrapSelector('.' + VP_FE_TABLE_ROW)).index(this); // 0 ~ n

var hasSelected = $(this).hasClass('selected');

$(that.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_COLUMN)).removeClass('selected');

if (vpEvent.keyManager.keyCheck.ctrlKey) {

if (!hasSelected) {

that.state.selection = { start: idx, end: -1 };

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

var newAxis = $(this).data('axis');

that.state.axis = newAxis;

} else {

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

}

} else if (vpEvent.keyManager.keyCheck.shiftKey) {

var axis = that.state.axis;

var startIdx = that.state.selection.start;

if (axis != FRAME_AXIS.ROW) {

startIdx = -1;

}

if (startIdx == -1) {

// no selection

that.state.selection = { start: idx, end: -1 };

} else if (startIdx > idx) {

// add selection from idx to startIdx

var tags = $(that.wrapSelector('.' + VP_FE_TABLE_ROW));

for (var i = idx; i <= startIdx; i++) {

$(tags[i]).addClass('selected');

}

that.state.selection = { start: startIdx, end: idx };

} else if (startIdx <= idx) {

// add selection from startIdx to idx

var tags = $(that.wrapSelector('.' + VP_FE_TABLE_ROW));

for (var i = startIdx; i <= idx; i++) {

$(tags[i]).addClass('selected');

}

that.state.selection = { start: startIdx, end: idx };

}

} else {

$(that.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_ROW)).removeClass('selected');

if (!hasSelected) {

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

that.state.selection = { start: idx, end: -1 };

var newAxis = $(this).data('axis');

that.state.axis = newAxis;

} else {

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

}

}

that.loadInfo();

// load toolbar

that.renderToolbar();

});

// add column

$(document).on('click', this.wrapSelector('.' + VP_FE_ADD_COLUMN), function() {

// add column

that.openInputPopup(FRAME_EDIT_TYPE.ADD_COL);

});

// add row

$(document).on('click', this.wrapSelector('.' + VP_FE_ADD_ROW), function() {

// add row

that.openInputPopup(FRAME_EDIT_TYPE.ADD_ROW);

});

// more rows

$(document).on('click', this.wrapSelector('.' + VP_FE_TABLE_MORE), function() {

that.state.lines += TABLE_LINES;

that.loadCode(that.getTypeCode(FRAME_EDIT_TYPE.SHOW), true);

});

// click toolbar item (Deprecated on v2.3.6 - Temporarily Show on v.2.4.4)

$(document).on('click', this.wrapSelector('.vp-fe-toolbar-item'), function(evt) {

evt.stopPropagation();

var itemType = $(this).data('type');

switch (parseInt(itemType)) {

case FRAME_EDIT_TYPE.ADD_COL:

case FRAME_EDIT_TYPE.ADD_ROW:

that.openInputPopup(itemType);

break;

}

});

// click menu item

$(document).on('click', this.wrapSelector('.' + VP_FE_MENU_ITEM + ':not(.disabled)'), function(event) {

event.stopPropagation();

var editType = $(this).data('type');

switch (parseInt(editType)) {

case FRAME_EDIT_TYPE.ADD_COL:

case FRAME_EDIT_TYPE.ADD_ROW:

case FRAME_EDIT_TYPE.RENAME:

case FRAME_EDIT_TYPE.REPLACE:

case FRAME_EDIT_TYPE.AS_TYPE:

case FRAME_EDIT_TYPE.TO_DATETIME:

case FRAME_EDIT_TYPE.DISCRETIZE:

case FRAME_EDIT_TYPE.DATA_SHIFT:

case FRAME_EDIT_TYPE.SORT_INDEX:

case FRAME_EDIT_TYPE.SORT_VALUES:

case FRAME_EDIT_TYPE.FILL_NA:

case FRAME_EDIT_TYPE.DROP_NA:

case FRAME_EDIT_TYPE.DROP_DUP:

case FRAME_EDIT_TYPE.FILL_OUT:

case FRAME_EDIT_TYPE.DROP_OUT:

case FRAME_EDIT_TYPE.DROP:

// open inner popup

that.openInputPopup(editType);

break;

default:

that.loadCode(that.getTypeCode(editType));

break;

}

that.hideMenu();

});

// popup : replace - add button

$(document).on('click', this.wrapSelector('.vp-inner-popup-replace-add'), function() {

var newInput = $(that.renderReplaceInput(++that.state.popup.replace.index));

newInput.insertBefore(

$(that.wrapSelector('.vp-inner-popup-replace-table tr:last'))

);

});

// popup : replace - delete row

$(document).on('click', this.wrapSelector('.vp-inner-popup-delete'), function() {

$(this).closest('tr').remove();

});

// popup : add column - dataframe selection 1

$(document).on('var_changed change', this.wrapSelector('.vp-inner-popup-var1'), function() {

var type = $(that.wrapSelector('.vp-inner-popup-var1box .vp-vs-data-type')).val();

if (type == 'DataFrame') {

var df = $(this).val();

vpKernel.getColumnList(df).then(function(resultObj) {

let { result } = resultObj;

var { list } = JSON.parse(result);

var tag = new com_String();

tag.appendFormatLine('<select class="{0}">', 'vp-inner-popup-var1col');

list && list.forEach(col => {

tag.appendFormatLine('<option data-code="{0}" value="{1}">{2}</option>'

, col.value, col.label, col.label);

});

tag.appendLine('</select>');

// replace column list

$(that.wrapSelector('.vp-inner-popup-var1col')).replaceWith(function() {

return tag.toString();

});

});

}

});

// popup : add column - dataframe selection 2

$(document).on('var_changed change', this.wrapSelector('.vp-inner-popup-var2'), function() {

var type = $(that.wrapSelector('.vp-inner-popup-var2box .vp-vs-data-type')).val();

if (type == 'DataFrame') {

var df = $(this).val();

vpKernel.getColumnList(df).then(function(resultObj) {

let { result } = resultObj;

var { list } = JSON.parse(result);

var tag = new com_String();

tag.appendFormatLine('<select class="{0}">', 'vp-inner-popup-var2col');

list && list.forEach(col => {

tag.appendFormatLine('<option data-code="{0}" value="{1}">{2}</option>'

, col.value, col.label, col.label);

});

tag.appendLine('</select>');

// replace column list

$(that.wrapSelector('.vp-inner-popup-var2col')).replaceWith(function() {

return tag.toString();

});

});

}

});

}

handleInnerOk() {

// ok input popup

var type = parseInt(this.state.popup.type);

var content = this.getPopupContent(type);

// required data check

if (type === FRAME_EDIT_TYPE.ADD_COL

|| type === FRAME_EDIT_TYPE.ADD_ROW) {

if (content.name === '' || content.name === "''") {

$(this.wrapSelector('.vp-inner-popup-input0')).focus();

return;

}

} else if (type === FRAME_EDIT_TYPE.REPLACE) {

;

} else if (type === FRAME_EDIT_TYPE.FILL_NA) {

if (content.method === 'value' && content.value === '') {

$(this.wrapSelector('.vp-inner-popup-value')).focus();

return;

}

} else if (type === FRAME_EDIT_TYPE.FILL_OUT) {

if (content.filltype === 'value' && content.fillvalue === '') {

$(this.wrapSelector('.vp-inner-popup-fillvalue')).focus();

return;

}

} else if (type === FRAME_EDIT_TYPE.TO_DATETIME) {

if (content.newcol === '') {

$(this.wrapSelector('.vp-inner-popup-todt-new-col')).focus();

}

}

// run check modules for outliers and load codes

if (type === FRAME_EDIT_TYPE.FILL_OUT) {

this.config.checkModules = ['pd', 'np', 'vp_fill_outlier'];

let that = this;

this.checkAndRunModules(true).then(function() {

that.loadCode(that.getTypeCode(that.state.popup.type, content));

});

} else if (type === FRAME_EDIT_TYPE.DROP_OUT) {

this.config.checkModules = ['pd', 'np', 'vp_drop_outlier'];

let that = this;

this.checkAndRunModules(true).then(function() {

that.loadCode(that.getTypeCode(that.state.popup.type, content));

});

} else {

var code = this.loadCode(this.getTypeCode(this.state.popup.type, content));

if (code == '') {

return;

}

}

this.closeInnerPopup();

}

_unbindEvent() {

super._unbindEvent();

$(document).off(this.wrapSelector('*'));

$(document).off('change', this.wrapSelector('#vp_feVariable'));

$(document).off('click', this.wrapSelector('.vp-fe-df-refresh'));

$(document).off('click', this.wrapSelector('.' + VP_FE_INFO));

$(document).off('change', this.wrapSelector('#vp_feReturn'));

$(document).off('click', this.wrapSelector('.vp-popup-body'));

$(document).off('contextmenu', this.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_COLUMN));

$(document).off('contextmenu', this.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_ROW));

$(document).off('click', this.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_COLUMN));

$(document).off('click', this.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_ROW));

$(document).off('click', this.wrapSelector('.' + VP_FE_ADD_COLUMN));

$(document).off('click', this.wrapSelector('.' + VP_FE_ADD_ROW));

$(document).off('click', this.wrapSelector('.' + VP_FE_TABLE_MORE));

$(document).off('click', this.wrapSelector('.vp-fe-toolbar-item'));

$(document).off('click', this.wrapSelector('.' + VP_FE_MENU_ITEM));

$(document).off('click', this.wrapSelector('.vp-inner-popup-replace-add'));

$(document).off('click', this.wrapSelector('.vp-inner-popup-delete'));

$(document).off('change', this.wrapSelector('.vp-inner-popup-var1'));

$(document).off('change', this.wrapSelector('.vp-inner-popup-var2'));

}

bindEventForPopupPage(menuType) {

var that = this;

if (menuType === FRAME_EDIT_TYPE.ADD_COL

|| menuType === FRAME_EDIT_TYPE.ADD_ROW

|| menuType === FRAME_EDIT_TYPE.REPLACE) {

// Add page

if (menuType === FRAME_EDIT_TYPE.ADD_COL

|| menuType === FRAME_EDIT_TYPE.ADD_ROW) {

///// add page

// 1. add type

$(this.wrapSelector('.vp-inner-popup-addtype')).on('change', function() {

var tab = $(this).val();

$(that.wrapSelector('.vp-inner-popup-tab')).hide();

$(that.wrapSelector('.vp-inner-popup-tab.' + tab)).show();

if (tab === 'apply') {

let colName = $(that.wrapSelector('.vp-inner-popup-apply-column option:selected')).text();

$(that.wrapSelector('.vp-inner-popup-apply-target-name')).text(colName);

$(that.wrapSelector('.vp-inner-popup-apply-column')).trigger('change');

}

});

// 2-1. hide column selection box

$(this.wrapSelector('.vp-inner-popup-var1box .vp-vs-data-type')).on('change', function() {

var type = $(this).val();

if (type == 'DataFrame') {

$(that.wrapSelector('.vp-inner-popup-var1col')).show();

} else {

$(that.wrapSelector('.vp-inner-popup-var1col')).hide();

}

});

$(this.wrapSelector('.vp-inner-popup-var2box .vp-vs-data-type')).on('change', function() {

var type = $(this).val();

if (type == 'DataFrame') {

$(that.wrapSelector('.vp-inner-popup-var2col')).show();

} else {

$(that.wrapSelector('.vp-inner-popup-var2col')).hide();

}

});

$(document).off('change', this.wrapSelector('.vp-inner-popup-vartype'));

$(document).on('change', this.wrapSelector('.vp-inner-popup-vartype'), function() {

var type = $(this).val();

$(this).closest('tr').find('.vp-inner-popup-vartype-box').hide();

$(this).closest('tr').find('.vp-inner-popup-vartype-box.' + type).show();

});

}

// Replace page

if (menuType === FRAME_EDIT_TYPE.REPLACE) {

$(this.wrapSelector('.vp-inner-popup-replacetype')).on('change', function() {

var tab = $(this).val();

$(that.wrapSelector('.vp-inner-popup-tab')).hide();

$(that.wrapSelector('.vp-inner-popup-tab.' + tab)).show();

if (tab === 'apply') {

let colName = $(that.wrapSelector('.vp-inner-popup-apply-column option:selected')).text();

$(that.wrapSelector('.vp-inner-popup-apply-target-name')).text(colName);

$(that.wrapSelector('.vp-inner-popup-apply-column')).trigger('change');

}

});

}

// Add & Replace page

// condition add

$(document).off('click', this.wrapSelector('.vp-inner-popup-add-cond'));

$(document).on('click', this.wrapSelector('.vp-inner-popup-add-cond'), function (event) {

that.handleConditionAdd();

});

// condition delete

$(document).off('click', this.wrapSelector('.vp-inner-popup-del-cond'));

$(document).on('click', this.wrapSelector('.vp-inner-popup-del-cond'), function (event) {

event.stopPropagation();

// clear previous one

$(this).closest('tr').remove();

$(that.wrapSelector('.vp-inner-popup-oper-connect:last')).hide();

});

// change column selection for condition page

$(document).off('change', this.wrapSelector('.vp-inner-popup-col-list'));

$(document).on('change', this.wrapSelector('.vp-inner-popup-col-list'), function () {

var thisTag = $(this);

var varName = that.state.tempObj;

var colName = $(this).find('option:selected').attr('data-code');

var colDtype = $(this).find('option:selected').attr('data-dtype');

var operTag = $(this).closest('td').find('.vp-inner-popup-oper-list');

var condTag = $(this).closest('td').find('.vp-inner-popup-condition');

if (colName == '.index') {

// index

$(thisTag).closest('td').find('.vp-inner-popup-cond-use-text').prop('checked', false);

$(operTag).replaceWith(function () {

return that.templateForConditionOperator('');

});

$(condTag).replaceWith(function () {

return that.templateForConditionCondInput([], '');

});

that.generateCode();

} else {

// get result and load column list

vpKernel.getColumnCategory(varName, colName).then(function (resultObj) {

let { result } = resultObj;

try {

var category = JSON.parse(result);

if (category && category.length > 0 && colDtype == 'object') {

// if it's categorical column and its dtype is object, check 'Text' as default

$(thisTag).closest('td').find('.vp-inner-popup-cond-use-text').prop('checked', true);

} else {

$(thisTag).closest('td').find('.vp-inner-popup-cond-use-text').prop('checked', false);

}

$(operTag).replaceWith(function () {

return that.templateForConditionOperator(colDtype);

});

$(condTag).replaceWith(function () {

return that.templateForConditionCondInput(category, colDtype);

});

} catch {

$(thisTag).closest('td').find('.vp-inner-popup-cond-use-text').prop('checked', false);

$(operTag).replaceWith(function () {

return that.templateForConditionOperator(colDtype);

});

$(condTag).replaceWith(function () {

return that.templateForConditionCondInput([], colDtype);

});

}

});

}

});

// change operator selection

$(document).off('change', this.wrapSelector('.vp-inner-popup-oper-list'));

$(document).on('change', this.wrapSelector('.vp-inner-popup-oper-list'), function () {

var oper = $(this).val();

var condTag = $(this).closest('td').find('.vp-inner-popup-condition');

var useTextTag = $(this).closest('td').find('.vp-inner-popup-cond-use-text');

// var colDtype = $(this).closest('td').find('.vp-col-list option:selected').attr('data-dtype');

// if operator is isnull(), notnull(), disable condition input

if (oper == 'isnull()' || oper == 'notnull()') {

$(condTag).prop('disabled', true);

$(useTextTag).prop('disabled', true);

} else {

$(condTag).prop('disabled', false);

$(useTextTag).prop('disabled', false);

}

});

// apply page

// 4. apply

$(this.wrapSelector('.vp-inner-popup-apply-column')).on('change', function() {

// TODO: change apply-condition (save value)

let colLabel = $(that.wrapSelector('.vp-inner-popup-apply-column option:selected')).text();

$(that.wrapSelector('.vp-inner-popup-apply-target-name')).text(colLabel);

var varName = that.state.tempObj;

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

var colDtype = $(this).find('option:selected').attr('data-dtype');

var operTag = $(that.wrapSelector('.vp-inner-popup-apply-oper-list'));

var condTag = $(that.wrapSelector('.vp-inner-popup-apply-condition'));

// get result and load column list

vpKernel.getColumnCategory(varName, colName).then(function (resultObj) {

let { result } = resultObj;

try {

var category = JSON.parse(result);

if (category && category.length > 0 && colDtype == 'object') {

// if it's categorical column and its dtype is object, check 'Text' as default

$(that.wrapSelector('.vp-inner-popup-apply-cond-usetext')).prop('checked', true);

} else {

$(that.wrapSelector('.vp-inner-popup-apply-cond-usetext')).prop('checked', false);

}

$(operTag).replaceWith(function () {

return that.templateForConditionOperator(colDtype, 'vp-inner-popup-apply-oper-list', $(this).val());

});

$(condTag).replaceWith(function () {

return that.templateForConditionCondInput(category, colDtype, 'vp-inner-popup-apply-condition', $(this).val());

});

} catch {

$(that.wrapSelector('.vp-inner-popup-apply-cond-usetext')).prop('checked', false);

$(operTag).replaceWith(function () {

return that.templateForConditionOperator(colDtype, 'vp-inner-popup-apply-oper-list');

});

$(condTag).replaceWith(function () {

return that.templateForConditionCondInput([], colDtype, 'vp-inner-popup-apply-condition');

});

}

});

});

// change operator selection

$(document).off('change', this.wrapSelector('.vp-inner-popup-apply-oper-list'));

$(document).on('change', this.wrapSelector('.vp-inner-popup-apply-oper-list'), function () {

var oper = $(this).val();

var condTag = $(this).closest('td').find('.vp-inner-popup-apply-condition');

var useTextTag = $(this).closest('td').find('.vp-inner-popup-apply-cond-usetext');

// if operator is isnull(), notnull(), disable condition input

if (oper == 'isnull()' || oper == 'notnull()') {

$(condTag).prop('disabled', true);

$(useTextTag).prop('disabled', true);

} else {

$(condTag).prop('disabled', false);

$(useTextTag).prop('disabled', false);

}

});

$(this.wrapSelector('.vp-inner-popup-toggle-else')).on('click', function() {

// toggle else on/off

let elseOn = $(this).attr('data-else'); // on / off

if (elseOn === 'off') {

// off -> on

$(this).attr('data-else', 'on');

$(this).text('Else off');

$(that.wrapSelector('.vp-inner-popup-apply-else-value')).prop('disabled', false);

$(that.wrapSelector('.vp-inner-popup-apply-else-usetext')).prop('disabled', false);

} else {

// on -> off

$(this).attr('data-else', 'off');

$(this).text('Else on');