Skip to content

Commit f8999ad

Browse files
committed
➕[Feat] Added help codes
1 parent 71ccbe3 commit f8999ad

12 files changed

Lines changed: 780 additions & 12 deletions

File tree

README.md

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,25 +27,32 @@ Try Visual Python if you would like to: <br>
2727

2828
### 1. Requirements
2929

30-
Visual Python is an extension to Jupyter Notebook, so you must have Jupyter Notebook installed already.<br>
30+
Visual Python is a Jupyter Notebook extension. <br>
31+
We recommend installing Anaconda (virtual environment).
32+
3133
- Python version 3.x
32-
- Jupyter notebook environment
34+
- Jupyter notebook or Anaconda env
3335

3436
### 2. How to Install
3537

36-
**1) Install package from**
38+
**1) Open Anaconda prompt**
39+
40+
* Windows : Click Start > Search or Select 'Anaconda Prompt' <br>
41+
* Mac : Open Launchpad > Select 'Terminal'
42+
43+
**2) Install package from**
3744
```
3845
pip install visualpython
3946
```
4047

41-
**2) Enable the package**
48+
**3) Enable the package**
4249
```
4350
visualpy install
4451
```
4552

46-
**3) Activate Visual Python on Jupyter Notebook**
53+
**4) Activate Visual Python on Jupyter Notebook**
4754

48-
Click orange square button on the right side of the Jupyter Notebook menu bar.
55+
Click orange square button on the right side of the Jupyter Notebook menu.
4956

5057
### 3. Package Control Info
5158
* Usage: visualpy **[option]** <br>

Untitled.ipynb

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"cells": [
3+
{
4+
"cell_type": "code",
5+
"execution_count": null,
6+
"id": "0da90d57",
7+
"metadata": {},
8+
"outputs": [],
9+
"source": []
10+
}
11+
],
12+
"metadata": {
13+
"kernelspec": {
14+
"display_name": "Python 3 (ipykernel)",
15+
"language": "python",
16+
"name": "python3"
17+
},
18+
"vp": {
19+
"vp_config_version": "1.0.0",
20+
"vp_menu_width": 273,
21+
"vp_note_display": false,
22+
"vp_note_width": 0,
23+
"vp_position": {
24+
"width": 278
25+
},
26+
"vp_section_display": true,
27+
"vp_signature": "VisualPython"
28+
}
29+
},
30+
"nbformat": 4,
31+
"nbformat_minor": 5
32+
}

