/*

* Project Name : Visual Python

* Description : GUI-based Python code generator

* File Name : Subset.js

* Author : Black Logic

* Note : Apps > Subset

* License : GNU GPLv3 with Visual Python special exception

* Date : 2021. 11. 18

* Change Date :

*/

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

// [CLASS] Subset

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

define([

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

__VP_CSS_LOADER__('vp_base/css/m_apps/subset'), // 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/VarSelector',

'vp_base/js/com/component/DataSelector'

], function(subsetHtml, subsetCss, com_Const, com_String, com_util, PopupComponent, SuggestInput, VarSelector, DataSelector) {

/**

* Subset

* ====================================

* Special mode

* 1. useAsModule : Use subset as module like DataSelector

* - No allocation

* - No run to cell (able to use apply button instead)

* - renders button to target

* 2. useInputVariable : Use subset as module but use applied variable

* - No allocation

* - No data selection

* - No run to cell

* - renders button to target

* 3. useInputColumns : Use subset as module but use applied columns

* - No allocation

* - No column selection

*/

class Subset extends PopupComponent {

_init() {

super._init();

this.config.sizeLevel = 3;

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

// use Run/Add cell

this.useCell = true;

/** Write codes executed before rendering */

this.targetSelector = this.prop.targetSelector;

this.pageThis = this.prop.pageThis;

this.useAsModule = this.prop.useAsModule;

this.useInputVariable = this.prop.useInputVariable;

if (this.useInputVariable === true || this.useAsModule === true) {

this.eventTarget = this.targetSelector;

this.useCell = false; // show apply button only

}

this.useInputColumns = this.prop.useInputColumns;

this.beforeOpen = this.prop.beforeOpen;

this.finish = this.prop.finish;

// specify pandas object types

this.pdObjTypes = ['DataFrame', 'Series'];

this.allowSubsetTypes = ['subset', 'iloc', 'loc', 'query'];

this.subsetLabels = {

'subset': 'subset',

'iloc' : 'iloc (integer location)',

'loc' : 'loc (location)',

'query' : 'query'

};

if (this.prop.allowSubsetTypes) {

this.allowSubsetTypes = this.prop.allowSubsetTypes;

}

this.stateLoaded = false;

this.state = {

viewAll: false,

previewCode: '',

// all variables list on opening popup

dataList: [],

allocateTo: '',

pandasObject: '',

dataType: 'DataFrame',

isTimestamp: false,

useCopy: false,

toFrame: false,

subsetType: 'loc', // subset / loc / iloc / query

returnType: '',

rowType: 'condition',

rowList: [],

rowLimit: 10,

rowPointer: { start: -1, end: -1 },

rowPageDom: '',

colType: 'indexing',

columnList: [],

colPointer: { start: -1, end: -1 },

colPageDom: '',

selectedColumns: [],

...this.state

};

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

}

render() {

super.render();

this.loadVariables();

let { subsetType, rowList, columnList } = this.state;

// set subset type

$(this.wrapSelector('.' + VP_DS_SUBSET_TYPE)).val(subsetType);

// render

this.renderRowSubsetType(subsetType);

this.renderRowIndexing(rowList);

this.renderRowSlicingBox(rowList);

this.renderColumnConditionList(columnList);

this.renderColumnSubsetType(subsetType);

this.renderColumnIndexing(columnList);

this.renderColumnSlicingBox(columnList);

this.loadStateAfterRender();

// render button

if (this.useAsModule) {

// render button

this.renderButton();

// hide allocate to

$(this.wrapSelector('.' + VP_DS_ALLOCATE_TO)).closest('tr').hide();

}

if (this.useInputVariable) {

// set readonly

$(this.wrapSelector('.' + VP_DS_PANDAS_OBJECT)).attr('disabled', true);

// render button

this.renderButton();

// hide allocate to

$(this.wrapSelector('.' + VP_DS_ALLOCATE_TO)).closest('tr').hide();

}

if (this.useInputColumns) {

// hide make copy

$(this.wrapSelector('.' + VP_DS_USE_COPY)).parent().hide();

// hide to frame

$(this.wrapSelector('.' + VP_DS_TO_FRAME)).parent().hide();

// hide allocate to

$(this.wrapSelector('.' + VP_DS_ALLOCATE_TO)).closest('tr').hide();

// hide column box

$(this.wrapSelector('.' + VP_DS_TAB_PAGE_BOX + '.subset-column')).hide();

}

}

generateCode() {

return this.generateCodeForSubset();

}

templateForBody() {

let page = $(subsetHtml);

let that = this;

// Removed dataselector for Allocation input

// let allocateSelector = new DataSelector({

// pageThis: this, id: 'allocateTo', classes: VP_DS_ALLOCATE_TO, placeholder: 'New variable name',

// finish: function() {

// that.generateCode();

// }

// });

// $(page).find('.' + VP_DS_ALLOCATE_TO).replaceWith(allocateSelector.toTagString());

return page;

}

templateForDataView() {

let tag = new com_String();

// data view type

tag.appendFormatLine('<div class="{0} vp-close-on-blur-btn"><label><input type="checkbox" class="{1}" {2}/><span>{3}</span></label></div>',

VP_DS_DATA_VIEW_ALL_DIV, VP_DS_DATA_VIEW_ALL, (this.state.viewAll?'checked':''), "view all");

// data view

tag.appendFormatLine('<div class="{0} {1} vp-scrollbar"></div>', VP_DS_DATA_VIEW_BOX,

'vp_rendered_html'); // 'rendered_html' style from jupyter output area

return tag.toString();

}

getAllowSubsetTypes() {

return this.pdObjTypes;

}

///////////////////////// render //////////////////////////////////////////////////////

renderButton() {

// set button next to input tag

var buttonTag = new com_String();

buttonTag.appendFormat('<button type="button" class="{0} {1} {2}">{3}</button>',

VP_DS_BTN, this.uuid, 'vp-button', 'Subset');

if (this.pageThis) {

$(buttonTag.toString()).insertAfter($(this.targetSelector));

}

}

renderSubsetType(dataType) {

var subsetType = this.state.subsetType;

let that = this;

var tag = new com_String();

tag.appendFormatLine('<select class="{0} {1}">', VP_DS_SUBSET_TYPE, 'vp-select');

this.allowSubsetTypes.forEach(thisType => {

if (thisType != 'query' || dataType == 'DataFrame') {

let label = that.subsetLabels[thisType];

tag.appendFormatLine('<option value="{0}" {1}>{2}</option>', thisType, subsetType == thisType?'selected':'', label);

}

});

// tag.appendFormatLine('<option value="{0}" {1}>{2}</option>', 'subset', subsetType == 'subset'?'selected':'', 'subset');

// tag.appendFormatLine('<option value="{0}" {1}>{2}</option>', 'loc', subsetType == 'loc'?'selected':'', 'loc');

// tag.appendFormatLine('<option value="{0}" {1}>{2}</option>', 'iloc', subsetType == 'iloc'?'selected':'', 'iloc');

// if (dataType == 'DataFrame') {

// tag.appendFormatLine('<option value="{0}" {1}>{2}</option>', 'query', subsetType == 'query'?'selected':'', 'query');

// }

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

return tag.toString();

}

renderRowSubsetType(subsetType, timestamp = false) {

var tag = new com_String();

tag.appendFormatLine('<select class="{0} {1}">', VP_DS_ROWTYPE, 'vp-select m');

if (subsetType == 'loc' || subsetType == 'iloc' || this.state.dataType == 'Series') {

tag.appendFormatLine('<option value="{0}">{1}</option>', 'indexing', 'Indexing');

}

if (subsetType == 'subset' || subsetType == 'loc' || subsetType == 'iloc') {

tag.appendFormatLine('<option value="{0}">{1}</option>', 'slicing', 'Slicing');

}

if (subsetType == 'subset' || subsetType == 'loc' || subsetType == 'query') {

tag.appendFormatLine('<option value="{0}">{1}</option>', 'condition', 'Condition');

}

if ((subsetType == 'subset' || subsetType == 'loc') && timestamp) {

tag.appendFormatLine('<option value="{0}">{1}</option>', 'timestamp', 'Timestamp');

}

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

// render

$(this.wrapSelector('.' + VP_DS_ROWTYPE)).replaceWith(function () {

return tag.toString();

});

}

renderColumnSubsetType(subsetType) {

var tag = new com_String();

tag.appendFormatLine('<select class="{0} {1}">', VP_DS_COLTYPE, 'vp-select m');

tag.appendFormatLine('<option value="{0}">{1}</option>', 'indexing', 'Indexing');

if (subsetType == 'loc' || subsetType == 'iloc') {

tag.appendFormatLine('<option value="{0}">{1}</option>', 'slicing', 'Slicing');

}

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

// render

$(this.wrapSelector('.' + VP_DS_COLTYPE)).replaceWith(function () {

return tag.toString();

});

}

/**

* Render row selection list

* - search box

* - row list box (left)

* - buttons (add/del to right box)

* - apply box (right)

* @param {Array} rowList

*/

renderRowIndexing(rowList) {

var that = this;

var tag = new com_String();

tag.appendFormatLine('<div class="{0} {1}">', VP_DS_SELECT_CONTAINER, 'select-row');

// row select - left

tag.appendFormatLine('<div class="{0}">', VP_DS_SELECT_LEFT);

// tag.appendFormatLine('<input type="text" class="{0}" placeholder="{1}"/>'

// , VP_DS_SELECT_SEARCH, 'Search Row');

var vpSearchSuggest = new SuggestInput();

vpSearchSuggest.addClass(VP_DS_SELECT_SEARCH);

vpSearchSuggest.setPlaceholder('Search Row');

vpSearchSuggest.setSuggestList(function () { return that.state.rowList; });

vpSearchSuggest.setSelectEvent(function (value, item) {

$(this.wrapSelector()).val(value);

$(this.wrapSelector()).trigger('change');

});

vpSearchSuggest.setNormalFilter(true);

tag.appendLine(vpSearchSuggest.toTagString());

tag.appendFormatLine('<div class="{0} {1} {2} {3}"></div>', VP_DS_SELECT_BOX, 'left', VP_DS_DROPPABLE, 'vp-scrollbar no-selection');

tag.appendLine('</div>'); // VP_DS_SELECT_LEFT

// row select - buttons

tag.appendFormatLine('<div class="{0}">', VP_DS_SELECT_BTN_BOX);

// LAB: img to url

// tag.appendFormatLine('<button type="button" class="{0} {1}" title="{2}"><img src="{3}"/></button>',

// VP_DS_SELECT_ADD_ALL_BTN, 'select-row', 'Add all items', com_Const.IMAGE_PATH + 'arrow_right_double.svg');

// tag.appendFormatLine('<button type="button" class="{0} {1}"><img src="{2}"/></button>', VP_DS_SELECT_ADD_BTN, 'select-row', com_Const.IMAGE_PATH + 'arrow_right.svg');

// tag.appendFormatLine('<button type="button" class="{0} {1}"><img src="{2}"/></button>', VP_DS_SELECT_DEL_BTN, 'select-row', com_Const.IMAGE_PATH + 'arrow_left.svg');

// tag.appendFormatLine('<button type="button" class="{0} {1}" title="{2}"><img src="{3}"/></button>',

// VP_DS_SELECT_DEL_ALL_BTN, 'select-row', 'Remove all items', com_Const.IMAGE_PATH + 'arrow_left_double.svg');

tag.appendFormatLine('<button type="button" class="{0} {1}" title="{2}"><div class="vp-icon-arrow-right-double"></div></button>',

VP_DS_SELECT_ADD_ALL_BTN, 'select-row', 'Add all items');

tag.appendFormatLine('<button type="button" class="{0} {1}"><div class="vp-icon-arrow-right"></div></button>',

VP_DS_SELECT_ADD_BTN, 'select-row');

tag.appendFormatLine('<button type="button" class="{0} {1}"><div class="vp-icon-arrow-left"></div></button>',

VP_DS_SELECT_DEL_BTN, 'select-row');

tag.appendFormatLine('<button type="button" class="{0} {1}" title="{2}"><div class="vp-icon-arrow-left-double"></div></button>',

VP_DS_SELECT_DEL_ALL_BTN, 'select-row', 'Remove all items');

tag.appendLine('</div>'); // VP_DS_SELECT_BTNS

// row select - right

tag.appendFormatLine('<div class="{0}">', VP_DS_SELECT_RIGHT);

tag.appendFormatLine('<div class="{0} {1} {2} {3}">', VP_DS_SELECT_BOX, 'right', VP_DS_DROPPABLE, 'vp-scrollbar no-selection');

tag.appendLine('</div>'); // VP_DS_SELECT_BOX

tag.appendLine('</div>'); // VP_DS_SELECT_RIGHT

tag.appendLine('</div>'); // VP_DS_SELECT_CONTAINER

// render

$(this.wrapSelector('.' + VP_DS_SELECT_CONTAINER + '.select-row')).replaceWith(function () {

return tag.toString();

});

this.renderRowSelectionBox(rowList);

}

/**

* Render row list box

* @param {Array} rowList

*/

renderRowSelectionBox(rowList) {

var tag = new com_String();

tag.appendFormatLine('<div class="{0} {1} {2} {3}">', VP_DS_SELECT_BOX, 'left', VP_DS_DROPPABLE, 'vp-scrollbar no-selection');

// get row data and make draggable items

rowList.forEach((row, idx) => {

tag.appendFormatLine('<div class="{0} {1} {2}" data-idx="{3}" data-rowname="{4}" data-code="{5}" title="{6}"><span>{7}</span></div>',

VP_DS_SELECT_ITEM, 'select-row', VP_DS_DRAGGABLE, row.location, row.value, row.code, row.label, row.label);

});

tag.appendLine('</div>'); // VP_DS_SELECT_BOX

// render

$(this.wrapSelector('.select-row .' + VP_DS_SELECT_BOX + '.left')).replaceWith(function () {

return tag.toString();

});

// item indexing - scroll to bottom

let that = this;

$(this.wrapSelector('.select-row .vp-ds-select-box.left')).on('scroll', function() {

if ($(this).scrollTop() + $(this).innerHeight() >= ($(this)[0].scrollHeight - 2)) {

let scrollPos = $(this).scrollTop();

if (that.state.rowLimit > that.state.rowList.length){

return; // Prevents scroll from being fixed downwards

}

let start = that.state.rowLimit;

let end = start + 10;

let subsetVariable = com_util.formatString('{0}.iloc[{1}:{2}]', that.state.pandasObject, start, end);

vpKernel.getRowList(subsetVariable, start).then(function (resultObj) {

let { result } = resultObj;

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

rowList = rowList.map(function (x) {

return {

...x,

value: x.label,

code: x.value

};

});

// if iloc

if (that.state.subsetType == 'iloc') {

rowList = rowList.map(function (x) {

return {

...x,

label: x.label + '',

value: x.value + '',

code: x.code + '',

};

});

}

let newRowList = [

...that.state.rowList,

...rowList

];

that.state.rowList = [ ...newRowList ];

// filter with selected list

var selectedList = [];

var selectedTags = $(that.wrapSelector('.' + VP_DS_SELECT_ITEM + '.select-row.added:not(.moving)'));

if (selectedTags.length > 0) {

for (var i = 0; i < selectedTags.length; i++) {

var rowValue = $(selectedTags[i]).data('code');

if (rowValue !== undefined) {

selectedList.push(rowValue);

}

}

}

newRowList = newRowList.filter(row => !selectedList.includes(row.code));

that.renderRowSelectionBox(newRowList);

that.bindDraggable('row');

that.generateCode();

// load scroll position

$(that.wrapSelector('.select-row .vp-ds-select-box.left')).scrollTop(scrollPos);

that.state.rowLimit = end;

});

}

});

}

/**

* Render row slicing box

* - slicing start/end with suggestInput

* @param {Array} rowList

*/

renderRowSlicingBox(rowList) {

var that = this;

var tag = new com_String();

tag.appendFormatLine('<div class="{0} {1}">', VP_DS_SLICING_BOX, 'vp-grid-col-p50');

// var vpRowStart = new SuggestInput();

// vpRowStart.addClass(VP_DS_ROW_SLICE_START);

// vpRowStart.addClass('vp-input m');

// vpRowStart.setPlaceholder('start');

// vpRowStart.setSuggestList(function () { return rowList; });

// vpRowStart.setSelectEvent(function (value, item) {

// $(this.wrapSelector()).val(item.code);

// $(this.wrapSelector()).attr('data-code', item.code);

// // $(this.wrapSelector()).trigger('change');

// that.generateCode();

// });

// vpRowStart.setNormalFilter(false);

// var vpRowEnd = new SuggestInput();

// vpRowEnd.addClass(VP_DS_ROW_SLICE_END);

// vpRowEnd.addClass('vp-input m');

// vpRowEnd.setPlaceholder('end');

// vpRowEnd.setSuggestList(function () { return rowList; });

// vpRowEnd.setSelectEvent(function (value, item) {

// $(this.wrapSelector()).val(item.code);

// $(this.wrapSelector()).attr('data-code', item.code);

// // $(this.wrapSelector()).trigger('change');

// that.generateCode();

// });

// vpRowEnd.setNormalFilter(false);

// tag.appendLine(vpRowStart.toTagString());

// tag.appendLine(vpRowEnd.toTagString());

tag.appendLine('<div class="vp-grid-box">');

tag.appendFormatLine('<input type="text" class="vp-input {0}" placeholder="{1}"/>', VP_DS_ROW_SLICE_START, 'start');

tag.appendFormatLine('<label style="text-align:right;padding-right:10px;"><input type="checkbox" class="{0}"/><span>Text</span></label>', 'vp-ds-row-slice-start-text');

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

tag.appendLine('<div class="vp-grid-box">');

tag.appendFormatLine('<input type="text" class="vp-input {0}" placeholder="{1}"/>', VP_DS_ROW_SLICE_END, 'end');

tag.appendFormatLine('<label style="text-align:right;padding-right:10px;"><input type="checkbox" class="{0}"/><span>Text</span></label>', 'vp-ds-row-slice-end-text');

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

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

// render

$(this.wrapSelector('.' + VP_DS_ROWTYPE_BOX + ' .' + VP_DS_SLICING_BOX)).replaceWith(function () {

return tag.toString();

});

}

/**

* Render column selection list

* - search box

* - column list box (left)

* - buttons (add/del to right box)

* - apply box (right)

* @param {Array} colList

*/

renderColumnIndexing(colList) {

var that = this;

var tag = new com_String();

tag.appendFormatLine('<div class="{0} {1}">', VP_DS_SELECT_CONTAINER, 'select-col');

// col select - left

tag.appendFormatLine('<div class="{0}">', VP_DS_SELECT_LEFT);

// tag.appendFormatLine('<input type="text" class="{0}" placeholder="{1}"/>'

// , VP_DS_SELECT_SEARCH, 'Search Column');

var vpSearchSuggest = new SuggestInput();

vpSearchSuggest.addClass(VP_DS_SELECT_SEARCH);

vpSearchSuggest.setPlaceholder('Search Column');

vpSearchSuggest.setSuggestList(function () { return that.state.columnList; });

vpSearchSuggest.setSelectEvent(function (value) {

$(this.wrapSelector()).val(value);

$(this.wrapSelector()).trigger('change');

});

vpSearchSuggest.setNormalFilter(true);

tag.appendLine(vpSearchSuggest.toTagString());

tag.appendFormatLine('<i class="fa fa-search search-icon"></i>');

tag.appendFormatLine('<div class="{0} {1} {2} {3}"></div>', VP_DS_SELECT_BOX, 'left', VP_DS_DROPPABLE, 'vp-scrollbar no-selection');

tag.appendLine('</div>'); // VP_DS_SELECT_LEFT

// col select - buttons

tag.appendFormatLine('<div class="{0}">', VP_DS_SELECT_BTN_BOX);

// LAB: img to url

// tag.appendFormatLine('<button type="button" class="{0} {1}" title="{2}"><img src="{3}"/></button>',

// VP_DS_SELECT_ADD_ALL_BTN, 'select-col', 'Add all items', com_Const.IMAGE_PATH + 'arrow_right_double.svg');

// tag.appendFormatLine('<button type="button" class="{0} {1}"><img src="{2}"/></button>', VP_DS_SELECT_ADD_BTN, 'select-col', com_Const.IMAGE_PATH + 'arrow_right.svg');

// tag.appendFormatLine('<button type="button" class="{0} {1}"><img src="{2}"/></button>', VP_DS_SELECT_DEL_BTN, 'select-col', com_Const.IMAGE_PATH + 'arrow_left.svg');

// tag.appendFormatLine('<button type="button" class="{0} {1}" title="{2}"><img src="{3}"/></button>',

// VP_DS_SELECT_DEL_ALL_BTN, 'select-col', 'Remove all items', com_Const.IMAGE_PATH + 'arrow_left_double.svg');

tag.appendFormatLine('<button type="button" class="{0} {1}" title="{2}"><div class="vp-icon-arrow-right-double"></div></button>',

VP_DS_SELECT_ADD_ALL_BTN, 'select-col', 'Add all items');

tag.appendFormatLine('<button type="button" class="{0} {1}"><div class="vp-icon-arrow-right"></div></button>',

VP_DS_SELECT_ADD_BTN, 'select-col');

tag.appendFormatLine('<button type="button" class="{0} {1}"><div class="vp-icon-arrow-left"></div></button>',

VP_DS_SELECT_DEL_BTN, 'select-col');

tag.appendFormatLine('<button type="button" class="{0} {1}" title="{2}"><div class="vp-icon-arrow-left-double"></div></button>',

VP_DS_SELECT_DEL_ALL_BTN, 'select-col', 'Remove all items');

tag.appendLine('</div>'); // VP_DS_SELECT_BTNS

// col select - right

tag.appendFormatLine('<div class="{0}">', VP_DS_SELECT_RIGHT);

tag.appendFormatLine('<div class="{0} {1} {2} {3}">', VP_DS_SELECT_BOX, 'right', VP_DS_DROPPABLE, 'vp-scrollbar no-selection');

tag.appendLine('</div>'); // VP_DS_SELECT_BOX

tag.appendLine('</div>'); // VP_DS_SELECT_RIGHT

tag.appendLine('</div>'); // VP_DS_SELECT_CONTAINER

// render

$(this.wrapSelector('.' + VP_DS_SELECT_CONTAINER + '.select-col')).replaceWith(function () {

return tag.toString();

});

this.renderColumnSelectionBox(colList);

}

/**

* Render column list box

* @param {Array} colList

*/

renderColumnSelectionBox(colList) {

var tag = new com_String();

tag.appendFormatLine('<div class="{0} {1} {2} {3}">', VP_DS_SELECT_BOX, 'left', VP_DS_DROPPABLE, 'vp-scrollbar no-selection');

// get col data and make draggable items

colList.forEach((col, idx) => {

// col.array parsing

var colInfo = com_util.safeString(col.array);

// render column box

let numIconStr = '';

if (col.isNumeric === true) {

numIconStr = '<span class="vp-icon-numeric mr5 vp-vertical-text"></span>';

} else {

numIconStr = '<span class="vp-icon-non-numeric mr5 vp-vertical-text"></span>';

}

tag.appendFormatLine('<div class="{0} {1} {2}" data-idx="{3}" data-colname="{4}" data-dtype="{5}" data-code="{6}" title="{7}">{8}<span>{9}</span></div>',

VP_DS_SELECT_ITEM, 'select-col', VP_DS_DRAGGABLE, col.location, col.value, col.dtype, col.code, col.label + ': \n' + colInfo, numIconStr, col.label);

});

tag.appendLine('</div>'); // VP_DS_SELECT_BOX

$(this.wrapSelector('.select-col .' + VP_DS_SELECT_BOX + '.left')).replaceWith(function () {

return tag.toString();

});

}

/**

* Render column slicing box

* - slicing start/end with suggestInput

* @param {Array} colList

*/

renderColumnSlicingBox(colList) {

var that = this;

var tag = new com_String();

tag.appendFormatLine('<div class="{0}">', VP_DS_SLICING_BOX);

// tag.appendFormatLine('<label class="{0}">{1}</label>'

// , '', 'Slice');

// tag.appendFormatLine('<input type="text" class="{0} {1}" placeholder="{2}"/> : ', VP_DS_COL_SLICE_START, 'vp-input m', 'start');

// tag.appendFormatLine('<input type="text" class="{0} {1}" placeholder="{2}"/>', VP_DS_COL_SLICE_END, 'vp-input m', 'end');

var vpColStart = new SuggestInput();

vpColStart.addClass(VP_DS_COL_SLICE_START);

vpColStart.addClass('vp-input');

vpColStart.setPlaceholder('start');

vpColStart.setSuggestList(function () { return colList; });

vpColStart.setSelectEvent(function (value, item) {

$(this.wrapSelector()).val(item.code);

$(this.wrapSelector()).data('code', item.code);

that.generateCode();

});

vpColStart.setNormalFilter(false);

var vpColEnd = new SuggestInput();

vpColEnd.addClass(VP_DS_COL_SLICE_END);

vpColEnd.addClass('vp-input');

vpColEnd.setPlaceholder('end');

vpColEnd.setSuggestList(function () { return colList; });

vpColEnd.setSelectEvent(function (value, item) {

$(this.wrapSelector()).val(item.code);

$(this.wrapSelector()).data('code', item.code);

that.generateCode();

});

vpColEnd.setNormalFilter(false);

tag.appendLine(vpColStart.toTagString());

tag.appendLine(vpColEnd.toTagString());

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

$(this.wrapSelector('.' + VP_DS_COLTYPE_BOX + ' .' + VP_DS_SLICING_BOX)).replaceWith(function () {

return tag.toString();

});

}

/**

* Render Row Condition List with columns

* - column name

* - operator

* - condition string

* - and/or connector between prev/next conditions

* @param {Array} colList

*/

renderColumnConditionList(colList) {

var tag = new com_String();

tag.appendFormatLine('<table class="{0}">', VP_DS_CONDITION_TBL);

tag.appendLine(this.templateForConditionBox(colList));

tag.appendLine('<tr>');

tag.appendFormatLine('<td colspan="4"><button type="button" class="{0} {1}">{2}</button></td>',

VP_DS_BUTTON_ADD_CONDITION, 'vp-add-col', '+ Condition');

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

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

$(this.wrapSelector('.' + VP_DS_CONDITION_TBL)).replaceWith(function () {

return tag.toString();

});

}

templateForConditionBox(colList) {

var tag = new com_String();

tag.appendLine('<tr>');

tag.appendLine('<td>');

// del col

tag.appendLine('<div class="vp-icon-btn vp-del-col"></div>');

var varList = this.state.dataList;

tag.appendLine('<div class="vp-td-line">');

tag.appendLine(this.templateForConditionColumnInput(colList));

tag.appendLine(this.templateForConditionOperator(''));

tag.appendLine('<input class="vp-input m vp-condition" type="text" placeholder="Value"/>');

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

tag.appendLine('<div class="vp-td-line">');

tag.appendLine('<select class="vp-select s vp-oper-connect" style="display:none;">');

tag.appendLine('<option value="&">and</option>');

tag.appendLine('<option value="|">or</option>');

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

// use text

tag.appendFormatLine('<label class="{0}"><input type="checkbox" class="{1}" title="{2}"/><span>{3}</span></label>',

'vp-condition-use-text', 'vp-cond-use-text', 'Uncheck it if you want to use variable or numeric values.', 'Text');

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

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

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

return tag.toString();

}

templateForConditionVariableInput(varList, defaultValue, defaultValuesType) {

var dataTypes = ['DataFrame', 'Series', 'nparray', 'list', 'str'];

var varSelector = new VarSelector(dataTypes, defaultValuesType, true, true);

varSelector.addClass('vp-cond-var');

varSelector.setValue(defaultValue);

return varSelector.render();

}

templateForConditionColumnInput(colList) {

var tag = new com_String();

tag.appendFormatLine('<select class="{0} {1}">', 'vp-select m', 'vp-col-list');

// .index

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

colList.forEach(col => {

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

col.code, col.dtype, col.value, col.label);

});

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

return tag.toString();

}

templateForConditionOperator(dtype='object') {

var tag = new com_String();

tag.appendFormatLine('<select class="{0} {1}">', 'vp-select s', 'vp-oper-list');

var operList = ['', '==', '!=', '<', '<=', '>', '>=', 'contains', 'not contains', 'starts with', 'ends with', 'isnull()', 'notnull()'];

if (dtype == '') {

// .index

operList = ['', '==', '!=', '<', '<=', '>', '>='];

} else if (dtype != 'object') {

operList = ['', '==', '!=', '<', '<=', '>', '>=', 'isnull()', 'notnull()'];

}

operList.forEach(oper => {

tag.appendFormatLine('<option value="{0}">{1}</option>', oper, oper);

});

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

return tag.toString();

}

templateForConditionCondInput(category, dtype='object') {

var vpCondSuggest = new SuggestInput();

vpCondSuggest.addClass('vp-input m vp-condition');

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

vpCondSuggest.setPlaceholder((dtype=='object'?'Categorical':dtype) + " dtype");

vpCondSuggest.setSuggestList(function () { return category; });

vpCondSuggest.setSelectEvent(function (value) {

$(this.wrapSelector()).val(value);

$(this.wrapSelector()).trigger('change');

});

vpCondSuggest.setNormalFilter(false);

} else {

vpCondSuggest.setPlaceholder(dtype==''?'Value':(dtype + " dtype"));

}

return vpCondSuggest.toTagString();

}

renderDataView() {

super.renderDataView();

this.loadDataPage();

$(this.wrapSelector('.vp-popup-dataview-box')).css('height', '300px');

}

/**

* Render Data Tab Page

* @param {String} renderedText

*/

renderDataPage(renderedText, isHtml = true) {

var tag = new com_String();

if (isHtml) {

tag.appendLine(renderedText);

} else {

tag.appendFormatLine('<pre>{0}</pre>', renderedText);

}

$(this.wrapSelector('.' + VP_DS_DATA_VIEW_BOX)).html(tag.toString());

}

///////////////////////// render end //////////////////////////////////////////////////////

///////////////////////// load ///////////////////////////////////////////////////////////

/**

* Load Data Tab Page

* - execute generated current code and get html text from jupyter kernel

* - render data page with html text (msg.content.data['text/html'])

*/

loadDataPage() {

var that = this;

var code = this.state.pandasObject;

// if view all is not checked, get current code

if (!this.state.viewAll) {

// get current code

code = this.generateCodeForSubset(false, false);

}

// if not, get output of all data in selected pandasObject

vpKernel.execute(code).then(function(resultObj) {

let { msg } = resultObj;

if (msg.content.data) {

var htmlText = String(msg.content.data["text/html"]);

var codeText = String(msg.content.data["text/plain"]);

if (htmlText != 'undefined') {

that.renderDataPage(htmlText);

} else if (codeText != 'undefined') {

// plain text as code

that.renderDataPage(codeText, false);

} else {

that.renderDataPage('');

}

} else {

var errorContent = '';

if (msg.content && msg.content.ename) {

errorContent = com_util.templateForErrorBox(msg.content.ename, msg.content.evalue);

}

that.renderDataPage(errorContent);

vpLog.display(VP_LOG_TYPE.ERROR, msg.content?.ename, msg.content?.evalue, msg.content);

}

}).catch(function(resultObj) {

let { msg } = resultObj;

var errorContent = '';

if (msg.content && msg.content.ename) {

errorContent = com_util.templateForErrorBox(msg.content.ename, msg.content.evalue);

}

that.renderDataPage(errorContent);

vpLog.display(VP_LOG_TYPE.ERROR, msg.content?.ename, msg.content?.evalue, msg.content);

});

}

/**

* Load pandasObject

* - search available pandasObject list

* - render on VP_DS_PANDAS_OBJECT

*/

loadVariables() {

let that = this;

var types = that.pdObjTypes;

var prevValue = this.state.pandasObject;

// if get input variable through parameter

if (this.useInputVariable && prevValue != '') {

$(this.wrapSelector('.' + VP_DS_PANDAS_OBJECT)).val(prevValue);

// get type of variable

vpKernel.execute(com_util.formatString('_vp_print(_vp_get_type({0}))', prevValue)).then(function (resultObj) {

let { result } = resultObj;

try {

var varType = JSON.parse(result);

that.state.pandasObject = prevValue;

that.state.dataType = varType;

that.state.returnType = varType;

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

return $(com_util.formatString('<div style="display:inline-block"><input class="{0} {1}" value="{2}" disabled /></div>',

'vp-input', VP_DS_PANDAS_OBJECT, prevValue));

});

if (!that.stateLoaded) {

that.reloadSubsetData();

}

} catch {

;

}

});

} else {

// if get input variable through user's selection

vpKernel.getDataList(types).then(function (resultObj) {

let { result } = resultObj;

var varList = JSON.parse(result);

varList = varList.map(function (v) {

return { label: v.varName, value: v.varName, dtype: v.varType };

});

that.state.dataList = varList;

// 1. Target Variable

var prevValue = $(that.wrapSelector('.' + VP_DS_PANDAS_OBJECT)).val();

// $(that.wrapSelector('.' + VP_DS_PANDAS_OBJECT_BOX)).replaceWith(function () {

// var pdVarSelect = new VarSelector(that.pdObjTypes, that.state.dataType, false, false);

// pdVarSelect.addClass(VP_DS_PANDAS_OBJECT);

// pdVarSelect.addBoxClass(VP_DS_PANDAS_OBJECT_BOX);

// pdVarSelect.setValue(prevValue);

// return pdVarSelect.render();

// });

var variableInput = new SuggestInput();

variableInput.addClass(VP_DS_PANDAS_OBJECT);

variableInput.setPlaceholder('Select variable');

variableInput.setSuggestList(function () { return varList; });

variableInput.setSelectEvent(function (value, item) {

$(this.wrapSelector()).val(value);

$(this.wrapSelector()).data('dtype', item.dtype);

that.state.pandasObject = value;

that.state.dataType = item.dtype;

that.state.returnType = item.dtype;

$(this.wrapSelector()).trigger('change');

});

variableInput.setNormalFilter(true);

variableInput.setValue(prevValue);

variableInput.addAttribute('required', true);

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

return variableInput.toTagString();

});

if (!that.stateLoaded) {

that.reloadSubsetData();

}

});

}

}

