define([

'require'

, 'jquery'

, 'nbextensions/visualpython/src/common/constant'

, 'nbextensions/visualpython/src/common/StringBuilder'

, 'nbextensions/visualpython/src/common/vpCommon'

, 'nbextensions/visualpython/src/common/component/vpSuggestInputText'

, 'nbextensions/visualpython/src/pandas/common/pandasGenerator'

, 'nbextensions/visualpython/src/common/component/vpVarSelector'

, 'nbextensions/visualpython/src/common/kernelApi'

, 'codemirror/lib/codemirror'

, 'codemirror/mode/python/python'

, 'notebook/js/codemirror-ipython'

, 'codemirror/addon/display/placeholder'

, 'codemirror/addon/display/autorefresh'

], function (requirejs, $

, vpConst, sb, vpCommon, vpSuggestInputText, pdGen, vpVarSelector, kernelApi

, codemirror) {

// Temporary constant data

const VP_DS_BTN = 'vp-ds-button';

const VP_DS = 'vp-ds';

const VP_DS_CONTAINER = 'vp-ds-container';

const VP_DS_CLOSE = 'vp-ds-close';

const VP_DS_TITLE = 'vp-ds-title';

const VP_DS_BODY = 'vp-ds-body';

const VP_DS_PREVIEW = 'vp-ds-preview';

const VP_DS_LABEL = 'vp-ds-label';

const VP_DS_PANDAS_OBJECT_BOX = 'vp-ds-pandas-object-box';

const VP_DS_PANDAS_OBJECT = 'vp-ds-pandas-object';

const VP_DS_USE_COPY = 'vp-ds-use-copy';

const VP_DS_SUBSET_TYPE = 'vp-ds-subset-type';

const VP_DS_TO_FRAME = 'vp-ds-to-frame';

/** tab selector */

const VP_DS_TAB_SELECTOR_BOX = 'vp-ds-tab-selector-box';

const VP_DS_TAB_SELECTOR_BTN = 'vp-ds-tab-selector-btn';

/** tab page */

const VP_DS_TAB_PAGE = 'vp-ds-tab-page';

const VP_DS_TAB_PAGE_BOX = 'vp-ds-tab-page-box';

const VP_DS_ROWCOL_SUBSET_TITLE = 'vp-ds-rowcol-subset-title';

const VP_DS_ROWTYPE = 'vp-ds-rowtype';

const VP_DS_ROWTYPE_BOX = 'vp-ds-rowtype-box';

/** indexing timestamp */

const VP_DS_INDEXING_TIMESTAMP = 'vp-ds-indexing-timestamp';

/** select */

const VP_DS_SELECT_CONTAINER = 'vp-ds-select-container';

const VP_DS_SELECT_LEFT = 'vp-ds-select-left';

const VP_DS_SELECT_BTN_BOX = 'vp-ds-select-btn-box';

const VP_DS_SELECT_RIGHT = 'vp-ds-select-right';

const VP_DS_SELECT_BOX = 'vp-ds-select-box';

const VP_DS_SELECT_ITEM = 'vp-ds-select-item';

/** select left */

const VP_DS_SELECT_SEARCH = 'vp-ds-select-search';

const VP_DS_DROPPABLE = 'vp-ds-droppable';

const VP_DS_DRAGGABLE = 'vp-ds-draggable';

/** select btns */

const VP_DS_SELECT_ADD_BTN = 'vp-ds-select-add-btn';

const VP_DS_SELECT_DEL_BTN = 'vp-ds-select-del-btn';

/** slicing box */

const VP_DS_SLICING_BOX = 'vp-ds-slicing-box';

/** row slice */

const VP_DS_ROW_SLICE_START = 'vp-ds-row-slice-start';

const VP_DS_ROW_SLICE_END = 'vp-ds-row-slice-end';

/** row condition */

const VP_DS_CONDITION_TBL = 'vp-ds-cond-tbl';

const VP_DS_BUTTON_ADD_CONDITION = 'vp-ds-btn-add-condition';

/** column selection/slicing */

const VP_DS_COLTYPE = 'vp-ds-coltype';

const VP_DS_COLTYPE_BOX = 'vp-ds-coltype-box';

/** column slice */

const VP_DS_COL_SLICE_START = 'vp-ds-col-slice-start';

const VP_DS_COL_SLICE_END = 'vp-ds-col-slice-end';

/** data view */

const VP_DS_DATA_VIEW_ALL_DIV = 'vp-ds-data-view-all-div';

const VP_DS_DATA_VIEW_ALL = 'vp-ds-data-view-all';

const VP_DS_DATA_VIEW_BOX = 'vp-ds-data-view-box';

const VP_DS_DATA_ERROR_BOX = 'vp-ds-data-error-box';

const VP_DS_DATA_ERROR_BOX_TITLE = 'vp-ds-data-error-box-title';

/** buttons */

const VP_DS_BUTTON_BOX = 'vp-ds-btn-box';

const VP_DS_BUTTON_APPLY = 'vp-ds-btn-apply';

const VP_DS_BUTTON_CANCEL = 'vp-ds-btn-cancel';

/** preview code */

const VP_DS_BUTTON_PREVIEW = 'vp-ds-btn-preview';

const STYLE_REQUIRED_LABEL = 'vp-orange-text';

/**

* @class SubsetEditor

* @param {object} pageThis

* @param {string} targetId

* @constructor

*/

var SubsetEditor = function(pageThis, targetId, useInputVariable=false) {

this.pageThis = pageThis;

this.targetId = targetId;

this.uuid = vpCommon.getUUID();

this.useInputVariable = useInputVariable;

// specify pandas object types

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

this.state = {

viewAll: false,

// all variables list on opening popup

dataList: [],

pandasObject: '',

dataType: '',

isTimestamp: false, // is df.index timestampindex? true / false

useCopy: false,

toFrame: false,

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

tabPage: 'subset', // subset / data

rowType: 'condition', // indexing / slicing / condition

rowList: [],

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

colType: 'indexing', // indexing / slicing

columnList: [],

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

}

this.bindEvent();

this.init();

// set codemirror

this.codepreview = codemirror.fromTextArea($('#vp_previewCode')[0], {

mode: {

name: 'python',

version: 3,

singleLineStringErrors: false

}, // text-cell(markdown cell) set to 'htmlmixed'

height: '100%',

width: '100%',

indentUnit: 4,

matchBrackets: true,

readOnly:true,

autoRefresh: true,

// lineWrapping: false, // text-cell(markdown cell) set to true

// indentWithTabs: true,

theme: "ipython",

extraKeys: {"Enter": "newlineAndIndentContinueMarkdownList"},

scrollbarStyle: "null"

});

this.setPreview('# Code Preview');

// set readonly

if (useInputVariable) {

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

}

this.loadVariables();

}

/**

* Initialize SubsetEditor's variables

* & set button next to input tag

*/

SubsetEditor.prototype.init = function() {

// load css

this.pageThis.loadCss(Jupyter.notebook.base_url + vpConst.BASE_PATH + vpConst.STYLE_PATH + "common/subsetEditor.css");

// Init variables

// set button next to input tag

var buttonTag = new sb.StringBuilder();

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

, VP_DS_BTN, this.uuid, '...');

$(this.pageThis.wrapSelector('#' + this.targetId)).parent().append(buttonTag.toString());

// add popup div

var popupTag = new sb.StringBuilder();

popupTag.appendFormat('<div class="{0} {1}">', VP_DS, this.uuid);

popupTag.appendFormat('<div class="{0}">', VP_DS_CONTAINER);

// title

popupTag.appendFormat('<div class="{0}">{1}</div>'

, VP_DS_TITLE

, 'Subset Editor');

// close button

popupTag.appendFormatLine('<div class="{0}"><i class="{1}"></i></div>'

, VP_DS_CLOSE, 'fa fa-close');

// body start

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

// table1 start

popupTag.appendLine('<table>');

popupTag.appendLine('<thead><colgroup><col width="127px"><col width="*"></colgroup></thead>');

popupTag.appendLine('<tbody>');

// preview code board

// popupTag.appendFormatLine('<tr><td colspan="2"><pre class="{0}"># PREVIEW CODE</pre></td></tr>', VP_DS_PREVIEW);

popupTag.appendFormatLine('<tr><td colspan="2"><div class="{0}"><textarea id="{1}" name="code"></textarea></div></td></tr>'

, VP_DS_PREVIEW, "vp_previewCode");

// pandasObject

popupTag.appendLine('<tr>');

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

, VP_DS_LABEL, 'Variable');

popupTag.appendLine('<td>');

// pandasObject - suggestInputText

// var vpDfSuggest = new vpSuggestInputText.vpSuggestInputText();

// vpDfSuggest.addClass(VP_DS_PANDAS_OBJECT);

// vpDfSuggest.addClass('vp-input');

// vpDfSuggest.setPlaceholder('Select Object');

// vpDfSuggest.setSuggestList(function() { return [] });

// vpDfSuggest.setNormalFilter(false);

// vpDfSuggest.setValue($(this.pageThis.wrapSelector('#' + this.targetId)).val());

// popupTag.appendFormatLine('<td>{0}', vpDfSuggest.toTagString());

popupTag.appendFormatLine('<div style="display:inline-block" class="{0}"><input class="{1} {2}"/></div>'

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

// use copy

popupTag.appendFormatLine('<label><input type="checkbox" class="{0}"/><span>{1}</span></label>', VP_DS_USE_COPY, 'Make a copy');

popupTag.appendLine('</td></tr>');

// subset type

popupTag.appendLine('<tr>');

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

, VP_DS_LABEL, 'Method');

popupTag.appendLine('<td>');

popupTag.appendLine(this.renderSubsetType(this.state.dataType));

// to frame

popupTag.appendFormatLine('<label style="display:none;"><input type="checkbox" class="{0}"/><span>{1}</span></label>', VP_DS_TO_FRAME, 'To DataFrame');

popupTag.appendLine('</td></tr>');

// table1 end

popupTag.appendLine('</tbody></table>');

// divider

popupTag.appendLine('<hr style="margin: 3px;"/>');

// tab selector

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

popupTag.appendFormatLine('<div class="{0} selected" data-page="{1}">{2}</div>', VP_DS_TAB_SELECTOR_BTN, 'subset', 'Subset');

popupTag.appendFormatLine('<div class="{0}" data-page="{1}">{2}</div>', VP_DS_TAB_SELECTOR_BTN, 'data', 'Data');

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

// tab page 1 start

popupTag.appendFormatLine('<div class="{0} {1}">', VP_DS_TAB_PAGE, 'subset');

// row box start

popupTag.appendFormatLine('<div class="{0} {1}">', VP_DS_TAB_PAGE_BOX, 'subset-row');

// row type

popupTag.appendFormatLine('<div><label class="{0}">{1}</label></td>'

, VP_DS_ROWCOL_SUBSET_TITLE, 'Row Subset');

popupTag.appendLine(this.renderRowSubsetType(this.state.subsetType)); // VP_DS_ROWTYPE

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

// row indexing

popupTag.appendFormatLine('<div class="{0} {1}">', VP_DS_ROWTYPE_BOX, 'indexing');

// row indexing list

popupTag.appendLine(this.renderRowIndexing(this.state.rowList));

popupTag.appendLine('</div>'); // VP_DS_ROWTYPE_BOX

// row slicing

popupTag.appendFormatLine('<div class="{0} {1}" style="display:none;">', VP_DS_ROWTYPE_BOX, 'slicing');

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

// , '', 'Slice');

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

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

popupTag.appendLine(this.renderRowSlicingBox(this.state.rowList));

popupTag.appendLine('</div>'); // VP_DS_ROWTYPE_BOX

// condition box start

popupTag.appendFormatLine('<div class="{0} {1} {2}" style="display:none;">', VP_DS_ROWTYPE_BOX, 'condition', 'no-selection');

// row condition

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

// , '', 'Conditional Subset');

popupTag.appendFormatLine('{0}', this.renderColumnConditionList(this.state.columnList));

// condition box end

popupTag.appendLine('</div>'); // VP_DS_ROWTYPE_BOX

// timestamp box start

popupTag.appendFormatLine('<div class="{0} {1} {2}" style="display:none;">', VP_DS_ROWTYPE_BOX, 'timestamp', 'no-selection');

// timestamp input tag

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

, VP_DS_INDEXING_TIMESTAMP, 'vp-input', 'Timestamp Index');

