Skip to content

Commit 07ba8aa

Browse files
minjk-blminjk-bl
committed
#31 - Frame Editor table data converting implemented
1 parent c5503a9 commit 07ba8aa

3 files changed

Lines changed: 124 additions & 59 deletions

File tree

‎css/common/frameEditor.css‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -188,4 +188,37 @@
188188
white-space: -pre-wrap; /* Opera 4-6 */
189189
white-space: -o-pre-wrap; /* Opera 7 */
190190
word-wrap: break-all; /* Internet Explorer 5.5+ */
191-
}
191+
}
192+
193+
/** buttons */
194+
.vp-fe-btn-box {
195+
position: absolute;
196+
bottom: 10px;
197+
right: 10px;
198+
}
199+
.vp-fe-btn-apply {
200+
width: 80px;
201+
height: 30px;
202+
background: #F37704;
203+
border: 0.25px solid #C4C4C4;
204+
box-sizing: border-box;
205+
border-radius: 2px;
206+
text-align: center;
207+
color: #FFFFFF;
208+
}
209+
.vp-fe-btn-apply:hover {
210+
background: var(--hightlight-color);
211+
}
212+
.vp-fe-btn-cancel {
213+
width: 80px;
214+
height: 30px;
215+
background: #E5E5E5;
216+
border: 0.25px solid #C4C4C4;
217+
box-sizing: border-box;
218+
border-radius: 2px;
219+
text-align: center;
220+
color: #696969;
221+
}
222+
.vp-fe-btn-cancel:hover {
223+
background: #ccc;
224+
}

