@@ -78,6 +78,7 @@ define([
7878
7979rowType :'condition' ,
8080rowList :[ ] ,
81+ rowLimit :10 ,
8182rowPointer :{ start :- 1 , end :- 1 } ,
8283rowPageDom :'' ,
8384
@@ -290,6 +291,68 @@ define([
290291$ ( this . wrapSelector ( '.select-row .' + VP_DS_SELECT_BOX + '.left' ) ) . replaceWith ( function ( ) {
291292return tag . toString ( ) ;
292293} ) ;
294+
295+ // item indexing - scroll to bottom
296+ let that = this ;
297+ $ ( this . wrapSelector ( '.select-row .vp-ds-select-box.left' ) ) . on ( 'scroll' , function ( ) {
298+ if ( $ ( this ) . scrollTop ( ) + $ ( this ) . innerHeight ( ) >= ( $ ( this ) [ 0 ] . scrollHeight - 2 ) ) {
299+ let scrollPos = $ ( this ) . scrollTop ( ) ;
300+ let start = that . state . rowLimit ;
301+ let end = start + 10 ;
302+ let subsetVariable = com_util . formatString ( '{0}.iloc[{1}:{2}]' , that . state . pandasObject , start , end ) ;
303+ vpKernel . getRowList ( subsetVariable ) . then ( function ( resultObj ) {
304+ let { result} = resultObj ;
305+ var rowList = JSON . parse ( result ) ;
306+ rowList = rowList . map ( function ( x ) {
307+ return {
308+ ...x ,
309+ value :x . label ,
310+ code :x . value
311+ } ;
312+ } ) ;
313+ // if iloc
314+ if ( that . state . subsetType == 'iloc' ) {
315+ rowList = rowList . map ( function ( x ) {
316+ return {
317+ ...x ,
318+ label :x . location + '' ,
319+ value :x . location + '' ,
320+ code :x . location + '' ,
321+ } ;
322+ } ) ;
323+ }
324+
325+ let newRowList = [
326+ ...that . state . rowList ,
327+ ...rowList
328+ ] ;
329+ that . state . rowList = [ ...newRowList ] ;
330+
331+ // filter with selected list
332+ var selectedList = [ ] ;
333+ var selectedTags = $ ( that . wrapSelector ( '.' + VP_DS_SELECT_ITEM + '.select-row.added:not(.moving)' ) ) ;
334+ if ( selectedTags . length > 0 ) {
335+ for ( var i = 0 ; i < selectedTags . length ; i ++ ) {
336+ var rowValue = $ ( selectedTags [ i ] ) . data ( 'code' ) ;
337+ if ( rowValue !== undefined ) {
338+ selectedList . push ( rowValue ) ;
339+ }
340+ }
341+ }
342+
343+ newRowList = newRowList . filter ( row => ! selectedList . includes ( row . code ) ) ;
344+
345+ that . renderRowSelectionBox ( newRowList ) ;
346+ that . bindDraggable ( 'row' ) ;
347+ that . generateCode ( ) ;
348+
349+ // load scroll position
350+ $ ( that . wrapSelector ( '.select-row .vp-ds-select-box.left' ) ) . scrollTop ( scrollPos ) ;
351+
352+ that . state . rowLimit = end ;
353+ } ) ;
354+ }
355+ } ) ;
293356}
294357/**
295358 * Render row slicing box
@@ -299,35 +362,42 @@ define([
299362renderRowSlicingBox ( rowList ) {
300363var that = this ;
301364var tag = new com_String ( ) ;
302- tag . appendFormatLine ( '<div class="{0}">' , VP_DS_SLICING_BOX ) ;
303- var vpRowStart = new SuggestInput ( ) ;
304- vpRowStart . addClass ( VP_DS_ROW_SLICE_START ) ;
305- vpRowStart . addClass ( 'vp-input m' ) ;
306- vpRowStart . setPlaceholder ( 'start' ) ;
307- vpRowStart . setSuggestList ( function ( ) { return rowList ; } ) ;
308- vpRowStart . setSelectEvent ( function ( value , item ) {
309- $ ( this . wrapSelector ( ) ) . val ( item . code ) ;
310- $ ( this . wrapSelector ( ) ) . attr ( 'data-code' , item . code ) ;
311- // $(this.wrapSelector()).trigger('change');
312- that . generateCode ( ) ;
313- } ) ;
314- vpRowStart . setNormalFilter ( false ) ;
315-
316- var vpRowEnd = new SuggestInput ( ) ;
317- vpRowEnd . addClass ( VP_DS_ROW_SLICE_END ) ;
318- vpRowEnd . addClass ( 'vp-input m' ) ;
319- vpRowEnd . setPlaceholder ( 'end' ) ;
320- vpRowEnd . setSuggestList ( function ( ) { return rowList ; } ) ;
321- vpRowEnd . setSelectEvent ( function ( value , item ) {
322- $ ( this . wrapSelector ( ) ) . val ( item . code ) ;
323- $ ( this . wrapSelector ( ) ) . attr ( 'data-code' , item . code ) ;
324- // $(this.wrapSelector()).trigger('change');
325- that . generateCode ( ) ;
326- } ) ;
327- vpRowEnd . setNormalFilter ( false ) ;
328-
329- tag . appendLine ( vpRowStart . toTagString ( ) ) ;
330- tag . appendLine ( vpRowEnd . toTagString ( ) ) ;
365+ tag . appendFormatLine ( '<div class="{0} {1}">' , VP_DS_SLICING_BOX , 'vp-grid-col-p50' ) ;
366+ // var vpRowStart = new SuggestInput();
367+ // vpRowStart.addClass(VP_DS_ROW_SLICE_START);
368+ // vpRowStart.addClass('vp-input m');
369+ // vpRowStart.setPlaceholder('start');
370+ // vpRowStart.setSuggestList(function () { return rowList; });
371+ // vpRowStart.setSelectEvent(function (value, item) {
372+ // $(this.wrapSelector()).val(item.code);
373+ // $(this.wrapSelector()).attr('data-code', item.code);
374+ // // $(this.wrapSelector()).trigger('change');
375+ // that.generateCode();
376+ // });
377+ // vpRowStart.setNormalFilter(false);
378+
379+ // var vpRowEnd = new SuggestInput();
380+ // vpRowEnd.addClass(VP_DS_ROW_SLICE_END);
381+ // vpRowEnd.addClass('vp-input m');
382+ // vpRowEnd.setPlaceholder('end');
383+ // vpRowEnd.setSuggestList(function () { return rowList; });
384+ // vpRowEnd.setSelectEvent(function (value, item) {
385+ // $(this.wrapSelector()).val(item.code);
386+ // $(this.wrapSelector()).attr('data-code', item.code);
387+ // // $(this.wrapSelector()).trigger('change');
388+ // that.generateCode();
389+ // });
390+ // vpRowEnd.setNormalFilter(false);
391+ // tag.appendLine(vpRowStart.toTagString());
392+ // tag.appendLine(vpRowEnd.toTagString());
393+ tag . appendLine ( '<div class="vp-grid-box">' ) ;
394+ tag . appendFormatLine ( '<input type="text" class="vp-input {0}" placeholder="{1}"/>' , VP_DS_ROW_SLICE_START , 'start' ) ;
395+ tag . appendFormatLine ( '<label style="text-align:right;padding-right:10px;"><input type="checkbox" class="{0}"/><span>Text</span></label>' , 'vp-ds-row-slice-start-text' ) ;
396+ tag . appendLine ( '</div>' ) ;
397+ tag . appendLine ( '<div class="vp-grid-box">' ) ;
398+ tag . appendFormatLine ( '<input type="text" class="vp-input {0}" placeholder="{1}"/>' , VP_DS_ROW_SLICE_END , 'end' ) ;
399+ tag . appendFormatLine ( '<label style="text-align:right;padding-right:10px;"><input type="checkbox" class="{0}"/><span>Text</span></label>' , 'vp-ds-row-slice-end-text' ) ;
400+ tag . appendLine ( '</div>' ) ;
331401tag . appendLine ( '</div>' ) ;
332402// render
333403$ ( this . wrapSelector ( '.' + VP_DS_ROWTYPE_BOX + ' .' + VP_DS_SLICING_BOX ) ) . replaceWith ( function ( ) {
@@ -422,7 +492,7 @@ define([
422492// tag.appendFormatLine('<input type="text" class="{0} {1}" placeholder="{2}"/>', VP_DS_COL_SLICE_END, 'vp-input m', 'end');
423493var vpColStart = new SuggestInput ( ) ;
424494vpColStart . addClass ( VP_DS_COL_SLICE_START ) ;
425- vpColStart . addClass ( 'vp-input m ' ) ;
495+ vpColStart . addClass ( 'vp-input' ) ;
426496vpColStart . setPlaceholder ( 'start' ) ;
427497vpColStart . setSuggestList ( function ( ) { return colList ; } ) ;
428498vpColStart . setSelectEvent ( function ( value , item ) {
@@ -434,7 +504,7 @@ define([
434504
435505var vpColEnd = new SuggestInput ( ) ;
436506vpColEnd . addClass ( VP_DS_COL_SLICE_END ) ;
437- vpColEnd . addClass ( 'vp-input m ' ) ;
507+ vpColEnd . addClass ( 'vp-input' ) ;
438508vpColEnd . setPlaceholder ( 'end' ) ;
439509vpColEnd . setSuggestList ( function ( ) { return colList ; } ) ;
440510vpColEnd . setSelectEvent ( function ( value , item ) {
@@ -780,19 +850,6 @@ define([
780850loadRowList ( rowList ) {
781851var that = this ;
782852
783- // if iloc
784- if ( this . state . subsetType == 'iloc' ) {
785- rowList = rowList . map ( function ( x ) {
786- return {
787- ...x ,
788- label :x . location + '' ,
789- value :x . location + '' ,
790- code :x . location + '' ,
791- } ;
792- } ) ;
793- }
794-
795-
796853this . state . rowList = rowList ;
797854this . state . rowPointer = { start :- 1 , end :- 1 } ;
798855
@@ -1080,6 +1137,7 @@ define([
10801137that . state . pandasObject = varName ;
10811138that . state . dataType = event . dataType ?event . dataType :that . state . dataType ;
10821139that . state . rowList = [ ] ;
1140+ that . state . rowLimit = 10 ;
10831141that . state . columnList = [ ] ;
10841142that . state . rowPointer = { start :- 1 , end :- 1 } ;
10851143that . state . colPointer = { start :- 1 , end :- 1 } ;
@@ -1110,7 +1168,8 @@ define([
11101168} ) ;
11111169
11121170// get result and load column list
1113- vpKernel . getRowList ( varName ) . then ( function ( resultObj ) {
1171+ let subsetVariable = com_util . formatString ( '{0}.iloc[:{1}]' , varName , that . state . rowLimit ) ;
1172+ vpKernel . getRowList ( subsetVariable ) . then ( function ( resultObj ) {
11141173let { result} = resultObj ;
11151174var rowList = JSON . parse ( result ) ;
11161175rowList = rowList . map ( function ( x ) {
@@ -1120,6 +1179,17 @@ define([
11201179code :x . value
11211180} ;
11221181} ) ;
1182+ // if iloc
1183+ if ( that . state . subsetType == 'iloc' ) {
1184+ rowList = rowList . map ( function ( x ) {
1185+ return {
1186+ ...x ,
1187+ label :x . location + '' ,
1188+ value :x . location + '' ,
1189+ code :x . location + '' ,
1190+ } ;
1191+ } ) ;
1192+ }
11231193that . loadRowList ( rowList ) ;
11241194that . bindDraggable ( 'row' ) ;
11251195that . generateCode ( ) ;
@@ -1131,7 +1201,8 @@ define([
11311201}
11321202} else if ( that . state . dataType == 'Series' ) {
11331203// get result and load column list
1134- vpKernel . getRowList ( varName ) . then ( function ( resultObj ) {
1204+ let subsetVariable = com_util . formatString ( '{0}.iloc[:{1}]' , varName , that . state . rowLimit ) ;
1205+ vpKernel . getRowList ( subsetVariable ) . then ( function ( resultObj ) {
11351206let { result} = resultObj ;
11361207var rowList = JSON . parse ( result ) ;
11371208rowList = rowList . map ( function ( x ) {
@@ -1141,6 +1212,17 @@ define([
11411212code :x . value
11421213} ;
11431214} ) ;
1215+ // if iloc
1216+ if ( that . state . subsetType == 'iloc' ) {
1217+ rowList = rowList . map ( function ( x ) {
1218+ return {
1219+ ...x ,
1220+ label :x . location + '' ,
1221+ value :x . location + '' ,
1222+ code :x . location + '' ,
1223+ } ;
1224+ } ) ;
1225+ }
11441226that . loadRowList ( rowList ) ;
11451227that . bindDraggable ( 'row' ) ;
11461228that . generateCode ( ) ;
@@ -1413,7 +1495,7 @@ define([
14131495} ) ;
14141496
14151497// typing on slicing
1416- $ ( document ) . on ( 'change' , this . wrapSelector ( '.vp-ds-slicing-box input[type="text"] ' ) , function ( ) {
1498+ $ ( document ) . on ( 'change' , this . wrapSelector ( '.vp-ds-slicing-box input' ) , function ( ) {
14171499$ ( this ) . data ( 'code' , $ ( this ) . val ( ) ) ;
14181500that . generateCode ( ) ;
14191501} ) ;
@@ -1576,9 +1658,14 @@ define([
15761658rowSelection . append ( ':' ) ;
15771659}
15781660} else if ( this . state . rowType == 'slicing' ) {
1579- var start = $ ( this . wrapSelector ( '.' + VP_DS_ROW_SLICE_START ) ) . data ( 'code' ) ;
1580- var end = $ ( this . wrapSelector ( '.' + VP_DS_ROW_SLICE_END ) ) . data ( 'code' ) ;
1581- rowSelection . appendFormat ( '{0}:{1}' , start ?start :'' , end ?end :'' ) ;
1661+ let start = $ ( this . wrapSelector ( '.' + VP_DS_ROW_SLICE_START ) ) . val ( ) ;
1662+ let startText = $ ( this . wrapSelector ( '.vp-ds-row-slice-start-text' ) ) . prop ( 'checked' ) ;
1663+ var end = $ ( this . wrapSelector ( '.' + VP_DS_ROW_SLICE_END ) ) . val ( ) ;
1664+ let endText = $ ( this . wrapSelector ( '.vp-ds-row-slice-end-text' ) ) . prop ( 'checked' ) ;
1665+
1666+ rowSelection . appendFormat ( '{0}:{1}'
1667+ , start ?com_util . convertToStr ( start , startText ) :''
1668+ , end ?com_util . convertToStr ( end , endText ) :'' ) ;
15821669} else if ( this . state . rowType == 'condition' ) {
15831670// condition
15841671var condList = $ ( this . wrapSelector ( '.' + VP_DS_CONDITION_TBL + ' tr td:not(:last)' ) ) ;