Skip to content

Commit bf8fab6

Browse files
author
minjk-bl
committed
Added returnframetype to DataSelector and Applied it to DataPrep and Dimension Reduction
1 parent 9c752dd commit bf8fab6

File tree

4 files changed

+283
-56
lines changed

4 files changed

+283
-56
lines changed

‎visualpython/js/com/com_generatorV2.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -376,6 +376,8 @@ define([
376376
allowDataType: obj.var_type,
377377
placeholder: obj.placeholder || 'Select data',
378378
value: value,
379+
columnSelection: obj.columnSelection || 'multiple', // single / multiple
380+
returnFrameType: obj.returnFrameType || '', // '' / DataFrame / Series
379381
required: obj.required === true
380382
});
381383
content = $(dataSelector.toTagString());
@@ -890,7 +892,7 @@ define([
890892
suggestInputX.addClass('vp-input vp-state');
891893
suggestInputX.setNormalFilter(false);
892894
suggestInputX.setValue(defaultValue);
893-
$(selector + ' #' + columnInputId).replaceWith(function() {
895+
$(pageThis.wrapSelector('#' + columnInputId)).replaceWith(function() {
894896
return suggestInputX.toTagString();
895897
});
896898
} else {
@@ -899,7 +901,7 @@ define([
899901
'id': columnInputId,
900902
'class': 'vp-select vp-state'
901903
});
902-
$(selector + ' #' + columnInputId).replaceWith(function() {
904+
$(pageThis.wrapSelector('#' + columnInputId)).replaceWith(function() {
903905
return $(tag);
904906
});
905907
}
@@ -955,7 +957,7 @@ define([
955957
suggestInputX.setSuggestList(function() { return list; }); //FIXME:
956958
suggestInputX.setNormalFilter(false);
957959
suggestInputX.setValue(defaultValue);
958-
$(selector + ' #' + columnInputId).replaceWith(function() {
960+
$(pageThis.wrapSelector('#' + columnInputId)).replaceWith(function() {
959961
return suggestInputX.toTagString();
960962
});
961963
} else {

‎visualpython/js/com/component/DataSelector.js

Lines changed: 133 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,11 @@ define([
5959
select: null, // callback after selection from suggestInput (value, dtype)
6060
allowDataType: null, // list of allowed data types
6161
dataCategory: null, // list of data category (use it for ml categories)
62+
columnSelection: 'multiple', // single/multi : allowed column selection
63+
returnFrameType: '', // DataFrame/Series : required data type for DataFrame -> Series/DataFrame operation
64+
// if Series, only one column selection is allowed and returns Series
65+
// if DataFrame, always returns DataFrame
66+
// if Empty(=== ''), if one column selected, returns Series / others, returns DataFrame
6267
// additional options
6368
boxClasses: '',
6469
classes: '',
@@ -87,6 +92,9 @@ define([
8792
this.prop.dataCategory = this.prop.allowDataType;
8893
}
8994
}
95+
if (this.prop.returnFrameType === 'Series') {
96+
this.prop.columnSelection = 'single'; // only single selection allowed
97+
}
9098

9199
this.state = {
92100
filterType: 'All',
@@ -98,6 +106,7 @@ define([
98106
slicingEnd1: '',
99107
slicingStart2: '',
100108
slicingEnd2: '',
109+
singleColumn: '',
101110
ndRowType: 'slicing',
102111
ndColType: 'slicing',
103112
useIndex: false,
@@ -409,6 +418,19 @@ define([
409418
}
410419
}
411420

421+
templateForSingleSelector() {
422+
return `
423+
<div>
424+
<label><input type="checkbox" id="useIndex" class="vp-state" ${this.state.useIndex===true?'checked':''}/> <span>Use Index</span></label>
425+
<div class="vp-ds-df-singleselector" ${this.state.useIndex===true?'style="display:none;"':''}>
426+
<label class="w50">Column</label>
427+
<select id="singleColumn" class="vp-select vp-state w150">
428+
</select>
429+
</div>
430+
</div>
431+
`
432+
}
433+
412434
templateForMultiSelector() {
413435
return `
414436
<div class="vp-ds-df-option-box">
@@ -599,22 +621,93 @@ define([
599621

600622
switch (dataType) {
601623
case 'DataFrame':
602-
// render option page
603-
$(this.wrapSelector('.vp-ds-option-inner-box')).html(this.templateForMultiSelector());
604624
// column selecting
605-
this._columnSelector = new MultiSelector(this.wrapSelector('.vp-ds-df-multiselector'),
606-
{ mode: 'columns', parent: [data], selectedList: this.state.indexing, allowAdd: true }
607-
);
608-
625+
if (this.prop.columnSelection === 'single') {
626+
// render option page
627+
$(this.wrapSelector('.vp-ds-option-inner-box')).html(this.templateForSingleSelector());
628+
// bind column source
629+
// com_generator.vp_bindColumnSource(this, 'data', ['singleColumn'], 'select', false, false);
630+
// vp_bindColumnSource(pageThis, targetId, columnInputIdList, tagType="input", columnWithEmpty=false, columnWithIndex=false)
631+
const columnInputIdList = ['singleColumn'];
632+
if (data === '') {
633+
// reset with no source
634+
columnInputIdList && columnInputIdList.forEach(columnInputId => {
635+
let defaultValue = that.state[columnInputId];
636+
if (defaultValue === null || defaultValue === undefined) {
637+
defaultValue = '';
638+
}
639+
// option tags
640+
var tag = $('<select></select>').attr({
641+
'id': columnInputId,
642+
'class': 'vp-select vp-state'
643+
});
644+
$(that.wrapSelector('#' + columnInputId)).replaceWith(function() {
645+
return $(tag);
646+
});
647+
});
648+
return ;
649+
}
650+
// get result and show on detail box
651+
vpKernel.getColumnList(data).then(function(resultObj) {
652+
try {
653+
let { result, type, msg } = resultObj;
654+
var { list } = JSON.parse(result);
655+
656+
// columns using suggestInput
657+
columnInputIdList && columnInputIdList.forEach((columnInputId, idx) => {
658+
let defaultValue = that.state[columnInputId];
659+
if (defaultValue === null || defaultValue === undefined) {
660+
defaultValue = '';
661+
}
662+
// create tag
663+
var tag = $('<select></select>').attr({
664+
'id': columnInputId,
665+
'class': 'vp-select vp-state w150'
666+
});
667+
// make tag
668+
list.forEach((listVar, idx) => {
669+
var option = document.createElement('option');
670+
$(option).attr({
671+
'value':listVar.value,
672+
'text':listVar.label,
673+
'data-type':listVar.dtype
674+
});
675+
// cell metadata test : defaultValue as selected
676+
if (listVar.value === defaultValue) {
677+
$(option).prop('selected', true);
678+
}
679+
option.append(document.createTextNode(listVar.label));
680+
$(tag).append(option);
681+
});
682+
$(that.wrapSelector('#' + columnInputId)).replaceWith(function() {
683+
return $(tag);
684+
});
685+
$(that.wrapSelector('#' + columnInputId)).trigger('change');
686+
}).catch(function(err) {
687+
vpLog.display(VP_LOG_TYPE.ERROR, 'com_generator - bindColumnSource error ', err)
688+
});
689+
} catch (e) {
690+
vpLog.display(VP_LOG_TYPE.ERROR, 'com_generator - bindColumnSource: not supported data type. ', e);
691+
}
692+
});
693+
} else {
694+
// render option page
695+
$(this.wrapSelector('.vp-ds-option-inner-box')).html(this.templateForMultiSelector());
696+
this._columnSelector = new MultiSelector(this.wrapSelector('.vp-ds-df-multiselector'),
697+
{ mode: 'columns', parent: [data], selectedList: this.state.indexing, allowAdd: true }
698+
);
699+
}
609700
// bind event
610701
$(this.wrapSelector('#useIndex')).on('change', function() {
611702
let checked = $(this).prop('checked');
612703
that.state.useIndex = checked;
613704
if (checked === true) {
614705
$(that.wrapSelector('.vp-ds-df-multiselector')).hide();
706+
$(that.wrapSelector('.vp-ds-df-singleselector')).hide();
615707
$(that.wrapSelector('.vp-ds-df-index-box')).show();
616708
} else {
617709
$(that.wrapSelector('.vp-ds-df-multiselector')).show();
710+
$(that.wrapSelector('.vp-ds-df-singleselector')).show();
618711
$(that.wrapSelector('.vp-ds-df-index-box')).hide();
619712
}
620713
});
@@ -728,6 +821,7 @@ define([
728821
let {
729822
data, dataType,
730823
useIndex,
824+
singleColumn,
731825
slicingStart1, slicingEnd1,
732826
slicingStart2, slicingEnd2,
733827
ndRowType, ndColType
@@ -742,21 +836,39 @@ define([
742836
code.append('.index');
743837
} else {
744838
// use column selector
745-
if (this._columnSelector != null) {
746-
let result = this._columnSelector.getDataList();
747-
this.state.indexing = result.map(obj => obj.code); // save state
748-
let columnList = [];
749-
result && result.forEach(obj => {
750-
columnList.push(obj.code);
751-
});
752-
if (columnList.length > 0) {
753-
if (columnList.length == 1) {
754-
// return as Series
755-
code.appendFormat('[{0}]', columnList.join(', '));
756-
// change datatype to Series
757-
this.state.returnDataType = 'Series';
758-
} else {
759-
code.appendFormat('[[{0}]]', columnList.join(', '));
839+
if (this.prop.columnSelection === 'single') {
840+
// single selector
841+
if (this.prop.returnFrameType === 'DataFrame') {
842+
// return as DataFrame
843+
code.appendFormat('[[{0}]]', singleColumn);
844+
} else {
845+
// return as Series
846+
code.appendFormat('[{0}]', singleColumn);
847+
this.state.returnDataType = 'Series';
848+
}
849+
} else {
850+
// multiple selector
851+
if (this._columnSelector != null) {
852+
let result = this._columnSelector.getDataList();
853+
this.state.indexing = result.map(obj => obj.code); // save state
854+
let columnList = [];
855+
result && result.forEach(obj => {
856+
columnList.push(obj.code);
857+
});
858+
if (columnList.length > 0) {
859+
if (columnList.length == 1) {
860+
if (this.prop.returnFrameType === 'DataFrame') {
861+
// return as DataFrame
862+
code.appendFormat('[[{0}]]', columnList.join(', '));
863+
} else {
864+
// return as Series
865+
code.appendFormat('[{0}]', columnList.join(', '));
866+
// change datatype to Series
867+
this.state.returnDataType = 'Series';
868+
}
869+
} else {
870+
code.appendFormat('[[{0}]]', columnList.join(', '));
871+
}
760872
}
761873
}
762874
}

0 commit comments

Comments
 (0)