- Visual Python 1.1.13
+ Visual Python 1.1.14
diff --git a/src/api_block/init.js b/src/api_block/init.js
index 0d87f77e..012f4c0a 100644
--- a/src/api_block/init.js
+++ b/src/api_block/init.js
@@ -130,7 +130,7 @@ define([
/** Apps menu 생성 */
var appsList = [
'import', 'file', 'variable', 'snippets', 'frame', 'subset', 'instance', 'groupby',
- 'merge', 'reshape', 'chart', 'markdown', 'pdf', 'profiling'
+ 'bind', 'reshape', 'chart', 'markdown', 'pdf', 'profiling'
];
appsList.forEach(menu => {
var app = new CreateAppsBtn(blockContainer, menu);
@@ -378,7 +378,27 @@ define([
blockContainer.addNodeBlock(createdBlock);
blockContainer.resetBlockList();
blockContainer.reRenderAllBlock_asc();
- }
+ } else if (title == "Background") {
+ // 1. add code block
+ // create block as group block
+ createdBlock = blockContainer.createBlock(BLOCK_CODELINE_TYPE.CODE, null, null, true);
+ // set code
+ createdBlock.setState({
+ [STATE_codeLine]: code
+ });
+ createdBlock.writeCode(code);
+ createdBlock.apply();
+ if (isFirstBlock == true) {
+ // if it is first block, set as ROOT
+ createdBlock.setDirection(BLOCK_DIRECTION.ROOT);
+ } else {
+ var lastBottomBlock = blockContainer.getRootToLastBottomBlock();
+ lastBottomBlock.appendBlock(createdBlock, BLOCK_DIRECTION.DOWN);
+ }
+ blockContainer.addNodeBlock(createdBlock);
+ blockContainer.resetBlockList();
+ blockContainer.reRenderAllBlock_asc();
+ }
}
// 2. add cell and run cell
diff --git a/src/common/component/vpColumnSelector.js b/src/common/component/vpMultiSelector.js
similarity index 70%
rename from src/common/component/vpColumnSelector.js
rename to src/common/component/vpMultiSelector.js
index 118f37f7..b01916fe 100644
--- a/src/common/component/vpColumnSelector.js
+++ b/src/common/component/vpMultiSelector.js
@@ -1,7 +1,7 @@
/*
* Project Name : Visual Python
* Description : GUI-based Python code generator
- * File Name : vpColumnSelector.js
+ * File Name : vpMultiSelector.js
* Author : Black Logic
* Note : Groupby app
* License : GNU GPLv3 with Visual Python special exception
@@ -42,46 +42,118 @@ define([
//========================================================================
- // [CLASS] ColumnSelector
+ // [CLASS] MultiSelector
//========================================================================
- class ColumnSelector {
+ class MultiSelector {
/**
*
* @param {string} frameSelector query for parent component
- * @param {string} dataframe dataframe variable name
- * @param {Array} selectedList
- * @param {Array} includeList
+ * @param {Object} config parent:[], selectedList=[], includeList=[]
*/
- constructor(frameSelector, dataframe, selectedList=[], includeList=[]) {
+ constructor(frameSelector, config) {
this.uuid = 'u' + vpCommon.getUUID();
this.frameSelector = frameSelector;
- this.dataframe = dataframe;
+
+ // configuration
+ this.config = config;
+
+ var { mode, type, parent, selectedList=[], includeList=[], excludeList=[] } = config;
+ this.mode = mode;
+ this.parent = parent;
this.selectedList = selectedList;
this.includeList = includeList;
- this.columnList = [];
+ this.excludeList = excludeList;
+
+ this.dataList = [];
this.pointer = { start: -1, end: -1 };
var that = this;
- kernelApi.getColumnList(dataframe, function(result) {
- var colList = JSON.parse(result);
- colList = colList.map(function(x) {
- return {
- ...x,
- value: x.label,
- code: x.value
- };
- });
- if (includeList && includeList.length > 0) {
- that.columnList = colList.filter(col => includeList.includes(col.code));
- } else {
- that.columnList = colList;
+
+ switch (mode) {
+ case 'columns':
+ this._getColumnList(parent, function(dataList) {
+ that._executeCallback(dataList);
+ });
+ break;
+ case 'variable':
+ this._getVariableList(type, function(dataList) {
+ that._executeCallback(dataList);
+ })
+ break;
+ }
+ }
+
+ _executeCallback(dataList) {
+ if (this.includeList && this.includeList.length > 0) {
+ dataList = dataList.filter(data => this.includeList.includes(data.code));
+ }
+ if (this.excludeList && this.excludeList.length > 0) {
+ dataList = dataList.filter(data => !this.excludeList.includes(data.code));
+ }
+ this.dataList = dataList;
+
+ // load
+ this.load();
+ }
+
+ _getVariableList(type, callback) {
+ kernelApi.searchVarList(type, function(result) {
+ try {
+ var dataList = JSON.parse(result);
+ dataList = dataList.map(function(x, idx) {
+ return {
+ ...x,
+ value: x.varName,
+ code: x.varName,
+ type: x.varType,
+ location: idx
+ };
+ });
+ callback(dataList);
+ } catch (e) {
+ callback([]);
}
- that.load();
- that.bindEvent();
- that.bindDraggable();
});
}
+
+ _getColumnList(parent, callback) {
+ if (parent && parent.length > 1) {
+ kernelApi.getCommonColumnList(parent, function(result) {
+ try {
+ var colList = JSON.parse(result);
+ colList = colList.map(function(x) {
+ return {
+ ...x,
+ value: x.label,
+ code: x.value,
+ type: x.dtype
+ };
+ });
+ callback(colList);
+ } catch (e) {
+ callback([]);
+ }
+ });
+ } else {
+ kernelApi.getColumnList(parent, function(result) {
+ try {
+ var colList = JSON.parse(result);
+ colList = colList.map(function(x) {
+ return {
+ ...x,
+ value: x.label,
+ code: x.value,
+ type: x.dtype
+ };
+ });
+ callback(colList);
+ } catch (e) {
+ callback([]);
+ }
+ });
+ }
+ }
_wrapSelector(query='') {
return vpCommon.formatString('.{0} {1}', this.uuid, query);
@@ -89,23 +161,25 @@ define([
load() {
$(vpCommon.wrapSelector(this.frameSelector)).html(this.render());
- vpCommon.loadCssForDiv(this._wrapSelector(), Jupyter.notebook.base_url + vpConst.BASE_PATH + vpConst.STYLE_PATH + 'common/component/columnSelector.css');
+ vpCommon.loadCssForDiv(this._wrapSelector(), Jupyter.notebook.base_url + vpConst.BASE_PATH + vpConst.STYLE_PATH + 'common/component/multiSelector.css');
+ this.bindEvent();
+ this.bindDraggable();
}
- getColumnList() {
+ getDataList() {
var colTags = $(this._wrapSelector('.' + APP_SELECT_ITEM + '.added:not(.moving)'));
- var colList = [];
+ var dataList = [];
if (colTags.length > 0) {
for (var i = 0; i < colTags.length; i++) {
- var colName = $(colTags[i]).data('colname');
- var colDtype = $(colTags[i]).data('dtype');
- var colCode = $(colTags[i]).data('code');
- if (colCode) {
- colList.push({ name: colName, dtype: colDtype, code: colCode});
+ var name = $(colTags[i]).data('name');
+ var type = $(colTags[i]).data('type');
+ var code = $(colTags[i]).data('code');
+ if (code) {
+ dataList.push({ name: name, type: type, code: code});
}
}
}
- return colList;
+ return dataList;
}
render() {
@@ -113,14 +187,14 @@ define([
var tag = new sb.StringBuilder();
tag.appendFormatLine('
'); // end of vp-popup-tab apply
content.appendLine('', APP_SELECT_CONTAINER, this.uuid);
- // col select - left
+ // select - left
tag.appendFormatLine('
'); // APP_SELECT_CONTAINER
return tag.toString();
}
- renderColumnSelectionBox(colList) {
+ renderSelectionBox(dataList) {
var tag = new sb.StringBuilder();
tag.appendFormatLine('', APP_SELECT_LEFT);
// tag.appendFormatLine(''
// , APP_SELECT_SEARCH, 'Search Column');
var vpSearchSuggest = new vpSuggestInputText.vpSuggestInputText();
vpSearchSuggest.addClass(APP_SELECT_SEARCH);
- vpSearchSuggest.setPlaceholder('Search Column');
- vpSearchSuggest.setSuggestList(function() { return that.columnList; });
+ vpSearchSuggest.setPlaceholder('Search ' + this.mode);
+ vpSearchSuggest.setSuggestList(function() { return that.dataList; });
vpSearchSuggest.setSelectEvent(function(value) {
$(this.wrapSelector()).val(value);
$(this.wrapSelector()).trigger('change');
@@ -129,54 +203,64 @@ define([
tag.appendLine(vpSearchSuggest.toTagString());
tag.appendFormatLine('')
- var selectionList = this.columnList.filter(col => !that.selectedList.includes(col.code));
- tag.appendLine(this.renderColumnSelectionBox(selectionList));
+ var selectionList = this.dataList.filter(data => !that.selectedList.includes(data.code));
+ tag.appendLine(this.renderSelectionBox(selectionList));
tag.appendLine('
'); // APP_SELECT_LEFT
- // col select - buttons
+ // select - buttons
tag.appendFormatLine('', APP_SELECT_BTN_BOX);
tag.appendFormatLine(''
- , APP_SELECT_ADD_ALL_BTN, 'Add all columns', '
');
+ , APP_SELECT_ADD_ALL_BTN, 'Add all items', '');
tag.appendFormatLine(''
- , APP_SELECT_ADD_BTN, 'Add selected columns', '
');
+ , APP_SELECT_ADD_BTN, 'Add selected items', '');
tag.appendFormatLine(''
- , APP_SELECT_DEL_BTN, 'Remove selected columns', '
');
+ , APP_SELECT_DEL_BTN, 'Remove selected items', '');
tag.appendFormatLine(''
- , APP_SELECT_DEL_ALL_BTN, 'Remove all columns', '
');
+ , APP_SELECT_DEL_ALL_BTN, 'Remove all items', '');
tag.appendLine('
'); // APP_SELECT_BTNS
- // col select - right
+ // select - right
tag.appendFormatLine('');
+ , APP_SELECT_ADD_ALL_BTN, 'Add all items', '');
tag.appendFormatLine(''
- , APP_SELECT_ADD_BTN, 'Add selected columns', '');
+ , APP_SELECT_ADD_BTN, 'Add selected items', '');
tag.appendFormatLine(''
- , APP_SELECT_DEL_BTN, 'Remove selected columns', '');
+ , APP_SELECT_DEL_BTN, 'Remove selected items', '');
tag.appendFormatLine(''
- , APP_SELECT_DEL_ALL_BTN, 'Remove all columns', '');
+ , APP_SELECT_DEL_ALL_BTN, 'Remove all items', '');
tag.appendLine('', APP_SELECT_RIGHT);
- var selectedList = this.columnList.filter(col => that.selectedList.includes(col.code));
- tag.appendLine(this.renderColumnSelectedBox(selectedList));
+ var selectedList = this.dataList.filter(data => that.selectedList.includes(data.code));
+ tag.appendLine(this.renderSelectedBox(selectedList));
tag.appendLine('
'); // APP_SELECT_RIGHT
tag.appendLine('', APP_SELECT_BOX, 'left', APP_DROPPABLE, 'no-selection');
- // get col data and make draggable items
- colList && colList.forEach((col, idx) => {
- // col.array parsing
- var colInfo = vpCommon.safeString(col.array);
- // render column box
- tag.appendFormatLine('
'); // APP_SELECT_BOX
return tag.toString();
}
- renderColumnSelectedBox(colList) {
+ renderSelectedBox(dataList) {
var tag = new sb.StringBuilder();
tag.appendFormatLine('{7}
'
- , APP_SELECT_ITEM, APP_DRAGGABLE, col.location, col.value, col.dtype, col.code, col.label + ': \n' + colInfo, col.label);
+ // get data and make draggable items
+ dataList && dataList.forEach((data, idx) => {
+ // for column : data.array parsing
+ var info = vpCommon.safeString(data.array);
+ if (info) {
+ info = data.value + ':\n';
+ } else {
+ info = '';
+ }
+ // render item box
+ tag.appendFormatLine('{7}
'
+ , APP_SELECT_ITEM, APP_DRAGGABLE, data.location, data.value, data.type, data.code, info, data.value);
});
tag.appendLine('', APP_SELECT_BOX, 'right', APP_DROPPABLE, 'no-selection');
- // get col data and make draggable items
- colList && colList.forEach((col, idx) => {
- // col.array parsing
- var colInfo = vpCommon.safeString(col.array);
- // render column box
- tag.appendFormatLine('
'); // APP_SELECT_BOX
return tag.toString();
@@ -184,22 +268,22 @@ define([
bindEvent() {
var that = this;
- // item indexing - search columns
+ // item indexing - search
$(this._wrapSelector('.' + APP_SELECT_SEARCH)).on('change', function(event) {
var searchValue = $(this).val();
- // filter added columns
+ // filter added items
var addedTags = $(that._wrapSelector('.' + APP_SELECT_RIGHT + ' .' + APP_SELECT_ITEM + '.added'));
- var addedColumnList = [];
+ var addedList = [];
for (var i = 0; i < addedTags.length; i++) {
var value = $(addedTags[i]).attr('data-colname');
- addedColumnList.push(value);
+ addedList.push(value);
}
- var filteredColumnList = that.columnList.filter(x => x.value.includes(searchValue) && !addedColumnList.includes(x.value));
+ var filteredList = that.dataList.filter(x => x.value.includes(searchValue) && !addedList.includes(x.value));
- // column indexing
+ // items indexing
$(that._wrapSelector('.' + APP_SELECT_BOX + '.left')).replaceWith(function() {
- return that.renderColumnSelectionBox(filteredColumnList);
+ return that.renderSelectionBox(filteredList);
});
// draggable
@@ -390,7 +474,7 @@ define([
}
}
- return ColumnSelector;
+ return MultiSelector;
});
/* End of file */
\ No newline at end of file
diff --git a/src/common/constant.js b/src/common/constant.js
index cacf0795..499832fb 100644
--- a/src/common/constant.js
+++ b/src/common/constant.js
@@ -48,7 +48,7 @@ define ([
* toolbar btn properties
*/
const TOOLBAR_BTN_INFO = {
- HELP: "Visual Python 1.1.13"
+ HELP: "Visual Python 1.1.14"
// , ICON: "fa-angellist"
, ICON: "vp-main-icon"
, ID: "vpBtnToggle"
diff --git a/src/common/kernelApi.js b/src/common/kernelApi.js
index 52ab23a7..9b9ac769 100644
--- a/src/common/kernelApi.js
+++ b/src/common/kernelApi.js
@@ -69,6 +69,14 @@ define([
});
}
+ var getCommonColumnList = function(dataframeList, callback) {
+ executePython(
+ vpCommon.formatString('_vp_print(_vp_get_multi_columns_list([{0}]))', dataframeList.join(','))
+ , function(result) {
+ callback(result);
+ });
+ }
+
var getRowList = function(dataframe, callback) {
executePython(
vpCommon.formatString('_vp_print(_vp_get_rows_list({0}))', dataframe)
@@ -87,6 +95,7 @@ define([
executePython: executePython,
searchVarList: searchVarList,
getColumnList: getColumnList,
+ getCommonColumnList: getCommonColumnList,
getRowList: getRowList,
getProfilingList: getProfilingList
}
diff --git a/src/common/vpBind.js b/src/common/vpBind.js
new file mode 100644
index 00000000..2c7a0482
--- /dev/null
+++ b/src/common/vpBind.js
@@ -0,0 +1,1036 @@
+/*
+ * Project Name : Visual Python
+ * Description : GUI-based Python code generator
+ * File Name : vpBind.js
+ * Author : Black Logic
+ * Note : Bind app
+ * License : GNU GPLv3 with Visual Python special exception
+ * Date : 2021. 10. 05
+ * Change Date :
+ */
+
+//============================================================================
+// Define constant
+//============================================================================
+define([
+ 'nbextensions/visualpython/src/common/constant',
+ 'nbextensions/visualpython/src/common/StringBuilder',
+ 'nbextensions/visualpython/src/common/vpCommon',
+ 'nbextensions/visualpython/src/common/kernelApi',
+ 'nbextensions/visualpython/src/common/component/vpMultiSelector',
+
+ 'codemirror/lib/codemirror',
+ 'codemirror/mode/python/python',
+ 'notebook/js/codemirror-ipython',
+ 'codemirror/addon/display/placeholder',
+ 'codemirror/addon/display/autorefresh'
+], function (vpConst, sb, vpCommon, kernelApi, vpMultiSelector, codemirror) {
+
+ //========================================================================
+ // Define variable
+ //========================================================================
+ const APP_PREFIX = 'vp-pp';
+ const APP_CONTAINER = APP_PREFIX + '-container';
+ const APP_TITLE = APP_PREFIX + '-title';
+ const APP_CLOSE = APP_PREFIX + '-close';
+ const APP_BODY = APP_PREFIX + '-body';
+
+ const APP_BUTTON = APP_PREFIX + '-btn';
+ const APP_PREVIEW_BOX = APP_PREFIX + '-preview-box';
+ const APP_BUTTON_BOX = APP_PREFIX + '-btn-box';
+ const APP_BUTTON_PREVIEW = APP_PREFIX + '-btn-preview';
+ const APP_BUTTON_CANCEL = APP_PREFIX + '-btn-cancel';
+ const APP_BUTTON_RUNADD = APP_PREFIX + '-btn-runadd';
+ const APP_BUTTON_RUN = APP_PREFIX + '-btn-run';
+ const APP_BUTTON_DETAIL = APP_PREFIX + '-btn-detail';
+ const APP_DETAIL_BOX = APP_PREFIX + '-detail-box';
+ const APP_DETAIL_ITEM = APP_PREFIX + '-detail-item';
+
+ const APP_POPUP_BOX = APP_PREFIX + '-popup-box';
+ const APP_POPUP_CLOSE = APP_PREFIX + '-popup-close';
+ const APP_POPUP_BODY = APP_PREFIX + '-popup-body';
+ const APP_POPUP_BUTTON_BOX = APP_PREFIX + '-popup-button-box';
+ const APP_POPUP_CANCEL = APP_PREFIX + '-popup-cancel';
+ const APP_POPUP_OK = APP_PREFIX + '-popup-ok';
+
+
+ //========================================================================
+ // [CLASS] Bind
+ //========================================================================
+ class Bind {
+ /**
+ * constructor
+ * @param {object} pageThis
+ * @param {string} targetId
+ */
+ constructor(pageThis, targetId) {
+ this.pageThis = pageThis;
+ this.targetId = targetId;
+ this.uuid = 'u' + vpCommon.getUUID();
+
+ this.previewOpened = false;
+ this.codepreview = undefined;
+
+ this.howList = [
+ { label: 'Inner', value: 'inner' },
+ { label: 'Outer', value: 'outer' },
+ { label: 'Left', value: 'left' },
+ { label: 'Right', value: 'right' },
+ { label: 'Cross', value: 'cross' },
+ ]
+ }
+
+ //====================================================================
+ // Internal call function
+ //====================================================================
+ /**
+ * Wrap Selector for data selector popup with its uuid
+ * @param {string} query
+ */
+ _wrapSelector(query = '') {
+ return vpCommon.formatString('.{0}.{1} {2}', APP_PREFIX, this.uuid, query);
+ }
+
+ _setPreview() {
+
+ }
+
+ _loadState(state) {
+ var {
+ type, concat, merge, allocateTo, resetIndex
+ } = state;
+
+ // type
+ $(this._wrapSelector('#vp_bdType')).val(type);
+
+ if (type == 'concat') {
+ // load concat state
+ this._loadSelectorInput(this._wrapSelector('#vp_bdVariable'), concat.variable);
+ $(this._wrapSelector('#vp_bdJoin')).val(concat.join);
+ $(this._wrapSelector('#vp_bdAxis')).val(concat.axis);
+ $(this._wrapSelector('#vp_bdSort')).val(concat.sort?'yes':'no');
+ } else {
+ // load merge state
+ $(this._wrapSelector('#vp_bdLeftDataframe')).val(merge.left.variable);
+ $(this._wrapSelector('#vp_mpRightDataframe')).val(merge.right.variable);
+
+ $(this._wrapSelector('#vp_bdHow')).val(merge.how);
+ this._loadSelectorInput(this._wrapSelector('#vp_bdOn'), merge.on);
+ if (on && on.length > 0) {
+ $(this._wrapSelector('#vp_bdLeftOnSelect')).attr('disabled', true);
+ $(this._wrapSelector('#vp_bdRightOnSelect')).attr('disabled', true);
+ }
+ this._loadSelectorInput(this._wrapSelector('#vp_bdLeftOn'), merge.left.on);
+ this._loadSelectorInput(this._wrapSelector('#vp_bdRightOn'), merge.right.on);
+ if (merge.left.on.length > 0 || merge.right.on.length > 0) {
+ $(this._wrapSelector('#vp_bdOnSelect')).attr('disabled', true);
+ }
+
+ $(this._wrapSelector('#vp_bdLeftIndex')).prop('checked', merge.left.useIndex);
+ $(this._wrapSelector('#vp_bdRightIndex')).prop('checked', merge.right.useIndex);
+
+ $(this._wrapSelector('#vp_bdLeftSuffix')).val(merge.left.suffix);
+ $(this._wrapSelector('#vp_bdRightSuffix')).val(merge.right.suffix);
+ }
+ $(this._wrapSelector('#vp_bdAllocateTo')).val(allocateTo);
+ $(this._wrapSelector('#vp_bdResetIndex')).prop('checked', resetIndex);
+ }
+
+ _loadSelectorInput(tag, dataList) {
+ $(tag).val(dataList.map(data=>data.code).join(','));
+ $(tag).data('list', dataList)
+ }
+
+ _saveState() {
+
+ }
+
+ //====================================================================
+ // External call function
+ //====================================================================
+ open(config={}) {
+ this.config = {
+ ...this.config,
+ ...config
+ }
+
+ this.init(this.config.state);
+ $(this._wrapSelector()).show();
+
+ // load state
+ if (this.config.state) {
+ this._loadState(this.config.state);
+ }
+ }
+
+ close() {
+ this.unbindEvent();
+ $(this._wrapSelector()).remove();
+ }
+
+ init(state = undefined) {
+ this.state = {
+ type: 'concat',
+ concat: {
+ variable: [], // DataFrame, Series
+ join: 'outer',
+ axis: 0, // 0: index, 1: column
+ sort: false
+ },
+ merge: {
+ left: {
+ variable: '',
+ on: [],
+ useIndex: false,
+ suffix: ''
+ },
+ right: {
+ variable: '',
+ on: [],
+ useIndex: false,
+ suffix: ''
+ },
+ on: [],
+ how: 'inner',
+ },
+ allocateTo: '',
+ resetIndex: false
+ }
+ this.popup = {
+ type: '',
+ targetSelector: '',
+ MultiSelector: undefined
+ }
+
+ // load state
+ if (state) {
+ this.state = {
+ ...this.state,
+ ...state
+ };
+ }
+
+ this.bindEvent();
+ this.render();
+ vpCommon.loadCssForDiv(this._wrapSelector(), Jupyter.notebook.base_url + vpConst.BASE_PATH + vpConst.STYLE_PATH + 'common/popupPage.css');
+ vpCommon.loadCssForDiv(this._wrapSelector(), Jupyter.notebook.base_url + vpConst.BASE_PATH + vpConst.STYLE_PATH + 'common/bind.css');
+
+ this.loadVariableList();
+ }
+
+ render() {
+ var page = new sb.StringBuilder();
+ page.appendFormatLine('{8}
'
- , APP_SELECT_ITEM, APP_DRAGGABLE, 'added', col.location, col.value, col.dtype, col.code, col.label + ': \n' + colInfo, col.label);
+ // get data and make draggable items
+ dataList && dataList.forEach((data, idx) => {
+ // for column : data.array parsing
+ var info = vpCommon.safeString(data.array);
+ if (info) {
+ info = data.value + ':\n';
+ } else {
+ info = '';
+ }
+ // render item box
+ tag.appendFormatLine('{8}
'
+ , APP_SELECT_ITEM, APP_DRAGGABLE, 'added', data.location, data.value, data.type, data.code, info, data.value);
});
tag.appendLine('', APP_PREFIX, this.uuid);
+ page.appendFormatLine('
'); // APPS
+
+ $('#vp-wrapper').append(page.toString());
+ $(this._wrapSelector()).hide();
+ }
+
+ renderConcatBox() {
+ var page = new sb.StringBuilder();
+ // concat box
+ page.appendFormatLine('', APP_CONTAINER, 'vp-bd-container');
+
+ // popup
+ page.appendLine(this.renderInnerPopup());
+
+ // title
+ page.appendFormat('
',
+ APP_CLOSE, '/nbextensions/visualpython/resource/close_big.svg');
+
+ // body start
+ page.appendFormatLine('
'); // APP_CONTAINER
+ page.appendLine('{1}
',
+ APP_TITLE, 'Bind');
+
+ // close button
+ page.appendFormatLine('', APP_BODY);
+ page.appendFormatLine('
'); // APP_BODY
+
+ // preview box
+ page.appendFormatLine('', 'vp-bd-grid-box');
+ // bind type : concat merge
+ page.appendLine('
'); + + // concat box + page.appendLine(this.renderConcatBox()); + // merge box + page.appendLine(this.renderMergeBox()); + + // divider + page.appendLine('
'); + // allocate to + page.appendLine('
'); // vp-bd-grid-box
+ page.appendLine('');
+ page.appendFormatLine('', 'vp_bdType', 'vp-orange-text wp100', 'Bind type');
+ page.appendFormatLine('');
+ page.appendLine('
');
+ // divider
+ page.appendLine(''); + + // concat box + page.appendLine(this.renderConcatBox()); + // merge box + page.appendLine(this.renderMergeBox()); + + // divider + page.appendLine('
'); + // allocate to + page.appendLine('
');
+ page.appendFormatLine('', 'vp_bdAllocateTo', 'wp100', 'Allocate to');
+ page.appendFormatLine('', 'vp_bdAllocateTo', 'New variable name');
+ // reset index
+ page.appendFormatLine('', 'vp_bdResetIndex', 'reset index');
+ page.appendLine('
');
+
+ page.appendLine('', APP_PREVIEW_BOX, 'vp-apiblock-scrollbar');
+ page.appendFormatLine('', 'vp_codePreview');
+ page.appendLine('
');
+
+ // button box
+ page.appendFormatLine('', APP_BUTTON_BOX);
+ page.appendFormatLine(''
+ , 'vp-button', APP_BUTTON, APP_BUTTON_PREVIEW, 'Code view');
+ page.appendFormatLine(''
+ , 'vp-button cancel', APP_BUTTON, APP_BUTTON_CANCEL, 'Cancel');
+ page.appendFormatLine('
'); // APP_BUTTON_BOX
+
+
+ page.appendLine('', APP_BUTTON_RUNADD);
+ page.appendFormatLine(''
+ , 'vp-button activated', APP_BUTTON_RUN, 'Apply to Board & Run Cell', 'Run');
+ page.appendFormatLine(''
+ , 'vp-button activated', APP_BUTTON_DETAIL, '/nbextensions/visualpython/resource/arrow_short_up.svg');
+ page.appendFormatLine('
'); // APP_BUTTON_RUNADD
+ page.appendLine('', APP_DETAIL_BOX, 'vp-cursor');
+ page.appendFormatLine('
'); // APP_DETAIL_BOX
+ page.appendLine('{3}
', APP_DETAIL_ITEM, 'apply', 'Apply to Board', 'Apply');
+ page.appendFormatLine('{3}
', APP_DETAIL_ITEM, 'add', 'Apply to Board & Add Cell', 'Add');
+ page.appendLine('', 'vp-bd-type-box', 'concat', this.state.type=='concat'?'':'style="display: none;"');
+ // variable
+ page.appendLine('
'); // vp-bd-type-box concat
+ return page.toString();
+ }
+
+ renderMergeBox() {
+ var page = new sb.StringBuilder();
+ // merge box
+ page.appendFormatLine('');
+ page.appendFormatLine('', 'vp_bdVariable', 'vp-orange-text wp100', 'Variable');
+ page.appendFormatLine('', 'vp_bdVariable', 'Variable');
+ page.appendFormatLine('', 'vp_bdVariableSelect', 'vp-button wp50', 'Edit');
+ page.appendLine('
');
+ // join
+ page.appendLine('');
+ page.appendFormatLine('', 'vp_bdJoin', 'wp100', 'Join');
+ page.appendFormatLine('');
+ page.appendLine('');
+ page.appendLine('
');
+ // axis
+ page.appendLine('');
+ page.appendFormatLine('', 'vp_bdAxis', 'wp100', 'Axis');
+ page.appendFormatLine('');
+ page.appendLine('
');
+ // sort
+ page.appendLine('');
+ page.appendFormatLine('', 'vp_bdSort', 'wp100', 'Sort');
+ page.appendFormatLine('');
+ page.appendLine('
');
+ page.appendLine('', 'vp-bd-type-box', 'merge', this.state.type=='merge'?'':'style="display: none;"');
+ // left dataframe
+ page.appendLine('
'); + // how + page.appendLine('
'); // vp-bd-type-box merge
+ return page.toString();
+ }
+
+ /**
+ * Render variable list (for dataframe)
+ * @param {Array');
+ page.appendFormatLine('', 'vp_bdLeftDataframe', 'vp-orange-text wp100', 'Left Dataframe');
+ page.appendFormatLine('');
+ page.appendFormatLine('
', 'vp-bd-df-refresh', 'Refresh all dataframe list', '/nbextensions/visualpython/resource/refresh.svg');
+ page.appendLine('
');
+ // right dataframe
+ page.appendLine('');
+ page.appendFormatLine('', 'vp_bdRightDataframe', 'vp-orange-text wp100', 'Right Dataframe');
+ page.appendFormatLine('');
+ page.appendLine('
');
+ // divider
+ page.appendLine(''); + // how + page.appendLine('
');
+ page.appendFormatLine('', 'vp_bdHow', 'wp100', 'How');
+ page.appendFormatLine('');
+ page.appendLine('
');
+ // on
+ page.appendLine('');
+ page.appendFormatLine('', 'vp_bdOn', 'wp100', 'On');
+ page.appendFormatLine('', 'vp_bdOn', 'Merge key');
+ page.appendFormatLine('', 'vp_bdOnSelect', 'vp-button wp50', 'Edit');
+ page.appendLine('
');
+ // left on
+ page.appendLine('');
+ page.appendFormatLine('', 'vp_bdLeftOn', 'wp100', 'Left on');
+ page.appendFormatLine('', 'vp_bdLeftOn', 'Left key');
+ page.appendFormatLine('', 'vp_bdLeftOnSelect', 'vp-button wp50', 'Edit');
+ // left use index
+ page.appendFormatLine('', 'vp_bdLeftIndex', 'use index');
+ page.appendLine('
');
+ // right on
+ page.appendLine('');
+ page.appendFormatLine('', 'vp_bdRightOn', 'wp100', 'Right on');
+ page.appendFormatLine('', 'vp_bdRightOn', 'Right key');
+ page.appendFormatLine('', 'vp_bdRightOnSelect', 'vp-button wp50', 'Edit');
+ // right use index
+ page.appendFormatLine('', 'vp_bdRightIndex', 'use index');
+ page.appendLine('
');
+ // suffixes
+ page.appendLine('');
+ page.appendFormatLine('', 'wp100', 'Suffixes');
+ page.appendFormatLine('', 'vp_bdLeftSuffix', 'Left suffix');
+ page.appendFormatLine('', 'vp_bdRightSuffix', 'Right suffix');
+ page.appendLine('
');
+ page.appendLine('