Skip to content

Commit 8579782

Browse files
author
minjk-bl
committed
Edit Instance app - renewal for instance using library option page
1 parent 22644e6 commit 8579782

14 files changed

Lines changed: 349 additions & 102 deletions

File tree

‎visualpython/css/component/instanceEditor.css‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,12 @@
7878
content: '(Empty)';
7979
color: var(--vp-gray-color);
8080
}
81-
.vp-ins-parameter {
82-
width: 100% !important;
81+
div.vp-ins-parameter-box input.vp-ins-parameter {
82+
width: calc(100% - 70px);
83+
}
84+
button.vp-ins-opt-button {
85+
width: 65px;
86+
min-width: 65px;
8387
}
8488
.vp-create-var-box {
8589
position: relative;

‎visualpython/css/m_apps/instance.css‎

Lines changed: 41 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,33 @@
1+
.vp-instance-body {
2+
display: grid;
3+
grid-template-columns: calc(50% - 8px) calc(50% - 8px);
4+
grid-template-rows: 1fr;
5+
grid-row-gap: 5px;
6+
grid-column-gap: 15px;
7+
align-items: baseline;
8+
align-content: baseline;
9+
height: 100%;
10+
}
11+
.vp-instance-left-box,
12+
.vp-instance-right-box {
13+
height: 100%;
14+
}
115
.vp-instance-base {
216
display: grid;
317
width: 100%;
418
grid-template-columns: 90px calc(100% - 90px);
5-
grid-template-rows: 1fr;
19+
/* grid-template-rows: 1fr; */
20+
grid-template-rows: min-content;
621
grid-row-gap: 8px;
722
}
823
.vp-instance-base .vp-ds-button {
924
vertical-align: top;
10-
width: 50px;
25+
min-width: 50px;
26+
width: 60px;
27+
}
28+
.vp-instance-target-box {
29+
grid-column-start: 1;
30+
grid-column-end: 3;
1131
}
1232
.vp-instance-toolbar {
1333
/* display: none; */
@@ -47,7 +67,7 @@
4767
/* UDF Editor - CodeMirror */
4868
.vp-instance-box .CodeMirror {
4969
display: inline-block;
50-
width: calc(100% - 55px);
70+
width: calc(100% - 65px);
5171
height: 30px;
5272
border: 0.25px solid var(--vp-grid-line-color);
5373
border-radius: 3px;
@@ -86,4 +106,22 @@
86106
}
87107
.vp-ds-button {
88108
width: 50px;
109+
}
110+
111+
/* Preview box */
112+
.vp-instance-preview-title {
113+
line-height: 30px;
114+
}
115+
.vp-instance-preview-box {
116+
min-height: 352px;
117+
width: 100%;
118+
height: calc(100% - 30px);
119+
}
120+
.vp-instance-preview-content:empty::after {
121+
content: 'No preview data';
122+
color: var(--vp-gray-color);
123+
}
124+
.vp-instance-preview-box img {
125+
width: 100%;
126+
height: 100%;
89127
}

‎visualpython/data/m_library/instanceLibrary.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
define([
2+
], function () {
3+
4+
var INSTANCE_MATCHING_LIBRARY = {
5+
/**
6+
* Type: {
7+
* method: {
8+
* target: 'key_name',
9+
* }, ...
10+
* }
11+
*/
12+
'DataFrame': {
13+
'head': {
14+
'id': 'pdIdt_head',
15+
'target': 'i0'
16+
}
17+
},
18+
'Series': {
19+
20+
}
21+
}
22+
23+
return {
24+
INSTANCE_MATCHING_LIBRARY: INSTANCE_MATCHING_LIBRARY
25+
}
26+
});

‎visualpython/html/m_apps/instance.html‎

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,30 @@
11
<body>
2-
<div class="vp-instance-base cm-s-ipython">
3-
<label for="vp_instanceVariable" class="vp-instance-label variable">Variable</label>
4-
<div class="vp-instance-box variable">
5-
<textarea id="vp_instanceVariable" name="code"></textarea>
6-
</div>
7-
<div class="vp-ins-container variable" id="vp_variableInsEditContainer">
8-
<!-- vpInstanceEditor -->
9-
</div>
2+
<div class="vp-instance-body">
3+
<div class="vp-instance-left-box vp-instance-base cm-s-ipython">
4+
<div class="vp-instance-target-box vp-grid-col-110">
5+
<label for="vp_instanceTarget" class="vp-instance-label variable">Target variable</label>
6+
<input type="text" id="vp_instanceTarget" placeholder="Select variable"/>
7+
</div>
8+
<div class="vp-instance-box variable">
9+
<textarea id="vp_instanceVariable" name="code"></textarea>
10+
</div>
11+
<div class="vp-ins-container variable" id="vp_variableInsEditContainer">
12+
<!-- vpInstanceEditor -->
13+
</div>
1014

11-
<hr style="margin: 0px;"/>
15+
<hr style="margin: 0px;"/>
1216

13-
<label for="vp_instanceAllocate" class="vp-instance-label allocate">Allocate to</label>
14-
<input type="text" id="vp_instanceAllocate" placeholder="Variable name"/>
17+
<label for="vp_instanceAllocate" class="vp-instance-label allocate">Allocate to</label>
18+
<input type="text" id="vp_instanceAllocate" placeholder="Variable name"/>
19+
</div>
20+
<div class="vp-instance-right-box">
21+
<div class="vp-bold">
22+
<span class="vp-instance-preview-title">Instance Preview</span>
23+
</div>
24+
<div class="vp-instance-preview-box vp-grid-border-box">
25+
<div id="instancePreview" class="vp-instance-preview-content rendered_html vp-center"></div>
26+
</div>
27+
</div>
1528
</div>
29+
1630
</body>

‎visualpython/js/com/com_generatorV2.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -389,7 +389,7 @@ define([
389389
// multiple selection true
390390
'multiple': true
391391
});
392-
vp_generateVarSelect(tag, obj.varType, obj.value);
392+
vp_generateVarSelect(tag, obj.var_type, obj.value);
393393
content = tag;
394394
break;
395395
case 'col_select':
@@ -688,11 +688,18 @@ define([
688688
let isChecked = $(pageThis.wrapSelector(parent + ' #'+obj.name)).prop('checked');
689689
value = isChecked?'True':'False';
690690
break;
691+
case 'var_multi':
692+
let multiValue = $(pageThis.wrapSelector(parent + ' #'+obj.name)).val();
693+
if (multiValue && multiValue.length > 0) {
694+
value = multiValue.join(', ');
695+
} else {
696+
value = '';
697+
}
698+
break;
691699
case 'input_multi':
692700
case 'bool_select':
693701
case 'data_select':
694702
case 'var_select':
695-
case 'var_multi':
696703
case 'col_select':
697704
case 'dtype':
698705
value = $(pageThis.wrapSelector(parent + ' #'+obj.name)).val();

‎visualpython/js/com/component/DataSelector.js‎

Lines changed: 56 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,8 @@ define([
5353
pageThis: null, // target's page object
5454
id: '', // target id
5555
value: null, // pre-defined value
56-
finish: null, // callback after selection
57-
select: null, // callback after selection from suggestInput
56+
finish: null, // callback after selection (value, dtype)
57+
select: null, // callback after selection from suggestInput (value, dtype)
5858
allowDataType: null,
5959
// additional options
6060
classes: '',
@@ -175,59 +175,63 @@ define([
175175
_bindAutocomplete(varList) {
176176
let that = this;
177177

178-
$(com_util.formatString(".vp-ds-box-{0} input.vp-ds-target", that.uuid)).autocomplete({
179-
autoFocus: true,
180-
minLength: 0,
181-
source: function (req, res) {
182-
var srcList = varList;
183-
var returlList = new Array();
184-
for (var idx = 0; idx < srcList.length; idx++) {
185-
// srcList as object array
186-
if (srcList[idx].label.toString().toLowerCase().includes(req.term.trim().toLowerCase())) {
187-
returlList.push(srcList[idx]);
178+
try {
179+
$(com_util.formatString(".vp-ds-box-{0} input.vp-ds-target", that.uuid)).autocomplete({
180+
autoFocus: true,
181+
minLength: 0,
182+
source: function (req, res) {
183+
var srcList = varList;
184+
var returlList = new Array();
185+
for (var idx = 0; idx < srcList.length; idx++) {
186+
// srcList as object array
187+
if (srcList[idx].label.toString().toLowerCase().includes(req.term.trim().toLowerCase())) {
188+
returlList.push(srcList[idx]);
189+
}
188190
}
189-
}
190-
res(returlList);
191-
},
192-
select: function (evt, ui) {
193-
let result = true;
194-
// trigger change
195-
$(this).val(ui.item.value);
196-
$(this).data('type', ui.item.dtype);
197-
198-
that.state.filterType = 'All';
199-
that.state.data = ui.item.value;
200-
that.state.dataType = ui.item.dtype;
201-
that.state.returnDataType = ui.item.dtype;
202-
203-
that.prop.pageThis.state[that.prop.id] = ui.item.value;
204-
that.prop.pageThis.state[that.prop.id + '_state'] = that.state;
205-
206-
// select event
207-
if (that.prop.select && typeof that.prop.select == 'function') {
208-
result = that.prop.select(ui.item.value, ui.item.dtype);
209-
}
210-
$(this).trigger('change');
191+
res(returlList);
192+
},
193+
select: function (evt, ui) {
194+
let result = true;
195+
// trigger change
196+
$(this).val(ui.item.value);
197+
$(this).data('type', ui.item.dtype);
198+
199+
that.state.filterType = 'All';
200+
that.state.data = ui.item.value;
201+
that.state.dataType = ui.item.dtype;
202+
that.state.returnDataType = ui.item.dtype;
203+
204+
that.prop.pageThis.state[that.prop.id] = ui.item.value;
205+
that.prop.pageThis.state[that.prop.id + '_state'] = that.state;
206+
207+
// select event
208+
if (that.prop.select && typeof that.prop.select == 'function') {
209+
result = that.prop.select(ui.item.value, ui.item.dtype);
210+
}
211+
$(this).trigger('change');
211212

212-
if (result != undefined) {
213-
return result;
213+
if (result != undefined) {
214+
return result;
215+
}
216+
return true;
217+
},
218+
search: function(evt, ui) {
219+
return true;
214220
}
215-
return true;
216-
},
217-
search: function(evt, ui) {
218-
return true;
219-
}
220-
}).focus(function () {
221-
$(this).select();
222-
$(this).autocomplete('search', $(this).val());
223-
}).click(function () {
224-
$(this).select();
225-
$(this).autocomplete('search', $(this).val());
226-
}).autocomplete('instance')._renderItem = function(ul, item) {
227-
return $('<li>').attr('data-value', item.value)
228-
.append(`<div class="vp-sg-item">${item.label}<label class="vp-gray-text vp-cursor">&nbsp;| ${item.dtype}</label></div>`)
229-
.appendTo(ul);
230-
};
221+
}).focus(function () {
222+
$(this).select();
223+
$(this).autocomplete('search', $(this).val());
224+
}).click(function () {
225+
$(this).select();
226+
$(this).autocomplete('search', $(this).val());
227+
}).autocomplete('instance')._renderItem = function(ul, item) {
228+
return $('<li>').attr('data-value', item.value)
229+
.append(`<div class="vp-sg-item">${item.label}<label class="vp-gray-text vp-cursor">&nbsp;| ${item.dtype}</label></div>`)
230+
.appendTo(ul);
231+
};
232+
} catch (ex) {
233+
vpLog.display(VP_LOG_TYPE.ERROR, ex);
234+
}
231235
}
232236

233237
_bindEventForPopup() {

0 commit comments

Comments
 (0)