popupTag.appendLine('</div>'); // VP_DS_ROWTYPE_BOX

// row box end

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

// column box start

popupTag.appendFormatLine('<div class="{0} {1}">', VP_DS_TAB_PAGE_BOX, 'subset-column');

// column type

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

, VP_DS_ROWCOL_SUBSET_TITLE, 'Column Subset');

popupTag.appendLine(this.renderColumnSubsetType(this.state.subsetType)); // VP_DS_COLTYPE

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

// column indexing

popupTag.appendFormatLine('<div class="{0} {1}">', VP_DS_COLTYPE_BOX, 'indexing');

// column indexing list

popupTag.appendLine(this.renderColumnIndexing(this.state.columnList));

popupTag.appendLine('</div>'); // VP_DS_COLTYPE_BOX

// column slicing

popupTag.appendFormatLine('<div class="{0} {1}" style="display:none;">', VP_DS_COLTYPE_BOX, 'slicing');

popupTag.appendLine(this.renderColumnSlicingBox(this.state.columnList));

popupTag.appendLine('</div>'); // VP_DS_COLTYPE_BOX

// column box end

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

// tab page 1 end

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

// tab page 2 start

popupTag.appendFormatLine('<div class="{0} {1}" style="display:none;">', VP_DS_TAB_PAGE, 'data');

