visualpython · minjk-bl · Sep 21, 2023 · Sep 13, 2023 · Sep 13, 2023 · Sep 13, 2023
diff --git a/visualpython/css/component/popupComponent.css b/visualpython/css/component/popupComponent.css
@@ -525,7 +525,7 @@
     height: 25px;
 }
 .vp-popup-frame .vp-accordian-box {
-    padding: 0px 15px 15px 0px;
+    padding: 0px 15px 0px 0px;
 }
 
 /* resizable handler */

diff --git a/visualpython/css/m_apps/frame.css b/visualpython/css/m_apps/frame.css
@@ -145,6 +145,7 @@
     top: 0;
     background-color: var(--vp-background-color);
     border-bottom: 1px solid var(--vp-border-gray-color);
+    border-right: 1px solid var(--vp-border-gray-color);
 
     text-align: right;
     text-overflow: ellipsis;
@@ -168,6 +169,10 @@
     /* background: var(--vp-light-gray-color); */
     /* background: rgba(66, 165, 245, 0.2); */
 }
+.vp-fe-table-column-isnumeric {
+    float: left;
+    margin-right: 5px;
+}
 
 /* Row Hover */
 .vp-fe-table tbody tr:hover { 
@@ -302,6 +307,18 @@
     float: right;
     display: inline-block;
 }
