visualpython · minjk-bl · Mar 2, 2023 · Feb 23, 2023 · Feb 28, 2023 · Feb 28, 2023
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,3 @@
 dist/
 jupyterlab/lib/visualpython
-test/
+test/
diff --git a/visualpython/css/component/dataSelector.css b/visualpython/css/component/dataSelector.css
@@ -55,14 +55,14 @@
 }
 .vp-ds-data-box {
     width: 100%;
-    height: 160px;
+    height: 150px;
     align-content: baseline;
     align-items: center;
 }
 .vp-ds-type-box,
 .vp-ds-variable-box {
     border: 0.25px solid var(--border-gray-color);
-    height: 160px;
+    height: 150px;
     grid-row-gap: 0px;
     align-content: baseline;
 }
@@ -90,7 +90,7 @@
     margin-top: 10px;
 }
 .vp-ds-option-inner-box {
-    height: calc(100% - 30px);
+    height: calc(100% - 35px);
 }
 .vp-ds-df-option-box {
     height: 100%;

diff --git a/visualpython/css/component/multiSelector.css b/visualpython/css/component/multiSelector.css
@@ -79,4 +79,10 @@
     left: calc(100% - 25px);
     bottom: 23px;
     cursor: pointer;
+}
+.vp-cs-del-item {
+    position: relative;
+    float: right;
+    top: 4px;
+    cursor: pointer;
 }
