Skip to content

Commit bc0cf43

Browse files
author
minjk-bl
committed
DataSelector update
1 parent 691ea53 commit bc0cf43

File tree

5 files changed

+85
-31
lines changed

5 files changed

+85
-31
lines changed

‎css/component/dataSelector.css

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@
99
right: 25px;
1010
cursor: pointer;
1111
}
12+
.vp-ds-box input {
13+
padding-right: 23px;
14+
}
1215
.vp-ds-box input:disabled {
1316
background: var(--light-gray-color) !important;
1417
cursor: not-allowed;
@@ -26,8 +29,8 @@
2629
display: none;
2730
position: absolute;
2831
top: calc(50% - 225px);
29-
left: calc(50% - 200px);
30-
width: 400px;
32+
left: calc(50% - 300px);
33+
width: 600px;
3134
height: 450px;
3235
background: white;
3336
border: 1px solid var(--border-gray-color);
@@ -37,32 +40,38 @@
3740
font-size: 14px;
3841
color: var(--font-primary);
3942
}
43+
.vp-ds-data-box {
44+
width: 100%;
45+
height: 100px;
46+
align-content: baseline;
47+
align-items: center;
48+
}
49+
.vp-ds-type-box,
4050
.vp-ds-variable-box {
41-
border: 1px solid var(--border-gray-color);
51+
border: 0.25px solid var(--border-gray-color);
4252
height: 100px;
4353
grid-row-gap: 0px;
54+
align-content: baseline;
4455
}
56+
.vp-ds-type-item,
4557
.vp-ds-var-item {
58+
padding-left: 5px;
4659
height: 25px;
60+
line-height: 25px;
4761
border-bottom: 1px solid var(--border-gray-color);
4862
}
63+
.vp-ds-type-item:hover,
4964
.vp-ds-var-item:hover {
5065
background: var(--light-gray-color);
5166
color: var(--font-highlight);
5267
cursor: pointer;
5368
}
69+
.vp-ds-type-item.selected,
5470
.vp-ds-var-item.selected {
5571
background: var(--light-gray-color);
5672
color: var(--font-highlight);
5773
font-weight: bold;
5874
}
59-
.vp-ds-var-data {
60-
padding-left: 5px;
61-
}
62-
.vp-ds-var-type {
63-
border-left: 1px solid var(--border-gray-color);
64-
padding-left: 5px;
65-
}
6675
.vp-ds-option-box {
6776
height: calc(100% - 140px);
6877
margin-top: 10px;

‎html/component/dataSelector.html

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,16 @@
66
</div>
77
<div class="vp-inner-popup-body vp-scrollbar">
88
<div class="vp-grid-col-p50">
9-
<label class="vp-bold">Data</label>
109
<label class="vp-bold">Type</label>
10+
<label class="vp-bold">Data</label>
1111
</div>
12-
<div class="vp-ds-variable-box vp-grid-box vp-scrollbar vp-no-selection">
13-
12+
<div class="vp-ds-data-box vp-grid-col-p50">
13+
<div class="vp-ds-type-box vp-grid-box vp-scrollbar vp-no-selection">
14+
15+
</div>
16+
<div class="vp-ds-variable-box vp-grid-box vp-scrollbar vp-no-selection">
17+
18+
</div>
1419
</div>
1520
<hr style="margin: 0px;"/>
1621
<div class="vp-ds-option-box">

‎js/com/component/DataSelector.js

Lines changed: 52 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -49,13 +49,14 @@ define([
4949
id: '', // target id
5050
finish: null, // callback after selection
5151
select: null, // callback after selection from suggestInput
52-
allowDataType: [], // default allow data types (All)
52+
allowDataType: ['DataFrame', 'Series', 'ndarray', 'list', 'dict'], // default allow data types
5353
// additional options
5454
classes: '',
5555
...this.prop
5656
}
5757

5858
this.state = {
59+
filterType: 'All',
5960
data: '',
6061
dataType: '',
6162
slicingStart: '',
@@ -168,11 +169,13 @@ define([
168169
let result = true;
169170
// trigger change
170171
$(this).val(ui.item.value);
172+
$(this).attr('data-type', ui.item.dtype);
171173
$(this).trigger('change');
172174

173175
// select event
174-
if (typeof that.prop.select == "function")
176+
if (typeof that.prop.select == "function") {
175177
result = that.prop.select(ui.item.value, ui.item);
178+
}
176179
if (result != undefined) {
177180
return result;
178181
}
@@ -213,7 +216,7 @@ define([
213216
let newValue = that.generateCode();
214217

215218
$(that._target).val(newValue);
216-
$(that._target).data('type', that.state.dataType);
219+
$(that._target).attr('data-type', that.state.dataType);
217220
that.prop.finish(newValue);
218221
that.close();
219222
});
@@ -225,6 +228,24 @@ define([
225228
_bindEventForItem() {
226229
let that = this;
227230

231+
// Click data type item
232+
$(that.wrapSelector('.vp-ds-type-item')).off('click');
233+
$(that.wrapSelector('.vp-ds-type-item')).on('click', function() {
234+
$(that.wrapSelector('.vp-ds-type-item')).removeClass('selected');
235+
$(this).addClass('selected');
236+
237+
let type = $(this).data('type');
238+
if (type == 'All') {
239+
that.renderVariableBox(that._varList);
240+
} else if (type == 'Others') {
241+
that.renderVariableBox(that._varList.filter(obj => !that.prop.allowDataType.includes(obj.dtype)));
242+
} else {
243+
// filter variable list
244+
that.renderVariableBox(that._varList.filter(obj => obj.dtype == type));
245+
}
246+
247+
});
248+
228249
// Click variable item
229250
$(that.wrapSelector('.vp-ds-var-item')).off('click');
230251
// $(that.wrapSelector('.vp-ds-var-item')).on('click', function() {
@@ -233,17 +254,17 @@ define([
233254
$(that.wrapSelector('.vp-ds-var-item')).removeClass('selected');
234255
$(this).addClass('selected');
235256

236-
let data = $(this).find('.vp-ds-var-data').text();
237-
let dataType = $(this).find('.vp-ds-var-type').text();
257+
let data = $(this).text();
258+
let dataType = $(this).data('type');
238259
that.state.data = data;
239260
that.state.dataType = dataType;
240261

241262
// render option page
242263
that.renderOptionPage();
243264
}, function(evt) {
244265
// double click to select directly
245-
let data = $(this).find('.vp-ds-var-data').text();
246-
let dataType = $(this).find('.vp-ds-var-type').text();
266+
let data = $(this).text();
267+
let dataType = $(this).data('type');
247268
that.state.data = data;
248269
that.state.dataType = dataType;
249270

@@ -277,10 +298,8 @@ define([
277298
});
278299

279300
that._varList = varList;
280-
281-
282-
283-
that.renderVariables(varList);
301+
302+
that.renderDataBox(varList);
284303
that._bindAutocomplete(varList);
285304

286305
});
@@ -329,20 +348,36 @@ define([
329348
/** Render popup on clicking filter button */
330349
renderPopup() {
331350
super.render();
351+
332352
this.loadVariables();
333353
this._bindEventForPopup();
354+
}
334355

335-
//TODO:
356+
renderDataBox(varList) {
357+
let that = this;
358+
let varTags = new com_String();
359+
let types = [
360+
'All',
361+
...this.prop.allowDataType,
362+
'Others'
363+
];
364+
// Add Data Types to filter
365+
types && types.forEach(type => {
366+
varTags.appendFormatLine('<div class="{0} {1}" data-type="{2}">{3}</div>'
367+
, 'vp-ds-type-item', (that.state.filterType == type? 'selected': ''), type, type);
368+
});
369+
$(this.wrapSelector('.vp-ds-type-box')).html(varTags.toString());
336370

371+
this.renderVariableBox(varList);
337372
}
338373

339-
renderVariables(varList) {
374+
renderVariableBox(varList) {
375+
let that = this;
340376
let varTags = new com_String();
377+
varTags = new com_String();
341378
varList && varList.forEach((obj, idx) => {
342-
varTags.appendFormatLine('<div class="{0} {1}">', 'vp-ds-var-item', 'vp-grid-col-p50');
343-
varTags.appendFormatLine('<div class="{0}">{1}</div>', 'vp-ds-var-data', obj.label);
344-
varTags.appendFormatLine('<div class="{0}">{1}</div>', 'vp-ds-var-type', obj.dtype);
345-
varTags.appendLine('</div>');
379+
varTags.appendFormatLine('<div class="{0} {1}" title="{2}" data-type="{3}">{4}</div>'
380+
, 'vp-ds-var-item', (that.state.data == obj.value?'selected':''), obj.dtype, obj.dtype, obj.label);
346381
});
347382
$(this.wrapSelector('.vp-ds-variable-box')).html(varTags.toString());
348383

‎js/m_visualize/Seaborn.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -466,7 +466,7 @@ define([
466466
// show variable information on clicking variable
467467
vpKernel.execute(code).then(function(resultObj) {
468468
let { result, type, msg } = resultObj;
469-
if (msg.content.data) {
469+
if (msg.content.data) {
470470
var textResult = msg.content.data["text/plain"];
471471
var htmlResult = msg.content.data["text/html"];
472472
var imgResult = msg.content.data["image/png"];

‎js/m_visualize/WordCloud.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -256,6 +256,11 @@ define([
256256
code.appendLine();
257257
dataVariable = 'word_cloud_text';
258258
}
259+
// check data type and convert it to string
260+
let dataType = $(this.wrapSelector('#data')).data('type');
261+
if (dataType == 'DataFrame' || dataType == 'Series') {
262+
dataVariable = data + '.to_string()';
263+
}
259264
code.appendFormatLine("counts = Counter({0}.split())", dataVariable);
260265
code.appendFormatLine("tags = counts.most_common({0})", wordCount);
261266
code.appendLine();

0 commit comments

Comments
 (0)