Skip to content

Commit df3e591

Browse files
author
minjk-bl
committed
Add subset to Frame - Add column / Replace
1 parent fc075b8 commit df3e591

7 files changed

Lines changed: 300 additions & 78 deletions

File tree

‎css/m_apps/frame.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -244,4 +244,35 @@
244244
}
245245
.vp-inner-popup-apply-column {
246246
width: 153px;
247+
}
248+
249+
/* UDF Editor - CodeMirror */
250+
.vp-fr-subset-box .CodeMirror {
251+
display: inline-block;
252+
width: calc(100% - 55px);
253+
height: 30px;
254+
border: 1px solid var(--gray-color);
255+
border-radius: 3px;
256+
background-image: repeating-linear-gradient( to right, var(--grid-line-color) 0, var(--grid-line-color) 0.25px, transparent 1px, transparent 5px ), repeating-linear-gradient( to bottom, var(--grid-line-color) 0, var(--grid-line-color) 0.25px, transparent 1px, transparent 5px );
257+
overflow: hidden;
258+
}
259+
.vp-fr-subset-box .CodeMirror-empty { outline: none; }
260+
.vp-fr-subset-box .CodeMirror-empty.CodeMirror-focused { outline: none; }
261+
.vp-fr-subset-box .CodeMirror pre.CodeMirror-placeholder { color: #999; }
262+
263+
/* Hide cursor in read only fields */
264+
.vp-fr-subset-box .CodeMirror-readonly .CodeMirror-cursor {
265+
display: none !important
266+
}
267+
/* .CodeMirror-scroll { min-height: 80px; max-height: 80px;} */
268+
.vp-fr-subset-box .CodeMirror-code .cm-variable {
269+
background-color: rgba(47, 133, 90, 0.2);
270+
}
271+
.vp-fr-subset-box .CodeMirror-code .cm-property {
272+
background-color: rgba(246, 173, 85, 0.2);
273+
}
274+
275+
.vp-fr-subset-box .vp-ds-button {
276+
width: 50px;
277+
vertical-align: top;
247278
}

‎css/m_apps/subset.css‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -99,8 +99,8 @@
9999
border: 0.25px solid #E4E4E4;
100100
padding: 15px;
101101
}
102-
.vp-ds-tab-page-box.subset-row {
103-
border-right: 0px;
102+
.vp-ds-tab-page-box.subset-column {
103+
border-left: 0px;
104104
}
105105
/* .vp-ds-tab-page-box.subset-condition {
106106
grid-column-start: 1;
@@ -111,6 +111,9 @@
111111
font-weight: bold;
112112
margin: 5px 0px 0px 5px;
113113
}
114+
.vp-ds-rowtype-box.condition {
115+
position: relative;
116+
}
114117
.vp-ds-rowtype-box.condition .vp-vs-box {
115118
padding-bottom: 5px;
116119
}
@@ -130,8 +133,10 @@
130133
width: 85px;
131134
}
132135
.vp-ds-rowtype-box.condition .vp-condition-use-text {
133-
float: right;
134-
margin-right: 42px;
136+
/* float: right;
137+
margin-right: 42px; */
138+
position: absolute;
139+
left: 245px;
135140
}
136141
.vp-ds-rowtype,
137142
.vp-ds-coltype {

‎js/com/com_generator.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ define([
8181
vp_bindColumnSource(selector, targetSelector, autoCols[target]);
8282
// on change event
8383
$(targetSelector).on('change', function() {
84-
console.log('change event ', selector, targetSelector, autoCols[target]);
84+
// console.log('change event ', selector, targetSelector, autoCols[target]);
8585
vp_bindColumnSource(selector, this, autoCols[target]);
8686
});
8787
});

‎js/com/component/PopupComponent.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,10 @@ define([
164164
/**
165165
* Initialize codemirror
166166
* @param {Object} cmObj { key, selector, type, ... }
167+
* - key : key to save its value as state (this.state[key])
168+
* - selector : selector to distinguish codemirror tag (textarea)
169+
* ex) this.wrapSelector('.cm-tag')
170+
* - type : code / readonly / markdown
167171
*/
168172
initCodemirror(cmObj) {
169173
let {key, selector, type, events} = cmObj;

‎js/m_apps/Frame.js‎

Lines changed: 129 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,9 @@ define([
1919
'vp_base/js/com/com_util',
2020
'vp_base/js/com/component/PopupComponent',
2121
'vp_base/js/com/component/SuggestInput',
22-
'vp_base/js/com/component/VarSelector'
23-
], function(frameHtml, frameCss, com_String, com_util, PopupComponent, SuggestInput, VarSelector) {
22+
'vp_base/js/com/component/VarSelector',
23+
'vp_base/js/m_apps/Subset'
24+
], function(frameHtml, frameCss, com_String, com_util, PopupComponent, SuggestInput, VarSelector, Subset) {
2425

2526
/**
2627
* Frame
@@ -61,6 +62,10 @@ define([
6162
'bool', 'str'
6263
];
6364

65+
// Add/Replace - subset
66+
this.subsetCm = null;
67+
this.subsetEditor = null;
68+
6469
this.loading = false;
6570

6671
this._addCodemirror('previewCode', this.wrapSelector('#vp_fePreviewCode'), 'readonly');
@@ -581,6 +586,9 @@ define([
581586
// render variable list
582587
// get prevvalue
583588
var prevValue = that.state.originObj;
589+
if (varList && varList.length > 0 && prevValue == '') {
590+
prevValue = varList[0].varName;
591+
}
584592
// replace
585593
that.renderVariableList(varList, prevValue);
586594
$(that.wrapSelector('#vp_feVariable')).trigger('change');
@@ -610,6 +618,9 @@ define([
610618
content.appendFormatLine('<option value="{0}">{1}</option>', 'value', 'Value');
611619
content.appendFormatLine('<option value="{0}">{1}</option>', 'calculation', 'Calculation');
612620
content.appendFormatLine('<option value="{0}">{1}</option>', 'replace', 'Replace');
621+
if (type == 'column' || type == 'replace') {
622+
content.appendFormatLine('<option value="{0}">{1}</option>', 'subset', 'Subset');
623+
}
613624
content.appendFormatLine('<option value="{0}">{1}</option>', 'apply', 'Apply');
614625
content.appendLine('</select></td></tr>');
615626
content.appendLine('</table>');
@@ -656,8 +667,25 @@ define([
656667
content.appendFormatLine('<div class="{0} {1} {2}" style="display: none;">', 'vp-inner-popup-tab', 'replace', 'vp-scrollbar');
657668
content.appendLine(this.renderReplacePage());
658669
content.appendLine('</div>'); // end of vp-inner-popup-tab replace
659-
660-
// tab 4. apply
670+
671+
// tab 4. subset
672+
if (type == 'column' || type == 'replace') {
673+
content.appendFormatLine('<div class="{0} {1}" style="display: none;">', 'vp-inner-popup-tab', 'subset');
674+
content.appendLine('<table class="vp-tbl-gap5"><colgroup><col width="80px"><col width="*"></colgroup>');
675+
676+
content.appendLine('<tr><td colspan="2">');
677+
content.appendLine('<div class="vp-fr-subset-box">');
678+
content.appendLine('<textarea class="vp-input vp-inner-popup-subset"></textarea>');
679+
content.appendLine('</div>');
680+
content.appendLine('</td></tr>');
681+
682+
content.appendLine('<tr><th><label>Value</label></th>');
683+
content.appendFormatLine('<td><input type="text" class="{0}"/>', 'vp-inner-popup-input3');
684+
content.appendFormatLine('<label><input type="checkbox" class="{0}" checked/><span>{1}</span></label>', 'vp-inner-popup-istext3','Text');
685+
content.appendLine('</td></tr></table>');
686+
content.appendLine('</div>'); // end of vp-inner-popup-tab subset
687+
}
688+
// tab 5. apply
661689
content.appendFormatLine('<div class="{0} {1}" style="display: none;">', 'vp-inner-popup-tab', 'apply');
662690
content.appendLine('<table class="vp-tbl-gap5"><colgroup><col width="80px"><col width="*"></colgroup>');
663691
content.appendLine('<tr><th><label>Column</label></th>');
@@ -668,6 +696,9 @@ define([
668696
content.appendLine('</tr></table>');
669697
content.appendLine('</div>'); // end of vp-inner-popup-tab apply
670698
content.appendLine('</div>'); // end of vp-inner-popup-addpage
699+
700+
// set content
701+
$(this.wrapSelector('.vp-inner-popup-body')).html(content.toString());
671702
return content.toString();
672703
}
673704

@@ -695,10 +726,13 @@ define([
695726
});
696727
content.appendLine('</table>');
697728
content.appendLine('</div>');
729+
730+
// set content
731+
$(this.wrapSelector('.vp-inner-popup-body')).html(content.toString());
698732
return content.toString();
699733
}
700734

701-
renderReplacePage = function() {
735+
renderReplacePage() {
702736
var content = new com_String();
703737
content.appendFormatLine('<label><input type="checkbox" class="{0}"/><span>{1}</span></label>', 'vp-inner-popup-use-regex', 'Use Regular Expression');
704738
content.appendLine('<br/><br/>');
@@ -711,7 +745,7 @@ define([
711745
return content.toString();
712746
}
713747

714-
renderReplaceInput = function(index) {
748+
renderReplaceInput(index) {
715749
var content = new com_String();
716750
content.appendLine('<tr>');
717751
content.appendLine('<td>');
@@ -727,7 +761,7 @@ define([
727761
return content.toString();
728762
}
729763

730-
renderAsType = function() {
764+
renderAsType() {
731765
var astypeList = this.astypeList;
732766
var content = new com_String();
733767
content.appendFormatLine('<div class="{0}">', 'vp-inner-popup-astype');
@@ -750,18 +784,52 @@ define([
750784
});
751785
content.appendLine('</tbody></table>');
752786
content.append('</div>');
787+
788+
// set content
789+
$(this.wrapSelector('.vp-inner-popup-body')).html(content.toString());
753790
return content.toString();
754791
}
755792

756-
openInputPopup = function(type, width=400, height=400) {
793+
openInputPopup(type, width=400, height=400) {
757794
var title = '';
758795
var content = '';
759796
let size = { width: width, height: height };
797+
let that = this;
760798

761799
switch (parseInt(type)) {
762800
case FRAME_EDIT_TYPE.ADD_COL:
763801
title = 'Add Column';
764802
content = this.renderAddPage('column', 'Column Name');
803+
804+
// bind codemirror
805+
this.subsetCm = this.initCodemirror({
806+
key: 'vp-inner-popup-subset',
807+
selector: this.wrapSelector('.vp-inner-popup-subset'),
808+
type: 'readonly'
809+
});
810+
// set subset
811+
this.subsetEditor = new Subset({
812+
pandasObject: this.state.tempObj,
813+
config: { name: 'Subset' } },
814+
{
815+
useInputVariable: true,
816+
useInputColumns: true,
817+
targetSelector: this.wrapSelector('.vp-inner-popup-subset'),
818+
pageThis: this,
819+
allowSubsetTypes: ['iloc', 'loc'],
820+
beforeOpen: function(subsetThis) {
821+
let contentState = that.getPopupContent(type);
822+
let name = com_util.convertToStr(contentState.name, contentState.nameastext);
823+
subsetThis.state.selectedColumns = [ name ];
824+
},
825+
finish: function(code) {
826+
that.subsetCm.setValue(code);
827+
that.subsetCm.save();
828+
setTimeout(function () {
829+
that.subsetCm.refresh();
830+
}, 1);
831+
}
832+
});
765833
break;
766834
case FRAME_EDIT_TYPE.ADD_ROW:
767835
title = 'Add Row';
@@ -775,6 +843,34 @@ define([
775843
title = 'Replace';
776844
// content = this.renderReplacePage();
777845
content = this.renderAddPage('replace', 'Column');
846+
847+
// bind codemirror
848+
this.subsetCm = this.initCodemirror({
849+
key: 'vp-inner-popup-subset',
850+
selector: this.wrapSelector('.vp-inner-popup-subset'),
851+
type: 'readonly'
852+
});
853+
// set subset
854+
this.subsetEditor = new Subset({
855+
pandasObject: this.state.tempObj,
856+
config: { name: 'Subset' } },
857+
{
858+
useInputVariable: true,
859+
useInputColumns: true,
860+
targetSelector: this.wrapSelector('.vp-inner-popup-subset'),
861+
pageThis: this,
862+
allowSubsetTypes: ['iloc', 'loc'],
863+
beforeOpen: function(subsetThis) {
864+
subsetThis.state.selectedColumns = that.state.selected.map(col=>col.code);
865+
},
866+
finish: function(code) {
867+
that.subsetCm.setValue(code);
868+
that.subsetCm.save();
869+
setTimeout(function () {
870+
that.subsetCm.refresh();
871+
}, 1);
872+
}
873+
});
778874
break;
779875
case FRAME_EDIT_TYPE.AS_TYPE:
780876
title = 'Convert type';
@@ -789,15 +885,10 @@ define([
789885

790886
// set size
791887
$(this.wrapSelector('.vp-inner-popup-box')).css(size);
792-
793-
// set content
794-
$(this.wrapSelector('.vp-inner-popup-body')).html(content);
795888

796889
// bindEventForAddPage
797890
this.bindEventForPopupPage();
798891

799-
let that = this;
800-
801892
// set column list
802893
vpKernel.getColumnList(this.state.tempObj).then(function(resultObj) {
803894
let { result } = resultObj;
@@ -865,6 +956,10 @@ define([
865956
});
866957
}
867958
}
959+
} else if (tab == 'subset') {
960+
content['subset'] = this.subsetCm?this.subsetCm.getValue():'';
961+
content['value'] = $(this.wrapSelector('.vp-inner-popup-input3')).val();
962+
content['valueastext'] = $(this.wrapSelector('.vp-inner-popup-istext3')).prop('checked');
868963
} else if (tab == 'apply') {
869964
content['column'] = $(this.wrapSelector('.vp-inner-popup-apply-column')).val();
870965
content['apply'] = $(this.wrapSelector('.vp-inner-popup-apply-lambda')).val();
@@ -1094,12 +1189,12 @@ define([
10941189
var tab = content.addtype;
10951190
if (tab == 'value') {
10961191
var value = com_util.convertToStr(content.value, content.valueastext);
1097-
code.appendFormat("{0}[{1}] = {2}", tempObj, name, value);
1192+
code.appendFormat("{0}[[{1}]] = {2}", tempObj, name, value);
10981193
} else if (tab == 'calculation') {
10991194
var { var1col, oper, var2col } = content;
11001195
var var1code = tempObj + "['" + var1col + "']";
11011196
var var2code = tempObj + "['" + var2col + "']";
1102-
code.appendFormat('{0}[{1}] = {2} {3} {4}', tempObj, name, var1code, oper, var2code);
1197+
code.appendFormat('{0}[[{1}]] = {2} {3} {4}', tempObj, name, var1code, oper, var2code);
11031198
} else if (tab == 'replace') {
11041199
var replaceStr = new com_String();
11051200
var useRegex = content['useregex'];
@@ -1122,8 +1217,11 @@ define([
11221217
code.append(', regex=True');
11231218
}
11241219
code.append(')');
1220+
} else if (tab == 'subset') {
1221+
var value = com_util.convertToStr(content.value, content.valueastext);
1222+
code.appendFormat("{0} = {1}", content.subset, value);
11251223
} else if (tab == 'apply') {
1126-
code.appendFormat("{0}[{1}] = {2}[{3}].apply({4})", tempObj, name, tempObj, content.column, content.apply);
1224+
code.appendFormat("{0}[[{1}]] = {2}[{3}].apply({4})", tempObj, name, tempObj, content.column, content.apply);
11271225
}
11281226
break;
11291227
case FRAME_EDIT_TYPE.ADD_ROW:
@@ -1335,6 +1433,21 @@ define([
13351433
$(this.wrapSelector(com_util.formatString('.{0}', VP_FE_MENU_BOX))).hide();
13361434
}
13371435

1436+
hide() {
1437+
super.hide();
1438+
this.subsetEditor && this.subsetEditor.hide();
1439+
}
1440+
1441+
close() {
1442+
super.close();
1443+
this.subsetEditor && this.subsetEditor.close();
1444+
}
1445+
1446+
remove() {
1447+
super.remove();
1448+
this.subsetEditor && this.subsetEditor.remove();
1449+
}
1450+
13381451
}
13391452

13401453
const VP_FE_BTN = 'vp-fe-btn';

0 commit comments

Comments
 (0)