diff --git a/visualpython/css/m_ml/modelInfo.css b/visualpython/css/m_ml/modelInfo.css
@@ -1,3 +1,7 @@
+.vp-model-select-box {
+    grid-column-gap: 5px;
+    align-items: start;
+}
 .vp-ins-select-title {
     font-weight: bold;
     color: var(--font-highlight);

diff --git a/visualpython/html/component/dataSelector.html b/visualpython/html/component/dataSelector.html
@@ -8,7 +8,7 @@
                 <div class="vp-inner-popup-close" title="Close data selector"></div>
             </div>
             <div class="vp-inner-popup-body vp-scrollbar">
-                <div class="vp-grid-col-p50">
+                <div class="vp-grid-col-p50 mb5">
                     <label class="vp-bold">Type</label>
                     <label class="vp-bold">Data</label>
                 </div>
@@ -22,7 +22,7 @@
                 </div>
                 <div class="vp-ds-option-box">
                     <label class="vp-bold">Option Page</label>
-                    <div class="vp-ds-option-inner-box">
+                    <div class="vp-ds-option-inner-box mt5">
 
                     </div>
                 </div>

diff --git a/visualpython/html/m_apps/file.html b/visualpython/html/m_apps/file.html
@@ -74,7 +74,7 @@
                             </td>
                         </tr>
                         <tr>
-                            <td><label for="vp_sampleReturn" class="vp-orange-text">Allocate to</label></td>
+                            <td><label for="vp_sampleReturn">Allocate to</label></td>
                             <td><input type="text" class="vp-input input-single" id="vp_sampleReturn" placeholder="" value="" title=""></td>
                         </tr>
                     </tbody>

diff --git a/visualpython/js/MainFrame.js b/visualpython/js/MainFrame.js
@@ -478,10 +478,10 @@ define([
                     let parentBlock = null;
                     let prevBlock = null;
                     loadStateList.forEach(obj => {
-                        let { blockType, menuId, menuState, menuConfig, argIdx, position, afterAction } = obj;
+                        let { file, blockType, menuId, menuState, menuConfig, argIdx, position, afterAction } = obj;
                         // get OptionComponent Object
                         // LAB: relative path needed
-                        let OptionComponent = require('./' + menuConfig.file);
+                        let OptionComponent = require('./' + file);
                         if (OptionComponent) {
                             let taskState = menuState.taskState;
                             let blockState = menuState.blockState;

diff --git a/visualpython/js/com/com_Config.js b/visualpython/js/com/com_Config.js
@@ -208,8 +208,7 @@ define([
                 vp_config_version: '1.0.0',
                 vp_signature: 'VisualPython',
                 vp_position: {},
-                // CHROME: default to display vp
-                vp_section_display: true,
+                vp_section_display: false,
                 vp_note_display: false,
                 vp_menu_width: Config.MENU_MIN_WIDTH,
                 vp_note_width: Config.BOARD_MIN_WIDTH
@@ -485,15 +484,15 @@ define([
                     that._checkMounted().then(function() {
                         that._readFromColab(configKey).then(function(result) {
                             let data = result;
-                            if (data == undefined || data == {}) {
+                            if (data == undefined || (data instanceof Object && Object.keys(data).length === 0)) {
                                 resolve(data);
                                 return;
                             }
                             if (dataKey == '') {
                                 resolve(data);
                                 return;
                             }
-                            if (Object.keys(data).length > 0) {
+                            if (data instanceof Object && Object.keys(data).length > 0) {
                                 resolve(data[dataKey]);
                                 return;
                             }
@@ -509,15 +508,15 @@ define([
                     // LAB: use local .visualpython files
                     that._readFromLab(configKey).then(function(result) {
                         let data = result;
-                        if (data == undefined || data == {}) {
+                        if (data == undefined || (data instanceof Object && Object.keys(data).length === 0)) {
                             resolve(data);
                             return;
                         }
                         if (dataKey == '') {
                             resolve(data);
                             return;
                         }
-                        if (Object.keys(data).length > 0) {
+                        if (data instanceof Object && Object.keys(data).length > 0) {
                             resolve(data[dataKey]);
                             return;
                         }
@@ -779,6 +778,40 @@ define([
             return Config.version;
         }
 
+        checkVersionTimestamp = function() {
+            let that = this;
+            // check version timestamp
+            let nowDate = new Date();
+            this.getData('version_timestamp', 'vpcfg').then(function(data) {
+                let doCheckVersion = false;
+                vpLog.display(VP_LOG_TYPE.DEVELOP, 'Checking its version timestamp... : ' + data);
+                if (data == undefined || (data instanceof Object && Object.keys(data).length === 0)) {
+                    // no timestamp, check version
+                    doCheckVersion = true;
+                } else if (data != '') {
+                    let lastCheck = new Date(parseInt(data));
+                    let diffCheck_now = new Date(nowDate.getFullYear(), nowDate.getMonth() + 1, nowDate.getDate());
+                    let diffCheck_last = new Date(lastCheck.getFullYear(), lastCheck.getMonth() + 1, lastCheck.getDate());
+
+                    let diff = Math.abs(diffCheck_now.getTime() - diffCheck_last.getTime());
+                    diff = Math.ceil(diff / (1000 * 3600 * 24));
+
+                    if (diff >= 1) {
+                        // if More than 1 day passed, check version
+                        doCheckVersion = true;
+                    }
+                }
+
+                // check version and update version_timestamp
+                if (doCheckVersion == true) {
+                    that.checkVpVersion(true);
+                }
+
+            }).catch(function(err) {
+                vpLog.display(VP_LOG_TYPE.ERROR, err);
+            })
+        }
+
         checkVpVersion(background=false) {
             let that = this;
             let nowVersion = this.getVpInstalledVersion();
@@ -818,6 +851,8 @@ define([
                             switch (clickedBtnIdx) {
                                 case 0:
                                     // cancel
+                                    // update version_timestamp
+                                    that.setData({ 'version_timestamp': new Date().getTime() }, 'vpcfg');
                                     break;
                                 case 1:
                                     // update

diff --git a/visualpython/js/com/com_generatorV2.js b/visualpython/js/com/com_generatorV2.js
@@ -134,14 +134,17 @@ define([
         package.options && package.options.forEach(function(o, i) {
             var obj = JSON.parse(JSON.stringify(o));
             let newTag = vp_createTag(pageThis, obj, state);
-            if (obj.required) {
+            if (obj.required === true || obj.output === true) {
                 tblInput.append(newTag);
             } else {
                 tblOption.append(newTag);
             }
         });
 
         // TODO: userOption
+        if (package.code.includes('${etc}')) {
+
+        }
 
         bindAutoComponentEvent(pageThis);
     }
@@ -163,7 +166,7 @@ define([
         let value = state[name];
 
         var requiredFontStyle = required == true? 'vp-orange-text' : '';
-        var lblTag = $(`<label>${label}</label>`).attr({
+        var lblTag = $(`<label class="vp-bold">${label}</label>`).attr({
             'for': name,
             'class': requiredFontStyle,
             'title': '(' + name + ')'

diff --git a/visualpython/js/com/component/MultiSelector.js b/visualpython/js/com/component/MultiSelector.js
@@ -305,7 +305,7 @@ define([
             // select - right
             tag.appendFormatLine('<div class="{0}">', APP_SELECT_RIGHT);
             var selectedList = this.dataList.filter(data => that.selectedList.includes(data.code));
-            tag.appendLine(this.renderSelectedBox(selectedList));
+            tag.appendLine(this.renderSelectedBox(this.selectedList));
             if (this.allowAdd) {
                 // add item 
                 tag.appendLine('<input type="text" class="vp-cs-add-item-name vp-input wp100" placeholder="New item to add" value="">');
@@ -380,62 +380,6 @@ define([
                 that.bindDraggable();
             });
 
-            // item indexing
-            $(this.wrapSelector('.' + APP_SELECT_ITEM)).on('click', function(event) {
-                var dataIdx = $(this).attr('data-idx');
-                var idx = $(this).index();
-                var added = $(this).hasClass('added'); // right side added item?
-                var selector = '';
-
-                // remove selection for select box on the other side
-                if (added) {
-                    // remove selection for left side
-                    $(that.wrapSelector('.' + APP_SELECT_ITEM + ':not(.added)')).removeClass('selected');
-                    // set selector
-                    selector = '.added';
-                } else {
-                    // remove selection for right(added) side
-                    $(that.wrapSelector('.' + APP_SELECT_ITEM + '.added')).removeClass('selected');
-                    // set selector
-                    selector = ':not(.added)';
-                }
-
-                if (vpEvent.keyManager.keyCheck.ctrlKey) {
-                    // multi-select
-                    that.pointer = { start: idx, end: -1 };
-                    $(this).toggleClass('selected');
-                } else if (vpEvent.keyManager.keyCheck.shiftKey) {
-                    // slicing
-                    var startIdx = that.pointer.start;
-
-                    if (startIdx == -1) {
-                        // no selection
-                        that.pointer = { start: idx, end: -1 };
-                    } else if (startIdx > idx) {
-                        // add selection from idx to startIdx
-                        var tags = $(that.wrapSelector('.' + APP_SELECT_ITEM + selector));
-                        for (var i = idx; i <= startIdx; i++) {
-                            $(tags[i]).addClass('selected');
-                        }
-                        that.pointer = { start: startIdx, end: idx };
-                    } else if (startIdx <= idx) {
-                        // add selection from startIdx to idx
-                        var tags = $(that.wrapSelector('.' + APP_SELECT_ITEM + selector));
-                        for (var i = startIdx; i <= idx; i++) {
-                            $(tags[i]).addClass('selected');
-                        }
-                        that.pointer = { start: startIdx, end: idx };
-                    }
-                } else {
-                    // single-select
-                    that.pointer = { start: idx, end: -1 };
-                    // un-select others
-                    $(that.wrapSelector('.' + APP_SELECT_ITEM + selector)).removeClass('selected');
-                    // select this
-                    $(this).addClass('selected');
-                }
-            });
-
             // item indexing - add all
             $(this.wrapSelector('.' + APP_SELECT_ADD_ALL_BTN)).on('click', function(event) {
                 $(that.wrapSelector('.' + APP_SELECT_BOX + '.left .' + APP_SELECT_ITEM)).appendTo(
@@ -510,6 +454,75 @@ define([
                     that._addNewItem(newItemName);
                 }
             });
+
+            this._bindItemClickEvent();
+        }
+
+        _bindItemClickEvent() {
+            let that = this;
+            // item indexing
+            $(this.wrapSelector('.' + APP_SELECT_ITEM)).off('click');
+            $(this.wrapSelector('.' + APP_SELECT_ITEM)).on('click', function(event) {
+                var dataIdx = $(this).attr('data-idx');
+                var idx = $(this).index();
+                var added = $(this).hasClass('added'); // right side added item?
+                var selector = '';
+
+                // remove selection for select box on the other side
+                if (added) {
+                    // remove selection for left side
+                    $(that.wrapSelector('.' + APP_SELECT_ITEM + ':not(.added)')).removeClass('selected');
+                    // set selector
+                    selector = '.added';
+                } else {
+                    // remove selection for right(added) side
+                    $(that.wrapSelector('.' + APP_SELECT_ITEM + '.added')).removeClass('selected');
+                    // set selector
+                    selector = ':not(.added)';
+                }
+
+                if (vpEvent.keyManager.keyCheck.ctrlKey) {
+                    // multi-select
+                    that.pointer = { start: idx, end: -1 };
+                    $(this).toggleClass('selected');
+                } else if (vpEvent.keyManager.keyCheck.shiftKey) {
+                    // slicing
+                    var startIdx = that.pointer.start;
+
+                    if (startIdx == -1) {
+                        // no selection
+                        that.pointer = { start: idx, end: -1 };
+                    } else if (startIdx > idx) {
+                        // add selection from idx to startIdx
+                        var tags = $(that.wrapSelector('.' + APP_SELECT_ITEM + selector));
+                        for (var i = idx; i <= startIdx; i++) {
+                            $(tags[i]).addClass('selected');
+                        }
+                        that.pointer = { start: startIdx, end: idx };
+                    } else if (startIdx <= idx) {
+                        // add selection from startIdx to idx
+                        var tags = $(that.wrapSelector('.' + APP_SELECT_ITEM + selector));
+                        for (var i = startIdx; i <= idx; i++) {
+                            $(tags[i]).addClass('selected');
+                        }
+                        that.pointer = { start: startIdx, end: idx };
+                    }
+                } else {
+                    // single-select
+                    that.pointer = { start: idx, end: -1 };
+                    // un-select others
+                    $(that.wrapSelector('.' + APP_SELECT_ITEM + selector)).removeClass('selected');
+                    // select this
+                    $(this).addClass('selected');
+                }
+            });
+
+            // item deleting (manually added item only)
+            $(this.wrapSelector('.vp-cs-del-item')).off('click');
+            $(this.wrapSelector('.vp-cs-del-item')).on('click', function(event) {
+                $(this).closest('.' + APP_SELECT_ITEM).remove();
+                that.pointer = { start: -1, end: -1 };
+            });
         }
 
         _addNewItem(newItemName) {
@@ -551,6 +564,7 @@ define([
                 let newItemIndex = this.dataList.length;
                 var targetTag = $(`<div class="${APP_SELECT_ITEM} ${APP_DRAGGABLE} added selected" data-idx="${newItemIndex}" data-name="${newItemName}" data-type="object" data-code="'${newItemName}'" title="${newItemName}: Added manually">
                     <span>${newItemName}</span>
+                    <div class="vp-cs-del-item vp-icon-close-small" title="Delete this manually added item"></div>
                 </div>`);
                 $(targetTag).appendTo(
                     $(this.wrapSelector('.' + APP_SELECT_BOX + '.right'))
@@ -560,6 +574,8 @@ define([
                 $(this.wrapSelector('.' + APP_SELECT_ITEM)).removeClass('selected');
                 // clear item input
                 $(this.wrapSelector('.vp-cs-add-item-name')).val('');
+                // bind click event
+                this._bindItemClickEvent();
                 // bind draggable
                 this.bindDraggable();
             }

diff --git a/visualpython/js/com/component/PopupComponent.js b/visualpython/js/com/component/PopupComponent.js
@@ -92,6 +92,7 @@ define([
             this.id = this.state.config.id;
             this.name = this.state.config.name;
             this.path = this.state.config.path;
+            this.category = this.state.config.category;
 
 
             this.config = {
@@ -530,7 +531,8 @@ define([
         template() { 
             this.$pageDom = $(popupComponentHtml.replaceAll('${vp_base}', com_Const.BASE_PATH));
             // set title
-            this.$pageDom.find('.vp-popup-title').text(this.name);
+            // this.$pageDom.find('.vp-popup-title').text(this.category + ' > ' + this.name);
+            this.$pageDom.find('.vp-popup-title').html(`<span style="color: var(--gray-color);font-size: 12px;">${this.category} > </span><span>${this.name}</span>`);
             // set body
             let bodyTemplate = this.templateForBody();
             // CHROME: check url keyword and replace it