visualpython · minjk-bl · Nov 3, 2021 · Nov 2, 2021 · Nov 2, 2021 · Nov 2, 2021
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/common/vpFrameEditor.js b/src/common/vpFrameEditor.js
@@ -638,6 +638,7 @@ define([
 
     FrameEditor.prototype.renderRenamePage = function() {
         var content = new sb.StringBuilder();
+        content.appendFormatLine('<div class="{0} {1}">', 'vp-popup-rename-page', 'vp-scrollbar');
         content.appendLine('<table>');
         content.appendLine('<colgroup><col width="100px"><col width="*"></colgroup>');
         this.state.selected.forEach((col, idx) => {
@@ -648,17 +649,20 @@ define([
             content.appendLine('</tr>');
         });
         content.appendLine('</table>');
+        content.appendLine('</div>');
         return content.toString();
     }
 
     FrameEditor.prototype.renderReplacePage = function() {
         var content = new sb.StringBuilder();
         content.appendFormatLine('<label><input type="checkbox" class="{0}"/><span>{1}</span></label>', 'vp-popup-use-regex', 'Use Regular Expression');
         content.appendLine('<br/><br/>');
-        content.appendFormatLine('<table class="{0}">', 'vp-popup-replace-table');
+        content.appendFormatLine('<div class="{0}">', 'vp-popup-replace-table');
+        content.appendLine('<table>');
         content.appendLine(this.renderReplaceInput(0));
         content.appendFormatLine('<tr><td colspan="3"><button class="{0} {1}">{2}</button></td></tr>', 'vp-button', 'vp-popup-replace-add', '+ Add Key');
         content.appendLine('</table>');
+        content.appendLine('</div>');
         return content.toString();
     }
 
@@ -1170,18 +1174,24 @@ define([
         return code.toString();
     }
 
-    FrameEditor.prototype.loadCode = function(codeStr) {
+    FrameEditor.prototype.loadCode = function(codeStr, more=false) {
         if (this.loading) {
             return;
         }
 
         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) {
@@ -1193,62 +1203,101 @@ define([
                     // 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('<table border="{0}" class="{1}">', 1, 'dataframe');
-                    table.appendLine('<thead>');
-                    table.appendLine('<tr><th></th>');
-                    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('<th data-code="{0}" data-axis="{1}" data-type="{2}" class="{3} {4}">{5}</th>'
-                                                , colCode, FRAME_AXIS.COLUMN, col.type, VP_FE_TABLE_COLUMN, colClass, col.label);
-                    });
-                    // add column
-                    table.appendFormatLine('<th class="{0}"><img src="{1}"/></th>', VP_FE_ADD_COLUMN, '/nbextensions/visualpython/resource/plus.svg');
-
-                    table.appendLine('</tr>');
-                    table.appendLine('</thead>');
-                    table.appendLine('<tbody>');
-
-                    dataList && dataList.forEach((row, idx) => {
-                        table.appendLine('<tr>');
-                        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('<th data-code="{0}" data-axis="{1}" class="{2} {3}">{4}</th>', 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('<table border="{0}" class="{1}">', 1, 'dataframe');
+                        table.appendLine('<thead>');
+                        table.appendLine('<tr><th></th>');
+                        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('<th data-code="{0}" data-axis="{1}" data-type="{2}" class="{3} {4}">{5}</th>'
+                                                    , colCode, FRAME_AXIS.COLUMN, col.type, VP_FE_TABLE_COLUMN, colClass, col.label);
+                        });
+                        // add column
+                        table.appendFormatLine('<th class="{0}"><img src="{1}"/></th>', VP_FE_ADD_COLUMN, '/nbextensions/visualpython/resource/plus.svg');
+
+                        table.appendLine('</tr>');
+                        table.appendLine('</thead>');
+                        table.appendLine('<tbody>');
+
+                        dataList && dataList.forEach((row, idx) => {
+                            table.appendLine('<tr>');
+                            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('<td>{0}</td>', cell);
+                            table.appendFormatLine('<th data-code="{0}" data-axis="{1}" class="{2} {3}">{4}</th>', 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('<td>{0}</td>', cell);
+                            });
+                            // empty data
+                            // table.appendLine('<td></td>');
+                            table.appendLine('</tr>');
                         });
-                        // empty data
-                        // table.appendLine('<td></td>');
+                        // add row
+                        table.appendLine('<tr>');
+                        table.appendFormatLine('<th class="{0}"><img src="{1}"/></th>', VP_FE_ADD_ROW, '/nbextensions/visualpython/resource/plus.svg');
                         table.appendLine('</tr>');
-                    });
-                    // add row
-                    table.appendLine('<tr>');
-                    table.appendFormatLine('<th class="{0}"><img src="{1}"/></th>', VP_FE_ADD_ROW, '/nbextensions/visualpython/resource/plus.svg');
-                    table.appendLine('</tbody>');
-                    table.appendLine('</tr>');
-                    $(that.wrapSelector('.' + VP_FE_TABLE)).replaceWith(function() {
-                        return that.renderTable(table.toString());
-                    });
+                        table.appendLine('</tbody>');
+                        $(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('<tr>');
+                            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('<th data-code="{0}" data-axis="{1}" class="{2} {3}">{4}</th>', 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('<td>{0}</td>', cell);
+                            });
+                            // empty data
+                            // table.appendLine('<td></td>');
+                            table.appendLine('</tr>');
+                        });
+                        // 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 +1306,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;
                 });
@@ -1592,7 +1646,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
-Original file line number
+Diff line change
@@ Expand Up / @@ -84,6 +84,9 @@ @@
     .wp50 {
         width: 50px;
     }
+    .wp60 {
+        width: 60px;
+    }
     .wp80 {
         width: 80px;
     }
@@ Expand Down @@