Free cookie consent management tool by TermsFeed Policy Generator

Ignore:
Timestamp:
04/10/13 13:29:24 (12 years ago)
Author:
fschoepp
Message:

#1888:

  • Added input parameters to the run class. They will be populated by the back-end and returned to the web pages which renders them.
  • Added a ParameterMapper class which converts HL specific model classes to OaaS independent classes. The conversion gets delegated to IParameterHandler which have to be implemented manually and registered for a certain Type before. All parameters which can be converted to IStringConvertible, IStringConvertibleMatrix, IString* will be converted into a OaaS-StringValue instance.
  • Added IParameterHandlers for PathTSPTour and PermutationType (required for TSP).
  • AlgorithmConverter now makes sure that the id of a run is unique. (All runs of a RunList will be shown now.)
  • Web pages are capable of rendering both the results of a run and their input parameters (added a accordion to wrap their content).
  • Renamed "Traveling Salesman Problem" to "Genetic Algorithm - TSP".
  • Changed js-files to render both input and result parameters of a Run.
Location:
branches/OaaS/HeuristicLab.Services.Optimization.Web/Content
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • branches/OaaS/HeuristicLab.Services.Optimization.Web/Content/experiment.view.js

    r9335 r9350  
    824824            var datatableSelect = $('.datatableOptions', ele);
    825825
    826             var names = _.reduce(this.model.models, function (arr, model) {
    827                 return _.union(arr, _.map(model.get('results'), function (elem) { return elem.Name }));
    828             }, []);
    829 
     826            var names = [];
     827            var previouslyFound = { results: {}, params: {} };
     828            _.each(this.model.models, function (model) {
     829                _.each(model.get('results'), function (res) {
     830                    if (!previouslyFound['results'][res.Name]) {
     831                        previouslyFound['results'][res.Name] = true;
     832                        names.push({ name: res.Name, source: 'results' });
     833                    }
     834                });
     835                _.each(model.get('params'), function (res) {
     836                    if (!previouslyFound['params'][res.Name]) {
     837                        previouslyFound['params'][res.Name] = true;
     838                        names.push({ name: res.Name, source: 'params' });
     839                    }
     840                });
     841            });
     842            previouslyFound = {};
     843            this.options.modelMapping = names;
    830844            this.bubbleSelect = $('select[class="bubbleSize"]', ele);
    831845
    832             _.each(names, function (name) {
    833                 var option = $("<option />", { value: name, text: name });
     846            _.each(names, function (entry) {
     847                var option = $("<option />", { value: entry.name, text: entry.name });
    834848                option.clone().appendTo(xAxisSelect);
    835849                option.clone().appendTo(yAxisSelect);
    … …  
    837851                var rowNames = null;
    838852                var foundModel = _.find(self.model.models, function (model) {
    839                     var entry = _.find(model.get('results'), function (entry) { return entry.Name == name && entry.RowNames });
    840                     if (entry)
    841                         rowNames = entry.RowNames;
    842                     return entry && entry.RowNames;
     853                    var e = _.find(model.get(entry.source), function (e) { return e.Name == entry.name && e.RowNames });
     854                    if (e)
     855                        rowNames = e.RowNames;
     856                    return e && e.RowNames;
    843857                });
    844858                if (rowNames) {
    845                     self.options.datatables[name] = rowNames;
    846                     $('<option />', { value: name, text: name }).appendTo(datatableSelect);
     859                    self.options.datatables[entry.name] = rowNames;
     860                    $('<option />', { value: entry.name, text: entry.name }).appendTo(datatableSelect);
    847861                }
    848862            });
    … …  
    852866            this.options.xAxis = this.model.models[0].get('results')[0].Name;
    853867            this.options.yAxis = this.options.xAxis;
     868            this.options.selectedXIndex = 0;
     869            this.options.selectedYIndex = 0;
    854870            this.options.plot = 'Boxplot';
    855871            $('div[class="bubbleSlider"]', ele).slider({
    … …  
    909925        xAxisSelected: function (evt) {
    910926            var target = $(evt.target);
     927            this.options.selectedXIndex = target.prop("selectedIndex");
    911928            this.options.xAxis = target.val();
    912929            this.createPlot();
    … …  
    914931        yAxisSelected: function (evt) {
    915932            var target = $(evt.target);
     933            this.options.selectedYIndex = target.prop("selectedIndex");
    916934            this.options.yAxis = target.val();
    917935            this.createPlot();
    … …  
    967985        createBoxplot: function () {
    968986            var self = this;
    969 
     987            var parameterXSource = this.options.modelMapping[this.options.selectedXIndex].source; // either 'params' or 'results'
     988            var parameterYSource = this.options.modelMapping[this.options.selectedYIndex].source; // either 'params' or 'results'
    970989            // prepare data for boxplot
    971990            var values = {};
    972991            for (var i = 0; i < this.model.models.length; i++) {
    973                 var xlabel = _.find(this.model.models[i].get('results'), function (itm) { return itm.Name == self.options.xAxis });
     992                var xlabel = _.find(this.model.models[i].get(parameterXSource), function (itm) { return itm.Name == self.options.xAxis });
    974993                if (!xlabel)
    975994                    continue;
    976995
    977996                if ($.isArray(xlabel.Value))
    978                     values[xlabel.Name + ' = ' + xlabel.Value[0]] = [];
     997                    values[parameterXSource + '.' + xlabel.Name + ' = ' + xlabel.Value[0]] = [];
    979998                else
    980                     values[xlabel.Name + ' = ' + xlabel.Value] = [];
     999                    values[parameterXSource + '.' + xlabel.Name + ' = ' + xlabel.Value] = [];
    9811000            }
    9821001
    9831002            for (var i = 0; i < this.model.models.length; i++) {
    984                 var xlabel = _.find(this.model.models[i].get('results'), function (itm) { return itm.Name == self.options.xAxis });
    985                 var entry = _.find(this.model.models[i].get('results'), function (itm) { return itm.Name == self.options.yAxis });
     1003                var xlabel = _.find(this.model.models[i].get(parameterXSource), function (itm) { return itm.Name == self.options.xAxis });
     1004                var entry = _.find(this.model.models[i].get(parameterYSource), function (itm) { return itm.Name == self.options.yAxis });
    9861005                if (!xlabel || !entry || !entry.Value)
    9871006                    continue;
    9881007
    989                 var index = xlabel.Name + ' = ' + ($.isArray(xlabel.Value) ? xlabel.Value[0] : xlabel.Value);
     1008                var index = parameterXSource + '.' + xlabel.Name + ' = ' + ($.isArray(xlabel.Value) ? xlabel.Value[0] : xlabel.Value);
    9901009
    9911010                if ($.isArray(entry.Value))
    … …  
    10031022        createBubblechart: function () {
    10041023            var self = this;
    1005 
     1024            var parameterXSource = this.options.modelMapping[this.options.selectedXIndex].source; // either 'params' or 'results'
     1025            var parameterYSource = this.options.modelMapping[this.options.selectedYIndex].source; // either 'params' or 'results'
    10061026            // prepare data for bubble chart
    10071027            var values = [];
    10081028            var autoscaleBubbles = this.bubbleSelect.val() != 'Constant';
    10091029            for (var i = 0; i < this.model.models.length; i++) {
    1010                 var xValue = _.find(this.model.models[i].get('results'), function (itm) { return itm.Name == self.options.xAxis });
    1011                 var yValue = _.find(this.model.models[i].get('results'), function (itm) { return itm.Name == self.options.yAxis });
     1030                var xValue = _.find(this.model.models[i].get(parameterXSource), function (itm) { return itm.Name == self.options.xAxis });
     1031                var yValue = _.find(this.model.models[i].get(parameterYSource), function (itm) { return itm.Name == self.options.yAxis });
    10121032                if (!xValue || !yValue)
    10131033                    continue;
    … …  
    10191039                } else {
    10201040                    var valueProvider = _.find(this.model.models[i].get('results'), function (itm) { return itm.Name == self.bubbleSelect.val(); });
    1021                     if (!valueProvider) {
     1041                    if (!valueProvider)
     1042                        valueProvider = _.find(this.model.models[i].get('params'), function (itm) { return itm.Name == self.bubbleSelect.val(); });
     1043
     1044                    if (!valueProvider) {                       
    10221045                        size = this.options.bubbleSize;
    10231046                    } else {
    … …  
    10551078            for (var i = 0; i < this.model.models.length; i++) {
    10561079                var table = _.find(this.model.models[i].get('results'), function (itm) { return itm.Name == self.options.selectedDatatable });
     1080                if (!table)
     1081                    table = _.find(this.model.models[i].get('params'), function (itm) { return itm.Name == self.options.selectedDatatable });
     1082
    10571083                if (!table)
    10581084                    continue;

  • branches/OaaS/HeuristicLab.Services.Optimization.Web/Content/job.model.js

    r9324 r9350  
    3737        poll: function () {
    3838            var self = this;
    39             this.fetch({ cache: false, update: true, success: function () {
     39            this.fetch({ cache: false, reset: true, success: function () {
    4040                self._poll();
    4141            }

  • branches/OaaS/HeuristicLab.Services.Optimization.Web/Content/job.view.js

    r9335 r9350  
    1616        initialize: function () {
    1717            this.collection.bind('remove', this.render, this);
    18             //this.collection.bind('a', this.render, this);
    1918        },
    2019        render: function () {
    … …  
    8988            rcv.render();
    9089            for (var i = 0; i < this.model.models.length; i++) {
     90                $('<h3></h3>').text(this.model.models[i].get('name')).appendTo(this.$el);
    9191                var rev = new my.ResultEntryView({ model: this.model.models[i], el: this.$el });
    9292                rev.render();
    … …  
    150150        initialize: function () {
    151151            this.plotted = {};
     152            this.plotted['params'] = {};
     153            this.plotted['results'] = {};
    152154        },
    153155        render: function () {
    154156            this.template = _.template($('#runTemplate').html());
    155157            var table = $(this.template(this.model.attributes));
    156             var body = $("tbody", table);
     158            var body = $('tbody[class="results"]', table);
    157159            table.appendTo(this.$el);
     160            // render the results of the model
    158161            var results = this.model.get('results');
    159162            for (var i = 0; i < results.length; i++) {
    160                 var row = $('<tr/>').attr('data-index', i);
    161                 $('<td/>').text(results[i].Name).appendTo(row);
    162                 if ($.isArray(results[i].Value)) {
    163                     var col = $('<td/>').appendTo(row);
    164                     var tevDiv = $('<div/>');
    165                     var plotDiv = $('<div/>').appendTo($('#tmp'));;
    166                     this.plotted[i] = {};
    167                     var tv = new my.TabView({
    168                         model: [
    169                           { name: 'Table', content: tevDiv },
    170                           { name: 'Plot', content: plotDiv },
    171                         ],
    172                         el: col
    173                     });
    174                     this.listenTo(tv, 'tab-activated', this.tabActivated);
    175                     tv.render();
    176 
    177                 }
    178                 else {
    179                     $('<td/>').text(results[i].Value).appendTo(row);
    180                 }
    181                 row.appendTo(body);
    182             }
     163                this.renderModelEntry(results[i], i, body, 'results');
     164            }
     165
     166            var inputs = this.model.get('params');
     167            body = $('tbody[class="inputs"]', table);
     168            for (var i = 0; i < inputs.length; i++) {
     169                this.renderModelEntry(inputs[i], i, body, 'params');
     170            }
     171
     172            var av = new my.AccordionView({el: $(table)});
     173            av.render();
     174        },
     175        renderModelEntry: function(entry, index, body, attribute) {         
     176            var row = $('<tr/>').attr('data-index', index).attr('data-attribute', attribute);
     177            $('<td/>').text(entry.Name).appendTo(row);
     178            if ($.isArray(entry.Value)) {
     179                var col = $('<td/>').appendTo(row);
     180                var tevDiv = $('<div/>');
     181                var plotDiv = $('<div/>').appendTo($('#tmp'));                               
     182                this.plotted[attribute][index] = {};
     183                var tv = new my.TabView({
     184                    model: [
     185                        { name: 'Table', content: tevDiv },
     186                        { name: 'Plot', content: plotDiv },
     187                    ],
     188                    el: col
     189                });
     190                this.listenTo(tv, 'tab-activated', this.tabActivated);
     191                tv.render();
     192            }
     193            else {
     194                $('<td/>').text(entry.Value).appendTo(row);
     195            }
     196            row.appendTo(body);
    183197        },
    184198        tabActivated: function (evt) {
    185199            var index = parseInt(evt.element.parents('tr').attr('data-index'));
    186             if (evt.name == 'Plot' && !this.plotted[index].Plot) {
    187                 this.plotted[index].Plot = true;
     200            var attribute = evt.element.parents('tr').attr('data-attribute');
     201            if (evt.name == 'Plot' && !this.plotted[attribute][index].Plot) {
     202                this.plotted[attribute][index].Plot = true;
    188203                var plotDiv = $('<div/>').appendTo($('#tmp'));
    189                 var pv = new my.PlotView({ model: this.model.get('results')[index], el: plotDiv, transpose: true });
     204                var pv = new my.PlotView({ model: this.model.get(attribute)[index], el: plotDiv, transpose: true });
    190205                pv.render();
    191206                plotDiv.appendTo(evt.element);
    … …  
    198213                });
    199214                rv.render();
    200             } else if (evt.name == 'Table' && !this.plotted[index].Table) {
    201                 this.plotted[index].Table = true;
    202                 var tevDiv = $('<div/>');
    203                 var tev = new my.TableEditView({ model: this.model.get('results')[index].Value, rowNames: this.model.get('results')[index].RowNames, useDatatable: true, el: tevDiv });
     215                plotDiv.width(rv.$el.width());
     216                plotDiv.height(rv.$el.height());
     217                pv.refresh();
     218            } else if (evt.name == 'Table' && !this.plotted[attribute][index].Table) {
     219                this.plotted[attribute][index].Table = true;
     220                var tevDiv = $('<div/>').css('overflow', 'scroll');
     221                var tev = new my.TableEditView({ model: this.model.get(attribute)[index].Value, rowNames: this.model.get(attribute)[index].RowNames, useDatatable: true, el: tevDiv });
    204222                tev.render();
    205223                tevDiv.appendTo(evt.element)
Note: See TracChangeset for help on using the changeset viewer.