Skip to content

Commit 079c50f

Browse files
author
minjk-bl
committed
Fix ML
1 parent 993b830 commit 079c50f

File tree

13 files changed

+285
-25
lines changed

13 files changed

+285
-25
lines changed

‎css/root.css

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -332,6 +332,9 @@ hr.vp-extra-menu-line {
332332
margin-right: 5px;
333333
}
334334
/* Layout */
335+
.vp-inline-block {
336+
display: inline-block !important;
337+
}
335338
/* Grid style */
336339
.vp-grid-box {
337340
display: grid;
@@ -368,6 +371,13 @@ hr.vp-extra-menu-line {
368371
align-items: baseline;
369372
align-content: space-evenly;
370373
}
374+
.vp-grid-col-130 {
375+
display: grid;
376+
grid-template-columns: 130px auto;
377+
grid-row-gap: 5px;
378+
align-items: baseline;
379+
align-content: space-evenly;
380+
}
371381
/* Table style */
372382
.vp-tbl-gap5 {
373383
border-spacing: 5px;
@@ -453,13 +463,11 @@ hr.vp-extra-menu-line {
453463
display: none;
454464
position: absolute;
455465
width: 101px;
456-
height: 105px;
457466
background: #FFFFFF;
458467
border: 0.25px solid #C4C4C4;
459468
box-sizing: border-box;
460-
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
461-
right: -40px;
462-
top: 0px;
469+
box-shadow: 2px 2px 8px rgb(0 0 0 / 10%);
470+
z-index: 10;
463471
}
464472
.vp-vs-item:hover {
465473
background: var(--light-gray-color);

‎data/m_ml/mlLibrary.js

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -236,17 +236,23 @@ define([
236236
'tpot-rgs': {
237237
name: 'TPOTRegressor',
238238
import: 'from tpot import TPOTRegressor',
239-
code: 'TPOTRegressor(...${etc})',
239+
code: 'TPOTRegressor(${generation}${population_size}${cv}${random_state}${etc})',
240240
options: [
241-
241+
{ name: 'generation', component: ['input_number'], default: 100, usePair: true },
242+
{ name: 'population_size', component: ['input_number'], default: 100, usePair: true },
243+
{ name: 'cv', component: ['input_number'], default: 5, usePair: true },
244+
{ name: 'random_state', component: ['input_number'], placeholder: '123', usePair: true }
242245
]
243246
},
244247
'tpot-clf': {
245248
name: 'TPOTClassifier',
246249
import: 'from tpot import TPOTClassifier',
247-
code: 'TPOTClassifier(...${etc})',
250+
code: 'TPOTClassifier(${generation}${population_size}${cv}${random_state}${etc})',
248251
options: [
249-
252+
{ name: 'generation', component: ['input_number'], default: 100, usePair: true },
253+
{ name: 'population_size', component: ['input_number'], default: 100, usePair: true },
254+
{ name: 'cv', component: ['input_number'], default: 5, usePair: true },
255+
{ name: 'random_state', component: ['input_number'], placeholder: '123', usePair: true }
250256
]
251257
},
252258
/** Clustering */

‎html/m_ml/evaluation.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
<select id="modelType" class="vp-select vp-state">
1010
<option value="clf">Classfication</option>
1111
<option value="rgs">Regression</option>
12+
<option value="cls">Clustering</option>
1213
<!-- <option value="cls">Clustering</option>
1314
<option value="pca">PCA</option> -->
1415
</select>
@@ -37,6 +38,10 @@
3738
<input type="checkbox" id="rmse" class="vp-state" checked><label for="rmse">Root Mean Squared Error</label>
3839
<input type="checkbox" id="scatter_plot" class="vp-state"><label for="scatter_plot">Scatter plot</label>
3940
</div>
41+
<div class="vp-grid-box vp-eval-box vp-eval-cls">
42+
<input type="checkbox" id="sizeOfClusters" class="vp-state" checked><label for="sizeOfClusters">Size of clusters</label>
43+
<input type="checkbox" id="silhouetteScore" class="vp-state" checked><label for="silhouetteScore">Silhouette score</label>
44+
</div>
4045
</div>
4146
</div>
4247
</body>

‎html/m_ml/fitting.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
<body>
22
<div class="vp-grid-box">
3-
<div class="vp-grid-border-box vp-grid-col-95">
3+
<div class="vp-grid-border-box vp-grid-col-130">
44
<label for="model" class="vp-orange-text">Model</label>
55
<select id="model" class="vp-select vp-state">
66
<!-- Auto Create -->
77
</select>
88
</div>
9-
<div class="vp-grid-border-box vp-grid-col-95">
9+
<div class="vp-grid-border-box vp-grid-col-130">
1010
<label for="method" class="vp-orange-text">Fit/Transform/Predict</label>
1111
<select id="method" class="vp-select vp-state">
1212
<option value="fit">fit</option>
1313
<option value="fit_transform">fit_transform</option>
1414
<option value="fit_predict">fit_predict</option>
1515
</select>
1616
</div>
17-
<div class="vp-grid-border-box vp-grid-col-95">
17+
<div class="vp-grid-border-box vp-grid-col-130">
1818
<label for="featureData" class="vp-orange-text">Feature data</label>
1919
<input type="text" class="vp-input vp-state" id="featureData" placeholder="Select feature data" value="X_train"/>
2020
<label for="targetData" class="vp-orange-text">Target data</label>

‎js/com/com_Config.js

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -438,6 +438,10 @@ define([
438438
})
439439
}
440440

441+
getMLDataDict() {
442+
return Config.ML_DATA_DICT;
443+
}
444+
441445
getMLDataTypes() {
442446
return Config.ML_DATA_TYPES;
443447
}
@@ -475,8 +479,31 @@ define([
475479
/**
476480
* Data types
477481
*/
478-
Config.ML_DATA_TYPES = ['RandomForestClassifier', 'TPOTClassifier', 'SVC', 'LinearRegression', 'LogisticRegression', 'RandomForestRegression', 'TPOTRegression']
482+
Config.ML_DATA_DICT = {
483+
'Regression': [
484+
'LinearRegression', 'SVR', 'DecisionTreeRegressor', 'RandomForestRegression', 'GradientBoostingRegressor', 'XGBRegressor', 'LGBMRegressor', 'CatBoostRegressor',
485+
],
486+
'Classification': [
487+
'LogisticRegression', 'SVC', 'DecisionTreeClassifier', 'RandomForestClassifier', 'GradientBoostingClassifier', 'XGBClassifier', 'LGBMClassifier', 'CatBoostClassifier',
488+
],
489+
'Auto ML': [
490+
'TPOTRegression', 'TPOTClassifier'
491+
],
492+
'Clustering': [
493+
'KMeans', 'AgglomerativeClustering', 'GaussianMixture', 'DBSCAN',
494+
],
495+
'Dimension Reduction': [
496+
'PCA', 'LinearDiscriminantAnalysis', 'TruncatedSVD', 'NMF'
497+
]
498+
};
479499

500+
Config.ML_DATA_TYPES = [
501+
...Config.ML_DATA_DICT['Regression'],
502+
...Config.ML_DATA_DICT['Classification'],
503+
...Config.ML_DATA_DICT['Auto ML'],
504+
...Config.ML_DATA_DICT['Clustering'],
505+
...Config.ML_DATA_DICT['Dimension Reduction']
506+
];
480507

481508
return Config;
482509
});

‎js/com/component/PopupComponent.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -281,6 +281,9 @@ define([
281281
case 'SELECT':
282282
default:
283283
newValue = $(this).val();
284+
if (!newValue) {
285+
newValue = '';
286+
}
284287
break;
285288
}
286289

@@ -545,6 +548,9 @@ define([
545548
case 'SELECT':
546549
default:
547550
newValue = $(tag).val();
551+
if (!newValue) {
552+
newValue = '';
553+
}
548554
break;
549555
}
550556

‎js/com/component/VarSelector2.js

Lines changed: 47 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@ define([
4141
}
4242

4343
this.reload();
44+
this.bindAutocomplete();
45+
this.bindEvent();
4446
}
4547

4648
render() {
@@ -54,9 +56,21 @@ define([
5456
// check disabled
5557
if (!$(this).parent().find('input').is(':disabled')) {
5658
// toggle filter box
57-
$(that.wrapSelector('.vp-vs-filter-box')).toggle();
59+
$(that.wrapSelector('.vp-vs-filter-box')).toggleClass('vp-inline-block');
5860
}
5961
});
62+
63+
$(this._parentTag).on('change', this.wrapSelector('.vp-vs-filter-select-all'), function() {
64+
// check all
65+
$(that.wrapSelector('.vp-vs-filter-type')).prop('checked', true);
66+
// reload
67+
that.reload();
68+
});
69+
70+
$(this._parentTag).on('change', this.wrapSelector('.vp-vs-filter-type'), function() {
71+
// TODO:
72+
73+
});
6074
}
6175

6276
/**
@@ -145,14 +159,31 @@ define([
145159
dtype: obj.varType
146160
};
147161
});
148-
console.log(varList);
149162

150163
// save variable list as state
151164
that.state.varList = varList;
152165
that._suggestList = varList;
153166

154167
let idx = 0; // use to Add variable
155-
that.bindAutocomplete();
168+
$(com_util.formatString(".{0} input", that.uuid)).autocomplete('option', 'source', function (req, res) {
169+
var srcList = typeof that._suggestList == "function" ? that._suggestList() : that._suggestList;
170+
var returlList = new Array();
171+
if (that._normalFilter) {
172+
for (var idx = 0; idx < srcList.length; idx++) {
173+
// srcList as object array
174+
if (typeof srcList[idx] == "object") {
175+
// { label: string, value: string } format
176+
if (srcList[idx].label.toString().toLowerCase().includes(req.term.trim().toLowerCase())) {
177+
returlList.push(srcList[idx]);
178+
}
179+
} else if (srcList[idx].toString().toLowerCase().includes(req.term.trim().toLowerCase()))
180+
returlList.push(srcList[idx]);
181+
}
182+
} else {
183+
returlList = srcList;
184+
}
185+
res(returlList);
186+
});
156187

157188
} catch (ex) {
158189
// console.log(ex);
@@ -169,6 +200,10 @@ define([
169200

170201
$(com_util.formatString(".{0} .{1}", that.uuid, 'vp-vs-uninit')).removeClass('vp-vs-uninit').addClass('vp-vs-init');
171202

203+
// if ($(com_util.formatString(".{0} input", that.uuid)).data('ui-autocomplete') != undefined) {
204+
// $(com_util.formatString(".{0} input", that.uuid)).autocomplete('destroy');
205+
// $(com_util.formatString(".{0} input", that.uuid)).removeData('autocomplete');
206+
// }
172207
$(com_util.formatString(".{0} input", that.uuid)).autocomplete({
173208
autoFocus: true,
174209
minLength: minLength,
@@ -206,7 +241,6 @@ define([
206241
return true;
207242
}
208243
}).autocomplete('instance')._renderItem = function(ul, item) {
209-
console.log(ul, item);
210244
return $('<li>').append(`<div class="vp-vs-item">${item.label}<label class="vp-gray-text">&nbsp;| ${item.dtype}</label></div>`).appendTo(ul);
211245
};
212246

@@ -219,8 +253,6 @@ define([
219253
$(com_util.formatString(".{0} input", that.uuid)).autocomplete('search', $(com_util.formatString(".{0} input", that.uuid)).val());
220254
});
221255
});
222-
223-
this.bindEvent();
224256
}
225257

226258
/**
@@ -241,7 +273,15 @@ define([
241273
sbTagString.appendFormatLine('<span class="{0}"><img src="{1}"/></span>', 'vp-vs-filter vp-close-on-blur-btn', '/nbextensions/visualpython/img/filter.svg');
242274
// filter box
243275
sbTagString.appendFormatLine('<div class="{0} vp-close-on-blur">', 'vp-vs-filter-box');
244-
276+
sbTagString.appendLine('<div class="vp-grid-box">');
277+
sbTagString.appendFormatLine('<input type="checkbox" id="{0}" class="{1}" checked><label for="{2}">{3}</label>',
278+
this.uuid + '_vsSelectAll', 'vp-vs-filter-select-all', this.uuid + '_vsSelectAll', 'Select All');
279+
this._dataTypes && this._dataTypes.forEach(dt => {
280+
let tmpId = that.uuid + '_' + dt;
281+
sbTagString.appendFormatLine('<input type="checkbox" id="{0}" class="{1}" data-dtype="{2}" checked><label for="{3}">{4}</label>',
282+
tmpId, 'vp-vs-filter-type', dt, tmpId, dt);
283+
});
284+
sbTagString.appendLine('</div>'); // end of vp-grid-box
245285
sbTagString.appendLine('</div>'); // end of vp-vs-filter-box
246286
sbTagString.appendLine('</div>');
247287

‎js/m_ml/dataSplit.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,8 @@ define([
150150
$(tag).val(value);
151151
break;
152152
}
153-
})
153+
});
154+
154155
return page;
155156
}
156157

‎js/m_ml/evaluation.js

Lines changed: 49 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,8 @@ define([
4040
// regression
4141
coefficient: false, intercept: false, r_squared: true,
4242
mae: false, mape: false, rmse: true, scatter_plot: false,
43+
// clustering
44+
sizeOfClusters: true, silhouetteScore: true,
4345
...this.state
4446
}
4547
}
@@ -59,8 +61,8 @@ define([
5961
let modelType = $(this).val();
6062
that.state.modelType = modelType;
6163

62-
$(page).find('.vp-eval-box').hide();
63-
$(page).find('.vp-eval-'+modelType).show();
64+
$(that.wrapSelector('.vp-eval-box')).hide();
65+
$(that.wrapSelector('.vp-eval-'+modelType)).show();
6466
})
6567
}
6668

@@ -83,6 +85,35 @@ define([
8385
varSelector.setValue(this.state.targetData);
8486
$(page).find('#targetData').replaceWith(varSelector.toTagString());
8587

88+
// load state
89+
let that = this;
90+
Object.keys(this.state).forEach(key => {
91+
let tag = $(page).find('#' + key);
92+
let tagName = $(tag).prop('tagName'); // returns with UpperCase
93+
let value = that.state[key];
94+
if (value == undefined) {
95+
return;
96+
}
97+
switch(tagName) {
98+
case 'INPUT':
99+
let inputType = $(tag).prop('type');
100+
if (inputType == 'text' || inputType == 'number') {
101+
$(tag).val(value);
102+
break;
103+
}
104+
if (inputType == 'checkbox') {
105+
$(tag).prop('checked', value);
106+
break;
107+
}
108+
break;
109+
case 'TEXTAREA':
110+
case 'SELECT':
111+
default:
112+
$(tag).val(value);
113+
break;
114+
}
115+
});
116+
86117
return page;
87118
}
88119

@@ -93,7 +124,9 @@ define([
93124
// classification
94125
confusion_matrix, report, accuracy, precision, recall, f1_score,
95126
// regression
96-
coefficient, intercept, r_squared, mae, mape, rmse, scatter_plot
127+
coefficient, intercept, r_squared, mae, mape, rmse, scatter_plot,
128+
// clustering
129+
sizeOfClusters, silhouetteScore
97130
} = this.state;
98131

99132
//====================================================================
@@ -165,6 +198,19 @@ define([
165198
code.appendLine('plt.show()');
166199
}
167200
}
201+
//====================================================================
202+
// Clustering
203+
//====================================================================
204+
if (modelType == 'cls') {
205+
if (sizeOfClusters) {
206+
code.appendLine("# Size of clusters");
207+
code.appendFormatLine("print(f'Size of clusters: {np.bincount({0})}')", predictData);
208+
}
209+
if (silhouetteScore) {
210+
code.appendLine("# Silhouette score");
211+
code.appendFormatLine("print(f'Silhouette score: {silhouette_score({0}, {1})}')", targetData, predictData);
212+
}
213+
}
168214
// FIXME: as seperated cells
169215
return code.toString();
170216
}

0 commit comments

Comments
 (0)