‎src/common/vpCommon.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,22 @@ define([
129129
return str;
130130
}
131131

132+
/**
133+
* Convert to string format if not numeric
134+
* @param {*} code
135+
* @returns
136+
*/
137+
var convertToStr = function(code) {
138+
if (!$.isNumeric(code)) {
139+
if (code.includes("'")) {
140+
code = `"${code}"`;
141+
} else {
142+
code = `'${code}'`;
143+
}
144+
}
145+
return code;
146+
}
147+
132148
/**
133149
* check duplicate variable name
134150
* @param {string} varName
@@ -338,5 +354,6 @@ define([
338354
// 추가
339355
, kernelExecute: kernelExecute
340356
, cellExecute: cellExecute
357+
, convertToStr: convertToStr
341358
};
342359
});

‎src/common/vpFrameEditor.js‎

Lines changed: 73 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,12 @@ define([
4040
const VP_FE_INFO = 'vp-fe-info';
4141
const VP_FE_INFO_CONTENT = 'vp-fe-info-content';
4242

43-
const TABLE_LINES = 5;
43+
const VP_FE_BUTTON_BOX = 'vp-fe-btn-box';
44+
const VP_FE_BUTTON_CANCEL = 'vp-fe-btn-cancel';
45+
const VP_FE_BUTTON_APPLY = 'vp-fe-btn-apply';
46+
47+
// search rows count at once
48+
const TABLE_LINES = 10;
4449

4550
const FRAME_EDIT_TYPE = {
4651
INIT: 0,
@@ -72,7 +77,7 @@ define([
7277
this.state = {
7378
originObj: '',
7479
tempObj: '',
75-
selected: '',
80+
selected: [],
7681
axis: 0,
7782
lines: TABLE_LINES,
7883
steps: []
@@ -88,7 +93,7 @@ define([
8893

8994
FrameEditor.prototype.open = function() {
9095
this.loadVariableList();
91-
96+
9297
$(this.wrapSelector()).show();
9398
}
9499

@@ -104,7 +109,7 @@ define([
104109
}
105110

106111
FrameEditor.prototype.initState = function() {
107-
this.state.selected = '';
112+
this.state.selected = [];
108113
this.state.axis = -1;
109114
this.state.lines = TABLE_LINES;
110115
this.state.steps = [];
@@ -179,6 +184,15 @@ define([
179184
page.appendFormatLine('{0}', infoBox.toTagString());
180185

181186
page.appendLine('</div>'); // VP_FE_BODY
187+
188+
// apply button
189+
page.appendFormatLine('<div class="{0}">', VP_FE_BUTTON_BOX);
190+
page.appendFormatLine('<button type="button" class="{0}">{1}</button>'
191+
, VP_FE_BUTTON_CANCEL, 'Cancel');
192+
page.appendFormatLine('<button type="button" class="{0}">{1}</button>'
193+
, VP_FE_BUTTON_APPLY, 'Apply');
194+
page.appendLine('</div>');
195+
182196
page.appendLine('</div>'); // VP_FE_CONTAINER
183197
page.appendLine('</div>'); // VP_FE
184198

@@ -226,8 +240,7 @@ define([
226240
// Table
227241
tag.appendFormatLine('<div class="{0} {1}">', VP_FE_TABLE, 'rendered_html');
228242
if (isHtml) {
229-
var renderedTable = $(renderedText).find('table');
230-
tag.appendFormatLine('<table class="dataframe">{0}</table>', renderedTable.html());
243+
tag.appendFormatLine('<table class="dataframe">{0}</table>', renderedText);
231244
// More button
232245
tag.appendFormatLine('<div class="{0} {1}">More...</div>', VP_FE_TABLE_MORE, 'vp-button');
233246
} else {
@@ -242,9 +255,9 @@ define([
242255
var code = new sb.StringBuilder();
243256
code.appendFormat("{0}", this.state.tempObj);
244257
if (this.state.selected != '') {
245-
code.appendFormat(".loc[{0},{1}]"
246-
, this.state.axis==0?this.state.selected:":"
247-
, this.state.axis==1?"'"+this.state.selected+"'":":");
258+
code.appendFormat(".loc[[{0}],[{1}]]"
259+
, this.state.axis==0?this.state.selected.join(','):":"
260+
, this.state.axis==1?this.state.selected.join(','):":");
248261
}
249262
code.append(".value_counts()");
250263
console.log(code.toString());
@@ -300,54 +313,56 @@ define([
300313
case FRAME_EDIT_TYPE.SHOW:
301314
break;
302315
}
303-
code.appendFormat('{0}.head({1})', tempObj, lines);
304-
305-
Jupyter.notebook.kernel.execute(
306-
code.toString(),
307-
{
308-
iopub: {
309-
output: function(msg) {
310-
if (msg.content.data) {
311-
var htmlText = String(msg.content.data["text/html"]);
312-
var codeText = String(msg.content.data["text/plain"]);
313-
if (htmlText != 'undefined') {
314-
$(that.wrapSelector('.' + VP_FE_TABLE)).replaceWith(function() {
315-
return that.renderTable(htmlText);
316-
});
317-
} else if (codeText != 'undefined') {
318-
// plain text as code
319-
$(that.wrapSelector('.' + VP_FE_TABLE)).replaceWith(function() {
320-
return that.renderTable(codeText, false);
321-
});
322-
} else {
323-
$(that.wrapSelector('.' + VP_FE_TABLE)).replaceWith(function() {
324-
return that.renderTable('');
325-
});
326-
}
327-
that.loadInfo();
328-
that.state.steps.push(code.toString());
329-
} else {
330-
var errorContent = new sb.StringBuilder();
331-
if (msg.content.ename) {
332-
errorContent.appendFormatLine('<div class="{0}">', VP_DS_DATA_ERROR_BOX);
333-
errorContent.appendLine('<i class="fa fa-exclamation-triangle"></i>');
334-
errorContent.appendFormatLine('<label class="{0}">{1}</label>'
335-
, VP_DS_DATA_ERROR_BOX_TITLE, msg.content.ename);
336-
if (msg.content.evalue) {
337-
// errorContent.appendLine('<br/>');
338-
errorContent.appendFormatLine('<pre>{0}</pre>', msg.content.evalue.split('\\n').join('<br/>'));
339-
}
340-
errorContent.appendLine('</div>');
341-
}
342-
$(that.wrapSelector('.' + VP_FE_TABLE)).replaceWith(function() {
343-
return that.renderTable(errorContent);
344-
});
316+
var addStackCode = code.toString();
317+
318+
// search codes //TODO: python 코드로 정리해서 가져올 것
319+
code.appendFormat("{0}.head({1}).to_json(orient='{2}')", tempObj, lines, 'split');
320+
321+
kernelApi.executePython(code.toString(), function(result) {
322+
console.log(result);
323+
try {
324+
// var data = JSON.parse(result);
325+
var data = JSON.parse(result.substr(1,result.length - 2));
326+
var columnList = data.columns;
327+
var indexList = data.index;
328+
var dataList = data.data;
329+
330+
// table
331+
var table = new sb.StringBuilder();
332+
// table.appendFormatLine('<table border="{0}" class="{1}">', 1, 'dataframe');
333+
table.appendLine('<thead>');
334+
table.appendLine('<tr><th></th>');
335+
columnList && columnList.forEach(col => {
336+
table.appendFormatLine('<th data-label="{0}">{1}</th>', vpCommon.convertToStr(col), col);
337+
});
338+
table.appendLine('</tr>');
339+
table.appendLine('</thead>');
340+
table.appendLine('<tbody>');
341+
342+
dataList && dataList.forEach((row, idx) => {
343+
table.appendLine('<tr>');
344+
table.appendFormatLine('<th data-label="{0}">{1}</th>', vpCommon.convertToStr(indexList[idx]), indexList[idx]);
345+
row.forEach(cell => {
346+
if (cell == null) {
347+
cell = 'NaN';
345348
}
346-
}
347-
}
348-
},
349-
{ silent: false, store_history: true, stop_on_error: true }
350-
);
349+
table.appendFormatLine('<td>{0}</td>', cell);
350+
});
351+
table.appendLine('</tr>');
352+
});
353+
table.appendLine('</tbody>');
354+
355+
$(that.wrapSelector('.' + VP_FE_TABLE)).replaceWith(function() {
356+
return that.renderTable(table.toString());
357+
});
358+
// load info
359+
that.loadInfo();
360+
// add to stack
361+
that.state.steps.push(addStackCode);
362+
} catch (err) {
363+
console.log(err);
364+
}
365+
});
351366
}
352367

353368

@@ -391,7 +406,7 @@ define([
391406
// select column
392407
$(document).on('click', this.wrapSelector('.' + VP_FE_TABLE + ' thead th'), function() {
393408
var hasSelected = $(this).hasClass('selected');
394-
$(that.wrapSelector('.' + VP_FE_TABLE + ' th')).removeClass('selected');
409+
$(that.wrapSelector('.' + VP_FE_TABLE + ' tbody th')).removeClass('selected');
395410
if (!hasSelected) {
396411
$(this).addClass('selected');
397412
that.state.axis = 1; // column
@@ -407,7 +422,7 @@ define([
407422
// select row
408423
$(document).on('click', this.wrapSelector('.' + VP_FE_TABLE + ' tbody th'), function() {
409424
var hasSelected = $(this).hasClass('selected');
410-
$(that.wrapSelector('.' + VP_FE_TABLE + ' th')).removeClass('selected');
425+
$(that.wrapSelector('.' + VP_FE_TABLE + ' thead th')).removeClass('selected');
411426
if (!hasSelected) {
412427
$(this).addClass('selected');
413428
that.state.axis = 0; // index(row)

0 commit comments

Comments
 (0)