Skip to content

Commit 0176c03

Browse files
minjk-blminjk-bl
committed
update FrameEditor - new info box / one-hot encoding function added
1 parent 85eee45 commit 0176c03

3 files changed

Lines changed: 167 additions & 17 deletions

File tree

‎css/common/frameEditor.css‎

Lines changed: 45 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,8 @@
6060
padding: 10px;
6161
display: grid;
6262
grid-row-gap: 5px;
63-
grid-template-rows: 35px 30px 60% calc(40% - 80px);
63+
grid-template-rows: 35px 30px calc(100% - 80px);
64+
/* grid-template-rows: 35px 30px 60% calc(40% - 80px); */
6465
}
6566

6667
/* preview code */
@@ -96,6 +97,15 @@
9697
cursor: pointer;
9798
}
9899

100+
.vp-fe-df-showinfo {
101+
cursor: pointer;
102+
float: right;
103+
/* margin-top: 5px;
104+
margin-right: 5px; */
105+
width: fit-content;
106+
}
107+
108+
99109
.vp-fe-menu-box {
100110
position: fixed;
101111
top: 0;
@@ -226,9 +236,20 @@
226236
}
227237

228238
.vp-fe-info {
229-
width: 100%;
239+
display: none;
240+
/* width: 100%;
230241
height: 100%;
242+
margin: 0px; */
243+
244+
position: absolute;
245+
width: 70%;
246+
height: 70%;
231247
margin: 0px;
248+
top: 20%;
249+
right: 10px;
250+
background: #FFFFFF;
251+
border: 0.25px solid #C4C4C4;
252+
box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
232253
}
233254

234255
.vp-fe-info-title {
@@ -237,6 +258,7 @@
237258
line-height: 20px;
238259
font-weight: bold;
239260
background: #F5F5F5;
261+
padding: 0px 10px;
240262
}
241263

242264
.vp-fe-info-content {
@@ -257,6 +279,27 @@
257279
word-wrap: break-all; /* Internet Explorer 5.5+ */
258280
}
259281

