source: branches/OaaS/HeuristicLab.Services.Optimization.Web/Content/experiment.view.js @ 9311

// ================ VIEWS =======================
var ExperimentTreeView = Backbone.View.extend({
    renderTree: function (model) {
        var jsonModel = model.toJSON();
        var self = this;
        this.tree = $('<div />').dynatree({
            children: [jsonModel],
            autoExpandMS: 750,
            onActivate: function (node) {
                // if we are able to remove this node from the tree, enable the remove button.
                if (node && node.parent.parent != null) {
                    $('.remove-button', this.$el).removeAttr("disabled");
                } else if (node) {
                    $('.remove-button', this.$el).attr("disabled", "disabled");
                }

                var modelNode = ExperimentNode.lookup(node.data.key);
                if (modelNode && !modelNode.get('isExperiment')) {
                    $('.variate-button', this.$el).removeAttr("disabled");
                } else {
                    $('.variate-button', this.$el).attr("disabled", "disabled");
                }
            },
            dnd: {
                onDragStart: function (node) {
                    return node.parent.parent != null;
                },
                onDragEnter: function (node, sourceNode) {
                    return true;
                },
                onDragOver: function (node, sourceNode, hitMode) {
                    return node.data.title !== "Experiment" || hitMode === "over";
                },
                onDrop: function (node, sourceNode, hitMode, ui, draggable) {
                    if (hitMode !== 'over')
                        return;
                    var modelNode = ExperimentNode.lookup(node.data.key);
                    if (sourceNode) {
                        var sourceModelNode = ExperimentNode.lookup(sourceNode.data.key);
                        sourceNode.move(node, hitMode);
                        // move node into the modelNode
                        sourceModelNode.moveNode(modelNode);
                    }
                    else {
                        var elem = $(draggable.element[0]);
                        var newNode = { nodeId: elem.attr('id'), isExperiment: elem.attr('data-isExperiment') === 'true', title: elem.attr('data-name'), key: ExperimentNode.nextGlobalKey() };
                        if (hitMode == "over") {
                            node.addChild(newNode);
                            node.expand(true);
                            // update the data model
                            newNode = modelNode.addNode(newNode);
                            self.trigger('node-added', newNode);
                        }
                    }
                    self.trigger('structure-changed', modelNode);
                }
            }
        });
        this.tree.dynatree("getRoot").visit(function (node) {
            node.expand(true);
        });
    },
    initialize: function (spec) {
        this.renderTree(spec.model);
    },
    events: {
        'click .remove-button': 'doRemove',
        'click .variate-button': 'doVariate'
    },
    render: function () {
        this.$el.empty();
        this.renderTree(this.model);
        var content = $(_.template($('#stepwizard_template').html(), {}));
        this.tree.appendTo(this.$el);
        content.appendTo(this.$el);
    },
    doRemove: function () {
        var node = this.tree.dynatree('getActiveNode');
        if (node && node.parent.parent != null) {
            var nxt = node.getNextSibling();
            if (nxt == null)
                nxt = node.getPrevSibling();
            if (nxt == null)
                nxt = node.getParent();
            node.remove();
            ExperimentNode.lookup(node.data.key).remove();
            if (nxt) {
                this.tree.dynatree("getTree").activateKey(nxt.data.key);
            }
        }
        this.trigger('structure-changed', node);
    },
    doVariate: function () {
        var node = this.tree.dynatree('getActiveNode');
        var modelNode = ExperimentNode.lookup(node.data.key);
        this.trigger('variation-request', {
            parentNode: node.parent,
            model: modelNode
        });
    }
});

var ExperimentDetailsTreeView = Backbone.View.extend({
  render: function () {
    var jsonModel = this.model.toJSON();
    var self = this;
    var tree = $('<div />').dynatree({
      children: [jsonModel],
      autoExpandMS: 750,
      onActivate: function (node) {
        // if we click a node, simply open a dialog to enter it's parameters
        self.trigger('node-clicked', node);
      }
    });

    this.$el.empty();
    tree.appendTo(this.$el);
    tree.dynatree("getRoot").visit(function (node) {
        node.expand(true);
    });
  }
});

var DraggableGroup = Backbone.View.extend({
    render: function () {
        var self = this;
        var div = $('<div />');

        for (var i = 0; i < this.model.length; i++) {
            new DraggableView({ model: this.model.models[i], el: div }).render();
        }

        this.$el.empty();
        div.appendTo(this.$el);
    }
});