// data view type

popupTag.appendFormatLine('<div class="{0}"><label><input type="checkbox" class="{1}"/><span>{2}</span></label></div>'

, VP_DS_DATA_VIEW_ALL_DIV, VP_DS_DATA_VIEW_ALL, "view all");

// data view

popupTag.appendLine(this.renderDataPage(''));

// tab page 2 end

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

// apply button

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

// popupTag.appendFormatLine('<button type="button" class="{0}">{1}</button>'

// , VP_DS_BUTTON_PREVIEW, 'Preview');

popupTag.appendFormatLine('<button type="button" class="{0}">{1}</button>'

, VP_DS_BUTTON_CANCEL, 'Cancel');

popupTag.appendFormatLine('<button type="button" class="{0}">{1}</button>'

, VP_DS_BUTTON_APPLY, 'Apply');

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

// body end

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

popupTag.append('</div>');

popupTag.append('</div>');

// $(vpCommon.formatString("#{0}", vpConst.VP_CONTAINER_ID)).append(popupTag.toString());

$('#vp-wrapper').append(popupTag.toString());

$(vpCommon.formatString(".{0}.{1}", VP_DS, this.uuid)).hide();

}

SubsetEditor.prototype.getAllowSubsetTypes = function() {

return this.pdObjTypes;

}

