Skip to content

Commit 90a6d64

Browse files
author
minjk-bl
committed
Test for DataSelector component
1 parent ea6ff4b commit 90a6d64

File tree

2 files changed

+110
-23
lines changed

2 files changed

+110
-23
lines changed

‎js/com/com_Config.js

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -437,6 +437,10 @@ define([
437437
})
438438
}
439439

440+
getDataTypes() {
441+
return Config.DATA_TYPES;
442+
}
443+
440444
getMLDataDict(key = '') {
441445
if (key == '') {
442446
return Config.ML_DATA_DICT;
@@ -460,8 +464,8 @@ define([
460464
/**
461465
* FIXME: before release, change it to _MODE_TYPE.RELEASE
462466
*/
463-
// Config.serverMode = _MODE_TYPE.DEVELOP;
464-
Config.serverMode = _MODE_TYPE.RELEASE;
467+
Config.serverMode = _MODE_TYPE.DEVELOP;
468+
// Config.serverMode = _MODE_TYPE.RELEASE;
465469

466470
/**
467471
* Version
@@ -482,6 +486,24 @@ define([
482486
Config.MENU_BOARD_SPACING = 5;
483487
Config.VP_MIN_WIDTH = Config.MENU_MIN_WIDTH + Config.BOARD_MIN_WIDTH + Config.MENU_BOARD_SPACING; // = MENU_MIN_WIDTH + BOARD_MIN_WIDTH + MENU_BOARD_SPACING
484488

489+
/**
490+
* Data types
491+
*/
492+
Config.DATA_TYPES = [
493+
// pandas object
494+
'DataFrame', 'Series', 'Index', 'Period', 'GroupBy', 'Timestamp'
495+
// Index type object
496+
, 'RangeIndex', 'CategoricalIndex', 'MultiIndex', 'IntervalIndex', 'DatetimeIndex', 'TimedeltaIndex', 'PeriodIndex', 'Int64Index', 'UInt64Index', 'Float64Index'
497+
// GroupBy type object
498+
, 'DataFrameGroupBy', 'SeriesGroupBy'
499+
// Plot type
500+
, 'Figure', 'AxesSubplot'
501+
// Numpy
502+
, 'ndarray'
503+
// Python variable
504+
, 'str', 'int', 'float', 'bool', 'dict', 'list', 'tuple'
505+
]
506+
485507
/**
486508
* Data types using for searching model variables
487509
*/

‎js/com/component/DataSelector.js

Lines changed: 86 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -23,47 +23,112 @@ define([
2323
class DataSelector extends Component {
2424

2525
/**
26-
*
27-
* @param {string} frameSelector query for parent component
28-
* @param {Object} config parent:[], selectedList=[], includeList=[]
26+
* Constructor
27+
* @param {Object} state { type, ... }
2928
*/
30-
constructor(frameSelector, config) {
31-
super(frameSelector, config, {});
29+
constructor(state) {
30+
super($('#site'), state);
3231
}
3332

3433
_init() {
35-
this.frameSelector = this.$target;
34+
super._init();
3635

37-
// configuration
38-
this.config = this.state;
36+
this.state = {
37+
type: 'data', // selector type : data / column
38+
target: null, // target jquery object
39+
finish: null, // callback after selection
40+
data: '',
41+
dataType: '',
42+
...this.state
43+
}
3944

40-
var { mode, type, parent, selectedList=[], includeList=[], excludeList=[] } = this.config;
41-
this.mode = mode;
42-
this.parent = parent;
43-
this.selectedList = selectedList;
44-
this.includeList = includeList;
45-
this.excludeList = excludeList;
45+
}
46+
47+
_bindEvent() {
48+
let that = this;
49+
50+
// Click X to close
51+
$(that.wrapSelector('.vp-inner-popup-close')).on('click', function() {
52+
that.close();
53+
});
54+
55+
// Click ok
56+
$(that.wrapSelector('#vp_dsOk')).on('click', function() {
57+
// TODO: set target value
58+
let newValue = that.state.data;
59+
60+
$(that.state.target).val(newValue);
61+
$(that.state.target).data('type', that.state.dataType);
62+
that.state.finish(newValue);
63+
that.close();
64+
});
65+
66+
}
67+
68+
/**
69+
* Bind event for items created dynamically
70+
*/
71+
_bindEventForItem() {
72+
let that = this;
4673

74+
// Click variable item
75+
$(that.wrapSelector('.vp-ds-var-item')).off('click');
76+
$(that.wrapSelector('.vp-ds-var-item')).on('click', function() {
77+
$(that.wrapSelector('.vp-ds-var-item')).removeClass('selected');
78+
$(this).addClass('selected');
4779

80+
let data = $(this).find('.vp-ds-var-data').text();
81+
let dataType = $(this).find('.vp-ds-var-type').text();
82+
that.state.data = data;
83+
that.state.dataType = dataType;
84+
85+
// TODO: load preview
86+
});
4887
}
4988

50-
load() {
51-
$(this.frameSelector).html(this.render());
52-
this.bindEvent();
89+
loadVariables() {
90+
let that = this;
91+
// Searchable variable types
92+
let types = [
93+
...vpConfig.getDataTypes(),
94+
// ML Data types
95+
...vpConfig.getMLDataTypes()
96+
];
97+
98+
vpKernel.getDataList(types).then(function(resultObj) {
99+
var varList = JSON.parse(resultObj.result);
100+
101+
let varTags = new com_String();
102+
varList && varList.forEach((varObj, idx) => {
103+
varTags.appendFormatLine('<div class="{0} {1}">', 'vp-ds-var-item', 'vp-grid-col-p50');
104+
varTags.appendFormatLine('<div class="{0}">{1}</div>', 'vp-ds-var-data', varObj.varName);
105+
varTags.appendFormatLine('<div class="{0}">{1}</div>', 'vp-ds-var-type', varObj.varType);
106+
varTags.appendLine('</div>');
107+
});
108+
109+
$(that.wrapSelector('.vp-ds-variable-box')).html(varTags.toString());
110+
111+
that._bindEventForItem();
112+
113+
});
53114
}
54115

55116
template() {
56117
return dataHTML;
57118
}
58119

59120
render() {
60-
61-
}
121+
super.render();
62122

63-
bindEvent() {
64-
let that = this;
123+
this.loadVariables();
124+
}
65125

126+
open() {
127+
$(this.wrapSelector()).show();
128+
}
66129

130+
close() {
131+
$(this.wrapSelector()).remove();
67132
}
68133
}
69134

0 commit comments

Comments
 (0)