var DraggableView = Backbone.View.extend({
  render: function () {
    var late = _.template($("#draggable_template").html(), this.model.attributes);    
    $(late).draggable({
      revert: true,
      connectToDynatree: true,
      cursorAt: { top: -5, left: -5 },
      helper: "clone"
    }).appendTo(this.$el);
  }
});

var SelectableGroup = Backbone.View.extend({
    render: function () {
        var self = this;
        var div = $('<div />');
        for (var i = 0; i < this.model.length; i++) {
            new SelectableView({ model: this.model.models[i], el: div }).render();
        }
        this.$el.empty();
        div.selectable({
            filter: 'div',
            selected: function (event, ui) {
                self.selected(event, ui);
            }
        }).appendTo(this.$el);
    },
    selected: function (event, ui) {
        var nodeId = $(ui.selected).attr('id');
        this.trigger('node-selected', nodeId);
    }
});

var SelectableView = Backbone.View.extend({
    render: function () {
        var late = _.template($("#draggable_template").html(), this.model.attributes);
        $(late).appendTo(this.$el);
    }
});

var StepWizardView = Backbone.View.extend({
    render: function () {
        var self = this;
        this.$el.smartWizard({
            onLeaveStep: function (step) {
                var stepNum = parseInt(step.attr("rel"));
                return self.validateStep(stepNum);
            },
            onShowStep: function (step) {
                var stepNum = parseInt(step.attr("rel"));
                return self.showStep(stepNum);
            },
            onFinish: function () {
                self.trigger('experiment-finished');
            }
        });
    },
    validateStep: function (stepNumber) {
        var validationModel = {
            stepNumber: stepNumber,
            succeeded: true
        };
        this.trigger('step-validated', validationModel);
        return validationModel.succeeded;
    },
    showStep: function (stepNumber) {
        this.trigger('step-shown', stepNumber);
        return true;
    }
});

var ParameterWizard = Backbone.View.extend({
  createWizard: function (steps) {
    // use template instead of jquery?!
    var newWizard = $('<div />').addClass('wizard swMain');
    var stepMenu = $('<ul />');
    var prefix = name + '_';
    for (var i = 0; i < steps.length; i++) {
      var step = steps[i];
      var a = $('<a></a>', { href: '#' + prefix + (i + 1) });
      $('<label />').addClass("stepNumber").text((i + 1)).appendTo(a);
      $('<span />').addClass("stepDesc").html(step.heading + '<br /><small>' + step.description + '</small>').appendTo(a);
      var li = $('<li />').append(a);
      li.appendTo(stepMenu);
    }
    stepMenu.appendTo(newWizard);
    for (var i = 0; i < steps.length; i++) {
      var div = $('<div />', { id: prefix + (i + 1) });
      if (steps[i].content && steps[i].content != null)
        div.append(steps[i].content);
      div.appendTo(newWizard);
    }
    return newWizard;
  },
  render: function () {
    var self = this;
    this.$el.empty();
    var data = this.model.get('data');

    var hasProblemParameters = typeof data.ProblemParameters !== 'undefined';
    var dialog = $('<div />');
    var algoDiv = $('<div />');
    var problemDiv = $('<div />');

    for (var i = 0; i < data.AlgorithmParameters.length; i++) {
      var parameterView = new ParameterEditableView({ model: data.AlgorithmParameters[i] });
      // render to dialog
      parameterView.render();
      parameterView.$el.appendTo(algoDiv);
    }

    if (hasProblemParameters) {
      var problemParameters = data.ProblemParameters;
      for (var i = 0; i < problemParameters.length; i++) {
        var parameterView = new ParameterEditableView({ model: problemParameters[i] });
        // render to dialog
        parameterView.render();
        parameterView.$el.appendTo(problemDiv);
      }
    }

    var newWizard =
        hasProblemParameters ?
          this.createWizard([
            { heading: "Algorithm Parameters", description: "Adjust algorithm parameters", content: algoDiv },
            { heading: "Problem Parameters", description: "Adjust problem parameters", content: problemDiv }
          ]) :
          this.createWizard([
            { heading: "Algorithm Parameters", description: "Adjust algorithm parameters", content: algoDiv }
          ]);

    newWizard.appendTo(this.$el);
    newWizard.smartWizard({
      onFinish: function () {
        self.trigger('parameters-finished');
      }
    });
  }
});

