Apply DataSelector to DataSplit App

minjk-bl · minjk-bl · commit 5e07c798db1d · 2022-05-26T16:21:07.000+09:00
diff --git a/js/com/component/DataSelector.js b/js/com/component/DataSelector.js
@@ -54,6 +54,7 @@ define([
                 allowDataType: ['DataFrame', 'Series', 'ndarray', 'list', 'dict'], // default allow data types
                 // additional options
                 classes: '',
+                placeholder: '',
                 ...this.prop
             }
 
@@ -330,7 +331,7 @@ define([
         templateForTarget() {
             return `
                 <div class="vp-ds-box vp-ds-box-${this.uuid} vp-ds-uninit">
-                    <input type="text" class="vp-ds-target vp-input vp-state ${this.prop.classes}" id="${this.prop.id}" value="${this.prop.pageThis.state[this.prop.id]}"/>
+                    <input type="text" class="vp-ds-target vp-input vp-state ${this.prop.classes}" id="${this.prop.id}" value="${this.prop.pageThis.state[this.prop.id]}" placeholder="${this.prop.placeholder}"/>
                     <span class="vp-ds-filter"><img src="/nbextensions/visualpython/img/filter.svg"/></span>
                 </div>
             `;
diff --git a/js/m_ml/dataSplit.js b/js/m_ml/dataSplit.js
@@ -19,8 +19,9 @@ define([
     'vp_base/js/com/com_Const',
     'vp_base/js/com/com_String',
     'vp_base/js/com/component/PopupComponent',
-    'vp_base/js/com/component/VarSelector2'
-], function(dsHtml, com_util, com_interface, com_Const, com_String, PopupComponent, VarSelector2) {
+    'vp_base/js/com/component/VarSelector2',
+    'vp_base/js/com/component/DataSelector'
+], function(dsHtml, com_util, com_interface, com_Const, com_String, PopupComponent, VarSelector2, DataSelector) {
 
     /**
      * Data split
@@ -37,6 +38,7 @@ define([
                 targetData: '',
                 testSize: 0.25,
                 shuffle: 'True',
+                stratify: '',
                 trainFeatures: 'X_train',
                 trainTarget: 'y_train',
                 testFeatures: 'X_test',
@@ -101,27 +103,20 @@ define([
             }
             $(page).find('#testSize').html(sizeOptions);
 
-            // varselector TEST:
-            let varSelector = new VarSelector2(this.wrapSelector());
-            varSelector.setComponentID('featureData');
-            varSelector.addClass('vp-state vp-input');
-            varSelector.setValue(this.state.featureData);
-            varSelector.setPlaceholder('Select feature data');
-            $(page).find('#featureData').replaceWith(varSelector.toTagString());
-
-            varSelector = new VarSelector2(this.wrapSelector());
-            varSelector.setComponentID('targetData');
-            varSelector.addClass('vp-state vp-input');
-            varSelector.setValue(this.state.targetData);
-            varSelector.setPlaceholder('Select target data');
-            $(page).find('#targetData').replaceWith(varSelector.toTagString());
-
-            varSelector = new VarSelector2(this.wrapSelector());
-            varSelector.setComponentID('stratify');
-            varSelector.addClass('vp-state vp-input');
-            varSelector.setValue(this.state.stratify);
-            varSelector.setPlaceholder('None');
-            $(page).find('#stratify').replaceWith(varSelector.toTagString());
+            let featureSelector = new DataSelector({
+                pageThis: this, id: 'featureData', placeholder: 'Select feature data' 
+            });
+            $(page).find('#featureData').replaceWith(featureSelector.toTagString());
+
+            let targetSelector = new DataSelector({
+                pageThis: this, id: 'targetData', placeholder: 'Select target data' 
+            });
+            $(page).find('#targetData').replaceWith(targetSelector.toTagString());
+
+            let stratifySelector = new DataSelector({
+                pageThis: this, id: 'stratify', placeholder: 'None' 
+            });
+            $(page).find('#stratify').replaceWith(stratifySelector.toTagString());
             
             // load state
             let that = this;