282+
.vp-fe-info-error-box {
283+
margin: 7px;
284+
padding: 10px;
285+
background: #FFFFFF;
286+
border: 0.25px solid #C4C4C4;
287+
box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
288+
border-radius: 2px;
289+
}
290+
.vp-fe-info-error-box i.fa-exclamation-triangle {
291+
color: #F37704;
292+
}
293+
.vp-fe-info-error-box-title {
294+
color: #F37704;
295+
font-weight: bold;
296+
}
297+
.vp-fe-info-error-box pre {
298+
background: #eeeeee;
299+
margin: 0px;
300+
padding: 7px;
301+
}
302+
260303
/** buttons */
261304
.vp-fe-btn-box {
262305
position: absolute;

‎src/api/functions/pandasCommand.py‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
"""
22
Pandas Objects Command
33
"""
4+
import pandas as _vp_pd
5+
from IPython.core.display import display
46

57
def _vp_get_rows_list(df):
68
"""
@@ -59,4 +61,15 @@ def _vp_get_dataframe_as_list(df):
5961
"""
6062
Get Dataframe as List
6163
"""
62-
return df.values.tolist()
64+
return df.values.tolist()
65+
66+
def _vp_display_dataframe_info(df):
67+
"""
68+
Get info of dataframe
69+
"""
70+
display(df.shape)
71+
_notnull = df.notnull().sum()
72+
_types = df.dtypes
73+
_desc = df.describe().T
74+
_info = _vp_pd.concat([_notnull, _types], axis=1, keys=['Non-Null Count','Dtype'])
75+
display(_vp_pd.concat([_info, _desc], axis=1))

‎src/common/vpFrameEditor.js‎

Lines changed: 108 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ define([
3232

3333
const VP_FE_DF_BOX = 'vp-fe-df-box';
3434
const VP_FE_DF_REFRESH = 'vp-fe-df-refresh';
35+
const VP_FE_DF_SHOWINFO = 'vp-fe-df-showinfo';
3536

3637
const VP_FE_MENU_BOX = 'vp-fe-menu-box';
3738
const VP_FE_MENU_ITEM = 'vp-fe-menu-item';
@@ -55,6 +56,9 @@ define([
5556
const VP_FE_INFO_TITLE = 'vp-fe-info-title';
5657
const VP_FE_INFO_CONTENT = 'vp-fe-info-content';
5758

59+
const VP_FE_INFO_ERROR_BOX = 'vp-fe-info-error-box';
60+
const VP_FE_INFO_ERROR_BOX_TITLE = 'vp-fe-info-error-box-title';
61+
5862
const VP_FE_BUTTON_BOX = 'vp-fe-btn-box';
5963
const VP_FE_BUTTON_CANCEL = 'vp-fe-btn-cancel';
6064
const VP_FE_BUTTON_APPLY = 'vp-fe-btn-apply';
@@ -234,20 +238,22 @@ define([
234238
page.appendFormatLine('<select id="{0}">', 'vp_feVariable');
235239
page.appendLine('</select>');
236240
page.appendFormatLine('<i class="{0} {1}"></i>', VP_FE_DF_REFRESH, 'fa fa-refresh');
241+
page.appendFormatLine('<button class="{0} {1}"><i class="{2}"></i> View Info</button>', VP_FE_DF_SHOWINFO, 'vp-button', 'fa fa-columns');
237242
page.appendLine('</div>');
238243

239244
// Table
240245
page.appendFormatLine('<div class="{0}">', VP_FE_TABLE);
241246

242247
page.appendLine('</div>'); // End of Table
243248

249+
page.appendLine('</div>'); // VP_FE_BODY
250+
244251
// Info Box
245252
page.appendFormatLine('<div class="{0}">', VP_FE_INFO);
246253
page.appendFormatLine('<div class="{0}">Info</div>', VP_FE_INFO_TITLE);
247254
page.appendFormatLine('<div class="{0}">content</div>', VP_FE_INFO_CONTENT);
248255
page.appendLine('</div>'); // End of VP_FE_INFO
249256

250-
page.appendLine('</div>'); // VP_FE_BODY
251257

252258
// apply button
253259
page.appendFormatLine('<div class="{0}">', VP_FE_BUTTON_BOX);
@@ -391,11 +397,11 @@ define([
391397
content.appendLine('<table><tr>');
392398
content.appendFormatLine('<th><label>New {0} name</label></th>', type);
393399
content.appendFormatLine('<td><input type="text" class="{0}"/>', 'vp-popup-input1');
394-
content.appendFormatLine('<label><input type="checkbox" class="{0}"/><span>{1}</span></label>', 'vp-popup-istext1','Text');
400+
content.appendFormatLine('<label><input type="checkbox" class="{0}" checked/><span>{1}</span></label>', 'vp-popup-istext1','Text');
395401
content.appendLine('</td></tr><tr>');
396402
content.appendLine('<th><label>Value</label></th>');
397403
content.appendFormatLine('<td><input type="text" class="{0}"/>', 'vp-popup-input2');
398-
content.appendFormatLine('<label><input type="checkbox" class="{0}"/><span>{1}</span></label>', 'vp-popup-istext2','Text');
404+
content.appendFormatLine('<label><input type="checkbox" class="{0}" checked/><span>{1}</span></label>', 'vp-popup-istext2','Text');
399405
content.appendLine('</td></tr></table>');
400406
return content.toString();
401407
}
@@ -494,6 +500,27 @@ define([
494500

495501
}
496502

503+
FrameEditor.prototype.showInfo = function() {
504+
$(this.wrapSelector('.' + VP_FE_INFO)).show();
505+
}
506+
507+
FrameEditor.prototype.hideInfo = function() {
508+
$(this.wrapSelector('.' + VP_FE_INFO)).hide();
509+
}
510+
511+
FrameEditor.prototype.renderInfoPage = function(renderedText, isHtml = true) {
512+
var tag = new sb.StringBuilder();
513+
tag.appendFormatLine('<div class="{0} {1}">', VP_FE_INFO_CONTENT
514+
, 'rendered_html'); // 'rendered_html' style from jupyter output area
515+
if (isHtml) {
516+
tag.appendLine(renderedText);
517+
} else {
518+
tag.appendFormatLine('<pre>{0}</pre>', renderedText);
519+
}
520+
tag.appendLine('</div>');
521+
return tag.toString();
522+
}
523+
497524
FrameEditor.prototype.loadInfo = function() {
498525
var that = this;
499526

@@ -506,7 +533,8 @@ define([
506533
this.state.selected = selected;
507534

508535
var code = new sb.StringBuilder();
509-
code.appendFormat("{0}", this.state.tempObj);
536+
var locObj = new sb.StringBuilder();
537+
locObj.appendFormat("{0}", this.state.tempObj);
510538
if (this.state.selected != '') {
511539
var rowCode = ':';
512540
var colCode = ':';
@@ -516,15 +544,62 @@ define([
516544
if (this.state.axis == 1) {
517545
colCode = '[' + this.state.selected.join(',') + ']';
518546
}
519-
code.appendFormat(".loc[{0},{1}]", rowCode, colCode);
547+
locObj.appendFormat(".loc[{0},{1}]", rowCode, colCode);
520548
}
521-
code.append(".value_counts()");
522-
kernelApi.executePython(code.toString(), function(result) {
523-
$(that.wrapSelector('.' + VP_FE_INFO_CONTENT)).replaceWith(function() {
524-
// return vpCommon.formatString('<div class="{0}"><pre>{1}</pre></div>', VP_FE_INFO_CONTENT, result);
525-
return vpCommon.formatString('<div class="{0}">{1}</div>', VP_FE_INFO_CONTENT, result);
526-
});
527-
});
549+
// code.append(".value_counts()");
550+
code.appendFormat('_vp_display_dataframe_info({0})', locObj.toString());
551+
552+
// kernelApi.executePython(code.toString(), function(result) {
553+
// $(that.wrapSelector('.' + VP_FE_INFO_CONTENT)).replaceWith(function() {
554+
// // return vpCommon.formatString('<div class="{0}"><pre>{1}</pre></div>', VP_FE_INFO_CONTENT, result);
555+
// return vpCommon.formatString('<div class="{0}">{1}</div>', VP_FE_INFO_CONTENT, result);
556+
// });
557+
// });
558+
559+
Jupyter.notebook.kernel.execute(
560+
code.toString(),
561+
{
562+
iopub: {
563+
output: function(msg) {
564+
if (msg.content.data) {
565+
var htmlText = String(msg.content.data["text/html"]);
566+
var codeText = String(msg.content.data["text/plain"]);
567+
if (htmlText != 'undefined') {
568+
$(that.wrapSelector('.' + VP_FE_INFO_CONTENT)).replaceWith(function() {
569+
return that.renderInfoPage(htmlText);
570+
});
571+
} else if (codeText != 'undefined') {
572+
// plain text as code
573+
$(that.wrapSelector('.' + VP_FE_INFO_CONTENT)).replaceWith(function() {
574+
return that.renderInfoPage(codeText, false);
575+
});
576+
} else {
577+
$(that.wrapSelector('.' + VP_FE_INFO_CONTENT)).replaceWith(function() {
578+
return that.renderInfoPage('');
579+
});
580+
}
581+
} else {
582+
var errorContent = new sb.StringBuilder();
583+
if (msg.content.ename) {
584+
errorContent.appendFormatLine('<div class="{0}">', VP_FE_INFO_ERROR_BOX);
585+
errorContent.appendLine('<i class="fa fa-exclamation-triangle"></i>');
586+
errorContent.appendFormatLine('<label class="{0}">{1}</label>'
587+
, VP_FE_INFO_ERROR_BOX_TITLE, msg.content.ename);
588+
if (msg.content.evalue) {
589+
// errorContent.appendLine('<br/>');
590+
errorContent.appendFormatLine('<pre>{0}</pre>', msg.content.evalue.split('\\n').join('<br/>'));
591+
}
592+
errorContent.appendLine('</div>');
593+
}
594+
$(that.wrapSelector('.' + VP_FE_INFO_CONTENT)).replaceWith(function() {
595+
return that.renderInfoPage(errorContent);
596+
});
597+
}
598+
}
599+
}
600+
},
601+
{ silent: false, store_history: true, stop_on_error: true }
602+
);
528603
}
529604

530605
FrameEditor.prototype.getTypeCode = function(type, content={}) {
@@ -577,6 +652,9 @@ define([
577652
code.appendFormat("{0}{1}.drop_duplicates(axis={2}, inplace=True)", tempObj, locObj, axis);
578653
break;
579654
case FRAME_EDIT_TYPE.ONE_HOT_ENCODING:
655+
if (axis == 1) {
656+
code.appendFormat("{0} = pd.get_dummies(data={1}, columns=[{2}])", tempObj, tempObj, selectedName);
657+
}
580658
break;
581659
case FRAME_EDIT_TYPE.SET_IDX:
582660
break;
@@ -733,6 +811,15 @@ define([
733811
that.loadVariableList();
734812
});
735813

814+
// show info
815+
$(document).on('click', this.wrapSelector('.vp-fe-df-showinfo'), function() {
816+
that.showInfo();
817+
});
818+
819+
$(document).on('click', this.wrapSelector('.' + VP_FE_INFO), function(evt) {
820+
evt.stopPropagation();
821+
});
822+
736823
// menu on column
737824
$(document).on('contextmenu', this.wrapSelector('.' + VP_FE_TABLE + ' .' + VP_FE_TABLE_COLUMN), function(event) {
738825
event.preventDefault();
@@ -780,6 +867,10 @@ define([
780867
// close menu
781868
that.hideMenu();
782869
}
870+
if (!$(evt.target).hasClass(VP_FE_DF_SHOWINFO)) {
871+
// close info
872+
that.hideInfo();
873+
}
783874
});
784875

785876
// select column
@@ -840,9 +931,12 @@ define([
840931
case FRAME_EDIT_TYPE.ADD_ROW:
841932
case FRAME_EDIT_TYPE.RENAME:
842933
that.openInputPopup(editType);
843-
return;
934+
break;
935+
default:
936+
that.loadCode(that.getTypeCode(editType));
937+
break;
844938
}
845-
that.loadCode(that.getTypeCode(editType));
939+
that.hideMenu();
846940
});
847941

848942
// ok input popup

0 commit comments

Comments
 (0)