var ParameterEditableView = Backbone.View.extend({
    events: {
        'change': 'valueChanged'
    },
    render: function () {
        var mapper = new DatatypeMapper();
        var content = $(_.template($('#parameter_template').html(), this.model));
        mapper.mapHtml(this.model).appendTo($('.rightEntry', content));
        content.appendTo(this.$el);
    },
    valueChanged: function (param) {
        var value = $(param.target).val();
        if (!isNaN(value))
            value = parseFloat(value);
        var name = $(param.target).attr("name");
        // normally a controller would do this, just for once, let the view update the model
        var splitted = name.split("_");
        if (splitted.length == 1) {
            this.model.Value = value;
        } else if (splitted.length == 2) {
            this.model.Value[parseInt(splitted[1])] = value;
        } else if (splitted.length == 3) {
            this.model.Value[parseInt(splitted[1])][parseInt(splitted[2])] = value;
        }
    }
});


var LoadingDialog = Backbone.View.extend({
    initialize: function () {
        this.reset();
    },
    render: function () {
        var self = this;
        this.$el.empty();
        var dialog = $('<div />');
        this.content.appendTo(dialog);
        dialog.appendTo(this.$el);
        this.$el.dialog({
            autoOpen: true
        });
    },
    text: function (txt) {
        $('p', this.$el).text(txt);
    },
    setLoading: function(isLoading) {
      if (isLoading)
        $('img', this.$el).show();
      else
        $('img', this.$el).hide();
    },
    reset: function () {
        this.content = $(_.template($('#loading_template').html(), {}));
    },
    setContent: function (el) {
        this.content = el;
    },
    close: function () {
        this.$el.dialog("close");
    }
});


var ParameterDialog = Backbone.View.extend({
  render: function () {
    var self = this;

    this.$el.empty();
    var data = this.model.get('data');

    var hasProblemParameters = typeof data.ProblemParameters !== 'undefined';
    var dialog = $('<div />');

    var parameterWizard = new ParameterWizard({ model: this.model, el: dialog });
    parameterWizard.render();
    this.listenTo(parameterWizard, 'parameters-finished', function () {
      self.trigger('parameters-finished');
    });
    dialog.appendTo(this.$el);
    this.$el.dialog({
      autoOpen: true,
      width: 1024,
      height: 768
    });
  },
  close: function () {
    this.$el.dialog("close");
  }
});

var ExperimentDetailsView = Backbone.View.extend({
    events: {
        'change': 'valueChanged'
    },
    valueChanged: function (param) {
        var value = $(param.target).val();
        if (!isNaN(value))
            value = parseFloat(value);
        var name = $(param.target).attr("name");
        if (name == 'Name')
            this.model.set({ title: value });
        else if (name == 'RunImmediately')
            this.model.set({ run: $(param.target).is(':checked') });
        else if (name == 'Repititions')
            this.model.set({ repititions: value });
        else if (name == 'Group')
            this.model.set({ group: value });

        if (this.model.get('run')) {
            $('input[name="Repititions"]', this.$el).removeAttr('disabled');
            $('input[name="Group"]', this.$el).removeAttr('disabled');
        } else {
            $('input[name="Repititions"]', this.$el).attr('disabled', 'disabled');
            $('input[name="Group"]', this.$el).attr('disabled', 'disabled');
        }
    },
    render: function () {
        $('input[name="Name"]', this.$el).val(this.model.get('title'));
        $('input[name="RunImmediately"]', this.$el).attr('checked', this.model.get('run'));
        $('input[name="Repititions"]', this.$el).val(this.model.get('repititions'));
        $('input[name="Group"]', this.$el).val(this.model.get('group'));
    }
});

var ValidationHintsView = Backbone.View.extend({
    render: function () {
        var template = _.template($('#validationhints_template').html(), this.model);
        $(template).dialog({
            resizable: false,
            modal: true,
            buttons: {
                "OK": function () {
                    $(this).dialog("close");
                }
            }
        });
    }
});

// ========== Variation Dialog Views ============

