Skip to content

Commit a21e473

Browse files
author
minjk-bl
committed
Update Apps > Import
1 parent 9c91313 commit a21e473

File tree

6 files changed

+270
-51
lines changed

6 files changed

+270
-51
lines changed

‎css/m_apps/import.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.vp-tab-button {
2+
display: inline-block;
3+
border: 0.24px solid var(--border-gray-color);
4+
padding: 5px;
5+
cursor: pointer;
6+
}
7+
.vp-tab-button.vp-tab-selected {
8+
color: var(--highlight-color);
9+
border-bottom: 2px solid var(--highlight-color);
10+
}

‎css/popupComponent.css

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@
200200
padding: 1px 8px 0 5px;
201201
}
202202
/* checkbox */
203-
.vp-popup-frame input[type=checkbox] {
203+
.vp-popup-frame input[type=checkbox]:not(.vp-checkbox) {
204204
position: absolute;
205205
width: 1px;
206206
height: 1px;
@@ -210,19 +210,19 @@
210210
clip: rect(0, 0, 0, 0);
211211
border: 0;
212212
}
213-
.vp-popup-frame input[type=checkbox] + label,
214-
.vp-popup-frame label input[type=checkbox] + span {
213+
.vp-popup-frame input[type=checkbox]:not(.vp-checkbox) + label,
214+
.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox) + span {
215215
display: inline-block;
216216
position: relative;
217217
padding-left: 18px;
218218
cursor: pointer;
219219
}
220-
.vp-popup-frame input[type=checkbox]:disabled + label,
221-
.vp-popup-frame label input[type=checkbox]:disabled + span {
220+
.vp-popup-frame input[type=checkbox]:not(.vp-checkbox):disabled + label,
221+
.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox):disabled + span {
222222
color: var(--gray-color);
223223
}
224-
.vp-popup-frame input[type=checkbox] + label::before,
225-
.vp-popup-frame label input[type=checkbox] + span::before {
224+
.vp-popup-frame input[type=checkbox]:not(.vp-checkbox) + label::before,
225+
.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox) + span::before {
226226
content: '';
227227
position: absolute;
228228
left: 0;
@@ -236,8 +236,8 @@
236236
border: none;
237237
box-sizing: border-box;
238238
}
239-
.vp-popup-frame input[type=checkbox]:checked + label::before,
240-
.vp-popup-frame label input[type=checkbox]:checked + span::before {
239+
.vp-popup-frame input[type=checkbox]:not(.vp-checkbox):checked + label::before,
240+
.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox):checked + span::before {
241241
content: '';
242242
position: absolute;
243243
left: 0;
@@ -250,8 +250,8 @@
250250
border: none;
251251
box-sizing: border-box;
252252
}
253-
.vp-popup-frame input[type=checkbox]:disabled + label::before,
254-
.vp-popup-frame label input[type=checkbox]:disabled + span::before {
253+
.vp-popup-frame input[type=checkbox]:not(.vp-checkbox):disabled + label::before,
254+
.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox):disabled + span::before {
255255
content: '';
256256
position: absolute;
257257
left: 0;

‎css/root.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,15 @@ body {
192192
cursor: not-allowed;
193193
}
194194

195+
.vp-checkbox {
196+
display: inline-block;
197+
position: relative !important;
198+
width: 13px;
199+
height: 13px;
200+
border: 1px solid #828282;
201+
margin: 0px 15px;
202+
}
203+
195204
/* Scrollbar */
196205
.vp-scrollbar {
197206
overflow-y: auto;

‎data/libraries.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3156,6 +3156,20 @@
31563156
"color": 1,
31573157
"icon": "apps/apps_white.svg"
31583158
}
3159+
},
3160+
{
3161+
"id" : "ml_addData",
3162+
"type" : "function",
3163+
"level": 1,
3164+
"name" : "Add data",
3165+
"tag" : "ADD PREDICTED DATA,MACHINE LEARNING,ML",
3166+
"path" : "visualpython - machine_learning - add data",
3167+
"desc" : "Add predicted data for machine learning",
3168+
"file" : "m_ml/addData",
3169+
"apps" : {
3170+
"color": 1,
3171+
"icon": "apps/apps_white.svg"
3172+
}
31593173
}
31603174
]
31613175
}

‎js/m_apps/Import.js