/**

* Wrap Selector for data selector popup with its uuid

* @param {string} query

*/

SubsetEditor.prototype.wrapSelector = function(query) {

return vpCommon.formatString('.{0}.{1} {2}', VP_DS, this.uuid, query);

}

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

SubsetEditor.prototype.renderSubsetType = function(dataType) {

var subsetType = this.state.subsetType;

var tag = new sb.StringBuilder();

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

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');

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

return tag.toString();

}

SubsetEditor.prototype.renderRowSubsetType = function(subsetType, timestamp=false) {

var tag = new sb.StringBuilder();

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');

}

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

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

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>');

return tag.toString();

}

SubsetEditor.prototype.renderColumnSubsetType = function(subsetType) {

var tag = new sb.StringBuilder();

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>');

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

*/

SubsetEditor.prototype.renderRowIndexing = function(rowList) {

var that = this;

var tag = new sb.StringBuilder();

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 vpSuggestInputText.vpSuggestInputText();

vpSearchSuggest.addClass(VP_DS_SELECT_SEARCH);

vpSearchSuggest.setPlaceholder('Search Row');

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

vpSearchSuggest.setSelectEvent(function(value) {

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

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

});

vpSearchSuggest.setNormalFilter(true);

tag.appendLine(vpSearchSuggest.toTagString());

tag.appendLine(this.renderRowSelectionBox(rowList));

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

// row select - buttons

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

tag.appendFormatLine('<button type="button" class="{0} {1}">{2}</button>', VP_DS_SELECT_ADD_BTN, 'select-row', '<i class="fa fa-arrow-right"></i>');

tag.appendFormatLine('<button type="button" class="{0} {1}">{2}</button>', VP_DS_SELECT_DEL_BTN, 'select-row', '<i class="fa fa-arrow-left"></i>');

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, 'no-selection');

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

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

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

return tag.toString();

}