loadSubsetType(dataType) {

let that = this;

$(this.wrapSelector('.' + VP_DS_SUBSET_TYPE)).replaceWith(function () {

return that.renderSubsetType(dataType);

});

}

/**

* Load Row & Column option page based on subsetType

* @param {string} subsetType subset / loc / iloc / query

* @param {boolean} timestamp use timestamp? true / false

*/

loadRowColumnSubsetType(subsetType, timestamp = false) {

var that = this;

// get current subset type of row & column

var rowSubset = this.state.rowType;

var colSubset = this.state.colType;

// render row & column option page

that.renderRowSubsetType(subsetType, timestamp);

that.renderColumnSubsetType(subsetType);

$(this.wrapSelector('.' + VP_DS_ROWTYPE)).val(rowSubset);

$(this.wrapSelector('.' + VP_DS_COLTYPE)).val(colSubset);

var selectedRowType = $(this.wrapSelector('.' + VP_DS_ROWTYPE)).val();

var selectedColType = $(this.wrapSelector('.' + VP_DS_COLTYPE)).val();

if (selectedRowType != rowSubset) {

$(this.wrapSelector('.' + VP_DS_ROWTYPE + ' option')).eq(0).prop('selected', true);

this.state.rowType = $(this.wrapSelector('.' + VP_DS_ROWTYPE)).val();

}

if (selectedColType != colSubset) {

$(this.wrapSelector('.' + VP_DS_COLTYPE + ' option')).eq(0).prop('selected', true);

this.state.colType = $(this.wrapSelector('.' + VP_DS_COLTYPE)).val();

}

$(this.wrapSelector('.' + VP_DS_ROWTYPE)).trigger('change');

$(this.wrapSelector('.' + VP_DS_COLTYPE)).trigger('change');

}

