Skip to content

Commit f5012a4

Browse files
minjk-blminjk-bl
committed
pandas-profiling app ui & operations update
1 parent ccf3038 commit f5012a4

3 files changed

Lines changed: 60 additions & 24 deletions

File tree

‎css/common/profiling.css‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
min-width: 400px;
2020
min-height: 400px;
2121
width: 50%;
22-
height: 95%;
22+
height: 60%;
2323

2424
background-color: white;
2525
}
@@ -81,6 +81,9 @@
8181
.vp-pf-link {
8282
color: var(--hightlight-color);
8383
}
84+
.vp-pf-import-btn {
85+
margin-left: 10px;
86+
}
8487

8588
.vp-pf-show-box {
8689
display: grid;

‎css/component/common.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,4 +59,10 @@
5959
/* cursor as pointer */
6060
.vp-cursor {
6161
cursor: pointer;
62+
}
63+
64+
.vp-vertical-line {
65+
display: inline-block;
66+
height: 15px;
67+
border-right: 1px solid var(--font-primary);
6268
}

‎src/common/vpProfiling.js‎

Lines changed: 50 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ define([
2525

2626
const VP_PF_PREPARE_BOX = 'vp-pf-prepare-box';
2727
const VP_PF_INSTALL_BTN = 'vp-pf-install-btn';
28+
const VP_PF_CHECK_BTN = 'vp-pf-check-btn';
2829
const VP_PF_IMPORT_BTN = 'vp-pf-import-btn';
2930

3031
const VP_PF_SHOW_BOX = 'vp-pf-show-box';
@@ -90,13 +91,11 @@ define([
9091

9192
Profiling.prototype.init = function() {
9293
// state
93-
this.state = {
94-
95-
}
9694

9795
vpCommon.loadCss(Jupyter.notebook.base_url + vpConst.BASE_PATH + vpConst.STYLE_PATH + "common/profiling.css");
9896

9997
this.render();
98+
this.checkInstalled();
10099
this.bindEvent();
101100

102101
this.loadVariableList();
@@ -125,7 +124,9 @@ define([
125124
page.appendFormatLine('<label>{0} <a href="{1}" target="_blank"><i class="{2} {3}" title="{4}"></i></a></label>'
126125
, 'Prepare to use Pandas Profiling', 'https://github.com/pandas-profiling/pandas-profiling', 'fa fa-link', 'vp-pf-link', 'Go to pandas-profiling github page');
127126
page.appendLine('<div>');
128-
page.appendFormatLine('<button class="{0} {1}">{2}</button>', 'vp-button', VP_PF_INSTALL_BTN, 'Install');
127+
page.appendFormatLine('<button class="{0} {1}">{2}</button>', 'vp-button activated', VP_PF_INSTALL_BTN, 'Install');
128+
page.appendFormatLine('<i class="{0} {1} {2}" title="{2}"></i>', 'fa fa-refresh', 'vp-cursor', VP_PF_CHECK_BTN, 'Check if installed');
129+
// page.appendLine('<div class="vp-vertical-line"></div>');
129130
page.appendFormatLine('<button class="{0} {1}">{2}</button>', 'vp-button', VP_PF_IMPORT_BTN, 'Import');
130131
page.appendLine('</div>');
131132
page.appendLine('</div>');
@@ -221,6 +222,46 @@ define([
221222
return tag.toString();
222223
}
223224

225+
Profiling.prototype.checkInstalled = function() {
226+
var that = this;
227+
// set state as 'Checking'
228+
$(this.wrapSelector('.' + VP_PF_INSTALL_BTN)).text('Checking...');
229+
// set disabled
230+
if (!$(that.wrapSelector('.' + VP_PF_INSTALL_BTN)).hasClass('disabled')) {
231+
$(that.wrapSelector('.' + VP_PF_INSTALL_BTN)).addClass('disabled');
232+
}
233+
var checking = true;
234+
235+
// check installed
236+
Jupyter.notebook.kernel.execute(
237+
'!pip show pandas-profiling',
238+
{
239+
iopub: {
240+
output: function(msg) {
241+
if (!checking) {
242+
return;
243+
}
244+
if (msg.content['name'] == 'stderr') {
245+
if (msg.content['text'].includes('not found')) {
246+
$(that.wrapSelector('.' + VP_PF_INSTALL_BTN)).text('Install');
247+
// set enabled
248+
if ($(that.wrapSelector('.' + VP_PF_INSTALL_BTN)).hasClass('disabled')) {
249+
$(that.wrapSelector('.' + VP_PF_INSTALL_BTN)).removeClass('disabled');
250+
}
251+
}
252+
} else {
253+
$(that.wrapSelector('.' + VP_PF_INSTALL_BTN)).text('Installed');
254+
// set disabled
255+
if (!$(that.wrapSelector('.' + VP_PF_INSTALL_BTN)).hasClass('disabled')) {
256+
$(that.wrapSelector('.' + VP_PF_INSTALL_BTN)).addClass('disabled');
257+
}
258+
}
259+
}
260+
}
261+
}
262+
);
263+
}
264+
224265
Profiling.prototype.unbindEvent = function() {
225266
$(document).off(this.wrapSelector('*'));
226267

@@ -246,6 +287,11 @@ define([
246287
vpCommon.cellExecute([{command: '!pip install pandas-profiling', exec:true, type:'code'}]);
247288
});
248289

290+
// click check installed
291+
$(document).on('click', this.wrapSelector('.' + VP_PF_CHECK_BTN), function() {
292+
that.checkInstalled();
293+
});
294+
249295
// click import
250296
$(document).on('click', this.wrapSelector('.' + VP_PF_IMPORT_BTN), function(event) {
251297
vpCommon.cellExecute([{command: 'from pandas_profiling import ProfileReport', exec:true, type:'code'}]);
@@ -315,25 +361,6 @@ define([
315361
$(document).on('click', this.wrapSelector('.' + VP_PF_BUTTON_CANCEL), function() {
316362
that.close();
317363
});
318-
319-
// click apply
320-
// $(document).on('click', this.wrapSelector('.' + VP_PF_BUTTON_APPLY), function() {
321-
// var code = 'test code'; //TODO:
322-
// if (that.pageThis) {
323-
// $(that.pageThis.wrapSelector('#' + that.targetId)).val(code);
324-
// $(that.pageThis.wrapSelector('#' + that.targetId)).trigger({
325-
// type: 'profiling_apply',
326-
// code: code
327-
// });
328-
// } else {
329-
// $(vpCommon.wrapSelector('#' + that.targetId)).val(code);
330-
// $(vpCommon.wrapSelector('#' + that.targetId)).trigger({
331-
// type: 'profiling_apply',
332-
// code: code
333-
// });
334-
// }
335-
// that.close();
336-
// });
337364
};
338365

339366
return Profiling;

0 commit comments

Comments
 (0)