var VariationDialog = Backbone.View.extend({
    initialize: function (spec) {

    },
    events: {
        'change': 'entrySelected'
    },
    render: function () {
        var self = this;
        var dialog = $(_.template($('#variationdialog_template').html(), {}));

        var content = $('select[class="variationDialogContent"]', dialog);
        var data = this.model.get('data');
        for (var i = 0; i < data.AlgorithmParameters.length; i++) {
            data.AlgorithmParameters[i].Index = i;
            var entry = new VariationEntryView({ model: data.AlgorithmParameters[i], el: content });
            entry.render();
        }

        this.details = $('div[class="variationDetails"]', dialog);
        this.activateButton = $('input[name="active"]', dialog);
        this.activateButton.change(function (evt) {
            var checked = $(evt.target).is(':checked');
            if (self.selectedModel && self.selectedModel != null) {
                self.selectedModel.Active = checked;
            }
        });
        dialog.dialog({
            height: 300,
            buttons: {
                "Abort": function () {
                    $(this).dialog("close");
                },
                "OK": function () {
                    self.generateVariations();
                    $(this).dialog("close");
                }
            }
        });

        content.change(function (evt) {
            var optionSelected = $("option:selected", this);
            var model = self.model.get('data').AlgorithmParameters[parseInt($(optionSelected).attr('data-index'))]
            self.entrySelected(model);
        });

        this.variationDetails = new VariationContentView({ el: this.details });
        var model = this.model.get('data').AlgorithmParameters[0];
        this.entrySelected(model);
    },
    entrySelected: function (model) {
        this.selectedModel = model;
        if (model.Active)
            this.activateButton.attr('checked', 'checked');
        else
            this.activateButton.removeAttr('checked');
        this.variationDetails.model = model;
        this.details.empty();
        this.variationDetails.render();
    },
    generateVariations: function () {
        this.solutions = [];
        this.exhaust(0, []);
        this.trigger('variations-generated', this.solutions);
    },
    exhaust: function (index, element) {
        if (index == this.model.get('data').AlgorithmParameters.length) {
            // we found a solution! store it by creating a deep copy
            this.solutions.push($.extend(true, [], element));
            return;
        }

        var currentParameter = this.model.get('data').AlgorithmParameters[index];
        if (currentParameter.Active && currentParameter.Generated) {
            for (var i = 0; i < currentParameter.Generated.length; i++) {
                element[index] = {
                    Name: currentParameter.Name,
                    Value: currentParameter.Generated[i]
                };
                if (currentParameter.Options) {
                    element[index].Options = currentParameter.Options;
                }
                this.exhaust(index + 1, element);
            }
        } else {
            element[index] = {
                Name: currentParameter.Name,
                Value: currentParameter.Value
            };
            if (currentParameter.Options) {
                element[index].Options = currentParameter.Options;
            }
            this.exhaust(index + 1, element);
        }
    }
});

var TableEditView = Backbone.View.extend({
    events: {
        'change': 'valueChanged',
        'click button[data-operation="Add"]': 'addClicked',
        'click button[data-operation="Remove"]': 'removeClicked'
    },
    render: function () {
        this.$el.empty();
        // http: //stackoverflow.com/questions/8749236/create-table-with-jquery-append
        var table = $('<table></table>').addClass('editableTable');

        // determine dimensions
        var rows = this.model.length;
        var columns = 1;
        if ($.isArray(this.model[0])) {
            columns = this.model[0].length;
        }

        // create head elements
        var head = $('<thead></thead>');
        var headerRow = $('<tr></tr>');
        headerRow.appendTo(head);
        for (var i = 0; i < columns; i++) {
            $('<td />').text((i + 1) + '. Column').appendTo(headerRow);
        }
        head.appendTo(table);

        // create body
        var body = $('<tbody></tbody>');

        for (var i = 0; i < rows; i++) {
            var row = $('<tr></tr>');
            for (var j = 0; j < columns; j++) {
                var rowContent = this.model[i];
                var columnEntry = $.isArray(rowContent) ? rowContent[j] : rowContent;
                var col = $('<td></td>');
                $('<input type="text" name="' + i + '_' + j + '" />').val(columnEntry).appendTo(col);
                col.appendTo(row);
            }
            if (this.options.editable) {
                $('<button data-operation="Add" name="' + i + '" />').val(columnEntry).text('+').appendTo(col);
                $('<button data-operation="Remove" name="' + i + '" />').val(columnEntry).text('-').appendTo(col);
            }
            row.appendTo(body);
        }
        body.appendTo(table);
        table.appendTo(this.$el);
    },
    valueChanged: function (evt) {
        var target = $(evt.target);
        var value = target.val();
        var index = target.getattr('name');
        var splittedName = index.split('_');
        var i = parseInt(splittedName[0]);
        var j = parseInt(splittedName[1]);
        if ($.isArray(this.model[i])) {
            this.model[i][j] = parseFloat(value);
        } else {
            this.model[i] = parseFloat(value);
        }
    },
    addClicked: function (evt) {
        var target = $(evt.target);
        var index = target.attr('name');
        var i = parseInt(index);
        if ($.isArray(this.model[i])) {
            var cpy = [];
            for (var j = 0; j < this.model[i].length; j++) {
                cpy.push(this.model[i][j]);
            }
            this.model.splice(i, 0, cpy);
        } else {
            this.model.splice(i, 0, this.model[i]);
        }
        // render after model changes
        this.render();
    },
    removeClicked: function (evt) {
        var target = $(evt.target);
        var index = target.attr('name');
        var i = parseInt(index);
        this.model.splice(i, 1);
        // render after model changes
        this.render();
    }
});

