Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit2caaf0e

Browse files
author
minjk-bl
committed
Fix ModelSelection page using ModelEditor
1 parent769ed3f commit2caaf0e

File tree

12 files changed

+418
-62
lines changed

12 files changed

+418
-62
lines changed

‎css/component/instanceEditor.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
.vp-ins-select-container .vp-ins-search-icon {
1818
position: absolute;
1919
color:#C4C4C4;
20-
right:5px;
21-
top:5px;
20+
right:7px;
21+
top:7px;
2222
}
2323
.vp-ins-select-box {
2424
margin-top:5px;

‎html/m_ml/evaluation.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,9 @@
77
<divclass="vp-grid-border-box vp-grid-col-95">
88
<labelfor="modelType"class="vp-orange-text">Model Type</label>
99
<selectid="modelType"class="vp-select vp-state">
10-
<optionvalue="clf">Classfication</option>
1110
<optionvalue="rgs">Regression</option>
11+
<optionvalue="clf">Classfication</option>
1212
<optionvalue="cls">Clustering</option>
13-
<!-- <option value="cls">Clustering</option>
14-
<option value="pca">PCA</option> -->
1513
</select>
1614
<labelfor="predictData"class="vp-orange-text">Predict Data</label>
1715
<inputtype="text"class="vp-input vp-state"id="predictData"placeholder="Input predict data"value="pred"/>

‎html/m_ml/model.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@
2020
</div>
2121
</div>
2222
<divclass="vp-grid-border-box vp-grid-col-110">
23-
<labelfor="allocateTo"class="vp-orange-text">Allocate to</label>
24-
<inputtype="text"class="vp-input vp-state"id="allocateTo"placeholder="New variable name"value="model"/>
23+
<labelfor="allocateToCreation"class="vp-orange-text">Allocate to</label>
24+
<inputtype="text"class="vp-input vp-state"id="allocateToCreation"placeholder="New variable name"value="model"/>
2525
</div>
2626
</div>
2727
<divclass="vp-grid-box vp-model-box"data-type="selection">

‎js/com/com_generatorV2.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,9 @@
1111
define([
1212
'vp_base/js/com/com_util',
1313
'vp_base/js/com/com_makeDom',
14-
'vp_base/js/com/component/SuggestInput'
15-
],function(com_util,com_makeDom,SuggestInput){
14+
'vp_base/js/com/component/SuggestInput',
15+
'vp_base/js/com/component/VarSelector2'
16+
],function(com_util,com_makeDom,SuggestInput,VarSelector2){
1617
/**
1718
* show result after code executed
1819
*/

‎js/com/component/InstanceEditor.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
const{ param}=require("jquery");
2-
31
define([
42
'css!vp_base/css/component/instanceEditor.css',
53
'vp_base/js/com/com_String',

‎js/com/component/ModelEditor.js‎

Lines changed: 324 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,324 @@
1+
define([
2+
'css!vp_base/css/component/instanceEditor.css',
3+
'vp_base/js/com/com_String',
4+
'vp_base/js/com/com_util',
5+
'vp_base/js/com/com_generatorV2',
6+
'vp_base/js/com/component/Component',
7+
'vp_base/js/com/component/SuggestInput'
8+
],function(insCss,com_String,com_util,com_generator,Component,SuggestInput){
9+
10+
// temporary const
11+
constVP_INS_BOX='vp-ins-box';
12+
constVP_INS_SELECT_CONTAINER='vp-ins-select-container';
13+
constVP_INS_SELECT_TITLE='vp-ins-select-title';
14+
constVP_INS_SEARCH='vp-ins-search';
15+
constVP_INS_TYPE='vp-ins-type';
16+
constVP_INS_SELECT_BOX='vp-ins-select-box';
17+
constVP_INS_SELECT_LIST='vp-ins-select-list';
18+
constVP_INS_SELECT_ITEM='vp-ins-select-item';
19+
20+
constVP_INS_PARAMETER_BOX='vp-ins-parameter-box';
21+
constVP_INS_PARAMETER='vp-ins-parameter';
22+
23+
constVP_CREATE_VAR_BOX='vp-create-var-box';
24+
constVP_CREATE_VAR='vp-create-var';
25+
constVP_CREATE_VAR_BTN='vp-create-var-btn';
26+
27+
classModelEditorextendsComponent{
28+
constructor(pageThis,targetId,containerId='vp_wrapper'){
29+
super(null,{pageThis:pageThis,targetId:targetId,containerId:containerId});
30+
}
31+
32+
_init(){
33+
super._init();
34+
35+
this.pageThis=this.state.pageThis;
36+
this.targetId=this.state.targetId;
37+
this.containerId=this.state.containerId;
38+
39+
this.state={
40+
action:{},
41+
info:{},
42+
config:{},
43+
...this.state
44+
}
45+
}
46+
47+
render(){
48+
;
49+
}
50+
51+
getModelCategory(modelType){
52+
letmlDict=vpConfig.getMLDataDict();
53+
letkeys=Object.keys(mlDict);
54+
letmodelCategory='';
55+
for(leti=0;i<keys.length;i++){
56+
letkey=keys[i];
57+
if(mlDict[key].includes(modelType)){
58+
modelCategory=key;
59+
break;
60+
}
61+
}
62+
returnmodelCategory;
63+
}
64+
65+
getAction(modelType){
66+
letcategory=this.getModelCategory(modelType);
67+
letdefaultActions={
68+
'fit':{
69+
name:'fit',
70+
code:'${model}.fit(${featureData}, ${targetData})',
71+
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'}
74+
]
75+
},
76+
'predict':{
77+
name:'predict',
78+
code:'${model}.predict(${featureData})',
79+
options:[
80+
{name:'featureData',component:['var_select'],var_type:['DataFrame'],default:'X_train'}
81+
]
82+
},
83+
'predict_proba':{
84+
name:'predict_proba',
85+
code:'${model}.predict_proba(${featureData})',
86+
options:[
87+
{name:'featureData',component:['var_select'],var_type:['DataFrame'],default:'X_train'}
88+
]
89+
},
90+
'transform':{
91+
name:'transform',
92+
code:'${model}.transform(${featureData})',
93+
options:[
94+
{name:'featureData',component:['var_select'],var_type:['DataFrame'],default:'X_train'}
95+
]
96+
}
97+
};
98+
letactions={};
99+
switch(category){
100+
case'Regression':
101+
actions={
102+
'fit':defaultActions['fit'],
103+
'predict':defaultActions['predict'],
104+
}
105+
break;
106+
case'Classification':
107+
actions={
108+
'fit':defaultActions['fit'],
109+
'predict':defaultActions['predict'],
110+
'predict_proba':defaultActions['predict_proba'],
111+
}
112+
break;
113+
case'Auto ML':
114+
actions={
115+
'fit':defaultActions['fit'],
116+
'predict':defaultActions['predict'],
117+
}
118+
break;
119+
case'Clustering':
120+
actions={
121+
'fit':defaultActions['fit'],
122+
'predict':defaultActions['predict'],
123+
}
124+
break;
125+
case'Dimension Reduction':
126+
actions={
127+
'fit':defaultActions['fit'],
128+
'transform':defaultActions['transform'],
129+
}
130+
break;
131+
}
132+
returnactions;
133+
}
134+
135+
getInfo(modelType){
136+
letcategory=this.getModelCategory(modelType);
137+
letinfos={};
138+
letdefaultInfos={
139+
'score':{
140+
name:'score',
141+
code:'${model}.score()',
142+
options:[
143+
144+
]
145+
}
146+
}
147+
switch(category){
148+
case'Regression':
149+
infos={
150+
'score':defaultInfos['score']
151+
}
152+
break;
153+
case'Classification':
154+
break;
155+
case'Auto ML':
156+
break;
157+
case'Clustering':
158+
break;
159+
case'Dimension Reduction':
160+
break;
161+
}
162+
returninfos;
163+
}
164+
165+
renderPage(){
166+
vartag=newcom_String();
167+
tag.appendFormatLine('<div class="{0} {1}">',VP_INS_BOX,this.uuid);// vp-select-base
168+
169+
tag.appendFormatLine('<div class="{0} {1}">',VP_INS_SELECT_CONTAINER,'action');
170+
tag.appendFormatLine('<div class="vp-multilang {0}">Action</div>',VP_INS_SELECT_TITLE);
171+
172+
tag.appendFormatLine('<div style="{0}">','position: relative;');
173+
tag.appendFormatLine('<input class="vp-input {0} {1}" type="text" placeholder="Search Action"/>',VP_INS_SEARCH,'attr');
174+
tag.appendFormatLine('<input class="{0} {1}" type="hidden"/>',VP_INS_TYPE,'action');
175+
tag.appendFormatLine('<i class="{0} {1}"></i>','fa fa-search','vp-ins-search-icon');
176+
tag.appendLine('</div>');
177+
178+
tag.appendFormatLine('<div class="{0} {1}">',VP_INS_SELECT_BOX,'action');
179+
tag.appendFormatLine('<ul class="{0} {1}" style="height:80px">',VP_INS_SELECT_LIST,'action');
180+
tag.appendLine('</ul>');
181+
tag.appendLine('</div>');// VP_INS_SELECT_BOX
182+
tag.appendLine('</div>');// VP_INS_SELECT_CONTAINER
183+
184+
tag.appendFormatLine('<div class="{0} {1}">',VP_INS_SELECT_CONTAINER,'info');
185+
tag.appendFormatLine('<div class="vp-multilang {0}">Info</div>',VP_INS_SELECT_TITLE);
186+
187+
tag.appendFormatLine('<div style="{0}">','position: relative;');
188+
tag.appendFormatLine('<input class="vp-input {0} {1}" type="text" placeholder="Search Info"/>',VP_INS_SEARCH,'method');
189+
tag.appendFormatLine('<input class="{0} {1}" type="hidden"/>',VP_INS_TYPE,'info');
190+
tag.appendFormatLine('<i class="{0} {1}"></i>','fa fa-search','vp-ins-search-icon');
191+
tag.appendLine('</div>');
192+
193+
tag.appendFormatLine('<div class="{0} {1}">',VP_INS_SELECT_BOX,'info');
194+
tag.appendFormatLine('<ul class="{0} {1}" style="height:80px">',VP_INS_SELECT_LIST,'info');
195+
tag.appendLine('</ul>');
196+
tag.appendLine('</div>');// VP_INS_SELECT_BOX
197+
tag.appendLine('</div>');// VP_INS_SELECT_CONTAINER
198+
199+
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+
205+
tag.appendLine('</div>');// VP_INS_BOX END
206+
207+
$(this.pageThis.wrapSelector('#'+this.containerId)).html(tag.toString());
208+
209+
returntag.toString();
210+
}
211+
212+
reload(){
213+
this.renderPage();
214+
215+
lettargetTag=$(this.pageThis.wrapSelector('#'+this.targetId));
216+
letmodel=$(targetTag).val();
217+
letmodelType=$(targetTag).find('option:selected').data('type');
218+
219+
letactions=this.getAction(modelType);
220+
letinfos=this.getInfo(modelType);
221+
this.state.action={ ...actions};
222+
this.state.info={ ...infos};
223+
224+
varactListTag=newcom_String();
225+
varinfoListTag=newcom_String();
226+
227+
Object.keys(actions).forEach(actKey=>{
228+
actListTag.appendFormatLine('<li class="{0}" data-var-name="{1}" data-var-type="{2}" title="{3}">{4}</li>',
229+
VP_INS_SELECT_ITEM,actKey,'action',actKey,actKey);
230+
});
231+
Object.keys(infos).forEach(infoKey=>{
232+
infoListTag.appendFormatLine('<li class="{0}" data-var-name="{1}" data-var-type="{2}" title="{3}">{4}</li>',
233+
VP_INS_SELECT_ITEM,infoKey,'info',infoKey,infoKey);
234+
});
235+
236+
$(this.wrapSelector('.'+VP_INS_SELECT_LIST+'.action')).html(actListTag.toString());
237+
$(this.wrapSelector('.'+VP_INS_SELECT_LIST+'.info')).html(infoListTag.toString());
238+
239+
letthat=this;
240+
// action search suggest
241+
varsuggestInput=newSuggestInput();
242+
suggestInput.addClass('vp-input action');
243+
suggestInput.addClass(VP_INS_SEARCH);
244+
suggestInput.setPlaceholder("Search Action");
245+
suggestInput.setSuggestList(function(){returnObject.keys(actions);});
246+
suggestInput.setSelectEvent(function(value,item){
247+
$(this.wrapSelector()).val(value);
248+
$(that.wrapSelector('.'+VP_INS_TYPE+'.action')).val(item.type);
249+
250+
$(that.pageThis.wrapSelector('#'+that.targetId)).trigger({
251+
type:"model_editor_selected",
252+
varName:value,
253+
varOptions:actions[value],
254+
isMethod:false
255+
});
256+
});
257+
$(that.wrapSelector('.'+VP_INS_SEARCH+'.action')).replaceWith(function(){
258+
returnsuggestInput.toTagString();
259+
});
260+
261+
// info search suggest
262+
suggestInput=newSuggestInput();
263+
suggestInput.addClass('vp-input info');
264+
suggestInput.addClass(VP_INS_SEARCH);
265+
suggestInput.setPlaceholder("Search info");
266+
suggestInput.setSuggestList(function(){returnObject.keys(infos);});
267+
suggestInput.setSelectEvent(function(value,item){
268+
$(this.wrapSelector()).val(value);
269+
$(that.wrapSelector('.'+VP_INS_TYPE+'.info')).val(item.type);
270+
271+
$(that.pageThis.wrapSelector('#'+that.targetId)).trigger({
272+
type:"model_editor_selected",
273+
varName:value,
274+
varOptions:infos[value],
275+
isMethod:true
276+
});
277+
});
278+
$(that.wrapSelector('.'+VP_INS_SEARCH+'.info')).replaceWith(function(){
279+
returnsuggestInput.toTagString();
280+
});
281+
282+
// bind event
283+
this._bindEvent();
284+
}
285+
286+
_bindEvent(){
287+
super._bindEvent();
288+
letthat=this;
289+
290+
$(this.wrapSelector('.'+VP_INS_SELECT_ITEM)).on('click',function(){
291+
letname=$(this).data('var-name');
292+
lettype=$(this).data('var-type');
293+
letconfig=that.state[type][name];
294+
letoptBox=newcom_String();
295+
// render tag
296+
config.options.forEach(opt=>{
297+
optBox.appendFormatLine('<label for="{0}" title="{1}">{2}</label>'
298+
,opt.name,opt.name,opt.name);
299+
letcontent=com_generator.renderContent(that,opt.component[0],opt,that.pageThis.state);
300+
optBox.appendLine(content[0].outerHTML);
301+
});
302+
// replace option box
303+
$(that.wrapSelector('.'+VP_INS_PARAMETER_BOX)).html(optBox.toString());
304+
305+
that.state.config=config;
306+
});
307+
}
308+
309+
show(){
310+
$(this.wrapSelector()).show();
311+
this.reload();
312+
}
313+
314+
hide(){
315+
$(this.wrapSelector()).hide();
316+
}
317+
318+
getCode(){
319+
returncom_generator.vp_codeGenerator(this.pageThis,this.state.config,this.pageThis.state);
320+
}
321+
}
322+
323+
returnModelEditor;
324+
});

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp