this.pageThis = pageThis;

this.targetId = targetId;

this.uuid = 'u' + vpCommon.getUUID();

this.useInputVariable = useInputVariable;

// use Run/Add cell

this.useCell = true;

// specify pandas object types

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

this.stateLoaded = false;

// render button

this.renderButton();

var that = this;

// open popup

$(vpCommon.formatString('.{0}.{1}', VP_DS_BTN, this.uuid)).on('click', function(event) {

if (!$(this).hasClass('disabled')) {

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

that.open();

}

});

// load css

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

this.state = {

viewAll: false,

// all variables list on opening popup

dataList: [],

allocateTo: '',

pandasObject: '',

dataType: '',

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

useCopy: false,

toFrame: false,

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

tabPage: 'subset', // subset / data

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

rowList: [],

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

rowPageDom: '',

colType: 'indexing', // indexing / slicing

columnList: [],

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

colPageDom: ''

}

if (state) {

this.state = {

...this.state,

...state

};

}

this.codepreview = undefined;

this.cmpreviewall = undefined;

this.previewOpened = false;

this.dataviewOpened = false;

// render popup div

this.render();

this.bindEvent();

// set readonly

if (this.useInputVariable) {

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

}

this.loadVariables();

// set button next to input tag

var buttonTag = new sb.StringBuilder();

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

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

if (this.pageThis) {

$(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}"><img src="{1}"/></div>'

, VP_DS_CLOSE, '/nbextensions/visualpython/resource/close_big.svg');

// body start

popupTag.appendFormatLine('<div class="{0} {1}">', VP_DS_BODY, 'vp-apiblock-scrollbar');

// 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}">{2}</label></td>'

, VP_DS_LABEL, 'vp-orange-text', 'Variable');

popupTag.appendLine('<td>');

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}">{2}</label></td>'

, VP_DS_LABEL, 'vp-orange-text', '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>');

// allocate to

popupTag.appendLine('<tr>');

popupTag.appendFormatLine('<td><label class="{0}">{1}</label></td>', VP_DS_LABEL, 'Allocate to');

popupTag.appendFormatLine('<td><input type="text" class="{0} {1}" placeholder="{2}"/></td>', 'vp-input', VP_DS_ALLOCATE_TO, 'New variable name');

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

// table1 end

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

// 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} {3}" style="display:none;">', VP_DS_ROWTYPE_BOX, 'condition', 'vp-apiblock-scrollbar', '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>');

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

popupTag.appendLine('</div>'); // end of body

// Info Box

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

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

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

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

popupTag.appendLine('</div>'); // end of VP_DS_INFO_CONTENT

popupTag.appendLine('</div>'); // end of VP_DS_INFO

// preview box

popupTag.appendFormatLine('<div class="{0} {1}">', VP_DS_PREVIEW_BOX, 'vp-apiblock-scrollbar');

popupTag.appendFormatLine('<textarea id="{0}" name="code"></textarea>', 'vp_codePreview');

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

// button box

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

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

, 'vp-button', 'vp-ds-btn', VP_DS_BUTTON_PREVIEW, 'Code view');

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

, 'vp-button', 'vp-ds-btn', VP_DS_BUTTON_DATAVIEW, 'Data view');

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

, 'vp-button cancel', 'vp-ds-btn', VP_DS_BUTTON_CANCEL, 'Cancel');

if (this.useCell) {

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

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

, 'vp-button activated', VP_DS_BUTTON_RUN, 'Apply to Board & Run Cell', 'Run');

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

, 'vp-button activated', VP_DS_BUTTON_DETAIL, '/nbextensions/visualpython/resource/arrow_short_up.svg');

popupTag.appendFormatLine('<div class="{0} {1}">', VP_DS_DETAIL_BOX, 'vp-cursor');

popupTag.appendFormatLine('<div class="{0}" data-type="{1}" title="{2}">{3}</div>', VP_DS_DETAIL_ITEM, 'apply', 'Apply to Board', 'Apply');

popupTag.appendFormatLine('<div class="{0}" data-type="{1}" title="{2}">{3}</div>', VP_DS_DETAIL_ITEM, 'add', 'Apply to Board & Add Cell', 'Add');

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

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

} else {

popupTag.appendFormatLine('<button type="button" class="{0} {1} {2}" data-type="{3}" title="{4}">{5}</button>'

, 'vp-button', VP_DS_BUTTON_APPLY, VP_DS_DETAIL_ITEM, 'apply', 'Apply to Board', 'Apply');

}

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

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

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

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

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

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

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}" title="{2}">{3}</button>'

, VP_DS_SELECT_ADD_ALL_BTN, 'select-row', 'Add all items', '<img src="/nbextensions/visualpython/resource/arrow_right_double.svg"/></i>');

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

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

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

, VP_DS_SELECT_DEL_ALL_BTN, 'select-row', 'Remove all items', '<img src="/nbextensions/visualpython/resource/arrow_left_double.svg"/>');

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

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

var that = this;

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

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

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

that.generateCode();

});

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

return tag.toString();

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}" title="{2}">{3}</button>'

, VP_DS_SELECT_ADD_ALL_BTN, 'select-col', 'Add all items', '<img src="/nbextensions/visualpython/resource/arrow_right_double.svg"/></i>');

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

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

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

, VP_DS_SELECT_DEL_ALL_BTN, 'select-col', 'Remove all items', '<img src="/nbextensions/visualpython/resource/arrow_left_double.svg"/>');

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

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) => {

// col.array parsing

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

// render column box

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' + colInfo, col.label);

});

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

return tag.toString();

var that = this;

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

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

that.generateCode();

});

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

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

that.generateCode();

});

vpColEnd.setNormalFilter(false);

tag.appendLine(vpColStart.toTagString());

tag.appendLine(vpColEnd.toTagString());

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

return tag.toString();

var tag = new sb.StringBuilder();

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

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

var tag = new sb.StringBuilder();

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

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

return tag.toString();

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

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

// .index

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

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

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