diff --git a/css/api_block/index.css b/css/api_block/index.css index daa6f6a7..dc6f6740 100644 --- a/css/api_block/index.css +++ b/css/api_block/index.css @@ -320,11 +320,11 @@ flex-direction: column; margin-left: 14px; margin-bottom: 400px; - width: calc(100% - 68px); + width: calc(100% - 60px); } .vp-block { position: relative; - min-width: 205px; + width: 100%; min-height: 25px; z-index: 1; text-align: left; @@ -822,7 +822,7 @@ } .vp-apiblock-codeline-ellipsis { width: 100%; - background-color: rgba(255, 255, 255, 0.5); + /* background-color: rgba(255, 255, 255, 0.5); */ color: var(--font-primary); font-size: 12px; text-indent: 0.5em; diff --git a/css/common/frameEditor.css b/css/common/frameEditor.css index d4d67a18..3accb36f 100644 --- a/css/common/frameEditor.css +++ b/css/common/frameEditor.css @@ -190,6 +190,13 @@ top: 0; background: #FFFFFF; border-bottom: 1px solid #E4E4E4; + + text-align: right; + text-overflow: ellipsis; + overflow: hidden; + height: 30px !important; + min-width: 80px; + white-space: nowrap; } .vp-fe-table tbody tr:nth-child(odd) { background: #F5F5F5; @@ -223,6 +230,10 @@ width: 100%; z-index: -1; } */ +.vp-fe-table tr th:nth-child(1), +.vp-fe-add-column { + min-width: 30px !important; +} .vp-fe-table-more { margin-top: 10px; @@ -364,7 +375,7 @@ padding: 10px; } .vp-popup-addpage .vp-popup-tab.replace { - height: calc(100% - 50px); + height: calc(100% - 60px); } .vp-popup-addtype { width: 153px; @@ -373,6 +384,12 @@ .vp-popup-delete { padding-bottom: 20px; } +.vp-popup-rename-page { + max-height: 400px; +} +.vp-popup-replace-table { + max-height: 350px; +} .vp-popup-replace-add { margin-top: 30px } diff --git a/css/component/common.css b/css/component/common.css index 47eb8723..520d4b6d 100644 --- a/css/component/common.css +++ b/css/component/common.css @@ -84,6 +84,9 @@ .wp50 { width: 50px; } +.wp60 { + width: 60px; +} .wp80 { width: 80px; } diff --git a/css/component/fileNavigation.css b/css/component/fileNavigation.css index d1705832..ca482c0a 100644 --- a/css/component/fileNavigation.css +++ b/css/component/fileNavigation.css @@ -47,7 +47,8 @@ .fileNavigationPage-inner { float: right; display: grid; - grid-template-rows: 30px auto min-content; + /* grid-template-rows: 30px auto min-content; */ + grid-template-rows: min-content auto min-content; width: 80%; height: 100%; } @@ -107,7 +108,8 @@ } .fileNavigationPage-menu { min-height: 30px; - height: 6%; + /* height: 6%; */ + height: fit-content; padding-left: 10px; background-color: #EEE; border: 1px solid #ddd;; @@ -127,7 +129,7 @@ justify-content: center; } .fileNavigationPage-menu-block { - margin-left: 10px; + padding: 0 35px 0 10px; display: flex; flex-direction: column; justify-content: center; @@ -192,11 +194,11 @@ .fileNavigationPage-closedBtn { position: fixed; z-index: 3; - right: 5px; + right: 10px; width: 20px; height: 20px; line-height: 20px; - top: 5px; + top: 3px; text-align: center; } .fileNavigationPage-closedBtn:hover { diff --git a/css/file_io/variables.css b/css/file_io/variables.css index 107e49b0..bc277f11 100644 --- a/css/file_io/variables.css +++ b/css/file_io/variables.css @@ -1,14 +1,20 @@ :root { --color: #525252; } -#vp_var_variableBox table tr:not(:first-child):hover, -#vp_var_variableBox table tr.selected { +#vp_var_variableBox table tbody tr:hover, +#vp_var_variableBox table tbody tr.selected { color: var(--font-hightlight); background-color: #F5F5F5; } -#vp_var_variableBox table tr td:first-child:hover { +#vp_var_variableBox table tbody tr td:hover { cursor: pointer; } +#vp_var_variableBox table thead { + position: sticky; + top: 0; + background: white; +} + #vp_varDetailTable table th, #vp_varDetailTable table td { padding: 5px; @@ -25,7 +31,6 @@ #vp_var_variableBox { width: 100%; height: 150px; - overflow: hidden; } #vp_varDetailTable:empty::after { content: '(Select variables to preview the data.)'; diff --git a/src/api_block/block.js b/src/api_block/block.js index 64a90157..cf41202b 100644 --- a/src/api_block/block.js +++ b/src/api_block/block.js @@ -1487,9 +1487,9 @@ define([ if (isColor == true) { if (this.getBlockType() == BLOCK_CODELINE_TYPE.TEXT) { - $(this.getBlockMainDom()).css(STR_BORDER_LEFT, '2px solid var(--highlight-color'); + $(this.getBlockMainDom()).css(STR_BORDER_LEFT, '2px solid var(--highlight-color)'); } else { - $(this.getBlockMainDom()).css(STR_BORDER, '2px solid var(--highlight-color'); + $(this.getBlockMainDom()).css(STR_BORDER, '2px solid var(--highlight-color)'); } } } diff --git a/src/api_block/blockContainer.js b/src/api_block/blockContainer.js index 7d216979..9597d322 100644 --- a/src/api_block/blockContainer.js +++ b/src/api_block/blockContainer.js @@ -2649,7 +2649,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.15'); + this.setNavigator(BLOCK_CODELINE_TYPE.NONE, 'Visual Python 1.2.0'); 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 11795e2e..bc5eb41d 100644 --- a/src/api_block/index.html +++ b/src/api_block/index.html @@ -120,7 +120,7 @@ id='vp_apiblock_option_page'>
- Visual Python 1.1.15 + Visual Python 1.2.0
diff --git a/src/common/constant.js b/src/common/constant.js index 26bdf935..4fd2ab40 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.15" + HELP: "Visual Python 1.2.0" // , ICON: "fa-angellist" , ICON: "vp-main-icon" , ID: "vpBtnToggle" diff --git a/src/common/vpFrameEditor.js b/src/common/vpFrameEditor.js index bde97f12..d600508f 100644 --- a/src/common/vpFrameEditor.js +++ b/src/common/vpFrameEditor.js @@ -638,6 +638,7 @@ define([ FrameEditor.prototype.renderRenamePage = function() { var content = new sb.StringBuilder(); + content.appendFormatLine('
', 'vp-popup-rename-page', 'vp-scrollbar'); content.appendLine(''); content.appendLine(''); this.state.selected.forEach((col, idx) => { @@ -648,6 +649,7 @@ define([ content.appendLine(''); }); content.appendLine('
'); + content.appendLine('
'); return content.toString(); } @@ -655,10 +657,12 @@ define([ var content = new sb.StringBuilder(); content.appendFormatLine('', 'vp-popup-use-regex', 'Use Regular Expression'); content.appendLine('

'); - content.appendFormatLine('', 'vp-popup-replace-table'); + content.appendFormatLine('
', 'vp-popup-replace-table'); + content.appendLine('
'); content.appendLine(this.renderReplaceInput(0)); content.appendFormatLine('', 'vp-button', 'vp-popup-replace-add', '+ Add Key'); content.appendLine('
'); + content.appendLine('
'); return content.toString(); } @@ -1170,7 +1174,7 @@ define([ return code.toString(); } - FrameEditor.prototype.loadCode = function(codeStr) { + FrameEditor.prototype.loadCode = function(codeStr, more=false) { if (this.loading) { return; } @@ -1178,77 +1182,126 @@ define([ var that = this; var tempObj = this.state.tempObj; var lines = this.state.lines; + var prevLines = 0; + var scrollPos = -1; + if (more) { + prevLines = that.state.indexList.length; + scrollPos = $(this.wrapSelector('.vp-fe-table')).scrollTop(); + } var code = new sb.StringBuilder(); code.appendLine(codeStr); - code.appendFormat("{0}.head({1}).to_json(orient='{2}')", tempObj, lines, 'split'); + code.appendFormat("{0}[{1}:{2}].to_json(orient='{3}')", tempObj, prevLines, lines, 'split'); this.loading = true; kernelApi.executePython(code.toString(), function(result) { try { + if (!result || result.length <= 0) { + return; + } + var data = JSON.parse(result.substr(1,result.length - 2).replaceAll('\\\\', '\\')); + kernelApi.getColumnList(tempObj, function(columnResult) { - var data = JSON.parse(result.substr(1,result.length - 2).replaceAll('\\\\', '\\')); var columnList = JSON.parse(columnResult); // var columnList = data.columns; var indexList = data.index; var dataList = data.data; + + columnList = columnList.map(col => { return { label: col.label, type: col.dtype, code: col.value } }); + indexList = indexList.map(idx => { return { label: idx, code: idx } }); - that.state.columnList = columnList.map(col => { return { label: col.label, type: col.dtype, code: col.value } }); - that.state.indexList = indexList.map(idx => { return { label: idx, code: idx } }); - - // table - var table = new sb.StringBuilder(); - // table.appendFormatLine('', 1, 'dataframe'); - table.appendLine(''); - table.appendLine(''); - that.state.columnList && that.state.columnList.forEach(col => { - var colCode = col.code; - var colClass = ''; - if (that.state.axis == FRAME_AXIS.COLUMN && that.state.selected.map(col=>col.code).includes(colCode)) { - colClass = 'selected'; - } - table.appendFormatLine('' - , colCode, FRAME_AXIS.COLUMN, col.type, VP_FE_TABLE_COLUMN, colClass, col.label); - }); - // add column - table.appendFormatLine('', VP_FE_ADD_COLUMN, '/nbextensions/visualpython/resource/plus.svg'); - - table.appendLine(''); - table.appendLine(''); - table.appendLine(''); - - dataList && dataList.forEach((row, idx) => { - table.appendLine(''); - var idxName = that.state.indexList[idx].label; - var idxLabel = convertToStr(idxName, typeof idxName == 'string'); - var idxClass = ''; - if (that.state.axis == FRAME_AXIS.ROW && that.state.selected.includes(idxLabel)) { - idxClass = 'selected'; - } - table.appendFormatLine('', idxLabel, FRAME_AXIS.ROW, VP_FE_TABLE_ROW, idxClass, idxName); - row.forEach((cell, colIdx) => { - if (cell == null) { - cell = 'NaN'; + if (!more) { + // table + var table = new sb.StringBuilder(); + // table.appendFormatLine('
{5}
{4}
', 1, 'dataframe'); + table.appendLine(''); + table.appendLine(''); + columnList && columnList.forEach(col => { + var colCode = col.code; + var colClass = ''; + if (that.state.axis == FRAME_AXIS.COLUMN && that.state.selected.map(col=>col.code).includes(colCode)) { + colClass = 'selected'; } - var cellType = that.state.columnList[colIdx].type; - if (cellType.includes('datetime')) { - cell = new Date(parseInt(cell)).toLocaleDateString(); + table.appendFormatLine('' + , colCode, FRAME_AXIS.COLUMN, col.type, VP_FE_TABLE_COLUMN, colClass, col.label); + }); + // add column + table.appendFormatLine('', VP_FE_ADD_COLUMN, '/nbextensions/visualpython/resource/plus.svg'); + + table.appendLine(''); + table.appendLine(''); + table.appendLine(''); + + dataList && dataList.forEach((row, idx) => { + table.appendLine(''); + var idxName = indexList[idx].label; + var idxLabel = convertToStr(idxName, typeof idxName == 'string'); + var idxClass = ''; + if (that.state.axis == FRAME_AXIS.ROW && that.state.selected.includes(idxLabel)) { + idxClass = 'selected'; } - table.appendFormatLine('', cell); + table.appendFormatLine('', idxLabel, FRAME_AXIS.ROW, VP_FE_TABLE_ROW, idxClass, idxName); + row.forEach((cell, colIdx) => { + if (cell == null) { + cell = 'NaN'; + } + var cellType = columnList[colIdx].type; + if (cellType.includes('datetime')) { + cell = new Date(parseInt(cell)).toLocaleString(); + } + table.appendFormatLine('', cell); + }); + // empty data + // table.appendLine(''); + table.appendLine(''); }); - // empty data - // table.appendLine(''); + // add row + table.appendLine(''); + table.appendFormatLine('', VP_FE_ADD_ROW, '/nbextensions/visualpython/resource/plus.svg'); table.appendLine(''); - }); - // add row - table.appendLine(''); - table.appendFormatLine('', VP_FE_ADD_ROW, '/nbextensions/visualpython/resource/plus.svg'); - table.appendLine(''); - table.appendLine(''); - $(that.wrapSelector('.' + VP_FE_TABLE)).replaceWith(function() { - return that.renderTable(table.toString()); - }); + table.appendLine(''); + $(that.wrapSelector('.' + VP_FE_TABLE)).replaceWith(function() { + return that.renderTable(table.toString()); + }); + } else { + var table = new sb.StringBuilder(); + dataList && dataList.forEach((row, idx) => { + table.appendLine(''); + var idxName = indexList[idx].label; + var idxLabel = convertToStr(idxName, typeof idxName == 'string'); + var idxClass = ''; + if (that.state.axis == FRAME_AXIS.ROW && that.state.selected.includes(idxLabel)) { + idxClass = 'selected'; + } + table.appendFormatLine('', idxLabel, FRAME_AXIS.ROW, VP_FE_TABLE_ROW, idxClass, idxName); + row.forEach((cell, colIdx) => { + if (cell == null) { + cell = 'NaN'; + } + var cellType = columnList[colIdx].type; + if (cellType.includes('datetime')) { + cell = new Date(parseInt(cell)).toLocaleString(); + } + table.appendFormatLine('', cell); + }); + // empty data + // table.appendLine(''); + table.appendLine(''); + }); + // insert before last tr tag(add row button) + $(table.toString()).insertBefore($(that.wrapSelector('.' + VP_FE_TABLE + ' tbody tr:last'))); + } + + // save columnList & indexList as state + that.state.columnList = columnList; + if (!more) { + that.state.indexList = indexList; + } else { + that.state.indexList = that.state.indexList.concat(indexList); + } + + // load info that.loadInfo(); // add to stack @@ -1257,6 +1310,11 @@ define([ var replacedCode = codeStr.replaceAll(that.state.tempObj, that.state.returnObj); that.setPreview(replacedCode); } + + // if scrollPos is saved, go to the position + if (scrollPos >= 0) { + $(that.wrapSelector('.vp-fe-table')).scrollTop(scrollPos); + } that.loading = false; }); @@ -1376,6 +1434,11 @@ define([ that.state.tempObj = '_vp'; that.initState(); + // reset table + $(that.wrapSelector('.' + VP_FE_TABLE)).replaceWith(function() { + return that.renderTable(''); + }); + // load code with temporary df that.loadCode(that.getTypeCode(FRAME_EDIT_TYPE.INIT)); that.loadInfo(); @@ -1592,7 +1655,7 @@ define([ // more rows $(document).on('click', this.wrapSelector('.' + VP_FE_TABLE_MORE), function() { that.state.lines += TABLE_LINES; - that.loadCode(that.getTypeCode(FRAME_EDIT_TYPE.SHOW)); + that.loadCode(that.getTypeCode(FRAME_EDIT_TYPE.SHOW), true); }); // click toolbar item diff --git a/src/component/fileNavigation/index.html b/src/component/fileNavigation/index.html index cd8e7efe..5711059a 100644 --- a/src/component/fileNavigation/index.html +++ b/src/component/fileNavigation/index.html @@ -16,7 +16,7 @@ style='display: flex; flex-direction: column; justify-content: center;'> -
+
-
X
+
diff --git a/src/container/vpContainer.js b/src/container/vpContainer.js index 4e036b50..2f750233 100644 --- a/src/container/vpContainer.js +++ b/src/container/vpContainer.js @@ -619,6 +619,14 @@ define([ } else { $(vpCommon.wrapSelector(vpCommon.formatString("#{0}", vpConst.API_MODE_CONTAINER))).width($(vpCommon.wrapSelector(".vp-main-container")).width()); } + + // resize + if (apiBlockJS) { + var blockContainer = apiBlockJS.getBlockContainer(); + if (blockContainer && blockContainer.getIsOptionPageResize() == false) { + blockContainer.resizeAPIblock(); + } + } } /** diff --git a/src/file_io/fileio.js b/src/file_io/fileio.js index 4ca46df1..1af484d3 100644 --- a/src/file_io/fileio.js +++ b/src/file_io/fileio.js @@ -7,8 +7,9 @@ define([ , 'nbextensions/visualpython/src/common/vpFuncJS' , 'nbextensions/visualpython/src/pandas/common/commonPandas' , 'nbextensions/visualpython/src/pandas/common/pandasGenerator' + , 'nbextensions/visualpython/src/common/component/vpSuggestInputText' , 'nbextensions/visualpython/src/pandas/fileNavigation/index' -], function (requirejs, $, vpCommon, vpConst, sb, vpFuncJS, libPandas, pdGen, fileNavigation) { +], function (requirejs, $, vpCommon, vpConst, sb, vpFuncJS, libPandas, pdGen, vpSuggestInputText, fileNavigation) { // 옵션 속성 const funcOptProp = { stepCount : 1 @@ -350,6 +351,18 @@ define([ ); } + // encoding suggest input + $(this.wrapSelector('#encoding')).replaceWith(function() { + // encoding list : utf8 cp949 ascii + var encodingList = ['utf8', 'cp949', 'ascii']; + var suggestInput = new vpSuggestInputText.vpSuggestInputText(); + suggestInput.setComponentID('encoding'); + suggestInput.addClass('vp-input'); + suggestInput.setSuggestList(function() { return encodingList; }); + suggestInput.setPlaceholder('encoding option'); + return suggestInput.toTagString(); + }); + } diff --git a/src/file_io/variables.html b/src/file_io/variables.html index 87c3252f..a6a45dc1 100644 --- a/src/file_io/variables.html +++ b/src/file_io/variables.html @@ -1,11 +1,21 @@
-
+
{5}
{0}{4}{0}
{4}{0}
- - - - + + + + + + + + +
Variable NameData Type
+ Variable Name + + + Data Type +
diff --git a/src/file_io/variables.js b/src/file_io/variables.js index bc71d8f8..d74a9455 100644 --- a/src/file_io/variables.js +++ b/src/file_io/variables.js @@ -63,8 +63,6 @@ define([ this.package = libPandas._PANDAS_FUNCTION[funcOptProp.libID]; } - - /** * Extend vpFuncJS */ @@ -135,13 +133,13 @@ define([ , 'str', 'int', 'float', 'bool', 'dict', 'list', 'tuple' ]; - var tagTable = this.wrapSelector('#vp_var_variableBox table'); + var tagTable = this.wrapSelector('#vp_var_variableBox table tbody'); // variable list table var tagDetailTable = this.wrapSelector("#vp_varDetailTable"); // initialize tags - $(tagTable).find('tr:not(:first)').remove(); + $(tagTable).find('tr').remove(); $(tagDetailTable).html(''); // HTML rendering diff --git a/src/pandas/common/commonPandas.js b/src/pandas/common/commonPandas.js index 760473dd..ba3391fc 100644 --- a/src/pandas/common/commonPandas.js +++ b/src/pandas/common/commonPandas.js @@ -151,6 +151,11 @@ define([ } ], variable: [ + { + name: 'encoding', + type: 'text', + label: 'Encoding' + }, { name:'names', type:'list', diff --git a/src/pandas/common/pandasGenerator.js b/src/pandas/common/pandasGenerator.js index 32a447cd..5aad281c 100644 --- a/src/pandas/common/pandasGenerator.js +++ b/src/pandas/common/pandasGenerator.js @@ -108,10 +108,10 @@ define([ var requiredFontStyle = required? vpConst.COLOR_FONT_ORANGE : ''; $(lbl).attr({ 'for': obj.name, - 'class': requiredFontStyle + 'class': requiredFontStyle, + 'title': '(' + obj.name + ')' }); - // lbl.innerText = (required? '* ':'') + obj.label + (showKey?' ('+obj.name+')':''); - lbl.innerText = obj.label + (showKey?' ('+obj.name+')':''); + lbl.innerText = obj.label; tblLabel.appendChild(lbl); // 명시된 component에 맞는 태그 구성해서 붙여주기 diff --git a/src/pandas/fileNavigation/index.html b/src/pandas/fileNavigation/index.html index d3ecef42..7da1df5e 100644 --- a/src/pandas/fileNavigation/index.html +++ b/src/pandas/fileNavigation/index.html @@ -13,7 +13,7 @@
-
+
-
X
+
diff --git a/src/python_common/open.js b/src/python_common/open.js index 10a28170..7ed0f98f 100644 --- a/src/python_common/open.js +++ b/src/python_common/open.js @@ -7,7 +7,7 @@ define([ , 'nbextensions/visualpython/src/common/vpFuncJS' , 'nbextensions/visualpython/src/common/component/vpSuggestInputText' , 'nbextensions/visualpython/src/pandas/common/pandasGenerator' - , 'nbextensions/visualpython/src/component/fileNavigation/index' + , 'nbextensions/visualpython/src/pandas/fileNavigation/index' ], function (requirejs, $, vpCommon, vpConst, sb, vpFuncJS, vpSuggestInputText, pdGen, fileNavigation) { // 옵션 속성 const funcOptProp = { @@ -140,7 +140,7 @@ define([ sbTagString.clear(); sbTagString.appendFormat('', 'vp_pyReturn', 'vp-input'); - tblLayoutRequire.addRow("Allocate toto", sbTagString.toString()); + tblLayoutRequire.addRow("Allocate to", sbTagString.toString()); sbTagString.clear(); sbTagString.appendFormat('', 'vp_pyBuffering', 'vp-input'); tblLayoutAdditional.addRow("Buffering", sbTagString.toString()); - sbTagString.clear(); - sbTagString.appendFormat('', 'vp_pyEncoding', 'vp-input'); - tblLayoutAdditional.addRow("Encoding", sbTagString.toString()); + // encoding list : utf8 cp949 ascii + var encodingList = ['utf8', 'cp949', 'ascii']; + var suggestInput = new vpSuggestInputText.vpSuggestInputText(); + suggestInput.setComponentID('vp_pyEncoding'); + suggestInput.addClass('vp-input'); + suggestInput.setSuggestList(function() { return encodingList; }); + suggestInput.setPlaceholder('encoding option'); + tblLayoutAdditional.addRow("Encoding", suggestInput.toTagString()); sbTagString.clear(); // sbTagString.appendFormat('', 'vp_pyErrors', 'vp-input');