From f858483e052518799d9360c6787a65bc636357d5 Mon Sep 17 00:00:00 2001 From: Sean McGregor Date: Fri, 21 Aug 2015 13:17:49 -0700 Subject: [PATCH 001/107] added server selection modal --- index.html | 116 +++++++++++++++++++++++++++++++++++++++++++++++++++- js/index.js | 29 +++++++++---- 2 files changed, 135 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index d34e04e..da2efa8 100644 --- a/index.html +++ b/index.html @@ -158,7 +158,8 @@

State Detail

- + + - -
-
+
+
-
+

-
+

@@ -130,6 +134,8 @@

State Distributions for a Fixed Time Step

+ +
@@ -144,8 +150,10 @@

0  

+

-
+
+
diff --git a/js/charts/fanchart.js b/js/charts/fanchart.js index 9024a9c..3b05265 100644 --- a/js/charts/fanchart.js +++ b/js/charts/fanchart.js @@ -332,7 +332,6 @@ function FanChart(stats, name, rollouts) { that.brush.extent(newExtent); that.brush(brushG.transition().duration(1000)); - //brushG.call(brush.event); } // Hover behaviors for time series lines diff --git a/js/context_panel.js b/js/context_panel.js index f733cdb..7214f30 100644 --- a/js/context_panel.js +++ b/js/context_panel.js @@ -82,6 +82,34 @@ var contextPanel = { cp.animate({width: contextPanel.expandedWidth}, 1200); }, + /** + * Hide the current chart and add the ability to re-display the chart + * from the affix panel. + */ + hideChart: function() { + $(".context-panel").hide(); + var chart = contextPanel.currentChart; + var node = chart.getDOMNode(); + $(node).fadeOut(400, function(){ + var button = $(" +

+

+ You can also explore a few suggested configurations for this domain, including: +

+
diff --git a/js/index.js b/js/index.js index e8f72e6..901ec34 100644 --- a/js/index.js +++ b/js/index.js @@ -131,6 +131,8 @@ var MDPVis = { MDPVis.server._addToHistory(data.eligiblePrimaryRollouts, data.primaryStatistics, $.param(q)); $("input").prop('disabled', false); + MDPVis.updateHash(); + // Affix the rollout count when scrolling down var countElement = $("#active-count"); countElement @@ -608,6 +610,7 @@ var MDPVis = { }); params.initialization = data; + params.dataSource = MDPVis.server.dataEndpoint; var newHash = encodeURIComponent(JSON.stringify(params)); window.location.hash = "#" + newHash; }, @@ -664,15 +667,6 @@ var MDPVis = { */ var hash = window.location.hash.substring(1); var params = JSON.parse(decodeURIComponent(hash)); - if( params.options && params.options.help === "hide") { - $(".help-message").hide(); - } - if( params.options && params.options.tooltip === "context" ) { - console.log("todo"); - } - if( params.dataSource ) { - MDPVis.server.dataEndpoint = params.dataSource; - } if( params.initialization ) { MDPVis.server._createButtons(params.initialization); MDPVis.server.getRollouts(); @@ -690,6 +684,16 @@ var MDPVis = { * in a modal window. */ selectSimulator: function() { + var hash = window.location.hash.substring(1); + if( hash.length > 0 ) { + var params = JSON.parse(decodeURIComponent(hash)); + if( params.dataSource ) { + MDPVis.server.dataEndpoint = params.dataSource; + $(".post-modal-show").show(); + MDPVis.initialize(); + return; + } + } $("button[data-open-link]").click(function(elem){ var openLink = elem.currentTarget.getAttribute("data-open-link"); window.open(openLink); From 653fc1e246f6f85abd9a8acd95674ef5a6698038 Mon Sep 17 00:00:00 2001 From: Sean McGregor Date: Mon, 28 Sep 2015 09:26:25 -0700 Subject: [PATCH 058/107] different icons per chart type --- js/charts/chart.js | 9 +++++++++ js/context_panel.js | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/js/charts/chart.js b/js/charts/chart.js index 2077f3c..1734f23 100644 --- a/js/charts/chart.js +++ b/js/charts/chart.js @@ -5,6 +5,9 @@ function Chart() { var that = this; + // The icon that will be displayed to add the chart. + this.chartIconClasses = "glyphicon glyphicon-plus"; + var DOMDiv = document.createElement("div"); DOMDiv.style.float = "left"; DOMDiv.setAttribute("class", "chart"); @@ -21,6 +24,9 @@ function DistributionChart() { Chart.call(this); var that = this; + // The icon that will be displayed to add the chart. + this.chartIconClasses = "glyphicon glyphicon-equalizer"; + /** * Determine the number of ticks on the x axis. * @param {object} extent The max and min value of the labels on the x axis. @@ -92,6 +98,9 @@ function TemporalChart() { this.getDOMNode().style.float = ""; var that = this; + // The icon that will be displayed to add the chart. + this.chartIconClasses = "glyphicon glyphicon-indent-left"; + /** * Show the context panel for this element, including the brush * state. diff --git a/js/context_panel.js b/js/context_panel.js index 7214f30..f291b37 100644 --- a/js/context_panel.js +++ b/js/context_panel.js @@ -96,7 +96,7 @@ var contextPanel = { "style": "display:none;" }); button.append($("", - {"class": "glyphicon glyphicon-plus"} + {"class": chart.chartIconClasses} )); button.append("Show Chart: " + chart.name); $(".show-chart-buttons").append(button); From b21166c1faa51a56a46dddbf5e1b433ab4ce0bea Mon Sep 17 00:00:00 2001 From: Sean McGregor Date: Mon, 28 Sep 2015 13:59:11 -0700 Subject: [PATCH 059/107] fixed changing time periods when brushed --- js/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/js/index.js b/js/index.js index 901ec34..d4ff84d 100644 --- a/js/index.js +++ b/js/index.js @@ -504,8 +504,9 @@ var MDPVis = { // If we have charts to update, else create all the things if ( Object.keys(MDPVis.charts.distributionCharts).length > 0 ) { for( var variableName in MDPVis.charts.distributionCharts ) { - MDPVis.charts.distributionCharts[variableName].updateData(data.filteredPrimaryRollouts, - MDPVis.render._createInitialStateAccessor(variableName, data.filters.filteredTimePeriod)); + var accessor = MDPVis.render._createInitialStateAccessor(variableName, data.filters.filteredTimePeriod); + MDPVis.charts.distributionCharts[variableName].updateData(data.eligiblePrimaryRollouts, accessor); + MDPVis.charts.distributionCharts[variableName].brushCounts(); } MDPVis.render.rendertemporalCharts( data.filteredPrimaryRollouts, From 94a71b6169318ad2d37a65d7395645263fa21e23 Mon Sep 17 00:00:00 2001 From: Sean McGregor Date: Mon, 28 Sep 2015 14:00:14 -0700 Subject: [PATCH 060/107] improved look and feel --- css/index.css | 25 ++++++++++++++++++++ index.html | 55 +++++++++++++++++++++++++++++-------------- js/charts/barchart.js | 2 +- js/charts/fanchart.js | 5 ++-- js/context_panel.js | 2 +- js/data.js | 47 ++++++++++++++++++++++++++++++++---- js/index.js | 6 ++--- 7 files changed, 111 insertions(+), 31 deletions(-) diff --git a/css/index.css b/css/index.css index 172fb9b..0f6ce72 100644 --- a/css/index.css +++ b/css/index.css @@ -273,3 +273,28 @@ body { .lighten { opacity: 0.5; } + +.counts { + font-weight: bold; + font-size: 1.4em; +} + +.affix-panel { + padding: 0px 5px 5px 0px; +} + +.text-right { + margin-right: 8px; +} + +.margin { + margin: 8px; +} + +.show-chart-button, .context-panel-button { + margin: 2px; +} + +.affix-top { + min-height: 60px; +} diff --git a/index.html b/index.html index d51d986..74216ed 100644 --- a/index.html +++ b/index.html @@ -32,10 +32,10 @@
- - @@ -136,21 +136,40 @@

-
-
- - -

-   - 0 - rollouts displayed of - 0 -   -

-
+
+
+
+ + + +
diff --git a/js/charts/barchart.js b/js/charts/barchart.js index c7bcb6a..0e64567 100644 --- a/js/charts/barchart.js +++ b/js/charts/barchart.js @@ -126,7 +126,7 @@ function BarChart (name, units, rollouts, accessor) { if( extent[0] === extent[1] ) { that.removeBrush(); } else { - data.filters.addFilter(that.name, extent); + data.filters.addFilter(that, extent); MDPVis.charts.updateAll(); that.updateContextPanel(); } diff --git a/js/charts/fanchart.js b/js/charts/fanchart.js index acdb57f..3e72e27 100644 --- a/js/charts/fanchart.js +++ b/js/charts/fanchart.js @@ -258,12 +258,11 @@ function FanChart(stats, name, rollouts) { extent[0][0] !== extent[1][0]; if ( eventNumberChange ) { data.filters.changeFilteredTimePeriod(eventNumber); - MDPVis.render.renderRollouts(data.eligiblePrimaryRollouts, data.primaryStatistics, false); + MDPVis.render.renderRollouts(false); } else { - var name = that.name; var newMax = extent[1][1]; var newMin = extent[0][1]; - data.filters.addFilter(name, [newMin, newMax]); + data.filters.addFilter(that, [newMin, newMax]); MDPVis.charts.updateAll(); } that.updateContextPanel(); diff --git a/js/context_panel.js b/js/context_panel.js index f291b37..6dd3795 100644 --- a/js/context_panel.js +++ b/js/context_panel.js @@ -92,7 +92,7 @@ var contextPanel = { var node = chart.getDOMNode(); $(node).fadeOut(400, function(){ var button = $(" +
+ + +
+

diff --git a/js/index.js b/js/index.js index cea2d6f..f505c1a 100644 --- a/js/index.js +++ b/js/index.js @@ -705,6 +705,11 @@ var MDPVis = { MDPVis.server.dataEndpoint = simulatorPath; MDPVis.initialize(); }); + $("#customServerSubmit").click(function(elem){ + $(".post-modal-show").show(); + MDPVis.server.dataEndpoint = $("#customServer").val(); + MDPVis.initialize(); + }); $('#serverSelectionModal').modal(); } From fd17b8461a9e0f101f5d1f18ae11d98e09d88acb Mon Sep 17 00:00:00 2001 From: Sean McGregor Date: Sun, 11 Oct 2015 09:03:32 -0700 Subject: [PATCH 065/107] update ticks on intersected bar chart --- js/charts/barchart.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/js/charts/barchart.js b/js/charts/barchart.js index 0e64567..566750a 100644 --- a/js/charts/barchart.js +++ b/js/charts/barchart.js @@ -202,9 +202,14 @@ function BarChart (name, units, rollouts, accessor) { comparedBinStep = (domainUnion[1] - domainUnion[0])/(numBins-1); + var tickFormat = this.chartTickFormat(domainUnion); + var tickCount = this.chartTickCount(domainUnion, tickFormat); x.domain(domainUnion) .nice(); - xAxis.scale(x); + xAxis + .scale(x) + .tickFormat(tickFormat) + .ticks(tickCount); y.domain([-1 * rollouts.length, 1 * rollouts.length]).range([height, 0]); From 730b9b1ac59932dc5df8f00db25fb28e38e86e67 Mon Sep 17 00:00:00 2001 From: Sean McGregor Date: Mon, 19 Oct 2015 16:41:42 -0400 Subject: [PATCH 066/107] added additional instructions on modal --- index.html | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/index.html b/index.html index 7b3df0d..5cc8ff0 100644 --- a/index.html +++ b/index.html @@ -284,6 +284,12 @@

+

+ After selecting one of these pre-set options, + you should select which server you want to + connect to by clicking "Open Connection to + Simulator." +

From e1aa7d94999ebbcb94c5ac960958e6049815506c Mon Sep 17 00:00:00 2001 From: Sean McGregor Date: Wed, 15 Jun 2016 14:16:28 -0700 Subject: [PATCH 067/107] updated messages on modal --- index.html | 55 ++++++++++++++++++------------------------------------ 1 file changed, 18 insertions(+), 37 deletions(-) diff --git a/index.html b/index.html index 5cc8ff0..62e3558 100644 --- a/index.html +++ b/index.html @@ -236,7 +236,7 @@

State Detail

data-simulator-path="http://72.11.240.133:5000/"> - +
@@ -252,7 +252,7 @@

- Connect to our simplified wildfire suppression simulator and optimizer. In this domain, + Connect to our wildfire suppression simulator and optimizer. In this domain, rewards are given by tree harvest volumes and costs are incurred by spending money on wildfire suppression. Letting a wildfire burn may reduce the harvestable timber, but it will also reduce fuels on the landscape and fire suppression expenses. This is @@ -261,34 +261,15 @@

- You can also explore a few suggested configurations for this domain, including: -

- -

- After selecting one of these pre-set options, - you should select which server you want to - connect to by clicking "Open Connection to - Simulator." + Since the wildfire simulator is computationally too expensive to evaluate for all the possible + parameter combinations, we implemented a Model Free Monte Carlo with independencies (MFMCi) + algorithm, which builds trajectories from a database of state transitions. You can read more + about MFMCi at its + repository.

@@ -297,7 +278,7 @@

@@ -339,6 +320,13 @@

Open Connection to localhost:3000

+
+ + +
+

@@ -346,7 +334,7 @@

@@ -372,13 +360,6 @@

Open an Issue to be Included -
- - -
-

@@ -387,7 +368,7 @@

From 80d5fe59db8c1e251d6d404f0a416a6122b73923 Mon Sep 17 00:00:00 2001 From: Sean McGregor Date: Wed, 15 Jun 2016 14:18:13 -0700 Subject: [PATCH 068/107] render up to 100 lines in the fan chart area --- css/index.css | 1 + js/charts/fanchart.js | 8 +++++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/css/index.css b/css/index.css index 0f6ce72..657dc04 100644 --- a/css/index.css +++ b/css/index.css @@ -218,6 +218,7 @@ body { .line { fill: none; stroke-width: 2px; + opacity: 0.3; } .state-detail { diff --git a/js/charts/fanchart.js b/js/charts/fanchart.js index 3e72e27..0362bef 100644 --- a/js/charts/fanchart.js +++ b/js/charts/fanchart.js @@ -167,7 +167,7 @@ function FanChart(stats, name, rollouts) { } // Show lines instead of percentiles if there are not many lines - if( data.filteredPrimaryRollouts.length < 20 ) { + if( data.filteredPrimaryRollouts.length <= 100 ) { this.renderLines(data.filteredPrimaryRollouts); return; } @@ -336,10 +336,12 @@ function FanChart(stats, name, rollouts) { // Hover behaviors for time series lines var lineMouseOver = function() { d3.select(this) - .style("stroke-width", "15px"); + .style("stroke", "rgb(255, 51, 102)") + .style("stroke-width", "8px"); } var lineMouseOut = function() { d3.select(this) + .style("stroke", "rgb(31, 119, 180)") .style("stroke-width", "2px"); } @@ -381,7 +383,7 @@ function FanChart(stats, name, rollouts) { } // Show lines if there are few enough, else unhide the fans - if( rollouts.length < 20 ) { + if( rollouts.length <= 100 ) { this.renderLines(rollouts); } else { for( var i = 0; i < paths.length; i++ ) { From 8e1510de9ff13d5a3a78742f023131eb057f9770 Mon Sep 17 00:00:00 2001 From: Sean McGregor Date: Wed, 15 Jun 2016 14:29:38 -0700 Subject: [PATCH 069/107] updated to new API --- index.html | 86 +++++++++++++++++++++------------------------------ js/data.js | 8 ++--- js/index.js | 89 ++++++++++++++++++++++++----------------------------- 3 files changed, 79 insertions(+), 104 deletions(-) diff --git a/index.html b/index.html index 62e3558..eca2af3 100644 --- a/index.html +++ b/index.html @@ -57,68 +57,52 @@