css/component/popupComponent.css

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,8 +129,11 @@
129129
height: 50px;
130130
border-top: 0.25px solid var(--border-gray-color);
131131
}
132+
133+
/* 220919 */
132134
.vp-popup-codeview-box,
133-
.vp-popup-dataview-box {
135+
.vp-popup-dataview-box,
136+
.vp-popup-helpview-box {
134137
display: none;
135138
width: 100%;
136139
height: 100px;
@@ -155,6 +158,13 @@
155158
margin-top: 9px;
156159
margin-left: 10px;
157160
}
161+
162+
/* 220919 */
163+
.vp-popup-button[data-type="help"] {
164+
float: left;
165+
margin-top: 9px;
166+
margin-left: 10px;
167+
}
158168
.vp-popup-button[data-type="cancel"] {
159169
float: right;
160170
background-color: #E4E4E4;
201 Bytes
Binary file not shown.
199 Bytes
Binary file not shown.

html/component/popupComponent.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,11 +80,21 @@
8080
<div class="vp-popup-codeview-box vp-close-on-blur vp-scrollbar">
8181
<textarea name="code"></textarea>
8282
</div>
83+
84+
85+
<!-- Help view box -->
86+
<div class="vp-popup-helpview-box vp-close-on-blur vp-scrollbar"></div>
87+
88+
8389
<!-- Button box -->
8490
<div class="vp-popup-button-box">
8591
<button type="button" class="vp-button vp-popup-button" data-type="code">Code view</button>
8692
<button type="button" class="vp-button vp-popup-button" data-type="data">Data view</button>
8793

94+
<!-- 220919 -->
95+
<button type="button" class="vp-button vp-popup-button vp-popup-help" data-type="help" title="test">Help</button>
96+
97+
8898
<div class="vp-popup-runadd-box">
8999
<button type="button" class="vp-button activated vp-popup-button" data-type="run" title="Save to block & Run cell">Run</button>
90100
<button type="button" class="vp-button activated vp-popup-button" data-type="show-detail"><img src="/nbextensions/visualpython/img/arrow_short_up.svg"/></button>

html/m_ml/OrderInfo.html

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<body>
2+
<div class="vp-grid-box">
3+
<div class="vp-grid-border-box">
4+
<div class="vp-grid-col-95">
5+
<label for="modelType" class="vp-orange-text">Model Type</label>
6+
<select id="modelType" class="vp-select vp-state">
7+
<option value="rgs">Regression</option>
8+
<option value="clf">Classfication</option>
9+
<option value="cls">Clustering</option>
10+
</select>
11+
</div>
12+
<div class="vp-grid-col-95 vp-upper-box rgs clf">
13+
<label for="targetData" class="vp-orange-text">Target Data</label>
14+
<input type="text" class="vp-input vp-state" id="targetData" placeholder="Input target data" value="y_test"/>
15+
</div>
16+
<div class="vp-grid-col-95 vp-upper-box rgs clf">
17+
<label for="predictData" class="vp-orange-text">Predict Data</label>
18+
<input type="text" class="vp-input vp-state" id="predictData" placeholder="Input predict data" value="pred"/>
19+
</div>
20+
<div class="vp-grid-col-95 vp-upper-box cls">
21+
<label for="clusteredIndex" class="vp-orange-text">Clustered Index</label>
22+
<input type="text" class="vp-input vp-state" id="clusteredIndex" placeholder="Input predict data" value="clusters"/>
23+
</div>
24+
</div>
25+
<div class="vp-grid-border-box">
26+
<label for="featureData">Evaluation Metrics</label>
27+
<div class="vp-grid-box vp-eval-box vp-eval-rgs">
28+
<label><input type="checkbox" id="r_squared" class="vp-state" checked><span>R squared</span></label>
29+
<label><input type="checkbox" id="mae" class="vp-state"><span>Mean Absolute Error</span></label>
30+
<label><input type="checkbox" id="mape" class="vp-state"><span>Mean Absolute Percentage Error</span></label>
31+
<label><input type="checkbox" id="rmse" class="vp-state" checked><span>Root Mean Squared Error</span></label>
32+
<label><input type="checkbox" id="scatter_plot" class="vp-state"><span>Scatter plot</span></label>
33+
</div>
34+
<div class="vp-grid-box vp-eval-box vp-eval-clf">
35+
<label><input type="checkbox" id="confusion_matrix" class="vp-state" checked><span>Confusion Matrix</span></label>
36+
<label><input type="checkbox" id="report" class="vp-state" checked><span>Report (Accuracy/Precision/Recall/F1-score)</span></label>
37+
<label class="vp-gray-text vp-italic">* You can select individually</span></label>
38+
<label><input type="checkbox" id="accuracy" class="vp-state"><span>Accuracy</span></label>
39+
<label><input type="checkbox" id="precision" class="vp-state"><span>Precision</span></label>
40+
<label><input type="checkbox" id="recall" class="vp-state"><span>Recall</span></label>
41+
<label><input type="checkbox" id="f1_score" class="vp-state"><span>F1-scorev</label>
42+
<!-- <hr style="margin: 5px;"/> -->
43+
<!-- <label><input type="checkbox" id="roc_curve" class="vp-eval-check vp-state" data-type="roc-auc"><span>ROC Curve</span></label>
44+
<label><input type="checkbox" id="auc" class="vp-eval-check vp-state" data-type="roc-auc"><span>AUC</span></label> -->
45+
<!-- <div class="vp-grid-col-95">
46+
<label for="model" class="vp-orange-text">Model</label>
47+
<select id="model" class="vp-select vp-state vp-ev-model roc-auc">
48+
</select>
49+
</div> -->
50+
</div>
51+
<div class="vp-grid-box vp-eval-box vp-eval-cls">
52+
<label><input type="checkbox" id="silhouetteScore" class="vp-eval-check vp-state" data-type="silhouette" checked><span>Silhouette score</span></label>
53+
<div class="vp-grid-col-95">
54+
<label for="featureData2" class="vp-orange-text">Feature Data</label>
55+
<input type="text" class="vp-input vp-state vp-ev-model silhouette" id="featureData2" placeholder="Input feature data" value="X"/>
56+
</div>
57+
<hr style="margin: 5px;"/>
58+
<label><input type="checkbox" id="ari" class="vp-eval-check vp-state" data-type="ari-nmi"><span>ARI (Adjusted Random Score)</span></label>
59+
<label><input type="checkbox" id="nmi" class="vp-eval-check vp-state" data-type="ari-nmi"><span>NMI (Normalized Mutual Information)</span></label>
60+
<div class="vp-grid-col-95">
61+
<label for="targetData2" class="vp-orange-text">Target Data</label>
62+
<input type="text" class="vp-input vp-state vp-ev-model ari-nmi" id="targetData2" placeholder="Input target data" value="y"/>
63+
</div>
64+
</div>
65+
</div>
66+
</div>
67+
</body>

js/board/HelpView.js

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/*
2+
* Project Name : Visual Python
3+
* Description : GUI-based Python code generator
4+
* File Name : HelpView.js
5+
* Author : Black Logic
6+
* Note : Render Help view
7+
* License : GNU GPLv3 with Visual Python special exception
8+
* Date : 2021. 09. 13
9+
* Change Date :
10+
*/
11+
12+
//============================================================================
13+
// [CLASS] HelpView
14+
//============================================================================
15+
define([
16+
'../com/component/PopupComponent'
17+
], function(PopupComponent) {
18+
'use strict';
19+
20+
/**
21+
* @class HelpView
22+
* @constructor
23+
*/
24+
class HelpView extends PopupComponent {
25+
_init() {
26+
super._init();
27+
28+
this.config.footer = false;
29+
this.config.sizeLevel = 1;
30+
31+
this.state = {
32+
helpview: '',
33+
...this.state
34+
}
35+
36+
this._addCodemirror('helpview', this.wrapSelector('#helpview'), "readonly");
37+
}
38+
39+
templateForBody() {
40+
return `<textarea id="helpview">${this.state.helpview}</textarea>`;
41+
}
42+
}
43+
44+
return HelpView;
45+
46+
});

js/com/component/PopupComponent.js

Lines changed: 89 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
* Date : 2021. 11. 18
99
* Change Date :
1010
*/
11-
11+
1212
//============================================================================
1313
// [CLASS] PopupComponent
1414
//============================================================================
@@ -22,6 +22,8 @@ define([
2222
'./Component',
2323
'./DataSelector',
2424

25+
26+
2527
/** codemirror */
2628
'codemirror/lib/codemirror',
2729
'codemirror/mode/python/python',
@@ -146,7 +148,26 @@ define([
146148
}
147149
}
148150

149-
// code view
151+
// // code view
152+
// if (this.config.codeview) {
153+
// if (!this.cmCodeview) {
154+
// // codemirror setting
155+
// let selector = this.wrapSelector('.vp-popup-codeview-box textarea');
156+
// let textarea = $(selector);
157+
// if (textarea && textarea.length > 0) {
158+
// this.cmCodeview = codemirror.fromTextArea(textarea[0], this.cmReadonlyConfig);
159+
// } else {
160+
// vpLog.display(VP_LOG_TYPE.ERROR, 'No text area to create codemirror. (selector: '+selector+')');
161+
// }
162+
// } else {
163+
// this.cmCodeview.refresh();
164+
// }
165+
166+
167+
168+
// 220919
169+
// 220912
170+
// code view + helpview
150171
if (this.config.codeview) {
151172
if (!this.cmCodeview) {
152173
// codemirror setting
@@ -160,7 +181,23 @@ define([
160181
} else {
161182
this.cmCodeview.refresh();
162183
}
163-
}
184+
} else {
185+
if (!this.cmCodeview) {
186+
// codemirror setting
187+
let selector = this.wrapSelector('.vp-popup-helpview-box textarea');
188+
let textarea = $(selector);
189+
if (textarea && textarea.length > 0) {
190+
this.cmCodeview = codemirror.fromTextArea(textarea[0], this.cmReadonlyConfig);
191+
} else {
192+
vpLog.display(VP_LOG_TYPE.ERROR, 'No text area to create codemirror. (selector: '+selector+')');
193+
}
194+
} else {
195+
this.cmCodeview.refresh();
196+
}
197+
198+
199+
200+
}
164201
}
165202

166203
/**
@@ -346,6 +383,26 @@ define([
346383
$(this.wrapSelector('.vp-popup-button')).on('click', function(evt) {
347384
var btnType = $(this).data('type');
348385
switch(btnType) {
386+
387+
// 220919
388+
case 'help' :
389+
390+
// $(".vp-popup-help").attr("title", "바뀐 후");
391+
392+
// if ($(that.wrapSelector('.vp-popup-run-detailbox')).is(':hidden')) {
393+
// $(".vp-popup-help").attr("title", "바뀐 후");
394+
395+
// } else {
396+
// $(".vp-popup-help").attr("title", "바뀐 후");
397+
// }
398+
if ($(that.wrapSelector('.vp-popup-helpview-box')).is(':hidden')) {
399+
that.openView('help');
400+
} else {
401+
that.closeView('help');
402+
}
403+
evt.stopPropagation();
404+
break;
405+
349406
case 'code':
350407
if ($(that.wrapSelector('.vp-popup-codeview-box')).is(':hidden')) {
351408
that.openView('code');
@@ -498,7 +555,7 @@ define([
498555

499556
let {
500557
installButton, importButton, packageButton,
501-
codeview, dataview, runButton, footer,
558+
codeview, dataview, helpview, runButton, footer,
502559
sizeLevel, position
503560
} = this.config;
504561

@@ -530,6 +587,11 @@ define([
530587
if (!dataview) {
531588
$(this.wrapSelector('.vp-popup-button[data-type="data"]')).hide();
532589
}
590+
// 220919
591+
if (!helpview) {
592+
$(this.wrapSelector('.vp-popup-button[data-type="help"]')).hide();
593+
}
594+
533595

534596
// run button
535597
if (!runButton) {
@@ -627,6 +689,11 @@ define([
627689
/** Implementation needed */
628690
return '';
629691
}
692+
693+
generateHelp() {
694+
/** Implementation needed */
695+
return '';
696+
}
630697

631698
load() {
632699

@@ -900,7 +967,24 @@ define([
900967
that.cmCodeview.refresh();
901968
}, 1);
902969
$(this.wrapSelector('.vp-popup-dataview-box')).hide();
903-
} else {
970+
} else if (viewType == 'help') { // 220919
971+
this.saveState();
972+
var code = this.generateHelp();
973+
let codeText = '';
974+
if (Array.isArray(code)) {
975+
codeText = code.join('\n');
976+
} else {
977+
codeText = code;
978+
}
979+
this.cmCodeview.setValue(codeText);
980+
this.cmCodeview.save();
981+
982+
var that = this;
983+
setTimeout(function() {
984+
that.cmCodeview.refresh();
985+
}, 1);
986+
$(this.wrapSelector('.vp-popup-helpview-box')).hide();
987+
} else {
904988
this.renderDataView();
905989
$(this.wrapSelector('.vp-popup-codeview-box')).hide();
906990
}

0 commit comments

Comments
 (0)