Skip to content

Commit 476f084

Browse files
author
minjk-bl
committed
Add index for DataFrame on DataSelector
1 parent 14e92b4 commit 476f084

File tree

3 files changed

+89
-26
lines changed

3 files changed

+89
-26
lines changed

‎css/component/dataSelector.css

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,10 @@
3232
}
3333
.vp-dataselector {
3434
position: absolute;
35-
top: calc(50% - 225px);
36-
left: calc(50% - 300px);
37-
width: 600px;
38-
height: 450px;
35+
top: calc(50% - 275px);
36+
left: calc(50% - 325px);
37+
width: 650px;
38+
height: 550px;
3939
background: white;
4040
border: 1px solid var(--border-gray-color);
4141
z-index: 999;
@@ -46,14 +46,14 @@
4646
}
4747
.vp-ds-data-box {
4848
width: 100%;
49-
height: 100px;
49+
height: 160px;
5050
align-content: baseline;
5151
align-items: center;
5252
}
5353
.vp-ds-type-box,
5454
.vp-ds-variable-box {
5555
border: 0.25px solid var(--border-gray-color);
56-
height: 100px;
56+
height: 160px;
5757
grid-row-gap: 0px;
5858
align-content: baseline;
5959
}
@@ -77,12 +77,18 @@
7777
font-weight: bold;
7878
}
7979
.vp-ds-option-box {
80-
height: calc(100% - 140px);
80+
height: calc(100% - 200px);
8181
margin-top: 10px;
8282
}
8383
.vp-ds-option-inner-box {
8484
height: calc(100% - 30px);
8585
}
86+
.vp-ds-df-option-box {
87+
height: 100%;
88+
}
89+
.vp-ds-df-multiselector {
90+
height: calc(100% - 25px);
91+
}
8692
.vp-nd-row-box,
8793
.vp-nd-col-box {
8894
height: 160px;

‎js/com/component/DataSelector.js

Lines changed: 75 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ define([
7070
slicingEnd2: '',
7171
ndRowType: 'slicing',
7272
ndColType: 'slicing',
73+
useIndex: false,
7374
indexing: [],
7475
rowIndexing: [],
7576
colIndexing: [],
@@ -338,6 +339,40 @@ define([
338339
`;
339340
}
340341

342+
templateForMultiSelector() {
343+
return `
344+
<div class="vp-ds-df-option-box">
345+
<label><input type="checkbox" id="useIndex" class="vp-state" ${this.state.useIndex===true?'checked':''}/> <span>Use Index</span></label>
346+
<div class="vp-ds-df-multiselector" ${this.state.useIndex===true?'style="display:none;"':''}>
347+
</div>
348+
<div class="vp-ds-df-index-box" ${this.state.useIndex===false?'style="display:none;"':''}>
349+
<div><label>Index selected.</label>
350+
<div class="vp-cs-select-container no-selection">
351+
<div class="vp-cs-select-left">
352+
<input type="text" class="vp-input wp100" placeholder="Search" value="" readonly>
353+
<div class="vp-cs-select-box left vp-cs-droppable no-selection vp-scrollbar">
354+
</div>
355+
</div>
356+
<div class="vp-cs-select-btn-box">
357+
<button type="button" class="vp-cs-select-add-all-btn" title="Add all items"><img src="/nbextensions/visualpython/img/arrow_right_double.svg"></button>
358+
<button type="button" class="vp-cs-select-add-btn" title="Add selected items"><img src="/nbextensions/visualpython/img/arrow_right.svg"></button>
359+
<button type="button" class="vp-cs-select-del-btn" title="Remove selected items"><img src="/nbextensions/visualpython/img/arrow_left.svg"></button>
360+
<button type="button" class="vp-cs-select-del-all-btn" title="Remove all items"><img src="/nbextensions/visualpython/img/arrow_left_double.svg"></button>
361+
</div>
362+
<div class="vp-cs-select-right">
363+
<div class="vp-cs-select-box right vp-cs-droppable no-selection vp-scrollbar ui-droppable">
364+
<div class="vp-cs-select-item">
365+
<span>index</span>
366+
</div>
367+
</div>
368+
</div>
369+
</div>
370+
</div>
371+
</div>
372+
</div>
373+
`
374+
}
375+
341376
templateForSlicing() {
342377
return `
343378
<div>
@@ -480,10 +515,25 @@ define([
480515

481516
switch (dataType) {
482517
case 'DataFrame':
518+
// render option page
519+
$(this.wrapSelector('.vp-ds-option-inner-box')).html(this.templateForMultiSelector());
483520
// column selecting
484-
this._columnSelector = new MultiSelector(this.wrapSelector('.vp-ds-option-inner-box'),
521+
this._columnSelector = new MultiSelector(this.wrapSelector('.vp-ds-df-multiselector'),
485522
{ mode: 'columns', parent: [data], selectedList: this.state.indexing }
486523
);
524+
525+
// bind event
526+
$(this.wrapSelector('#useIndex')).on('change', function() {
527+
let checked = $(this).prop('checked');
528+
that.state.useIndex = checked;
529+
if (checked === true) {
530+
$(that.wrapSelector('.vp-ds-df-multiselector')).hide();
531+
$(that.wrapSelector('.vp-ds-df-index-box')).show();
532+
} else {
533+
$(that.wrapSelector('.vp-ds-df-multiselector')).show();
534+
$(that.wrapSelector('.vp-ds-df-index-box')).hide();
535+
}
536+
});
487537
break;
488538
case 'Series':
489539
case 'list':
@@ -510,12 +560,12 @@ define([
510560
$(this.wrapSelector('.vp-nd-col-box.' + this.state.ndColType)).show();
511561

512562
// bind event
513-
$(this.wrapSelector('#ndRowType')).change(function() {
563+
$(this.wrapSelector('#ndRowType')).on('change', function() {
514564
that.state.ndRowType = $(this).val();
515565
$(that.wrapSelector('.vp-nd-row-box')).hide();
516566
$(that.wrapSelector('.vp-nd-row-box.' + that.state.ndRowType)).show();
517567
});
518-
$(this.wrapSelector('#ndColType')).change(function() {
568+
$(this.wrapSelector('#ndColType')).on('change', function() {
519569
that.state.ndColType = $(this).val();
520570
$(that.wrapSelector('.vp-nd-col-box')).hide();
521571
$(that.wrapSelector('.vp-nd-col-box.' + that.state.ndColType)).show();
@@ -593,6 +643,7 @@ define([
593643
// get states
594644
let {
595645
data, dataType,
646+
useIndex,
596647
slicingStart1, slicingEnd1,
597648
slicingStart2, slicingEnd2,
598649
ndRowType, ndColType
@@ -602,21 +653,27 @@ define([
602653
switch (dataType) {
603654
case 'DataFrame':
604655
code.append(data);
605-
if (this._columnSelector != null) {
606-
let result = this._columnSelector.getDataList();
607-
this.state.indexing = result.map(obj => obj.code); // save state
608-
let columnList = [];
609-
result && result.forEach(obj => {
610-
columnList.push(obj.code);
611-
});
612-
if (columnList.length > 0) {
613-
if (columnList.length == 1) {
614-
// return as Series
615-
code.appendFormat('[{0}]', columnList.join(', '));
616-
// change datatype to Series
617-
this.state.returnDataType = 'Series';
618-
} else {
619-
code.appendFormat('[[{0}]]', columnList.join(', '));
656+
if (useIndex === true) {
657+
// use index
658+
code.append('.index');
659+
} else {
660+
// use column selector
661+
if (this._columnSelector != null) {
662+
let result = this._columnSelector.getDataList();
663+
this.state.indexing = result.map(obj => obj.code); // save state
664+
let columnList = [];
665+
result && result.forEach(obj => {
666+
columnList.push(obj.code);
667+
});
668+
if (columnList.length > 0) {
669+
if (columnList.length == 1) {
670+
// return as Series
671+
code.appendFormat('[{0}]', columnList.join(', '));
672+
// change datatype to Series
673+
this.state.returnDataType = 'Series';
674+
} else {
675+
code.appendFormat('[[{0}]]', columnList.join(', '));
676+
}
620677
}
621678
}
622679
}

‎js/com/component/MultiSelector.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -258,7 +258,7 @@ define([
258258
var that = this;
259259

260260
var tag = new com_String();
261-
tag.appendLine('<label class="vp-bold">Drag-and-drop columns to right to select.</label>');
261+
tag.appendLine('<label>Drag-and-drop columns to right to select.</label>');
262262
tag.appendFormatLine('<div class="{0} {1}">', APP_SELECT_CONTAINER, this.uuid);
263263
// select - left
264264
tag.appendFormatLine('<div class="{0}">', APP_SELECT_LEFT);

0 commit comments

Comments
 (0)