Changeset 9166 for branches/OaaS/HeuristicLab.Services.Optimization.Web/Content/Styling.js

Timestamp:

01/15/13 15:50:53 (11 years ago)

Author:

fschoepp

Message:

#1888:

• Model: OptimizationScenario may be a tree of algorithms (and problems)
• Model: Renamed InputParameters to ProblemParameters (as they are the parameters of a problem)
• Model: Added JobExecutionDetails which contain Repetitions + Group (resource to use)
• ScenarioParser parses the new XML scenario files
• Website + Model: You are now able to add/remove rows from a table (no JavaScript involved yet)
• Website + Controller: Added repetitions (enables batch jobs) and group (resource to use) to OaaS which will be used by the controller to schedule the job
• Website: Updated templates to use new model structure
• Website + Scenarios: Added the new algorithm Benchmark Algorithm
• Controller: Added a singleton to make the (Azure/Mockup)-DAL exchangeable
• Controller: Added mockup classes for DAL + IScenarioManager
• Website/Result Page: Line Diagrams will be added via JavaScript, crawling their data using AJAX
• Website: Most configuration parameters can be set in the ServiceDefinition directly
• Added a mockup for the Membership classes: These can be used if no network connection is available or if other parts of the app shall be tested
• Scenarios: Updated TSP mappings to new xsd

File:

• branches/OaaS/HeuristicLab.Services.Optimization.Web/Content/Styling.js (modified) (3 diffs)

branches/OaaS/HeuristicLab.Services.Optimization.Web/Content/Styling.js

@@ -33 +33 @@
             show: true,
             placement: 'outsideGrid'
+        },
+        highlighter: {
+            show: true,
+            sizeAdjust: 7.5
         }
     });