/**

* Render row list box

* @param {Array} rowList

*/

SubsetEditor.prototype.renderRowSelectionBox = function(rowList) {

var tag = new sb.StringBuilder();

tag.appendFormatLine('<div class="{0} {1} {2} {3}">', VP_DS_SELECT_BOX, 'left', VP_DS_DROPPABLE, '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

return tag.toString();

}

/**

* Render row slicing box

* - slicing start/end with suggestInput

* @param {Array} rowList

*/

SubsetEditor.prototype.renderRowSlicingBox = function(rowList) {

var tag = new sb.StringBuilder();

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

var vpRowStart = new vpSuggestInputText.vpSuggestInputText();

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(value);

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

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

});

vpRowStart.setNormalFilter(false);

var vpRowEnd = new vpSuggestInputText.vpSuggestInputText();

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(value);

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

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

});

vpRowEnd.setNormalFilter(false);

tag.appendLine(vpRowStart.toTagString());

tag.appendLine(vpRowEnd.toTagString());

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

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

*/

SubsetEditor.prototype.renderColumnIndexing = function(colList) {

var that = this;

var tag = new sb.StringBuilder();

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 vpSuggestInputText.vpSuggestInputText();

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.appendLine(this.renderColumnSelectionBox(colList));

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

// col select - buttons

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

tag.appendFormatLine('<button type="button" class="{0} {1}">{2}</button>', VP_DS_SELECT_ADD_BTN, 'select-col', '<i class="fa fa-arrow-right"></i>');

tag.appendFormatLine('<button type="button" class="{0} {1}">{2}</button>', VP_DS_SELECT_DEL_BTN, 'select-col', '<i class="fa fa-arrow-left"></i>');

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, 'no-selection');

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

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

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

return tag.toString();

}

/**

* Render column list box

* @param {Array} colList

*/

SubsetEditor.prototype.renderColumnSelectionBox = function(colList) {

var tag = new sb.StringBuilder();

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

// get col data and make draggable items

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

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

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

});

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

return tag.toString();

}

/**

* Render column slicing box

* - slicing start/end with suggestInput

* @param {Array} colList

*/