/**

* Load Column List

* - change state.columnList

* - render column selection list

* - render column slicing box

* - render column condition list

* @param {Array} columnList

*/

loadColumnList(columnList) {

var that = this;

// if iloc

if (this.state.subsetType == 'iloc') {

columnList = columnList.map(function (x) {

return {

...x,

label: x.location + '',

value: x.location + '',

code: x.location + '',

dtype: 'int'

};

});

}

this.state.columnList = columnList;

this.state.colPointer = { start: -1, end: -1 };

// column selection

this.renderColumnIndexing(columnList);

// column slicing

this.renderColumnSlicingBox(columnList);

// column condition

this.renderColumnConditionList(columnList);

}

/**

* Load Row List

* - change state.rowList

* - render row selection list

* - render row slicing box

* @param {Array} rowList

*/

loadRowList(rowList) {

var that = this;

this.state.rowList = rowList;

this.state.rowPointer = { start: -1, end: -1 };

// is timestampindex ?

if (rowList && rowList.length > 0 && rowList[0]['index_dtype'] == 'datetime64[ns]') {

this.state.isTimestamp = true;

} else {

this.state.isTimestamp = false;

}

// row selection

this.renderRowIndexing(rowList);

// row slicing

this.renderRowSlicingBox(rowList);

this.loadRowColumnSubsetType(this.state.subsetType, this.state.isTimestamp);

}