var OptionSelectionView = Backbone.View.extend({
    events: {
        'change': 'checked'
    },
    render: function () {
        this.$el.empty();

        for (var i = 0; i < this.model.length; i++) {
            $(_.template($('#checkbox_template').html(), { name: this.model[i], text: this.model[i] })).appendTo(this.$el);
        }
    },
    checked: function (evt) {
        var checked = $(evt.target).is(':checked');
        var name = $(evt.target).attr('name')
        this.trigger('changed', { name: name, checked: checked });
    }
});

var VariationContentView = Backbone.View.extend({
    render: function () {
        var self = this;
        if (this.model.Value === 'false' || this.model.Value === 'true' ||
            this.model.Value === true || this.model.Value === false) {
            $(_.template($('#variation_boolean_template').html(), {})).appendTo(this.$el);
            this.model.Generated = [false, true];
        }
        else if (!isNaN(this.model.Value)) {
            var elem = $(_.template($('#variation_number_template').html(), {}));
            elem.appendTo(this.$el)
            $('input[name="generate"]', elem).click(function (evt) { self.openGenerator(evt); });
            if (!this.model.Generated) {
                this.model.Generated = [0, 1, 2];
            }
            var tev = new TableEditView({ model: this.model.Generated, el: $('div div', this.$el), editable: true });
            tev.render();
        }
        else if (this.model.Options) {
            var osv = new OptionSelectionView({ model: this.model.Options, el: this.$el });
            this.listenTo(osv, 'changed', function (evt) {
                self.selectionChanged(evt);
            });
            if (!this.model.Generated)
                this.model.Generated = [];
            osv.render();
            for (var i = 0; i < this.model.Generated.length; i++) {
                $('input[name="' + this.model.Generated[i] + '"]', this.$el).attr('checked', 'checked');
            }
        }
    },
    openGenerator: function (evt) {
        var self = this;
        var generator = new GeneratorDialog();
        this.listenTo(generator, 'success', function (data) {
            self.doGenerate(data);
        });
        generator.render();
    },
    doGenerate: function (data) {
        if (data.minimum > data.maximum) {
            var tmp = data.minimum;
            data.minimum = data.maximum;
            data.maximum = tmp;
        }
        if (data.step < 0)
            data.step *= -1;
        if (data.step == 0)
            data.step = 1;
        this.model.Generated = _.range(data.minimum, data.maximum + 1, data.step);
        var tev = new TableEditView({ model: this.model.Generated, el: $('div div', this.$el), editable: true });
        tev.render();
    },
    selectionChanged: function (evt) {
        if (!evt.checked) {
            this.model.Generated = _.without(this.model.Generated, evt.name);
        } else if (_.indexOf(this.model.Generated, evt.name) == -1) {
            this.model.Generated.push(evt.name);
        }
    }
});

var GeneratorDialog = Backbone.View.extend({
    render: function() {
        var self = this;
        var generator = $(_.template($('#variation_generator_template').html(),{}));
        generator.dialog({
            buttons: {
                "Abort": function () {
                    $(this).dialog("close");
                },
                "OK": function () {
                    $(this).dialog("close");
                    self.trigger("success", {
                        minimum: parseInt($('input[name="minimum"]', generator).val()),
                        maximum: parseInt($('input[name="maximum"]', generator).val()),
                        step: parseFloat($('input[name="step"]', generator).val())
                    });
                }
            }
        });
    }
});

var VariationEntryView = Backbone.View.extend({
    render: function () {
        var entryTemplate = _.template($('#variationentry_template').html(), this.model);
        $(entryTemplate).appendTo(this.$el);        
    }
});