SubsetEditor.prototype.renderColumnSlicingBox = function(colList) {

var tag = new sb.StringBuilder();

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 vpSuggestInputText.vpSuggestInputText();

vpColStart.addClass(VP_DS_COL_SLICE_START);

vpColStart.addClass('vp-input m');

vpColStart.setPlaceholder('start');

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

vpColStart.setSelectEvent(function(value, item) {

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

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

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

});

vpColStart.setNormalFilter(false);

var vpColEnd = new vpSuggestInputText.vpSuggestInputText();

vpColEnd.addClass(VP_DS_COL_SLICE_END);

vpColEnd.addClass('vp-input m');

vpColEnd.setPlaceholder('end');

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

vpColEnd.setSelectEvent(function(value, item) {

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

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

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

});

vpColEnd.setNormalFilter(false);

tag.appendLine(vpColStart.toTagString());

tag.appendLine(vpColEnd.toTagString());

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

return tag.toString();

}

/**

* Render Row Condition List with columns

* - column name

* - operator

* - condition string

* - and/or connector between prev/next conditions

* @param {Array} colList

*/

SubsetEditor.prototype.renderColumnConditionList = function(colList) {

var tag = new sb.StringBuilder();

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

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(this.renderConditionVariableInput(varList, this.state.pandasObject, this.state.dataType));

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

// tag.appendLine('<input type="text" class="vp-input m vp-col-list" placeholder="Column Name"/>');

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

// tag.appendLine('<input type="text" class="vp-input s vp-oper-list" placeholder="Oper"/>');

// var vpOperSuggest = new vpSuggestInputText.vpSuggestInputText();

// vpOperSuggest.addClass('vp-input s vp-oper-list');

// vpOperSuggest.setPlaceholder("Oper");

// vpOperSuggest.setSuggestList(function() { return ['==', '!=', 'in', 'not in', '<', '<=', '>', '>=']; });

// vpOperSuggest.setSelectEvent(function(value) {

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

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

// });

// vpOperSuggest.setNormalFilter(false);

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

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

var operList = ['', '==', '!=', 'in', 'not in', '<', '<=', '>', '>=']

operList.forEach(oper => {

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

});

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

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>');

tag.appendLine('<tr>');

// tag.appendLine('<td colspan="4"><div class="vp-icon-btn vp-add-col" title="Add Condition"></i></td>');

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>');

return tag.toString();

}

SubsetEditor.prototype.renderConditionVariableInput = function(varList, defaultValue, defaultValuesType) {

// var vpVarSuggest = new vpSuggestInputText.vpSuggestInputText();

// vpVarSuggest.addClass('vp-input m vp-cond-var');

// vpVarSuggest.addAttribute('data-type', defaultValuesType);

// vpVarSuggest.setPlaceholder('Variable');

// vpVarSuggest.setSuggestList(function() { return varList; });

// vpVarSuggest.setValue(defaultValue);

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

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

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

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

// });

// vpVarSuggest.setNormalFilter(true);

// return vpVarSuggest.toTagString();

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

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

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

varSelector.setValue(defaultValue);

return varSelector.render();

}

SubsetEditor.prototype.renderConditionColumnInput = function(colList) {

// var vpColSuggest = new vpSuggestInputText.vpSuggestInputText();

// vpColSuggest.addClass('vp-input m vp-col-list');

// vpColSuggest.setPlaceholder('Column Name');

// vpColSuggest.setSuggestList(function() { return colList });

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

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

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

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

// });

// vpColSuggest.setNormalFilter(false);

// return vpColSuggest.toTagString();

var tag = new sb.StringBuilder();

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

colList.forEach(col => {

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

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

});

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

return tag.toString();

}

SubsetEditor.prototype.renderConditionCondInput = function(category) {

var vpCondSuggest = new vpSuggestInputText.vpSuggestInputText();

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

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

vpCondSuggest.setPlaceholder("Categorical Dtype");

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

vpCondSuggest.setSelectEvent(function(value) {

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

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

});

vpCondSuggest.setNormalFilter(false);

} else {

}

return vpCondSuggest.toTagString();

}

/**

* Render Data Tab Page

* @param {String} renderedText

*/

