Add subset to Frame - Add column / Replace

minjk-bl · minjk-bl · commit df3e59120014 · 2022-06-03T19:55:09.000+09:00
diff --git a/css/m_apps/frame.css b/css/m_apps/frame.css
@@ -244,4 +244,35 @@
 }
 .vp-inner-popup-apply-column {
     width: 153px;
+}
+
+/* UDF Editor - CodeMirror */
+.vp-fr-subset-box .CodeMirror { 
+    display: inline-block;
+    width: calc(100% - 55px);
+    height: 30px;
+    border: 1px solid var(--gray-color);
+    border-radius: 3px;
+    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 );
+    overflow: hidden;
+}
+.vp-fr-subset-box .CodeMirror-empty { outline: none; }
+.vp-fr-subset-box .CodeMirror-empty.CodeMirror-focused { outline: none; }
+.vp-fr-subset-box .CodeMirror pre.CodeMirror-placeholder { color: #999; }
+
+/* Hide cursor in read only fields */
+.vp-fr-subset-box .CodeMirror-readonly .CodeMirror-cursor {
+    display: none !important
+}
+/* .CodeMirror-scroll { min-height: 80px; max-height: 80px;} */
+.vp-fr-subset-box .CodeMirror-code .cm-variable {
+    background-color: rgba(47, 133, 90, 0.2);
+}
+.vp-fr-subset-box .CodeMirror-code .cm-property {
+    background-color: rgba(246, 173, 85, 0.2);
+}
+
+.vp-fr-subset-box .vp-ds-button {
+    width: 50px;
+    vertical-align: top;
 }
diff --git a/css/m_apps/subset.css b/css/m_apps/subset.css
@@ -99,8 +99,8 @@
     border: 0.25px solid #E4E4E4;
     padding: 15px;
 }
