Skip to content

Commit 245dbce

Browse files
author
minjk-bl
committed
Update DataSelector
1 parent bc0cf43 commit 245dbce

File tree

9 files changed

+317
-36
lines changed

9 files changed

+317
-36
lines changed

‎css/component/dataSelector.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,4 +78,8 @@
7878
}
7979
.vp-ds-option-inner-box {
8080
height: calc(100% - 30px);
81+
}
82+
.vp-nd-row-box,
83+
.vp-nd-col-box {
84+
height: 160px;
8185
}

‎css/component/multiSelector.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@
2020
overflow-x: hidden;
2121
}
2222
.vp-cs-select-box.left {
23-
width: 160px;
23+
/* width: 160px; */
24+
width: 100%;
2425
height: calc(100% - 32px);
2526
}
2627
.vp-cs-select-item {

‎css/m_apps/subset.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@
8181
/* Tab Page */
8282
.vp-ds-tab-page {
8383
width: 100%;
84-
height: calc(100% - 110px);
84+
height: calc(100% - 150px);
8585
}
8686
.vp-ds-tab-page.subset {
8787
display: grid;
@@ -94,8 +94,8 @@
9494
}
9595
.vp-ds-tab-page-box {
9696
display: grid;
97-
grid-template-rows: 30px calc(100% - 50px);
98-
grid-row-gap: 20px;
97+
grid-template-rows: 30px calc(100% - 30px);
98+
grid-row-gap: 5px;
9999
border: 0.25px solid #E4E4E4;
100100
padding: 15px;
101101
}

‎js/com/component/DataSelector.js

Lines changed: 210 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,13 @@ define([
5959
filterType: 'All',
6060
data: '',
6161
dataType: '',
62-
slicingStart: '',
63-
slicingEnd: '',
62+
dataInfo: '',
63+
slicingStart1: '',
64+
slicingEnd1: '',
65+
slicingStart2: '',
66+
slicingEnd2: '',
67+
ndRowType: 'slicing',
68+
ndColType: 'slicing',
6469
dictKey: '',
6570
...this.state
6671
}
@@ -169,7 +174,7 @@ define([
169174
let result = true;
170175
// trigger change
171176
$(this).val(ui.item.value);
172-
$(this).attr('data-type', ui.item.dtype);
177+
$(this).data('type', ui.item.dtype);
173178
$(this).trigger('change');
174179

175180
// select event
@@ -216,7 +221,7 @@ define([
216221
let newValue = that.generateCode();
217222

218223
$(that._target).val(newValue);
219-
$(that._target).attr('data-type', that.state.dataType);
224+
$(that._target).data('type', that.state.dataType);
220225
that.prop.finish(newValue);
221226
that.close();
222227
});
@@ -293,7 +298,8 @@ define([
293298
return {
294299
label: obj.varName,
295300
value: obj.varName,
296-
dtype: obj.varType
301+
dtype: obj.varType,
302+
info: obj.varInfo
297303
};
298304
});
299305

@@ -321,15 +327,58 @@ define([
321327
templateForSlicing() {
322328
return `
323329
<div>
324-
<label for="slicingStart">Type start/end index for slicing.</label>
330+
<label for="slicingStart1">Type start/end index for slicing.</label>
325331
</div>
326332
<div>
327-
<input type="number" class="vp-input vp-state" id="slicingStart" placeholder="Start value"/>
328-
<input type="number" class="vp-input vp-state" id="slicingEnd" placeholder="End value"/>
333+
<input type="number" class="vp-input vp-state" id="slicingStart1" placeholder="Start value"/>
334+
<input type="number" class="vp-input vp-state" id="slicingEnd1" placeholder="End value"/>
329335
</div>
330336
`;
331337
}
332338

339+
templateFor2darray() {
340+
return `
341+
<div class="vp-grid-col-p50" style="grid-column-gap: 5px;">
342+
<div>
343+
<label class="w50">Row</label>
344+
<select id="ndRowType" class="vp-select vp-state">
345+
<option value="slicing">Slicing</option>
346+
<option value="indexing">Indexing</option>
347+
</select>
348+
<div class="vp-nd-row-box slicing">
349+
<div>
350+
<label for="slicingStart1">Type start/end index for slicing.</label>
351+
</div>
352+
<div>
353+
<input type="number" class="vp-input m vp-state" id="slicingStart1" placeholder="Start value"/>
354+
<input type="number" class="vp-input m vp-state" id="slicingEnd1" placeholder="End value"/>
355+
</div>
356+
</div>
357+
<div class="vp-nd-row-box indexing">
358+
</div>
359+
</div>
360+
<div>
361+
<label class="w50">Column</label>
362+
<select id="ndColType" class="vp-select vp-state">
363+
<option value="slicing">Slicing</option>
364+
<option value="indexing">Indexing</option>
365+
</select>
366+
<div class="vp-nd-col-box slicing">
367+
<div>
368+
<label for="slicingStart2">Type start/end index for slicing.</label>
369+
</div>
370+
<div>
371+
<input type="number" class="vp-input m vp-state" id="slicingStart2" placeholder="Start value"/>
372+
<input type="number" class="vp-input m vp-state" id="slicingEnd2" placeholder="End value"/>
373+
</div>
374+
</div>
375+
<div class="vp-nd-col-box indexing">
376+
</div>
377+
</div>
378+
</div>
379+
`
380+
}
381+
333382
templateForKeyPicker() {
334383
return `
335384
<div>
@@ -385,22 +434,61 @@ define([
385434
}
386435

387436
renderOptionPage() {
437+
let that = this;
438+
388439
// initialize page and variables
389440
$(this.wrapSelector('.vp-ds-option-inner-box')).html('');
390441
this._columnSelector = null;
391442

392-
switch (this.state.dataType) {
443+
let { data, dataType } = this.state;
444+
445+
switch (dataType) {
393446
case 'DataFrame':
394447
// column selecting
395448
this._columnSelector = new MultiSelector(this.wrapSelector('.vp-ds-option-inner-box'),
396-
{ mode: 'columns', parent: [this.state.data] }
397-
);
449+
{ mode: 'columns', parent: [data] }
450+
);
398451
break;
399452
case 'Series':
400453
case 'list':
401454
case 'ndarray':
402-
// slicing
403-
$(this.wrapSelector('.vp-ds-option-inner-box')).html(this.templateForSlicing());
455+
// check it's ndim
456+
let ndim = 0;
457+
try {
458+
ndim = this._varList.filter(obj => obj.value==data)[0]['info']['ndim'];
459+
} catch { ; }
460+
if (ndim == 2) {
461+
// 1d 2d page
462+
$(this.wrapSelector('.vp-ds-option-inner-box')).html(this.templateFor2darray());
463+
$(this.wrapSelector('#ndRowType')).val(this.state.ndRowType);
464+
$(this.wrapSelector('#ndColType')).val(this.state.ndColType);
465+
this._ndRowSelector = new MultiSelector(this.wrapSelector('.vp-nd-row-box.indexing'),
466+
{ mode: 'ndarray0', parent: [data] }
467+
);
468+
this._ndColSelector = new MultiSelector(this.wrapSelector('.vp-nd-col-box.indexing'),
469+
{ mode: 'ndarray1', parent: [data] }
470+
);
471+
$(this.wrapSelector('.vp-nd-row-box')).hide();
472+
$(this.wrapSelector('.vp-nd-col-box')).hide();
473+
$(this.wrapSelector('.vp-nd-row-box.' + this.state.ndRowType)).show();
474+
$(this.wrapSelector('.vp-nd-col-box.' + this.state.ndColType)).show();
475+
476+
// bind event
477+
$(this.wrapSelector('#ndRowType')).change(function() {
478+
that.state.ndRowType = $(this).val();
479+
$(that.wrapSelector('.vp-nd-row-box')).hide();
480+
$(that.wrapSelector('.vp-nd-row-box.' + that.state.ndRowType)).show();
481+
});
482+
$(this.wrapSelector('#ndColType')).change(function() {
483+
that.state.ndColType = $(this).val();
484+
$(that.wrapSelector('.vp-nd-col-box')).hide();
485+
$(that.wrapSelector('.vp-nd-col-box.' + that.state.ndColType)).show();
486+
});
487+
488+
} else {
489+
// slicing
490+
$(this.wrapSelector('.vp-ds-option-inner-box')).html(this.templateForSlicing());
491+
}
404492
break;
405493
case 'dict':
406494
// key picker
@@ -415,8 +503,51 @@ define([
415503
return this.templateForTarget();
416504
}
417505

506+
/**
507+
* simple version of _saveSingleState()
508+
*/
509+
_saveState() {
510+
let that = this;
511+
$(this.wrapSelector('.vp-state')).each((idx, tag) => {
512+
let id = tag.id;
513+
let tagName = $(tag).prop('tagName'); // returns with UpperCase
514+
let newValue = '';
515+
switch(tagName) {
516+
case 'INPUT':
517+
let inputType = $(tag).prop('type');
518+
if (inputType == 'checkbox') {
519+
newValue = $(tag).prop('checked');
520+
} else {
521+
// inputType == 'text' || inputType == 'number' || inputType == 'hidden' || inputType == 'color' || inputType == 'range'
522+
newValue = $(tag).val();
523+
}
524+
break;
525+
case 'TEXTAREA':
526+
case 'SELECT':
527+
default:
528+
newValue = $(tag).val();
529+
if (!newValue) {
530+
newValue = '';
531+
}
532+
break;
533+
}
534+
535+
// save state
536+
that.state[id] = newValue;
537+
});
538+
}
539+
418540
generateCode() {
419-
let { data, dataType } = this.state;
541+
// save state
542+
this._saveState();
543+
544+
// get states
545+
let {
546+
data, dataType,
547+
slicingStart1, slicingEnd1,
548+
slicingStart2, slicingEnd2,
549+
ndRowType, ndColType
550+
} = this.state;
420551
let code = new com_String();
421552

422553
switch (dataType) {
@@ -435,13 +566,73 @@ define([
435566
break;
436567
case 'Series':
437568
case 'list':
438-
case 'ndarray':
439569
code.append(data);
440570
// start / end value
441-
let start = $(this.wrapSelector('#slicingStart')).val();
442-
let end = $(this.wrapSelector('#slicingEnd')).val();
443-
if ((start && start != '') || (end && end != '')) {
444-
code.appendFormat('[{0}:{1}]', start, end);
571+
if ((slicingStart1 && slicingStart1 != '') || (slicingEnd1 && slicingEnd1 != '')) {
572+
code.appendFormat('[{0}:{1}]', slicingStart1, slicingEnd1);
573+
}
574+
break;
575+
case 'ndarray':
576+
code.append(data);
577+
let ndim = 0;
578+
try {
579+
ndim = this._varList.filter(obj => obj.value==data)[0]['info']['ndim'];
580+
} catch { ; }
581+
if (ndim == 2) {
582+
let rowCode = '';
583+
let colCode = '';
584+
if (ndRowType == 'slicing') {
585+
// slicing start / end value
586+
if ((slicingStart1 && slicingStart1 != '') || (slicingEnd1 && slicingEnd1 != '')) {
587+
rowCode = com_util.formatString('{0}:{1}', slicingStart1, slicingEnd1);
588+
}
589+
} else {
590+
// indexing
591+
let result = this._ndRowSelector.getDataList();
592+
let rowList = [];
593+
result && result.forEach(obj => {
594+
rowList.push(obj.code);
595+
});
596+
if (rowList.length > 0) {
597+
if (rowList.length == 1) {
598+
rowCode = com_util.formatString('{0}', rowList.join(', '));
599+
} else {
600+
rowCode = com_util.formatString('({0})', rowList.join(', '));
601+
}
602+
}
603+
}
604+
if (ndColType == 'slicing') {
605+
// slicing start / end value
606+
if ((slicingStart2 && slicingStart2 != '') || (slicingEnd2 && slicingEnd2 != '')) {
607+
colCode = com_util.formatString('{0}:{1}', slicingStart2, slicingEnd2);
608+
}
609+
} else {
610+
// indexing
611+
let result = this._ndColSelector.getDataList();
612+
let columnList = [];
613+
result && result.forEach(obj => {
614+
columnList.push(obj.code);
615+
});
616+
if (columnList.length > 0) {
617+
if (columnList.length == 1) {
618+
colCode = com_util.formatString('{0}', columnList.join(', '));
619+
} else {
620+
colCode = com_util.formatString('({0})', columnList.join(', '));
621+
}
622+
}
623+
}
624+
// merge rowCode and colCode
625+
if (rowCode != '' || colCode != '') {
626+
if (rowCode == '' && colCode != '') {
627+
rowCode = ':'
628+
}
629+
code.appendFormat('[{0},{1}]', rowCode, colCode);
630+
}
631+
} else {
632+
// start / end value
633+
if ((slicingStart1 && slicingStart1 != '') || (slicingEnd1 && slicingEnd1 != '')) {
634+
code.appendFormat('[{0}:{1}]', slicingStart1, slicingEnd1);
635+
}
445636
}
446637
break;
447638
case 'dict':

0 commit comments

Comments
 (0)