Skip to content

Commit 3c5b2a2

Browse files
author
minjk-bl
committed
Fix Model editor #1 
1 parent 830484e commit 3c5b2a2

7 files changed

Lines changed: 57 additions & 40 deletions

File tree

‎css/component/instanceEditor.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,10 @@
7474
.vp-ins-parameter-box {
7575
grid-column: 1/3;
7676
}
77+
.vp-ins-parameter-box:empty::after {
78+
content: '(Empty)';
79+
color: var(--gray-color);
80+
}
7781
.vp-ins-parameter {
7882
width: 100% !important;
7983
}

‎js/com/component/ModelEditor.js‎

Lines changed: 48 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,6 @@ define([
2020
const VP_INS_PARAMETER_BOX = 'vp-ins-parameter-box';
2121
const VP_INS_PARAMETER = 'vp-ins-parameter';
2222

23-
const VP_CREATE_VAR_BOX = 'vp-create-var-box';
24-
const VP_CREATE_VAR = 'vp-create-var';
25-
const VP_CREATE_VAR_BTN = 'vp-create-var-btn';
26-
2723
class ModelEditor extends Component {
2824
constructor(pageThis, targetId, containerId='vp_wrapper') {
2925
super(null, { pageThis: pageThis, targetId: targetId, containerId: containerId });
@@ -69,29 +65,29 @@ define([
6965
name: 'fit',
7066
code: '${model}.fit(${featureData}, ${targetData})',
7167
options: [
72-
{ name: 'featureData', component: ['var_select'], var_type: ['DataFrame'], default: 'X_train' },
73-
{ name: 'targetData', component: ['var_select'], var_type: ['DataFrame'], default: 'y_train' }
68+
{ name: 'featureData', label: 'Feature Data', component: ['var_select'], var_type: ['DataFrame', 'Series'], default: 'X_train' },
69+
{ name: 'targetData', label: 'Target Data', component: ['var_select'], var_type: ['DataFrame', 'Series'], default: 'y_train' }
7470
]
7571
},
7672
'predict': {
7773
name: 'predict',
7874
code: '${model}.predict(${featureData})',
7975
options: [
80-
{ name: 'featureData', component: ['var_select'], var_type: ['DataFrame'], default: 'X_train' }
76+
{ name: 'featureData', label: 'Feature Data', component: ['var_select'], var_type: ['DataFrame', 'Series'], default: 'X_train' }
8177
]
8278
},
8379
'predict_proba': {
8480
name: 'predict_proba',
8581
code: '${model}.predict_proba(${featureData})',
8682
options: [
87-
{ name: 'featureData', component: ['var_select'], var_type: ['DataFrame'], default: 'X_train' }
83+
{ name: 'featureData', label: 'Feature Data', component: ['var_select'], var_type: ['DataFrame', 'Series'], default: 'X_train' }
8884
]
8985
},
9086
'transform': {
9187
name: 'transform',
9288
code: '${model}.transform(${featureData})',
9389
options: [
94-
{ name: 'featureData', component: ['var_select'], var_type: ['DataFrame'], default: 'X_train' }
90+
{ name: 'featureData', label: 'Feature Data', component: ['var_select'], var_type: ['DataFrame', 'Series'], default: 'X_train' }
9591
]
9692
}
9793
};
@@ -138,19 +134,37 @@ define([
138134
let defaultInfos = {
139135
'score': {
140136
name: 'score',
141-
code: '${model}.score()',
137+
code: '${model}.score(${featureData}, {targetData})',
142138
options: [
143-
139+
{ name: 'featureData', label: 'Feature Data', component: ['var_select'], var_type: ['DataFrame', 'Series'], default: 'X' },
140+
{ name: 'targetData', label: 'Target Data', component: ['var_select'], var_type: ['DataFrame', 'Series'], default: 'y' }
141+
]
142+
},
143+
'cross_val_score': {
144+
name: 'cross_val_score',
145+
import: 'from sklearn.model_selection import cross_val_score',
146+
code: '${allocateScore} = cross_val_score(${model}, ${featureData}, ${targetData}${scoring}${cv})',
147+
options: [
148+
{ name: 'featureData', label: 'Feature Data', component: ['var_select'], var_type: ['DataFrame', 'Series'], default: 'X' },
149+
{ name: 'targetData', label: 'Target Data', component: ['var_select'], var_type: ['DataFrame', 'Series'], default: 'y' },
150+
{ name: 'scoring', component: ['input'], usePair: true },
151+
{ name: 'cv', component: ['input'], usePair: true },
152+
{ name: 'allocateScore', label: 'Allocate to', component: ['input'], placeholder: 'New variable' }
144153
]
145154
}
146155
}
147156
switch (category) {
148157
case 'Regression':
149158
infos = {
150-
'score': defaultInfos['score']
159+
'score': defaultInfos['score'],
160+
'cross_val_score': defaultInfos['cross_val_score']
151161
}
152162
break;
153163
case 'Classification':
164+
infos = {
165+
'score': defaultInfos['score'],
166+
'cross_val_score': defaultInfos['cross_val_score']
167+
}
154168
break;
155169
case 'Auto ML':
156170
break;
@@ -197,11 +211,7 @@ define([
197211
tag.appendLine('</div>'); // VP_INS_SELECT_CONTAINER
198212

199213
tag.appendFormatLine('<div class="vp-multilang {0}">Options</div>', VP_INS_SELECT_TITLE);
200-
tag.appendFormatLine('<div class="{0} vp-grid-col-95">', VP_INS_PARAMETER_BOX);
201-
// TODO: option box
202-
203-
tag.appendLine('</div>'); // VP_INS_PARAMETER
204-
214+
tag.appendFormatLine('<div class="{0} vp-grid-col-95"></div>', VP_INS_PARAMETER_BOX);
205215
tag.appendLine('</div>'); // VP_INS_BOX END
206216

207217
$(this.pageThis.wrapSelector('#' + this.containerId)).html(tag.toString());
@@ -294,15 +304,23 @@ define([
294304
let optBox = new com_String();
295305
// render tag
296306
config.options.forEach(opt => {
307+
let label = opt.name;
308+
if (opt.label != undefined) {
309+
label = opt.label;
310+
}
297311
optBox.appendFormatLine('<label for="{0}" title="{1}">{2}</label>'
298-
, opt.name, opt.name, opt.name);
312+
, opt.name, opt.name, label);
299313
let content = com_generator.renderContent(that, opt.component[0], opt, that.pageThis.state);
300314
optBox.appendLine(content[0].outerHTML);
301315
});
302316
// replace option box
303317
$(that.wrapSelector('.' + VP_INS_PARAMETER_BOX)).html(optBox.toString());
304318

305319
that.state.config = config;
320+
321+
// add selection
322+
$(that.wrapSelector('.' + VP_INS_SELECT_ITEM)).removeClass('selected');
323+
$(this).addClass('selected');
306324
});
307325
}
308326

@@ -315,8 +333,18 @@ define([
315333
$(this.wrapSelector()).hide();
316334
}
317335

318-
getCode() {
319-
return com_generator.vp_codeGenerator(this.pageThis, this.state.config, this.pageThis.state);
336+
getCode(replaceDict={}) {
337+
let code = new com_String();
338+
if (this.state.config.import != undefined) {
339+
code.appendLine(this.state.config.import);
340+
code.appendLine();
341+
}
342+
let modelCode = com_generator.vp_codeGenerator(this.pageThis, this.state.config, this.pageThis.state);
343+
Object.keys(replaceDict).forEach(key => {
344+
modelCode = modelCode.replace(key, replaceDict[key]);
345+
});
346+
code.append(modelCode);
347+
return code.toString();
320348
}
321349
}
322350

‎js/m_ml/AutoML.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -260,10 +260,7 @@ define([
260260
* ---
261261
* ...
262262
*/
263-
let modelCode = this.modelEditor.getCode();
264-
modelCode = modelCode.replace('${model}', model);
265-
code.append(modelCode);
266-
263+
code.append(this.modelEditor.getCode({'${model}': model}));
267264
}
268265

269266
return code.toString();

‎js/m_ml/Classification.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -259,10 +259,7 @@ define([
259259
* ---
260260
* ...
261261
*/
262-
let modelCode = this.modelEditor.getCode();
263-
modelCode = modelCode.replace('${model}', model);
264-
code.append(modelCode);
265-
262+
code.append(this.modelEditor.getCode({'${model}': model}));
266263
}
267264

268265
return code.toString();

‎js/m_ml/Clustering.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -263,10 +263,7 @@ define([
263263
* ---
264264
* ...
265265
*/
266-
let modelCode = this.modelEditor.getCode();
267-
modelCode = modelCode.replace('${model}', model);
268-
code.append(modelCode);
269-
266+
code.append(this.modelEditor.getCode({'${model}': model}));
270267
}
271268

272269
return code.toString();

‎js/m_ml/DimensionReduction.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -259,10 +259,7 @@ define([
259259
* ---
260260
* ...
261261
*/
262-
let modelCode = this.modelEditor.getCode();
263-
modelCode = modelCode.replace('${model}', model);
264-
code.append(modelCode);
265-
262+
code.append(this.modelEditor.getCode({'${model}': model}));
266263
}
267264

268265
return code.toString();

‎js/m_ml/Regression.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -259,10 +259,7 @@ define([
259259
* ---
260260
* ...
261261
*/
262-
let modelCode = this.modelEditor.getCode();
263-
modelCode = modelCode.replace('${model}', model);
264-
code.append(modelCode);
265-
262+
code.append(this.modelEditor.getCode({'${model}': model}));
266263
}
267264

268265
return code.toString();

0 commit comments

Comments
 (0)