Skip to content

Commit da11e6e

Browse files
author
minjk-bl
committed
Apps > Bind, ColumnSelector changed to MultiSelector
1 parent 1db2fab commit da11e6e

6 files changed

Lines changed: 510 additions & 286 deletions

File tree

‎css/common/bind.css‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,20 @@
77
overflow: hidden;
88
}
99

10-
.vp-bd-df-box {
10+
.vp-bd-grid-box {
11+
display: grid;
12+
grid-template-rows: 30px;
13+
grid-row-gap: 5px;
14+
}
15+
.vp-bd-grid-box label {
16+
font-weight: bold;
17+
}
18+
.vp-bd-grid-box select,
19+
.vp-bd-grid-box input {
20+
width: 160px;
21+
}
22+
23+
.vp-bd-type-box {
1124
display: grid;
1225
grid-template-rows: 30px;
1326
grid-row-gap: 5px;
@@ -18,10 +31,3 @@
1831
cursor: pointer;
1932
margin-left: 5px;
2033
}
21-
.vp-bd-df-box label {
22-
font-weight: bold;
23-
}
24-
.vp-bd-df-box select,
25-
.vp-bd-df-box input {
26-
width: 160px;
27-
}

css/common/component/columnSelector.css renamed to css/common/component/multiSelector.css

File renamed without changes.

src/common/component/vpColumnSelector.js renamed to src/common/component/vpMultiSelector.js

Lines changed: 129 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
22
* Project Name : Visual Python
33
* Description : GUI-based Python code generator
4-
* File Name : vpColumnSelector.js
4+
* File Name : vpMultiSelector.js
55
* Author : Black Logic
66
* Note : Groupby app
77
* License : GNU GPLv3 with Visual Python special exception
@@ -42,65 +42,113 @@ define([
4242

4343

4444
//========================================================================
45-
// [CLASS] ColumnSelector
45+
// [CLASS] MultiSelector
4646
//========================================================================
47-
class ColumnSelector {
47+
class MultiSelector {
4848

4949
/**
5050
*
5151
* @param {string} frameSelector query for parent component
52-
* @param {Object} config dataframe:[], selectedList=[], includeList=[]
53-
* @param {Array<string>} dataframe dataframe variable name
54-
* @param {Array<string>} selectedList
55-
* @param {Array<string>} includeList
52+
* @param {Object} config parent:[], selectedList=[], includeList=[]
5653
*/
5754
constructor(frameSelector, config) {
5855
this.uuid = 'u' + vpCommon.getUUID();
5956
this.frameSelector = frameSelector;
6057

6158
// configuration
62-
var { dataframe, selectedList=[], includeList=[] } = config;
63-
this.dataframe = dataframe;
59+
this.config = config;
60+
61+
var { mode, type, parent, selectedList=[], includeList=[] } = config;
62+
this.mode = mode;
63+
this.parent = parent;
6464
this.selectedList = selectedList;
6565
this.includeList = includeList;
6666

67-
this.columnList = [];
67+
this.dataList = [];
6868
this.pointer = { start: -1, end: -1 };
6969

7070
var that = this;
71-
if (dataframe && dataframe.length > 1) {
72-
kernelApi.getCommonColumnList(dataframe, function(result) {
73-
var colList = JSON.parse(result);
74-
colList = colList.map(function(x) {
71+
72+
switch (mode) {
73+
case 'columns':
74+
this._getColumnList(parent, function(dataList) {
75+
that._executeCallback(dataList);
76+
});
77+
break;
78+
case 'variable':
79+
this._getVariableList(type, function(dataList) {
80+
that._executeCallback(dataList);
81+
})
82+
break;
83+
}
84+
}
85+
86+
_executeCallback(dataList) {
87+
this.dataList = dataList;
88+
if (this.includeList && this.includeList.length > 0) {
89+
this.dataList = dataList.filter(data => this.includeList.includes(data.code));
90+
} else {
91+
this.dataList = dataList;
92+
}
93+
94+
// load
95+
this.load();
96+
}
97+
98+
_getVariableList(type, callback) {
99+
kernelApi.searchVarList(type, function(result) {
100+
try {
101+
var dataList = JSON.parse(result);
102+
dataList = dataList.map(function(x, idx) {
75103
return {
76104
...x,
77-
value: x.label,
78-
code: x.value
105+
value: x.varName,
106+
code: x.varName,
107+
type: x.varType,
108+
location: idx
79109
};
80110
});
81-
if (includeList && includeList.length > 0) {
82-
that.columnList = colList.filter(col => includeList.includes(col.code));
83-
} else {
84-
that.columnList = colList;
111+
callback(dataList);
112+
} catch (e) {
113+
callback([]);
114+
}
115+
});
116+
}
117+
118+
_getColumnList(parent, callback) {
119+
if (parent && parent.length > 1) {
120+
kernelApi.getCommonColumnList(parent, function(result) {
121+
try {
122+
var colList = JSON.parse(result);
123+
colList = colList.map(function(x) {
124+
return {
125+
...x,
126+
value: x.label,
127+
code: x.value,
128+
type: x.dtype
129+
};
130+
});
131+
callback(colList);
132+
} catch (e) {
133+
callback([]);
85134
}
86-
that.load();
87135
});
88136
} else {
89-
kernelApi.getColumnList(dataframe, function(result) {
90-
var colList = JSON.parse(result);
91-
colList = colList.map(function(x) {
92-
return {
93-
...x,
94-
value: x.label,
95-
code: x.value
96-
};
97-
});
98-
if (includeList && includeList.length > 0) {
99-
that.columnList = colList.filter(col => includeList.includes(col.code));
100-
} else {
101-
that.columnList = colList;
137+
kernelApi.getColumnList(parent, function(result) {
138+
try {
139+
var colList = JSON.parse(result);
140+
colList = colList.map(function(x) {
141+
return {
142+
...x,
143+
value: x.label,
144+
code: x.value,
145+
type: x.dtype
146+
};
147+
});
148+
callback(colList);
149+
} catch (e) {
150+
callback([]);
102151
}
103-
that.load();
104152
});
105153
}
106154
}
@@ -111,40 +159,40 @@ define([
111159

112160
load() {
113161
$(vpCommon.wrapSelector(this.frameSelector)).html(this.render());
114-
vpCommon.loadCssForDiv(this._wrapSelector(), Jupyter.notebook.base_url + vpConst.BASE_PATH + vpConst.STYLE_PATH + 'common/component/columnSelector.css');
162+
vpCommon.loadCssForDiv(this._wrapSelector(), Jupyter.notebook.base_url + vpConst.BASE_PATH + vpConst.STYLE_PATH + 'common/component/multiSelector.css');
115163
this.bindEvent();
116164
this.bindDraggable();
117165
}
118166

119-
getColumnList() {
167+
getDataList() {
120168
var colTags = $(this._wrapSelector('.' + APP_SELECT_ITEM + '.added:not(.moving)'));
121-
var colList = [];
169+
var dataList = [];
122170
if (colTags.length > 0) {
123171
for (var i = 0; i < colTags.length; i++) {
124-
var colName = $(colTags[i]).data('colname');
125-
var colDtype = $(colTags[i]).data('dtype');
126-
var colCode = $(colTags[i]).data('code');
127-
if (colCode) {
128-
colList.push({ name: colName, dtype: colDtype, code: colCode});
172+
var name = $(colTags[i]).data('name');
173+
var type = $(colTags[i]).data('type');
174+
var code = $(colTags[i]).data('code');
175+
if (code) {
176+
dataList.push({ name: name, type: type, code: code});
129177
}
130178
}
131179
}
132-
return colList;
180+
return dataList;
133181
}
134182

135183
render() {
136184
var that = this;
137185

138186
var tag = new sb.StringBuilder();
139187
tag.appendFormatLine('<div class="{0} {1}">', APP_SELECT_CONTAINER, this.uuid);
140-
// col select - left
188+
// select - left
141189
tag.appendFormatLine('<div class="{0}">', APP_SELECT_LEFT);
142190
// tag.appendFormatLine('<input type="text" class="{0}" placeholder="{1}"/>'
143191
// , APP_SELECT_SEARCH, 'Search Column');
144192
var vpSearchSuggest = new vpSuggestInputText.vpSuggestInputText();
145193
vpSearchSuggest.addClass(APP_SELECT_SEARCH);
146-
vpSearchSuggest.setPlaceholder('Search Column');
147-
vpSearchSuggest.setSuggestList(function() { return that.columnList; });
194+
vpSearchSuggest.setPlaceholder('Search ' + this.mode);
195+
vpSearchSuggest.setSuggestList(function() { return that.dataList; });
148196
vpSearchSuggest.setSelectEvent(function(value) {
149197
$(this.wrapSelector()).val(value);
150198
$(this.wrapSelector()).trigger('change');
@@ -153,77 +201,77 @@ define([
153201
tag.appendLine(vpSearchSuggest.toTagString());
154202
tag.appendFormatLine('<i class="fa fa-search search-icon"></i>')
155203

156-
var selectionList = this.columnList.filter(col => !that.selectedList.includes(col.code));
157-
tag.appendLine(this.renderColumnSelectionBox(selectionList));
204+
var selectionList = this.dataList.filter(data => !that.selectedList.includes(data.code));
205+
tag.appendLine(this.renderSelectionBox(selectionList));
158206
tag.appendLine('</div>'); // APP_SELECT_LEFT
159-
// col select - buttons
207+
// select - buttons
160208
tag.appendFormatLine('<div class="{0}">', APP_SELECT_BTN_BOX);
161209
tag.appendFormatLine('<button type="button" class="{0}" title="{1}">{2}</button>'
162-
, APP_SELECT_ADD_ALL_BTN, 'Add all columns', '<img src="https://github.com/nbextensions/visualpython/resource/arrow_right_double.svg"/></i>');
210+
, APP_SELECT_ADD_ALL_BTN, 'Add all items', '<img src="https://github.com/nbextensions/visualpython/resource/arrow_right_double.svg"/></i>');
163211
tag.appendFormatLine('<button type="button" class="{0}" title="{1}">{2}</button>'
164-
, APP_SELECT_ADD_BTN, 'Add selected columns', '<img src="https://github.com/nbextensions/visualpython/resource/arrow_right.svg"/></i>');
212+
, APP_SELECT_ADD_BTN, 'Add selected items', '<img src="https://github.com/nbextensions/visualpython/resource/arrow_right.svg"/></i>');
165213
tag.appendFormatLine('<button type="button" class="{0}" title="{1}">{2}</button>'
166-
, APP_SELECT_DEL_BTN, 'Remove selected columns', '<img src="https://github.com/nbextensions/visualpython/resource/arrow_left.svg"/>');
214+
, APP_SELECT_DEL_BTN, 'Remove selected items', '<img src="https://github.com/nbextensions/visualpython/resource/arrow_left.svg"/>');
167215
tag.appendFormatLine('<button type="button" class="{0}" title="{1}">{2}</button>'
168-
, APP_SELECT_DEL_ALL_BTN, 'Remove all columns', '<img src="https://github.com/nbextensions/visualpython/resource/arrow_left_double.svg"/>');
216+
, APP_SELECT_DEL_ALL_BTN, 'Remove all items', '<img src="https://github.com/nbextensions/visualpython/resource/arrow_left_double.svg"/>');
169217
tag.appendLine('</div>'); // APP_SELECT_BTNS
170-
// col select - right
218+
// select - right
171219
tag.appendFormatLine('<div class="{0}">', APP_SELECT_RIGHT);
172-
var selectedList = this.columnList.filter(col => that.selectedList.includes(col.code));
173-
tag.appendLine(this.renderColumnSelectedBox(selectedList));
220+
var selectedList = this.dataList.filter(data => that.selectedList.includes(data.code));
221+
tag.appendLine(this.renderSelectedBox(selectedList));
174222
tag.appendLine('</div>'); // APP_SELECT_RIGHT
175223
tag.appendLine('</div>'); // APP_SELECT_CONTAINER
176224
return tag.toString();
177225
}
178226

179-
renderColumnSelectionBox(colList) {
227+
renderSelectionBox(dataList) {
180228
var tag = new sb.StringBuilder();
181229
tag.appendFormatLine('<div class="{0} {1} {2} {3}">', APP_SELECT_BOX, 'left', APP_DROPPABLE, 'no-selection');
182-
// get col data and make draggable items
183-
colList && colList.forEach((col, idx) => {
184-
// col.array parsing
185-
var colInfo = vpCommon.safeString(col.array);
186-
// render column box
187-
tag.appendFormatLine('<div class="{0} {1}" data-idx="{2}" data-colname="{3}" data-dtype="{4}" data-code="{5}" title="{6}"><span>{7}</span></div>'
188-
, APP_SELECT_ITEM, APP_DRAGGABLE, col.location, col.value, col.dtype, col.code, col.label + ': \n' + colInfo, col.label);
230+
// get data and make draggable items
231+
dataList && dataList.forEach((data, idx) => {
232+
// for column : data.array parsing
233+
var info = vpCommon.safeString(data.array);
234+
// render item box
235+
tag.appendFormatLine('<div class="{0} {1}" data-idx="{2}" data-name="{3}" data-type="{4}" data-code="{5}" title="{6}"><span>{7}</span></div>'
236+
, APP_SELECT_ITEM, APP_DRAGGABLE, data.location, data.value, data.type, data.code, info?data.value + ': \n' + info:'', data.value);
189237
});
190238
tag.appendLine('</div>'); // APP_SELECT_BOX
191239
return tag.toString();
192240
}
193241

194-
renderColumnSelectedBox(colList) {
242+
renderSelectedBox(dataList) {
195243
var tag = new sb.StringBuilder();
196244
tag.appendFormatLine('<div class="{0} {1} {2} {3}">', APP_SELECT_BOX, 'right', APP_DROPPABLE, 'no-selection');
197-
// get col data and make draggable items
198-
colList && colList.forEach((col, idx) => {
199-
// col.array parsing
200-
var colInfo = vpCommon.safeString(col.array);
201-
// render column box
202-
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>'
203-
, APP_SELECT_ITEM, APP_DRAGGABLE, 'added', col.location, col.value, col.dtype, col.code, col.label + ': \n' + colInfo, col.label);
245+
// get data and make draggable items
246+
dataList && dataList.forEach((data, idx) => {
247+
// for column : data.array parsing
248+
var info = vpCommon.safeString(data.array);
249+
// render item box
250+
tag.appendFormatLine('<div class="{0} {1} {2}" data-idx="{3}" data-name="{4}" data-type="{5}" data-code="{6}" title="{7}"><span>{8}</span></div>'
251+
, APP_SELECT_ITEM, APP_DRAGGABLE, 'added', data.location, data.value, data.type, data.code, info?data.value + ': \n' + info:'', data.value);
204252
});
205253
tag.appendLine('</div>'); // APP_SELECT_BOX
206254
return tag.toString();
207255
}
208256

209257
bindEvent() {
210258
var that = this;
211-
// item indexing - search columns
259+
// item indexing - search
212260
$(this._wrapSelector('.' + APP_SELECT_SEARCH)).on('change', function(event) {
213261
var searchValue = $(this).val();
214262

215-
// filter added columns
263+
// filter added items
216264
var addedTags = $(that._wrapSelector('.' + APP_SELECT_RIGHT + ' .' + APP_SELECT_ITEM + '.added'));
217-
var addedColumnList = [];
265+
var addedList = [];
218266
for (var i = 0; i < addedTags.length; i++) {
219267
var value = $(addedTags[i]).attr('data-colname');
220-
addedColumnList.push(value);
268+
addedList.push(value);
221269
}
222-
var filteredColumnList = that.columnList.filter(x => x.value.includes(searchValue) && !addedColumnList.includes(x.value));
270+
var filteredList = that.dataList.filter(x => x.value.includes(searchValue) && !addedList.includes(x.value));
223271

224-
// column indexing
272+
// items indexing
225273
$(that._wrapSelector('.' + APP_SELECT_BOX + '.left')).replaceWith(function() {
226-
return that.renderColumnSelectionBox(filteredColumnList);
274+
return that.renderSelectionBox(filteredList);
227275
});
228276

229277
// draggable
@@ -414,7 +462,7 @@ define([
414462
}
415463
}
416464

417-
return ColumnSelector;
465+
return MultiSelector;
418466
});
419467

420468
/* End of file */

0 commit comments

Comments
 (0)