-.vp-ds-tab-page-box.subset-row {
-    border-right: 0px;
+.vp-ds-tab-page-box.subset-column {
+    border-left: 0px;
 }
 /* .vp-ds-tab-page-box.subset-condition {
     grid-column-start: 1;
@@ -111,6 +111,9 @@
     font-weight: bold;
     margin: 5px 0px 0px 5px;
 }
+.vp-ds-rowtype-box.condition {
+    position: relative;
+}
 .vp-ds-rowtype-box.condition .vp-vs-box {
     padding-bottom: 5px;
 }
@@ -130,8 +133,10 @@
     width: 85px;
 }
 .vp-ds-rowtype-box.condition .vp-condition-use-text {
-    float: right;
-    margin-right: 42px;
+    /* float: right;
+    margin-right: 42px; */
+    position: absolute;
+    left: 245px;
 }
 .vp-ds-rowtype,
 .vp-ds-coltype {
diff --git a/js/com/com_generator.js b/js/com/com_generator.js
@@ -81,7 +81,7 @@ define([
             vp_bindColumnSource(selector, targetSelector, autoCols[target]);
             // on change event
             $(targetSelector).on('change', function() {
-                console.log('change event ', selector, targetSelector, autoCols[target]);
+                // console.log('change event ', selector, targetSelector, autoCols[target]);
                 vp_bindColumnSource(selector, this, autoCols[target]);
             });
         });
diff --git a/js/com/component/PopupComponent.js b/js/com/component/PopupComponent.js
@@ -164,6 +164,10 @@ define([
         /**
          * Initialize codemirror
          * @param {Object} cmObj { key, selector, type, ... }
+         *  - key      : key to save its value as state (this.state[key])
+         *  - selector : selector to distinguish codemirror tag (textarea)
+         *    ex) this.wrapSelector('.cm-tag')
+         *  - type     : code / readonly / markdown
          */
         initCodemirror(cmObj) {
             let {key, selector, type, events} = cmObj;
diff --git a/js/m_apps/Frame.js b/js/m_apps/Frame.js
@@ -19,8 +19,9 @@ define([
     'vp_base/js/com/com_util',
     'vp_base/js/com/component/PopupComponent',
     'vp_base/js/com/component/SuggestInput',
-    'vp_base/js/com/component/VarSelector'
-], function(frameHtml, frameCss, com_String, com_util, PopupComponent, SuggestInput, VarSelector) {
+    'vp_base/js/com/component/VarSelector',
+    'vp_base/js/m_apps/Subset'
+], function(frameHtml, frameCss, com_String, com_util, PopupComponent, SuggestInput, VarSelector, Subset) {
 
     /**
      * Frame
@@ -61,6 +62,10 @@ define([
                 'bool', 'str'
             ];
 
+            // Add/Replace - subset
+            this.subsetCm = null;
+            this.subsetEditor = null;
+
             this.loading = false;
 
             this._addCodemirror('previewCode', this.wrapSelector('#vp_fePreviewCode'), 'readonly');
@@ -581,6 +586,9 @@ define([
                     // render variable list
                     // get prevvalue
                     var prevValue = that.state.originObj;
+                    if (varList && varList.length > 0 && prevValue == '') {
+                        prevValue = varList[0].varName;
+                    }
                     // replace
                     that.renderVariableList(varList, prevValue);
                     $(that.wrapSelector('#vp_feVariable')).trigger('change');
@@ -610,6 +618,9 @@ define([
             content.appendFormatLine('<option value="{0}">{1}</option>', 'value', 'Value');
             content.appendFormatLine('<option value="{0}">{1}</option>', 'calculation', 'Calculation');
             content.appendFormatLine('<option value="{0}">{1}</option>', 'replace', 'Replace');
+            if (type == 'column' || type == 'replace') {
+                content.appendFormatLine('<option value="{0}">{1}</option>', 'subset', 'Subset');
+            }
             content.appendFormatLine('<option value="{0}">{1}</option>', 'apply', 'Apply');
             content.appendLine('</select></td></tr>');
             content.appendLine('</table>');
@@ -656,8 +667,25 @@ define([
             content.appendFormatLine('<div class="{0} {1} {2}" style="display: none;">', 'vp-inner-popup-tab', 'replace', 'vp-scrollbar');
             content.appendLine(this.renderReplacePage());
             content.appendLine('</div>'); // end of vp-inner-popup-tab replace
-            
-            // tab 4. apply
+
+            // tab 4. subset
+            if (type == 'column' || type == 'replace') {
+                content.appendFormatLine('<div class="{0} {1}" style="display: none;">', 'vp-inner-popup-tab', 'subset');
+                content.appendLine('<table class="vp-tbl-gap5"><colgroup><col width="80px"><col width="*"></colgroup>');
+
+                content.appendLine('<tr><td colspan="2">');
+                content.appendLine('<div class="vp-fr-subset-box">');
+                content.appendLine('<textarea class="vp-input vp-inner-popup-subset"></textarea>');
+                content.appendLine('</div>');
+                content.appendLine('</td></tr>');
+
+                content.appendLine('<tr><th><label>Value</label></th>');
+                content.appendFormatLine('<td><input type="text" class="{0}"/>', 'vp-inner-popup-input3');
+                content.appendFormatLine('<label><input type="checkbox" class="{0}" checked/><span>{1}</span></label>', 'vp-inner-popup-istext3','Text');
+                content.appendLine('</td></tr></table>');
+                content.appendLine('</div>'); // end of vp-inner-popup-tab subset
+            }
+            // tab 5. apply
             content.appendFormatLine('<div class="{0} {1}" style="display: none;">', 'vp-inner-popup-tab', 'apply');
             content.appendLine('<table class="vp-tbl-gap5"><colgroup><col width="80px"><col width="*"></colgroup>');
             content.appendLine('<tr><th><label>Column</label></th>');
@@ -668,6 +696,9 @@ define([
             content.appendLine('</tr></table>');
             content.appendLine('</div>'); // end of vp-inner-popup-tab apply
             content.appendLine('</div>'); // end of vp-inner-popup-addpage
+            
+            // set content
+            $(this.wrapSelector('.vp-inner-popup-body')).html(content.toString());
             return content.toString();
         }
 
@@ -695,10 +726,13 @@ define([
             });
             content.appendLine('</table>');
             content.appendLine('</div>');
+
+            // set content
+            $(this.wrapSelector('.vp-inner-popup-body')).html(content.toString());
             return content.toString();
         }
 
-        renderReplacePage = function() {
+        renderReplacePage() {
             var content = new com_String();
             content.appendFormatLine('<label><input type="checkbox" class="{0}"/><span>{1}</span></label>', 'vp-inner-popup-use-regex', 'Use Regular Expression');
             content.appendLine('<br/><br/>');
@@ -711,7 +745,7 @@ define([
             return content.toString();
         }
 
-        renderReplaceInput = function(index) {
+        renderReplaceInput(index) {
             var content = new com_String();
             content.appendLine('<tr>');
             content.appendLine('<td>');
@@ -727,7 +761,7 @@ define([
             return content.toString();
         }
 
-        renderAsType = function() {
+        renderAsType() {
             var astypeList = this.astypeList;
             var content = new com_String();
             content.appendFormatLine('<div class="{0}">', 'vp-inner-popup-astype');
@@ -750,18 +784,52 @@ define([
             });
             content.appendLine('</tbody></table>');
             content.append('</div>');
+
+            // set content
+            $(this.wrapSelector('.vp-inner-popup-body')).html(content.toString());
             return content.toString();
         }
 
-        openInputPopup = function(type, width=400, height=400) {
+        openInputPopup(type, width=400, height=400) {
             var title = '';
             var content = '';
             let size = { width: width, height: height };
+            let that = this;
     
             switch (parseInt(type)) {
                 case FRAME_EDIT_TYPE.ADD_COL:
                     title = 'Add Column';
                     content = this.renderAddPage('column', 'Column Name');
+
+                    // bind codemirror
+                    this.subsetCm = this.initCodemirror({ 
+                        key: 'vp-inner-popup-subset', 
+                        selector: this.wrapSelector('.vp-inner-popup-subset'), 
+                        type: 'readonly' 
+                    });
+                    // set subset
+                    this.subsetEditor = new Subset({ 
+                        pandasObject: this.state.tempObj,
+                        config: { name: 'Subset' } }, 
+                    { 
+                        useInputVariable: true,
+                        useInputColumns: true,
+                        targetSelector: this.wrapSelector('.vp-inner-popup-subset'),
+                        pageThis: this,
+                        allowSubsetTypes: ['iloc', 'loc'],
+                        beforeOpen: function(subsetThis) {
+                            let contentState = that.getPopupContent(type);
+                            let name = com_util.convertToStr(contentState.name, contentState.nameastext);
+                            subsetThis.state.selectedColumns = [ name ];
+                        },
+                        finish: function(code) {
+                            that.subsetCm.setValue(code);
+                            that.subsetCm.save();
+                            setTimeout(function () {
+                                that.subsetCm.refresh();
+                            }, 1);
+                        }
+                    });
                     break;
                 case FRAME_EDIT_TYPE.ADD_ROW:
                     title = 'Add Row';
@@ -775,6 +843,34 @@ define([
                     title = 'Replace';
                     // content = this.renderReplacePage();
                     content = this.renderAddPage('replace', 'Column');
+
+                    // bind codemirror
+                    this.subsetCm = this.initCodemirror({ 
+                        key: 'vp-inner-popup-subset', 
+                        selector: this.wrapSelector('.vp-inner-popup-subset'), 
+                        type: 'readonly' 
+                    });
+                    // set subset
+                    this.subsetEditor = new Subset({ 
+                        pandasObject: this.state.tempObj,
+                        config: { name: 'Subset' } }, 
+                    { 
+                        useInputVariable: true,
+                        useInputColumns: true,
+                        targetSelector: this.wrapSelector('.vp-inner-popup-subset'),
+                        pageThis: this,
+                        allowSubsetTypes: ['iloc', 'loc'],
+                        beforeOpen: function(subsetThis) {
+                            subsetThis.state.selectedColumns = that.state.selected.map(col=>col.code);
+                        },
+                        finish: function(code) {
+                            that.subsetCm.setValue(code);
+                            that.subsetCm.save();
+                            setTimeout(function () {
+                                that.subsetCm.refresh();
+                            }, 1);
+                        }
+                    });
                     break;
                 case FRAME_EDIT_TYPE.AS_TYPE:
                     title = 'Convert type';
@@ -789,15 +885,10 @@ define([
 
             // set size
             $(this.wrapSelector('.vp-inner-popup-box')).css(size);
-
-            // set content
-            $(this.wrapSelector('.vp-inner-popup-body')).html(content);
             
             // bindEventForAddPage
             this.bindEventForPopupPage();
 
-            let that = this;
-
             // set column list
             vpKernel.getColumnList(this.state.tempObj).then(function(resultObj) {
                 let { result } = resultObj;
@@ -865,6 +956,10 @@ define([
                                 });
                             }
                         }
+                    } else if (tab == 'subset') {
+                        content['subset'] = this.subsetCm?this.subsetCm.getValue():'';
+                        content['value'] = $(this.wrapSelector('.vp-inner-popup-input3')).val();
+                        content['valueastext'] = $(this.wrapSelector('.vp-inner-popup-istext3')).prop('checked');
                     } else if (tab == 'apply') {
                         content['column'] = $(this.wrapSelector('.vp-inner-popup-apply-column')).val();
                         content['apply'] = $(this.wrapSelector('.vp-inner-popup-apply-lambda')).val();
@@ -1094,12 +1189,12 @@ define([
                     var tab = content.addtype;
                     if (tab == 'value') {
                         var value = com_util.convertToStr(content.value, content.valueastext);
-                        code.appendFormat("{0}[{1}] = {2}", tempObj, name, value);
+                        code.appendFormat("{0}[[{1}]] = {2}", tempObj, name, value);
                     } else if (tab == 'calculation') {
                         var { var1col, oper, var2col } = content;
                         var var1code = tempObj + "['" + var1col + "']";
                         var var2code = tempObj + "['" + var2col + "']";
-                        code.appendFormat('{0}[{1}] = {2} {3} {4}', tempObj, name, var1code, oper, var2code);
+                        code.appendFormat('{0}[[{1}]] = {2} {3} {4}', tempObj, name, var1code, oper, var2code);
                     } else if (tab == 'replace') {
                         var replaceStr = new com_String();
                         var useRegex = content['useregex'];
@@ -1122,8 +1217,11 @@ define([
                             code.append(', regex=True');
                         }
                         code.append(')');
+                    } else if (tab == 'subset') {
+                        var value = com_util.convertToStr(content.value, content.valueastext);
+                        code.appendFormat("{0} = {1}", content.subset, value);
                     } else if (tab == 'apply') {
-                        code.appendFormat("{0}[{1}] = {2}[{3}].apply({4})", tempObj, name, tempObj, content.column, content.apply);
+                        code.appendFormat("{0}[[{1}]] = {2}[{3}].apply({4})", tempObj, name, tempObj, content.column, content.apply);
                     }
                     break;
                 case FRAME_EDIT_TYPE.ADD_ROW: 
@@ -1335,6 +1433,21 @@ define([
             $(this.wrapSelector(com_util.formatString('.{0}', VP_FE_MENU_BOX))).hide();
         }
 
+        hide() {
+            super.hide();
+            this.subsetEditor && this.subsetEditor.hide();
+        }
+
+        close() {
+            super.close();
+            this.subsetEditor && this.subsetEditor.close();
+        }
+
+        remove() {
+            super.remove();
+            this.subsetEditor && this.subsetEditor.remove();
+        }
+
     }
 
     const VP_FE_BTN = 'vp-fe-btn';
diff --git a/js/m_apps/Instance.js b/js/m_apps/Instance.js
diff --git a/js/m_apps/Subset.js b/js/m_apps/Subset.js

Original file line number	Diff line number	Diff line change
`@@ -99,8 +99,8 @@`
`99`	`99`	`border: 0.25px solid #E4E4E4;`
`100`	`100`	`padding: 15px;`
`101`	`101`	`}`
`102`		`-.vp-ds-tab-page-box.subset-row {`
`103`		`- border-right: 0px;`
	`102`	`+.vp-ds-tab-page-box.subset-column {`
	`103`	`+ border-left: 0px;`
`104`	`104`	`}`
`105`	`105`	`/* .vp-ds-tab-page-box.subset-condition {`
`106`	`106`	`grid-column-start: 1;`
`@@ -111,6 +111,9 @@`
`111`	`111`	`font-weight: bold;`
`112`	`112`	`margin: 5px 0px 0px 5px;`
`113`	`113`	`}`
	`114`	`+.vp-ds-rowtype-box.condition {`
	`115`	`+ position: relative;`
	`116`	`+}`
`114`	`117`	`.vp-ds-rowtype-box.condition .vp-vs-box {`
`115`	`118`	`padding-bottom: 5px;`
`116`	`119`	`}`
`@@ -130,8 +133,10 @@`
`130`	`133`	`width: 85px;`
`131`	`134`	`}`
`132`	`135`	`.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;`
`135`	`140`	`}`
`136`	`141`	`.vp-ds-rowtype,`
`137`	`142`	`.vp-ds-coltype {`