<commit_before>Ext.define('BurnChartApp', {
    extend:'Rally.app.App',
    mixins: {
        messageable: 'Rally.Messageable'
    },
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    appName:'Burn Chart',
    cls:'burnchart',

    launch: function () {
        this.startTime = '2012-03-01T00:00:00Z';
        this.chartQuery = {
            find:{
                _Type:'Defect',
                _ValidFrom: {
                    $gte: this.startTime
                }
            }
        };

        this.chartConfigBuilder = Ext.create('Rally.app.analytics.BurnChartBuilder');
		
		this.defectStatePicker = Ext.create('Rally.ui.AttributeComboBox', {
				model: 'Defect',
				field: 'State',
				multiSelect: true
			});
		
		this.defectStatePickerContainer = Ext.create('Ext.Container', {
			items: [this.defectStatePicker]
		});
		
		var runQueryButton = Ext.create('Ext.Container', {
			items: [{
				xtype: 'rallybutton',
				text: 'Build Chart',
				handler: Ext.bind(this._refreshChart, this)
			}]
		});
		
		this.defectFieldPicker = Ext.create('DefectFieldComboBox', {
			model: 'Defect',
			multiSelect: true
		});
		
		this.defectFieldPickerContainer = Ext.create('Ext.Container', {
			items: [this.defectFieldPicker ]
		});
		
		this.add( this.defectFieldPickerContainer );
		this.add( this.defectStatePickerContainer );
		this.add( runQueryButton );
    },
	
    _afterChartConfigBuilt: function (success, chartConfig) {
        this._removeChartComponent();
        if (success){
            this.add({
                id: 'chartCmp',
                xtype: 'highchart',<commit_msg>dynamically add filters<commit_after>Ext.define('BurnChartApp', {
    extend:'Rally.app.App',
    mixins: {
        messageable: 'Rally.Messageable'
    },
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    appName:'Burn Chart',
    cls:'burnchart',

    launch: function () {
        this.startTime = '2012-03-01T00:00:00Z';
        this.chartQuery = {
            find:{
                _Type:'Defect',
                _ValidFrom: {
                    $gte: this.startTime
                }
            }
        };
		
        this.chartConfigBuilder = Ext.create('Rally.app.analytics.BurnChartBuilder');
		
		this.filterContainer = Ext.create('Ext.Container', {
			layout: 'vbox'
		});
				
		this.defectStatePicker = Ext.create('Rally.ui.AttributeComboBox', {
				model: 'Defect',
				field: 'State',
				fieldLabel: 'State',
				multiSelect: true
			});
		
		this.defectStatePickerContainer = Ext.create('Ext.Container', {
			items: [this.defectStatePicker]
		});
		
		this.defectFieldPicker = Ext.create('DefectFieldComboBox', {
			model: 'Defect',
			fieldLabel: 'Custom Filters',
			multiSelect: true,
			listeners:{
				select: Ext.bind(this._defectFieldSelectionChanged, this)
			}
		});
		
		this.defectFieldPickerContainer = Ext.create('Ext.Container', {
			items: [this.defectFieldPicker ]
		});
		
		this.customFilterContainer = Ext.create('Ext.Container', {
			items: [],
			layout: 'fit'
		});
		
		var runQueryButton = Ext.create('Ext.Container', {
			items: [{
				xtype: 'rallybutton',
				text: 'Build Chart',
				handler: Ext.bind(this._refreshChart, this)
			}]
		});
		
		this.filterContainer.add( this.defectStatePickerContainer );
		this.filterContainer.add( this.defectFieldPickerContainer );
		this.filterContainer.add( this.customFilterContainer );
		this.filterContainer.add( runQueryButton );
		this.add(this.filterContainer);
		
		this._customFilters = [];
    },
	
	_defectFieldSelectionChanged: function(comboBox, fieldsSelected){
		var newFieldNames = _.map(fieldsSelected, function(field){
			return field.data.name;
		});
		
		var added = _.difference(newFieldNames, this._customFilters);
		var removed = _.difference(this._customFilters, newFieldNames);
		
		for (var i in added) {
			console.log('Added: ' + added[i]);
			var newFilter = Ext.create('Rally.ui.AttributeComboBox', {
				id: added[i],
				model: 'Defect',
				field: added[i],
				fieldLabel: added[i],
				multiSelect: true
			});
			this.customFilterContainer.add(newFilter);
		}
		for (var i in removed) {
			console.log('Removed: ' + removed[i]);
		}
		
		this.customFilterContainer.doLayout();
		
		this._customFilters = newFieldNames;
	},
	
	_afterChartConfigBuilt: function (success, chartConfig) {
        this._removeChartComponent();
        if (success){
            this.add({
                id: 'chartCmp',
                xtype: 'highchart',
{'fraction_non_alphanumeric': 0.13793869391381608, 'fraction_numerical': 0.006219458018658374, 'mean_word_length': 2.6226870474658086, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1906997', 'n_tokens_mistral': 1627, 'n_tokens_neox': 1376, 'n_words': 225}