Lines changed: 166 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,30 @@
1313
// [CLASS] Import
1414
//============================================================================
1515
define([
16+
'css!vp_base/css/m_apps/import.css',
1617
'vp_base/js/com/com_util',
1718
'vp_base/js/com/com_Const',
1819
'vp_base/js/com/com_String',
1920
'vp_base/js/com/component/PopupComponent'
20-
], function(com_util, com_Const, com_String, PopupComponent) {
21+
], function(importCss, com_util, com_Const, com_String, PopupComponent) {
22+
23+
const importTemplates = {
24+
'pre-processing': [
25+
{ i0: 'numpy', i1: 'np', type: 'module'},
26+
{ i0: 'pandas', i1: 'pd', type: 'module'},
27+
{
28+
i0: 'matplotlib.pyplot', i1: 'plt', type: 'module'
29+
, include: [
30+
'%matplotlib inline'
31+
]
32+
},
33+
{ i0: 'seaborn', i1: 'sns', type: 'module'}
34+
],
35+
'machine-learning': [
36+
{ i0: 'sklearn.model_selection', i1: 'train_test_split', type: 'function' },
37+
{ i0: 'sklearn', i1: 'metrics', type: 'function' }
38+
]
39+
}
2140

2241
/**
2342
* Import
@@ -29,98 +48,205 @@ define([
2948
this.config.dataview = false;
3049
this.config.sizeLevel = 1;
3150

32-
this.packageList = [
33-
{ library: 'numpy', alias:'np'}
34-
, { library: 'pandas', alias:'pd'}
35-
, {
36-
library: 'matplotlib.pyplot', alias:'plt'
37-
, include: [
38-
'%matplotlib inline'
39-
]
40-
}
41-
, { library: 'seaborn', alias:'sns'}
42-
];
51+
let savedData = vpConfig.getDataSimple('', 'vpimport');
52+
// Reset abnormal data
53+
if (savedData.tabType == undefined) {
54+
savedData = {};
55+
vpConfig.setData(null, 'vpimport');
56+
}
4357

4458
this.state = {
45-
importMeta: vpConfig.getDataSimple('', 'vpimport'),
59+
tabType: 'pre-processing',
60+
importMeta: [],
61+
...savedData,
4662
...this.state
4763
}
4864

4965
if (!this.state.importMeta || this.state.importMeta.length <= 0) {
50-
this.state.importMeta = this.packageList;
66+
this.state.importMeta = JSON.parse(JSON.stringify(importTemplates[this.state.tabType]));
5167
}
5268
}
5369

5470
_bindEvent() {
5571
super._bindEvent();
56-
/** Implement binding events */
5772
let that = this;
73+
74+
// select tab
75+
$(this.wrapSelector('.vp-tab-button')).on('click', function() {
76+
let tabType = $(this).data('tab');
77+
// set button selected
78+
that.state.tabType = tabType;
79+
$(that.wrapSelector('.vp-tab-button')).removeClass('vp-tab-selected');
80+
$(this).addClass('vp-tab-selected');
81+
// replace libraries
82+
that.state.importMeta = importTemplates[tabType];
83+
$(that.wrapSelector('#vp_tblImport')).replaceWith(function() {
84+
return that.templateTable(that.state.importMeta);
85+
});
86+
});
87+
5888
// delete lib
59-
$(document).on("click", this.wrapSelector('.vp-remove-option'), function() {
89+
$(this.wrapSelector()).on("click", '.vp-remove-option', function() {
6090
$(this).closest('tr').remove();
91+
92+
that.checkAll();
93+
});
94+
// check/uncheck all
95+
$(this.wrapSelector()).on('change', '#vp_libraryCheckAll', function() {
96+
var checked = $(this).prop('checked');
97+
$(that.wrapSelector('.vp-item-check')).prop('checked', checked);
98+
});
99+
// check item
100+
$(this.wrapSelector()).on('change', '.vp-item-check', function() {
101+
var checked = $(this).prop('checked');
102+
// if unchecked at least one item, uncheck check-all
103+
if (!checked) {
104+
$(that.wrapSelector('.vp-check-all')).prop('checked', false);
105+
} else {
106+
// if all checked, check check-all
107+
that.checkAll();
108+
}
61109
});
62110

63-
// add lib
64-
$(this.wrapSelector('#vp_addLibrary')).click(function() {
111+
// add module
112+
$(this.wrapSelector('#vp_addModule')).click(function() {
113+
var libsLength = $(that.wrapSelector("#vp_tblImport tbody tr")).length;
114+
var tagTr = $(that.templateForModule(libsLength, '', ''));
115+
116+
$(that.wrapSelector("#vp_tblImport tr:last")).after(tagTr);
117+
});
118+
// add function
119+
$(this.wrapSelector('#vp_addFunction')).click(function() {
65120
var libsLength = $(that.wrapSelector("#vp_tblImport tbody tr")).length;
66-
var tagTr = $(that.templateForLibrary(libsLength, '', ''));
121+
var tagTr = $(that.templateForFunction(libsLength, '', ''));
67122

68123
$(that.wrapSelector("#vp_tblImport tr:last")).after(tagTr);
69124
});
70125
}
71126

127+
checkAll() {
128+
// check if all checked
129+
// if all checked, check check-all
130+
var allLength = $(this.wrapSelector('.vp-item-check')).length;
131+
var checkedLength = $(this.wrapSelector('.vp-item-check:checked')).length;
132+
if (allLength == checkedLength) {
133+
$(this.wrapSelector('.vp-check-all')).prop('checked', true);
134+
} else {
135+
$(this.wrapSelector('.vp-check-all')).prop('checked', false);
136+
}
137+
}
138+
72139
templateForBody() {
73140
/** Implement generating template */
74141
var page = new com_String();
75-
page.appendFormatLine('<input type="hidden" id="vp_importMeta" value="{0}"/>', '');
76-
page.appendLine('<table id="vp_tblImport" class="vp-tbl-basic w90">');
77-
page.appendLine('<colgroup><col width="40%"/><col width="40%"/><col width="*"/></colgroup>');
142+
// tab buttons
143+
page.appendLine('<div class="vp-tab-box">');
144+
page.appendFormatLine('<div class="vp-tab-button {0}" data-tab="{1}">{2}</div>'
145+
, this.state.tabType=='pre-processing'?'vp-tab-selected':'', 'pre-processing', 'Pre-processing');
146+
page.appendFormatLine('<div class="vp-tab-button {0}" data-tab="{1}">{2}</div>'
147+
, this.state.tabType=='machine-learning'?'vp-tab-selected':'', 'machine-learning', 'Machine Learning');
148+
page.appendLine('</div>');
149+
// import table
150+
page.appendLine(this.templateTable(this.state.importMeta));
151+
page.appendLine('<input type="button" id="vp_addModule" value="+ Module" class="vp-button" title="import...as"/>');
152+
page.appendLine('<input type="button" id="vp_addFunction" value="+ Function" class="vp-button" title="from...import"/>');
153+
return page.toString();
154+
}
155+
156+
templateTable(libraries) {
157+
var page = new com_String();
158+
page.appendLine('<table id="vp_tblImport" class="vp-tbl-basic w90 vp-tbl-gap5">');
159+
page.appendLine('<colgroup><col width="10px"/><col width="10%"/><col width="30%"/><col width="10%"/><col width="30%"/><col width="*"/></colgroup>');
78160
page.appendLine('<thead><tr>');
79-
page.appendLine('<th>Library Name</th><th>Alias</th><th></th>');
161+
page.appendFormat('<th><input id="{0}" type="checkbox" class="vp-checkbox vp-check-all" checked/></th>', 'vp_libraryCheckAll');
162+
page.appendLine('<th></th><th></th><th></th><th></th><th></th>');
80163
page.appendLine('</tr></thead>');
81164
page.appendLine('<tbody>');
82165
let that = this;
83-
this.state.importMeta && this.state.importMeta.forEach((lib, idx) => {
84-
page.appendLine(that.templateForLibrary(idx, lib.library, lib.alias));
166+
libraries && libraries.forEach((lib, idx) => {
167+
if (lib.type == 'function') {
168+
page.appendLine(that.templateForFunction(idx, lib.i0, lib.i1, lib.checked));
169+
} else {
170+
page.appendLine(that.templateForModule(idx, lib.i0, lib.i1, lib.checked));
171+
}
85172
});
86173
page.appendLine('</tbody>');
87174
page.appendLine('</table>');
88-
page.appendLine('<input type="button" id="vp_addLibrary" value="+ Library" class="vp-button"/>');
89175
return page.toString();
90176
}
91177

92-
templateForLibrary(idx, libraryName, aliasName) {
178+
templateForModule(idx, moduleName, aliasName, checked=true) {
93179
var tag = new com_String();
94-
tag.append('<tr>');
180+
tag.append('<tr data-type="module">');
181+
// checkbox
182+
tag.appendFormat('<td><input id="{0}" type="checkbox" class="vp-checkbox vp-item-check" {1}/></td>'
183+
, 'vp_libraryCheck' + idx, checked?'checked':'');
184+
// inputs
185+
tag.appendFormat('<td style="{0}">import</td>', 'text-align="center";');
95186
tag.appendFormat('<td><input id="{0}" type="text" class="{1}" placeholder="{2}" required value="{3}"/></td>'
96-
, 'vp_library' + idx, 'vp-input m vp-add-library', 'Type library name', libraryName);
187+
, 'vp_i0_' + idx, 'vp-input m vp-add-i0', 'Type module', moduleName);
188+
tag.appendFormat('<td style="{0}">as</td>', 'text-align="center";');
97189
tag.appendFormat('<td><input id="{0}" type="text" class="{1}" placeholder="{2}" value="{3}"/></td>'
98-
, 'vp_alias' + idx, 'vp-input m vp-add-alias', 'Type alias', aliasName);
190+
, 'vp_i1_' + idx, 'vp-input m vp-add-i1', 'Type alias', aliasName);
99191
tag.appendFormat('<td class="{0}"><img src="{1}"/></td>', 'vp-remove-option w100 vp-cursor', '/nbextensions/visualpython/img/close_small.svg');
100192
tag.append('</tr>');
101193
return tag.toString();
102194
}
103195

196+
templateForFunction(idx, moduleName, functionName, checked=true) {
197+
var tag = new com_String();
198+
tag.append('<tr data-type="function">');
199+
// checkbox
200+
tag.appendFormat('<td><input id="{0}" type="checkbox" class="vp-checkbox vp-item-check" {1}/></td>'
201+
, 'vp_libraryCheck' + idx, checked?'checked':'');
202+
// inputs
203+
tag.appendFormat('<td style="{0}">from</td>', 'text-align="center";');
204+
tag.appendFormat('<td><input id="{0}" type="text" class="{1}" placeholder="{2}" required value="{3}"/></td>'
205+
, 'vp_i0_' + idx, 'vp-input m vp-add-i0', 'Type module', moduleName);
206+
tag.appendFormat('<td style="{0}">import</td>', 'text-align="center";');
207+
tag.appendFormat('<td><input id="{0}" type="text" class="{1}" placeholder="{2}" value="{3}"/></td>'
208+
, 'vp_i1_' + idx, 'vp-input m vp-add-i1', 'Type function', functionName);
209+
tag.appendFormat('<td class="{0}"><img src="{1}"/></td>', 'vp-remove-option w100 vp-cursor', '/nbextensions/visualpython/img/close_small.svg');
210+
tag.append('</tr>');
211+
return tag.toString();
212+
}
213+
214+
render() {
215+
super.render();
216+
217+
this.checkAll();
218+
}
219+
104220
generateCode() {
105221
var sbCode = new com_String();
106222

107223
// code generate with library list
108224
var importMeta = [];
109225
var libraryList = $(this.wrapSelector("#vp_tblImport tbody tr"));
110226
for (var idx = 0; idx < libraryList.length; idx++) {
111-
var pacName = $(libraryList[idx]).find('.vp-add-library').val();
112-
var pacAlias = $(libraryList[idx]).find('.vp-add-alias').val().trim();
227+
var pacType = $(libraryList[idx]).data('type');
228+
var pacI0 = $(libraryList[idx]).find('.vp-add-i0').val();
229+
var pacI1 = $(libraryList[idx]).find('.vp-add-i1').val().trim();
230+
var pacChecked = $(libraryList[idx]).find('.vp-item-check').prop('checked');
113231

114-
if (pacName == "") {
232+
if (pacI0 == "") {
115233
continue;
116234
}
117-
if (sbCode.toString().trim().length > 0) {
118-
sbCode.appendLine();
235+
if (pacChecked) {
236+
if (sbCode.toString().trim().length > 0) {
237+
sbCode.appendLine();
238+
}
239+
if (pacType == 'function') {
240+
// function
241+
sbCode.appendFormat("from {0} import {1}", pacI0, pacI1);
242+
} else {
243+
// module
244+
sbCode.appendFormat("import {0}{1}", pacI0, ((pacI1 === undefined || pacI1 === "") ? "" : (" as " + pacI1)));
245+
}
119246
}
120-
sbCode.appendFormat("import {0}{1}", pacName, ((pacAlias === undefined || pacAlias === "") ? "" : (" as " + pacAlias)));
121247

122-
this.packageList.forEach(pack => {
123-
if (pack.library == pacName) {
248+
this.state.importMeta && this.state.importMeta.forEach(pack => {
249+
if (pack.i0 == pacI0) {
124250
// if include code exists?
125251
if (pack.include != undefined) {
126252
pack.include.forEach(code => {
@@ -131,12 +257,12 @@ define([
131257
}
132258
})
133259

134-
importMeta.push({ library: pacName, alias: pacAlias });
260+
importMeta.push({ i0: pacI0, i1: pacI1, type: pacType, checked: pacChecked });
135261
}
136262
this.state.importMeta = importMeta;
137263

138264
// save import packages
139-
vpConfig.setData(importMeta, 'vpimport');
265+
vpConfig.setData({ tabType: this.state.tabType, importMeta: importMeta }, 'vpimport');
140266

141267
this.generatedCode = sbCode.toString();
142268
return sbCode.toString();

0 commit comments

Comments
 (0)