SubsetEditor.prototype.renderDataPage = function(renderedText, isHtml = true) {

var tag = new sb.StringBuilder();

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

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

if (isHtml) {

tag.appendLine(renderedText);

} else {

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

}

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

return 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'])

*/

SubsetEditor.prototype.loadDataPage = function() {

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.generateCode();

}

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

Jupyter.notebook.kernel.execute(

code,

{

iopub: {

output: function(msg) {

if (msg.content.data) {

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

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

if (htmlText != 'undefined') {

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

return that.renderDataPage(htmlText);

});

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

// plain text as code

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

return that.renderDataPage(codeText, false);

});

} else {

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

return that.renderDataPage('');

});

}

} else {

var errorContent = new sb.StringBuilder();

if (msg.content.ename) {

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

errorContent.appendLine('<i class="fa fa-exclamation-triangle"></i>');

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

, VP_DS_DATA_ERROR_BOX_TITLE, msg.content.ename);

if (msg.content.evalue) {

// errorContent.appendLine('<br/>');

errorContent.appendFormatLine('<pre>{0}</pre>', msg.content.evalue.split('\\n').join('<br/>'));

}

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

}

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

return that.renderDataPage(errorContent);

});

}

}

}

},

{ silent: false, store_history: true, stop_on_error: true }

);

}

/**

* Load pandasObject

* - search available pandasObject list

* - render on VP_DS_PANDAS_OBJECT

*/

SubsetEditor.prototype.loadVariables = function() {

var that = this;

var types = that.pdObjTypes; //[]; //['DataFrame', 'Series'];

if (this.useInputVariable) {

var prevValue = $(this.pageThis.wrapSelector('#' + this.targetId)).val();

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

// get type of variable

kernelApi.executePython(vpCommon.formatString('_vp_print(_vp_get_type({0}))', prevValue), function(result) {

try {

var varType = JSON.parse(result);

that.state.pandasObject = prevValue;

that.state.dataType = varType;

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

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

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

});

that.reloadSubsetData();

} catch {

}

});

} else {

pdGen.vp_searchVarList(types, function (result) {

var varList = JSON.parse(result);

varList = varList.map(function(v) {

return { label: v.varName + ' (' + v.varType + ')', value: v.varName, dtype: v.varType };

});

that.state.dataList = varList;

// var pdObjects = varList.filter(x => that.pdObjTypes.includes(x.dtype));

// 1. Target Variable

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

// var vpDfSuggest = new vpSuggestInputText.vpSuggestInputText();

// vpDfSuggest.addClass(VP_DS_PANDAS_OBJECT);

// vpDfSuggest.addClass('vp-input');

// vpDfSuggest.setPlaceholder('Select Object');

// vpDfSuggest.setSuggestList(function() { return pdObjects; });

// vpDfSuggest.setNormalFilter(false);

// vpDfSuggest.setSelectEvent(function(selectedValue, item) {

// // trigger change

// $(that.wrapSelector('.' + VP_DS_PANDAS_OBJECT)).val(selectedValue);

// that.state.dataType = item.dtype;

// that.reloadSubsetData();

// });

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

// return vpDfSuggest.toTagString();

// });

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

var pdVarSelect = new vpVarSelector(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();

});

that.reloadSubsetData();

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

});

}

}

SubsetEditor.prototype.loadSubsetType = function(dataType) {

var that = this;

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

return that.renderSubsetType(dataType);

});

}

SubsetEditor.prototype.loadRowColumnSubsetType = function(subsetType, timestamp = false) {

var that = this;

// get current subset type of row & column

var rowSubset = this.state.rowType;

var colSubset = this.state.colType;

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

return that.renderRowSubsetType(subsetType, timestamp);

});

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

return 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

*/

SubsetEditor.prototype.loadColumnList = function(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 + '',

};

})

}

this.state.columnList = columnList;

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

// column selection

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

return that.renderColumnIndexing(columnList);

});

// column slicing

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

return that.renderColumnSlicingBox(columnList);

});

// column condition

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

return that.renderColumnConditionList(columnList);

});

}

/**