columnSelector renewal - allow multi frame

minjk-bl · minjk-bl · commit 6934c502b5cb · 2021-10-18T00:55:01.000+09:00
diff --git a/src/api/functions/pandasCommand.py b/src/api/functions/pandasCommand.py
@@ -47,6 +47,26 @@ def _vp_get_columns_list(df):
         colList.append(cInfo)
     return colList
 
+def _vp_get_multi_columns_list(dfs = []):
+    """
+    Get Columns List with Detail Information of multiple dataframe
+    """
+    common_set = {}
+    for df in dfs:
+        common_set = common_set & set(df)
+    common_columns = list(common_set)
+
+    colList = []
+    for i, c in enumerate(common_columns):
+        cInfo = { 'label': c, 'value': c, 'dtype': str(dfs[0][c].dtype), 'location': i }
+        # value
+        if type(c).__name__ == 'str':
+            cInfo['value'] = "'{}'".format(c)
+        elif type(c).__name__ == 'Timestamp':
+            cInfo['value'] = str(c)
+        colList.append(cInfo)
+    return colList
+
 def _vp_get_column_category(df, col):
     """
     Get Column's Uniq values(Categrical data only, limit 20)
diff --git a/src/api_block/constData.js b/src/api_block/constData.js
@@ -816,14 +816,14 @@ define([
             tooltip: 'Work In Progress', // FIXME:
             file: 'nbextensions/visualpython/src/common/vpMerge',
             icon: '/nbextensions/visualpython/resource/apps/apps_merge.svg',
-            color: 0,
+            color: 3,
         },
         'reshape': {
             label: 'Reshape',
             tooltip: 'Work In Progress', // FIXME: 'Pivot & Melt',
             file: 'nbextensions/visualpython/src/common/vpReshape',
             icon: '/nbextensions/visualpython/resource/apps/apps_reshape.svg',
-            color: 0,
+            color: 3,
         },
         'chart': {
             label: 'Chart',
diff --git a/src/common/component/vpColumnSelector.js b/src/common/component/vpColumnSelector.js
@@ -49,38 +49,60 @@ define([
         /**
          * 
          * @param {string} frameSelector        query for parent component
-         * @param {string} dataframe            dataframe variable name
+         * @param {Object} config  dataframe:[], selectedList=[], includeList=[]
+         * @param {Array<string>} dataframe            dataframe variable name
          * @param {Array<string>} selectedList  
          * @param {Array<string>} includeList   
          */
-        constructor(frameSelector, dataframe, selectedList=[], includeList=[]) {
+        constructor(frameSelector, config) {
             this.uuid = 'u' + vpCommon.getUUID();
             this.frameSelector = frameSelector;
+
+            // configuration
+            var { dataframe, selectedList=[], includeList=[] } = config;
             this.dataframe = dataframe;
             this.selectedList = selectedList;
             this.includeList = includeList;
+
             this.columnList = [];
             this.pointer = { start: -1, end: -1 };
 
             var that = this;
-            kernelApi.getColumnList(dataframe, function(result) {
-                var colList = JSON.parse(result);
-                colList = colList.map(function(x) {
-                    return {
-                        ...x,
-                        value: x.label,
-                        code: x.value
-                    };
+            if (dataframe && dataframe.length > 1) {
+                kernelApi.getCommonColumnList(dataframe, function(result) {
+                    var colList = JSON.parse(result);
+                    colList = colList.map(function(x) {
+                        return {
+                            ...x,
+                            value: x.label,
+                            code: x.value
+                        };
+                    });
+                    if (includeList && includeList.length > 0) {
+                        that.columnList = colList.filter(col => includeList.includes(col.code));
+                    } else {
+                        that.columnList = colList;
+                    }
+                    that.load();
                 });
-                if (includeList && includeList.length > 0) {
-                    that.columnList = colList.filter(col => includeList.includes(col.code));
-                } else {
-                    that.columnList = colList;
-                }
-                that.load();
-                that.bindEvent();
-                that.bindDraggable();
-            });
+            } else {
+                kernelApi.getColumnList(dataframe, function(result) {
+                    var colList = JSON.parse(result);
+                    colList = colList.map(function(x) {
+                        return {
+                            ...x,
+                            value: x.label,
+                            code: x.value
+                        };
+                    });
+                    if (includeList && includeList.length > 0) {
+                        that.columnList = colList.filter(col => includeList.includes(col.code));
+                    } else {
+                        that.columnList = colList;
+                    }
+                    that.load();
+                });
+            }
         }
 
         _wrapSelector(query='') {
@@ -90,6 +112,8 @@ define([
         load() {
             $(vpCommon.wrapSelector(this.frameSelector)).html(this.render());
             vpCommon.loadCssForDiv(this._wrapSelector(), Jupyter.notebook.base_url + vpConst.BASE_PATH + vpConst.STYLE_PATH + 'common/component/columnSelector.css');
+            this.bindEvent();
+            this.bindDraggable();
         }
 
         getColumnList() {
diff --git a/src/common/kernelApi.js b/src/common/kernelApi.js
@@ -69,6 +69,14 @@ define([
         });
     }
 
+    var getCommonColumnList = function(dataframeList, callback) {
+        executePython(
+            vpCommon.formatString('_vp_print(_vp_get_multi_columns_list([{0}]))', dataframeList.join(','))
+            , function(result) {
+                callback(result);
+        });
+    }
+
     var getRowList = function(dataframe, callback) {
         executePython(
             vpCommon.formatString('_vp_print(_vp_get_rows_list({0}))', dataframe)
@@ -87,6 +95,7 @@ define([
         executePython: executePython,
         searchVarList: searchVarList,
         getColumnList: getColumnList,
+        getCommonColumnList: getCommonColumnList,
         getRowList: getRowList,
         getProfilingList: getProfilingList
     }
diff --git a/src/common/vpGroupby.js b/src/common/vpGroupby.js
@@ -485,7 +485,10 @@ define([
          * @param {Array<string>} includeList columns to include 
          */
         renderColumnSelector(previousList, includeList) {
-            this.popup.ColSelector = new vpColumnSelector(this._wrapSelector('.' + APP_POPUP_BODY), this.state.variable, previousList, includeList);
+            this.popup.ColSelector = new vpColumnSelector(
+                this._wrapSelector('.' + APP_POPUP_BODY), 
+                { dataframe: [this.state.variable], selectedList: previousList, includeList: includeList }
+            );
         }
 
         /**
