import View from 'girder/views/View';
import { AccessType } from 'girder/constants';

import CandelaParametersView from './CandelaParametersView';
import CandelaWidgetTemplate from '../templates/candelaWidget.pug';
import '../stylesheets/candelaWidget.styl';

import candela from 'candela';
import d3 from 'd3';
import datalib from 'datalib';

var CandelaWidget = View.extend({
    events: {
        'change .g-item-candela-component': 'updateComponent'
    },

    initialize: function (settings) {
        this.item = settings.item;
        this.accessLevel = settings.accessLevel;
        this._components = [];
        for (let component in candela.components) {
            if (candela.components.hasOwnProperty(component)) {
                this._components.push(component);
            }
        }

        this.item.on('change', function () {
            this.render();
        }, this);

        this.parametersView = new CandelaParametersView({
            component: candela.components[this.$('.g-item-candela-component').val()],
            parentView: this
        });

        this.render();
    },

    updateComponent: function () {
        this.parametersView.setComponent(candela.components[this.$('.g-item-candela-component').val()]);
    },

    render: function () {
        if (this.accessLevel >= AccessType.READ && this.item.get('name').toLowerCase().endsWith('.csv')) {
            this.$el.html(CandelaWidgetTemplate({
                components: this._components
            }));
            this.parametersView.setElement($('.g-item-candela-parameters'));
            d3.csv('/api/v1/item/' + this.item.get('_id') + '/download', (error, data) => {
                datalib.read(data, {parse: 'auto'});
                let columns = [];
                for (let key in data.__types__) {
                    if (data.__types__.hasOwnProperty(key)) {
                        columns.push(key);
                    }
                }
                this.parametersView.setData(data, columns);
                this.updateComponent();
            });
        } else {
            $('.g-item-candela')
                .remove();
        }
    }
});

export default CandelaWidget;

@@ -288,29 +288,8 @@
 a';%0A
-import d3 from 'd3';%0A
 impo
@@ -1573,9 +1573,14 @@
    d
-3
+atalib
 .csv
@@ -1702,24 +1702,892 @@
 : 'auto'%7D);%0A
+%0A                // Vega has issues with empty-string fields and fields with dots, so rename those.%0A                let rename = %5B%5D;%0A                for (let key in data.__types__) %7B%0A                    if (data.__types__.hasOwnProperty(key)) %7B%0A                        if (key === '') %7B%0A                            rename.push(%5B'', 'id'%5D);%0A                        %7D else if (key.indexOf('.') %3E= 0) %7B%0A                            rename.push(%5Bkey, key.replace(/%5C./g, '_')%5D);%0A                        %7D%0A                    %7D%0A                %7D%0A%0A                rename.forEach(d =%3E %7B%0A                    data.__types__%5Bd%5B1%5D%5D = data.__types__%5Bd%5B0%5D%5D;%0A                    delete data.__types__%5Bd%5B0%5D%5D;%0A                    data.forEach(row =%3E %7B%0A                        row%5Bd%5B1%5D%5D = row%5Bd%5B0%5D%5D;%0A                        delete row%5Bd%5B0%5D%5D;%0A                    %7D);%0A                %7D);%0A%0A
             

Rename empty string fields and fields with dots