Skip to content

Commit a54c59c

Browse files
minjk-blminjk-bl
committed
FrameEditor update (some operations : set index/reset index, operations depend on row/col
1 parent 7839e44 commit a54c59c

2 files changed

Lines changed: 60 additions & 31 deletions

File tree

‎css/common/frameEditor.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -84,10 +84,6 @@
8484
background-color: rgba(246, 173, 85, 0.2);
8585
}
8686

87-
.vp-fe-df-box {
88-
/* margin-bottom: 5px; */
89-
}
90-
9187
.vp-fe #vp_feVariable {
9288
width: 125px;
9389
margin-left: 5px;

‎src/common/vpFrameEditor.js‎

Lines changed: 60 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -76,11 +76,12 @@ define([
7676
DROP_DUP: 5,
7777
ONE_HOT_ENCODING: 6,
7878
SET_IDX: 7,
79-
REPLACE: 8,
79+
RESET_IDX: 8,
80+
REPLACE: 9,
8081

81-
ADD_COL: 9,
82-
ADD_ROW: 10,
83-
SHOW: 11
82+
ADD_COL: 97,
83+
ADD_ROW: 98,
84+
SHOW: 99
8485
}
8586

8687
/**
@@ -275,37 +276,40 @@ define([
275276
// Menus
276277
page.appendFormatLine('<div class="{0}" style="display:none; position: fixed;">', VP_FE_MENU_BOX);
277278
// menu 1. Add Column
278-
page.appendFormatLine('<div class="{0} {1}" data-type="{2}">{3}</div>'
279-
, VP_FE_MENU_ITEM, 'vp-fe-menu-add-column', FRAME_EDIT_TYPE.ADD_COL, 'Add Column');
279+
page.appendFormatLine('<div class="{0} {1}" data-type="{2}" data-axis="{3}">{4}</div>'
280+
, VP_FE_MENU_ITEM, 'vp-fe-menu-add-column', FRAME_EDIT_TYPE.ADD_COL, 'col', 'Add Column');
280281
// menu 2. Add Row
281-
page.appendFormatLine('<div class="{0} {1}" data-type="{2}">{3}</div>'
282-
, VP_FE_MENU_ITEM, 'vp-fe-menu-add-row', FRAME_EDIT_TYPE.ADD_ROW, 'Add Row');
282+
page.appendFormatLine('<div class="{0} {1}" data-type="{2}" data-axis="{3}">{4}</div>'
283+
, VP_FE_MENU_ITEM, 'vp-fe-menu-add-row', FRAME_EDIT_TYPE.ADD_ROW, 'row', 'Add Row');
283284
// menu 3. drop
284285
page.appendFormatLine('<div class="{0} {1}" data-type="{2}">{3}<i class="{4}" style="{5}"></i>'
285286
, VP_FE_MENU_ITEM, 'vp-fe-menu-drop', FRAME_EDIT_TYPE.DROP, 'Drop'
286287
, 'fa fa-caret-right', 'padding-left: 5px;'); //TODO: NA & Duplicate selection needed
287288
// sub-menu 1.
288-
page.appendFormatLine('<div class="{0}" style="{1}">', VP_FE_MENU_SUB_BOX, 'top: 50px;');
289+
page.appendFormatLine('<div class="{0}" style="{1}">', VP_FE_MENU_SUB_BOX, 'top: 25px;');
289290
// menu 3-1. drop
290291
page.appendFormatLine('<div class="{0} {1}" data-type="{2}">{3}</div>'
291292
, VP_FE_MENU_ITEM, 'vp-fe-menu-drop', FRAME_EDIT_TYPE.DROP, 'Drop');
292293
// menu 3-2. drop-na
293294
page.appendFormatLine('<div class="{0} {1}" data-type="{2}">{3}</div>'
294295
, VP_FE_MENU_ITEM, 'vp-fe-menu-drop-na', FRAME_EDIT_TYPE.DROP_NA, 'Drop NA');
295296
// menu 3-3. drop-duplicate
296-
page.appendFormatLine('<div class="{0} {1}" data-type="{2}">{3}</div>'
297-
, VP_FE_MENU_ITEM, 'vp-fe-menu-drop-duplicate', FRAME_EDIT_TYPE.DROP_DUP, 'Drop Duplicate');
297+
page.appendFormatLine('<div class="{0} {1}" data-type="{2}" data-axis="{3}">{4}</div>'
298+
, VP_FE_MENU_ITEM, 'vp-fe-menu-drop-duplicate', FRAME_EDIT_TYPE.DROP_DUP, 'col','Drop Duplicate');
298299
page.appendLine('</div>'); // end of sub-menu 1
299300
page.appendLine('</div>'); // end of menu 3
300301
// menu 4. rename
301302
page.appendFormatLine('<div class="{0} {1}" data-type="{2}">{3}</div>'
302303
, VP_FE_MENU_ITEM, 'vp-fe-menu-rename', FRAME_EDIT_TYPE.RENAME, 'Rename');
303304
// menu 5. one-hot encoding
304-
page.appendFormatLine('<div class="{0} {1}" data-type="{2}">{3}</div>'
305-
, VP_FE_MENU_ITEM, 'vp-fe-menu-ohe', FRAME_EDIT_TYPE.ONE_HOT_ENCODING, 'One-Hot Encoding');
306-
// menu 6. set/reset index
307-
page.appendFormatLine('<div class="{0} {1}" data-type="{2}">{3}</div>'
308-
, VP_FE_MENU_ITEM, 'vp-fe-menu-index', FRAME_EDIT_TYPE.SET_IDX, 'Set Index');
305+
page.appendFormatLine('<div class="{0} {1}" data-type="{2}" data-axis="{3}">{4}</div>'
306+
, VP_FE_MENU_ITEM, 'vp-fe-menu-ohe', FRAME_EDIT_TYPE.ONE_HOT_ENCODING, 'col', 'One-Hot Encoding');
307+
// menu 6. set index
308+
page.appendFormatLine('<div class="{0} {1}" data-type="{2}" data-axis="{3}">{4}</div>'
309+
, VP_FE_MENU_ITEM, 'vp-fe-menu-set-index', FRAME_EDIT_TYPE.SET_IDX, 'col', 'Set Index');
310+
// menu 6-2. reset index
311+
page.appendFormatLine('<div class="{0} {1}" data-type="{2}" data-axis="{3}">{4}</div>'
312+
, VP_FE_MENU_ITEM, 'vp-fe-menu-reset-index', FRAME_EDIT_TYPE.RESET_IDX, 'row', 'Reset Index');
309313
// menu 7. replace
310314
page.appendFormatLine('<div class="{0} {1}" data-type="{2}">{3}</div>'
311315
, VP_FE_MENU_ITEM, 'vp-fe-menu-replace', FRAME_EDIT_TYPE.REPLACE, 'Replace');
@@ -380,7 +384,7 @@ define([
380384
FrameEditor.prototype.renderTable = function(renderedText, isHtml=true) {
381385
var tag = new sb.StringBuilder();
382386
// Table
383-
tag.appendFormatLine('<div class="{0} {1}">', VP_FE_TABLE, 'rendered_html');
387+
tag.appendFormatLine('<div class="{0} {1} {2}">', VP_FE_TABLE, 'rendered_html', 'vp-apiblock-scrollbar');
384388
if (isHtml) {
385389
tag.appendFormatLine('<table class="dataframe">{0}</table>', renderedText);
386390
// More button
@@ -420,6 +424,17 @@ define([
420424
return content.toString();
421425
}
422426

427+
FrameEditor.prototype.renderReplacePage = function() {
428+
var content = new sb.StringBuilder();
429+
content.appendLine('<table>');
430+
content.appendLine('<tr>');
431+
content.appendFormatLine('<td><input type="text" class="{0}" placeholder="{1}"/></td>', 'vp-popup-input0', 'origin');
432+
content.appendFormatLine('<td><input type="text" class="{0}" placeholder="{1}"/></td>', 'vp-popup-replace0', 'replace');
433+
content.appendLine('</tr>');
434+
content.appendLine('</table>');
435+
return content.toString();
436+
}
437+
423438
FrameEditor.prototype.openInputPopup = function(type, width=0, height=0) {
424439
var title = '';
425440
var content = '';
@@ -437,6 +452,9 @@ define([
437452
title = 'Rename';
438453
content = this.renderRenamePage();
439454
break;
455+
case FRAME_EDIT_TYPE.REPLACE:
456+
title = 'Replace';
457+
content = this.renderReplacePage();
440458
default:
441459
type = FRAME_EDIT_TYPE.NONE;
442460
break;
@@ -480,6 +498,9 @@ define([
480498
};
481499
});
482500
break;
501+
case FRAME_EDIT_TYPE.REPLACE:
502+
// TODO:
503+
break;
483504
default:
484505
break;
485506
}
@@ -644,19 +665,24 @@ define([
644665
code.appendFormat("{0}{1}.dropna(axis={2}, inplace=True)", tempObj, locObj, axis);
645666
break;
646667
case FRAME_EDIT_TYPE.DROP_DUP:
647-
if (axis == 0) {
648-
locObj = vpCommon.formatString('.loc[[{0}],:]', selectedName);
649-
} else {
650-
locObj = vpCommon.formatString('.loc[:,[{0}]]', selectedName);
668+
if (axis == 1) {
669+
code.appendFormat("{0}.drop_duplicates(subset=[{1}], inplace=True)", tempObj, selectedName);
651670
}
652-
code.appendFormat("{0}{1}.drop_duplicates(axis={2}, inplace=True)", tempObj, locObj, axis);
653671
break;
654672
case FRAME_EDIT_TYPE.ONE_HOT_ENCODING:
655673
if (axis == 1) {
656674
code.appendFormat("{0} = pd.get_dummies(data={1}, columns=[{2}])", tempObj, tempObj, selectedName);
657675
}
658676
break;
659677
case FRAME_EDIT_TYPE.SET_IDX:
678+
if (axis == 1) {
679+
code.appendFormat("{0}.set_index([{1}], inplace=True)", tempObj, selectedName);
680+
}
681+
break;
682+
case FRAME_EDIT_TYPE.RESET_IDX:
683+
if (axis == 0) {
684+
code.appendFormat("{0}.reset_index(inplace=True)", tempObj);
685+
}
660686
break;
661687
case FRAME_EDIT_TYPE.REPLACE:
662688
code.appendFormat("{0}.replace({1}, inplace=True)", tempObj, JSON.stringify(content).replaceAll('"', "'"));
@@ -750,8 +776,10 @@ define([
750776
// load info
751777
that.loadInfo();
752778
// add to stack
753-
that.state.steps.push(codeStr);
754-
that.setPreview(codeStr);
779+
if (codeStr !== '') {
780+
that.state.steps.push(codeStr);
781+
that.setPreview(codeStr);
782+
}
755783
} catch (err) {
756784
console.log(err);
757785
}
@@ -764,6 +792,8 @@ define([
764792
$(document).off('click', this.wrapSelector('.' + VP_FE_CLOSE));
765793
$(document).off('change', this.wrapSelector('#vp_feVariable'));
766794
$(document).off('click', this.wrapSelector('.vp-fe-df-refresh'));
795+
$(document).off('click', this.wrapSelector('.vp-fe-df-showinfo'));
796+
$(document).off('click', this.wrapSelector('.' + VP_FE_INFO));
767797
$(document).off('contextmenu', this.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_COLUMN));
768798
$(document).off('contextmenu', this.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_ROW));
769799
$(document).off('click', this.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_COLUMN));
@@ -930,6 +960,7 @@ define([
930960
case FRAME_EDIT_TYPE.ADD_COL:
931961
case FRAME_EDIT_TYPE.ADD_ROW:
932962
case FRAME_EDIT_TYPE.RENAME:
963+
case FRAME_EDIT_TYPE.REPLACE:
933964
that.openInputPopup(editType);
934965
break;
935966
default:
@@ -941,7 +972,7 @@ define([
941972

942973
// ok input popup
943974
$(document).on('click', this.wrapSelector('.' + VP_FE_POPUP_OK), function() {
944-
// TODO: ok input popup
975+
// ok input popup
945976
that.loadCode(that.getTypeCode(that.state.popup, that.getPopupContent()));
946977
that.closeInputPopup();
947978
});
@@ -984,10 +1015,12 @@ define([
9841015
FrameEditor.prototype.showMenu = function(left, top) {
9851016
if (this.state.axis == 0) {
9861017
// row
987-
1018+
$(this.wrapSelector(vpCommon.formatString('.{0}', VP_FE_MENU_BOX))).find('div[data-axis="col"]').hide();
1019+
$(this.wrapSelector(vpCommon.formatString('.{0}', VP_FE_MENU_BOX))).find('div[data-axis="row"]').show();
9881020
} else if (this.state.axis == 1) {
9891021
// column
990-
1022+
$(this.wrapSelector(vpCommon.formatString('.{0}', VP_FE_MENU_BOX))).find('div[data-axis="row"]').hide();
1023+
$(this.wrapSelector(vpCommon.formatString('.{0}', VP_FE_MENU_BOX))).find('div[data-axis="col"]').show();
9911024
}
9921025
$(this.wrapSelector(vpCommon.formatString('.{0}', VP_FE_MENU_BOX))).css({ top: top, left: left })
9931026
$(this.wrapSelector(vpCommon.formatString('.{0}', VP_FE_MENU_BOX))).show();

0 commit comments

Comments
 (0)