+}
+
+function handleDatatableSelectionChanged(datatable, datarow) {
+    $.ajax({
+        url: '/chart/GetDatatableContent?datatable=' + datatable + '&datarow=' + datarow,
+
+        success: function (result) {
+            var plot = generatePlot('dataTableGraph', result)
+            plot.replot({ resetAxes: true });
+
+            var resizer = $("#dataTableGraph").closest('.resizable');
+            $(resizer).unbind('resizestop');
+            $(resizer).bind('resizestop', function (event, ui) {
+                var id = $(this).children('div').get(0).id;
+                $("#dataTableGraph").height($(this).height() * 0.96);
+                $("#dataTableGraph").width($(this).width() * 0.96);
+                plot.replot({ resetAxes: true });
+            });
+        },
+        error: function (jqXHR, textStatus, errorThrown) {
+            alert(textStatus);
+        }
+    });
+}
+
+function redrawAccordions() {
+    $(".collapsible").accordion("refresh");
+}
+
+function injectDatatableAnalyzer() {
+    var datatable = null;
+    var row = null;
+
+    // crawl datatables for current run results
+    if ($("#dataTable").length > 0) {
+        $.ajax({
+            url: '/chart/GetDatatables',
+
+            success: function (result) {
+                $("#dataTable").empty();
+                $.each(result.Datatables, function (index, tableName) {
+                    // http://stackoverflow.com/questions/1801499/how-to-change-options-of-select-with-jquery
+                    $("#dataTable").append($("<option></option>").attr("value", tableName).text(tableName));
+                });
+
+                // select first row
+                // http://stackoverflow.com/questions/1414276/how-to-make-first-option-of-select-selected-with-jquery
+                $("#dataTable").val($("#dataTable option:first").val());
+                // fire selection changed event
+                $("#dataTable").change();
+            },
+            error: function (jqXHR, textStatus, errorThrown) {
+                alert(textStatus);
+            }
+        });
+
+        $("#dataTable option:selected").each(function () {
+            datatable = $(this).text();
+        });
+
+        $("#dataTable").change(function () {
+            $("#dataTable option:selected").each(function () {
+                datatable = $(this).text();
+                $.ajax({
+                    url: '/chart/GetRowNames?datatable=' + datatable,
+
+                    success: function (result) {
+                        $("#dataRow").empty();
+                        $.each(result.RowNames, function (index, rowName) {
+                            // http://stackoverflow.com/questions/1801499/how-to-change-options-of-select-with-jquery
+                            $("#dataRow").append($("<option></option>").attr("value", rowName).text(rowName));
+                        });
+
+                        // select first row
+                        // http://stackoverflow.com/questions/1414276/how-to-make-first-option-of-select-selected-with-jquery
+                        $("#dataRow").val($("#dataRow option:first").val());
+                        // fire selection changed event
+                        //$("#dataRow").change();
+                    },
+                    error: function (jqXHR, textStatus, errorThrown) {
+                        alert(textStatus);
+                    }
+                });
+            });
+        });
+
+        $("#dataRow").change(function () {
+            $("#dataRow option:selected").each(function () {
+                row = $(this).text();
+                handleDatatableSelectionChanged(datatable, row);
+            });
+        });
+    }
+}
+
+function injectMatrixGraph() {
+    $(".matrix-graph").each(function (i) {
+        var tabable = $(this).closest(".tabable");
+        var id = this.id;
+        var resizerId = $(this).parent().get(0).id;
+        var indices = retrieveMatrix(id);
+        var graphCreated = false;
+
+        $(tabable).bind('tabsactivate', function (event, ui) {
+            if ($(ui.newPanel[0]).hasClass("resizable") && !graphCreated) {
+                graphCreated = true;
+                var id = $(ui.newPanel[0]).children("div")[0].id;
+                var resizerId = $("#" + id).parent().get(0).id;
+                var indices = retrieveMatrix(id);
+
+                $.ajax({
+                    url: '/Chart/GetMatrixContentForGraph?run=' + indices.runId + '&parameterOffset=' + indices.parameterOffset + "&showMarker=false",
+
+                    success: function (result) {
+                        var plot = generatePlot(id, result);
+                        tabable.bind('tabsshow', function (event, ui) {
+                            if (ui.index == 1 && plot._drawCount == 0) {
+                                plot.replot();
+                            }
+                            redrawAccordions();
+                        });
+                        var resizer = $("#" + id).closest('.resizable');
+                        $(resizer).bind('resizestop', function (event, ui) {
+                            var id = $(this).children('div').get(0).id;
+                            $("#" + id).height($(this).height() * 0.96);
+                            $("#" + id).width($(this).width() * 0.96);
+                            plot.replot({ resetAxes: true });
+                        });
+                    },
+                    error: function (jqXHR, textStatus, errorThrown) {
+                        alert(textStatus);
+                        alert(errorThrown);
+                    }
+                });
+            }
+        });
+    });
+}
+
+function injectTableModifiers() {
+    // TODO: Make row add / delete via javascript
+    var i = 10 + 20;
+    return i;
 }
 
@@ -108 +255 @@
 
     try {
-        $(".collapsible").accordion("resize",
-        {
+        $(".collapsible").accordion({
+            heightStyle: "content",
             collapsible: true,
             active: false
@@ -131 +278 @@
             $(this).resizable();
         });
-
-        $(".matrix-graph").each(function (i) {
-            var tabable = $(this).closest(".tabable");
-            var id = this.id;
-            var resizerId = $(this).parent().get(0).id;
-            var indices = retrieveMatrix(id);
-
-            $.ajax({
-                url: '/Chart/GetMatrixContentForGraph?run=' + indices.runId + '&parameterOffset=' + indices.parameterOffset + "&showMarker=false",
-
-                success: function (result) {
-                    var plot = generatePlot(id, result);
-                    tabable.bind('tabsshow', function (event, ui) {
-                        if (ui.index == 1 && plot._drawCount == 0) {
-                            plot.replot();
-                        }
-                    });
-                    var resizer = $("#"+id).closest('.resizable');
-                    $(resizer).bind('resizestop', function (event, ui) {
-                        var id = $(this).children('div').get(0).id;
-                        $("#"+id).height($(this).height() * 0.96);
-                        $("#" + id).width($(this).width() * 0.96);
-                        plot.replot({ resetAxes: true });
-                    });
-                },
-                error: function (jqXHR, textStatus, errorThrown) {
-                    alert(textStatus);
-                    alert(errorThrown);
-                }
-            });
-        });
-    } catch (e) {
-    }
+    } catch (e) {
+    }
+
+    injectMatrixGraph();
+    injectDatatableAnalyzer();
+    //injectTableModifiers();
 }
 );