saveState() {

// save input state

$(this.wrapSelector('.' + VP_DS_ROWTYPE_BOX + '.' + this.state.rowType + ' input')).each(function () {

this.defaultValue = this.value;

});

$(this.wrapSelector('.' + VP_DS_COLTYPE_BOX + '.' + this.state.colType + ' input')).each(function () {

this.defaultValue = this.value;

});

// save checkbox state

$(this.wrapSelector('.' + VP_DS_ROWTYPE_BOX + '.' + this.state.rowType + ' input[type="checkbox"]')).each(function () {

if (this.checked) {

this.setAttribute("checked", true);

} else {

this.removeAttribute("checked");

}

});

$(this.wrapSelector('.' + VP_DS_COLTYPE_BOX + '.' + this.state.colType + ' input[type="checkbox"]')).each(function () {

if (this.checked) {

this.setAttribute("checked", true);

} else {

this.removeAttribute("checked");

}

});

// save select state

$(this.wrapSelector('.' + VP_DS_ROWTYPE_BOX + '.' + this.state.rowType + ' select > option')).each(function () {

if (this.selected) {

this.setAttribute("selected", true);

} else {

this.removeAttribute("selected");

}

});

$(this.wrapSelector('.' + VP_DS_COLTYPE_BOX + '.' + this.state.colType + ' select > option')).each(function () {

if (this.selected) {

this.setAttribute("selected", true);

} else {

this.removeAttribute("selected");

}

});

// save pageDom

this.state.rowPageDom = $(this.wrapSelector('.' + VP_DS_ROWTYPE_BOX + '.' + this.state.rowType)).html();

this.state.colPageDom = $(this.wrapSelector('.' + VP_DS_COLTYPE_BOX + '.' + this.state.colType)).html();

}

loadStateAfterRender() {

var {

dataType, pandasObject, useCopy, toFrame, subsetType, allocateTo, rowType, colType, rowPageDom, colPageDom

} = this.state;

// load variable

$(this.wrapSelector('.' + VP_DS_PANDAS_OBJECT_BOX + ' .vp-vs-variables')).val(dataType);

$(this.wrapSelector('.' + VP_DS_PANDAS_OBJECT)).val(pandasObject);

$(this.wrapSelector('.' + VP_DS_USE_COPY)).prop('checked', useCopy);

$(this.wrapSelector('.' + VP_DS_TO_FRAME)).prop('checked', toFrame);

// load method

$(this.wrapSelector('.' + VP_DS_SUBSET_TYPE)).val(subsetType);

// load allocate to

$(this.wrapSelector('.' + VP_DS_ALLOCATE_TO)).val(allocateTo);