<commit_before>$(function () {
    /* `QueryToolbox` is the object responsible for the behaviour of the Toolbox Charts component */
    var QueryToolbox = {
        objects: [],

        current: function () {
            return $('#chart-picker li.active').index();
        },

        /* Add a new chart */
        addChart: function (chartOptions, chartFilters, chartPolicy, chartId, chartTitle) {
            // save previous chart options & filters
            QueryToolbox.saveChartInfo();

            var chartTitle = chartTitle || 'Query ' + ($('#chart-picker li').length + 1);

            // this.chart = $('<iframe />');

            // save
            var obj = {
                'chartId': chartId,
                'tempChartId': chartId,
                'chartTitle': chartTitle
            };
            this.objects.push(obj);

            // add tab
            $('#chart-picker').find('li').removeClass('active');
            $('#chart-picker').append('<li class="active"><a href="#"><span class="chartTitle">' + chartTitle + '</span> <i class="fa fa-times close-tab"></i></a></li>');

            // mark tab as unsaved for new charts
            if (typeof(chartId) === 'undefined') {
                this.tabMarker.currentUnsaved();
            }

            // set chart options (category/value fields) & filters
            if (typeof(chartOptions) === 'undefined') {
                this.initChartOptions(obj);
            } else {
                this.setChartOptions(obj, chartOptions, chartFilters, chartPolicy);
            }

            // show name field
            $('#chart-name').removeClass('hidden').find('input').val(chartTitle);

            // show graph
            // $('#chartdiv')
            //     .empty()
            //     .append(this.chart);
        },

        setChartOptions: function (obj, chartOptions, chartFilters, chartPolicy) {
            obj.chartOptions = chartOptions;
            obj.$chartFilters = $(chartFilters);
            obj.chartPolicy = chartPolicy;

            this.renderChartOptions(obj);

            // render default graph
            this.fetchChartData();
        },

        /* Load default controls for this chart type/format */
        initChartOptions: function (obj) {
            var that = this;
            $.ajax({
                url: '/queries/simplified/config/',
                success: function (chartPolicy) {
                    var chartOptions = {
                        group: {
                            metric: '' // chartPolicy.categories[0].value
                        },
                        fields: []
                    };

                    /* for (var j = 0; j < chartPolicy.incrStep; j++) {
                        chartOptions.fields.push({
                            metric: chartPolicy.valueFields[0].value
                        })
                    } */

                    that.setChartOptions(obj, chartOptions, '', chartPolicy)
                }
            })
        },

        /* Refresh chart value fields */
        refreshValueFields: function () {
            if (typeof(this.current()) === 'undefined') {
                return
            }

            var obj = this.objects[this.current()];

            // fetch updated options from server
            var that = this;

            $.ajax({
                url: '/queries/simplified/config/',
                success: function (chartPolicy) {
                    obj.chartPolicy.valueFields = chartPolicy.valueFields;

                    // update the UI
                    $.each($('select[name="value_field"]'), function(idx, select) {
                        var $select = $(select),
                            val = $select.val();

                        $select.find('> option[value!=""]').remove();
                        $.each(obj.chartPolicy.valueFields, function(idx, valueField) {
                            var $option = $('<option />');

                            $option.attr('value', valueField.value);
                            $option.text(valueField.title);
                            $select.append($option)
                        });

                        $select.val(val).trigger('change.select2');
                    })
                }
            });
        },

        /* Creates an option (group or metric) fieldset */
        renderChartOptionsField: function (config) {
            // create select
            var $fieldSelect = $('<select />')
                .attr('name', config.name);

            if (config.name === 'category') {
                $fieldSelect.attr('multiple', 'multiple');
            }
            if (config.name === 'orderby') {
                $fieldSelect.attr('multiple', 'multiple');
            }

            if (config.id) {
                $fieldSelect.attr('id', config.id);
            }

            if (typeof(config.aggregate) !== 'undefined') {
                var $aggregateSelect = $('<select name="field_aggregate" />');
                $.each(config.aggregates, function(idx, aggregate) {
                    // create aggregate option
                    var $option = $('<option />').text(aggregate.title).attr('value', aggregate.value);
                    if (config.aggregate === aggregate.value) {
                        $option.attr('selected', 'selected');
                    }

                    // add to aggregate select
                    $aggregateSelect.append($option);
                });

                // set initial aggregate
                $aggregateSelect.val(config.aggregate);
                $fieldSelect.attr('data-aggregate', config.aggregate);
                $fieldSelect.data('aggregate', config.aggregate);
            }

            if (config.emptyChoice) {
                $fieldSelect.append('<option value="">No value</option>');
                $fieldSelect.append('<option value="">No value</option>');
            }
            var $fieldInputShown;
            $.each(config.choices, function (idx, choice) {
                var $option = $('<option />');
                if(config.value === choice.value) { // john's addition to have only the selected variable as option
                    $option.attr('value', choice.value);
                    $option.text(choice.title+ ' (' + config.unit + ')');
                    if (typeof(choice.type) !== 'undefined') {
                        $option.data('type', choice.type);
                        $option.attr('data-type', choice.type);
                    }
                    if (typeof(choice.forVariable) !== 'undefined') {
                        $option.data('forvariable', choice.forVariable);
                        $option.attr('data-forvariable', choice.forVariable);
                    }

                    $fieldSelect.append($option);
                }
                // $fieldSelect.replaceWith($('<input class="form-control"  style="width: 100%; height: 100%;" value="'+$fieldSelect.val()+'"/>'));
                $fieldInputShown = $('<input class="form-control" readonly style="width: 100%; height: 100%;"/>')
                if (typeof(config.aggregate) !== 'undefined') {$fieldInputShown.attr('data-aggregate', config.aggregate);$fieldInputShown.data('aggregate', config.aggregate);}
                $fieldInputShown.attr('data-type', $option.attr('data-type'));
                $fieldInputShown.attr('data-forvariable', $option.attr('data-forvariable'));
                $fieldInputShown.val(choice.title+ ' (' + config.unit + ')');

                var $fieldInput = $('<input class="hidden" style="width: 100%; height: 100%;"/>').attr('name', config.name);
                if (config.id) {$fieldInput.attr('id', config.id);}
                if (typeof(config.aggregate) !== 'undefined') {$fieldInput.attr('data-aggregate', config.aggregate);$fieldInput.data('aggregate', config.aggregate);}
                $fieldInput.attr('data-type', $option.attr('data-type'));
                $fieldInput.attr('data-forvariable', $option.attr('data-forvariable'));

                $fieldSelect = $fieldInput;
            });

            var inlineLabel = '';
            if (config.name === 'category') {
                inlineLabel = config.label;
            }
            if (config.name === 'orderby') {
                inlineLabel = config.label;
            }

            // set field value
            $fieldSelect.val(config.value);
            var $fieldset = $('<div class="fieldset">' + (inlineLabel ? '' : config.label + '<br />') + '<div class="row" style="margin: 0"><div class="col-xs-3 col-prefix" style="' + (inlineLabel ? 'padding: 0' : '') +'">' + inlineLabel + '</div><div class="col-xs-8 col-main"></div><div class="col-xs-1 col-suffix"></div></div></div>');
            $fieldset.find('.col-main').append($fieldSelect);
            $fieldset.find('.col-main').append($fieldInputShown);

            if (config.xy) {
                $fieldset.addClass('xy')
            }

             if (typeof(config.aggregate) !== 'undefined') {
                $fieldset.find('.col-prefix').append($aggregateSelect);
            }
<commit_msg>fixed bug in variable selection in query designer<commit_after>$(function () {
    /* `QueryToolbox` is the object responsible for the behaviour of the Toolbox Charts component */
    var QueryToolbox = {
        objects: [],

        current: function () {
            return $('#chart-picker li.active').index();
        },

        /* Add a new chart */
        addChart: function (chartOptions, chartFilters, chartPolicy, chartId, chartTitle) {
            // save previous chart options & filters
            QueryToolbox.saveChartInfo();

            var chartTitle = chartTitle || 'Query ' + ($('#chart-picker li').length + 1);

            // this.chart = $('<iframe />');

            // save
            var obj = {
                'chartId': chartId,
                'tempChartId': chartId,
                'chartTitle': chartTitle
            };
            this.objects.push(obj);

            // add tab
            $('#chart-picker').find('li').removeClass('active');
            $('#chart-picker').append('<li class="active"><a href="#"><span class="chartTitle">' + chartTitle + '</span> <i class="fa fa-times close-tab"></i></a></li>');

            // mark tab as unsaved for new charts
            if (typeof(chartId) === 'undefined') {
                this.tabMarker.currentUnsaved();
            }

            // set chart options (category/value fields) & filters
            if (typeof(chartOptions) === 'undefined') {
                this.initChartOptions(obj);
            } else {
                this.setChartOptions(obj, chartOptions, chartFilters, chartPolicy);
            }

            // show name field
            $('#chart-name').removeClass('hidden').find('input').val(chartTitle);

            // show graph
            // $('#chartdiv')
            //     .empty()
            //     .append(this.chart);
        },

        setChartOptions: function (obj, chartOptions, chartFilters, chartPolicy) {
            obj.chartOptions = chartOptions;
            obj.$chartFilters = $(chartFilters);
            obj.chartPolicy = chartPolicy;

            this.renderChartOptions(obj);

            // render default graph
            this.fetchChartData();
        },

        /* Load default controls for this chart type/format */
        initChartOptions: function (obj) {
            var that = this;
            $.ajax({
                url: '/queries/simplified/config/',
                success: function (chartPolicy) {
                    var chartOptions = {
                        group: {
                            metric: '' // chartPolicy.categories[0].value
                        },
                        fields: []
                    };

                    /* for (var j = 0; j < chartPolicy.incrStep; j++) {
                        chartOptions.fields.push({
                            metric: chartPolicy.valueFields[0].value
                        })
                    } */

                    that.setChartOptions(obj, chartOptions, '', chartPolicy)
                }
            })
        },

        /* Refresh chart value fields */
        refreshValueFields: function () {
            if (typeof(this.current()) === 'undefined') {
                return
            }

            var obj = this.objects[this.current()];

            // fetch updated options from server
            var that = this;

            $.ajax({
                url: '/queries/simplified/config/',
                success: function (chartPolicy) {
                    obj.chartPolicy.valueFields = chartPolicy.valueFields;

                    // update the UI
                    $.each($('select[name="value_field"]'), function(idx, select) {
                        var $select = $(select),
                            val = $select.val();

                        $select.find('> option[value!=""]').remove();
                        $.each(obj.chartPolicy.valueFields, function(idx, valueField) {
                            var $option = $('<option />');

                            $option.attr('value', valueField.value);
                            $option.text(valueField.title);
                            $select.append($option)
                        });

                        $select.val(val).trigger('change.select2');
                    })
                }
            });
        },

        /* Creates an option (group or metric) fieldset */
        renderChartOptionsField: function (config) {
            // create select
            var $fieldSelect = $('<select />')
                .attr('name', config.name);

            if (config.name === 'category') {
                $fieldSelect.attr('multiple', 'multiple');
            }
            if (config.name === 'orderby') {
                $fieldSelect.attr('multiple', 'multiple');
            }

            if (config.id) {
                $fieldSelect.attr('id', config.id);
            }

            if (typeof(config.aggregate) !== 'undefined') {
                var $aggregateSelect = $('<select name="field_aggregate" />');
                $.each(config.aggregates, function(idx, aggregate) {
                    // create aggregate option
                    var $option = $('<option />').text(aggregate.title).attr('value', aggregate.value);
                    if (config.aggregate === aggregate.value) {
                        $option.attr('selected', 'selected');
                    }

                    // add to aggregate select
                    $aggregateSelect.append($option);
                });

                // set initial aggregate
                $aggregateSelect.val(config.aggregate);
                $fieldSelect.attr('data-aggregate', config.aggregate);
                $fieldSelect.data('aggregate', config.aggregate);
            }

            if (config.emptyChoice) {
                $fieldSelect.append('<option value="">No value</option>');
                $fieldSelect.append('<option value="">No value</option>');
            }
            var $fieldInputShown;
            $.each(config.choices, function (idx, choice) {
                var $option = $('<option />');
                if(config.value === choice.value) { // john's addition to have only the selected variable as option
                    $option.attr('value', choice.value);
                    $option.text(choice.title + ' (' + config.unit + ')');
                    if (typeof(choice.type) !== 'undefined') {
                        $option.data('type', choice.type);
                        $option.attr('data-type', choice.type);
                    }
                    if (typeof(choice.forVariable) !== 'undefined') {
                        $option.data('forvariable', choice.forVariable);
                        $option.attr('data-forvariable', choice.forVariable);
                    }

                    $fieldSelect.append($option);

                    // $fieldSelect.replaceWith($('<input class="form-control"  style="width: 100%; height: 100%;" value="'+$fieldSelect.val()+'"/>'));
                    $fieldInputShown = $('<input class="form-control" readonly style="width: 100%; height: 100%;"/>')
                    if (typeof(config.aggregate) !== 'undefined') {
                        $fieldInputShown.attr('data-aggregate', config.aggregate);
                        $fieldInputShown.data('aggregate', config.aggregate);
                    }
                    $fieldInputShown.attr('data-type', $option.attr('data-type'));
                    $fieldInputShown.attr('data-forvariable', $option.attr('data-forvariable'));
                    $fieldInputShown.val(choice.title + ' (' + config.unit + ')');

                    var $fieldInput = $('<input class="hidden" style="width: 100%; height: 100%;"/>').attr('name', config.name);
                    if (config.id) {
                        $fieldInput.attr('id', config.id);
                    }
                    if (typeof(config.aggregate) !== 'undefined') {
                        $fieldInput.attr('data-aggregate', config.aggregate);
                        $fieldInput.data('aggregate', config.aggregate);
                    }
                    $fieldInput.attr('data-type', $option.attr('data-type'));
                    $fieldInput.attr('data-forvariable', $option.attr('data-forvariable'));

                    $fieldSelect = $fieldInput;
                }
            });

            var inlineLabel = '';
            if (config.name === 'category') {
                inlineLabel = config.label;
            }
            if (config.name === 'orderby') {
                inlineLabel = config.label;
            }

            // set field value
            $fieldSelect.val(config.value);
            var $fieldset = $('<div class="fieldset">' + (inlineLabel ? '' : config.label + '<br />') + '<div class="row" style="margin: 0"><div class="col-xs-3 col-prefix" style="' + (inlineLabel ? 'padding: 0' : '') +'">' + inlineLabel + '</div><div class="col-xs-8 col-main"></div><div class="col-xs-1 col-suffix"></div></div></div>');
            $fieldset.find('.col-main').append($fieldSelect);
            $fieldset.find('.col-main').append($fieldInputShown);

            if (config.xy) {
                $fieldset.addClass('xy')
            }

             if (typeof(config.aggregate) !== 'undefined') {
                $fieldset.find('.col-prefix').append($aggregateSelect);
            }

{'fraction_non_alphanumeric': 0.1479929066580687, 'fraction_numerical': 0.003009296576925144, 'mean_word_length': 1.4763805721889554, 'pattern_counts': {'":': 0, '<': 69, '<?xml version=': 0, '>': 69, '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': '3434447', 'n_tokens_mistral': 4768, 'n_tokens_neox': 4426, 'n_words': 867}