+/* to datetime */
+.vp-inner-popup-todt-addcol-content {
+    display: grid;
+    row-gap: 5px;
+    max-height: 105px;
+}
+.vp-inner-popup-todt-addcol-head,
+.vp-inner-popup-todt-addcol-item {
+    display: grid;
+    grid-template-columns: 160px 160px auto;
+    column-gap: 5px;
+}
 
 /* UDF Editor - CodeMirror */
 .vp-fr-subset-box {

diff --git a/visualpython/css/m_visualize/seaborn.css b/visualpython/css/m_visualize/seaborn.css
@@ -47,17 +47,28 @@
     height: 100%;
 }
 .vp-tab-page-box.figure {
-    height: calc(100% - 30px);
+    height: 100%;
     align-content: baseline;
     grid-template-rows: 1fr;
+    overflow: hidden;
+}
+.vp-tab-page-box.figure > .vp-tab-page {
+    overflow: auto;
 }
 .vp-tab-page-box.plot {
-    height: calc(100% - 30px);
-    min-height: 352px;
+    /* height: calc(100% - 30px);
+    min-height: 352px; */
     align-content: baseline;
+    height: 100%;
+    max-height: 100%;
+    overflow: scroll;
+    padding: 15px 15px 0px 15px;
 }
 .vp-chart-plot-box {
     height: 100%;
+    display: grid;
+    grid-template-rows: 30px calc(100% - 30px);
+    overflow: auto;
 }
 .vp-chart-body {
     display: grid;
@@ -75,6 +86,14 @@
 .vp-chart-left-box, 
 .vp-chart-right-box {
     height: 100%;
+    display: grid;
+    grid-template-rows: 30px calc(100% - 30px);
+}
+.vp-chart-left-box {
+    overflow: auto;
+}
+.vp-chart-right-box {
+    overflow: hidden;
 }
 .vp-chart-preview-title {
     line-height: 30px;
@@ -86,7 +105,8 @@
 .vp-chart-preview-box {
     min-height: 352px;
     width: 100%;
-    height: calc(100% - 30px);
+    /* height: calc(100% - 30px); */
+    height: 100%;
 }
 .vp-chart-preview-content:empty::after {
     content: 'No preview image';

diff --git a/visualpython/data/m_ml/mlLibrary.js b/visualpython/data/m_ml/mlLibrary.js
@@ -175,11 +175,12 @@ define([
             name: 'SMOTE',
             install: '!pip install imblearn',
             import: 'from imblearn.over_sampling import SMOTE',
-            code: 'SMOTE(${random_state}${k_neighbors}${etc})',
+            code: 'SMOTE(${random_state}${k_neighbors}${sampling_strategy}${etc})',
             returnType: 'SMOTE',
             options: [
                 { name: 'random_state', component: ['input_number'], placeholder: '123', usePair: true },
-                { name: 'k_neighbors', component: ['input_number'], default: 5, usePair: true }
+                { name: 'k_neighbors', component: ['input_number'], default: 5, usePair: true },
+                { name: 'sampling_strategy', component: ['input'], placeholder: "'auto'", usePair: true }
             ]
         },
         /** Data Preparation - Scaling */

diff --git a/visualpython/data/m_visualize/seabornLibrary.js b/visualpython/data/m_visualize/seabornLibrary.js
@@ -148,13 +148,14 @@ define([
         },
         'barplot': {
             name: 'Bar Plot',
-            code: '${allocateTo} = sns.barplot(${data}${x}${y}${hue}${etc})',
+            code: '${allocateTo} = sns.barplot(${data}${x}${y}${hue}${orient}${etc})',
             description: 'Show point estimates and confidence intervals as rectangular bars.',
             options: [
                 { name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'], usePair: true },
                 { name: 'x', component: ['col_select'], usePair: true },
                 { name: 'y', component: ['col_select'], usePair: true },
                 { name: 'hue', component: ['col_select'], usePair: true },
+                { name: 'orient', component: ['option_select'], usePair: true },
                 { name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
             ]
         },

diff --git a/visualpython/html/component/fileNavigation.html b/visualpython/html/component/fileNavigation.html
@@ -10,7 +10,7 @@
 -->
 <!-- use body tag to strip comments out on requirejs/text plugin -->
 <body>
-    <div id="vp_fileNavigation">
+    <div id="vp_fileNavigation" class="vp-filenavigation-base">
         <div class='fileNavigationPage-container center-1rem-gray' >
             <div class="fileNavigationPage-sidebar">
                 <!-- Jupyter Notebook -->

diff --git a/visualpython/html/m_ml/fitPredict.html b/visualpython/html/m_ml/fitPredict.html
@@ -38,7 +38,7 @@
         </div>
         <div class="vp-grid-border-box">
             <div class="vp-multilang vp-ins-select-title">Options</div>
-            <div class="vp-ins-parameter-box vp-grid-col-95">
+            <div class="vp-ins-parameter-box vp-grid-col-130">
 
             </div>
         </div>

diff --git a/visualpython/html/m_ml/modelInfo.html b/visualpython/html/m_ml/modelInfo.html
@@ -38,7 +38,7 @@
         </div>
         <div class="vp-grid-border-box">
             <div class="vp-multilang vp-ins-select-title">Options</div>
-            <div class="vp-ins-parameter-box vp-grid-col-95">
+            <div class="vp-ins-parameter-box vp-grid-col-130">
 
             </div>
         </div>

diff --git a/visualpython/html/m_stats/probDist.html b/visualpython/html/m_stats/probDist.html
@@ -20,8 +20,8 @@
             <div class="vp-grid-col-160">
                 <label for="action" class="vp-orange-text">Action</label>
                 <select id="action" class="vp-select l">
-                    <option value="random-number">Generate random numbers</option>
-                    <option value="distribution-plot">Show distribution plot</option>
+                    <option class="vp-pd-display-option dist cont" value="random-number">Generate random numbers</option>
+                    <option class="vp-pd-display-option dist cont dist-plot" value="distribution-plot">Show distribution plot</option>
                     <option class="vp-pd-display-option cont" value="stats-to-pvalue">Statistics to P-value</option>
                     <option class="vp-pd-display-option cont" value="pvalue-to-stats">P-value to Statistics</option>
                 </select>

diff --git a/visualpython/html/m_visualize/seaborn.html b/visualpython/html/m_visualize/seaborn.html
@@ -100,6 +100,14 @@
                                             <label for="bins" class="vp-bold">Bins</label>
                                             <input type="number" class="vp-input vp-state" id="bins" placeholder="Type bins" step="5" min="0" />
                                         </div>
+                                        <div class="vp-grid-box sb-option">
+                                            <label for="orient" class="vp-bold">Orient</label>
+                                            <select id="orient" class="vp-select vp-state">
+                                                <option value="">Select option...</option>
+                                                <option value="'v'">Vertical</option>
+                                                <option value="'h'">Horizontal</option>
+                                            </select>
+                                        </div>
                                         <div class="vp-grid-box sb-option">
                                             <label for="kde" class="vp-bold">Kde</label>
                                             <select id="kde" class="vp-select vp-state">

diff --git a/visualpython/js/com/com_Config.js b/visualpython/js/com/com_Config.js
@@ -1109,11 +1109,11 @@ define([
     Config.ML_DATA_DICT = {
         'Data Preparation': [
             /** Encoding */
-            'OneHotEncoder', 'LabelEncoder', 'OrdinalEncoder', 'TargetEncoder', 'SMOTE',
+            'OneHotEncoder', 'LabelEncoder', 'OrdinalEncoder', 'TargetEncoder',
             /** Scaling */
             'StandardScaler', 'RobustScaler', 'MinMaxScaler', 'Normalizer', 'FunctionTransformer', 'PolynomialFeatures', 'KBinsDiscretizer',
             /** ETC */
-            'SimpleImputer', 'ColumnTransformer'
+            'SimpleImputer', 'SMOTE', 'ColumnTransformer'
         ],
         'Regression': [
             'LinearRegression', 'Ridge', 'Lasso', 'ElasticNet', 'SVR', 'DecisionTreeRegressor', 'RandomForestRegressor', 'GradientBoostingRegressor', 'XGBRegressor', 'LGBMRegressor', 'CatBoostRegressor',

diff --git a/visualpython/js/com/com_Event.js b/visualpython/js/com/com_Event.js
@@ -207,8 +207,13 @@ define([], function() {
                             that.keyManager.keyCheck.shiftKey = false;
                         }
                         if (evt.keyCode == that.keyManager.keyCode.escKey) {
+                            // check if there is visible file navigation : FileNavigation
+                            if ($('.vp-filenavigation-base:visible').length > 0) {
+                                // close file navigation
+                                $('.vp-filenavigation-base:visible').remove();
+                            }
                             // check if there is visible data selector : DataSelector
-                            if ($('.vp-dataselector-base:visible').length > 0) {
+                            else if ($('.vp-dataselector-base:visible').length > 0) {
                                 // close data selector
                                 $('.vp-dataselector-base:visible').remove();
                             }

diff --git a/visualpython/js/com/component/FileNavigation.js b/visualpython/js/com/component/FileNavigation.js
@@ -84,6 +84,10 @@ define([
             this.pathStackPointer = -1;
             this.pathStack = [];
             this.currentFileList = [];
+            this.selectedExt = '';
+            if (this.state.extensions.length > 0) {
+                this.selectedExt = this.state.extensions[0];
+            }
 
             this.pathState = {
                 parentPath: '',
@@ -280,6 +284,32 @@ define([
             // clear body
             $(this.wrapSelector('.fileNavigationPage-body')).html('');
 
+            /**
+             * Filter file/dir which included in this.state.extensions
+             */
+            if (Array.isArray(this.state.extensions) && this.state.extensions.length > 0 && this.state.extensions.toString() !== '') {
+                fileList = fileList.filter((data, index) => {
+                    if (index == 0) {
+                        return true;
+                    }
+
+                    if (data.type && data.type == 'dir') {
+                        // if directory, just show
+                        return true;
+                    } else if (data.name) {
+                        var extension = data.name.substring(data.name.lastIndexOf('.') + 1);
+                        // if (that.state.extensions.includes(extension)) {
+                        if (that.selectedExt === '' || extension === that.selectedExt) {
+                            return true;
+                        } else {
+                            return false;
+                        }
+                    } else {
+                        return false;
+                    }
+                });
+            }
+
             // render file items
             let dirArr = [];
             let fileArr = [];
@@ -411,12 +441,12 @@ define([
             page.appendFormatLine('<input id="{0}" type="text" class="vp-input" placeholder="{1}" value="{2}"/>'
                                 , 'vp_fileNavigationInput', 'New File Name', this.state.fileName);
             page.appendFormatLine('<select id="{0}" class="vp-select">', 'vp_fileNavigationExt');
+            page.appendLine('<option value="">All files(*.*)</option>');
             if (this.state.extensions && this.state.extensions.length > 0) {
+                let selectedExt = this.selectedExt;
                 this.state.extensions.forEach(ext => {
-                    page.appendFormatLine('<option value="{0}">*.{1}</option>', ext, ext);
+                    page.appendFormatLine('<option value="{0}" {1}>*.{2}</option>', ext, (selectedExt === ext?'selected':''), ext);
                 });
-            } else {
-                page.appendLine('<option value="">All files(*.*)</option>');
             }
             page.appendLine('</select>');
             page.appendFormatLine('<button class="{0} vp-button" data-menu="{1}">{2}</button>', 'vp-filenavi-btn', 'select', 'Select');
@@ -430,6 +460,13 @@ define([
 
                 that.handleSelectFile(filePath, fileName);
             });
+            // bind file extension change event
+            $(this.wrapSelector('#vp_fileNavigationExt')).on('change', function() {
+                let ext = $(this).val();
+                that.selectedExt = ext;
+
+                that.renderFileList();
+            });
             // bind save cancel event
             $(this.wrapSelector('.vp-filenavi-btn')).on('click', function() {
                 let menu = $(this).data('menu');
@@ -477,10 +514,10 @@ define([
             let that = this;
             /** Implement after rendering */
             // if save mode
-            if (this.state.type == 'save') {
-                // render saving box
-                this.renderSaveBox();
-            }
+            // if (this.state.type == 'save') {
+            // render saving box
+            this.renderSaveBox();
+            // }
 
             // get current path
             this.getCurrentDirectory().then(function(currentPath) {
@@ -527,20 +564,21 @@ define([
             //============================================================================
             // Set selection result
             //============================================================================
-            if (this.state.type == 'save') {
-                // add as saving file
-                this.setSelectedFile(fileInput, pathInput);
-            } else {
-                // Manage result using finish function
-                let filesPath = [{ file: fileInput, path: pathInput }]; //FIXME: fix it if multiple selection implemented
-                let status = true;
-                let error = null;
-                vpLog.display(VP_LOG_TYPE.DEVELOP, 'fileNavigation finished', filesPath, status, error);
-                this.state.finish(filesPath, status, error);
+            this.setSelectedFile(fileInput, pathInput);
+            // if (this.state.type == 'save') {
+            //     // add as saving file
+            //     this.setSelectedFile(fileInput, pathInput);
+            // } else {
+            //     // Manage result using finish function
+            //     let filesPath = [{ file: fileInput, path: pathInput }]; //FIXME: fix it if multiple selection implemented
+            //     let status = true;
+            //     let error = null;
+            //     vpLog.display(VP_LOG_TYPE.DEVELOP, 'fileNavigation finished', filesPath, status, error);
+            //     this.state.finish(filesPath, status, error);
 
-                // remove and close file navigation
-                this.close();
-            }
+            //     // remove and close file navigation
+            //     this.close();
+            // }
         }
         getCurrentDirectory() {
             return vpKernel.getCurrentDirectory();
@@ -588,31 +626,6 @@ define([
                     return a - b;
                 });
 
-                /**
-                 * Filter file/dir which included in this.state.extensions
-                 */
-                if (Array.isArray(that.state.extensions) && that.state.extensions.length > 0 && that.state.extensions.toString() !== '') {
-                    filtered_varList = filtered_varList.filter((data, index) => {
-                        if (index == 0) {
-                            return true;
-                        }
-
-                        if (data.type && data.type == 'dir') {
-                            // if file, just show
-                            return true;
-                        } else if (data.name) {
-                            var extension = data.name.substring(data.name.lastIndexOf('.') + 1);
-                            if (that.state.extensions.includes(extension)) {
-                                return true;
-                            } else {
-                                return false;
-                            }
-                        } else {
-                            return false;
-                        }
-                    });
-                }
-
                 vpLog.display(VP_LOG_TYPE.DEVELOP, 'FileNavigation - getFileList: ', filtered_varList);
 
                 var { currentDirStr,  currentRelativePathStr } = that.splitPathStrAndSetStack(dirObj, filtered_varList);