From fad03c2048d918bf37389627e8d5859221c20ec2 Mon Sep 17 00:00:00 2001 From: "blacklogic.dev" Date: Fri, 18 Jun 2021 17:28:05 +0900 Subject: [PATCH 01/19] deploy visualpython 1.1.5 --- src/api_block/blockContainer.js | 2 +- src/api_block/index.html | 2 +- src/common/constant.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/api_block/blockContainer.js b/src/api_block/blockContainer.js index 154200f6..5f1104b3 100644 --- a/src/api_block/blockContainer.js +++ b/src/api_block/blockContainer.js @@ -2626,7 +2626,7 @@ define([ this.hideOptionPreviewBox(); $(VP_ID_PREFIX + VP_APIBLOCK_BOARD_OPTION_PREVIEW_BUTTON).removeClass('enabled'); - this.setNavigator(BLOCK_CODELINE_TYPE.NONE, 'Visual Python 1.1.4'); + this.setNavigator(BLOCK_CODELINE_TYPE.NONE, 'Visual Python 1.1.5'); this.setFocusedPageType(FOCUSED_PAGE_TYPE.BOARD); $('.vp-apiblock-option-tab-none').css(STR_DISPLAY, STR_BLOCK); } diff --git a/src/api_block/index.html b/src/api_block/index.html index 8c436f4a..7271a2c3 100644 --- a/src/api_block/index.html +++ b/src/api_block/index.html @@ -171,7 +171,7 @@ id='vp_apiblock_option_page'>
- Visual Python 1.1.4 + Visual Python 1.1.5
diff --git a/src/common/constant.js b/src/common/constant.js index b35ddd6a..fa53cee6 100644 --- a/src/common/constant.js +++ b/src/common/constant.js @@ -48,7 +48,7 @@ define ([ * toolbar btn properties */ const TOOLBAR_BTN_INFO = { - HELP: "Visual Python 1.1.4" + HELP: "Visual Python 1.1.5" // , ICON: "fa-angellist" , ICON: "vp-main-icon" , ID: "vpBtnToggle" From 4299cfbbf38fac65e8cdfd066129721f9a3369a5 Mon Sep 17 00:00:00 2001 From: minjk-bl Date: Mon, 5 Jul 2021 18:08:24 +0900 Subject: [PATCH 02/19] change import design --- css/component/common.css | 5 +++++ src/file_io/import.html | 28 +++++++++++++++++++++----- src/file_io/import.js | 43 ++++++++++++++++++++++++++++++---------- 3 files changed, 61 insertions(+), 15 deletions(-) diff --git a/css/component/common.css b/css/component/common.css index 8864552f..75f3272a 100644 --- a/css/component/common.css +++ b/css/component/common.css @@ -55,3 +55,8 @@ color: #696969; cursor: not-allowed; } + +/* cursor as pointer */ +.vp-cursor { + cursor: pointer; +} \ No newline at end of file diff --git a/src/file_io/import.html b/src/file_io/import.html index 0fc1f449..6576c0d1 100644 --- a/src/file_io/import.html +++ b/src/file_io/import.html @@ -22,7 +22,7 @@ /* empty required input */ #vp-wrapper #vp_userOption input[type="text"]:invalid{ - border: 1px solid #c22; + border: 1px solid var(--hightlight-color); } #vp-wrapper #vp_userOption input[type="text"]:valid, #vp-wrapper #vp_userOption input[type="text"]:focus { @@ -30,9 +30,27 @@ } /* import library table style */ + #vp_tblImport { + width: 100%; + min-width: 250px; + max-width: 450px; + } + #vp_tblImport tr { + height: 30px; + line-height: 30px; + } + .vp-add-library, .vp-add-alias { - width: 98%; + /* width: 98%; */ + width: 100%; + height: 30px; + line-height: 30px; + } + + #vp_addLibrary { + width: 88px; + margin-top: 15px; } @@ -42,15 +60,15 @@
Required Input & Output
- +
- + - +
Package NameLibrary Name Alias
diff --git a/src/file_io/import.js b/src/file_io/import.js index 38c1c86c..d588f941 100644 --- a/src/file_io/import.js +++ b/src/file_io/import.js @@ -135,9 +135,10 @@ define([ try { var importMeta = JSON.parse(decodeURIComponent(this.metadata.options.find(x=>x.id=='vp_importMeta').value)); importMeta && importMeta.forEach((obj, i) => { - var tagTr = $(` - - `); + // var tagTr = $(` + // + // `); + var tagTr = $(that.renderLibraryRow(i, obj.library.toLowerCase(), obj.alias)); $(this.wrapSelector("#vp_tblImport tr:last")).before(tagTr); }); @@ -148,10 +149,11 @@ define([ // // // - var tagTr = $(` - - `); - + // var tagTr = $(` + // + // `); + var tagTr = $(that.renderLibraryRow(i, package.library.toLowerCase(), package.alias)); + $(this.wrapSelector("#vp_tblImport tr:last")).before(tagTr); // add to package input @@ -168,9 +170,12 @@ define([ // 라이브러리 추가 $(this.wrapSelector('#vp_addLibrary')).click(function() { - var tagTr = $(` - - `); + var libsLength = $(that.wrapSelector("#vp_tblImport tr:not(:first):not(:last)")).length; + + // var tagTr = $(` + // + // `); + var tagTr = $(that.renderLibraryRow(libsLength, '', '')); $(that.wrapSelector("#vp_tblImport tr:last")).before(tagTr); }); @@ -195,6 +200,24 @@ define([ } + ImportPackage.prototype.renderLibraryRow = function(idx, libraryName, aliasName) { + var tag = new sb.StringBuilder(); + /** + * + + + */ + tag.append(''); + tag.appendFormat('' + , 'vp_library' + idx, 'vp-input m vp-add-library', 'Type library name', libraryName); + tag.appendFormat('' + , 'vp_alias' + idx, 'vp-input m vp-add-alias', 'Type alias', aliasName); + // tag.appendFormat('', 'vp-remove-option w100', 'x'); + tag.appendFormat('', 'fa fa-close', 'vp-remove-option w100 vp-cursor'); + tag.append(''); + return tag.toString(); + } + /** * 코드 생성 * @param {boolean} addCell 셀 추가 여부 From 85eee450ec09be0326ba6776714201a132b7691c Mon Sep 17 00:00:00 2001 From: minjk-bl Date: Mon, 5 Jul 2021 18:08:43 +0900 Subject: [PATCH 03/19] remove border from Apps menu box --- css/api_block/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/api_block/index.css b/css/api_block/index.css index 6fd85c31..bec347a5 100644 --- a/css/api_block/index.css +++ b/css/api_block/index.css @@ -119,7 +119,7 @@ width: 58; height: 58px; text-align: center; - border: 0.25px solid #C4C4C4; + /* border: 0.25px solid #C4C4C4; */ box-sizing: border-box; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1); border-radius: 2px; From 0176c0387e7d1f1666b20348e92d62efa5673abc Mon Sep 17 00:00:00 2001 From: minjk-bl Date: Mon, 5 Jul 2021 18:09:16 +0900 Subject: [PATCH 04/19] update FrameEditor - new info box / one-hot encoding function added --- css/common/frameEditor.css | 47 ++++++++++- src/api/functions/pandasCommand.py | 15 +++- src/common/vpFrameEditor.js | 122 +++++++++++++++++++++++++---- 3 files changed, 167 insertions(+), 17 deletions(-) diff --git a/css/common/frameEditor.css b/css/common/frameEditor.css index 66a339be..225b0d42 100644 --- a/css/common/frameEditor.css +++ b/css/common/frameEditor.css @@ -60,7 +60,8 @@ padding: 10px; display: grid; grid-row-gap: 5px; - grid-template-rows: 35px 30px 60% calc(40% - 80px); + grid-template-rows: 35px 30px calc(100% - 80px); + /* grid-template-rows: 35px 30px 60% calc(40% - 80px); */ } /* preview code */ @@ -96,6 +97,15 @@ cursor: pointer; } +.vp-fe-df-showinfo { + cursor: pointer; + float: right; + /* margin-top: 5px; + margin-right: 5px; */ + width: fit-content; +} + + .vp-fe-menu-box { position: fixed; top: 0; @@ -226,9 +236,20 @@ } .vp-fe-info { - width: 100%; + display: none; + /* width: 100%; height: 100%; + margin: 0px; */ + + position: absolute; + width: 70%; + height: 70%; margin: 0px; + top: 20%; + right: 10px; + background: #FFFFFF; + border: 0.25px solid #C4C4C4; + box-shadow: 1px 1px 2px rgb(0 0 0 / 10%); } .vp-fe-info-title { @@ -237,6 +258,7 @@ line-height: 20px; font-weight: bold; background: #F5F5F5; + padding: 0px 10px; } .vp-fe-info-content { @@ -257,6 +279,27 @@ word-wrap: break-all; /* Internet Explorer 5.5+ */ } +.vp-fe-info-error-box { + margin: 7px; + padding: 10px; + background: #FFFFFF; + border: 0.25px solid #C4C4C4; + box-shadow: 1px 1px 2px rgb(0 0 0 / 10%); + border-radius: 2px; +} +.vp-fe-info-error-box i.fa-exclamation-triangle { + color: #F37704; +} +.vp-fe-info-error-box-title { + color: #F37704; + font-weight: bold; +} +.vp-fe-info-error-box pre { + background: #eeeeee; + margin: 0px; + padding: 7px; +} + /** buttons */ .vp-fe-btn-box { position: absolute; diff --git a/src/api/functions/pandasCommand.py b/src/api/functions/pandasCommand.py index 9698b8ff..4198a9d5 100644 --- a/src/api/functions/pandasCommand.py +++ b/src/api/functions/pandasCommand.py @@ -1,6 +1,8 @@ """ Pandas Objects Command """ +import pandas as _vp_pd +from IPython.core.display import display def _vp_get_rows_list(df): """ @@ -59,4 +61,15 @@ def _vp_get_dataframe_as_list(df): """ Get Dataframe as List """ - return df.values.tolist() \ No newline at end of file + return df.values.tolist() + +def _vp_display_dataframe_info(df): + """ + Get info of dataframe + """ + display(df.shape) + _notnull = df.notnull().sum() + _types = df.dtypes + _desc = df.describe().T + _info = _vp_pd.concat([_notnull, _types], axis=1, keys=['Non-Null Count','Dtype']) + display(_vp_pd.concat([_info, _desc], axis=1)) \ No newline at end of file diff --git a/src/common/vpFrameEditor.js b/src/common/vpFrameEditor.js index 5f123cb8..14d58e45 100644 --- a/src/common/vpFrameEditor.js +++ b/src/common/vpFrameEditor.js @@ -32,6 +32,7 @@ define([ const VP_FE_DF_BOX = 'vp-fe-df-box'; const VP_FE_DF_REFRESH = 'vp-fe-df-refresh'; + const VP_FE_DF_SHOWINFO = 'vp-fe-df-showinfo'; const VP_FE_MENU_BOX = 'vp-fe-menu-box'; const VP_FE_MENU_ITEM = 'vp-fe-menu-item'; @@ -55,6 +56,9 @@ define([ const VP_FE_INFO_TITLE = 'vp-fe-info-title'; const VP_FE_INFO_CONTENT = 'vp-fe-info-content'; + const VP_FE_INFO_ERROR_BOX = 'vp-fe-info-error-box'; + const VP_FE_INFO_ERROR_BOX_TITLE = 'vp-fe-info-error-box-title'; + const VP_FE_BUTTON_BOX = 'vp-fe-btn-box'; const VP_FE_BUTTON_CANCEL = 'vp-fe-btn-cancel'; const VP_FE_BUTTON_APPLY = 'vp-fe-btn-apply'; @@ -234,6 +238,7 @@ define([ page.appendFormatLine(''); page.appendFormatLine('', VP_FE_DF_REFRESH, 'fa fa-refresh'); + page.appendFormatLine('', VP_FE_DF_SHOWINFO, 'vp-button', 'fa fa-columns'); page.appendLine('
'); // Table @@ -241,13 +246,14 @@ define([ page.appendLine('
'); // End of Table + page.appendLine(''); // VP_FE_BODY + // Info Box page.appendFormatLine('
', VP_FE_INFO); page.appendFormatLine('
Info
', VP_FE_INFO_TITLE); page.appendFormatLine('
content
', VP_FE_INFO_CONTENT); page.appendLine('
'); // End of VP_FE_INFO - page.appendLine(''); // VP_FE_BODY // apply button page.appendFormatLine('
', VP_FE_BUTTON_BOX); @@ -391,11 +397,11 @@ define([ content.appendLine(''); content.appendFormatLine('', type); content.appendFormatLine(''); content.appendLine(''); content.appendFormatLine('
', 'vp-popup-input1'); - content.appendFormatLine('', 'vp-popup-istext1','Text'); + content.appendFormatLine('', 'vp-popup-istext1','Text'); content.appendLine('
', 'vp-popup-input2'); - content.appendFormatLine('', 'vp-popup-istext2','Text'); + content.appendFormatLine('', 'vp-popup-istext2','Text'); content.appendLine('
'); return content.toString(); } @@ -494,6 +500,27 @@ define([ } + FrameEditor.prototype.showInfo = function() { + $(this.wrapSelector('.' + VP_FE_INFO)).show(); + } + + FrameEditor.prototype.hideInfo = function() { + $(this.wrapSelector('.' + VP_FE_INFO)).hide(); + } + + FrameEditor.prototype.renderInfoPage = function(renderedText, isHtml = true) { + var tag = new sb.StringBuilder(); + tag.appendFormatLine('
', VP_FE_INFO_CONTENT + , 'rendered_html'); // 'rendered_html' style from jupyter output area + if (isHtml) { + tag.appendLine(renderedText); + } else { + tag.appendFormatLine('
{0}
', renderedText); + } + tag.appendLine('
'); + return tag.toString(); + } + FrameEditor.prototype.loadInfo = function() { var that = this; @@ -506,7 +533,8 @@ define([ this.state.selected = selected; var code = new sb.StringBuilder(); - code.appendFormat("{0}", this.state.tempObj); + var locObj = new sb.StringBuilder(); + locObj.appendFormat("{0}", this.state.tempObj); if (this.state.selected != '') { var rowCode = ':'; var colCode = ':'; @@ -516,15 +544,62 @@ define([ if (this.state.axis == 1) { colCode = '[' + this.state.selected.join(',') + ']'; } - code.appendFormat(".loc[{0},{1}]", rowCode, colCode); + locObj.appendFormat(".loc[{0},{1}]", rowCode, colCode); } - code.append(".value_counts()"); - kernelApi.executePython(code.toString(), function(result) { - $(that.wrapSelector('.' + VP_FE_INFO_CONTENT)).replaceWith(function() { - // return vpCommon.formatString('
{1}
', VP_FE_INFO_CONTENT, result); - return vpCommon.formatString('
{1}
', VP_FE_INFO_CONTENT, result); - }); - }); + // code.append(".value_counts()"); + code.appendFormat('_vp_display_dataframe_info({0})', locObj.toString()); + + // kernelApi.executePython(code.toString(), function(result) { + // $(that.wrapSelector('.' + VP_FE_INFO_CONTENT)).replaceWith(function() { + // // return vpCommon.formatString('
{1}
', VP_FE_INFO_CONTENT, result); + // return vpCommon.formatString('
{1}
', VP_FE_INFO_CONTENT, result); + // }); + // }); + + Jupyter.notebook.kernel.execute( + code.toString(), + { + iopub: { + output: function(msg) { + if (msg.content.data) { + var htmlText = String(msg.content.data["text/html"]); + var codeText = String(msg.content.data["text/plain"]); + if (htmlText != 'undefined') { + $(that.wrapSelector('.' + VP_FE_INFO_CONTENT)).replaceWith(function() { + return that.renderInfoPage(htmlText); + }); + } else if (codeText != 'undefined') { + // plain text as code + $(that.wrapSelector('.' + VP_FE_INFO_CONTENT)).replaceWith(function() { + return that.renderInfoPage(codeText, false); + }); + } else { + $(that.wrapSelector('.' + VP_FE_INFO_CONTENT)).replaceWith(function() { + return that.renderInfoPage(''); + }); + } + } else { + var errorContent = new sb.StringBuilder(); + if (msg.content.ename) { + errorContent.appendFormatLine('
', VP_FE_INFO_ERROR_BOX); + errorContent.appendLine(''); + errorContent.appendFormatLine('' + , VP_FE_INFO_ERROR_BOX_TITLE, msg.content.ename); + if (msg.content.evalue) { + // errorContent.appendLine('
'); + errorContent.appendFormatLine('
{0}
', msg.content.evalue.split('\\n').join('
')); + } + errorContent.appendLine('
'); + } + $(that.wrapSelector('.' + VP_FE_INFO_CONTENT)).replaceWith(function() { + return that.renderInfoPage(errorContent); + }); + } + } + } + }, + { silent: false, store_history: true, stop_on_error: true } + ); } FrameEditor.prototype.getTypeCode = function(type, content={}) { @@ -577,6 +652,9 @@ define([ code.appendFormat("{0}{1}.drop_duplicates(axis={2}, inplace=True)", tempObj, locObj, axis); break; case FRAME_EDIT_TYPE.ONE_HOT_ENCODING: + if (axis == 1) { + code.appendFormat("{0} = pd.get_dummies(data={1}, columns=[{2}])", tempObj, tempObj, selectedName); + } break; case FRAME_EDIT_TYPE.SET_IDX: break; @@ -733,6 +811,15 @@ define([ that.loadVariableList(); }); + // show info + $(document).on('click', this.wrapSelector('.vp-fe-df-showinfo'), function() { + that.showInfo(); + }); + + $(document).on('click', this.wrapSelector('.' + VP_FE_INFO), function(evt) { + evt.stopPropagation(); + }); + // menu on column $(document).on('contextmenu', this.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_COLUMN), function(event) { event.preventDefault(); @@ -780,6 +867,10 @@ define([ // close menu that.hideMenu(); } + if (!$(evt.target).hasClass(VP_FE_DF_SHOWINFO)) { + // close info + that.hideInfo(); + } }); // select column @@ -840,9 +931,12 @@ define([ case FRAME_EDIT_TYPE.ADD_ROW: case FRAME_EDIT_TYPE.RENAME: that.openInputPopup(editType); - return; + break; + default: + that.loadCode(that.getTypeCode(editType)); + break; } - that.loadCode(that.getTypeCode(editType)); + that.hideMenu(); }); // ok input popup From 9876dde3d3ad455eafd5f5d5d49efbb0e381ee63 Mon Sep 17 00:00:00 2001 From: minjk-bl Date: Thu, 8 Jul 2021 14:51:47 +0900 Subject: [PATCH 05/19] #51 - add WIP on not implemented operations --- css/api_block/index.css | 7 ++++++- src/api_block/index.html | 27 +++++++++++++-------------- 2 files changed, 19 insertions(+), 15 deletions(-) diff --git a/css/api_block/index.css b/css/api_block/index.css index bec347a5..84d420d5 100644 --- a/css/api_block/index.css +++ b/css/api_block/index.css @@ -461,6 +461,11 @@ font-size: 10px; } +.vp-apiblock-group-list:empty::after { + content: 'Work In Progress...'; + color: var(--gray-color); +} + .vp-apiblock-tab-title { font-size: 16px; @@ -547,7 +552,7 @@ transition: mask-position 0.3s, -webkit-mask-position 0.3s; */ overflow-y: auto; - -webkit-mask-position: left top; + --webkit-mask-position: left top; } /* .vp-apiblock-scrollbar:hover { diff --git a/src/api_block/index.html b/src/api_block/index.html index 7271a2c3..09ef22e7 100644 --- a/src/api_block/index.html +++ b/src/api_block/index.html @@ -30,59 +30,58 @@
-
+
Import
-
+
Markdown
-
+
Variable
-
+
Snippets
-
+
File
-
+
Instance
-
+
Subset
-
+
Frame
-
+
Chart
-
+
Merge
-
+
Groupby
-
+
Reshape
-
+
TimeSeries
-
From 7839e44b394ef769179e705a28c560c20e249696 Mon Sep 17 00:00:00 2001 From: minjk-bl Date: Thu, 8 Jul 2021 14:53:02 +0900 Subject: [PATCH 06/19] #51 - add WIP on not implemented operations (2) --- src/api_block/createGroup.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/api_block/createGroup.js b/src/api_block/createGroup.js index 229547e7..2dda0a91 100644 --- a/src/api_block/createGroup.js +++ b/src/api_block/createGroup.js @@ -42,12 +42,11 @@ define([ sbCreateGroupBtn.appendFormatLine('{1}', this.getName(), this.getName()); sbCreateGroupBtn.appendLine('
'); - sbCreateGroupBtn.appendFormatLine('
' + sbCreateGroupBtn.appendFormatLine('
' , 'vp-apiblock-group-list' , 'vp-apiblock-left-tab-' + this.getId() , 'vp-apiblock-style-column-row-wrap'); sbCreateGroupBtn.appendLine('
'); - sbCreateGroupBtn.appendLine('
'); var createBlockContainer = $(this.container); From a54c59cc22a3c1454f9038f3aaedc0984a66beba Mon Sep 17 00:00:00 2001 From: minjk-bl Date: Mon, 12 Jul 2021 16:40:16 +0900 Subject: [PATCH 07/19] FrameEditor update (some operations : set index/reset index, operations depend on row/col --- css/common/frameEditor.css | 4 -- src/common/vpFrameEditor.js | 87 +++++++++++++++++++++++++------------ 2 files changed, 60 insertions(+), 31 deletions(-) diff --git a/css/common/frameEditor.css b/css/common/frameEditor.css index 225b0d42..13f56260 100644 --- a/css/common/frameEditor.css +++ b/css/common/frameEditor.css @@ -84,10 +84,6 @@ background-color: rgba(246, 173, 85, 0.2); } -.vp-fe-df-box { - /* margin-bottom: 5px; */ -} - .vp-fe #vp_feVariable { width: 125px; margin-left: 5px; diff --git a/src/common/vpFrameEditor.js b/src/common/vpFrameEditor.js index 14d58e45..097ee9f8 100644 --- a/src/common/vpFrameEditor.js +++ b/src/common/vpFrameEditor.js @@ -76,11 +76,12 @@ define([ DROP_DUP: 5, ONE_HOT_ENCODING: 6, SET_IDX: 7, - REPLACE: 8, + RESET_IDX: 8, + REPLACE: 9, - ADD_COL: 9, - ADD_ROW: 10, - SHOW: 11 + ADD_COL: 97, + ADD_ROW: 98, + SHOW: 99 } /** @@ -275,17 +276,17 @@ define([ // Menus page.appendFormatLine('