Skip to content

Commit 578db8f

Browse files
author
minjk-bl
committed
Frame - save scroll position after clicking More..
1 parent 12ec20b commit 578db8f

File tree

1 file changed

+104
-54
lines changed

1 file changed

+104
-54
lines changed

‎src/common/vpFrameEditor.js

Lines changed: 104 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1174,18 +1174,24 @@ define([
11741174
return code.toString();
11751175
}
11761176

1177-
FrameEditor.prototype.loadCode = function(codeStr) {
1177+
FrameEditor.prototype.loadCode = function(codeStr, more=false) {
11781178
if (this.loading) {
11791179
return;
11801180
}
11811181

11821182
var that = this;
11831183
var tempObj = this.state.tempObj;
11841184
var lines = this.state.lines;
1185+
var prevLines = 0;
1186+
var scrollPos = -1;
1187+
if (more) {
1188+
prevLines = that.state.indexList.length;
1189+
scrollPos = $(this.wrapSelector('.vp-fe-table')).scrollTop();
1190+
}
11851191

11861192
var code = new sb.StringBuilder();
11871193
code.appendLine(codeStr);
1188-
code.appendFormat("{0}.head({1}).to_json(orient='{2}')", tempObj, lines, 'split');
1194+
code.appendFormat("{0}[{1}:{2}].to_json(orient='{3}')", tempObj, prevLines, lines, 'split');
11891195

11901196
this.loading = true;
11911197
kernelApi.executePython(code.toString(), function(result) {
@@ -1197,62 +1203,101 @@ define([
11971203
// var columnList = data.columns;
11981204
var indexList = data.index;
11991205
var dataList = data.data;
1206+
1207+
columnList = columnList.map(col => { return { label: col.label, type: col.dtype, code: col.value } });
1208+
indexList = indexList.map(idx => { return { label: idx, code: idx } });
12001209

1201-
that.state.columnList = columnList.map(col => { return { label: col.label, type: col.dtype, code: col.value } });
1202-
that.state.indexList = indexList.map(idx => { return { label: idx, code: idx } });
1203-
1204-
// table
1205-
var table = new sb.StringBuilder();
1206-
// table.appendFormatLine('<table border="{0}" class="{1}">', 1, 'dataframe');
1207-
table.appendLine('<thead>');
1208-
table.appendLine('<tr><th></th>');
1209-
that.state.columnList && that.state.columnList.forEach(col => {
1210-
var colCode = col.code;
1211-
var colClass = '';
1212-
if (that.state.axis == FRAME_AXIS.COLUMN && that.state.selected.map(col=>col.code).includes(colCode)) {
1213-
colClass = 'selected';
1214-
}
1215-
table.appendFormatLine('<th data-code="{0}" data-axis="{1}" data-type="{2}" class="{3} {4}">{5}</th>'
1216-
, colCode, FRAME_AXIS.COLUMN, col.type, VP_FE_TABLE_COLUMN, colClass, col.label);
1217-
});
1218-
// add column
1219-
table.appendFormatLine('<th class="{0}"><img src="{1}"/></th>', VP_FE_ADD_COLUMN, '/nbextensions/visualpython/resource/plus.svg');
1220-
1221-
table.appendLine('</tr>');
1222-
table.appendLine('</thead>');
1223-
table.appendLine('<tbody>');
1224-
1225-
dataList && dataList.forEach((row, idx) => {
1226-
table.appendLine('<tr>');
1227-
var idxName = that.state.indexList[idx].label;
1228-
var idxLabel = convertToStr(idxName, typeof idxName == 'string');
1229-
var idxClass = '';
1230-
if (that.state.axis == FRAME_AXIS.ROW && that.state.selected.includes(idxLabel)) {
1231-
idxClass = 'selected';
1232-
}
1233-
table.appendFormatLine('<th data-code="{0}" data-axis="{1}" class="{2} {3}">{4}</th>', idxLabel, FRAME_AXIS.ROW, VP_FE_TABLE_ROW, idxClass, idxName);
1234-
row.forEach((cell, colIdx) => {
1235-
if (cell == null) {
1236-
cell = 'NaN';
1210+
if (!more) {
1211+
// table
1212+
var table = new sb.StringBuilder();
1213+
// table.appendFormatLine('<table border="{0}" class="{1}">', 1, 'dataframe');
1214+
table.appendLine('<thead>');
1215+
table.appendLine('<tr><th></th>');
1216+
columnList && columnList.forEach(col => {
1217+
var colCode = col.code;
1218+
var colClass = '';
1219+
if (that.state.axis == FRAME_AXIS.COLUMN && that.state.selected.map(col=>col.code).includes(colCode)) {
1220+
colClass = 'selected';
12371221
}
1238-
var cellType = that.state.columnList[colIdx].type;
1239-
if (cellType.includes('datetime')) {
1240-
cell = new Date(parseInt(cell)).toLocaleDateString();
1222+
table.appendFormatLine('<th data-code="{0}" data-axis="{1}" data-type="{2}" class="{3} {4}">{5}</th>'
1223+
, colCode, FRAME_AXIS.COLUMN, col.type, VP_FE_TABLE_COLUMN, colClass, col.label);
1224+
});
1225+
// add column
1226+
table.appendFormatLine('<th class="{0}"><img src="{1}"/></th>', VP_FE_ADD_COLUMN, '/nbextensions/visualpython/resource/plus.svg');
1227+
1228+
table.appendLine('</tr>');
1229+
table.appendLine('</thead>');
1230+
table.appendLine('<tbody>');
1231+
1232+
dataList && dataList.forEach((row, idx) => {
1233+
table.appendLine('<tr>');
1234+
var idxName = indexList[idx].label;
1235+
var idxLabel = convertToStr(idxName, typeof idxName == 'string');
1236+
var idxClass = '';
1237+
if (that.state.axis == FRAME_AXIS.ROW && that.state.selected.includes(idxLabel)) {
1238+
idxClass = 'selected';
12411239
}
1242-
table.appendFormatLine('<td>{0}</td>', cell);
1240+
table.appendFormatLine('<th data-code="{0}" data-axis="{1}" class="{2} {3}">{4}</th>', idxLabel, FRAME_AXIS.ROW, VP_FE_TABLE_ROW, idxClass, idxName);
1241+
row.forEach((cell, colIdx) => {
1242+
if (cell == null) {
1243+
cell = 'NaN';
1244+
}
1245+
var cellType = columnList[colIdx].type;
1246+
if (cellType.includes('datetime')) {
1247+
cell = new Date(parseInt(cell)).toLocaleString();
1248+
}
1249+
table.appendFormatLine('<td>{0}</td>', cell);
1250+
});
1251+
// empty data
1252+
// table.appendLine('<td></td>');
1253+
table.appendLine('</tr>');
12431254
});
1244-
// empty data
1245-
// table.appendLine('<td></td>');
1255+
// add row
1256+
table.appendLine('<tr>');
1257+
table.appendFormatLine('<th class="{0}"><img src="{1}"/></th>', VP_FE_ADD_ROW, '/nbextensions/visualpython/resource/plus.svg');
12461258
table.appendLine('</tr>');
1247-
});
1248-
// add row
1249-
table.appendLine('<tr>');
1250-
table.appendFormatLine('<th class="{0}"><img src="{1}"/></th>', VP_FE_ADD_ROW, '/nbextensions/visualpython/resource/plus.svg');
1251-
table.appendLine('</tbody>');
1252-
table.appendLine('</tr>');
1253-
$(that.wrapSelector('.' + VP_FE_TABLE)).replaceWith(function() {
1254-
return that.renderTable(table.toString());
1255-
});
1259+
table.appendLine('</tbody>');
1260+
$(that.wrapSelector('.' + VP_FE_TABLE)).replaceWith(function() {
1261+
return that.renderTable(table.toString());
1262+
});
1263+
} else {
1264+
var table = new sb.StringBuilder();
1265+
dataList && dataList.forEach((row, idx) => {
1266+
table.appendLine('<tr>');
1267+
var idxName = indexList[idx].label;
1268+
var idxLabel = convertToStr(idxName, typeof idxName == 'string');
1269+
var idxClass = '';
1270+
if (that.state.axis == FRAME_AXIS.ROW && that.state.selected.includes(idxLabel)) {
1271+
idxClass = 'selected';
1272+
}
1273+
table.appendFormatLine('<th data-code="{0}" data-axis="{1}" class="{2} {3}">{4}</th>', idxLabel, FRAME_AXIS.ROW, VP_FE_TABLE_ROW, idxClass, idxName);
1274+
row.forEach((cell, colIdx) => {
1275+
if (cell == null) {
1276+
cell = 'NaN';
1277+
}
1278+
var cellType = columnList[colIdx].type;
1279+
if (cellType.includes('datetime')) {
1280+
cell = new Date(parseInt(cell)).toLocaleString();
1281+
}
1282+
table.appendFormatLine('<td>{0}</td>', cell);
1283+
});
1284+
// empty data
1285+
// table.appendLine('<td></td>');
1286+
table.appendLine('</tr>');
1287+
});
1288+
// insert before last tr tag(add row button)
1289+
$(table.toString()).insertBefore($(that.wrapSelector('.' + VP_FE_TABLE + ' tbody tr:last')));
1290+
}
1291+
1292+
// save columnList & indexList as state
1293+
that.state.columnList = columnList;
1294+
if (!more) {
1295+
that.state.indexList = indexList;
1296+
} else {
1297+
that.state.indexList = that.state.indexList.concat(indexList);
1298+
}
1299+
1300+
12561301
// load info
12571302
that.loadInfo();
12581303
// add to stack
@@ -1261,6 +1306,11 @@ define([
12611306
var replacedCode = codeStr.replaceAll(that.state.tempObj, that.state.returnObj);
12621307
that.setPreview(replacedCode);
12631308
}
1309+
1310+
// if scrollPos is saved, go to the position
1311+
if (scrollPos >= 0) {
1312+
$(that.wrapSelector('.vp-fe-table')).scrollTop(scrollPos);
1313+
}
12641314

12651315
that.loading = false;
12661316
});
@@ -1596,7 +1646,7 @@ define([
15961646
// more rows
15971647
$(document).on('click', this.wrapSelector('.' + VP_FE_TABLE_MORE), function() {
15981648
that.state.lines += TABLE_LINES;
1599-
that.loadCode(that.getTypeCode(FRAME_EDIT_TYPE.SHOW));
1649+
that.loadCode(that.getTypeCode(FRAME_EDIT_TYPE.SHOW), true);
16001650
});
16011651

16021652
// click toolbar item

0 commit comments

Comments
 (0)